/* ==========================
   БАЗОВЫЕ СТИЛИ
========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --page-max: 1280px;

    /* Цвет шапки */
    --header-accent: #FDE047;             /* тёплый жёлтый */
    --header-accent-strong: rgba(253, 224, 71, 0.92);
    --header-accent-soft:   rgba(253, 224, 71, 0.25);
    --surface: #ffffff;
    --ink: #111;
    --muted: #6B7280;
}
body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', 'Helvetica Neue', sans-serif;
    background: #fff;
    color: var(--ink);
    font-weight: 300;
}
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

/* Заголовки — Manrope */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: 2.8rem; }
p  { font-size: 1rem; line-height: 1.5; }

/* ==========================
   ICON BUTTONS (messengers)
========================== */
.messenger-links {
    display: flex;
    gap: .8rem;
    align-items: center;
}
.messenger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /*box-shadow: 0 8px 20px rgba(0,0,0,.18);*/
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.messenger:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.messenger svg { width: 22px; height: 22px; }
.messenger.whatsapp { background: #25D366; }
.messenger.viber    { background: #7360F2; }
.messenger.telegram { background: #0088cc; }

/* Контурный режим для существующих SVG — фона нет, круглая обводка, линии в фирменный цвет */
.site-header .messenger--outline{
    width:44px;height:44px;border-radius:50%;
    background:transparent !important;
    border:1px solid currentColor;        /* круглый контур */
    color:inherit;
    display:inline-flex;align-items:center;justify-content:center;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-decoration: none;
    font-size: 22px;
    color: #ffffff;
}
.site-header .messenger--outline svg{ width:22px;height:22px;display:block; }

/* делаем ЛЮБЫЕ ваши пути контурными (перекрываем fill из исходного SVG) */
.site-header .messenger--outline svg,
.site-header .messenger--outline svg *{
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header .messenger--outline:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.14);
}

/* фирменные цвета (фон не используется) */
.site-header .messenger--outline.whatsapp{ color:#25D366; color: #00000077; }
.site-header .messenger--outline.viber   { color:#7360F2; color: #00000077; }
.site-header .messenger--outline.telegram{ color:#0088cc; color: #00000077; }


body.header-scrolled .messenger--outline {
    border: none;
}


/* ==========================
   HEADER
========================== */
.site-header{
    position: fixed; top:0; left:0; right:0;
    height: 120px;
    z-index: 1000;
    background: linear-gradient(180deg, var(--header-accent-strong) 0%, rgba(253,224,71,0.85) 100%);
    /* мягкая тень только в полном режиме */
    box-shadow: 0 18px 40px rgba(253,224,71,.35);
    backdrop-filter: blur(0px);
    transition:
            height .35s ease,
            background .35s ease,
            box-shadow .35s ease,
            backdrop-filter .35s ease;
}
.header-inner{
    max-width: var(--page-max);
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* слева нав, центр язык, справа мессенджеры */
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    transition: max-width .35s ease, padding .35s ease;
}
.nav-left{ display:flex; gap: 28px; align-items:center; justify-self: start; }
.nav-link{
    font-weight: 200;
    text-decoration: none;
    color: var(--ink);
    opacity: .9;
    transition: opacity .25s ease, transform .25s ease;
}
.nav-link:hover{ opacity: 1; transform: translateY(-1px); }

/* Burger (по умолчанию скрыт на десктопе) */
.burger{
    display:none;
    width: 46px; height: 46px;
    border-radius: 12px;
    border: none; background: transparent; color: var(--ink);
    align-items:center; justify-content:center;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    /* фиксация расположения полосок */
    flex-direction: column; gap: 5px;
}
.burger span{
    width: 24px; height: 2px; background: var(--ink); display:block; border-radius: 2px;
}

/* Язык */
.lang-switcher{ position: relative; justify-self: center; }
.lang-toggle{
    display:flex; align-items:center; gap:10px; height: 48px;
    padding: 0 16px; border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.06);
    background: transparent;
    color: var(--ink);
    /*box-shadow: 0 14px 32px rgba(0,0,0,.08);*/
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease, color .25s ease, border-color .25s ease;
}
.lang-toggle:focus-visible{ outline: 3px solid rgba(59,130,246,.35); }
.lang-flag{ width: 22px; height: 22px; border-radius: 50%; display:block; }
.lang-code{ font-weight: 800; letter-spacing: .02em; }
.lang-menu{
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    min-width: 240px; max-height: 60vh; overflow:auto;
    background: #fff; border: 1px solid rgba(15,23,42,0.06);
    border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.12);
    padding: 8px; display:none; z-index: 20;
}
.lang-switcher.open .lang-menu{ display:block; }
.lang-item{
    display:flex; align-items:center; gap:10px;
    padding: 10px 10px; border-radius: 10px;
    cursor: pointer; user-select: none;
    transition: background .2s ease, transform .2s ease;
}
.lang-item:hover{ background: #f6f7fb; }
.lang-item img{ width: 20px; height: 20px; border-radius: 50%; }
.lang-item .name{ font-weight: 600; }
.lang-item .code{ margin-left: auto; color: var(--muted); font-size: .85rem; }

/* выравнивание правого блока мессенджеров */
.header-side{ justify-self: end; }

/* Состояние прокрутки (компактная шапка, «плоская», разъезжается на всю ширину) */
.site-header.is-compact,
body.header-scrolled .site-header{
    height: 70px;
    background: var(--header-accent-soft);
    box-shadow: none;                  /* плоско */
    backdrop-filter: blur(14px);       /* лёгкое стекло */
}
.site-header.is-compact .header-inner,
body.header-scrolled .header-inner{
    max-width: 100%;
    padding: 0 24px;
}
.site-header.is-compact .lang-toggle,
body.header-scrolled .lang-toggle{
    box-shadow: none;                  /* плоско в компактном */
}

/* ==========================
   MOBILE
========================== */
@media (max-width: 768px){
    /* узкая шапка */
    .site-header{ height: 60px; }
    .site-header.is-compact,
    body.header-scrolled .site-header{ height: 56px; }

    /* сетка: только бургер слева и язык справа */
    .header-inner{ grid-template-columns: auto 1fr auto; padding: 0 16px; }
    .nav-left{ display: none; }             /* меню скрыто — только бургер */
    .header-side{ display: none; }          /* мессенджеры прячем */
    .burger{ display:flex; }                /* бургер видим */

    /* Бургер и язык — без фона по умолчанию */
    .burger{ background: transparent; box-shadow: none; }
    .lang-toggle{
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        padding: 0 10px; height: 44px;
    }
    .lang-toggle .lang-flag{ border: 2px solid #fff; } /* белый бордер у флага на мобилке */
    .lang-code{ font-weight: 800; }

    .lang-switcher{ justify-self: right; }

    /* При открытии — белая «плашка» */
    .lang-switcher.open .lang-toggle{
        background: #fff; border-color: rgba(15,23,42,0.06);
        box-shadow: 0 14px 32px rgba(0,0,0,.08);
    }

    /* выпадающий — привязываем к правому краю на мобилке */
    .lang-menu{ left: auto; right: 0; transform: none; min-width: 220px; }
}

/* ==========================
   MOBILE MENU OVERLAY
========================== */
.mobile-menu{
    position: fixed; inset: 0; z-index: 1200;
    background: #ffffff;                 /* белый фон меню */
    backdrop-filter: blur(16px);
    display: none; opacity: 0; transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
}
.mobile-menu.open{ display:block; opacity: 1; transform: translateY(0); height: 100vh; }
.mobile-close{
    position: absolute; top: 14px; right: 14px;
    width: 44px; height: 44px; border-radius: 12px;
    border: none; background: transparent; box-shadow: none; /* без фона у крестика */
}
.mobile-close span{
    position:absolute; top:50%; left:50%; width:20px; height:2px; background:#111; border-radius:2px;
}
.mobile-close span:first-child{ transform: translate(-50%,-50%) rotate(45deg); }
.mobile-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }

.mobile-nav{
    margin-top: 20vh;
    display:flex; flex-direction:column; align-items:center; gap: 60px; /* больше расстояния */
}
.mobile-link{
    text-decoration: none; color: #111; font-weight: 800; font-size: 1.35rem;
}
.mobile-messengers{
    margin-top: 60px; display:flex; gap: 60px; justify-content:center; /* больше расстояния */
}



/* ==========================
   SECTION BLEED (размытый градиент между секциями)
   — элемент вставляется МЕЖДУ секциями
   — отрицательные внешние отступы заставляют «заходить» на обе соседние
========================== */
.section-bleed{
    /* Управляем размеры через кастом-переменные при необходимости */
    --bleed-h: 760px;        /* общая высота «пятна» */
    --bleed-overlap: 280px;  /* насколько заходит под соседние секции (сверху и снизу) */

    position: absolute;
    z-index: -1;             /* уходит под контент обеих секций */
    height: var(--bleed-h);
    margin: calc(var(--bleed-overlap) * -1) 0;  /* перекрытие обеих секций */
    pointer-events: none;
    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -150vh;
    opacity: 0.5;
}

.section-bleed::before{
    content:"";
    position: absolute;
    inset: -25vh -10vw;      /* расширяем холст за пределы контейнера */
    filter: blur(160px);     /* сильное размытие как в hero */
    transform: translateZ(0);
    /* базовый многорадиальный фон (цвета сайта) */
    background:
            radial-gradient(60% 60% at 20% 30%, rgba(59,130,246,.40), transparent 60%),   /* синий */
            radial-gradient(55% 55% at 75% 35%, rgba(139,92,246,.38),  transparent 62%),  /* фиолетовый */
            radial-gradient(50% 50% at 50% 80%, rgba(253,224,71,.35),  transparent 60%);  /* жёлтый */
    opacity: 1;
}

/* Варианты расположения/акцента — можно чередовать */
.section-bleed--blue::before{
    background:
            radial-gradient(60% 60% at 18% 40%, rgba(59,130,246,.45), transparent 60%),
            radial-gradient(55% 55% at 78% 30%, rgba(139,92,246,.30), transparent 62%),
            radial-gradient(50% 50% at 55% 82%, rgba(253,224,71,.28), transparent 60%);
}

.section-bleed--violet::before{
    background:
            radial-gradient(60% 60% at 80% 35%, rgba(139,92,246,.46), transparent 60%),
            radial-gradient(55% 55% at 25% 30%, rgba(59,130,246,.34),  transparent 62%),
            radial-gradient(50% 50% at 50% 80%, rgba(253,224,71,.26),  transparent 60%);
}

.section-bleed--sun::before{
    background:
            radial-gradient(60% 60% at 50% 78%, rgba(253,224,71,.44),  transparent 62%),
            radial-gradient(55% 55% at 22% 30%, rgba(59,130,246,.32),  transparent 60%),
            radial-gradient(55% 55% at 78% 28%, rgba(139,92,246,.32), transparent 60%);
}

/* Тонкая настройка на узких экранах (чуть ниже и компактнее) */
@media (max-width: 768px){
    .section-bleed{
        --bleed-h: 560px;
        --bleed-overlap: 200px;
    }
    .section-bleed::before{ filter: blur(140px); }
}



/* ==========================
   HERO SECTION (как было)
========================== */
.hero-section{
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: end;
    flex-direction: column; text-align: center;
    padding: 2rem; overflow: hidden;
}
.hero-section::before{
    content:""; position:absolute; inset:0;
    background:
            linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, transparent 100%),
            radial-gradient(60% 60% at 50% 50%, rgba(59,130,246,.40), transparent 60%),
            radial-gradient(60% 60% at 40% 60%, rgba(236,72,153,.40), transparent 60%),
            radial-gradient(60% 60% at 60% 70%, rgba(34,197,94,.40),  transparent 60%),
            radial-gradient(60% 60% at 50% 80%, rgba(250,204,21,.40), transparent 60%);
    filter: blur(160px); z-index: -2;
}
.hero-section::after{
    content:"CTO"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family: 'Manrope', system-ui, sans-serif; font-weight:800; font-size:60vw; color: rgba(0,0,0,.05);
    z-index:-1; pointer-events:none; white-space:nowrap;
    bottom: -10vw;
}
.hero-section .small{ font-size:1.25rem; font-weight:400; margin-bottom:.3rem; color:#333; }
.hero-section h1{ font-size:3.6rem; margin-bottom:1.2rem; }
.hero-section .note{ margin-top:.5rem; font-size:.9rem; color:#555; max-width:400px; }

.hero-section small { font-size: 0.9rem; color: #777}

/* Voice button */
.hero-section .voice-record{
    position:relative; width:150px; height:150px; margin:2rem auto;
    cursor: pointer;
}
.hero-section .voice-icon{
    position:absolute; top:50%; left:50%;
    width:90px; height:90px; transform:translate(-50%,-50%);
    background:#3B82F6; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff;
    z-index:2; box-shadow: 0 0 20px rgba(59,130,246,.6);
}
.hero-section .voice-icon .icon{ width:45px; height:45px; }
.hero-section .pulse{
    position:absolute; top:50%; left:50%;
    width:150px; height:150px; border:2px solid rgba(59,130,246,.6);
    border-radius:50%; transform:translate(-50%,-50%);
    animation: pulse-wave 2s infinite;
}
.hero-section .pulse:nth-child(1){ animation-delay:0s; }
.hero-section .pulse:nth-child(2){ animation-delay:.6s; }
.hero-section .pulse:nth-child(3){ animation-delay:1.2s; }
@keyframes pulse-wave{
    0%{ transform: translate(-50%,-50%) scale(.7); opacity:.7; }
    100%{ transform: translate(-50%,-50%) scale(1.15); opacity:0; }
}

/* Quote */
.hero-quote{
    margin-top:5rem; display:flex; align-items:center; gap:6rem;
    max-width:900px; text-align:left;
}
.hero-quote .quote-photo{
    width:128px; height:128px; border-radius:50%; background:#fff; padding:6px;
    box-shadow:0 6px 16px rgba(0,0,0,.12); object-fit:cover;
}
.hero-quote .quote-text{
    position:relative; flex:1; font-size:16px; line-height:1.75; color:#333; padding:.25rem .5rem;
}
.hero-quote .quote-text em{ font-style:italic; color:#444; }

/* ← изменён блок: используем текст вместо SVG и увеличиваем нижнюю кавычку в 1.5 раза */
.hero-quote .quote-mark{
    position:absolute;
    color:#6B7280;
    font-family: serif;
    font-weight: 400;
    line-height: 1;
    font-size: 48px;          /* базовый размер как было */
}
.hero-quote .quote-mark.open{ top:-10px; left:-18px; }
.hero-quote .quote-mark.close{
    bottom:-8px; right:-18px;
}

/* Hero — адаптив */
@media (max-width: 1024px){
    .hero-section h1{ font-size:2.8rem; }
}
@media (max-width: 768px){
    /* опускаем контент ниже фикс-шапки (60px) + небольшой отступ */
    .hero-section{
        padding-top: calc(60px + 16px + 60px);
        /*height: 100vh;*/
    }

    .hero-section::before {
        filter: blur(117px);
    }

    .hero-section h1{ font-size:2rem; }
    .hero-section::after{
        font-size: 50vw;
        font-family: 'Arial Black, Space Grotesk', sans-serif;
        /* white-space: normal; */
        /* word-break: break-all; */
        /* line-height: 0.45; */
        letter-spacing: -26px;
        margin-top: calc(110px - 160px);
        width: 200vw;
        left: calc(100vw / 2 * -1);
        text-align: center;
        /* margin-left: 0; */
        right: unset;

        top: 80px;
        bottom: 0;
        margin: auto;
        margin-left: -11px;
    }
    .hero-section .voice-record{
        width:120px; height:120px;
        position: absolute;
        top: calc(100vh - 250px - 80px);
    }
    .hero-section .btn-primary {
        position: absolute;
        top: calc(100vh - 160px);
    }
    .hero-section .voice-icon{ width:70px; height:70px; }
    .hero-section .voice-icon .icon{ width:35px; height:35px; }
    .hero-section .pulse{ width:120px; height:120px; }

    .hero-quote{ flex-direction:column; align-items:center; text-align:center; gap:1rem; }
    .hero-quote .quote-photo{ margin-bottom:.75rem; }
    .hero-quote .quote-text{ font-size:15px; }
}




/* ==========================
   SOLUTIONS / TABS SECTION
   (плашки-вкладки с карточками)
========================== */
:root{
    --soln-bg: #F8FAFC;
    --soln-card: #ffffff;
    --soln-ink: #0F172A;
    --soln-muted: #64748B;

    /* эффекты */
    --soln-ring: rgba(59,130,246,.18);

    /* иконка: базовый серый круг + активный жёлтый слой */
    --soln-icon-bg: linear-gradient(180deg, #EEF2F7 0%, #E7ECF4 100%);
    --soln-icon-grad: linear-gradient(180deg, rgba(253,224,71,0.9) 0%, rgba(253,224,71,0.55) 100%);

    /* CTA: синий → сиреневый (в тонах сайта) */
    --soln-cta-grad: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}

.solutions{
    position: relative;
    padding: 72px 20px 96px;
    background: var(--soln-bg);
    overflow: hidden;
    padding-top: 120px;
}
.solutions-inner{
    max-width: var(--page-max);
    margin: 0 auto;
}
.solutions-title{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    text-align: center;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 32px;
    color: var(--soln-ink);
}

/* Grid */
.solutions-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Card: по умолчанию плоская; при наведении — становится белой */
.solution-card{
    position: relative;
    background: transparent;
    border: none;
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: none;
    will-change: background-color, transform, box-shadow;
    transition:
            background-color .28s ease,
            transform .28s ease,
            box-shadow .28s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    overflow: hidden;
}
.solution-card:hover,
.solution-card.active{
    background: var(--soln-card);
    box-shadow: 0 14px 36px rgba(0,0,0,.08);
    transform: translateY(-6px);
}

/* Icon: большой, круглый.
   В НЕактивном — серый круг под SVG.
   При hover/active поверх плавно проявляется жёлтый градиент.
*/
.solution-icon{
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--soln-icon-bg);
    margin-bottom: 14px;
    will-change: transform;
    transition: transform .28s ease;
    overflow: hidden; /* для псевдослоя */
}
.solution-icon::before{
    content:"";
    position:absolute; inset:0;
    border-radius:50%;
    background: var(--soln-icon-grad);
    box-shadow: 0 10px 24px rgba(253,224,71,.25);
    opacity: 0;
    transform: scale(1);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.solution-icon svg{
    width: 40px; height: 40px; display:block;
    color: #838e9d;
    transition: color .28s ease, fill .28s ease, stroke .28s ease;
}
.solution-icon svg *{
    transition: color .28s ease, fill .28s ease, stroke .28s ease;
}
.solution-card:hover .solution-icon,
.solution-card.active .solution-icon{
    transform: translateY(-1px);
}
.solution-card:hover .solution-icon::before,
.solution-card.active .solution-icon::before{
    opacity: 1;
    transform: scale(1.02);
}
.solution-card:hover .solution-icon svg,
.solution-card.active .solution-icon svg{
    color:#0B1021;
}

/* Texts */
.solution-name{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--soln-ink);
    transition: color .2s ease;
}
.solution-sub{
    color: var(--soln-muted);
    font-size: .97rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* Facts */
.solution-facts{
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 10px 14px;
    margin: 0 0 18px 0; padding: 0;
}
.solution-facts li{
    position: relative;
    padding-left: 12px;
    color: #334155;
    font-size: .92rem;
}
.solution-facts li::before{
    content:"•";
    position:absolute; left:0; top:0;
    color: #94A3B8;
}

/* CTA:
   — в неактивной карточке это текст с градиентной заливкой (без фона);
   — при hover/active превращается в кнопку с тем же градиентом.
   Плавность обеспечена псевдо-слоем ::before.
*/
.solution-cta{
    position: relative;
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
    font-weight: 800;
    border-radius: 999px;
    padding: 10px 16px;
    color: transparent;
    background-image: var(--soln-cta-grad);
    -webkit-background-clip: text;
    background-clip: text;
    white-space: nowrap;
    border: none;
    box-shadow: none;
    font-size: .92rem; /* чтобы на 1280 не переносилось */
    will-change: color, transform;
    transition:
            color .25s ease,
            transform .25s ease;
}
.solution-cta::before{
    content:"";
    position:absolute; inset:0;
    border-radius: 999px;
    background: var(--soln-cta-grad);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 22px rgba(59,130,246,.22), 0 0 0 1px rgba(255,255,255,.6) inset;
    pointer-events: none;
    z-index:-1;
}
.solution-card:hover .solution-cta,
.solution-card.active .solution-cta{
    color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    transform: translateY(-2px);
}
.solution-card:hover .solution-cta::before,
.solution-card.active .solution-cta::before{
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1100px){
    .solutions-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
    .solutions{ padding: 56px 16px 80px; }
    .solutions-grid{ grid-template-columns: 1fr; gap: 16px; }

    /* ВСЕ карточки выглядят как active на мобилке */
    .solution-card{
        min-height: 0;
        background: var(--soln-card);
        box-shadow: 0 14px 36px rgba(0,0,0,.08);
        transform: none;
    }
    .solution-icon::before{ opacity: 1; transform: scale(1.02); }
    .solution-icon{ transform: none; }
    .solution-icon svg{ color:#0B1021; }
    .solution-cta{
        color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        transform: none;
    }
    .solution-cta::before{ opacity: 1; transform: translateY(0); }
}



/* ==========================
   PROCESS TIMELINE (референсный стиль)
========================== */
.process-timeline{
    position: relative;
    /* fallback */
    background: #F8FAFC;
    /* градиент: от текущего к белому к низу */
    background: linear-gradient(180deg, #F8FAFC 0%, transparent 100%);
    padding: 80px 20px;
    overflow: hidden;
}
.process-inner{ max-width: var(--page-max); margin: 0 auto; }
.process-title{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    text-align: center;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
    line-height: 1.2;
    color: #0F172A;
    margin-bottom: 70px;
    margin-top: 40px;
}

/* Ось */
.timeline{
    --t-title-offset: 18px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 44px 1fr;  /* контент — ось — контент */
    row-gap: 44px;
}
.timeline::before{
    content:"";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--header-accent);
    border-radius: 999px;
    /*opacity: .29;*/
    z-index: 0;
}

.t-row{ display: contents; }

/* Точки */
.t-dot{
    grid-column: 2;
    justify-self: center;
    align-self: start;
    margin-top: 0;
    width: 22px; height: 22px;
    background: #fff;
    border: 6px solid var(--header-accent); /* #FDE047 */
    border-radius: 50%;
    z-index: 2;
}

/* Карточки */
.t-card{ max-width: 520px; margin-top: -6px; }
.t-card.left  { grid-column: 1; text-align: right; justify-self: end;}
.t-card.right { grid-column: 3; text-align: left;  justify-self: start; }

/* Синхронизируем вертикаль точки и флажка */
/*.t-row .t-dot + .t-card{ margin-top: var(--t-title-offset); }*/
.t-row .t-card + .t-dot{ margin-top: var(--t-title-offset); }

.t-card.left {
    margin-top: -73px;
}

/* Заголовок-флажок */
.t-title{
    position: relative;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    background: #0E3B4D;
    color: #fff;
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 12px;
}
.t-title.flag-left::after{
    content:"";
    position:absolute; top:50%; right:-10px; transform:translateY(-50%);
    border-left:11px solid #0E3B4D;
    border-top:13px solid transparent;
    border-bottom:14px solid transparent;
}
.t-title.flag-right::before{
    content:"";
    position:absolute; top:50%; left:-10px; transform:translateY(-50%);
    border-right:11px solid #0E3B4D;
    border-top:13px solid transparent;
    border-bottom:14px solid transparent;
}

/* Списки */
.t-list{
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 250px;
    color: #1F2937;
}
.t-list li{
    line-height: 1.2;
    margin: 0 0 1.75em 0;
}
.t-list li:last-child{ margin-bottom: 0; }

/* Мобилка: ось слева, весь контент справа */
@media (max-width: 820px){
    .process-timeline {
        padding-top: 0;
    }
    .timeline{
        grid-template-columns: 44px 1fr;
        row-gap: 24px;
    }
    .timeline::before{
        left: 22px; transform: none;
    }
    .t-dot{
        grid-column: 1;
        justify-self: center;
        align-self: start;
        margin-top: var(--t-title-offset);
        margin-top: 0;
    }
    .t-card,
    .t-card.left,
    .t-card.right{
        grid-column: 2 !important;
        text-align: left !important;
        justify-self: start !important;
    }

    /* Синхронизация точки и флажка на мобилке под оба порядка
       (dot→card и card→dot — на всякий случай) */
    .t-row .t-dot + .t-card{ margin-top: -6px !important; }
    .t-row .t-card + .t-dot{ margin-top: var(--t-title-offset) !important; }

    .t-title.flag-left::after,
    .t-title.flag-right::before{
        left: -10px; right: auto;
        border-right:12px solid #0E3B4D;
        border-left: none;
    }

    .timeline > .t-row:nth-of-type(3) > article.t-card.left {
        margin-top: -16px !important;
    }
    .timeline > .t-row:nth-of-type(4) > article.t-card.right {
        margin-top: -15px !important;
    }
}




/* ==========================
   COMMUNICATION & TRANSPARENCY (2×2)
   (локально к секции, чтобы не трогать другие блоки)
========================== */
.comm-section{
    /*background:#fff;*/
    /*background: linear-gradient(180deg, #ffffff 0%, transparent 100%);*/
    padding:72px 20px;
}
.comm-section .comm-inner{
    max-width:var(--page-max);
    margin:0 auto;
}

/* Grid 2×2 → 1×N на мобилке */
.comm-section .comm-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:42px;
    align-items:stretch;
}
@media (max-width: 800px){
    .comm-section .comm-grid{ grid-template-columns:1fr; }
    .comm-section{
        padding-top: 0;
    }
}

/* Карточка (как в референсе): мягкий серый фон, округлённые края */
.comm-section .spotlight-card{
    background:#F8FAFC;         /* тот же серый */
    background: #ffffff;
    border:1px solid rgba(15,23,42,.06);
    border-radius:18px;          /* закругление как у нас */
    padding:22px 24px 24px;
    box-shadow:0 10px 26px rgba(0,0,0,.06);
    display:flex; flex-direction:column; min-height: 380px; /* чтобы кнопка могла прижиматься вниз */
}

/* Верхняя строчка (микро-подзаголовок) — ближе к верху, без letter-spacing */
.comm-section .fc-micro{
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748B;
    margin-top: 4px;
    margin-bottom: 0px;
}

/* Заголовок карточки */
.comm-section .fc-title{
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:800;
    font-size:26px;              /* ↓ до 26px */
    line-height:1.25;
    color:#0F172A;
    margin:0 0 12px 0;
}

/* «Пункты» — делаем псевдосписком с галочкой */
.comm-section .fc-text{
    position:relative;
    color:#1F2937;
    line-height:1.55;
    padding-left:28px;           /* место под иконку */
    margin:0;                    /* сброс */
}
.comm-section .fc-text + .fc-text{
    margin-top:8px;              /* в 2 раза меньше прежнего (~16 → 8) */
}

/* Галочка (stroke 0.75) через inline-SVG */
.comm-section .fc-text::before{
    content:"";
    position:absolute; left:0; top:.15em;
    width:16px; height:16px;
    background-repeat:no-repeat;
    background-size:16px 16px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1021' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    opacity:.9;
}

/* Кнопка для скачивания — всегда у нижней кромки карточки */
.comm-section .fc-button{
    margin-top:auto;             /* прижимает вниз */
    align-self:flex-start;
    display:inline-flex; gap:10px; align-items:center;
    padding:12px 20px;
    border-radius:12px;          /* округлая как у нас */
    font-weight:800; font-size:.95rem;
    color:#fff; text-decoration:none;
    background:#3B82F6;          /* как «микрофон» в hero */
    box-shadow:0 12px 28px rgba(59,130,246,.25);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.comm-section .fc-button:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(59,130,246,.32);
}

/* На совсем узких — немного снижать минимальную высоту,
   чтобы кнопка не уезжала за пределы вьюпорта */
@media (max-width: 800px){
    .comm-section .fc-title {
        font-size: 22px;
    }
    .comm-section .spotlight-card{ min-height: 0; }
}




/* ==========================
   ABOUT / ОБО МНЕ
   (плоско, белый фон)
========================== */
.about-section{
    background: #F8FAFC;
    padding: 72px 20px;
}

.about-inner{
    max-width: var(--page-max, 1280px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: center;
    gap: 48px;
}

/* Фото: без тени, мягкие углы, обрезка по контейнеру */
.about-photo{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

/* Тексты — как на сайте (Manrope для заголовков) */
.about-title{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
    line-height: 1.2;
    color: var(--ink, #111);
    margin-bottom: 16px;
}

.about-text p{
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink, #111);
}

.about-text p + p{
    margin-top: 14px;
}

/* Адаптив */
@media (max-width: 1024px){
    .about-inner{
        grid-template-columns: 380px 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px){
    .about-inner{
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
    }
    .about-media{ order: -1; }   /* фото наверх */
    .about-title{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

    .about-photo{
        width: 50%;
        margin: auto;

    }
}




/* ==========================
   CASES / КЕЙСЫ
========================== */
:root{
    /* оттенки в тоне сайта */
    --cases-bg-1: transparent;
    --cases-bg-2: #E7F0FF;
    --case-card-bg: #F7FAFF;          /* светлее плашка */
}

.cases-section{
    position: relative;
    padding: 72px 20px;
    background: linear-gradient(180deg, var(--cases-bg-1) 0%, var(--cases-bg-2) 100%);
    overflow: hidden;
    padding-top: 100px;
}
.cases-inner{
    max-width: var(--page-max);
    margin: 0 auto;
}
.cases-title{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    text-align: center;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
    line-height: 1.2;
    color: #0F172A;
    margin-bottom: 80px;
    letter-spacing: .01em;

}

/* Карточка-герой, как на рефе */
.case-card{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;          /* контент одна колонка, медиа абсолютом */
    min-height: 420px;
    border-radius: 22px;
    background: var(--case-card-bg);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 16px 36px rgba(0,0,0,.08);
    padding: clamp(22px, 3vw, 36px);
    overflow: hidden;
    margin-bottom: 42px;
}

/* Текст слева */
.case-content{
    position: relative;
    z-index: 1;
    /* оставим место под иллюстрацию справа */
    padding-right: min(32vw, 360px);
}
.case-name{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
    line-height: 1.25;
    color: #0F172A;
    margin: 6px 0 10px;
}
.case-desc{
    color: #334155;
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 56ch;
}

/* Иллюстрация справа внизу; занимает правую часть, «прилипает» к нижнему правому углу */
.case-media{
    position: absolute;
    right: 0;
    bottom: -1%;
    width: 46%;
    max-width: 520px;
    height: auto;
    display: flex;
    align-items: end;
    justify-content: end;
    pointer-events: none;           /* чтобы не мешала кликам по кнопке */
    z-index: 0;
}
.case-media img{
    display: block;
    width: 90%;
    height: auto;
    object-fit: contain;
    object-position: right bottom;
    user-select: none;
}

/* CTA — жёлтая, как в палитре сайта; округлая + анимация */
.case-cta{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    color: #0B1021;
    background: var(--header-accent);                 /* #FDE047 */
    box-shadow: 0 14px 30px rgba(253,224,71,.35);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    overflow: hidden;
}
.case-cta svg{ transition: transform .25s ease; }
.case-cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(253,224,71,.45);
}
.case-cta:hover svg{ transform: translateX(4px); }

/* «Блик» при наведении (shine) */
.case-cta::after{
    content:"";
    position:absolute; top:-60%; left:-30%;
    width:30%; height:220%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    opacity:.0;
}
.case-cta:hover::after{
    opacity:.9;
    animation: caseShine .8s ease forwards;
}
@keyframes caseShine{
    0%   { left:-30%; }
    100% { left:130%; }
}

/* Адаптив — картинка уезжает вниз, высота карточки меньше */
@media (max-width: 900px){
    .case-card{ min-height: 380px; }
    .case-content{ padding-right: min(24vw, 240px); }
    .case-media{ width: 52%; right: -6%; }
    .cases-section{
        padding-top: 0;
    }
}
@media (max-width: 640px){
    .case-card{
        min-height: 0;
        padding-bottom: 160px;       /* место для иллюстрации, когда она снизу */
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
    }
    .case-content{
        padding-right: 0;
        order: 1;
        margin-top: 20px;
    }
    .case-media{
        position: static;
        order: 0;
        right: 0;
        bottom: 0;
        width: 80%;
    }
}



/* ==========================
   CONTACT / ФОРМА ОБРАТНОЙ СВЯЗИ
   — без отдельной плашки, на текущем фоне
========================== */
.contact-section{
    background: transparent;              /* используем фон предыдущей секции */
    background: var(--cases-bg-2);
    padding: 72px 20px;
    padding-bottom: 80px;
}
.contact-inner{
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;       /* 1/3 слева (кнопка), 2/3 справа (форма) */
    gap: 36px;
    align-items: center;
}

/* Заголовок и подзаголовок секции контактов */
.contact-head{
    grid-column: 1 / -1;          /* растянуть на всю ширину сетки секции */
    text-align: center;
    margin-bottom: 8px;
}
.contact-title{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
    line-height: 1.15;
    color: #0F172A;
}
.contact-sub{
    margin: 10px auto 0;
    max-width: 860px;
    color: #6B7280;
    line-height: 1.6;
    font-weight: 400;
    font-size: 1rem;
}

/* Левая колонка: центрируем кнопку записи */
.contact-left{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

/* Локальная копия «кнопки записи», стилистика как в hero */
.contact-section .voice-record{
    position:relative; width:150px; height:150px;
}
.contact-section .voice-icon{
    position:absolute; top:50%; left:50%;
    width:90px; height:90px; transform:translate(-50%,-50%);
    background:#3B82F6; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff;
    z-index:2; box-shadow: 0 0 20px rgba(59,130,246,.6);
    border:none; cursor:pointer;
}
.contact-section .voice-icon .icon{ width:45px; height:45px; }
.contact-section .pulse{
    position:absolute; top:50%; left:50%;
    width:150px; height:150px; border:2px solid rgba(59,130,246,.6);
    border-radius:50%; transform:translate(-50%,-50%);
    animation: pulse-wave 2s infinite;
}
.contact-section .pulse:nth-child(1){ animation-delay:0s; }
.contact-section .pulse:nth-child(2){ animation-delay:.6s; }
.contact-section .pulse:nth-child(3){ animation-delay:1.2s; }

/* Правая колонка: форма */
.contact-form{
    background: transparent;              /* без плашки */
    display: grid;
    gap: 16px;
}
.contact-form .form-group{ display: grid; gap: 8px; }
.contact-form label{
    font-weight: 700;
    font-family: 'Manrope', system-ui, sans-serif;
    color: #0F172A;
}
.contact-form input[type="email"],
.contact-form textarea{
    width: 100%;
    padding: 14px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    color: var(--ink);
    font: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.contact-form input[type="email"]:focus,
.contact-form textarea:focus{
    border-color: rgba(59,130,246,.6);
    box-shadow: 0 10px 24px rgba(59,130,246,.15);
}
.field-hint{ color:#6B7280; font-size: .85rem; }

/* Ошибка валидации — мягкий красный в тоне сайта */
.is-invalid{
    border-color: #EF4444 !important;
    box-shadow: 0 10px 24px rgba(239,68,68,.18) !important;
}

/* Кнопка отправки — общий «первичный» стиль */
.btn-primary{
    justify-self: start;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    border: none; cursor: pointer;
    font-weight: 800; color: #fff;
    background: #3B82F6;
    box-shadow: 0 14px 30px rgba(59,130,246,.25);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    text-decoration: none;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(59,130,246,.32);}
.btn-primary[disabled]{ opacity: .65; cursor: not-allowed; }

/* Адаптив */
@media (max-width: 900px){
    .contact-inner{ grid-template-columns: 1fr; }
    .contact-left{ min-height: 260px; }
    .contact-section .voice-record{ width:130px; height:130px; }
    .contact-section .voice-icon{ width:80px; height:80px; }
    .contact-section .voice-icon .icon{ width:40px; height:40px; }
    .contact-section .pulse{ width:130px; height:130px; }
    .contact-section{
        padding-top: 0;
    }
}


/* ==========================
   TOASTS / Диалоги результата
========================== */
.toast{
    position: fixed;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    z-index: 1200;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
    color: #0B1021;
    background: #fff;
}
.toast svg{ color: currentColor; }
.toast-success{ border:1px solid rgba(34,197,94,.25); color:#065F46; background: #ECFDF5; }
.toast-error{   border:1px solid rgba(239,68,68,.25); color:#7F1D1D; background: #FEF2F2; }
.hidden{ display: none !important; }





/* ==========================
   FAQ (аккордеон без JS)
========================== */
.faq-section{
    background:#F8FAFC;
    padding:72px 20px;
    padding-top: 120px;
    padding-bottom: 50px;
}
.faq-inner{
    max-width:var(--page-max);
    margin:0 auto;
}
.faq-title{
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:800;
    font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);
    line-height:1.15;
    color:#0F172A;
    text-align:center;
}
.faq-sub{
    text-align:center;
    margin:10px auto 26px;
    max-width:880px;
    color:var(--muted,#6B7280);
    line-height:1.6;
    margin-bottom: 50px;
}

/* список */
.faq-list{
    display:grid;
    gap:14px;
}

/* карточка вопроса */
.faq-item{
    background:#fff;
    border:1px solid rgba(15,23,42,.06);
    border-radius:16px;
    box-shadow:0 10px 26px rgba(0,0,0,.06);
    overflow:hidden;              /* чтобы скругления применялись к содержимому */
}

/* шапка вопроса */
.faq-q{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    cursor:pointer;
    user-select:none;
    color:#0F172A;
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:800;
    font-size:1.05rem;
    letter-spacing:.01em;
    transition: background .2s ease;
}
.faq-q:hover{ background:rgba(15,23,42,.02); }

.faq-q .chev{
    width:22px; height:22px;
    opacity:.8;
    transition: transform .25s ease, opacity .25s ease;
}

/* ответ — плавно разворачиваем за счёт max-height */
.faq-a{
    max-height:0;
    overflow:hidden;
    transition: max-height .35s cubic-bezier(.2,0,0,1), opacity .25s ease;
    opacity:.0;
}
.faq-a-in{
    padding:0 20px 18px 20px;
    color:#1F2937;
    line-height:1.6;
}

/* состояние "открыт": когда радио чекнуто */
.faq-toggle:checked + .faq-q .chev{ transform: rotate(180deg); opacity:1; }
.faq-toggle:checked + .faq-q + .faq-a{
    max-height:800px;   /* достаточно большой потолок для плавной анимации */
    opacity:1;
}

/* адаптив */
@media (max-width:640px){
    .faq-q{ padding:16px 16px; }
    .faq-a-in{ padding:0 16px 16px; }
}



/* ==========================
   FOOTER
   Желтый как шапка, чёрный текст
========================== */
.site-footer{
    position: relative;
    color: var(--ink, #111);
    background: linear-gradient(180deg, var(--header-accent-strong) 0%, rgba(253,224,71,0.85) 100%);
    padding: 72px 20px 28px;       /* основной блок + нижняя полоса */
    overflow: hidden;
    border-top: 1px solid rgba(15,23,42,.08);
}
.footer-inner{
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 28px;
    align-items: start;
}

/* Бренд */
.footer-logo{
    display: inline-flex;
    /*align-items: center; justify-content: center;*/
    width: 56px; height: 56px;
    /*border-radius: 14px;*/
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: .02em;
    /*background: #fff;*/
    color: var(--ink, #111);
    /*box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06) inset;*/
}
.footer-tagline{
    margin-top: 12px;
    max-width: 40ch;
    line-height: 1.55;
    opacity: .9;
}
.footer-messengers{ margin-top: 16px; }

/* Колонки */
.footer-col .ft-head{
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
    margin-bottom: 22px;
}
.ft-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ft-list a{
    color: var(--ink, #111);
    text-decoration: none;
    opacity: .92;
    transition: opacity .2s ease, transform .2s ease;
}
.ft-list a:hover{ opacity: 1; transform: translateY(-1px); }

/* Контакты — иконки через data-URI, stroke 1 для читабельности */
.contact-list li{ position: relative; padding-left: 26px; }
.contact-list li::before{
    content:""; position:absolute; left:0; top: .25em;
    width:18px; height:18px; background-size:18px 18px; background-repeat:no-repeat;
    opacity:.9;
}
.contact-list .i-mail::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v12H4z'/><path d='M22 7l-10 6L2 7'/></svg>");
}
.contact-list .i-phone::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.86 19.86 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.65 12.65 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11l-1.27 1.27a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.65 12.65 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.contact-list .i-map::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 1 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* CTA в футере */
.footer-cta .ft-text{ margin: 8px 0 14px; max-width: 36ch; }
.footer-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 12px 18px; border-radius: 12px; font-weight: 800;
    text-decoration: none; color: var(--ink, #111);
    background:#fff; box-shadow: 0 14px 30px rgba(0,0,0,.12);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.footer-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0,0,0,.18); background: #fefefe; }

/* Нижняя полоса */
.footer-bottom{
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,.12);
}
.bottom-inner{
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}
.copy{ opacity: .9; }
.legal-links{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.legal-links a{ color: var(--ink, #111); text-decoration:none; opacity:.9; }
.legal-links a:hover{ opacity:1; }

/* Адаптив */
@media (max-width: 980px){
    .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
    .footer-inner{ grid-template-columns: 1fr; gap: 22px; text-align: left; }
    .footer-brand{ margin-bottom: 4px; }
    .bottom-inner{ grid-template-columns: 1fr; row-gap: 10px; }
    .legal-links{ flex-wrap: wrap; }
}



/* ===== Voice Modal ===== */
.vm{ position:fixed; inset:0; z-index:1400; display:grid; place-items:center; }
.vm--hidden{ display:none !important; }

.vm-backdrop{
    position:absolute; inset:0;
    background: rgba(15,23,42,.35);
    backdrop-filter: blur(6px);
}

.vm-window{
    position:relative;
    width:min(720px, calc(100vw - 28px));
    background:#fff;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.22);
    padding:22px 22px 18px;
    z-index:1;
}

.vm-close{
    position:absolute; top:10px; right:10px;
    width:36px; height:36px;
    border:none; border-radius:10px;
    background:transparent; color:#0F172A;
    font-size:22px; line-height:1;
    cursor:pointer;
}

.vm-header{ padding-right:36px; margin-bottom:30px; }
.vm-title{
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:800; font-size:1.25rem; line-height:1.2; color:#0F172A;
}



/* Шкала и прогресс */
.vm-scale{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    font-size:.85rem;
    color:#64748B;
    margin: 8px 2px 6px;
}
.vm-scale span{ text-align:left; }
.vm-scale span:last-child{ text-align:right; }

.vm-progress{
    position:relative;
    height:44px;
    border-radius:999px;
    background: linear-gradient(180deg,#F3F6FB 0%, #EAF0F8 100%);
    border:1px solid rgba(15,23,42,.08);
    overflow:hidden;
}
.vm-progress__bar{
    position:absolute; inset:0 auto 0 0;
    width:0%;
    background: linear-gradient(90deg,#3B82F6,#8B5CF6);
    border-radius:999px;
    box-shadow: 0 6px 16px rgba(59,130,246,.28);
    transition: width .18s linear;
}
.vm-progress__label{
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:800;
    color:#0B1021;
    font-size:1.6rem;
    letter-spacing:.02em;
    pointer-events:none;
}

.vm-step{
    display:block;
    max-height: 70vh;
    overflow-y: auto;
    padding: 30px 10px;
    padding-top: 0;
}
.vm--hidden{ display:none !important; }

.vm-controls{
    display:flex; flex-wrap:wrap; gap:10px;
    align-items:center;
    margin: 50px 0 6px;
}
.vm-controls--center{ justify-content:center; }
.vm-controls--end{ justify-content:flex-end; }

.vm-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:12px; font-weight:800; cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
    height:44px; padding:0 16px; border:1px solid transparent;
}
.vm-btn--primary{
    background:#3B82F6; color:#fff; box-shadow:0 12px 28px rgba(59,130,246,.25);
}
.vm-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(59,130,246,.32); }
.vm-btn--ghost{
    background:#fff; color:#0F172A; border-color:rgba(15,23,42,.12);
}
.vm-btn--ghost:hover
.vm-btn--link{
    background:transparent; color:#334155; border-color:transparent; height:auto; padding:6px 8px;
}
.vm-btn[disabled]{ opacity:.6; pointer-events:none; }

.vm-block-title{
    margin: 10px 0 6px;
    font-family:'Manrope',system-ui,sans-serif;
    font-weight:800; color:#0F172A; font-size:1rem;
}

/* Заголовок/подзаголовок результата */
.vm-result-head{ margin: 6px 0 10px; }
.vm-subtext{ color:#64748B; font-size:.95rem; }

/* Кастомный селект (визуально) */
.vm-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
@media (max-width: 560px){ .vm-grid{ grid-template-columns:1fr; } }

.vm-field{ display:flex; flex-direction:column; gap:6px; font-size:.95rem; }
.vm-field > span{ color:#334155; font-weight:700; }
.vm-field input, .vm-field select{
    height:42px; border-radius:12px; border:1px solid rgba(15,23,42,.12);
    padding:0 12px; outline:none; font:inherit; color:#0F172A; background:#fff;
}
.vm-field input:focus, .vm-field select:focus{ border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

/* Внешний вид селекта как «красивой выпадашки», без изменения поведения */
.vm-select{ position:relative; }
.vm-select select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    padding-right:42px;
    background:#fff;
}
.vm-select::after{
    content:"";
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:18px; height:18px;
    background:#64748B;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
    pointer-events:none;
}

.vm-textarea{
    width:100%; border-radius:12px; border:1px solid rgba(15,23,42,.12);
    padding:10px 12px; font:inherit; color:#0F172A; background:#fff; resize:vertical;
}
.vm-textarea:focus{ border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.vm-loader{
    width:46px; height:46px; border-radius:50%;
    border:4px solid rgba(59,130,246,.25); border-top-color:#3B82F6;
    margin: 22px auto 12px; animation: vmspin 1s linear infinite;
}
@keyframes vmspin{ to{ transform: rotate(360deg); } }
.vm-sending-text{ text-align:center; color:#334155; }

/* Подсветка невалидной почты (в тон сайта) */
.is-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.18) !important; }