/* ============================================================
   Путь к себе — путь-к-себе.второйшанс.рф
   Дизайн-система по DEV_DESIGN.md (teal #0abab5).
   Светлый социальный лендинг: бирюзовая брендовая база,
   мягкие градиенты, glass-карточки, большие радиусы,
   тёплые sand-акценты, coral только для warning/error.
   ============================================================ */

/* ============================================================
   1. ТОКЕНЫ
   ============================================================ */
:root{
    /* Core brand */
    --primary:#0abab5;
    --primary-light:#20e2dd;
    --primary-dark:#088a86;
    --primary-soft:#ccfbf1;
    --primary-tint:#f0fdfa;
    --accent:#e11d48;
    --neutral-dark:#1f2937;
    --neutral-light:#f8fafc;
    --neutral-bg:#ffffff;
    --border-color:#e2e8f0;
    --success:#10b981;

    /* Brand aliases */
    --brand-main:var(--primary);
    --brand-main-rgb:10,186,181;
    --brand-core:#0ba8a3;
    --brand-dark:var(--primary-dark);
    --brand-deep:#086f6c;
    --brand-light:var(--primary-light);
    --brand-soft:var(--primary-soft);
    --brand-tint:var(--primary-tint);

    /* Text */
    --text-main:#142334;
    --text-strong:#0f1729;
    --text-secondary:#475569;
    --text-muted:#64748b;
    --text-soft:#94a3b8;
    --text-inverse:#ffffff;

    /* Backgrounds */
    --bg-page:#f8fafc;
    --bg-white:#ffffff;
    --bg-soft:#f0fdfa;
    --bg-cyan:#ecfeff;
    --bg-card:rgba(255,255,255,.88);
    --bg-warm:#faf7f1;

    /* Support accents */
    --blue-soft:#e8f3ff;
    --blue-main:#3b82f6;
    --sand-soft:#fcf8ef;
    --sand-main:#e9c98b;
    --coral-soft:#fff1f1;
    --coral-main:#e64452;
    --coral-dark:#c93242;
    --success-soft:#d1fae5;
    --success-main:var(--success);
    --success-dark:#047857;

    /* Borders */
    --border-soft:rgba(8,132,127,.10);
    --border-brand:rgba(10,186,181,.28);
    --border-strong:rgba(8,132,127,.22);
    --border-white:rgba(255,255,255,.62);

    /* Shadows */
    --shadow-soft:0 10px 30px rgba(15,48,60,.06);
    --shadow-card:0 18px 54px rgba(15,48,60,.08);
    --shadow-card-hover:0 24px 70px rgba(15,48,60,.11);
    --shadow-feature:0 28px 84px rgba(15,48,60,.10);
    --shadow-cta:0 14px 34px rgba(8,132,127,.24);

    /* Gradients */
    --gradient-primary:linear-gradient(135deg,#0abab5 0%,#0ba8a3 48%,#088a86 100%);
    --gradient-primary-hover:linear-gradient(135deg,#0ba8a3 0%,#088a86 55%,#086f6c 100%);
    --gradient-hero:
        radial-gradient(circle at 12% 18%,rgba(10,186,181,.16),transparent 34%),
        radial-gradient(circle at 84% 12%,rgba(32,226,221,.22),transparent 30%),
        radial-gradient(circle at 70% 82%,rgba(233,201,139,.28),transparent 32%),
        linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
    --gradient-section-soft:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%);
    --gradient-final-cta:
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.72),transparent 28%),
        radial-gradient(circle at 80% 70%,rgba(10,186,181,.20),transparent 34%),
        linear-gradient(135deg,#ccfbf1 0%,#ecfeff 52%,#ffffff 100%);
    --gradient-footer:
        radial-gradient(circle at 12% 18%,rgba(10,186,181,.16),transparent 30%),
        linear-gradient(180deg,#0f172a 0%,#08111f 100%);

    /* Layout / chrome */
    --header-h:80px;
    --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   2. БАЗА / RESET
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Атрибут hidden должен побеждать любые display-правила (.form-success{display:flex}, .form-grid{display:grid} и т.п.) */
[hidden]{display:none !important}

html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Onest',system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    color:var(--text-main);
    background:var(--bg-white);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img,svg{display:block;max-width:100%}
a{color:var(--primary-dark);text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
strong{font-weight:700}
::selection{background:var(--primary-soft);color:var(--brand-deep)}

:focus-visible{
    outline:3px solid rgba(10,186,181,.45);
    outline-offset:2px;
    border-radius:6px;
}

/* Якорь-алиас (#zayavka → форма) — компенсация sticky-хедера */
.anchor-alias{position:relative;top:-96px;display:block;height:0;visibility:hidden}

/* ============================================================
   3. КОНТЕЙНЕРЫ
   ============================================================ */
.container{
    width:min(100% - clamp(32px,5vw,96px),1360px);
    margin-inline:auto;
}
.container-wide{
    width:min(100% - clamp(32px,4vw,80px),1480px);
    margin-inline:auto;
}
.container-narrow{
    width:min(100% - 32px,900px);
    margin-inline:auto;
}

/* ============================================================
   4. ТИПОГРАФИКА
   ============================================================ */
h1{
    font-size:clamp(44px,6vw,76px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-.045em;
    color:var(--text-main);
}
h2{
    font-size:clamp(30px,3.6vw,52px);
    line-height:1.1;
    font-weight:750;
    letter-spacing:-.03em;
    color:var(--text-main);
}
h3{
    font-size:clamp(20px,2vw,26px);
    line-height:1.25;
    font-weight:700;
    letter-spacing:-.015em;
    color:var(--text-main);
}
p{color:var(--text-secondary)}

.grad-text{
    background:linear-gradient(135deg,var(--primary-dark),var(--primary));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

.eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--primary-dark);
    margin-bottom:14px;
}

.section-head{
    max-width:760px;
    margin:0 auto clamp(36px,4.5vw,64px);
    text-align:center;
}
.section-head p{
    margin-top:16px;
    font-size:clamp(16px,1.4vw,19px);
    color:var(--text-secondary);
}

/* ============================================================
   5. КНОПКИ
   ============================================================ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1.2;
    white-space:nowrap;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),
               background-color .25s,border-color .25s,color .25s;
}
.btn .ico-arrow{
    flex-shrink:0;
    transition:transform .25s var(--ease-out);
}
.btn:hover .ico-arrow{transform:translateX(4px)}

.btn-primary{
    background:var(--gradient-primary);
    color:#fff;
    box-shadow:var(--shadow-cta);
}
.btn-primary:hover{
    background:var(--gradient-primary-hover);
    transform:translateY(-2px);
    box-shadow:0 18px 44px rgba(8,132,127,.30);
    color:#fff;
}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.btn-secondary{
    background:rgba(255,255,255,.72);
    color:var(--primary-dark);
    border:1px solid var(--border-strong);
}
.btn-secondary:hover{
    background:var(--primary-tint);
    border-color:var(--primary);
    transform:translateY(-2px);
}

.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-compact{min-height:40px;padding:0 20px;font-size:14.5px}

/* ============================================================
   6. BLOBS — декоративные пятна
   ============================================================ */
.blob{
    position:absolute;
    border-radius:999px;
    filter:blur(70px);
    pointer-events:none;
    z-index:0;
}

/* hero */
.hero-blob-1{width:clamp(320px,30vw,560px);height:clamp(320px,30vw,560px);top:-140px;left:-160px;background:rgba(10,186,181,.18)}
.hero-blob-2{width:clamp(280px,24vw,480px);height:clamp(280px,24vw,480px);top:6%;right:-140px;background:rgba(32,226,221,.20)}
.hero-blob-3{width:clamp(240px,20vw,420px);height:clamp(240px,20vw,420px);bottom:-120px;left:34%;background:rgba(233,201,139,.22)}

/* directions */
.dir-blob-1{width:clamp(280px,24vw,520px);height:clamp(280px,24vw,520px);top:-100px;right:-160px;background:rgba(10,186,181,.14)}
.dir-blob-2{width:clamp(240px,20vw,440px);height:clamp(240px,20vw,440px);bottom:-140px;left:-140px;background:rgba(32,226,221,.14)}

/* психология — тёплый sand */
.psy-blob{width:clamp(280px,26vw,520px);height:clamp(280px,26vw,520px);top:12%;right:-180px;background:rgba(233,201,139,.24)}

/* форма заявки */
.req-blob-1{width:clamp(260px,22vw,480px);height:clamp(260px,22vw,480px);top:-80px;left:-160px;background:rgba(10,186,181,.16)}
.req-blob-2{width:clamp(240px,20vw,420px);height:clamp(240px,20vw,420px);bottom:-120px;right:-140px;background:rgba(32,226,221,.16)}

/* финальный CTA */
.cta-blob-1{width:clamp(280px,24vw,500px);height:clamp(280px,24vw,500px);top:-120px;left:-120px;background:rgba(10,186,181,.18)}
.cta-blob-2{width:clamp(240px,20vw,440px);height:clamp(240px,20vw,440px);bottom:-140px;right:-120px;background:rgba(32,226,221,.18)}
.cta-blob-3{width:clamp(200px,16vw,360px);height:clamp(200px,16vw,360px);top:30%;right:22%;background:rgba(233,201,139,.20)}

/* ============================================================
   7. HEADER
   ============================================================ */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    height:var(--header-h);
    background:transparent;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-bottom:1px solid transparent;
    transition:background-color .3s,border-color .3s,box-shadow .3s;
}
.site-header.solid{
    background:rgba(255,255,255,.78);
    border-bottom:1px solid var(--border-soft);
    box-shadow:0 8px 30px rgba(15,48,60,.06);
}

.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    gap:clamp(16px,2.5vw,40px);
}

.header-logos{
    display:flex;
    align-items:center;
    gap:clamp(12px,1.4vw,20px);
    flex-shrink:0;
}
.logo-img{height:38px;width:auto}
.logo-divider{
    width:1px;
    height:30px;
    background:rgba(20,35,52,.16);
    flex-shrink:0;
}
.np-lockup{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
.np-caption{
    font-size:11px;
    line-height:1.25;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--text-secondary);
    white-space:nowrap;
}

.header-nav{
    display:flex;
    align-items:center;
    gap:clamp(4px,.8vw,10px);
    margin-left:auto;
}
.header-nav a:not(.btn){
    font-size:15px;
    font-weight:600;
    color:var(--text-secondary);
    padding:9px 14px;
    border-radius:999px;
    transition:color .2s,background-color .2s;
}
.header-nav a:not(.btn):hover{
    color:var(--primary-dark);
    background:rgba(10,186,181,.08);
}
.header-nav .menu-cta{display:none}
.header-cta{flex-shrink:0}

/* Burger */
.burger{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    flex-shrink:0;
    margin-left:auto;
    border-radius:12px;
}
.burger span{
    position:absolute;
    left:10px;
    right:10px;
    height:2.5px;
    border-radius:3px;
    background:var(--text-main);
    transition:transform .3s var(--ease-out),opacity .2s,top .3s var(--ease-out);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
body.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{
    position:relative;
    overflow:hidden;
    background:var(--gradient-hero);
    padding:clamp(32px,4vw,56px) 0 clamp(48px,5vw,64px);
    margin-top:calc(-1 * var(--header-h));
    padding-top:calc(var(--header-h) + clamp(32px,4vw,56px));
}

.hero-route{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

.hero-grid{
    position:relative;
    z-index:1;
    min-height:calc(90vh - var(--header-h));
    display:grid;
    grid-template-columns:minmax(520px,.95fr) minmax(520px,1.05fr);
    gap:clamp(48px,6vw,96px);
    align-items:center;
}

.hero-copy{max-width:700px}
.hero-copy h1{max-width:680px}

.badge-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    margin-bottom:22px;
}
.badge-pill .dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--primary);
    flex-shrink:0;
}

.hero-sub{
    margin-top:22px;
    font-size:clamp(19px,1.8vw,25px);
    font-weight:600;
    line-height:1.4;
    color:#334155;
    max-width:620px;
}
.hero-desc{
    margin-top:14px;
    font-size:clamp(16px,1.3vw,18px);
    color:var(--text-secondary);
    max-width:560px;
}

.hero-cta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px;
}

.hero-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
}
.hero-chips li{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    border:1px solid var(--border-soft);
    color:var(--text-main);
    font-size:14px;
    font-weight:600;
}
.hero-chips li svg{color:var(--primary-dark);flex-shrink:0}

/* Визуал справа */
.hero-visual{position:relative}

.hero-image-box{
    position:relative;
    border-radius:36px;
    overflow:hidden;
    aspect-ratio:4/5;
    min-height:clamp(480px,52vw,680px);
    box-shadow:var(--shadow-feature);
    border:1px solid var(--border-white);
    background:
        radial-gradient(circle at 30% 25%,rgba(32,226,221,.35),transparent 55%),
        radial-gradient(circle at 75% 80%,rgba(233,201,139,.30),transparent 50%),
        linear-gradient(160deg,#ccfbf1 0%,#8fedef 55%,#0abab5 130%);
}
.hero-image-box img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
/* Фоллбек без фото — градиент уже в фоне, добавим мягкое «солнце» */
.hero-image-box.no-photo::before{
    content:"";
    position:absolute;
    left:50%;
    top:34%;
    width:44%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
}

.hero-glass{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    z-index:2;
    display:grid;
    gap:3px;
    padding:16px 20px;
    border-radius:20px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    box-shadow:0 12px 34px rgba(15,48,60,.12);
}
.hero-glass strong{
    font-size:16.5px;
    font-weight:800;
    color:var(--text-main);
}
.hero-glass span{font-size:14px;color:var(--text-secondary)}
.glass-dots{
    display:flex;
    gap:6px;
    margin-top:8px;
}
.glass-dots i{
    width:26px;
    height:5px;
    border-radius:999px;
    background:var(--primary);
    opacity:.9;
}
.glass-dots i:nth-child(2){opacity:.55}
.glass-dots i:nth-child(3){opacity:.3}

/* Floating chips */
.float-card{
    position:absolute;
    z-index:3;
    padding:11px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    border:1px solid var(--border-soft);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 12px 32px rgba(15,48,60,.12);
    color:var(--text-main);
    font-size:13.5px;
    font-weight:700;
    white-space:nowrap;
    animation:floatY 7s ease-in-out infinite;
}
.float-1{top:7%;left:-26px;animation-duration:7s}
.float-2{top:44%;right:-22px;animation-duration:9s;animation-delay:-2.5s}
.float-3{bottom:26%;left:-34px;animation-duration:6s;animation-delay:-1.2s}

@keyframes floatY{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

/* ============================================================
   9. СЕКЦИИ — общее
   ============================================================ */
.section{
    position:relative;
    padding-block:clamp(88px,9vw,132px);
}
.section > .container,
.section > .container-wide,
.section > .container-narrow{
    position:relative;
    z-index:1;
}

/* ============================================================
   10. О ПРОЕКТЕ
   ============================================================ */
.about{
    background:var(--bg-white);
    padding-block-start:clamp(72px,8vw,96px);
}

.about-grid{
    display:grid;
    grid-template-columns:minmax(520px,.95fr) minmax(480px,1.05fr);
    gap:clamp(56px,6vw,96px);
    align-items:start;
}

.about-text{max-width:680px}
.about-text h2{margin-bottom:22px}
.about-text p{margin-bottom:20px;font-size:clamp(16px,1.3vw,18px);line-height:1.68}
.about-text p strong{color:var(--text-main)}

.callout{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-top:26px;
    padding:20px 24px;
    border-radius:18px;
    background:var(--primary-tint);
    border-left:4px solid var(--primary);
}
.callout svg{color:var(--primary-dark);flex-shrink:0;margin-top:2px}
.callout p{
    margin:0;
    color:var(--primary-dark);
    font-weight:600;
    font-size:16px;
}

/* Схема «маршрут поддержки» */
.about-route-card{
    position:relative;
    min-height:460px;
    padding:32px;
    border-radius:28px;
    background:linear-gradient(180deg,#fff 0%,var(--primary-tint) 100%);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-card);
}
.route-title{
    font-size:clamp(18px,1.6vw,22px);
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--text-main);
    margin-bottom:30px;
}

.route-steps{display:grid;gap:0}
.route-step{
    position:relative;
    display:flex;
    gap:18px;
    align-items:center;
    padding-bottom:34px;
}
.route-step:last-child{padding-bottom:0}
/* пунктирная линия маршрута между иконками */
.route-step::before{
    content:"";
    position:absolute;
    left:26px;
    top:56px;
    bottom:2px;
    border-left:2px dashed rgba(10,186,181,.36);
}
.route-step:last-child::before{display:none}

.route-ico{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border-brand);
    box-shadow:0 8px 22px rgba(8,132,127,.12);
    color:var(--primary-dark);
}
.route-step strong{
    display:block;
    font-size:17px;
    color:var(--text-main);
    margin:0 0 3px;
}
/* только описательный span внутри текстового div — НЕ трогаем .route-ico (прямой span шага) */
.route-step > div > span{font-size:14.5px;color:var(--text-secondary);line-height:1.5;display:block}

.route-note{
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid var(--border-soft);
    font-size:14.5px;
    font-weight:600;
    color:var(--primary-dark);
}

/* ============================================================
   11. ПРОЕКТ ПОДДЕРЖИВАЮТ
   ============================================================ */
.supporters{
    background:
        radial-gradient(circle at 14% 18%,rgba(233,201,139,.18),transparent 30%),
        radial-gradient(circle at 88% 72%,rgba(10,186,181,.14),transparent 32%),
        linear-gradient(180deg,#fff 0%,#f8fafc 48%,#fff 100%);
    overflow:hidden;
    padding-block:clamp(78px,8vw,116px);
    padding-bottom:0;
}
.supporters-head{
    max-width:820px;
    margin:0 0 34px max(0px,calc((100% - 1480px)/2));
}
.supporters-head h2{
    max-width:760px;
    font-size:clamp(30px,3.2vw,48px);
    letter-spacing:0;
}
.supporters-head p{
    max-width:720px;
    margin-top:16px;
    font-size:18px;
    line-height:1.68;
    color:var(--text-secondary);
}
.supporters-blob-1{
    width:280px;
    height:280px;
    left:-110px;
    top:20px;
    background:rgba(233,201,139,.24);
}
.supporters-blob-2{
    width:360px;
    height:360px;
    right:-150px;
    bottom:-90px;
    background:rgba(10,186,181,.12);
}
.supporters-carousel{
    --supporter-card-w:360px;
    margin-top:8px;
}
.supporters .container-wide{
    width:min(100% - clamp(24px,3vw,56px),1600px);
}
.supporters-carousel.owl-carousel{display:block}
.supporters-carousel:not(.owl-loaded){
    display:flex;
    gap:22px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 0 18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
.supporters-carousel:not(.owl-loaded) .supporter-item{
    flex:0 0 var(--supporter-card-w);
    scroll-snap-align:start;
}
.supporters-carousel.owl-loaded .supporter-item{width:100%}
.supporters-carousel .owl-stage-outer{
    padding:10px 4px 34px;
    margin:-10px -4px -34px;
}
.supporters-carousel .owl-stage{
    display:flex;
    padding:0 0 clamp(78px,8vw,116px);
}
.supporters-carousel .owl-item{display:flex}
.supporter-item{display:flex;height:auto}
.supporter-card{
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:100%;
    border-radius:28px;
    background:rgba(255,255,255,.92);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-card);
    overflow:hidden;
    transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s;
}
.supporter-card:hover{
    transform:translateY(-5px);
    border-color:var(--border-brand);
    box-shadow:var(--shadow-card-hover);
}
.supporter-photo{
    position:relative;
    aspect-ratio:1;
    background:
        radial-gradient(circle at 28% 22%,rgba(255,255,255,.72),transparent 28%),
        linear-gradient(135deg,var(--primary-tint),var(--blue-soft));
    overflow:hidden;
}
.supporter-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.supporter-photo.no-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 36%,rgba(10,186,181,.24),transparent 28%),
        linear-gradient(135deg,var(--primary-tint),#fff);
}
.supporter-body{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:10px;
    padding:18px 16px 20px;
}
.supporter-badge{
    align-self:flex-start;
    max-width:100%;
    padding:7px 12px;
    border-radius:999px;
    background:var(--primary-tint);
    border:1px solid var(--border-brand);
    color:var(--primary-dark);
    font-size:12px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:0;
    text-transform:uppercase;
}
.supporter-body h3{
    font-size:18px;
    line-height:1.22;
    letter-spacing:0;
}
.supporter-body p{
    margin-top:0;
    font-size:14px;
    line-height:1.58;
    color:var(--text-secondary);
}
.supporters-carousel .owl-nav{
    position:absolute;
    right:max(0px,calc((100% - 1480px)/2));
    top:-78px;
    display:flex;
    gap:10px;
}
.supporters-carousel .owl-nav button.owl-prev,
.supporters-carousel .owl-nav button.owl-next{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border-brand);
    color:var(--primary-dark);
    box-shadow:0 12px 28px rgba(15,48,60,.09);
    transition:transform .24s var(--ease-out),background-color .24s,border-color .24s,color .24s;
}
.supporters-carousel .owl-nav button:hover{
    transform:translateY(-2px);
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}
.supporters-carousel .owl-nav button.disabled{
    opacity:.36;
    pointer-events:none;
}
.supporters-carousel .owl-nav span{
    display:block;
    margin-top:-2px;
    font-size:28px;
    line-height:1;
}
.supporters-carousel .owl-dots{display:none}

/* ============================================================
   12. ТРИ НАПРАВЛЕНИЯ
   ============================================================ */
.directions{
    background:linear-gradient(180deg,#fff 0%,var(--primary-tint) 100%);
    overflow:hidden;
}
.directions .section-head{margin-bottom:44px}

.directions-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:clamp(24px,2vw,36px);
    max-width:1360px;
    margin-inline:auto;
}

.direction-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:380px;
    padding:clamp(28px,2.4vw,40px);
    border-radius:30px;
    background:rgba(255,255,255,.9);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-card);
    overflow:hidden;
    transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
/* едва заметный характер каждого направления */
.direction-card.dir-edu{
    background:
        radial-gradient(circle at 88% -10%,rgba(59,130,246,.08),transparent 46%),
        rgba(255,255,255,.9);
}
.direction-card.dir-psy{
    background:
        radial-gradient(circle at 88% -10%,rgba(233,201,139,.16),transparent 46%),
        rgba(255,255,255,.9);
}
.direction-card.dir-med{
    background:
        radial-gradient(circle at 88% -10%,rgba(8,132,127,.10),transparent 46%),
        rgba(255,255,255,.9);
}
.direction-card:hover{
    transform:translateY(-6px);
    border-color:var(--border-brand);
    box-shadow:var(--shadow-card-hover);
}

.dir-badge{
    align-self:flex-start;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--primary-dark);
    background:var(--primary-soft);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:22px;
}

.dir-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--primary-tint);
    color:var(--primary-dark);
    margin-bottom:24px;
    transition:transform .3s var(--ease-out);
}
.direction-card:hover .dir-ico{transform:scale(1.06)}

.direction-card h3{margin-bottom:14px}
.direction-card p{
    font-size:15.5px;
    line-height:1.6;
    max-width:420px;
    margin-bottom:0;
}

.card-link{
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-top:auto;
    padding-top:24px;
    font-size:16px;
    font-weight:800;
    color:var(--primary-dark);
}
.card-link .ico-arrow{
    box-sizing:content-box;
    width:16px;
    height:16px;
    padding:7px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary-dark);
    transition:transform .25s var(--ease-out),background-color .25s,color .25s;
}
.direction-card:hover .card-link .ico-arrow,
.card-link:hover .ico-arrow{
    background:var(--gradient-primary);
    color:#fff;
    transform:translateX(3px);
}

/* ============================================================
   12. ПРОГРАММНЫЕ БЛОКИ (МКЦЭУ / М-СПРУТ / ПС клиника)
   ============================================================ */
.program{background:var(--bg-white)}
/* тёплый фон с самого верха — чтобы стык с белыми соседними .program был виден
   (иначе белый низ education сливается с белым верхом psychology → двойной отступ) */
.program-warm{
    background:linear-gradient(180deg,#faf6ee 0%,#fdfaf4 55%,#f9f4ea 100%);
    overflow:hidden;
}

.program-card{
    display:grid;
    grid-template-columns:minmax(460px,.9fr) minmax(560px,1.1fr);
    gap:clamp(40px,5vw,72px);
    align-items:stretch;
    padding:clamp(28px,3vw,44px);
    border-radius:36px;
    background:var(--bg-white);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-feature);
}
.program-card--reverse{
    grid-template-columns:minmax(560px,1.1fr) minmax(460px,.9fr);
}

.program-card__image{
    position:relative;
    align-self:stretch;
    min-height:440px;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(160deg,var(--primary-soft) 0%,#8fedef 60%,var(--primary) 140%);
}
.program-card__image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
/* фоллбеки без фото — свои оттенки для каждого направления */
.program-card__image.media-edu.no-photo{
    background:
        radial-gradient(circle at 25% 20%,rgba(59,130,246,.22),transparent 50%),
        linear-gradient(160deg,#e8f3ff 0%,#ccfbf1 55%,#20e2dd 140%);
}
.program-card__image.media-psy.no-photo{
    background:
        radial-gradient(circle at 75% 22%,rgba(233,201,139,.40),transparent 52%),
        linear-gradient(160deg,#fcf8ef 0%,#ccfbf1 60%,#8fedef 140%);
}
.program-card__image.media-med.no-photo{
    background:
        radial-gradient(circle at 30% 78%,rgba(8,132,127,.26),transparent 52%),
        linear-gradient(160deg,#f0fdfa 0%,#ccfbf1 50%,#0ba8a3 150%);
}
.program-card__image.no-photo::after{
    content:"";
    position:absolute;
    left:50%;
    top:42%;
    width:38%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);
}

.program-card__content{
    max-width:680px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.program-card__content h2{
    font-size:clamp(26px,2.6vw,40px);
    margin-bottom:14px;
}
.program-card__content > p{
    margin-bottom:14px;
    font-size:16px;
    line-height:1.65;
}
.program-sub{
    font-size:clamp(17px,1.5vw,21px) !important;
    font-weight:700;
    color:var(--primary-dark) !important;
}
.brand-strong{color:var(--primary-dark);font-weight:800}

.program-logo{margin:4px 0 18px}
.program-logo img{max-height:54px;width:auto}
.program-logo-photo img{max-height:64px;border-radius:12px}
.program-logo-cko img{max-height:64px;max-width:min(100%,300px)}

/* бейджи-особенности */
.badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0 24px;
}
.badge-row li{
    padding:8px 16px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-size:13.5px;
    font-weight:700;
}
.badge-row li.badge-warn{
    background:var(--coral-soft);
    color:var(--coral-dark);
}
/* контакт-пилюли: сайт / телефон / соцсети — кликабельные «облачка» */
.badge-row li.badge-link{
    padding:0;
    background:none;
}
.badge-row li.badge-link a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 15px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--border-soft);
    color:var(--primary-dark);
    font-size:13.5px;
    font-weight:700;
    transition:border-color .2s,box-shadow .2s,color .2s;
}
.badge-row li.badge-link a:hover{
    border-color:var(--primary);
    color:var(--primary);
    box-shadow:0 6px 16px rgba(8,132,127,.14);
}
.badge-row li.badge-link svg{width:15px;height:15px;flex-shrink:0}

/* privacy card (М-СПРУТ) */
.privacy-card{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:20px 24px;
    border-radius:18px;
    background:var(--primary-tint);
    border:1px solid rgba(10,186,181,.18);
    margin:18px 0;
}
.pc-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    flex-shrink:0;
    border-radius:50%;
    background:#fff;
    color:var(--primary-dark);
    box-shadow:0 6px 18px rgba(8,132,127,.12);
}
.privacy-card strong{display:block;color:var(--text-main);margin-bottom:4px;font-size:16px}
.privacy-card p{margin:0;font-size:14.5px}

/* important block (ПС клиника) */
.important-block{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:18px 20px;
    border-radius:20px;
    background:var(--coral-soft);
    border:1px solid rgba(230,68,82,.22);
    margin:18px 0;
}
.ib-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:50%;
    background:#fff;
    color:var(--coral-main);
    box-shadow:0 6px 18px rgba(201,50,66,.12);
}
.important-block strong{
    display:block;
    color:var(--coral-main);
    margin-bottom:4px;
    font-size:16px;
}
.important-block p{margin:0;font-size:14.5px;line-height:1.55}

/* строка CTA направления (после переноса контактов в бейджи содержит только кнопку) */
.contact-strip{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:8px;
}
.contact-strip .btn{min-width:186px}

.micro-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:16px;
    font-size:13.5px;
    color:var(--text-muted);
}
.micro-note svg{flex-shrink:0;margin-top:2px;color:var(--text-soft)}

/* ============================================================
   13. КАК ПОЛУЧИТЬ ПОМОЩЬ — TIMELINE
   ============================================================ */
.how{background:linear-gradient(180deg,var(--primary-tint) 0%,#fff 100%)}

.timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(18px,1.8vw,28px);
    align-items:start;
}
/* соединяющая линия на высоте номеров (карточки перекрывают её собой) */
.timeline::before{
    content:"";
    position:absolute;
    top:48px;
    left:24px;
    right:24px;
    height:2px;
    background:rgba(10,186,181,.30);
    z-index:0;
}

.step{
    position:relative;
    z-index:1;
    background:#fff;
    border:1px solid var(--border-soft);
    border-radius:24px;
    padding:26px 24px 28px;
    box-shadow:var(--shadow-soft);
    transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
.step:hover{
    transform:translateY(-5px);
    border-color:var(--border-brand);
    box-shadow:var(--shadow-card);
}

.step-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--primary-dark);
    color:#fff;
    font-size:18px;
    font-weight:800;
    margin-bottom:16px;
}
.step h3{font-size:18.5px;margin-bottom:8px}
.step p{font-size:15px;line-height:1.55;margin:0}

/* финальный бейдж «Вы не одни» — центрированный, под таймлайном */
.steps-final-badge{
    display:flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    margin:36px auto 0;
    padding:12px 24px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-size:15px;
    font-weight:800;
    box-shadow:0 10px 30px rgba(10,186,181,.18);
}
.steps-final-badge .dot{
    width:9px;
    height:9px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 5px rgba(10,186,181,.20);
}

/* ============================================================
   14. ФОРМА ЗАЯВКИ
   ============================================================ */
.request{
    background:
        radial-gradient(circle at 20% 10%,rgba(10,186,181,.14),transparent 32%),
        linear-gradient(180deg,var(--primary-tint) 0%,#fff 100%);
    overflow:hidden;
}

.request-form-card{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin-inline:auto;
    border-radius:32px;
    background:#fff;
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-feature);
    overflow:hidden;
    transition:box-shadow .5s var(--ease-out);
}
/* кратковременная подсветка при переходе к форме (JS вешает .flash) */
.request-form-card.flash{
    box-shadow:0 0 0 4px rgba(10,186,181,.35),var(--shadow-feature);
}

.form-head{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:clamp(18px,3vw,40px);
    padding:clamp(24px,2.6vw,30px) clamp(24px,3vw,40px);
    background:var(--gradient-primary);
    color:#fff;
}
.fh-text strong{
    display:block;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.01em;
    margin-bottom:6px;
}
.fh-text p{
    margin:0;
    color:rgba(255,255,255,.88);
    font-size:14.5px;
    max-width:520px;
}
.fh-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.fh-chips li{
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.32);
    color:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

/* сетка полей */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 28px;
    padding:clamp(28px,3.4vw,40px);
}
.form-field--full{grid-column:1 / -1}

.form-field label,
.form-field--full > label:not(.consent-wrap){
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--text-main);
    margin-bottom:8px;
}
.req{color:var(--coral-main);font-weight:700}

/* ВАЖНО: :not([type="checkbox"]) — иначе consent-чекбоксы растянутся на 100% */
.form-grid input:not([type="checkbox"]),
.form-grid select,
.form-grid textarea{
    width:100%;
    min-height:54px;
    padding:0 18px;
    border:1px solid #d8e6ea;
    border-radius:14px;
    background:#fff;
    color:var(--text-main);
    font-family:inherit;
    font-size:15.5px;
    transition:border-color .2s,box-shadow .2s;
}
.form-grid textarea{
    height:auto;
    min-height:120px;
    padding:14px 18px;
    line-height:1.55;
    resize:vertical;
}
.form-grid input::placeholder,
.form-grid textarea::placeholder{color:var(--text-soft)}
.form-grid input:not([type="checkbox"]):focus,
.form-grid select:focus,
.form-grid textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(10,186,181,.12);
}
.form-grid select{
    -webkit-appearance:none;
    appearance:none;
    padding-right:46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23088a86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
    cursor:pointer;
}
.form-grid select:invalid,
.form-grid select option[value=""]{color:var(--text-soft)}
.form-grid select option{color:var(--text-main)}

/* согласия — отдельный мягкий блок */
.consent-block{
    background:var(--primary-tint);
    border:1px solid var(--border-soft);
    border-radius:18px;
    padding:18px 20px;
}
.consent-wrap{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:13.5px;
    line-height:1.5;
    color:var(--text-muted);
    cursor:pointer;
}
.consent-wrap + .consent-wrap{margin-top:12px}
.consent-wrap a{
    color:var(--primary-dark);
    text-decoration:underline;
    text-underline-offset:2px;
}
.consent-wrap a:hover{color:var(--brand-deep)}
.consent-wrap input[type="checkbox"],
.consent-wrap .consent-checkbox{
    width:18px;
    height:18px;
    flex-shrink:0;
    margin-top:2px;
    accent-color:var(--primary-dark);
    cursor:pointer;
}

/* зона отправки */
.form-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 24px;
    margin-top:4px;
}
.form-actions .btn{flex-shrink:0}
.form-hint{
    margin:0;
    font-size:13.5px;
    color:var(--text-muted);
    max-width:440px;
}
#form_id_request_result{flex-basis:100%}
#form_id_request_result:empty{display:none}
#form_id_request_result .err{
    display:block;
    padding:12px 18px;
    border-radius:12px;
    background:#fff8f8;
    border:1px solid rgba(230,68,82,.18);
    color:var(--coral-dark);
    font-size:14.5px;
    font-weight:600;
}

/* success-состояние */
.form-success{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    padding:56px 32px;
    outline:none;
}
.fs-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:#fff;
    box-shadow:var(--shadow-cta);
    margin-bottom:6px;
}
.form-success strong{
    font-size:clamp(19px,1.8vw,24px);
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--text-main);
}
.form-success p{
    margin:0;
    max-width:520px;
    font-size:15.5px;
}

/* ============================================================
   15. FAQ
   ============================================================ */
/* мягкий cyan-тинт: низ .request белый — без тинта граница не читалась бы (двойной отступ).
   Белые faq-карточки заодно лучше «отрываются» от фона. */
.faq{background:linear-gradient(180deg,#eef9f8 0%,#f8fdfc 100%)}

.faq-item{
    background:#fff;
    border:1px solid var(--border-soft);
    border-radius:18px;
    margin-bottom:12px;
    overflow:hidden;
    transition:background-color .25s,border-color .25s;
}
.faq-item[open]{
    background:#f9fefe;
    border-color:var(--border-brand);
}

.faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 24px;
    font-size:17px;
    font-weight:700;
    color:var(--text-main);
    cursor:pointer;
    list-style:none;
    transition:background-color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item:not([open]) summary:hover{background:var(--primary-tint)}

/* иконка «плюс» из псевдоэлементов */
.faq-ico{
    position:relative;
    width:22px;
    height:22px;
    flex-shrink:0;
    transition:transform .3s var(--ease-out);
}
.faq-ico::before,
.faq-ico::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:var(--primary-dark);
    border-radius:2px;
    transform:translate(-50%,-50%);
}
.faq-ico::before{width:14px;height:2.4px}
.faq-ico::after{width:2.4px;height:14px}
.faq-item[open] .faq-ico{transform:rotate(45deg)}

.faq-body{padding:2px 24px 22px}
.faq-body p{
    margin:0;
    font-size:15.5px;
    line-height:1.6;
    color:var(--text-secondary);
}

/* ============================================================
   16. ФИНАЛЬНЫЙ CTA
   ============================================================ */
.final-cta{
    background:var(--gradient-final-cta);
    overflow:hidden;
    padding:clamp(72px,10vw,120px) 0;
}
.final-cta-inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
    max-width:720px;
}
.final-cta-inner h2{font-size:clamp(30px,4vw,54px)}
.final-cta-inner > p{
    font-size:clamp(16.5px,1.5vw,20px);
    color:var(--text-secondary);
}
.final-cta-inner .btn{margin-top:10px}
.cta-small{
    font-size:13.5px;
    color:var(--text-muted);
}
.cta-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}
.cta-chips li{
    padding:9px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid var(--border-soft);
    color:var(--primary-dark);
    font-size:13.5px;
    font-weight:700;
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer{
    position:relative;
    background:var(--gradient-footer);
    color:rgba(255,255,255,.72);
    overflow:hidden;
}
.site-footer a{
    color:rgba(255,255,255,.76);
    transition:color .2s;
}
.site-footer a:hover{color:var(--primary-light)}

.footer-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:clamp(40px,5vw,90px);
    padding:72px 0 0;
}

.footer-logos{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}
.footer-logos .logo-img{height:34px}
.footer-logos .logo-divider{background:rgba(255,255,255,.22)}
.footer-logos .np-caption{color:rgba(255,255,255,.72)}

.footer-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
    margin-bottom:10px;
    letter-spacing:-.01em;
}
.footer-desc{
    font-size:14.5px;
    color:rgba(255,255,255,.60);
    max-width:420px;
}

.footer-h{
    font-size:12.5px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.52);
    margin-bottom:18px;
}

.footer-nav{display:flex;flex-direction:column;align-items:flex-start}
.footer-nav a{
    padding:6px 0;
    font-size:15px;
    font-weight:600;
}

.footer-contacts .fc-item{margin-bottom:20px}
.footer-contacts .fc-item:last-child{margin-bottom:0}
.fc-item span{
    display:block;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.44);
    margin-bottom:5px;
}
.fc-item a{
    display:block;
    padding:3px 0;
    font-size:15px;
    font-weight:600;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px 28px;
    margin-top:56px;
    padding:24px 0 32px;
    border-top:1px solid rgba(255,255,255,.10);
}
.footer-legal{
    display:flex;
    flex-wrap:wrap;
    gap:8px 28px;
}
.footer-legal a{font-size:13.5px;color:rgba(255,255,255,.60)}
.footer-copy{
    margin:0;
    font-size:13.5px;
    color:rgba(255,255,255,.44);
}

/* ============================================================
   18. MOBILE STICKY CTA
   ============================================================ */
.mobile-cta{
    display:none;
    position:fixed;
    left:16px;
    right:16px;
    bottom:14px;
    z-index:50;
    align-items:center;
    justify-content:center;
    padding:17px 24px;
    border-radius:999px;
    background:var(--gradient-primary);
    color:#fff;
    font-size:16px;
    font-weight:800;
    text-align:center;
    box-shadow:0 16px 40px rgba(8,132,127,.36);
    /* показывается только после прокрутки 500+ px (body.cta-visible вешает JS) */
    opacity:0;
    transform:translateY(14px);
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
}
body.cta-visible .mobile-cta{opacity:1;transform:none;pointer-events:auto}
/* скрываем, когда форма на экране или открыто меню (классы вешает JS) */
body.form-in-view .mobile-cta,
body.supporters-in-view .mobile-cta,
body.menu-open .mobile-cta{display:none !important}

/* ============================================================
   19. REVEAL-ON-SCROLL
   ============================================================ */
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.reveal.in{opacity:1;transform:none}

/* stagger: карточки направлений */
.directions-grid .reveal:nth-child(2){transition-delay:.1s}
.directions-grid .reveal:nth-child(3){transition-delay:.2s}

/* stagger: шаги таймлайна (у <ol> один .reveal — анимируем детей) */
.timeline.reveal .step{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),
               box-shadow .3s var(--ease-out);
}
.timeline.reveal.in .step{opacity:1;transform:none}
.timeline.reveal.in .step:nth-child(2){transition-delay:.1s}
.timeline.reveal.in .step:nth-child(3){transition-delay:.2s}
.timeline.reveal.in .step:nth-child(4){transition-delay:.3s}

/* ============================================================
   20. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal,
    .timeline.reveal .step{
        opacity:1;
        transform:none;
        transition:none;
    }
    .float-card{animation:none}
    .btn,.btn .ico-arrow,.card-link .ico-arrow,
    .direction-card,.dir-ico,.step,.faq-ico{transition:none}
    .btn-primary:hover,.btn-secondary:hover,
    .direction-card:hover,.step:hover{transform:none}
}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */

/* ---------- ≤1280 ---------- */
@media (max-width:1280px){
    .hero-grid{
        grid-template-columns:minmax(440px,.95fr) minmax(440px,1.05fr);
        gap:clamp(36px,4vw,64px);
    }
    .program-card{grid-template-columns:minmax(380px,.9fr) minmax(440px,1.1fr)}
    .program-card--reverse{grid-template-columns:minmax(440px,1.1fr) minmax(380px,.9fr)}
    .about-grid{grid-template-columns:minmax(420px,.95fr) minmax(400px,1.05fr)}
}

/* ---------- ≤1199: header переходит в бургер-меню (иначе навигация не влезает) ---------- */
@media (max-width:1199px){
    /* header: burger-меню */
    .header-nav{
        position:fixed;
        top:var(--header-h);
        left:0;
        right:0;
        z-index:99;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        margin:0;
        padding:20px clamp(20px,5vw,32px) 28px;
        background:linear-gradient(180deg,#fff 0%,var(--primary-tint) 100%);
        border-bottom:1px solid var(--border-soft);
        box-shadow:0 24px 50px rgba(15,48,60,.14);
    }
    body.menu-open .header-nav{display:flex}
    .header-nav a:not(.btn){
        font-size:18px;
        padding:14px 16px;
        border-radius:14px;
    }
    .header-nav .menu-cta{
        display:inline-flex;
        justify-content:center;
        margin-top:14px;
        padding:16px 24px;
        font-size:16px;
    }
    .header-cta{display:none}
    .burger{display:block}
    body.menu-open{overflow:hidden}
}

/* ---------- ≤1024 ---------- */
@media (max-width:1024px){
    /* hero в одну колонку */
    .hero-grid{
        grid-template-columns:1fr;
        min-height:0;
        gap:44px;
    }
    /* грид-элементы должны сжиматься до дорожки, иначе aspect-ratio+min-height
       у .hero-image-box раздувает min-content колонки и текст обрезается */
    .hero-grid > *{min-width:0}
    .hero-copy{max-width:640px}
    .hero-visual{max-width:640px}
    .hero-image-box{
        aspect-ratio:4/3;
        min-height:clamp(320px,52vw,460px);
        /* не давать min-height через aspect-ratio раздувать ширину сверх колонки */
        max-width:100%;
    }

    /* about в одну колонку */
    .about-grid{grid-template-columns:1fr;gap:40px}
    .about-route-card{min-height:0}

    .supporters-head{max-width:680px}
    .supporters-carousel{
        --supporter-card-w:320px;
        margin-top:4px;
    }
    .supporters-carousel .owl-nav{display:none}

    /* направления: 2 в ряд */
    .directions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .direction-card{min-height:0}
    .directions-grid .reveal:nth-child(2){transition-delay:0s}

    /* program-карточки в колонку, изображение всегда сверху */
    .program-card,
    .program-card--reverse{grid-template-columns:1fr;gap:28px}
    .program-card__image{order:-1;min-height:clamp(260px,42vw,380px)}
    .program-card__content{max-width:none}

    /* таймлайн вертикально, линия слева */
    .timeline{
        grid-template-columns:1fr;
        gap:16px;
        padding-left:64px;
    }
    .timeline::before{
        top:12px;
        bottom:26px;
        left:21px;
        right:auto;
        width:2px;
        height:auto;
    }
    .step{padding:22px 22px 24px}
    .step-num{
        position:absolute;
        left:-64px;
        top:20px;
        margin:0;
        box-shadow:0 0 0 6px var(--primary-tint);
    }
    .step h3{margin-top:2px}
    .steps-final-badge{margin-top:24px}
    .timeline.reveal.in .step:nth-child(n){transition-delay:0s}
}

/* ---------- ≤768 ---------- */
@media (max-width:768px){
    :root{--header-h:68px}
    html{scroll-padding-top:84px}
    .anchor-alias{top:-84px}

    .container,
    .container-wide,
    .container-narrow{width:min(100% - 32px,100%)}

    .section{padding:clamp(56px,10vw,80px) 0}

    h1{font-size:clamp(34px,10vw,44px)}
    h2{font-size:clamp(27px,7.4vw,36px)}

    .logo-img{height:30px}

    .hero{padding-bottom:56px}
    .hero-cta{flex-direction:column;align-items:stretch}
    .hero-cta .btn{width:100%}
    .float-card{display:none}
    .hero-image-box{aspect-ratio:1;min-height:clamp(280px,64vw,400px)}

    /* квадратные фото в program-карточках на мобильной */
    .program-card__image{aspect-ratio:1;min-height:0}

    .callout{padding:16px 18px}

    .supporters{padding-top:62px;padding-bottom:0}
    .supporters-head{margin-bottom:26px}
    .supporters-head h2{font-size:32px}
    .supporters-head p{font-size:16px;line-height:1.62}
    .supporters-carousel{
        --supporter-card-w:280px;
        width:calc(100% + 16px);
    }
    .supporters-carousel.owl-loaded .supporter-item{width:var(--supporter-card-w)}
    .supporter-card{border-radius:24px}
    .supporter-body{padding:18px 18px 20px;gap:10px}
    .supporter-body h3{font-size:19px}
    .supporter-body p{font-size:14.5px}
    .supporter-badge{font-size:11px;padding:6px 10px}
    .supporters-carousel .owl-stage{padding-bottom:62px}

    .direction-card p{max-width:none}
    .directions-grid{grid-template-columns:1fr}
    .directions-grid .direction-card:last-child{grid-column:auto}

    .contact-strip{flex-direction:column;align-items:stretch}
    .contact-strip .btn{width:100%}

    /* форма в одну колонку */
    .form-grid{grid-template-columns:1fr;gap:18px}
    .form-head{grid-template-columns:1fr;gap:16px}
    .form-actions{flex-direction:column;align-items:stretch}
    .form-actions .btn{width:100%}
    .form-hint{max-width:none;text-align:center}

    .faq-item summary{padding:18px 18px;font-size:16px}
    .faq-body{padding:0 18px 18px}

    .final-cta-inner .btn{width:100%}

    .footer-grid{grid-template-columns:1fr;gap:40px;padding-top:56px}
    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        margin-top:40px;
        padding-bottom:96px; /* место под sticky mobile-cta */
    }

    .mobile-cta{display:flex}
}

/* ---------- ≤430 ---------- */
@media (max-width:430px){
    body{font-size:16px}
    .section{padding:52px 0}
    .hero-image-box{border-radius:26px}
    .program-card{padding:18px;border-radius:26px}
    .program-card__image{border-radius:20px;min-height:220px}
    .supporters-carousel{--supporter-card-w:276px}
    .supporters-head h2{font-size:29px}
    .request-form-card{border-radius:24px}
    .form-grid{padding:22px 18px 26px}
    .form-head{padding:22px 18px}
    .hero-glass{left:12px;right:12px;bottom:12px;padding:14px 16px}
    .badge-row li{font-size:12.5px;padding:7px 13px}
    /* на телефоне подпись «При информационной поддержке…» вылезала за край и сдвигала бургер —
       в шапке её прячем (полная атрибуция остаётся в футере), оставляем только два логотипа */
    .header-logos .np-caption{display:none}
    .header-logos .logo-divider{height:26px}
    .timeline{padding-left:56px}
    .step-num{left:-56px;width:38px;height:38px;font-size:16px}
    .timeline::before{left:18px}
    .mobile-cta{left:12px;right:12px;bottom:10px}
}