/* ================================================================
   POLISSYA KIDS 16L U-10 — CSS 2.0
   Сучасний професійний футбольний стиль
   Збережено сумісність з існуючими HTML/JS класами
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Oswald:wght@500;600;700&display=swap');

:root {
    --green-950: #03150a;
    --green-900: #062611;
    --green-800: #073d19;
    --green-700: #075c1a;
    --green-600: #087f23;
    --green-500: #0a9a2b;
    --green-400: #32c95b;
    --lime: #c8f43a;
    --white: #ffffff;
    --surface: #f4f7f4;
    --surface-2: #eaf1eb;
    --text: #102017;
    --muted: #66736b;
    --line: rgba(9, 74, 27, .12);
    --shadow-sm: 0 8px 24px rgba(3, 30, 13, .08);
    --shadow-md: 0 16px 40px rgba(3, 30, 13, .12);
    --shadow-lg: 0 24px 70px rgba(3, 30, 13, .18);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --container: 1180px;
    --ease: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f7faf7 0%, #edf3ee 100%);
    line-height: 1.6;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(rgba(247,250,247,.94), rgba(237,243,238,.97)), url('images/football-field.jpg') center/cover fixed;
}
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }

/* =========================
   ШАПКА САЙТУ
   ========================= */

header {
    position: relative;
    z-index: 1000;
    color: var(--white);
    text-align: left;
    padding: 18px 20px 14px;

    background:
        linear-gradient(
            135deg,
            var(--green-950),
            var(--green-800) 55%,
            var(--green-700)
        );

    box-shadow: 0 10px 35px rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lime),
            transparent
        );
}


/* =========================
   ВЕРХНЯ ЧАСТИНА
   ========================= */

.header-top {
    width: min(var(--container), 100%);
    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}


/* =========================
   ЛОГО + НАЗВА
   ========================= */

.header-brand {
    display: flex;
    align-items: center;

    gap: 16px;
    min-width: 0;
}

.header-logo {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    object-fit: contain;
    display: block;

    margin: 0;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.25));

    transition:
        transform .3s var(--ease);
}

.header-logo:hover {
    transform:
        translateY(-3px)
        rotate(-2deg);
}


/* =========================
   НАЗВА КОМАНДИ
   ========================= */

.header-brand-text {
    min-width: 0;
}

.header-brand-text h1 {
    margin: 0 0 4px;

    font-family: 'Oswald', sans-serif;

    font-size: clamp(28px, 4vw, 44px);

    line-height: 1;

    letter-spacing: .04em;

    text-transform: uppercase;
}

.header-brand-text p {
    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================
   СОЦМЕРЕЖІ — СПРАВА ЗВЕРХУ
   ========================= */

.header-social-top {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 9px;

    margin: 0;

    flex-shrink: 0;
}

.header-social-top a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: var(--white);

    text-decoration: none;

    font-size: 17px;

    transition:
        transform .25s var(--ease),
        background .25s,
        border-color .25s;
}

.header-social-top a:hover {
    transform: translateY(-3px);

    background: var(--green-600);

    border-color: rgba(255,255,255,.35);
}


/* =========================
   МЕНЮ
   ========================= */

header nav {
    border-top: 1px solid rgba(255,255,255,.08);

    padding-top: 10px;
}

/* ========================= СОЦМЕРЕЖІ ========================= */
.header-social-top, .header-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 4px 0 13px;
}
.header-social-top a, .header-social-button, .header-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--white);
    text-decoration: none;
    transition: transform .25s var(--ease), background .25s, border-color .25s;
}
.header-social-top a:hover, .header-social-button:hover, .header-social a:hover,
.header-social-top a:first-child:hover, .header-social-top a:last-child:hover {
    transform: translateY(-3px);
    background: var(--green-600);
    border-color: rgba(255,255,255,.35);
}
header nav a.header-social-button, header nav a.youtube-button, header nav a.facebook-button { color: var(--white); }
header nav a.youtube-button:hover, header nav a.facebook-button:hover { color: var(--white); }

/* ========================= МЕНЮ ========================= */
nav, .navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: var(--container);
}
nav > a, nav a, .navbar a, .dropdown-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: rgba(255,255,255,.88);
    background: transparent;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: color .2s, background .2s, transform .2s, border-color .2s;
    cursor: pointer;
}
nav > a::after, nav a::after, .dropdown-button::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 5px;
    height: 2px;
    border-radius: 99px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s var(--ease);
}
nav > a:hover, nav a:hover, .navbar a:hover, .dropdown-button:hover,
nav > a:focus-visible, .dropdown-button:focus-visible {
    color: var(--white);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.1);
}
nav > a:hover::after, nav a:hover::after, .dropdown-button:hover::after { transform: scaleX(1); }
.menu-toggle {
    display: none;
    border: 0;
    color: var(--white);
    background: var(--green-600);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 800;
}
.navbar ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.navbar li { position: relative; }

/* ========================= DROPDOWN ========================= */
.dropdown { position: relative; }
.dropdown-button { border: 0; }
.dropdown:hover .dropdown-button { background: rgba(255,255,255,.08); color: var(--white); }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 210px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: rgba(4, 31, 13, .98);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px) scale(.98);
    transform-origin: top center;
    transition: opacity .2s, transform .2s var(--ease), visibility .2s;
    z-index: 2000;
}
.dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
.dropdown:hover .dropdown-menu, .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}
.dropdown-menu a {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s, color .2s, padding-left .2s;
}
.dropdown-menu a:hover { background: var(--green-600); color: var(--white); padding-left: 16px; }
.age-groups { position: relative; }
.age-groups summary { cursor: pointer; font-weight: 700; }

/* ========================= ОСНОВНИЙ КОНТЕНТ ========================= */
main {
    width: min(var(--container), calc(100% - 32px));
    margin: 32px auto 56px;
}
main > section:not(.hero), section {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px;
    padding: clamp(22px, 4vw, 36px);
    /*background: rgba(255,255,255,.94);*/
    border: 1px solid rgba(7,61,25,.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
section::before, main > section:not(.hero)::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--lime), var(--green-600));
}
section h2, .u-section-3 h2 {
    margin: 0 0 20px;
    color: var(--green-900);
    font-family: 'Oswald', sans-serif;
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .02em;
}
section h3 { color: var(--green-700); }
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--green-600);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.section-kicker::before { content: ''; width: 24px; height: 3px; border-radius: 99px; background: var(--lime); }

/* ========================= HERO ========================= */
.hero {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
    linear-gradient(
        90deg,
        rgba(3, 21, 10, .82),
        rgba(3, 21, 10, .35),
        rgba(3, 21, 10, .15)
    ),
    url('images/team.jpg') center 10% / cover no-repeat;

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-lg);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2,21,10,.92) 0%, rgba(2,21,10,.62) 48%, rgba(2,21,10,.25) 100%);
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,21,10,.7), transparent 55%); }
.hero-content {
    position: relative;
    z-index: 2;
    width: min(820px, 100%);
    padding: clamp(34px, 7vw, 72px);
    margin-right: auto;
    text-align: left;
}
.hero-badge {
    display: inline-flex;
    padding: 7px 12px;
    margin-bottom: 18px;
    border: 1px solid rgba(200,244,58,.45);
    border-radius: 999px;
    background: rgba(200,244,58,.1);
    color: var(--lime);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}
.logo {
    width: 138px;
    height: 138px;
    object-fit: contain;
    display: block;
    margin: 0 0 22px;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,.4));
}
.hero h2 {
    max-width: 780px;
    margin: 0 0 15px;
    color: var(--white);
    font-family: 'Oswald', sans-serif;
    font-size: clamp(38px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.hero p {
    max-width: 620px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.82);
    font-size: clamp(16px, 2vw, 20px);
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-button, .green-button, .media-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 11px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 800;
    transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s;
}
.hero-button {
    background: var(--white);
    color: var(--green-700);
    border-color: rgba(255,255,255,.7);
}
.hero-button:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,.2); }
.hero-button-primary { background: var(--lime); color: var(--green-950); border-color: var(--lime); }
.hero-button-primary:hover { background: var(--white); color: var(--green-800); }
.hero-button-outline { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.hero-button-outline:hover { background: var(--white); color: var(--green-800); }
.hero-scroll {
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.75);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hero-scroll span { display: block; width: 28px; height: 44px; border: 1px solid rgba(255,255,255,.45); border-radius: 20px; position: relative; }
.hero-scroll span::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 99px; background: var(--lime); transform: translateX(-50%); animation: scrollDot 1.7s infinite; }
@keyframes scrollDot { 0%,100% { transform: translate(-50%,0); opacity: 1; } 70% { transform: translate(-50%,15px); opacity: .2; } }

/* ========================= КНОПКИ ========================= */
.green-button { background: var(--green-600); color: var(--white); box-shadow: 0 8px 18px rgba(8,127,35,.18); }
.green-button:hover { background: var(--green-800); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8,127,35,.25); }

/* ========================= СТАТИСТИКА ========================= */
.statistics, .stats-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: var(--container);
    margin: 0 auto 28px;
    padding: 0;
}
.stat, .stat-modern {
    position: relative;
    min-height: 120px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    background: linear-gradient(145deg, var(--green-800), var(--green-600));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s;
}
.stat::before, .stat-modern::before { content: ''; position: absolute; width: 90px; height: 90px; right: -35px; top: -40px; border-radius: 50%; background: rgba(200,244,58,.12); }
.stat:hover, .stat-modern:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.stat strong, .stat-modern strong { position: relative; display: block; font-family: 'Oswald', sans-serif; font-size: 34px; line-height: 1; }
.stat span, .stat-modern span { position: relative; display: block; margin-top: 7px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stat-modern:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 22%; height: 56%; width: 1px; background: rgba(255,255,255,.15); }
.stat-modern:nth-child(-n+2) { border-radius: 16px; }

/* ========================= НАЙБЛИЖЧИЙ МАТЧ ========================= */
.next-match, .next-match-modern {
    position: relative;
    text-align: center;
    background: linear-gradient(135deg, var(--green-950), var(--green-800));
    color: var(--white);
    border: 0;
    overflow: hidden;
}
.next-match-modern::before { content:''; position:absolute; width:300px; height:300px; right:-120px; top:-140px; border-radius:50%; background:rgba(200,244,58,.09); }
.next-match-modern::after { content:''; position:absolute; width:240px; height:240px; left:-120px; bottom:-150px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.next-match-modern > * { position: relative; z-index: 1; }
.next-match h2, .next-match-modern h2 { color: var(--white); }
.next-match-label { display:block; margin-bottom:6px; color:var(--lime); font-size:11px; font-weight:900; letter-spacing:.16em; }
.match-date, .next-match-date, .next-match-round, .next-match-place { color: var(--muted); font-weight:700; }
.next-match-modern .next-match-date, .next-match-modern .next-match-place, .next-match-modern .next-match-round { color: rgba(255,255,255,.68); }
.match-teams, .match-modern-grid, .next-match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(15px, 4vw, 50px);
    margin: 26px auto;
    max-width: 760px;
}
.team, .next-team, .match-team-modern { min-width: 0; text-align: center; }
.team img, .opponent-logo, .match-team-modern img, .opponent-placeholder {
    width: 104px;
    height: 104px;
    object-fit: contain;
    margin: 0 auto 12px;
}
.opponent-logo, .opponent-placeholder { display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.08); font-size:42px; }
.team h3, .match-team-modern strong { margin:0; color:inherit; font-size:17px; line-height:1.2; }
.match-team-modern span { display:block; margin-top:5px; color:rgba(255,255,255,.58); font-size:12px; }
.vs, .next-vs, .match-vs-modern { font-family:'Oswald',sans-serif; color:var(--lime); font-size:28px; font-weight:700; text-transform:uppercase; }
.match-vs-modern { display:flex; flex-direction:column; align-items:center; gap:2px; }
.match-vs-modern span { font-size:32px; }
.match-vs-modern small { color:rgba(255,255,255,.45); font-family:'Inter',sans-serif; font-size:9px; letter-spacing:.14em; }
.match-info-modern { color:rgba(255,255,255,.72); font-size:14px; font-weight:700; }
.next-match-modern .green-button { margin-top:10px; background:var(--lime); color:var(--green-950); }
.next-match-modern .green-button:hover { background:var(--white); color:var(--green-800); }

/* ========================= ПРО КОМАНДУ ========================= */
.page-title { text-align:center; }
.page-title h2 { font-size:clamp(28px,4vw,42px); }
.team-photo { width:100%; max-width:980px; height:min(560px, 60vw); min-height:280px; display:block; margin:28px auto; object-fit:cover; object-position:center top; border-radius:18px; box-shadow:var(--shadow-md); }
.team-photo img { width:100%; display:block; }
.team-intro { background:linear-gradient(145deg,#fff,#f2f7f3); }
.team-intro p { max-width:900px; margin:0 auto 16px; color:#526058; font-size:16px; line-height:1.75; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value-card { padding:22px; background:var(--surface); border:1px solid var(--line); border-top:0; border-radius:14px; box-shadow:none; }
.value-card::before { content:''; display:block; width:35px; height:4px; margin-bottom:16px; border-radius:99px; background:var(--green-600); }
.value-card h3 { margin:0 0 8px; }

/* ========================= ГРАВЦІ ========================= */
.players { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.player-link { display:block; color:inherit; text-decoration:none; }
.player-card { overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s; }
.player-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-md); }
.player-card img { width:100%; height:310px; display:block; object-fit:contain; object-position:center; background:var(--surface); padding:0; transition:transform .5s var(--ease); }
.player-card:hover img { transform:scale(1.035); }
.player-info { padding:18px; text-align:left; }
.player-info h3 { margin:0 0 5px; color:var(--green-800); font-family:'Oswald',sans-serif; font-size:23px; }
.player-info p { margin:4px 0; color:var(--muted); }
.player-number { display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:5px 9px; border-radius:8px; background:var(--green-600); color:var(--white); font-weight:900; }

/* ========================= ПРОФІЛЬ ГРАВЦЯ ========================= */
.player-profile { overflow:hidden; }
.player-profile > h2 { margin-top:0; }
.player-profile-content { display:grid; grid-template-columns:minmax(240px, .8fr) 1.2fr; gap:30px; align-items:start; }
.player-profile-photo img { width:100%; max-height:520px; object-fit:cover; border-radius:18px; box-shadow:var(--shadow-md); }
.player-profile-info h1 { margin:0 0 8px; color:var(--green-900); font-family:'Oswald',sans-serif; font-size:clamp(32px,5vw,52px); }
.player-profile-info h2 { margin:18px 0 8px; font-size:22px; }
.player-profile-info p { color:var(--muted); }
.player-statistics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }
.player-statistics div { padding:15px; border-radius:12px; background:var(--surface); text-align:center; }
.player-statistics strong { display:block; color:var(--green-700); font-size:25px; }
.player-statistics span { color:var(--muted); font-size:12px; }
.player-achievements { margin-top:24px; }
.player-achievements h2 { font-size:23px; }
.player-achievements li { margin:7px 0; color:var(--muted); }
.player-profile .green-button { margin-top:14px; }

/* ========================= ТУРНІРИ ========================= */
.tournament-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tournament-card, .finished-tournament { padding:22px; background:linear-gradient(145deg,#f7faf7,#edf4ee); border:1px solid var(--line); border-left:4px solid var(--green-600); border-radius:16px; transition:transform .25s var(--ease), box-shadow .25s; }
.tournament-card:hover, .finished-tournament:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.tournament-card h3, .finished-tournament h3 { margin:12px 0 8px; color:var(--green-800); font-family:'Oswald',sans-serif; font-size:23px; }
.tournament-status { display:inline-flex; padding:5px 10px; border-radius:999px; background:var(--green-600); color:var(--white); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.finished-tournament { margin-bottom:14px; }

/* ========================= НОВИНИ ========================= */
.latest-news h2 { margin-bottom:20px; }
.news-section-head { display:flex; justify-content:space-between; align-items:end; gap:15px; margin-bottom:20px; }
.news-section-head h2 { margin:0; }
.news-head-line { width:100%; max-width:160px; height:3px; background:var(--lime); border-radius:99px; }
.news { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.news-card { position:relative; min-height:190px; padding:22px; overflow:hidden; background:linear-gradient(145deg,#f8fbf8,#edf4ee); border:1px solid var(--line); border-left:0; border-radius:16px; transition:transform .3s var(--ease), box-shadow .3s; }
.news-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--green-600); }
.news-card::after { content:''; position:absolute; width:120px; height:120px; right:-60px; top:-60px; border-radius:50%; background:rgba(10,154,43,.07); transition:transform .3s; }
.news-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.news-card:hover::after { transform:scale(1.25); }
.news-card h3 { margin:9px 0; color:var(--green-800); font-family:'Oswald',sans-serif; font-size:22px; }
.news-card p { color:var(--muted); }
.news-date { margin-bottom:7px; color:var(--green-600); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.news-icon { font-size:28px; }
.news-link { display:inline-flex; margin-top:8px; color:var(--green-700); font-weight:800; text-decoration:none; }
.news-link:hover { text-decoration:underline; }

/* ========================= ДОСЯГНЕННЯ ========================= */
.achievements-section { background:linear-gradient(145deg,#fff,#f1f7f2); }
.achievements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.achievement { position:relative; padding:24px 18px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s; }
.achievement::before { content:''; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--green-600),var(--lime)); }
.achievement:hover { transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.achievement-icon { font-size:44px; }
.achievement h3 { margin:12px 0 5px; color:var(--green-800); font-family:'Oswald',sans-serif; }
.achievement p { margin:0; color:var(--muted); }

/* ========================= МАТЧІ ========================= */
.matches, .matches-calendar { display:flex; flex-direction:column; gap:12px; }
.match, .saved-match { padding:18px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--green-600); border-radius:14px; }
.match div, .saved-match-info { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; }
.match div span, .saved-match-teams span { font-size:20px; font-weight:800; }
.match p { margin:7px 0 0; color:var(--green-700); font-weight:800; }
.saved-match-teams { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.saved-match-teams strong { font-size:22px; color:var(--green-700); }
.saved-match-score { font-family:'Oswald',sans-serif; font-size:25px; color:var(--green-800); }
.saved-match-date, .saved-match-round, .saved-match-place { color:var(--muted); font-size:13px; font-weight:700; }
.saved-match-date, .saved-match-round, .saved-match-place { margin-right:12px; }
.match-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.edit-match, .delete-match { border:0; border-radius:9px; padding:9px 12px; cursor:pointer; font-weight:800; }
.edit-match { background:#e9f2ea; color:var(--green-700); }
.edit-match:hover { background:#d9e9dc; }
.delete-match { background:#fbe9e9; color:#a52828; }
.delete-match:hover { background:#f5d4d4; }
.no-matches { padding:22px; text-align:center; color:var(--muted); }

/* ========================= ТАБЛИЦІ ========================= */
.table-container, .table-wrapper, .standings-table-wrapper, .u-table-responsive { width:100%; overflow-x:auto; border-radius:14px; }
table, .standings-table, .player-statistics-table table, .u-table-entity { width:100%; min-width:620px; border-collapse:separate; border-spacing:0; overflow:hidden; }
th, .standings-table th, .player-statistics-table th, .u-table-entity th { padding:13px 12px; color:var(--white); background:var(--green-800); text-align:center; font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
td, .standings-table td, .player-statistics-table td, .u-table-entity td { padding:13px 12px; border-bottom:1px solid var(--line); background:#fff; text-align:center; }
tbody tr:hover td, .standings-table tr:hover td, .player-statistics-table tr:hover td, .u-table-entity tbody tr:not(:first-child):hover td { background:#f0f6f1; }
.standings-table td:nth-child(2), .player-statistics-table td:nth-child(2), .u-table-entity td:nth-child(2) { font-weight:800; }
.standings-table .our-team td { background:#e9f5eb; font-weight:800; }
.standings-table .first-place td:first-child { color:var(--green-600); font-weight:900; }
.table-info { margin-top:10px; color:var(--muted); font-size:13px; }
.player-statistics-table h2 { margin-top:0; }
.player-statistics-table th, .player-statistics-table td { white-space:nowrap; }

/* ========================= НОВА ТАБЛИЦЯ U-10 ========================= */
.u-section-3 { overflow:hidden; }
.u-section-3 .u-sheet, .u-section-3 .u-sheet-1 { width:100%; max-width:none; }
.u-section-3 .u-text-1 { margin-top:0; }
.u-table-cell .u-table-cell-3 { text-align:center; }
.u-table-entity tbody tr:first-child td { background:#edf7ef; }

/* ========================= ФІЛЬТРИ ========================= */
.match-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.filter-button { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--green-800); cursor:pointer; font-weight:800; }
.filter-button:hover, .filter-button.active { background:var(--green-600); color:#fff; border-color:var(--green-600); }

/* ========================= ФОРМИ ========================= */
form, .add-match-form, .edit-match-form { max-width:760px; margin:0 auto; }
form label, .add-match-form label, .edit-match-form label { display:block; margin:0 0 6px; color:var(--green-900); font-size:13px; font-weight:800; }
form input, form textarea, .add-match-form input, .edit-match-form input, .add-match-form select, .edit-match-form select {
    width:100%;
    margin:0 0 14px;
    padding:12px 14px;
    border:1px solid #d6dfd8;
    border-radius:10px;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:border-color .2s, box-shadow .2s;
}
form textarea { min-height:130px; resize:vertical; }
form input:focus, form textarea:focus, .add-match-form input:focus, .edit-match-form input:focus, .add-match-form select:focus, .edit-match-form select:focus { border-color:var(--green-500); box-shadow:0 0 0 4px rgba(10,154,43,.1); }
form button, .add-match-form button, .edit-form-buttons button { padding:12px 18px; border:0; border-radius:10px; background:var(--green-600); color:#fff; cursor:pointer; font-weight:800; transition:.2s; }
form button:hover, .add-match-form button:hover { background:var(--green-800); transform:translateY(-2px); }
#match-message { margin-top:12px; color:var(--green-700); font-weight:700; }
.edit-form-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.cancel-edit { background:#e8ece9 !important; color:var(--text) !important; }
.cancel-edit:hover { background:#dce3de !important; }

/* ========================= КОНТАКТИ ========================= */
.contacts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.contact-card { padding:22px 16px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:15px; }
.contact-icon { font-size:34px; }
.contact-card h3 { margin:10px 0 5px; color:var(--green-800); font-family:'Oswald',sans-serif; }
.contact-card a { color:var(--green-700); font-weight:800; text-decoration:none; word-break:break-word; }
.contact-card a:hover { text-decoration:underline; }
.social-links { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.social-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border-radius:10px; background:var(--green-600); color:#fff; text-decoration:none; font-weight:800; transition:.2s; }
.social-button:hover { background:var(--green-800); transform:translateY(-3px); }

/* ========================= КАРТА ========================= */
.training-map { overflow:hidden; border-radius:16px; }
.training-map iframe { display:block; width:100%; min-height:360px; border:0; border-radius:16px; }
.map-link-wrapper { margin-top:12px; text-align:center; }
.map-placeholder { min-height:250px; display:grid; place-items:center; padding:20px; border:1px dashed var(--green-500); border-radius:14px; background:#eef6ef; text-align:center; }
.map-placeholder p { color:var(--green-700); font-weight:800; }

/* ========================= CTA ========================= */
.media-cta { position:relative; text-align:center; color:#fff; background:linear-gradient(135deg,var(--green-950),var(--green-700)); border:0; }
.media-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0, rgba(200,244,58,.16), transparent 48%); }
.media-cta-content { position:relative; z-index:1; }
.media-cta-icon { font-size:42px; margin-bottom:5px; }
.media-cta .section-kicker { color:var(--lime); justify-content:center; }
.media-cta h2 { color:#fff; margin-bottom:8px; }
.media-cta p { color:rgba(255,255,255,.7); }
.media-cta-button { margin-top:8px; background:var(--lime); color:var(--green-950); }
.media-cta-button:hover { background:#fff; color:var(--green-800); transform:translateY(-3px); }

/* ========================= FOOTER ========================= */
footer { margin-top:56px; padding:34px 20px; background:var(--green-950); color:#fff; text-align:center; }
.footer-inner { width:min(var(--container),100%); margin:auto; }
.footer-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.footer-brand img { width:50px; height:50px; object-fit:contain; }
.footer-brand strong { display:block; font-family:'Oswald',sans-serif; letter-spacing:.05em; }
.footer-brand span { display:block; color:rgba(255,255,255,.55); font-size:12px; }
footer p { margin:5px 0; color:rgba(255,255,255,.6); font-size:13px; }

/* ========================= АНІМАЦІЇ ========================= */
.scroll-animate { opacity:0; transform:translate3d(0,35px,0); transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s; will-change:opacity,transform; }
.scroll-animate.animate-left { transform:translate3d(-55px,0,0); }
.scroll-animate.animate-right { transform:translate3d(55px,0,0); }
.scroll-animate.animate-top { transform:translate3d(0,-35px,0); }
.scroll-animate.animate-bottom { transform:translate3d(0,35px,0); }
.scroll-animate.show, .animate-left.show, .animate-right.show, .animate-top.show, .animate-bottom.show { opacity:1; transform:translate3d(0,0,0); }
.scroll-animate.show:hover { box-shadow:var(--shadow-md); }
.news .scroll-animate:nth-child(2) { transition-delay:.08s; }
.news .scroll-animate:nth-child(3) { transition-delay:.16s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .scroll-animate { opacity:1; transform:none !important; }
}

/* ========================= АДАПТИВНІСТЬ ========================= */
@media (max-width: 1000px) {
    .players { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .contacts { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .achievements, .news { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .statistics, .stats-modern { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
    main { width:min(var(--container),calc(100% - 22px)); margin-top:18px; }
    main > section:not(.hero), section { border-radius:18px; }
    .values { grid-template-columns:1fr; }
    .player-profile-content { grid-template-columns:1fr; }
    .player-profile-photo img { max-height:480px; }
    .tournament-grid { grid-template-columns:1fr; }
    .match-teams, .match-modern-grid, .next-match-teams { gap:15px; }
    .news-section-head { align-items:start; flex-direction:column; }
    .news-head-line { max-width:100%; }
}

@media (max-width: 700px) {
    header { padding:16px 12px 12px; }
    header h1 { font-size:27px; }
    header p { font-size:10px; letter-spacing:.05em; }
    .header-logo { width:60px; height:60px; }
    /* =========================================
   МОБІЛЬНЕ МЕНЮ — ГОРИЗОНТАЛЬНЕ
   ========================================= */

header nav {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 4px;

    overflow-x: auto;
    overflow-y: visible;

    flex-wrap: nowrap;

    padding: 8px 2px 5px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

header nav::-webkit-scrollbar {
    display: none;
}


/* Пункти меню */

header nav > a,
header nav .dropdown {
    flex: 0 0 auto;
}

header nav > a,
header nav .dropdown-button {
    width: auto;
    min-height: 40px;

    justify-content: center;

    padding: 9px 12px;

    white-space: nowrap;

    font-size: 13px;
}


/* Випадаюче меню */

header nav .dropdown {
    position: relative;
}

header nav .dropdown-menu {
    position: absolute;

    top: calc(100% + 5px);
    left: 50%;

    width: 190px;
    min-width: 190px;

    transform: translateX(-50%);

    margin: 0;

    z-index: 3000;
}


/* Щоб меню не розтягувалось */

header nav .dropdown-menu a {
    width: 100%;

    justify-content: flex-start;

    padding: 10px 14px;
}


/* При наведенні / відкритті */

header nav .dropdown:hover .dropdown-menu,
header nav .dropdown-menu.show {
    transform: translateX(-50%);
}
    header nav > a,
header nav .dropdown-button {
    width: auto;
    justify-content: center;
    padding: 9px 12px;
}
    nav > a::after, nav a::after, .dropdown-button::after { display:none; }
    .menu-toggle { display:inline-flex; margin:0 auto 8px; }
    .navbar ul { display:none; width:100%; flex-direction:column; align-items:stretch; }
    .navbar ul.show { display:flex; }
    .dropdown-menu { position:static; width:100%; min-width:0; transform:none; opacity:1; visibility:visible; pointer-events:auto; display:none; margin:2px 0 4px; border-radius:10px; box-shadow:none; }
    .dropdown-menu.show, .dropdown:hover .dropdown-menu { display:block; transform:none; }
    .dropdown-menu a { padding:10px 16px; }
    .hero { min-height:600px; border-radius:18px; }
    .hero::before { background:linear-gradient(90deg,rgba(2,21,10,.93),rgba(2,21,10,.58)); }
    .hero-content { padding:28px 22px 70px; }
    .logo { width:105px; height:105px; }
    .hero h2 { font-size:clamp(34px,11vw,54px); }
    .hero-scroll { right:18px; bottom:15px; }
    .statistics, .stats-modern { gap:8px; }
    .stat, .stat-modern { min-height:100px; padding:17px 10px; }
    .stat strong, .stat-modern strong { font-size:29px; }
    .match-teams, .match-modern-grid, .next-match-teams { grid-template-columns:1fr; gap:13px; }
    .match-vs-modern, .next-vs, .vs { order:2; }
    .match-team-modern:first-child, .next-team:first-child, .team:first-child { order:1; }
    .match-team-modern:last-child, .next-team:last-child, .team:last-child { order:3; }
    .team img, .opponent-logo, .match-team-modern img, .opponent-placeholder { width:82px; height:82px; }
    .saved-match-teams { grid-template-columns:1fr; text-align:center; }
    .saved-match-score { justify-self:center; }
    .team-photo { height:300px; }
}

@media (max-width: 560px) {
    .players, .achievements, .news, .contacts { grid-template-columns:1fr; }
    .statistics, .stats-modern { grid-template-columns:1fr 1fr; }
    .player-card img { height:340px; object-fit:contain; object-position:center; background:var(--surface); }
    .hero-buttons { flex-direction:column; align-items:stretch; }
    .hero-button { width:100%; }
    .hero { min-height:560px; }
    main > section:not(.hero), section { padding:22px 17px; }
    .gallery { grid-template-columns:1fr !important; }
    .gallery-item { height:250px !important; }
}

/* ========================= ГАЛЕРЕЯ / LIGHTBOX ========================= */
.gallery { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:8px 0 0; }
.gallery-item { position:relative; width:100%; height:220px; overflow:hidden; border-radius:14px; cursor:pointer; background:#dfe7e1; box-shadow:var(--shadow-sm); }
.gallery-item::after { content:'↗'; position:absolute; right:10px; bottom:10px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; opacity:0; transform:scale(.8); transition:.25s; }
.gallery-item:hover::after { opacity:1; transform:scale(1); }
.gallery-item img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s var(--ease), filter .3s; }
.gallery-item:hover img { transform:scale(1.08); filter:saturate(1.08); }
.lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(0,10,4,.94); backdrop-filter:blur(7px); }
.lightbox.active { display:flex; }
.lightbox img { max-width:min(94vw,1300px); max-height:90vh; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 25px 80px rgba(0,0,0,.55); }
.lightbox-close { position:absolute; top:15px; right:24px; z-index:10000; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.1); font-size:36px; line-height:1; cursor:pointer; transition:.2s; }
.lightbox-close:hover { color:var(--lime); background:rgba(255,255,255,.18); transform:scale(1.06); }

/* ========================= ДРІБНІ СУМІСНІСТЬ/ЗАХИСТ ========================= */
.box, .card { border-radius:var(--radius-md); }
article { padding:16px 20px; margin-top:15px; background:var(--surface); border-left:4px solid var(--green-600); border-radius:10px; }

@media (max-width: 768px) {
    html, body { overflow-x:clip; }
    main, main > section:not(.hero), .team-photo, .team-intro { max-width:100%; }
    .team-intro { width:auto; margin-left:0; margin-right:0; }
    .team-intro h2 { font-size:clamp(24px,7vw,30px); overflow-wrap:anywhere; }
    .team-intro p { max-width:none; font-size:16px; overflow-wrap:break-word; }
    .scroll-animate.animate-left, .scroll-animate.animate-right { transform:translate3d(0,28px,0) scale(.99); }
    .scroll-animate.show { transform:translate3d(0,0,0) scale(1); }
}

/* =========================
   КАРТА ТРЕНУВАНЬ
   ========================= */

.training-map {
    position: relative;
    width: 100%;
    height: 400px;

    margin-top: 20px;

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid rgba(7, 61, 25, .12);

    box-shadow: var(--shadow-md);

    background: #eaf1eb;
}

.training-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* Мобільна версія */

@media (max-width: 700px) {

    .training-map {
        height: 300px;
        border-radius: 14px;
    }

}
/* =========================
   HERO — ФОТОСЛАЙДЕР
   ========================= */

.hero-slideshow {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-repeat: no-repeat;

    /* Налаштування положення фото */
    background-position: center 15%;

    opacity: 0;

    transition: opacity 1.5s ease-in-out;

    transform: scale(1.02);
}

.hero-slide.active {
    opacity: 1;

    animation: heroZoom 10s ease-in-out forwards;
}


/* Легке збільшення фотографії */

@keyframes heroZoom {

    0% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1.08);
    }

}


/* Затемнення фотографій */

.hero-slideshow::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 21, 10, .82),
            rgba(3, 21, 10, .35),
            rgba(3, 21, 10, .15)
        );

    z-index: 2;
}


/* Весь текст Hero поверх фотографій */

.hero > *:not(.hero-slideshow) {
    position: relative;
    z-index: 3;
}

/* Положення кожного фото */

.hero-slide:nth-child(1) {
    background-position: center 10%;
}

.hero-slide:nth-child(2) {
    background-position: center 70%;
}

.hero-slide:nth-child(3) {
    background-position: center 80%;
}

.hero-slide:nth-child(4) {
    background-position: center 15%;
}

/* =========================================
   МОБІЛЬНЕ ВИПАДАЮЧЕ МЕНЮ
   ========================================= */

@media (max-width: 700px) {

    /* Горизонтальне головне меню */
    header nav {
        position: relative;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        align-items: center;
        justify-content: flex-start;

        width: 100%;

        overflow-x: auto;
        overflow-y: visible;

        gap: 4px;

        padding: 8px 2px 8px;

        scrollbar-width: none;
    }

    header nav::-webkit-scrollbar {
        display: none;
    }


    /* Пункти головного меню */
    header nav > a,
    header nav .dropdown {
        flex: 0 0 auto;
    }

    header nav > a,
    header nav .dropdown-button {
        width: auto;

        min-height: 40px;

        padding: 9px 12px;

        white-space: nowrap;

        justify-content: center;

        font-size: 13px;
    }


    /* Контейнер випадаючого меню */
    header nav .dropdown {
        position: relative;
    }


    /* Випадаючий список */
    header nav .dropdown-menu {
        position: absolute;

        top: calc(100% + 6px);
        left: 50%;

        width: 190px;
        min-width: 190px;

        margin: 0;

        padding: 8px;

        display: none;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform: translateX(-50%);

        z-index: 9999;

        background: rgba(4, 31, 13, .98);

        border: 1px solid rgba(255,255,255,.12);

        border-radius: 12px;

        box-shadow: var(--shadow-lg);
    }


    /* Відкрите меню */
    header nav .dropdown-menu.show {
        display: block;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: translateX(-50%);
    }


    /* Посилання всередині */
    header nav .dropdown-menu a {
        display: flex;

        width: 100%;

        min-height: 40px;

        align-items: center;
        justify-content: flex-start;

        padding: 9px 12px;

        white-space: nowrap;

        color: rgba(255,255,255,.9);

        border-radius: 8px;
    }

    header nav .dropdown-menu a:hover {
        background: var(--green-600);
        color: var(--white);
    }


    /* При наведенні на ПК */
    header nav .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        display: block;

        transform: translateX(-50%);
    }
}

/* =====================================================
   MOBILE DROPDOWN — ФІНАЛЬНЕ ВИПРАВЛЕННЯ
   ===================================================== */

@media (max-width: 700px) {

    header nav {
        position: relative;
        z-index: 5000;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        width: 100%;
        overflow-x: auto;
        overflow-y: visible;

        gap: 4px;
        justify-content: flex-start;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    header nav::-webkit-scrollbar {
        display: none;
    }


    /* Пункти меню */

    header nav > a,
    header nav .dropdown {
        flex: 0 0 auto;
    }


    header nav > a,
    header nav .dropdown-button {
        width: auto;
        min-height: 40px;

        padding: 9px 12px;

        white-space: nowrap;

        font-size: 13px;
    }


    /* Контейнер випадаючого меню */

    header nav .dropdown {
        position: relative;
        z-index: 6000;
    }


    /* Саме випадаюче меню */

    header nav .dropdown-menu {

        position: absolute !important;

        top: calc(100% + 6px) !important;
        left: 0 !important;

        width: 190px !important;
        min-width: 190px !important;

        margin: 0 !important;
        padding: 7px !important;

        background: #062611 !important;

        border: 1px solid rgba(255,255,255,.15) !important;
        border-radius: 12px !important;

        box-shadow: 0 15px 40px rgba(0,0,0,.35) !important;

        transform: none !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        display: block !important;

        z-index: 99999 !important;
    }


    /* Відкрите меню */

    header nav .dropdown-menu.show {

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        display: block !important;

        transform: none !important;
    }


    /* Пункти всередині */

    header nav .dropdown-menu a {

        display: flex !important;

        width: 100% !important;

        min-height: 40px;

        align-items: center;
        justify-content: flex-start;

        padding: 10px 13px !important;

        color: #ffffff !important;

        text-decoration: none;

        white-space: nowrap;

        border-radius: 8px;
    }


    header nav .dropdown-menu a:hover,
    header nav .dropdown-menu a:active {

        background: rgba(255,255,255,.10);

        color: #ffffff;
    }

}

/* =====================================================
   HEADER + DROPDOWN ПОВЕРХ HERO
   ===================================================== */

header {
    position: relative !important;
    z-index: 100000 !important;
}

header nav {
    position: relative !important;
    z-index: 100001 !important;
}

header nav .dropdown {
    position: relative !important;
    z-index: 100002 !important;
}

header nav .dropdown-menu {
    z-index: 100003 !important;
}


/* Hero завжди нижче меню */

.hero {
    position: relative;
    z-index: 1 !important;
}

.hero-slideshow {
    z-index: 0 !important;
}


/* Вміст Hero також нижче dropdown */

.hero > *:not(.hero-slideshow) {
    z-index: 2 !important;
}

@media (max-width: 700px) {

    header {
        position: relative !important;
        z-index: 100000 !important;
    }

    header nav {
        position: relative !important;
        z-index: 100001 !important;
    }

    header nav .dropdown {
        position: relative !important;
        z-index: 100002 !important;
    }

    header nav .dropdown-menu {
        position: absolute !important;
        z-index: 999999 !important;
    }

}

/* =====================================================
   📱 МОБІЛЬНЕ МЕНЮ + DROPDOWN
   ===================================================== */

@media (max-width: 700px) {

    /* HEADER */

    header {
        position: relative !important;
        z-index: 100000 !important;
    }


    /* ГОРИЗОНТАЛЬНЕ МЕНЮ */

    header nav {
        position: relative !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: center !important;

        width: 100% !important;

        /* ВАЖЛИВО:
           не обрізаємо dropdown */

        overflow-x: auto !important;
        overflow-y: visible !important;

        gap: 4px;

        padding: 8px 2px 5px;

        z-index: 100001 !important;
    }


    /* Пункти меню */

    header nav > a,
    header nav .dropdown {
        flex: 0 0 auto !important;
    }


    header nav > a,
    header nav .dropdown-button {

        width: auto !important;

        min-height: 40px;

        padding: 9px 12px;

        white-space: nowrap;

        font-size: 13px;

        justify-content: center;
    }


    /* DROPDOWN */

    header nav .dropdown {

        position: relative !important;

        z-index: 100002 !important;
    }


    /* Сам список */

    header nav .dropdown-menu {

        position: absolute !important;

        top: calc(100% + 6px) !important;

        left: 0 !important;

        width: 190px !important;

        min-width: 190px !important;

        margin: 0 !important;

        padding: 7px !important;

        background: #062611 !important;

        border: 1px solid rgba(255,255,255,.18) !important;

        border-radius: 12px !important;

        box-shadow:
            0 18px 45px rgba(0,0,0,.45) !important;

        display: block !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform: translateY(-5px) !important;

        z-index: 999999 !important;

        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease;
    }


    /* ВІДКРИТЕ МЕНЮ */

    header nav .dropdown-menu.show {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: translateY(0) !important;

        z-index: 999999 !important;
    }


    /* Пункти dropdown */

    header nav .dropdown-menu a {

        display: flex !important;

        width: 100% !important;

        min-height: 40px;

        align-items: center;

        justify-content: flex-start;

        padding: 10px 13px !important;

        color: #fff !important;

        background: transparent !important;

        text-decoration: none !important;

        white-space: nowrap;

        border-radius: 8px;
    }


    header nav .dropdown-menu a:active,
    header nav .dropdown-menu a:hover {

        background: rgba(255,255,255,.10) !important;

        color: #fff !important;
    }


    /* HERO НИЖЧЕ МЕНЮ */

    .hero {

        position: relative !important;

        z-index: 1 !important;
    }

}

/* =====================================================
   📱 МОБІЛЬНА ПРОКРУТКА МЕНЮ
   ===================================================== */

@media (max-width: 700px) {

    /* Горизонтальна прокрутка меню */

    header nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        position: relative;
        z-index: 10000;
    }

    header nav::-webkit-scrollbar {
        display: none;
    }


    /* Пункти меню не стискаються */

    header nav > a,
    header nav .dropdown {
        flex: 0 0 auto !important;
    }


    /* Коли відкрито випадаюче меню —
       дозволяємо йому виходити за межі nav */

    header nav.dropdown-open {
        overflow: visible !important;
    }


    /* Dropdown поверх Hero */

    header nav .dropdown {
        position: relative !important;
        z-index: 10001 !important;
    }

    header nav .dropdown-menu {
        z-index: 99999 !important;
    }

}