/* ==========================================================================
   0. ЗМІННІ (було 2 однакових :root — об'єднано в один)
   ========================================================================== */
:root{
    --bg:#0a0a0b;
    --bg-2:#151513;
    --gold:#C9A15A;
    --gold-light:#E3C489;
    --white:#F3F1EC;
    --muted:rgba(243,241,236,.62);
    --ease:cubic-bezier(.22,1,.36,1);
    --gold-metal:linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%);
}

/* ==========================================================================
   1. БАЗА
   ========================================================================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html{
    scrollbar-color:#C9A15A #eae2e2;
    scrollbar-width:thin;
}
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#f3eeee; }
::-webkit-scrollbar-thumb{ background-color:#300204; border-radius:5px; border:1px solid #120102; }
::-webkit-scrollbar-thumb:hover{ background-color:#4a0407; }

body{
    background:linear-gradient(to right, #3d0202 0%, #000000 40%);
    color:var(--white);
    font-family:'Montserrat', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
.display{ font-family:'Oswald', sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ==========================================================================
   2. СПІЛЬНІ КОМПОНЕНТИ ДИЗАЙН-СИСТЕМИ
   (kicker/insight/credential/tag/photo-frame/corner-frame раніше були
   продубльовані в КОЖНІЙ секції під однаковими іменами класів без прив'язки
   до батьківського блока — останнє оголошення в файлі "перебивало" всі
   попередні для ВСІХ секцій одразу. Тепер кожен компонент описаний 1 раз.)
   ========================================================================== */

.kicker{
    display:flex; align-items:center; gap:16px;
    font-family:'Oswald', sans-serif;
    font-size:clamp(11px,1.3vw,12.5px);
    font-weight:500; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold-light);
    margin-bottom:22px;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.kicker.in-view{ opacity:1; transform:translateY(0); }
.kicker .dash{ width:34px; height:1px; background:var(--gold); opacity:.6; flex-shrink:0; }

.corner{ position:absolute; border:1px solid var(--gold); }
.corner.tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; }
.corner.tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; }
.corner.br{ bottom:-6px; right:-6px; border-left:none; border-top:none; }

.insight{
    position:relative; z-index:2;
    max-width:820px;
    border:1px solid rgba(201,161,90,.35);
    padding:clamp(24px,3.6vw,40px);
    opacity:0; transform:translateY(20px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.insight.in-view{ opacity:1; transform:translateY(0); }
.insight .corner{ width:12px; height:12px; }
.insight p{
    font-size:clamp(16px,1.9vw,20px); line-height:1.6; font-style:italic;
    color:var(--gold-light);
    font-family:'Oswald', sans-serif; font-weight:500;
}
.insight p b{ color:var(--gold); font-weight:600; }

.credential, .tag{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(201,161,90,.35);
    padding:9px 18px;
    font-family:'Oswald', sans-serif;
    font-size:clamp(11px,1.3vw,12.5px);
    font-weight:500; letter-spacing:.05em; text-transform:uppercase;
    color:var(--gold-light);
    opacity:0; transform:translateY(14px);
    transition:opacity .6s var(--ease), transform .6s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.credential.in-view, .tag.in-view{ opacity:1; transform:translateY(0); }
.credential:hover, .tag:hover{ background:var(--gold-metal); color:var(--bg); }
.credential svg, .tag svg{ width:13px; height:13px; flex-shrink:0; }
.button-wrap{
    width: 100%;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-wrap .btn-framed{
    padding: 15px;
    border: 1px solid rgba(201, 161, 90);
    color: rgba(201, 161, 90);
}
.button-wrap .btn-framed:hover{
    color:var(--bg)
}
.btn-framed{
    position:relative;
    display:inline-flex; align-items:center; gap:16px;
    border:1px solid rgba(201,161,90,.5);
    padding:19px 34px;
    font-family:'Oswald', sans-serif;
    font-size:clamp(12px,1.4vw,13px);
    font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-light);
    transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn-framed::before{
    content:""; position:absolute; inset:0;
    background:var(--gold-metal);
    transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--ease); z-index:-1;
}
.btn-framed:hover{ color:var(--bg); border-color:var(--gold); }
.btn-framed:hover::before{ transform:scaleX(1); }
.btn-framed svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn-framed:hover svg{ transform:translateX(4px); }
.btn-framed .corner{ width:10px; height:10px; opacity:.9; }

/* фото-рамка: overflow:visible потрібен, щоб кутові засічки не обрізались,
   тому clip самого фото винесено в окрему внутрішню обгортку
   .photo-frame-inner — інакше збільшене при ховері фото вилазило б за рамку */
.photo-frame{
    position:relative;
    aspect-ratio:3/4;
    border:1px solid rgba(201,161,90,.4);
    overflow:visible;
    animation:frameFloat 6s ease-in-out infinite;
}
@keyframes frameFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.photo-frame .corner{ width:14px; height:14px; z-index:3; }
.photo-frame-inner{ position:relative; width:100%; height:100%; overflow:hidden; }
.photo-frame-inner::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(0deg, rgba(10,10,11,.55) 0%, transparent 40%);
}
.photo-frame img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    filter:grayscale(.15) contrast(1.05);
    transform:scale(1.06);
    transition:transform .8s var(--ease), filter .5s var(--ease);
}
.photo-frame:hover img{ transform:scale(1.12); filter:grayscale(0) contrast(1.05); }

.photo-glow{
    position:absolute; z-index:0; width:120%; height:80%; left:-10%; bottom:-10%;
    background:radial-gradient(closest-side, rgba(201,161,90,.16), transparent 70%);
    filter:blur(20px); pointer-events:none;
}

.nb-shield-badge{
    width:64px; height:64px;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold);
}
.nb-shield-badge svg{ width:100%; height:100%; }

@media (prefers-reduced-motion: reduce){
    .kicker, .insight, .credential, .tag, .photo-frame{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   3. ХЕДЕР
   ========================================================================== */
.site-header{
    position:sticky; top:0; z-index:80; height:80px;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,4vw,64px);
    background:linear-gradient(to right, #3d0202 0%, #000000 40%);
}
.logo{ display:flex; align-items:center; gap:12px; width:110px; height:70px; overflow:visible; margin-top:30px; }

.main-nav{ display:flex; gap:34px; }
.main-nav a{
    font-family:'Oswald', sans-serif; font-size:12.5px; font-weight:500;
    letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
    position:relative; padding:4px 0;
    transition:color .25s var(--ease);
}
.main-nav a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--gold); transition:width .25s var(--ease);
}
.main-nav a:hover{ color:var(--gold-light); }
.main-nav a:hover::after{ width:100%; }

.wrapper-social{ display:flex; align-items:center; margin-right:25px; z-index:100; gap:10px; }
.wrapper-social a{
    width:36px; height:36px; border-radius:50%;
    border: 1px solid rgba(201, 161, 90, .4);
    display:flex; align-items:center; justify-content:center;
    color:#a7864b;
    transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.wrapper-social a svg{ width:16px; height:16px; }
.wrapper-social a:hover{ color:#3b0202; background:var(--gold-metal); border-color:#eaa948; transform:translateY(-3px); }

.burger{ display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; z-index:110; }
.burger span{ width:24px; height:1.5px; background:var(--gold); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.nav-overlay{ position:fixed; inset:0; z-index:20; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.nav-overlay.active{ opacity:1; pointer-events:auto; }

.nav-panel{
    position:fixed; top:0; right:0; bottom:0; z-index:100;
    width:300px; max-width:82vw;
    background:linear-gradient(to right, #3d0202 0%, #000000 30%);
    border-left:1px solid rgba(201,161,90,.25);
    padding:100px 34px 40px;
    display:flex; flex-direction:column; gap:4px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
}
.nav-panel.active{ transform:translateX(0); }
.nav-panel a{
    font-family:'Oswald', sans-serif; font-size:15px; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
    padding:16px 0; border-bottom:1px solid rgba(201,161,90,.12);
    opacity:0; transform:translateX(16px);
}
.nav-panel.active a{ animation:navSlideIn .5s var(--ease) forwards; }
.nav-panel a:hover{ color:var(--gold); }
.nav-panel a:nth-child(1){ animation-delay:.08s; }
.nav-panel a:nth-child(2){ animation-delay:.14s; }
.nav-panel a:nth-child(3){ animation-delay:.2s; }
.nav-panel a:nth-child(4){ animation-delay:.26s; }
.nav-panel a:nth-child(5){ animation-delay:.32s; }
@keyframes navSlideIn{ to{ opacity:1; transform:translateX(0); } }

@media (max-width:1035px){ .main-nav{ display:none; } .burger{ display:flex; } }
@media (max-width:1035px){
    .nav-panel{ position:fixed; top:89px; right:0; bottom:0; z-index:50; width:100%; max-width:100vw; }
    .nav-panel a{ text-align:center; }
}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{
    position:relative; min-height:100vh;
    display:grid; grid-template-columns:1fr .95fr;
    padding-left:90px;
}

.rail{
    position:fixed; left:clamp(18px,3vw,40px); top:50%; transform:translateY(-50%);
    z-index:70;
    display:flex; flex-direction:column; align-items:center; gap:34px;
}
.rail .n{
    font-family:'Oswald', sans-serif; font-size:13px; letter-spacing:.06em; margin-bottom:-25px;
    color:var(--muted); opacity:0; transform:translateY(10px);
    transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease), font-weight .3s var(--ease);
}
.rail .n.in-view{ opacity:1; transform:translateY(0); }
.rail .n.active{ color:var(--gold); font-weight:600; }
.rail .line{ width:1px; height:70px; background:linear-gradient(var(--gold), transparent); opacity:0; transition:opacity .8s var(--ease) .2s; }
.rail .line.in-view{ opacity:1; }

.hero-copy{
    position:relative; z-index:3;
    display:flex; flex-direction:column; justify-content:center;
    padding:20px 32px 60px clamp(16px,3vw,32px);
    max-width:880px;
}

.headline{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(32px,3.1vw,58px); line-height:1.08; letter-spacing:.01em;
    margin-bottom:26px;
}
.headline .line{ display:block; opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.headline .line.in-view{ opacity:1; transform:translateY(0); }
.headline .l1{ color:var(--white); transition-delay:.05s; }
.headline .l2{ transition-delay:.16s; }
.headline .l2 .w-gold{
    background-image:repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%);
    -webkit-background-clip:text; background-clip:text;
    background-size:150%;
    -webkit-text-fill-color:transparent; color:transparent;
    filter:drop-shadow(0 0 1px rgba(255,200,0,.3));
    animation:MoveBackgroundPosition 6s ease-in-out infinite;
}
@keyframes MoveBackgroundPosition{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.headline .l3{ color:var(--white); transition-delay:.27s; }

.subtext{
    font-size:clamp(14.5px,1.6vw,17px); line-height:1.7; color:var(--muted);
    max-width:460px; margin-bottom:36px;
    opacity:0; transform:translateY(16px);
    transition:opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s;
}
.subtext.in-view{ opacity:1; transform:translateY(0); }

.cta-wrap{
    margin-bottom:44px;
    opacity:1; transform:translateY(16px);
    transition:opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s;
}
.cta-wrap.in-view{ opacity:1; transform:translateY(0); }

.divider{
    display:flex; align-items:center; margin-bottom:34px;
    opacity:0; transition:opacity .8s var(--ease) .55s;
}
.divider.in-view{ opacity:1; }
.divider .ln{ flex:1; height:1px; background:rgba(201,161,90,.25); }
.divider .dot{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); margin:0 12px; flex-shrink:0; }

.features{ display:flex; align-items:flex-start; flex-wrap:nowrap; gap:clamp(10px,2vw,22px); }
.feature{
    display:flex; align-items:center; gap:10px;
    flex:1 1 0; min-width:0;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.feature.in-view{ opacity:1; transform:translateY(0); }
.feature .ic{ width:34px; height:34px; color:var(--gold); flex-shrink:0; }
.feature .ic svg{ width:100%; height:100%; }
.feature p{ font-size:clamp(12px,1.5vw,13px); line-height:1.4; color:var(--muted); }
.feature p b{ display:block; color:var(--white); font-weight:600; }
.x-sep{ color:var(--gold); opacity:.5; font-size:16px; align-self:center; }

.hero-photo{
    position:relative; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to left, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    background-color:black;
}
.hero-photo::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(10,10,11,.5), transparent 40%); }
.hero-photo img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right 20%;
    opacity:0; transform:scale(1.08);
    transition:opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
.hero-photo.in-view img{ opacity:1; transform:scale(1); }

.scroll-dot{
    position:absolute; left:50%; bottom:122px; transform:translateX(-50%);
    width:12px; height:12px; border:1px solid var(--gold);
    background-color:var(--gold);
    z-index:99; cursor:pointer;
    animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{ opacity:.4; transform:translateX(-50%) rotate(45deg) scale(1);} 50%{ opacity:1; transform:translateX(-50%) rotate(45deg) scale(1.3);} }

@media (max-width:1570px){ .hero-photo img{ object-position:right 10%; } }
@media (max-width:1180px){
    .hero{ grid-template-columns:1fr; }
    .hero-photo{ width:100%; min-height:500px; mask-image:linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);}
    .hero-copy{ align-items:center; }
    .headline, .subtext{ text-align:center; }
    .scroll-dot{
        bottom: 12px;
    }
}
@media (max-width:760px){
    .hero{ padding-left:0; }
    .rail{ display:none; }
    .hero-copy{ padding:60px 22px 50px; }
    .features{ flex-direction:column; gap:16px; }
    .x-sep{ display:none; }
    .kicker{ text-align:center; }
    .scroll-dot{
        bottom: 12px;
    }
}


/* scoped under .program, same design tokens/components as the rest of the site */
.program{
    position:relative;
    max-width:1540px; margin:0 auto;
    padding:clamp(90px, 12vw, 140px) clamp(24px, 5vw, 64px) clamp(90px, 12vw, 130px) clamp(24px, 5vw, 64px);
    padding-left: calc(90px + clamp(24px, 5vw, 4px));
    overflow:hidden;
}

.kicker{
    display:flex; align-items:center; gap:16px;
    font-family:'Oswald', sans-serif; font-size:clamp(11px,1.3vw,12.5px);
    font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light);
    margin-bottom:22px;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.kicker.in-view{ opacity:1; transform:translateY(0); }
.kicker .dash{ width:34px; height:1px; background:var(--gold); opacity:.6; flex-shrink:0; }

.prog-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px, 2.8vw, 40px); line-height:1.1; letter-spacing:.01em;
    max-width:760px; margin-bottom:clamp(50px,7vw,70px);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.prog-title.in-view{ opacity:1; transform:translateY(0); }

/* ---- block A: framework cards ---- */
.block-heading{
    font-family:'Oswald', sans-serif; font-weight:500; text-transform:uppercase;
    font-size:clamp(18px,2.2vw,24px); letter-spacing:.02em; color:var(--gold-light);
    margin-bottom:clamp(28px,4vw,36px);
    opacity:0; transform:translateY(18px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.block-heading.in-view{ opacity:1; transform:translateY(0); }

.framework-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(18px,2.6vw,26px);
    margin-bottom:clamp(64px,9vw,90px);
}
.fw-card{
    position:relative;
    border:1px solid rgba(201,161,90,.25);
    background:linear-gradient(160deg, rgba(201,161,90,.05), transparent 60%);
    padding:clamp(26px,3vw,32px);
    opacity:0; transform:translateY(26px);
    transition:opacity .7s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.fw-card.in-view{ opacity:1; transform:translateY(0); }
.fw-card:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:0 26px 44px -22px rgba(201,161,90,.32); }
.fw-card .corner{ position:absolute; width:12px; height:12px; border:1px solid var(--gold); opacity:0; transition:opacity .3s var(--ease); }
.fw-card:hover .corner{ opacity:1; }
.fw-card .corner.tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; }
.fw-card .corner.tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; }
.fw-card .corner.bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; }
.fw-card .corner.br{ bottom:-6px; right:-6px; border-left:none; border-top:none; }

.fw-tag{
    display:block; font-family:'Oswald', sans-serif; font-size:11.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--gold); opacity:.75;
    margin-bottom:12px;
}
.fw-card h4{
    font-family:'Oswald', sans-serif; font-weight:500;
    font-size:clamp(17px,1.9vw,20px); line-height:1.35; color:var(--white);
    margin-bottom:14px;
}
.fw-card p{ font-size:clamp(13px,1.6vw,14.5px); line-height:1.75; color:var(--muted); }

/* ---- block B: numbered facts ---- */
.facts{ display:flex; flex-direction:column; gap:clamp(24px,3.4vw,30px); margin-bottom:clamp(56px,8vw,72px); }
.fact{
    display:flex; gap:22px; align-items:flex-start;
    padding-top:22px; border-top:1px solid rgba(201,161,90,.25);
    opacity:0; transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.facts-wrapper {
    display: grid;
    /* Створюємо двоколонкову сітку для десктопу:
       факти займають більше місця (например 1.2fr або 1fr), фото — менше */
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Відстань між блоком фактів та фотографією */
    align-items: flex-start; /* Вирівнювання по вертикалі (центрування) */
    width: 100%;
}

.facts-wrapper .photo-frame {
    position: relative;
    z-index: 2; /* Гарантує, що голова перекриває рамку */
    aspect-ratio: 1;
    /* Виводимо картинку вгору за рамку */
    margin-top: -50px; /* Регулюйте висоту виходу голови */
    /* Компенсуємо зміщення */
    width: 100%;
    height: 430px;
    min-height: 430px;

}

.facts-wrapper .photo-frame::before{
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;

    background-image: url('foto/fact-1.png');
    background-size: cover; /* Спокойно используем cover */
    background-position: center;
    background-repeat: no-repeat;

    /* Анимируем transform, а не background-size */
    transition: transform 0.4s ease;
    will-change: transform;

}

.facts-wrapper .photo-frame:hover::before{
    transform: scale(1.05);

}
.fact.in-view{ opacity:1; transform:translateY(0); }
.fact.in-view:hover .fact-num{
    background: var(--gold);
    color: var(--bg);
}


.fact-num{
    flex-shrink:0; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--gold); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald', sans-serif; font-weight:600; font-size:16px;transition: background-color 0.4s ease, color 0.4s ease;
}
.fact h4{
    font-family:'Oswald', sans-serif; font-weight:600; text-transform:uppercase;
    font-size:clamp(15.5px,1.8vw,17px); color:var(--white); margin-bottom:6px;
}
.fact p{ font-size:clamp(13px,1.6vw,14.5px); line-height:1.7; color:var(--muted); }

/* ---- quote ---- */
.insight{
    position:relative; z-index:2;
    max-width:820px;
    border:1px solid rgba(201,161,90,.35);
    padding:clamp(26px,3.6vw,38px);
    margin-bottom:clamp(56px,8vw,72px);
    opacity:0; transform:translateY(20px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.insight.in-view{ opacity:1; transform:translateY(0); }
.insight .corner{ position:absolute; width:12px; height:12px; border:1px solid var(--gold); }
.insight .corner.tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; }
.insight .corner.tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; }
.insight .corner.bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; }
.insight .corner.br{ bottom:-6px; right:-6px; border-left:none; border-top:none; }
.insight p{
    font-family:'Oswald', sans-serif; font-weight:500; font-style:italic;
    font-size:clamp(16px,1.9vw,20px); line-height:1.6; color:var(--gold-light);
}

/* ---- CTA ---- */
.prog-cta{
    display:flex; align-items:center; flex-wrap:wrap; gap:24px;
    opacity:0; transform:translateY(18px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.prog-cta.in-view{ opacity:1; transform:translateY(0); }
.prog-cta p{ font-size:clamp(14px,1.7vw,16px); color:var(--muted); max-width:280px; }

.btn-framed{
    position:relative;
    display:inline-flex; align-items:center; gap:16px;
    border:1px solid rgba(201,161,90,.5);
    padding:19px 34px;
    font-family:'Oswald', sans-serif; font-size:clamp(12px,1.4vw,13px);
    font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light);
    transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn-framed::before{
    content:""; position:absolute; inset:0; background:var(--gold-metal);
    transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); z-index:-1;
}
.btn-framed:hover{ color:var(--bg); border-color:var(--gold); }
.btn-framed:hover::before{ transform:scaleX(1); }
.btn-framed svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn-framed:hover svg{ transform:translateX(4px); }
.btn-framed .corner{ position:absolute; width:10px; height:10px; border:1px solid var(--gold); opacity:.9; }
.btn-framed .corner.tl{ top:-5px; left:-5px; border-right:none; border-bottom:none; }
.btn-framed .corner.tr{ top:-5px; right:-5px; border-left:none; border-bottom:none; }
.btn-framed .corner.bl{ bottom:-5px; left:-5px; border-right:none; border-top:none; }
.btn-framed .corner.br{ bottom:-5px; right:-5px; border-left:none; border-top:none; }

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .kicker, .prog-title, .block-heading, .fw-card, .fact, .insight, .prog-cta{ opacity:1 !important; transform:none !important; }
}

@media (max-width:965px){ .framework-grid{ grid-template-columns:1fr; } .facts-wrapper {
                                                                            grid-template-columns: 1fr; /* Одна колонка */
                                                                            gap: 32px;
                                                                        }}
@media (max-width:760px){
    .program{ padding-left:clamp(24px,5vw,64px); }
    .fact{ flex-direction:column; gap:10px; }
    .prog-cta{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:920px){
.photo-frame img {
    width: 100%;
    height: 120%;
    object-position: top left;}
}

/* ==========================================================================
   5. СЕКЦІЯ 2 — .problem
   ========================================================================== */
.problem{
    position:relative;
    padding:clamp(90px,12vw,140px) clamp(24px,5vw,64px) clamp(90px,12vw,130px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    overflow:hidden;
    max-width:1540px; margin:0 auto;
    display:grid; grid-template-columns:1.2fr .8fr;
    gap:clamp(30px,5vw,60px);
    align-items:center;
}
.problem-copy{ position:relative; z-index:2; }
.problem-photo{ position:relative; opacity:1;  transition:opacity 1s var(--ease), transform 1s var(--ease); }
.problem-photo.in-view{ opacity:1; transform:translateY(0) scale(1); }

.p-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.1; letter-spacing:.01em;
    max-width:720px; margin-bottom:clamp(40px,6vw,56px);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.p-title.in-view{ opacity:1; transform:translateY(0); }

.p-body{ position:relative; z-index:2; max-width:680px; margin-bottom:clamp(50px,7vw,68px); }
.p-lead{
    font-size:clamp(14.5px,1.6vw,17px); line-height:1.8; color:var(--muted);
    border-left:2px solid rgba(201,161,90,.4);
    padding-left:24px;
    opacity:0; transform:translateY(18px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.p-lead.in-view{ opacity:1; transform:translateY(0); }
.p-lead + .p-lead{ margin-top:22px; }

.statement{
    position:relative; z-index:2; max-width:820px;
    font-family:'Oswald', sans-serif; font-weight:500;
    font-size:clamp(21px,2.6vw,32px); line-height:1.45; color:var(--white);
    margin-bottom:clamp(44px,6vw,60px);
    opacity:0; transform:translateY(20px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.statement.in-view{ opacity:1; transform:translateY(0); }
.statement .muted{ color:var(--muted); opacity:.55; text-decoration:line-through; text-decoration-color:rgba(201,161,90,.5); text-decoration-thickness:1.5px; }
.statement .gold{ color:var(--gold); }

@media (max-width:950px){
    .problem{ grid-template-columns:1fr; padding-left:calc(90px + clamp(24px,5vw,64px)); }
    .problem-photo{ order:1; max-width:340px; margin:0 auto 30px; }
}
@media (max-width:760px){ .problem{ padding-left:clamp(24px,5vw,64px); } }

/* ==========================================================================
   6. СЕКЦІЯ 3 — .solution
   ========================================================================== */
.solution{
    position:relative; max-width:1540px; margin:0 auto;
    padding:clamp(90px,12vw,140px) clamp(24px,5vw,64px) clamp(90px,12vw,130px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    overflow:hidden;
    display:grid; grid-template-columns:.8fr 1.2fr;
    gap:clamp(30px,5vw,60px); align-items:center;
}
.solution-copy{ position:relative; z-index:2; }

.s-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.1; letter-spacing:.01em;
    margin-bottom:clamp(46px,6vw,64px);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.s-title.in-view{ opacity:1; transform:translateY(0); }

.benefits{ display:flex; flex-direction:column; gap:clamp(30px,4vw,40px); margin-bottom:clamp(50px,7vw,64px); }
.benefit{
    display:flex; gap:20px; align-items:flex-start;
    padding-top:24px; border-top:1px solid rgba(201,161,90,.3);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.benefit.in-view{ opacity:1; transform:translateY(0); }
.benefit .b-icon{ width:38px; height:38px; color:var(--gold); flex-shrink:0; }
.benefit .b-icon svg{ width:100%; height:100%; }
.benefit h3{
    font-family:'Oswald', sans-serif; font-weight:600; text-transform:uppercase;
    font-size:clamp(17px,2vw,22px); line-height:1.3; color:var(--white); margin-bottom:10px;
}
.benefit p{ font-size:clamp(13px,1.6vw,14.5px); line-height:1.75; color:var(--muted); max-width:520px; }

.emblem-wrap{
    position:relative; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.92);
    transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.emblem-wrap.in-view{ opacity:1; transform:scale(1); }
.emblem-frame{
    position:relative; width:min(480px,100%); aspect-ratio:1;
    border:1px solid rgba(201,161,90,.35);
    display:flex; align-items:center; justify-content:center;
    animation:emblemFloat 7s ease-in-out infinite;
}
.emblem-frame::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('foto/solution-1.png');
    background-size:100%; background-position: center; background-repeat:no-repeat;

}
@keyframes emblemFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.emblem-frame .corner{ width:14px; height:14px; z-index:3; }
.emblem-svg{
    width:70%; height:70%; color:var(--gold);

    animation:emblemSpin 40s linear infinite;
}
@keyframes emblemSpin{ to{ transform:rotate(360deg); } }
.emblem-svg .still{ animation:none; }

.emblem-shield{
    position:absolute; z-index:4; bottom:-8%; right:-6%;
    width:74px; height:74px;
    background:var(--bg-2); border:1px solid rgba(201,161,90,.4); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 28px -10px rgba(0,0,0,.6);
}
.emblem-shield svg{ width:60%; height:60%; color:var(--gold); }
.emblem-glow{
    position:absolute; z-index:0; width:120%; height:120%;
    background:radial-gradient(closest-side, rgba(201,161,90,.14), transparent 70%);
    filter:blur(30px); pointer-events:none;
}

@media (max-width:950px){
    .solution{ grid-template-columns:1fr; }
    .emblem-wrap{ order:1; margin-bottom:20px; }
    .emblem-frame{ width:min(500px,100%); }
}
@media (max-width:760px){ .solution{ padding-left:clamp(24px,5vw,64px); padding-top:0; } }

/* ==========================================================================
   7. СЕКЦІЯ 4 — .method
   ========================================================================== */
.method{
    position:relative; max-width:1540px; margin:0 auto;
    padding:clamp(90px,12vw,140px) clamp(24px,5vw,64px) clamp(90px,12vw,130px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    overflow:hidden;

}

.m-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.1; letter-spacing:.01em;
    max-width:760px; margin-bottom:clamp(40px,6vw,50px);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.m-title.in-view{ opacity:1; transform:translateY(0); }

.intro-row{
    display:flex; align-items:flex-start; gap:26px; max-width:820px;
    margin-bottom:clamp(60px,8vw,84px);
    opacity:0; transform:translateY(20px);
    transition:opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s;
}
.intro-row.in-view{ opacity:1; transform:translateY(0); }
.nb-shield{
    flex-shrink:0; width:64px; height:64px;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold);
    animation:shieldPulse 3s ease-in-out infinite;
}
.nb-shield svg{ width:100%; height:100%; }
@keyframes shieldPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
.intro-row p{ font-size:clamp(14.5px,1.7vw,17px); line-height:1.75; color:var(--muted); }
.intro-row p b{ color:var(--gold-light); font-weight:600; }

.steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,30px); margin-bottom:35px; }
.track{ position:absolute; z-index:0; top:27px; left:0; width:70%; height:1px; background:repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); opacity:.4; }
.step{ position:relative; z-index:1; opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.step.in-view{ opacity:1; transform:translateY(0); }
.step-num{
    position:relative; z-index:2; width:54px; height:54px; border-radius:50%;
    background:var(--bg); border:1px solid var(--gold); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald', sans-serif; font-weight:600; font-size:19px;
    margin-bottom:26px;
    transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.step:hover .step-num{ background:var(--gold); color:var(--bg); transform:scale(1.08); }
.step-card{ position:relative; border-top:1px solid rgba(201,161,90,.25); padding-top:22px; transition:transform .35s var(--ease); }
.step:hover .step-card{ transform:translateY(-4px); }
.step-icon{ width:26px; height:26px; color:var(--gold); margin-bottom:16px; opacity:.85; }
.step-icon svg{ width:10%; height:10%; }
.step-tag{ font-family:'Oswald', sans-serif; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); opacity:.7; display:block; margin-bottom:6px; }
.step-card h3{ font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(17px,2vw,20px); color:var(--white); margin-bottom:12px; }
.step-card p{ font-size:clamp(13px,1.6vw,14.5px); line-height:1.7; color:var(--muted); }

.method-cta{ margin-top:clamp(48px,7vw,64px); opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s; }
.method-cta.in-view{ opacity:1; transform:translateY(0); }

@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:34px; } .track{ display:none; } }
@media (max-width:760px){
    .method{ padding-left:clamp(24px,5vw,64px); padding-top:0; }
    .intro-row{ flex-direction:column; gap:16px; }
}

/* ==========================================================================
   8. СЕКЦІЯ 5 — .why
   ========================================================================== */
.why{
    position:relative; max-width:1540px; margin:0 auto;
    padding:clamp(90px,12vw,140px) clamp(24px,5vw,64px) clamp(90px,12vw,130px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    overflow:hidden;
    display:grid; grid-template-columns:1.2fr .8fr;
    gap:clamp(30px,5vw,60px); align-items:center;
}
.why-copy{ position:relative; z-index:2; }
.why-photo{ position:relative; opacity:0; transform:translateY(30px) scale(.96); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.why-photo.in-view{ opacity:1; transform:translateY(0) scale(1); }

.w-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.15; letter-spacing:.01em;
    max-width:820px; margin-bottom:clamp(44px,6vw,58px);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.w-title.in-view{ opacity:1; transform:translateY(0); }

.rejects{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(46px,6vw,58px); }
.reject-chip{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid rgba(243,241,236,.15);
    padding:12px 18px;
    opacity:0; transform:translateY(14px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reject-chip.in-view{ opacity:1; transform:translateY(0); }
.reject-chip .x{ width:14px; height:14px; color:var(--gold); flex-shrink:0; opacity:.7; }
.reject-chip .x svg{ width:100%; height:100%; }
.reject-chip span{
    font-size:clamp(12px,1.5vw,13.5px); color:var(--muted);
    text-decoration:line-through; text-decoration-color:rgba(243,241,236,.3); text-decoration-thickness:1px;
}

.why .statement{
    max-width:900px; font-family:'Montserrat', sans-serif; font-weight:400;
    font-size:clamp(16px,1.9vw,20px); line-height:1.85; color:var(--muted);
    margin-bottom:clamp(46px,6vw,58px);
}
.why .statement b{ color:var(--gold-light); font-weight:600; }
.why .statement .gold{ color:var(--gold); font-weight:600; }

.tag-row{ display:flex; flex-wrap:wrap; gap:12px; }

@media (max-width:950px){
    .why{ grid-template-columns:1fr; }
    .why-photo{ order:1; margin-bottom:20px; max-width:540px; margin-left:auto; margin-right:auto; }
}
@media (max-width:760px){ .why{ padding-left:clamp(24px,5vw,64px); padding-top:0; } }

/* ==========================================================================
   9. СЕКЦІЯ 6 — .formats
   ========================================================================== */
.formats{
    position:relative; max-width:1540px; margin:0 auto;
    padding:clamp(90px,12vw,140px) clamp(24px,5vw,64px) clamp(90px,12vw,130px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    overflow:hidden;
}
.f-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.1; letter-spacing:.01em;
    margin-bottom:14px;
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.f-title.in-view{ opacity:1; transform:translateY(0); }
.f-sub{
    font-size:clamp(14px,1.7vw,15.5px); color:var(--muted); margin-bottom:clamp(50px,7vw,66px);
    opacity:0; transform:translateY(18px);
    transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s;
}
.f-sub.in-view{ opacity:1; transform:translateY(0); }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,26px); margin-bottom:clamp(50px,7vw,66px); }
.fcard{
    position:relative; min-height:400px; height:auto;
    border:1px solid rgba(201,161,90,.25);
    background:linear-gradient(160deg, rgba(201,161,90,.05), transparent 60%);
    padding:clamp(30px,3vw,36px) clamp(26px,2.6vw,30px) clamp(24px,2.4vw,28px);
    display:flex; flex-direction:column;
    opacity:0; transform:translateY(28px);
    transition:opacity .7s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.fcard::before{
    content:""; position:absolute; inset:0;
    background-position:center; background-size:cover; background-repeat:no-repeat;
    opacity:.4; z-index:-1;
}
.fcard.one::before{ background-image:url('foto/card-1.png'); }
.fcard.two::before{ background-image:url('foto/card-2.png'); }
.fcard.three::before{ background-image:url('foto/card-3.png'); }
.fcard.in-view{ opacity:1; transform:translateY(0); }
.fcard:hover{ border-color:var(--gold); transform:translateY(-8px); box-shadow:0 30px 50px -24px rgba(201,161,90,.35); }
.fcard .corner{ width:12px; height:12px; opacity:0; transition:opacity .3s var(--ease); }
.fcard:hover .corner{ opacity:1; }

.fcard-icon{
    width:56px; height:56px; border-radius:50%; border:1px solid rgba(201,161,90,.4);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); margin-bottom:24px;
    transition:background .35s var(--ease), transform .35s var(--ease);
}
.fcard:hover .fcard-icon{ background:rgba(201,161,90,.12); transform:scale(1.06); }
.fcard-icon svg{ width:26px; height:26px; }
.fcard h3{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(16px,2vw,18px); color:var(--white); margin-bottom:12px; margin-top:130px;
}
.fcard p{ font-size:clamp(13px,1.6vw,14px); line-height:1.7; color:var(--muted); flex:1; margin-bottom:22px; }

.fcard-cta{
    display:inline-flex; align-items:center; gap:9px;
    min-height:50px;
    border-top:1px solid rgba(201,161,90,.2);
    font-family:'Oswald', sans-serif; font-size:12.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light);
    transition:gap .25s var(--ease), color .25s var(--ease), padding .25s var(--ease), background .25s var(--ease);

}
.fcard-cta svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.fcard:hover .fcard-cta{ padding-left:16px; color:var(--bg); gap:13px; background:var(--gold-metal); }
.fcard:hover .fcard-cta svg{ transform:translateX(3px); }

.discount-badge{
    position:absolute; top:-13px; right:20px;
    background:var(--gold); color:var(--bg);
    font-family:'Oswald', sans-serif; font-size:12px; font-weight:600; letter-spacing:.04em;
    padding:5px 14px;
    animation:badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }

@media (max-width:950px){ .cards{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }
@media (max-width:760px){ .formats{ padding-left:clamp(24px,5vw,64px); padding-top:0; } }

/* ==========================================================================
   10. СЕКЦІЯ 7 — .about
   ========================================================================== */
.about{
    position:relative; max-width:1540px; margin:0 auto;
    padding:clamp(90px,12vw,140px) clamp(24px,5vw,64px) clamp(90px,12vw,130px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    overflow:hidden;
    display:grid; grid-template-columns:.75fr 1.25fr;
    gap:clamp(32px,5vw,60px); align-items:center;
}
.a-title{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.1; letter-spacing:.01em;
    margin-bottom:clamp(28px,4vw,36px);
    opacity:0; transform:translateY(24px);
    transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.a-title.in-view{ opacity:1; transform:translateY(0); }

.about-photo{ position:relative; opacity:0; transform:translateY(30px) scale(.96); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.about-photo.in-view{ opacity:1; transform:translateY(0) scale(1); }
.about .photo-frame{ filter:grayscale(0) contrast(1.2); }

.about-shield{
    position:absolute; z-index:4; top:-8%; right:-8%;
    width:70px; height:70px;
    background:var(--bg-2); border:1px solid rgba(201,161,90,.4); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 28px -10px rgba(0,0,0,.6);
    animation:shieldSpin 24s linear infinite;
}
@keyframes shieldSpin{ to{ transform:rotate(360deg); } }
.about-shield svg{ width:55%; height:55%; color:var(--gold); }

.about-copy{ position:relative; z-index:2; }
.credentials{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,4vw,36px); }
.credential{ font-size:11.5px; }

.about-copy p{
    font-size:clamp(14px,1.8vw,15.5px); line-height:1.8; color:var(--muted);
    max-width:680px; margin-bottom:18px;
    opacity:0; transform:translateY(18px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.about-copy p.in-view{ opacity:1; transform:translateY(0); }
.about-copy p b{ color:var(--gold-light); font-weight:600; }

.closing-line{
    margin-top:26px;
    font-family:'Oswald', sans-serif; font-weight:500; font-style:italic;
    font-size:clamp(17px,2vw,22px); line-height:1.5; color:var(--gold);
    border-left:2px solid rgba(201,161,90,.5);
    padding-left:20px; max-width:600px;
    opacity:0; transform:translateY(18px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.closing-line.in-view{ opacity:1; transform:translateY(0); }

@media (max-width:950px){
    .about{ grid-template-columns:1fr; }
    .about-photo{ order:-1; margin-bottom:20px; max-width:480px; margin-left:auto; margin-right:auto; }
}
@media (max-width:760px){
    .about{ padding-left:clamp(24px,5vw,64px); padding-top:15px; }
    .about-shield{ top:5%; right:0; }
}

/* ==========================================================================
   11. СЕКЦІЯ 8 — .final (фінальний заклик)
   ========================================================================== */
.final{
    position:relative; overflow:hidden;
    padding:clamp(90px,14vw,180px) clamp(24px,5vw,64px);
    padding-left:calc(90px + clamp(24px,5vw,4px));
    text-align:center;
}

.final .glow{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:640px; height:640px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(201,161,90,.16), transparent 70%);
    filter:blur(20px); pointer-events:none;
}
.final .spark{ position:absolute; color:var(--gold); opacity:.5; animation:twinkle 3s ease-in-out infinite; }
.final .spark svg{ width:100%; height:100%; display:block; }
.final .spark.s1{ top:16%; left:20%; width:14px; animation-delay:.2s; }
.final .spark.s2{ top:24%; right:18%; width:18px; animation-delay:1s; }
.final .spark.s3{ bottom:22%; left:30%; width:11px; animation-delay:1.7s; }
.final .spark.s4{ bottom:18%; right:28%; width:14px; animation-delay:2.3s; }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.8) rotate(0deg);} 50%{ opacity:.8; transform:scale(1.2) rotate(20deg);} }

.final-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.final .kicker{ display:inline-flex; margin-bottom:30px; }
.final h2{
    font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(26px,2.8vw,40px); line-height:1.15; letter-spacing:.01em;
    margin-bottom:26px;
    opacity:0; transform:translateY(24px);
    transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
}
.final h2.in-view{ opacity:1; transform:translateY(0); }
.final h2 .grad{
    background:linear-gradient(90deg, var(--gold-light), var(--gold) 60%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.final p.sub{
    font-size:clamp(14.5px,1.7vw,18px); line-height:1.75; color:var(--muted);
    max-width:560px; margin:0 auto clamp(42px,6vw,54px);
    opacity:0; transform:translateY(20px);
    transition:opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s;
}
.final p.sub.in-view{ opacity:1; transform:translateY(0); }
.final .cta-wrap{ display:flex; justify-content:center; }

@media (max-width:760px){ .final{ padding-left:clamp(24px,5vw,64px); } }

/* ==========================================================================
   12. КНОПКА "НАГОРУ"
   ========================================================================== */
.to-top{
    position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
    z-index:150; width:50px; height:50px; border-radius:50%;
    background:rgba(10,10,11,.85); backdrop-filter:blur(6px);
    border:1px solid rgba(201,161,90,.5); color:var(--gold);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    opacity:0; visibility:hidden; transform:translateY(14px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s var(--ease), border-color .3s var(--ease);
}
.to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--gold); border-color:var(--gold); color:var(--bg); transform:translateY(-4px); }
.to-top svg{ width:20px; height:20px; transition:transform .3s var(--ease); }
.to-top:hover svg{ transform:translateY(-2px); }
.to-top .ring{ position:absolute; inset:-1px; border-radius:50%; pointer-events:none; }
.to-top .ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.to-top .ring circle{ fill:none; stroke:var(--gold); stroke-width:1.5; opacity:.55; stroke-dasharray:145; stroke-dashoffset:145; transition:stroke-dashoffset .1s linear; }

/* ==========================================================================
   13. ФУТЕР
   ========================================================================== */
.site-footer{
    position:relative;
    background:linear-gradient(to right, #3d0202 0%, #000000 40%);
    border-top:1px solid rgba(201,161,90,.2);
    overflow:hidden;
}
.site-footer .glow{
    position:absolute; top:-30%; left:8%;
    width:420px; height:420px; border-radius:50%;
    background:var(--gold); filter:blur(140px); opacity:.06;
    pointer-events:none;
}
.footer-top{
    position:relative; z-index:2; max-width:1540px; margin:0 auto;
    padding:clamp(60px,8vw,88px) clamp(24px,5vw,64px) clamp(40px,5vw,52px);
    display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr;
    gap:clamp(30px,4vw,44px);
}
.footer-brand{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.footer-brand.in-view{ opacity:1; transform:translateY(0); }
.footer-logo{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-logo svg{ width:30px; height:30px; color:var(--gold); flex-shrink:0; }
.footer-logo span{ font-family:'Oswald', sans-serif; font-weight:600; font-size:17px; letter-spacing:.12em; }
.footer-brand p{ font-size:clamp(13px,1.6vw,14px); line-height:1.75; color:var(--muted); max-width:290px; margin-bottom:26px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
    width:38px; height:38px; border-radius:50%;
    border:1px solid rgba(201,161,90,.4); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--gold); color:var(--bg); transform:translateY(-3px); }

.footer-col{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.footer-col.in-view{ opacity:1; transform:translateY(0); }
.footer-col h4{ font-family:'Oswald', sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:clamp(13px,1.6vw,14px); color:var(--muted); position:relative; transition:color .25s var(--ease); }
.footer-col a::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold); transition:width .25s var(--ease); }
.footer-col a:hover{ color:var(--gold-light); }
.footer-col a:hover::after{ width:100%; }

.footer-contact li{ display:flex; align-items:flex-start; gap:11px; font-size:clamp(12.5px,1.6vw,13.5px); color:var(--muted); line-height:1.5; }
.footer-contact .ic{ width:30px; height:30px; border-radius:8px; flex-shrink:0; border:1px solid rgba(201,161,90,.35); display:flex; align-items:center; justify-content:center; }
.footer-contact .ic svg{ width:14px; height:14px; color:var(--gold); }
.footer-quote{
    margin-top:22px;
    font-family:'Oswald', sans-serif; font-weight:500; font-style:italic;
    font-size:clamp(14px,1.8vw,15.5px); line-height:1.5; color:var(--gold-light);
    border-left:2px solid rgba(201,161,90,.4); padding-left:14px;
}

.footer-bottom{ position:relative; z-index:2; border-top:1px solid rgba(201,161,90,.12); }
.footer-bottom-inner{
    max-width:1540px; margin:0 auto;
    padding:22px clamp(24px,5vw,64px);
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.footer-bottom-inner.in-view{ opacity:1; transform:translateY(0); }
.footer-bottom-inner p{ font-size:12px; color:var(--muted); }
.footer-legal{ display:flex; gap:24px; }
.footer-legal a{ font-size:12px; color:var(--muted); transition:color .25s var(--ease); }
.footer-legal a:hover{ color:var(--gold-light); }


@media (max-width:980px){
    .footer-top{ display:flex; flex-direction:column; align-items:center; gap:36px; text-align:center; }
    .footer-brand, .footer-col{ align-items:center; display:flex; flex-direction:column; }
    .footer-bottom-inner{ flex-direction:column; align-items:center; text-align:center; }
}

/* ==========================================================================
   14. PREFERS-REDUCED-MOTION (було ~10 розкиданих блоків — об'єднано в один)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .to-top{ transition:opacity .01ms, visibility .01ms; }

    .rail .n, .rail .line, .kicker, .headline .line, .subtext, .cta-wrap, .divider, .feature, .hero-photo img,
    .p-title, .p-lead, .statement, .insight, .problem-photo,
    .s-title, .benefit, .emblem-wrap,
    .m-title, .intro-row, .step, .method-cta,
    .w-title, .reject-chip, .why-photo,
    .f-title, .f-sub, .fcard,
    .a-title, .about-photo, .credential, .about-copy p, .closing-line,
    .final h2, .final p.sub,
    .footer-brand, .footer-col, .footer-bottom-inner
    { opacity:1 !important; transform:none !important; }
}