@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Manrope:wght@400;500;600;700&family=Great+Vibes&display=swap');

:root{
    --cream:#f9f6f1;
    --cream-deep:#EFE6D3;
    --block:#eae5de;
    --ink:#2A2026;
    --ink-soft:#6b5f66;
    --ink-faint: rgb(186 139 71 / 0.7);
    --line:#cdbb9d;
    --white:#fffdf9;

    --font-display:'Playfair Display', 'Georgia', serif;
    --font-body:'Lora', 'Georgia', serif;
    --font-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vs2-font-display:'Playfair Display', 'Georgia', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Запобігає боковому скролу */
    width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ HEADER ============ */
.site-header {
    position: fixed;
    top: 0;              /* КРИТИЧНО: притискає шапку до самого верху */
    left: 0;
    right: 0;
    margin: 0;           /* КРИТИЧНО: обнуляє маржини (зокрема верхній відступ) */

    width: 100%;
    max-width: 100%;
    z-index: 1000;
    background: #f9f6f1; /* або var(--cream) */

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px clamp(20px, 4vw, 56px);
}

.logo {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(19px, 2vw, 23px);
    color: var(--ink);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
}

.main-nav a {
    position: relative;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 6px 0;
    transition: color .25s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: #ba8b47;
    transition: right .3s cubic-bezier(.4,0,.2,1);
}

.main-nav a:hover { color: #ba8b47; }
.main-nav a:hover::after { right: 0; }

.header-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-social a {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.header-social a:hover {
    background: #ba8b47;
    border-color: #ba8b47;
    color: var(--cream);
    transform: translateY(-2px);
}

.header-social svg { width: 15px; height: 15px; }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.nav-toggle span {
    position: absolute;
    left: 11px; right: 11px;
    height: 1px;
    background: var(--ink);
    transition: transform .25s ease, opacity .25s ease;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {

    max-width: 1540px;
    margin: 115px auto 30px;
    padding: clamp(32px, 6vw, 104px) clamp(20px, 4vw, 56px) clamp(48px, 8vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    overflow: hidden; /* Обрізає орбіти, що виходять за рамки */

}
.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('foto/hero_fon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Декоративні орбіти */
.hero-deco-arc {
    position: absolute;
    pointer-events: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    opacity: .25;
}

.hero-deco-arc::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #c89b3c;
    border-radius: 50%;
}

.arc-1 {
    width: 640px;
    height: 640px;
    left: 0;
    top: 160px;
    animation: driftSlow 30s linear infinite;
}

.arc-2 {
    width: 420px;
    height: 420px;
    left: 50px;
    top: 220px;
    opacity: .25;
    animation: driftSlow 20s linear infinite reverse;
}

.arc-2::after {
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
}

@keyframes driftSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-copy { position: relative; z-index: 2;margin-bottom: 100px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 22px;
    opacity: 0;
    animation: riseIn .7s ease forwards;
    animation-delay: .05s;
}

.eyebrow::before {
    content: '';
    width: 26px; height: 1px;
    background: var(--ink-faint);
}

.hero-title {
    font-family:var(--vs2-font-display);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 74px);
    line-height: 1.15;
    color: #BA8B47;
    margin: 0 0 20px;
    opacity: 0;
    word-break: break-word;
    animation: riseIn .8s ease forwards;
    animation-delay: .15s;
}

@media (min-width: 1200px) {
    .hero-title {
        white-space: nowrap;
    }
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(16px, 1.7vw, 27px);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 680px;
    margin: 0 0 26px;
    opacity: 0;
    animation: riseIn .8s ease forwards;
    animation-delay: .28s;
}

.hero-desc {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 23px);
    line-height: 1.75;
    color: #53494f;
    max-width: 680px;
    margin: 0 0 34px;
    opacity: 0;
    animation: riseIn .8s ease forwards;
    animation-delay: .4s;
}

.hero-desc u {
    text-decoration: none; /* Скидаємо стандартне підкреслення */

    /* Задаємо колір лінії та робимо прозору верхню частину */
    background-image: linear-gradient(to top, var(--ink-faint) 0%, var(--ink-faint) 100%);
    background-repeat: no-repeat;

    /* Позиціонування та розмір лінії: */
    background-position: 0 100%; /* Притискаємо до низу */
    background-size: 100% 30%;
}

.hero-desc strong {
    color: #ba8b47;
    font-weight: 600;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    margin: 0 0 38px;
    opacity: 0;
    animation: riseIn .8s ease forwards;
    animation-delay: .52s;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px 0 0;
    margin: 0 20px 0 0;
    border-right: 1px solid var(--line);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.meta-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.meta-item svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    opacity: 0;
    animation: riseIn .8s ease forwards;
    animation-delay: .65s;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px clamp(44px, 5vw, 150px);
    width: 400px;
    border-radius: 4px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
    white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; }

.btn-primary {

    color: var(--cream);

    background: #BA8B47;
    border-color: #BA8B47;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(42,32,38,.25);
    background: var(--ink);

    border: 1px solid var(--ink);
}

.btn-primary:active { transform: translateY(-1px); }

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

.btn-ghost:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateY(-3px);
}

/* ============ HERO VISUAL ============ */
.hero-visual {
    position: relative;
    z-index: 1;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.visual-block {
    position: absolute;
    bottom: -28%;
    right: 0;
    box-shadow: -10px 0 10px -3px rgba(0, 0, 0, 0.15);
    height: 115%;
    background: var(--block);
    border-radius: 6px;
    z-index: 0;


    /* Забезпечує правильне заповнення */
    width: calc(30% + 40px);
}
.visual-block::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('foto/visual.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.portrait-wrap {
    position: relative;
    width: 105%;
    max-width: 580px;
    aspect-ratio: 4/5;
    z-index: 2;

}

/* Плашки з іменами */
.portrait-badge, .portrait-badges {
    position: absolute;
    padding: 12px 15px;


    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
}

.portrait-badge {
    bottom: 15px;
    left: 15px;
}

.portrait-badges {
    top: 15px;
    right: 15px;
}

.portrait-badge .name, .portrait-badges .name {
    font-family: "Great Vibes", cursive;
    font-size: clamp(22px, 3.2vw, 32px);
    font-style: italic;
    color: #BA8B47;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.1;
}

.portrait-badge .role, .portrait-badges .role {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 1.5vw, 15px);
    color: #ffffff;
    font-style: normal;
    margin-top: 2px;
}

.portrait-card {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: 0 30px 60px -20px rgba(42,32,38,.35);
    display: flex;
    align-items: flex-end;
    animation: float 7s ease-in-out infinite;
    overflow: hidden;
}

.portrait-card .fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('foto/hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.visual-badge {
    position: absolute;
    left: -6%;
    bottom: 10%;
    z-index: 3;
    background: var(--white);
    border-radius: 999px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 18px 34px -14px rgba(42,32,38,.3);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    opacity: 0;
    animation: riseIn .7s ease forwards;
    animation-delay: .9s;
}

.visual-badge .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ink);
}

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

/* ============ SECTION 2 ============ */
.vs2-section{
    --vs2-cream-deep:#EFE6D3;
    --vs2-block:#E7DAC4;
    --vs2-ink:#2A2026;
    --vs2-ink-soft:#6b5f66;
    --vs2-ink-faint:#a89ba1;
    --vs2-gold:#C8973F;
    --vs2-gold-soft:#e4c791;
    --vs2-line:#cdbb9d;
    --vs2-white:#fffdf9;

    --vs2-font-display:'Playfair Display', 'Georgia', serif;
    --vs2-font-body:'Lora', 'Georgia', serif;
    --vs2-font-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position:relative;
    background:#e9e4dd;
    color:var(--vs2-ink);
    font-family:var(--vs2-font-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:clamp(72px,10vw,120px) clamp(20px,4vw,56px);
    overflow:hidden;
    box-sizing:border-box;
}
.vs2-section *,
.vs2-section *::before,
.vs2-section *::after{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
    .vs2-section *, .vs2-section *::before, .vs2-section *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

.vs2-grid{
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---- text column ---- */
.vs2-copy{ max-width:880px; display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}

.vs2-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#ba8b48;
    margin:0 0 22px;
}
.vs2-eyebrow::before{
    content:'';
    width:26px; height:1px;
    background:var(--vs2-ink-faint);
}

.vs2-title{
    font-family:var(--vs2-font-display);
    font-style:normal;
    font-weight:600;
    font-size:clamp(30px,4vw,46px);
    line-height:1.2;
    color:var(--vs2-ink);
    margin:0 0 40px;
}

.vs2-points{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap:26px;
    margin:0 0 42px;
    padding:0;
    list-style:none;
}

.vs2-point{
    position:relative;
    padding-left:28px;
    font-family:var(--vs2-font-body);
    font-style:italic;
    font-size:clamp(15px, 1.4vw, 23px);
    line-height:1.7;

    color:var(--vs2-ink-soft);
    margin:0;
}
.vs2-point::before{
    content:'';
    position:absolute;
    left:0; top:16px;
    width:16px; height:1px;
    background:var(--vs2-gold);
}

.vs2-insight{
    position:relative;
    margin:0;
    padding:30px 0 0 28px;
    border-top:1px solid var(--vs2-line);
    font-family:var(--vs2-font-sans);
    font-weight:600;
    font-size:clamp(18px,2vw,23px);
    line-height:1.5;
    color:var(--vs2-gold);
}
.vs2-insight::before{
    content:'';
    position:absolute;
    left:0; top:48px;
    width:16px; height:2px;
    background:var(--vs2-gold);
}

/* ---- photo column ---- */
.vs2-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:360px;
    width: 100%;
}

.vs2-visual-block{
    position:absolute;
    top: -28%;
    left: -35%;
    width: 90%;
    height: 136%;
    background:#f9f6f1;
    border-radius:4px;
    z-index:0;
}

.vs2-photo{
    position:relative;
    width:100%;
    max-width:580px;
    aspect-ratio:4/5;
    z-index:2;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(42,32,38,.32);
    animation:vs2Float 7s ease-in-out infinite;
}

.vs2-photo-fill{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('foto/second.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vs2-photo-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:1;
    padding:26px 28px;
    background:linear-gradient(0deg, rgba(20,14,17,.62), rgba(20,14,17,0) 62%);
}
.vs2-photo-caption .vs2-quote{
    display:block;
    font-family:var(--vs2-font-display);
    font-style:italic;
    font-size:20px;
    line-height:1.4;
    color:var(--vs2-white);
}
.vs2-photo-caption .vs2-quote-by{
    display:block;
    margin-top:8px;
    font-family:var(--vs2-font-sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--vs2-gold-soft);
}

.vs2-photo-placeholder-mark{
    position:absolute;
    top:16px; left:16px;
    z-index:1;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,253,249,.75);
    background:rgba(20,14,17,.35);
    padding:6px 10px;
    border-radius:3px;
}

@keyframes vs2Float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

.vs2-deco-circle{
    position:absolute;
    pointer-events:none;
    border:1px solid var(--vs2-line);
    border-radius:50%;
    opacity:.4;
    width:520px; height:520px;
    right:-220px;
    bottom:-220px;
}

/* scroll-reveal states */
.vs2-reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
}
.vs2-reveal.vs2-is-visible{
    opacity:1;
    transform:translateY(0);
}
.vs2-points .vs2-reveal:nth-child(1){ transition-delay:.05s; }
.vs2-points .vs2-reveal:nth-child(2){ transition-delay:.15s; }
.vs2-points .vs2-reveal:nth-child(3){ transition-delay:.25s; }
.vs2-visual.vs2-reveal{ transition-delay:.15s; }

/* ============ RESPONSIVE & MOBILE FIXES ============ */
@media (max-width: 1000px) {
    .arc-1, .arc-2, .vs2-deco-circle {
        display: none !important; /* Приховує великі кола, які викликали скрол */
    }

    .hero {
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }

    .hero-visual {
        order: -1;
        min-height: auto;
        margin-bottom: 12px;
        justify-content: center;
    }

    .visual-block {
        width: 100%;
        right: 0;
        left: 0;
        top: -4%;
        height: 50%;
    }

    .vs2-grid {
        grid-template-columns: 1fr;
    }

    .vs2-visual {
        order: -1;
        min-height: 300px;
        margin-bottom: 8px;
        justify-content: center;
    }

    .vs2-visual-block {
       display: none;
    }

    .portrait-wrap,
    .vs2-photo {
        max-width: 380px;
        margin: 0 auto;
    }

    .hero-copy,
    .vs2-copy {
        max-width: none;
    }
    .hero::before{
        display: none;
    }
}

@media (max-width: 960px) {
    .main-nav {
        position: fixed;
        inset: 0 0 auto auto;
        top: 100px; right: 0;
        height: 100vh;
        width: min(100vw, 100%);
        background: #f6f3eeed;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 26px;
        padding: 40px;
        transform: translateX(100%);
        transition: transform .4s cubic-bezier(.4,0,.2,1);
        box-shadow: -20px 0 50px rgba(42,32,38,.15);
    }
    .main-nav::before{
        content: "";
        position:absolute;
        inset:0;
        width: 100%;
        height: 100%;
        background-image: url('foto/visual.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .main-nav.open { transform: translateX(0); }
    .main-nav a { font-size: 22px; }
    .nav-toggle { display: block; z-index: 60; }
    .header-social { display: none; }
    .site-header { padding-top: 16px; }
    .meta-item { font-size: 13.5px; padding-right: 14px; margin-right: 14px; }
}

@media (max-width: 480px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; }
    .visual-badge { left: 0; bottom: -15px; }
    .portrait-badge, .portrait-badges { padding: 8px 12px; }

    .visual-block {
        right: 0;
        width: 100%;
        height: 70%;
    }
    .portrait-badges { top: -2%; }

    .vs2-points { gap: 22px; }
    .vs2-insight { padding-left: 0; border-left: none; }
    .vs2-insight::before { display: none; }
}



.vs3-section{
    --vs3-cream:#F7F2E8;
    --vs3-card:#FFFDF8;
    --vs3-block:#E7DAC4;
    --vs3-ink:#2A2026;
    --vs3-ink-soft:#6b5f66;
    --vs3-ink-faint:#a89ba1;
    --vs3-gold:#C8973F;
    --vs3-gold-soft:#e4c791;
    --vs3-line:#e3d7c2;
    --vs3-white:#fffdf9;

    --vs3-font-display:'Playfair Display', 'Georgia', serif;
    --vs3-font-body:'Lora', 'Georgia', serif;
    --vs3-font-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position:relative;
    background:#f9f6f1;
    color:var(--vs3-ink);
    font-family:var(--vs3-font-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:clamp(72px,10vw,120px) clamp(20px,4vw,56px);
    overflow:hidden;
    box-sizing:border-box;
}
.vs3-section *,
.vs3-section *::before,
.vs3-section *::after{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
    .vs3-section *, .vs3-section *::before, .vs3-section *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ---- section heading ---- */
.vs3-head{
    max-width:1440px;
    margin:0 auto clamp(48px,7vw,80px);
    text-align:center;
}
.vs3-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#ba8b48;
    margin:0 0 20px;
}
.vs3-eyebrow::before,
.vs3-eyebrow::after{
    content:'';
    width:26px; height:1px;
    background:var(--vs3-ink-faint);
}
.vs3-head-title{
    font-family:var(--vs3-font-display);
    font-weight:600;
    font-size:clamp(30px,4.4vw,48px);
    line-height:1.2;
    color:var(--vs3-ink);
    margin:0;
}

/* ---- speaker card ---- */
.vs3-speakers{
    max-width:1440px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:clamp(56px,7vw,120px);
}
.vs3-section::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: -8%;
    width: 52%;
    height: 35%;
    background: #e9e4dd;
    border-radius: 4px;
    z-index: 0;
    box-shadow: -10px -10px 10px -3px rgba(0, 0, 0, 0.15);
}
.vs3-card{
    display:grid;
    grid-template-columns:minmax(0,0.88fr) minmax(0,1.20fr);
    gap:clamp(36px,5vw,64px);
    align-items:center;
    position: relative;
    z-index: 1;
}
.vs3-card.vs3-flip{
    grid-template-columns:minmax(0,1.20fr) minmax(0,0.88fr);
}
.vs3-card.vs3-flip .vs3-photo-col{ order:2; }
.vs3-card.vs3-flip .vs3-text-col{ order:1; }

/* ---- photo column ---- */
.vs3-photo-col{ position:relative; }

.vs3-section::before{
    content: "";
    position: absolute;
    top: 0;
    left: -8%;
    width: 47%;
    height: 42%;
    background: #e9e4dd;
    border-radius: 4px;
    z-index: 0;
    box-shadow: 10px 10px 10px -3px rgba(0, 0, 0, 0.15);
}
.vs3-flip .vs3-photo-block{ left:auto; right:-8%; }

.vs3-photo{
    position:relative;
    z-index:2;
    width:100%;
    max-width:600px;
    aspect-ratio:4/5;

    border-radius:4px;
    overflow:hidden;
    box-shadow:0 26px 50px -18px rgba(42,32,38,.32);
    animation:vs3Float 7s ease-in-out infinite;
}
.vs3-card.vs3-flip .vs3-photo{ animation-delay:.4s; }

.vs3-photo-fill{
    position:absolute;
    inset:0;
    width: 100%;
    height: 100%;
    background-image: url('foto/speaker_1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.vs3-flip .vs3-photo-fill{
    position:absolute;
    inset:0;
    width: 100%;
    height: 100%;
    background-image: url('foto/speaker_2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vs3-photo-placeholder-mark{
    position:absolute;
    top:14px; left:14px;
    z-index:1;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,253,249,.75);
    background:rgba(20,14,17,.35);
    padding:5px 9px;
    border-radius:3px;
}

.vs3-photo-tag{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:1;
    padding:20px 22px;
    background:linear-gradient(0deg, rgba(20,14,17,.62), rgba(20,14,17,0) 62%);
}
.vs3-photo-tag .vs3-name-on-photo{
    display:block;
    font-family:var(--vs3-font-display);
    font-style:italic;
    font-size:20px;
    color:var(--vs3-white);
}
.vs3-photo-tag .vs3-role-on-photo{
    display:block;
    margin-top:4px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--vs3-gold-soft);
}

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

/* ---- text column ---- */
.vs3-text-col{ padding-top:6px; }

.vs3-name{
    font-family:var(--vs3-font-display);
    font-weight:600;
    font-size:clamp(22px,2.4vw, 37px);
    color:var(--vs3-ink);
    margin:0 0 4px;
}
.vs3-role{
    font-size:14px;
    font-weight:500;
    color:#c8973f;
    margin:0 0 34px;
    line-height:1.5;
}

.vs3-modalities{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 8px;
    font-size:12.5px;
    font-weight:600;
    color:var(--vs3-ink-soft);
    background:var(--vs3-card);
    border:1px solid var(--vs3-line);
    border-radius:999px;
    padding:7px 16px;
    margin:0 0 26px;
}
.vs3-modalities .vs3-mod-label{ color:var(--vs3-gold); }

.vs3-topic-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px 12px;
    margin:0 0 16px;
}
.vs3-topic{
    font-family:var(--vs3-font-display);
    font-weight:600;
    font-size:clamp(19px,2.2vw,24px);
    line-height:1.35;
    color:var(--vs3-ink);
    margin:0;
}
.vs3-badge{
    flex:none;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--vs3-gold);
    border:1px solid var(--vs3-gold-soft);
    border-radius:4px;
    padding:3px 8px;
    white-space:nowrap;
}

.vs3-intro{
    font-family:var(--vs3-font-body);
    font-style:italic;
    font-size:clamp(15px, 1.4vw, 23px);
    line-height:1.75;
    color:var(--vs3-ink-soft);
    margin:0 0 26px;
    max-width:760px;
}

.vs3-list-label{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--vs3-gold);
    margin:0 0 16px;
}

.vs3-list{
    list-style:none;
    margin:0 0 28px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:13px;
}
.vs3-list li{
    position:relative;
    padding-left:26px;
    font-size:clamp(15px, 1.2vw, 18px);
    line-height:1.6;
    color:var(--vs3-ink);
}
.vs3-list li::before{
    content:'';
    position:absolute;
    left:0; top:9px;
    width:14px; height:1px;
    background:var(--vs3-gold);
}

.vs3-note{
    font-size:14px;
    line-height:1.7;
    color:var(--vs3-ink-soft);
    margin:0 0 18px;
    max-width:560px;
}

.vs3-tagline{
    font-family:var(--vs3-font-display);
    font-style:italic;
    font-weight:600;
    font-size:clamp(18px,2vw,21px);
    color:var(--vs3-gold);
    margin:0;
    padding-top:18px;
    border-top:1px solid var(--vs3-line);
}

/* scroll-reveal */
.vs3-reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
}
.vs3-reveal.vs3-is-visible{
    opacity:1;
    transform:translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
    .vs3-card,
    .vs3-card.vs3-flip{
        grid-template-columns:1fr;
    }
    .vs3-card.vs3-flip .vs3-photo-col{ order:-1; }
    .vs3-card.vs3-flip .vs3-text-col{ order:2; }
    .vs3-photo-col{ order:-1; }
    .vs3-photo-block{ width: 100%;
        left: 0;
        height: 22%; }
    .vs3-flip .vs3-photo-block{ right:-4%; }
    .vs3-photo{ max-width:400px; margin: auto;}
    .vs3-eyebrow::after{ display:none; }
    .vs3-section::after{
        width: 100%;
        right: 0;
    }
    .vs3-section::before{
        width: 100%;
        height: 22%;
        left: 0;
    }
}

@media (max-width:520px){
    .vs3-topic-row{ flex-direction:column; align-items:flex-start; }
}




.vs4-section{
    --vs4-cream:#F7F2E8;
    --vs4-card:#FFFDF8;
    --vs4-ink:#2A2026;
    --vs4-ink-2:#3a2e35;
    --vs4-ink-soft:#6b5f66;
    --vs4-ink-faint:#a89ba1;
    --vs4-gold:#C8973F;
    --vs4-gold-soft: #daa122;
    --vs4-line:#e3d7c2;
    --vs4-white:#fffdf9;
    --vs4-green:#5c7a52;

    --vs4-font-display:'Playfair Display', 'Georgia', serif;
    --vs4-font-body:'Lora', 'Georgia', serif;
    --vs4-font-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position:relative;
    background:#e7e2db;
    color:var(--vs4-ink);
    font-family:var(--vs4-font-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:clamp(72px,10vw,120px) clamp(20px,4vw,56px);
    overflow:hidden;
    box-sizing:border-box;
}
.vs4-section *,
.vs4-section *::before,
.vs4-section *::after{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
    .vs4-section *, .vs4-section *::before, .vs4-section *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ---- heading ---- */
.vs4-head{
    max-width:1280px;
    margin:0 auto clamp(44px,6vw,72px);
    text-align:center;
}
.vs4-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#c8973f;
    margin:0 0 20px;
}
.vs4-eyebrow::before,
.vs4-eyebrow::after{
    content:'';
    width:26px; height:1px;
    background:var(--vs4-ink-faint);
}
.vs4-head-title{
    font-family:var(--vs4-font-display);
    font-weight:600;
    font-size:clamp(30px,4.4vw,48px);
    line-height:1.2;
    color:var(--vs4-ink);
    margin:0;
}

/* ---- pricing grid ---- */
.vs4-grid{
    max-width:1440px;
    margin:0 auto clamp(48px,6vw,72px);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:64px;
    align-items:stretch;
}

.vs4-plan{
    position:relative;
    height: 450px;
    display:flex;
    flex-direction:column;
    align-items: center;
    background:var(--vs4-card);
    border:1px solid var(--vs4-line);
    border-radius:8px;
    padding:32px 28px 28px;
    transform:translateY(-10px);
    transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;

}
.vs4-plan::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('foto/price.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    pointer-events: none;
}

.vs4-plan:hover{

    border-color:var(--vs4-gold-soft);
    transform:translateY(-16px);
    box-shadow:0 30px 54px -16px rgba(42,32,38,.4);
}
.vs4-plan.vs4-featured::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('foto/price.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    pointer-events: none;
}
.vs4-plan.vs4-featured{
    background:#7f7464;
    border-color:#7f7464;
    color:var(--vs4-white);
    height: 450px;
    transform:translateY(-10px);
}
.vs4-plan.vs4-featured:hover{
    transform:translateY(-16px);
    box-shadow:0 30px 54px -16px rgba(42,32,38,.4);
}

.vs4-live-badge{
    position:absolute;
    top:-13px; left:28px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--vs4-gold);
    color:var(--vs4-ink);
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:999px;
}
.vs4-live-badge .vs4-pulse{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--vs4-ink);

    animation:vs4Pulse 1.8s ease-in-out infinite;
}
@keyframes vs4Pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.4; transform:scale(.7); }
}

.vs4-plan-name{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--vs4-font-display);
    font-weight:600;
    font-size:20px;
    margin:0 0 6px;
}
.vs4-insight{

    font-family: var(--vs2-font-sans);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.5;
    color: #C8973FFF;
}
.vs4-plan-period{
    font-size:13.5px;
    font-weight:500;
    color:var(--vs4-ink-soft);
    margin:0 0 22px;
}
.vs4-featured .vs4-plan-period{ color:var(--vs4-gold-soft); }

.vs4-plan-price{
    font-family:var(--vs4-font-display);
    font-weight:600;
    font-size:clamp(30px,3vw,38px);
    line-height:1;
    color:var(--vs4-ink);
    margin:0 0 4px;
}
.vs4-featured .vs4-plan-price{ color:var(--vs4-gold); }
.vs4-plan-price span{
    font-family:var(--vs4-font-sans);
    font-size:14px;
    font-weight:600;
    color:var(--vs4-ink-faint);
    margin-left:4px;
}
.vs4-featured .vs4-plan-price span{ color:var(--vs4-ink-faint); }

.vs4-plan-note{
    font-family:var(--vs4-font-body);
    font-style:italic;
    font-size:19px;
    line-height:1.6;
    color:var(--vs4-ink-soft);
    margin:16px 0 28px;
    flex:1;
    text-align: center;
}
.vs4-featured .vs4-plan-note{ color:rgba(255,253,249,.72); }

.vs4-plan-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    gap:8px;
    padding:14px 20px;
    border-radius:4px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    text-decoration:none;
    border:1px solid #e7e2db;
    color:var(--vs4-ink);
    background:#e7e2db;
    z-index: 2;
    transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s ease, color .3s ease;
}
.vs4-plan-btn:hover{
    background:#c8973f;
    color:var(--vs4-cream);
    border:1px solid #c8973f;
    transform:translateY(-2px);
}
.vs4-featured .vs4-plan-btn{
    background:var(--vs4-gold);
    border-color:var(--vs4-gold);
    color:var(--vs4-ink);
    z-index: 2;
}
.vs4-featured .vs4-plan-btn:hover{
    background:var(--vs4-gold-soft);
    border-color:var(--vs4-gold-soft);
    transform:translateY(-2px);
}

/* ---- closing CTA bar ---- */
.vs4-cta-bar{
    max-width:1440px;
    margin:0 auto;
    background:#7f7464;
    border-radius:8px;
    padding:clamp(28px,4vw,40px) clamp(28px,4vw,48px);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.vs4-cta-info{ color:var(--vs4-white); }

.vs4-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--vs4-gold-soft);
    margin:0 0 10px;
}
.vs4-status .vs4-status-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:#c8973f;
    box-shadow:0 0 0 0 rgb(206 154 80);
    animation:vs4StatusPulse 2s ease-out infinite;
}
@keyframes vs4StatusPulse{
    0%{ box-shadow:0 0 0 0 rgb(255 255 255); }
    70%{ box-shadow:0 0 0 5px rgb(234 169 72); }
    100%{ box-shadow:0 0 0 0 rgb(211 133 28); }
}

.vs4-cta-when{
    font-family:var(--vs4-font-display);
    font-weight:600;
    font-size:clamp(17px,1.8vw,21px);
    color:var(--vs4-white);
    margin:0;
}

.vs4-cta-btn{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    border-radius:4px;
    background:var(--vs4-gold);
    color:var(--vs4-ink);
    border:1px solid var(--vs4-gold);
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.01em;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, background .3s ease;
}
.vs4-cta-btn:hover{
    background:var(--vs4-gold-soft);
    transform:translateY(-3px);
    box-shadow:0 14px 26px rgba(0,0,0,.3);
}
.vs4-cta-btn svg{ width:16px; height:16px; }

/* scroll-reveal */
.vs4-reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;

}
.vs4-reveal.vs4-is-visible{
    opacity:1;
    transform:translateY(0);

}
.vs4-reveal.vs4-is-visible:hover{
    opacity:1;
    transform:translateY(-16px);

}
.vs4-grid .vs4-reveal:nth-child(1){ transition-delay:.05s; }
.vs4-grid .vs4-reveal:nth-child(2){ transition-delay:.15s; }
.vs4-grid .vs4-reveal:nth-child(3){ transition-delay:.25s; }

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
    .vs4-grid{
        grid-template-columns:1fr;
        max-width:420px;
    }
    .vs4-plan.vs4-featured{ transform:translateY(0); order:-1; }
    .vs4-plan.vs4-featured:hover{ transform:translateY(-6px); }
}

@media (max-width:560px){
    .vs4-cta-bar{ flex-direction:column; align-items:stretch; text-align:center; }
    .vs4-cta-btn{ justify-content:center; }
    .vs4-eyebrow::after{ display:none; }
    .vs4-section{
        padding-top: 0;
    }
    .vs4-plan-note{
        text-align: center;
    }
}

.vs5-footer{
    --vs5-ink:#2A2026;
    --vs5-ink-2:#372a31;
    --vs5-cream:#F7F2E8;
    --vs5-ink-soft:#b9adb4;
    --vs5-ink-faint:#7c6d75;
    --vs5-gold:#C8973F;
    --vs5-gold-soft: #e1ab45;
    --vs5-line:#4a3c43;
    --vs5-white:#fffdf9;

    --vs5-font-display:'Playfair Display', 'Georgia', serif;
    --vs5-font-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    position:relative;
    background:#7f7464;
    color:var(--vs5-white);
    font-family:var(--vs5-font-sans);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:clamp(64px,8vw,96px) clamp(20px,4vw,56px) 0;
    overflow:hidden;
    box-sizing:border-box;
}
.vs5-footer *,
.vs5-footer *::before,
.vs5-footer *::after{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
    .vs5-footer *, .vs5-footer *::before, .vs5-footer *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}
.vs5-footer .logo img {
    filter: brightness(0) invert(1); /* Перетворює темний логотип на чисто білий */
    opacity: 0.85;                     /* Приглушує яскравість до світло-сірого/кремового */
}
.vs5-footer a{ color:inherit; text-decoration:none; }

/* faint decorative arc, echoing the rest of the page */
.vs5-deco{
    position:absolute;
    pointer-events:none;

    border-radius:50%;
    opacity:.5;
    width:560px; height:560px;
    right:-160px;
    top:-60px;
}
.vs5-deco::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url(foto/visual.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}


.vs5-inner{
    max-width:1440px;
    margin:0 auto;
    position:relative;
    z-index:2;
}

/* ---- top grid ---- */
.vs5-grid{
    display:grid;
    grid-template-columns:1.3fr 0.9fr 1.1fr;
    gap:clamp(32px,5vw,64px);
    padding-bottom:clamp(48px,6vw,72px);
}

.vs5-brand-logo{
    font-family:var(--vs5-font-display);
    font-style:italic;
    font-weight:600;
    font-size:24px;
    color:var(--vs5-white);
    margin:0 0 16px;
    display:inline-block;
}

.vs5-brand-tagline{
    font-size:14.5px;
    line-height:1.7;
    color:var(--vs5-ink-soft);
    max-width:320px;
    margin:0 0 28px;
}

.vs5-social{
    display:flex;
    align-items:center;
    gap:14px;
}
.vs5-social a{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    border:1px solid #fffcf8;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.vs5-social a:hover{
    background:var(--vs5-gold);
    border-color:var(--vs5-gold);
    color:var(--vs5-ink);
    transform:translateY(-3px);
}
.vs5-social svg{ width:16px; height:16px; }

.vs5-col-title{
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--vs5-gold-soft);
    margin:0 0 22px;
}

.vs5-nav-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.vs5-nav-list a{
    position:relative;
    display:inline-block;
    font-size:15px;
    font-weight:500;
    color:var(--vs5-ink-soft);
    transition:color .25s ease;
    width:fit-content;
}
.vs5-nav-list a::after{
    content:'';
    position:absolute;
    left:0; right:100%;
    bottom:-3px;
    height:1px;
    background:var(--vs5-gold);
    transition:right .3s cubic-bezier(.4,0,.2,1);
}
.vs5-nav-list a:hover{ color:var(--vs5-white); }
.vs5-nav-list a:hover::after{ right:0; }

.vs5-contact-list{
    list-style:none;
    margin:0 0 26px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.vs5-contact-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14.5px;
    line-height:1.5;
    color:var(--vs5-ink-soft);
}
.vs5-contact-list svg{
    width:16px; height:16px;
    flex:none;
    margin-top:2px;
    color:var(--vs5-gold);
}
.vs5-contact-list a:hover{ color:var(--vs5-white); }

.vs5-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:14px 24px;
    border-radius:4px;
    background:var(--vs5-gold);
    color:var(--vs5-ink);
    border:1px solid var(--vs5-gold);
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease;
}
.vs5-cta-btn:hover{
    background:var(--vs5-gold-soft);
    transform:translateY(-3px);
    box-shadow:0 14px 26px rgba(0,0,0,.35);
}
.vs5-cta-btn svg{ width:15px; height:15px; }

/* ---- bottom bar ---- */
.vs5-bottom{
    border-top:1px solid #948c7c;
    padding:22px 0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.vs5-copy{
    font-size:13px;
    color:#fffcfd;
    margin:0;
}
.vs5-legal{
    display:flex;
    gap:22px;
}
.vs5-legal a{
    font-size:13px;
    color:#fffcfd;
    transition:color .25s ease;
}
.vs5-legal a:hover{ color:var(--vs5-white); }

/* scroll-reveal */
.vs5-reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s ease, transform .7s ease;
}
.vs5-reveal.vs5-is-visible{
    opacity:1;
    transform:translateY(0);
}
.vs5-grid > .vs5-reveal:nth-child(1){ transition-delay:.05s; }
.vs5-grid > .vs5-reveal:nth-child(2){ transition-delay:.15s; }
.vs5-grid > .vs5-reveal:nth-child(3){ transition-delay:.25s; }

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
    .vs5-inner{ text-align:center; }
    .vs5-social{ justify-content:center; }
    .vs5-nav-list{ align-items:center; }
    .vs5-nav-list a{ margin:0 auto; }
    .vs5-contact-list{ align-items:center; }
    .vs5-contact-list li{ justify-content:center; }
    .vs5-brand-tagline{ margin-left:auto; margin-right:auto; }
    .vs5-bottom{ justify-content:center; text-align:center; }
    .vs5-legal{ justify-content:center; }
}

@media (max-width:860px){
    .vs5-grid{
        grid-template-columns:1fr 1fr;
    }
    .vs5-grid > *:first-child{ grid-column:1 / -1; }
}

@media (max-width:560px){
    .vs5-grid{ grid-template-columns:1fr; gap:36px; }
    .vs5-bottom{ flex-direction:column; align-items:center; }
    .vs5-deco{ display:none; }
}


.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background-color: #C89B3C; /* Ваш золотисто-гірчичний колір */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;

    /* Анімація появи */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Стан, коли кнопка видима */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ефект при наведенні */
.back-to-top:hover {
    background-color: #b58a32; /* Трохи темніший відтінок при наведенні */
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Адаптив для мобільних */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}