/* =========================================
   0. ШРИФТОВЕ — НА САЙТА, НЕ ОТ GOOGLE
   =========================================

   🔑 ЕДИН БЛОК НА НАБОР, А НЕ ПО ЕДИН НА ТЕГЛО.
   Google връща за `wght@400;700;900` ТРИЙСЕТ И ЧЕТИРИ блока @font-face,
   но зад тях стоят само петнайсет файла: един и същ ПРОМЕНЛИВ файл се
   обявява отново за всяко тегло. Свалени наивно, файловете стават
   дубликати, които браузърът тегли като различни ресурси.

   Тук е обратното: по един блок на набор, с ДИАПАЗОН от тегла. Един файл
   покрива 400, 700 и 900.

   ⚠️ Диапазоните не са преписани наизуст — поискани са от самия Google и
   са потвърдени: Montserrat приема 100..900, Open Sans приема 300..800, а
   200..800 го ОТХВЪРЛЯ. Обещано тегло извън диапазона браузърът прави
   синтетично и буквите надебеляват грозно.

   ⚠️ Държат се само КИРИЛИЦА и ЛАТИНИЦА. Google предлага още гръцки,
   иврит, виетнамски, математически знаци и символи — за сайт на
   български те са мъртъв товар. (Браузърът и без това тегли само
   наборите, чиито знаци среща, но така и файловете на сървъра са 4, а не 15.)

   ⚠️ `unicode-range` е ПРЕПИСАН ДОСЛОВНО от отговора на Google. Той е
   това, което казва на браузъра кой файл за коя буква да вземе; сгрешен,
   или тегли излишно, или оставя букви на резервен шрифт.

   ⚠️ Адресите тук трябва да съвпадат БУКВА ПО БУКВА с `<link rel="preload">`
   в header.php — затова са без „?v=…“. */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/opensans-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/opensans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================
   1. ОСНОВНИ НАСТРОЙКИ (RESET & VARIABLES)
   ========================================= */
:root {
    --primary-color: #00d4ff; /* Електриково синьо */
    --secondary-color: #0056b3;
    --danger-color: #ff4444;  /* Червено за пожароизвестяване */
    --dark-bg: #121212;       /* Основен тъмен фон */
    --card-bg: #1e1e1e;       /* Фон на картите */
    --text-color: #e0e0e0;    /* Цвят на текста */
    --heading-color: #ffffff; /* Цвят на заглавията */
    --accent-gray: #2c2c2c;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ⚠️ Анимациите при скрол (`.hidden-el.from-right`) изнасят елементи
   НАДЯСНО, преди да се появят. До скролването страницата може да се
   дръпне настрани: при 390px екран областта за скролване беше 470px.
   Проверено — това е отпреди преработката, не е ново.
   Тук се отрязва. ⚠️ Слага се на html И body: само на едното от двете
   част от браузърите го пренебрегват. */
html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--heading-color);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* --- скип-линкът ---

   🔑 Скрит, но ДОСТИЖИМ. Това е цялата тънкост: `display:none` и
   `visibility:hidden` го махат и от обхождането с Tab, тоест го правят
   безполезен. Тук се изнася извън екрана и се връща при фокус.

   ⚠️ БЕЗ `transition`. Преход върху позицията значи, че връзката пътува,
   докато човекът вече натиска Enter — а преход върху „видимост“ би я
   направил недостижима за `focus()` до средата на прехода.

   ⚠️ `z-index` над лентата (1000), инак се появява ЗАД нея.

   ⚠️ `fixed`, НЕ `absolute`. С `absolute` елементът се разполага спрямо
   ДОКУМЕНТА: `top: 0` значи началото на страницата, не горния ръб на
   екрана. Стигне ли човек до скип-линка с Tab, след като е превъртял
   надолу, връзката се появява някъде горе извън погледа. Хванато при
   проверката — на превъртяна страница излизаше на -15px, тоест над
   видимото. */
.skip-link {
    position: fixed;
    left: 8px;
    top: -60px;
    z-index: 1100;
    padding: 10px 18px;
    background: var(--primary-color);
    color: #000;
    font-weight: 700;
    border-radius: 0 0 6px 6px;

    /* ⚠️ `transition: none` НЕ е излишен ред.
       По-горе стои `a { transition: var(--transition) }`, тоест
       `all 0.3s ease` — и то важи и за тази връзка. Без изричното
       изключване скип-линкът се ПЛЪЗГА три десети от секундата, докато
       човекът вече натиска Enter.
       Хванато при проверката: при зададено `top: 0` пресметнатата стойност
       излизаше −25px, после −47px — различна при всяко мерене, защото
       преходът още течеше. Ето защо `transition: all` е капан: слага
       преход там, където никой не го е искал. */
    transition: none;
}

.skip-link:focus {
    top: 0;
}

/* --- иконките (SVG спрайт вместо Font Awesome) ---

   ⚠️ `fill: currentColor` е цялата работа: така иконката приема цвета на
   текста около себе си и всички досегашни правила (`.icon-box` в синьо,
   `.highlight-red .icon-box` в червено, промяната при посочване) действат
   върху нея без нито един нов ред.

   ⚠️ `vertical-align: -0.125em` възпроизвежда как седеше глифът на
   шрифта: без него иконката ляга върху основната линия и изглежда
   повдигната спрямо текста до нея.

   ⚠️ `flex-shrink: 0` — в `.stats li` и `.info-item` иконката е елемент
   на flex ред. Без това дълъг текст до нея я смачква. */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   2. БУТОНИ (BUTTONS)
   ========================================= */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 0.9rem;

    /* ⚠️ `<button>` НЕ наследява шрифта на страницата — браузърът му слага
       свой системен. Затова бутонът „Изпрати запитване“ под формата и двата
       бутона в прозореца за бисквитките се рисуваха с друг шрифт от целия
       останал сайт, докато `<a class="btn">` в хероя беше с Open Sans.
       Хванато при работата по прозореца; поправката важи и за формата. */
    font-family: inherit;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #000;
}

.btn-primary:hover {
    background-color: #fff;
    box-shadow: 0 0 15px var(--primary-color);
}

.btn-outline {
    border-color: #fff;
    color: #fff;

    /* 🐞 БЯЛ ТЕКСТ ВЪРХУ СВЕТЛОСИВО — бутонът „Само необходимите“ в прозореца
       за бисквитките беше НЕЧЕТИМ.
       Правилото задаваше само рамка и цвят на текста, без фон. Върху `<a>`
       това работи: връзката няма свой фон и се вижда тъмното зад нея. Но
       `<button>` има фон по подразбиране от браузъра (`ButtonFace`, около
       `#efefef`) — и щом CSS-ът не го пренаписва, той остава. Бял текст
       върху него дава контраст **1,1:1**.
       ⚠️ Дотук никой не го забеляза, защото всички `.btn-outline` на сайта
       бяха `<a>`. Първият `<button>` с този клас го извади наяве — същият
       корен като липсващия `font-family` отгоре: `<button>` НЕ наследява и
       НЕ е прозрачен по подразбиране. */
    background-color: transparent;
}

.btn-outline:hover {
    background-color: #fff;
    color: #000;
}

.full-width {
    width: 100%;
}

/* =========================================
   3. НАВИГАЦИЯ (NAVBAR)
   ========================================= */
.navbar {
    background: rgba(18, 18, 18, 0.95);
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--accent-gray);
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* ⚠️ Дотук тук стоеше `max-height: 300px; margin-top: 5px` — и двете бяха
   компенсация за файл, който беше 500×500 с 82 % прозрачно поле. При
   `max-height: 300px` елементът излизаше 300×300 в лента, висока 80 px:
   стърчеше по 110 px нагоре и надолу и се виждаше само средната ивица.

   Файлът вече е изрязан до 420×105, затова тук стои истинската височина, а
   flex-ът в `.nav-container` центрира сам.

   ⚠️ `width: auto` е ЗАДЪЛЖИТЕЛЕН до `height`. Само с височина браузърът
   ползва атрибута `width="420"` за широчина и логото се разпъва. */
.nav-logo {
    height: 63px;
    width: auto;
    display: block;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.nav-link:hover {
    color: var(--primary-color);
}

.btn-contact {
    border: 1px solid var(--primary-color);
    padding: 8px 20px;
    border-radius: 4px;
    color: var(--primary-color);
}

.btn-contact:hover {
    background: var(--primary-color);
    color: #000;
}

.menu-toggle {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: var(--transition);
    background-color: #fff;
}

/* =========================================
   4. HERO СЕКЦИЯ
   ========================================= */
/* 🔑 ФОНЪТ ВЕЧЕ Е НА САЙТА.
   Дотук тук стоеше адрес към `images.unsplash.com` — последният чужд
   сървър, който сайтът тежеше. Струваше:
     · заявка към чужд домейн при всяко отваряне (DNS + TLS + чакане)
     · IP адресът на всеки посетител отиваше при Unsplash
     · ~470 KB JPEG, теглен и на телефон

   Сега са два файла, в WebP:
     img/hero-960.webp    65 KB  — по подразбиране (телефон и таблет)
     img/hero-1600.webp  122 KB  — от 961 px нагоре

   ⚠️ Редът е mobile-first НАРОЧНО. Обърнат (голямата по подразбиране,
   малката в media query), телефоните без поддръжка на заявката щяха да
   теглят голямата — а те са мнозинството посетители.

   ⚠️ Качеството е 50, не 82. Фонът стои под
   `linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.8))`, тоест през него минава
   20–30 % от светлината. Мерено на същия кадър: q80 дава 272 KB, q50 —
   122 KB, а разлика не се вижда през черното.

   ⚠️ Снимката е стокова и ЧАКА ДА СЕ ЗАМЕНИ със своя. Клиентът качва два
   файла със същите имена и нищо друго не се пипа. */
.hero {
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('img/hero-960.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
}

@media (min-width: 961px) {
    .hero {
        background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('img/hero-1600.webp');
    }
}

.hero-content {
    text-align: left;
    max-width: 800px;
    z-index: 2;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Дейността и градът — първият ред на h1, по-дребно от слогана.
   Част от h1 е нарочно: иначе заглавието на началната е само слоган. */
.hero-kicker {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #ddd;
    max-width: 600px;
}

.btn-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================================
   5. ОБЩИ СЕКЦИИ
   ========================================= */
.section {
    padding: 80px 0;
}

.bg-darker {
    background-color: #0a0a0a;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

/* ⚠️ И `h1`, и `h2`. Почти всички секции носят `h2` — те са части от
   страница, чийто `h1` е в хероя. Но `404.php` е цяла страница с едно
   единствено заглавие и там то трябва да е `h1`, инак страницата остава
   без заглавие за екранния четец. Видът е един и същ. */
.section-header h1,
.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-header p {
    color: #888;
    margin-top: 10px;
}

.line {
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 0 auto;
}

/* =========================================
   6. ЗА НАС (ABOUT)
   ========================================= */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.stats li {
    margin: 15px 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

/* ⚠️ Беше `.stats i`. Разстоянието до текста НЕ идва от интервала в
   разметката, а от този `margin-right` — затова се пренася дословно,
   заедно с font-size-а, който определя големината на иконката. */
.stats .icon {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 1.2rem;
}

/* ⚠️ Тук стояха `.placeholder-img` и `.placeholder-img i` — сивото квадратче
   с иконка, което се показваше в „За нас“, преди там да има снимка. Нито
   един PHP или JS файл вече не изписва този клас (проверено срещу
   РИСУВАНИТЕ страници, не срещу кода — клас, идващ от `objects-lib.php`,
   иначе изглежда неизползван). Второто правило сочеше и `<i>`, какъвто в
   сайта вече няма изобщо. */

/* =========================================
   7. УСЛУГИ / ДЕЙНОСТИ (SERVICES)
   ========================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 10px;
    transition: var(--transition);
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: #252525;
}

.icon-box {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.service-card p {
    color: #aaa;
    font-size: 0.95rem;
}

.highlight {
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.02);
}

.highlight-red {
    border: 1px solid rgba(255, 68, 68, 0.3);
    background: rgba(255, 68, 68, 0.02);
}

.highlight-red .icon-box {
    color: var(--danger-color);
}

.highlight-red:hover {
    border-bottom-color: var(--danger-color);
    box-shadow: 0 10px 30px rgba(255, 68, 68, 0.1);
}

/* =========================================
   8. ГАЛЕРИЯ / ОБЕКТИ (PORTFOLIO)
   ========================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    height: 200px;
    border: 1px solid #333;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    align-items: flex-end;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h3 {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 2px black;
}

/* =========================================
   9. LIGHTBOX (МОДАЛЕН ПРОЗОРЕЦ)
   ========================================= */
/* ⚠️ Отварянето минава през класа `.open`, а не през inline
   `style.display = "flex"` от скрипта. Inline стилът печели над всичко в
   CSS-а и прави лупата неуправляема оттук. */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.95);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.lightbox.open { display: flex; }

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    animation: zoomIn 0.3s;
}

#caption {
    margin: 15px auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
}

/* Затварянето е <button>, а не <span>: клавиатурата и екранните четци
   стигат до бутон сами, до span — не. Стилът му се сваля до вида на
   предишния span. */
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
    transition: 0.3s;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0 8px;
}
.close-lightbox:hover,
.close-lightbox:focus-visible { color: var(--primary-color); }
.close-lightbox:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }

/* Снимката в решетката се отваря с клик и с Enter — фокусът трябва да личи. */
.gallery-item img:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: -3px;
}

/* --- стрелките за разглеждане на обектите --- */
.lb-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    /* ⚠️ Над снимката: при широк кадър тя стига до ръба и иначе поглъща
       клика върху стрелката. */
    z-index: 2;
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }

.lb-nav:hover,
.lb-nav:focus-visible {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
}
.lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lb-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: #9a9a9a;
    font-size: .9rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

/* ⚠️ Скриването е с атрибута `hidden` от скрипта (при един-единствен
   обект). Без това правило `hidden` губи от `display: flex` по-горе и
   стрелките остават видими. */
.lb-nav[hidden],
.lb-counter[hidden] { display: none !important; }

/* --- катинарът за вход в панела --- */
.nav-admin {
    color: #6a6a6a;
    font-size: .95rem;
    padding: 6px 4px;
}
.nav-admin:hover,
.nav-admin:focus-visible { color: var(--primary-color); }

.close-lightbox:hover {
    color: var(--primary-color);
}

@keyframes zoomIn {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* =========================================
   10. КОНТАКТИ (CONTACT)
   ========================================= */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
}

/* ⚠️ Беше `.info-item i` — иконката се смени от `<i>` на `<svg>`.
   Правило, което сочи изчезнал таг, не гърми: кръгчето просто изчезва.

   ⚠️ Отстъпът е 18px, а не 15px. Дотук вътре в кръга стоеше ГЛИФ с
   font-size 1.5rem = 24px, центриран от flex в поле 30×30. Сега SVG-то
   ЗАПЪЛВА полето, каквото и да е то. При 15px полето става 30×30 и
   иконката пораства от 24 на 30 — забележимо по-едра. 60 − 2×18 = 24
   връща точно предишния размер.
   (`box-sizing: border-box` е глобален, затова кръгът остава 60×60.) */
.info-item .icon {
    color: var(--primary-color);
    margin-right: 20px;
    margin-top: 5px;
    background: rgba(0, 212, 255, 0.1);
    padding: 18px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

/* ⚠️ Беше `.info-item h4`. „Адрес“, „Телефони“ и „Email“ бяха `<h4>` под
   `<h2>Контакти</h2>` — тоест през едно ниво. Екранният четец чете
   заглавията като съдържание на страницата; прескочено ниво му звучи като
   липсваща глава. Сега са `<h3>`, а видът им се пази тук.

   ⚠️ Правило, което сочи изчезнал таг, не гърми: ако тук беше останало
   `h4`, надписите просто щяха да станат по-едри и различни от съседните,
   без никаква грешка. */
.info-item h3 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.contact-form {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid var(--accent-gray);
}

.contact-form h3 {
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

/* Трите въпроса за обекта (06.11.2026). ⚠️ `[hidden]` изрично: някое
   по-късно правило за `display` иначе би го надвило. */
.form-extra[hidden] { display: none; }
.form-extra-note {
    font-size: .88rem;
    color: #9a9a9a;
    margin: -6px 0 10px;
}

input, select, textarea {
    width: 100%;
    padding: 15px;
    background: #2c2c2c;
    border: 1px solid #444;
    color: #fff;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #333;
}

/* =========================================
   11. FOOTER & TERMS
   ========================================= */
footer {
    background: #000;
    padding: 40px 0;
    border-top: 1px solid #222;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ⚠️ Цветът беше `#666` върху черен футър — контраст **3,66:1** при
   изисквани 4,5:1 по WCAG за текст под 24px. Сметнато, не прецено на око:
   `#8a8a8a` дава 6,08:1.
   Това е редът с авторското право — дребен, но не и незначим: в него стои
   името на фирмата. */
.footer-left p {
    color: #8a8a8a;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

/* ⚠️ Тук стоеше второ правило `.terms-link a { color: #888 }`. То беше
   МЪРТВО — по-надолу във файла същият селектор го пренаписва на `#9a9a9a`
   и печели, защото е последен при еднаква тежест. Две места, които казват
   едно и също с различна стойност, са само начин някой да поправи грешното.
   Останалото правило е при „връзките във футъра“ най-долу. */

.terms-link a {
    text-decoration: underline;
    transition: var(--transition);
}

.social-links a {
    color: #fff;
    background: #333;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-left: 10px;
    transition: var(--transition);
}

.social-links a:hover {
    background: #1877f2;
    transform: translateY(-3px);
}

/* Специфични за terms.html */
.terms-section {
    padding: 120px 0 60px;
    min-height: 100vh;
}
.terms-content {
    background: var(--card-bg);
    padding: 50px;
    border-radius: 10px;
    border: 1px solid var(--accent-gray);
}
.terms-content h1 {
    font-size: 2rem;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
    color: var(--primary-color);
}
/* ⚠️ Беше `.terms-content h3`. Заглавията в текста на правните страници
   бяха `<h3>` веднага под `<h1>` — тоест през едно ниво. Сега са `<h2>`.
   Lighthouse не хвана това: той одитира само началната страница. */
.terms-content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #fff;

    /* ⚠️ Размерът се ЗАДАВА изрично. Дотук правилото нямаше `font-size` и
       заглавията ползваха стойността по подразбиране за `h3` — 1,17em.
       За `h2` подразбирането е 1,5em, тоест самата смяна на тага щеше да
       ги уголеми с една пета. Достъпността поправя ЙЕРАРХИЯТА, не вида. */
    font-size: 1.17rem;
}

/* ⚠️ ДОБАВЕНО 17.09.2026 — дотук `<h3>` в правен текст нямаше НИКАКЪВ стил.
   Глобалното `* { margin: 0 }` му отнема и разстоянията, тоест подзаглавието
   се залепва за абзаца отгоре и се чете като негово начало. Появи се при
   Политиката за бисквитките, където разделът за прозореца има три
   подраздела; важи за трите правни страници наведнъж. */
.terms-content h3 {
    margin-top: 24px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.02rem;
}

.terms-content p {
    margin-bottom: 15px;
    color: #ccc;
    text-align: justify;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    color: var(--primary-color);
}

/* =========================================
   12. ANIMATIONS (SCROLL OBSERVER)
   ========================================= */
/* ⚠️ Дотук беше `transition: all 1s ease-out`. „all“ кара браузъра да следи
   ВСЯКО анимируемо свойство на елемента — а тези елементи са около
   четирийсет и се задействат наведнъж при зареждане. Изброени поименно,
   следят се три.

   Освен разхода, „all“ е и капан: преход върху свойство, което не си имал
   предвид, се задейства мълчаливо и после се чудиш защо нещо мига или защо
   фокусът не иска да влезе. */
.hidden-el {
    opacity: 0;
    filter: blur(5px);
    transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
}

.from-left { transform: translateX(-100px); }
.from-right { transform: translateX(100px); }
.from-bottom { transform: translateY(50px); }
.pop-in { transform: scale(0.8); }

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) translateY(0) scale(1);
}

/* ЗАКЪСНЕНИЕ НА ПОЯВЯВАНЕТО — ИЗБРОИМО, ЗА ХЕРОЯ.
   🐞 Дотук двата елемента в хероя носеха `style="transition-delay: 200ms"`
   и `400ms` направо в разметката. Строгата Content-Security-Policy
   (`style-src 'self'`) не прилага вградени стилове — заглавието и бутоните
   щяха да се появяват едновременно с първия ред, тоест стъпалото просто
   изчезва. Освен това вграденият стил не се вижда оттук: който търси защо
   нещо мига, гледа този файл.
   ⚠️ Стойностите съвпадат с тези на картите по-долу — същото стъпало. */
.delay-200 { transition-delay: 200ms; }
.delay-400 { transition-delay: 400ms; }

/* Спрайтът с иконките — носач, който не се вижда.
   ⚠️ Не е `display:none`: скрит така, символите вътре не се рисуват и
   всяко `<use>` към тях остава празно. Затова се изнася от потока с нулев
   размер. Беше вграден стил в `icons.php` — виж горе защо мръдна оттам. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Stagger delay */
.service-card:nth-child(1) { transition-delay: 100ms; }
.service-card:nth-child(2) { transition-delay: 200ms; }
.service-card:nth-child(3) { transition-delay: 300ms; }
.service-card:nth-child(4) { transition-delay: 100ms; }
.service-card:nth-child(5) { transition-delay: 200ms; }
.service-card:nth-child(6) { transition-delay: 300ms; }
.service-card:nth-child(7) { transition-delay: 100ms; }
.service-card:nth-child(8) { transition-delay: 200ms; }

@media(prefers-reduced-motion) {
    .hidden-el {
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* =========================================
   13. RESPONSIVE (MOBILE)
   ========================================= */
@media (max-width: 992px) {
    .about-grid, .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .hero h1 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    /* ⚠️ `background-attachment: fixed` се изключва на телефон.
       На iOS Safari той е практически счупен — фонът се разполага спрямо
       целия документ, а не спрямо екрана, и снимката излиза увеличена и
       изрязана. На Android работи, но кара браузъра да преначертава фона
       при всяко превъртане.
       Видимо тук не се губи нищо: хероят е висок 100vh и снимката е
       `cover`, тоест и без това запълва екрана. */
    .hero { background-attachment: scroll; }

    .menu-toggle { display: block; z-index: 1001; }
    
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background-color: #000;
        width: 100%;
        height: 100vh;
        justify-content: center;
        transition: 0.3s;
        z-index: 999;
    }

    .nav-menu.active { left: 0; }
    .nav-menu li { margin: 20px 0; }
    .nav-link { font-size: 1.2rem; }

    .hero h1 { font-size: 2rem; }
    .btn-group { flex-direction: column; width: 100%; }
    .btn { width: 100%; text-align: center; }
    
    .footer-content { flex-direction: column; text-align: center; gap: 20px; }
    
    /* Gallery Mobile */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item { height: 150px; }
    .gallery-overlay { transform: translateY(0); background: rgba(0,0,0,0.6); padding: 5px; }
    .gallery-overlay h3 { font-size: 0.8rem; }
}
/* =========================================
   ДОБАВЕНО 16.09.2026 — новите елементи
   ========================================= */

/* Лентата при скрол. Дотук скриптът пишеше inline стилове при ВСЯКО
   събитие на скрол — стотици пъти в секунда. Сега само превключва клас. */
.navbar.scrolled {
    background: rgba(18, 18, 18, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Снимката в „За нас“. Дотук размерите ѝ стояха в inline `style` атрибут
   на самия <img> — място, където никой не ги търси, когато нещо се размести. */
.about-photo {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    border: 1px solid #333;
}

/* Описанието под заглавието на обект — панелът може да го попълни. */
.gallery-overlay p {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #cfcfcf;
    font-weight: 400;
}

.gallery-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: #999;
}

/* --- контактната форма --- */

/* ⚠️ Капанът за ботове. Скрива се, а НЕ с `display:none`: част от
   ботовете нарочно прескачат полетата с display:none, защото знаят, че са
   капан.
   ⚠️ И НЕ с `left: -9999px` — изнесен толкова далеч, елементът разширява
   областта за скролване на страницата. Тук се ползва изрязване на място:
   полето заема един пиксел, нищо не се вижда и нищо не се мести. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.form-consent {
    margin-bottom: 15px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #b8b8b8;
    /* ⚠️ Изрично отляво. Формата наследява центриране от секцията, а
       центриран текст с `padding-left` не се мести видимо — квадратчето
       остава на левия ръб на етикета, тоест ВЪРХУ текста в средата. */
    text-align: left;
}
/* ⚠️ ТУК НЯМА `display: flex`, И ТОВА Е НАРОЧНО.
   При flex всяко дете на етикета става отделен елемент в реда — включително
   самият текст. Дългото изречение тогава не се пренася, а се разтяга и
   изблъсква връзката „Поверителност“ ИЗВЪН екрана: страницата получава
   хоризонтален скрол, който се вижда чак когато някой дръпне настрани.
   Квадратчето се изнася с абсолютно позициониране, а текстът си тече
   нормално и се пренася както трябва. */
.form-consent label {
    display: block;
    position: relative;
    padding-left: 27px;
    cursor: pointer;
}
/* ⚠️ `width` и `padding` се връщат изрично. По-горе в този файл стои
   `input, select, textarea { width: 100%; padding: 15px; }` — правило за
   текстовите полета на формата, което удря и отметката: тя се разтягаше на
   цялата ширина на етикета (584 px) и лягаше върху текста като сива ивица.
   Селекторът `.form-consent input` е по-специфичен и го надделява. */
.form-consent input {
    position: absolute;
    left: 0;
    top: 3px;
    width: auto;
    padding: 0;
    accent-color: var(--primary-color);
}
.form-consent a { color: var(--primary-color); text-decoration: underline; }

.form-status {
    margin-bottom: 15px;
    font-weight: bold;
    min-height: 0;
}
.form-status.ok    { color: var(--primary-color); }
.form-status.error { color: var(--danger-color); }

/* --- връзките във футъра --- */
.terms-link a { color: #9a9a9a; }
.terms-link a:hover { color: var(--primary-color); }

/* ⚠️ Разделителната точка беше `#555` върху черно — контраст **2,82:1**.
   Lighthouse не я посочи, защото носи `aria-hidden="true"` и проверката я
   подминава като украса. Формално може и да минава за „чиста украса“, но
   тя се ВИЖДА, стои между две връзки и струва един знак да е четлива. */
.terms-link span { color: #8a8a8a; margin: 0 4px; }
/* --- лупата на телефон --- */
@media (max-width: 760px) {
    /* ⚠️ Стрелките слизат ДОЛУ, а не остават отстрани. При 390px екран
       кръгове от 56px в двата края изяждат почти третина от ширината и
       лягат върху самата снимка — точно върху това, което човек гледа. */
    .lb-nav {
        top: auto;
        bottom: 18px;
        transform: none;
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }
    .lb-prev { left: 22px; }
    .lb-next { right: 22px; }

    .lb-counter { bottom: 32px; font-size: .82rem; }
    .lb-figure { max-width: 94%; }
    .lightbox-content { max-height: 66vh; }
    #caption { font-size: 1rem; margin: 12px auto 70px; }

    .close-lightbox { top: 12px; right: 16px; font-size: 34px; }

    /* Катинарът в отвореното мобилно меню — на свой ред, като останалите. */
    .nav-admin { font-size: 1.1rem; }
}

/* =========================================
   ДОБАВЕНО 17.09.2026 — ГРАД И ДЕЙНОСТ НА ОБЕКТИТЕ (Ф6)
   ========================================= */

/* 🔑 НАДПИСЪТ ВЪРХУ СНИМКАТА ВЕЧЕ Е НА ДВА РЕДА.
   Дотук вътре стоеше само `<h3>`, а `.gallery-overlay` е `display: flex`
   БЕЗ посока — тоест ред. С един елемент това не личеше, но заглавието и
   описанието щяха да легнат ЕДНО ДО ДРУГО, а не едно под друго. (Не се
   виждаше, защото полето за описание беше празно за всичките 25 обекта.)

   ⚠️ `align-items: stretch`, а не `flex-start`. При посока „колона“
   `align-items` подрежда по ХОРИЗОНТАЛА: `flex-start` дава на текста
   широчина по съдържанието и дълго заглавие излиза ИЗВЪН плочката, вместо
   да се пренесе. `stretch` е и подразбирането — записано е изрично, защото
   правилото по-горе задава `flex-end` и то важи и тук. */
.gallery-overlay {
    flex-direction: column;
    align-items: stretch;
}

/* Градът и дейността под заглавието на обекта.
   🔑 Това е ЕДИНСТВЕНОТО място, където думи като „Козлодуй“, „Дулово“ и
   „Павликени“ се появяват като видим текст. Дотук сайтът твърдеше „в цялата
   страна“, без нито едно име на населено място в себе си. */
.obj-meta {
    margin-top: 3px;
    font-size: .8rem;
    font-weight: 500;
    color: #9fe8ff;
    text-shadow: 1px 1px 2px #000;
}

/* Скритата от филтъра плочка.
   ⚠️ `hidden` е атрибут и се бие с КОЙТО И ДА Е `display` в таблицата —
   днес `.gallery-item` не задава display и атрибутът работи сам, но добави
   ли се утре един ред, плочките ще спрат да се скриват БЕЗ никаква грешка.
   Правилото тук заковава поведението. */
.gallery-item[hidden] { display: none !important; }

/* --- лентата с филтрите --- */
.gallery-filters {
    margin-bottom: 22px;
    text-align: center;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* ⚠️ Бутоните са в `<form method="get">` и работят и без JavaScript —
   затова изглеждат като бутони, а не като връзки. */
.filter-btn {
    background: var(--card-bg);
    color: #cfcfcf;
    border: 1px solid var(--accent-gray);
    border-radius: 999px;
    padding: 7px 15px;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    /* ⚠️ Изброени поименно, а не `all`: `transition: all` слага преход и на
       свойства, които никой не анимира тук. */
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.filter-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.filter-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.filter-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
    font-weight: 600;
}

/* Броят в бутона. ⚠️ Не с `opacity`, а със свой цвят: прозрачност върху
   цветен фон дава различен контраст на всеки бутон и се мери трудно.
   #8a8a8a върху #1e1e1e = 5,0:1; #003a47 върху #00d4ff = 7,1:1. */
.filter-btn .n { color: #8a8a8a; font-size: .8em; margin-left: 2px; }
.filter-btn.is-active .n { color: #003a47; }

/* „Показани 4 от 25 обекта“. Празен, редът не заема място — затова
   `min-height`, за да не подскача решетката при първото филтриране. */
.filter-count {
    min-height: 1.4em;
    margin-top: 10px;
    font-size: .85rem;
    color: #9a9a9a;
}

/* --- изречението за покритието --- */
.gallery-coverage {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--accent-gray);
    text-align: center;
    font-size: .95rem;
    line-height: 1.7;
    color: #c9c9c9;
}
.gallery-coverage strong { color: var(--heading-color); }

@media (max-width: 768px) {
    /* ⚠️ На телефон надписът НЕ се показва при посочване, а стои постоянно
       върху снимка, висока 150 px. Затова остава само градът: „Капитан
       Андреево · Видеонаблюдение“ се пренася на два реда и заедно със
       заглавието закрива половината плочка.
       Дейността не изчезва от страницата — тя е заглавие на карта в
       „Дейности“ и надпис на бутоните за филтриране. */
    .obj-meta { font-size: .7rem; margin-top: 1px; }
    .obj-meta .s, .obj-meta .y { display: none; }

    /* ⚠️ Обект с дейност, но БЕЗ град: на телефон и двете части отвътре са
       скрити и остава празен абзац, който пак заема 3,2 px. Мерено — не
       предположено. (Днес такъв е един: МБАЛ Св. Ана, чийто град се чака от
       клиента.) */
    .obj-meta:not(:has(.c)) { display: none; }

    /* ⚠️ И КРАТКИЯТ ТЕКСТ СЕ СКРИВА ТУК — по същата причина.
       Той е до 200 знака; върху плочка, висока 150 px, при постоянно видим
       надпис това са три-четири реда и от снимката не остава нищо. На
       десктоп надписът излиза при посочване и мястото е негово — там текстът
       се вижда.
       🔑 Не се губи за търсачките: същият текст влиза в структурираните
       данни (`Place.description`) и в `/llms.txt`, тоест Google и ИИ
       обхождачите го четат независимо от това какво показва телефонът. */
    .gallery-overlay p:not(.obj-meta) { display: none; }

    /* Десет бутона при 335 px полезна ширина се подреждаха на ЧЕТИРИ реда и
       лентата ставаше 191 px — колкото цяла плочка и половина, преди да се
       види първата снимка. */
    .filter-group { gap: 6px; }
    .filter-btn { font-size: .78rem; padding: 5px 11px; }
    .filter-count { font-size: .8rem; margin-top: 8px; }

    .gallery-coverage { font-size: .9rem; text-align: left; }
}

/* =========================================
   ДОБАВЕНО 17.09.2026 — ВЪПРОСИ И ОТГОВОРИ (Ф13)
   ========================================= */

/* 🔑 ПОЛЗВА СЕ `<details>`/`<summary>`, А НЕ СВОЙ РАЗГЪВАЩ СЕ БЛОК.
   Браузърът се грижи за клавиатурата, за екранния четец и — най-важното —
   за търсенето в страницата: Ctrl+F отваря затворения раздел сам. Свой
   вариант с JavaScript иска `aria-expanded`, управление на фокуса и пада,
   когато скриптът не се зареди. А тук съдържанието трябва да е налично
   ВИНАГИ, включително за търсачката и за ИИ обхождача. */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
}

.faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--heading-color);
    /* ⚠️ Триъгълникът по подразбиране се маха на ТРИ места: `list-style` за
       Firefox, `::-webkit-details-marker` за Safari, а `display: flex` сам
       го изключва в Chrome. Пропуснато което и да е от трите, до въпроса
       стоят две стрелки. */
    list-style: none;
    transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary-color); }
.faq-item summary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Стрелката. ⚠️ Собствен знак, а не иконка от спрайта: `<summary>` се
   рисува от браузъра и вмъкването на SVG вътре усложнява подравняването
   без полза. */
.faq-item summary::after {
    content: '⌄';
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--primary-color);
    transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }

.faq-item p {
    padding: 0 20px 18px;
    color: #c9c9c9;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .faq-item summary { padding: 14px 16px; font-size: .95rem; gap: 10px; }
    .faq-item p { padding: 0 16px 15px; font-size: .92rem; }
}

/* 🔑 ВРЪЗКИТЕ В ПРАВНИТЕ СТРАНИЦИ СЕ ВИЖДАХА ЕДВА.
   `a { color: inherit }` значи, че имейлът в Политиката излизаше в цвета на
   текста около него — тоест не се различаваше от обикновена дума. В „Общи
   условия“ същата връзка имаше цвят само защото носеше `style` атрибут на
   място, където никой не го търси.
   ⚠️ И подчертаване, не само цвят: връзка, разпозната единствено по цвят, е
   невидима за човек, който не различава този цвят. */
.terms-content a {
    color: var(--primary-color);
    text-decoration: underline;
}
.terms-content a:hover { color: #fff; }

/* 🐞 СПИСЪЦИТЕ В ПРАВНИТЕ СТРАНИЦИ БЯХА БЕЗ ТОЧКИ.
   Горе стои `ul { list-style: none }` — вярно за менюто и за картите, където
   списъкът е конструкция, а не изброяване. Но в правен текст `<ul>` е точно
   изброяване: без точки и без отстъп то се слива с абзаца отгоре и се чете
   като един дълъг текст. Виждаше се в Политиката за поверителност (правата
   по Регламента) и сега в Политиката за бисквитките. */
.terms-content ul {
    list-style: disc;
    padding-left: 22px;
    margin: 12px 0 16px;
}
.terms-content li {
    margin-bottom: 8px;
    color: #ccc;
}
.terms-content li::marker { color: var(--primary-color); }

/* 🐞 ДВУСТРАННОТО ПОДРАВНЯВАНЕ Е НЕЧЕТИМО НА ТЕЛЕФОН.
   `.terms-content p` е с `text-align: justify`. На 1280 px това изглежда
   спретнато, но на 390 px в реда се събират четири-пет думи и разстоянията
   между тях стават като улици — „Настоящата     политика     обяснява“.
   Мерено на самата страница. Под 768 px текстът се подравнява вляво. */
@media (max-width: 768px) {
    .terms-content p,
    .terms-content li { text-align: left; }
    .terms-content { padding: 26px 20px; }
}

/* --- таблицата в Политиката за бисквитките --- */

/* ⚠️ Обвивката носи превъртането, а не самата таблица: четири колони при
   375 px не се събират и на най-дребния шрифт. Изнесено на таблицата,
   `overflow` не върши работа — тя не е блок, който да се свива
   ([[css-overflow-hidden-kills-scrollbox]]). */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 22px;
    font-size: .92rem;
    display: block;
    overflow-x: auto;
}

/* 🔑 `<caption>` — не е украса. За екранния четец това е името на
   таблицата; без него тя се обявява просто като „таблица“ и човек влиза в
   нея, без да знае какво съдържа. */
.legal-table caption {
    caption-side: top;
    text-align: left;
    color: #9a9a9a;
    font-size: .85rem;
    padding-bottom: 8px;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--accent-gray);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}
.legal-table th {
    background: #1a1a1a;
    color: var(--heading-color);
    font-weight: 600;
    white-space: nowrap;
}
.legal-table td { color: #c9c9c9; }

/* Имена на бисквитки и клавиши. */
.terms-content code,
.terms-content kbd {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9em;
    background: #1a1a1a;
    border: 1px solid var(--accent-gray);
    border-radius: 4px;
    padding: 1px 6px;
    color: #9fe8ff;
    white-space: nowrap;
}

/* Страницата за грешка. ⚠️ Дотук тези два отстъпа стояха във `style`
   атрибути в `404.php` — място, където никой не ги търси, когато нещо се
   размести. */
.error-section { padding-top: 160px; min-height: 60vh; }
.error-actions { justify-content: center; }

/* =========================================
   ДОБАВЕНО 17.09.2026 — СТРАНИЦИТЕ НА ДЕЙНОСТИТЕ (Ф7)
   ========================================= */

/* --- картата на началната вече е връзка --- */

/* 🔑 „РАЗПЪНАТА ВРЪЗКА“.
   Връзката стои в `<h3>`, тоест името на дейността е текстът ѝ — това чете
   търсачката и това изрежда екранният четец в списъка с връзки. А `::after`
   я разпъва върху цялата карта, за да остане кликаема навсякъде.
   ⚠️ Иска `position: relative` на картата — без него покритието се закача за
   най-близкия позициониран предшественик и покрива половин страница. */
.service-card { position: relative; }

.card-link {
    color: inherit;
    text-decoration: none;
    /* ⚠️ Поименно, не `all`: по-горе `a { transition: var(--transition) }`
       слага преход на ВСЯКО анимируемо свойство. */
    transition: color .25s ease;
}
.card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.service-card:hover .card-link { color: var(--primary-color); }

/* Фокусът трябва да личи върху ЦЯЛАТА карта, а не като рамка около
   няколко думи в средата ѝ. */
.card-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.service-card:has(.card-link:focus-visible) {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}
.service-card:has(.card-link:focus-visible) .card-link { outline: none; }

/* --- главата на страницата --- */

/* ⚠️ НЕ е `height: 100vh` като хероя на началната. Тук целта е човекът да
   стигне до текста, а не да види снимка на цял екран: подстраница, която
   иска превъртане, преди да каже за какво е, губи точно посетителя, дошъл
   от търсачката. `padding-top` разчиства фиксираната лента от 80 px. */
.service-head {
    padding: 130px 0 50px;
    background: linear-gradient(180deg, #171717 0%, var(--dark-bg) 100%);
    border-bottom: 1px solid var(--accent-gray);
}

.crumbs {
    font-size: .85rem;
    color: #9a9a9a;
    margin-bottom: 26px;
}
.crumbs a { color: #9a9a9a; text-decoration: none; }
.crumbs a:hover { color: var(--primary-color); }
.crumbs span { margin: 0 7px; }
.crumbs .here { color: var(--text-color); margin: 0; }

.service-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}
/* ⚠️ `.icon-box` носи `margin-bottom: 25px` от картите — тук иконката стои
   ДО заглавието и отстъпът я изкарва от реда. */
.service-title .icon-box { margin-bottom: 0; flex-shrink: 0; }

.service-title h1 {
    font-size: 2.4rem;
    line-height: 1.2;
}

.service-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #ccc;
    max-width: 820px;
}

/* --- блокът „Накратко“ --- */

/* 🔑 ЗАЩО Е ОТДЕЛЕН И ЗАЩО Е ГОРЕ.
   Пет-шест изречения, които могат да се цитират дословно. ИИ търсачките
   вадят точно такива блокове; сложен най-долу, той се чете последен и от
   човека, и от машината. */
.short-section { padding: 55px 0 0; }

.short-block {
    max-width: 820px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 26px 30px;
}

/* ⚠️ И `h2`, и `h3`. На страниците за дейности блокът стои в собствена
   секция и носи `h2`; на началната е ВЪТРЕ в „За нас“, чието заглавие вече е
   `h2` — там трябва `h3`, инак редът на заглавията прескача назад. Видът е
   един и същ, затова правилото важи и за двете. */
.short-block h2,
.short-block h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    margin-bottom: 16px;
}

/* Блокът вътре в „За нас“ — между заглавието на секцията и двете колони. */
.about-short { margin-bottom: 45px; }

.short-block ul { list-style: none; }
.short-block li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    color: #d0d0d0;
    line-height: 1.7;
}
.short-block li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}
.short-block li:last-child { margin-bottom: 0; }

/* --- същинският текст --- */

/* ⚠️ Ширината е закована на 820 px, а не на цялата решетка. Ред от 1200 px
   се чете трудно: окото губи началото на следващия ред. */
.service-body { padding-top: 45px; }
.service-section {
    max-width: 820px;
    margin: 0 auto 42px;
}
.service-section:last-child { margin-bottom: 0; }

.service-section h2 {
    font-size: 1.55rem;
    margin-bottom: 16px;
    color: var(--heading-color);
}

.service-section p {
    color: #c9c9c9;
    line-height: 1.85;
    margin-bottom: 16px;
}
.service-section p:last-child { margin-bottom: 0; }

.service-list {
    list-style: none;
    margin-top: 20px;
    display: grid;
    gap: 11px;
}
.service-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #c9c9c9;
    line-height: 1.6;
}
/* ⚠️ Иконката не бива да се свива, когато текстът се пренася на два реда. */
.service-list li svg {
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: .25em;
}

/* --- сравнителната таблица (06.11.2026) --- */
.compare-wrap { margin-top: 24px; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    overflow: hidden;
    font-size: .95rem;
}
.compare-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: var(--heading-color);
    padding-bottom: 12px;
}
.compare-table th,
.compare-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
    border-bottom: 1px solid var(--accent-gray);
}
.compare-table thead th {
    background: #252525;
    color: var(--primary-color);
    font-weight: 600;
}
.compare-table tbody th { color: var(--heading-color); font-weight: 600; width: 26%; }
.compare-table td { color: #c9c9c9; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* ⚠️ На телефон три-четири колони текст не се събират без хоризонтален
   плъзгач. Затова всеки ред става карта: заглавието на реда отгоре, а пред
   всяка клетка — името на колоната от `data-label`. */
@media (max-width: 640px) {
    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table th,
    .compare-table td { display: block; width: 100%; }
    .compare-table { border: 0; background: none; }
    .compare-table thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .compare-table caption { display: block; }
    .compare-table tbody tr {
        background: var(--card-bg);
        border: 1px solid var(--accent-gray);
        border-radius: 8px;
        margin-bottom: 12px;
        overflow: hidden;
    }
    .compare-table tbody th { width: 100%; background: #252525; }
    .compare-table td { padding: 10px 14px; }
    .compare-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--primary-color);
        font-size: .82rem;
        font-weight: 600;
        margin-bottom: 2px;
    }
    .compare-table tbody tr:last-child th { border-bottom: 1px solid var(--accent-gray); }
}

/* --- обектите и връзката към галерията --- */
.to-gallery { text-align: center; margin-top: 34px; }

/* --- другите дейности --- */
.other-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.other-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--card-bg);
    border: 1px solid var(--accent-gray);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color);
    /* ⚠️ Поименно: `all` тук би анимирал и рамката при всяко пипване. */
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.other-card:hover {
    border-color: var(--primary-color);
    background: #252525;
    transform: translateY(-3px);
}
.other-card:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

.other-card .icon-box {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.other-name { font-weight: 600; font-size: .98rem; line-height: 1.35; }

/* --- призивът накрая --- */
.service-cta { text-align: center; }
.service-cta h2 { font-size: 2rem; margin-bottom: 14px; }
.service-cta p {
    color: #c9c9c9;
    max-width: 620px;
    margin: 0 auto 28px;
    line-height: 1.7;
}
.service-cta .btn-group { justify-content: center; }

@media (max-width: 768px) {
    .service-head { padding: 110px 0 40px; }
    .service-title { gap: 14px; }
    .service-title h1 { font-size: 1.7rem; }
    .service-lead { font-size: 1.02rem; }

    .short-section { padding-top: 40px; }
    .short-block { padding: 20px 22px; border-left-width: 3px; }
    .short-block h2,
    .short-block h3 { font-size: 1rem; }
    .about-short { margin-bottom: 32px; }

    /* ⚠️ Мерено: на 390 px блокът на началната излиза 1003 px — повече от
       цял екран. Изреченията НЕ се режат: те са това, което ИИ търсачката
       ще цитира, и всяко е цяло само по себе си. Свива се само разредката. */
    .short-block li { font-size: .92rem; line-height: 1.62; margin-bottom: 8px; }

    .service-body { padding-top: 35px; }
    .service-section { margin-bottom: 34px; }
    .service-section h2 { font-size: 1.3rem; }

    .service-cta h2 { font-size: 1.5rem; }

    /* ⚠️ Двете колони при 190 px минимум се събират в една под ~420 px и
       осемте плочки стават осем реда. Тук се закова на две. */
    .other-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .other-card { flex-direction: column; text-align: center; gap: 8px; padding: 16px 12px; }
    .other-name { font-size: .85rem; }
}

/* =========================================
   ДОБАВЕНО 17.09.2026 — ПРОЗОРЕЦЪТ ЗА СЪГЛАСИЕ ЗА БИСКВИТКИ
   =========================================

   🔑 ТУК НЯМА КЛАС `.show` И НЯМА НАЧАЛНО `display: none` — И ТОВА Е ЦЯЛАТА
   РАЗЛИКА. Прозорецът се рисува от PHP (`consent.php`) само на човек, който
   още не е избирал; изборел ли е, елементът просто не идва в HTML-а.

   ⚠️ Лента, скрита с `display:none` и показана след това от JavaScript,
   изскача върху вече прочетена страница и я избутва — точно скокът на
   съдържанието, който на този сайт се мери на нула. Тук лентата е там от
   първия кадър.

   ⚠️ И понеже я няма в разметката след избора, няма и правило, което да я
   крие. Един източник на истината: PHP. */

.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* ⚠️ Три височини се подреждат нарочно:
         лупата      2000  — на цял екран, нищо не бива да стърчи върху нея
         скип-линкът 1100  — трябва да се вижда винаги
         ТУК         1050
         лентата     1000  — прозорецът минава НАД нея
       Мобилното меню е на 999, тоест отворено, то остава под прозореца —
       вярно е, защото и в менюто изборът трябва да е достижим. */
    z-index: 1050;

    background: var(--card-bg);
    border-top: 3px solid var(--primary-color);

    /* Сянката нагоре отделя лентата от съдържанието под нея — иначе на тъмен
       фон тя изглежда като част от страницата. */
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);

    /* ⚠️ Анимира се `transform`, а НЕ `bottom`. Преход по позиция кара
       браузъра да пресмята оформлението на всеки кадър; `transform` се
       обработва от видеокартата и не пипа оформлението изобщо. */
    animation: consent-up 0.35s ease-out both;
}

@keyframes consent-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ⚠️ При изключени анимации лентата просто е там. Без това правило тя
   пропълзява отдолу и при човек, който изрично е поискал спокоен екран. */
@media (prefers-reduced-motion) {
    .consent { animation: none; }
}

.consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    /* ⚠️ Две стойности: 14px между редовете, 24px между колоните. Една обща
       стойност прави или редовете залепени, или колоните разкъсани. */
    gap: 14px 24px;
}

/* ⚠️ `flex: 1 1 320px` — текстът заема остатъка, но под 320px слиза на свой
   ред вместо да се смачка на по две думи. Броят на бутоните не се променя,
   тоест точката на пренасяне се получава сама. */
.consent-text {
    flex: 1 1 320px;
    margin: 0;
    color: #c9c9c9;
    font-size: 0.92rem;
    line-height: 1.55;
}

.consent-text strong { color: #fff; }

/* ⚠️ `white-space: nowrap` — „Политика за бисквитките“ е ЕДНА връзка и не
   бива да се пречупва между два реда: пречупена, тя изглежда като две. */
.consent-text a {
    color: var(--primary-color);
    text-decoration: underline;
    white-space: nowrap;
}

.consent-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ⚠️ По-ниски от общите бутони. С `padding: 12px 30px` и главни букви
   лентата излиза около 120px висока — на телефон това е близо една трета от
   екрана, преди човекът да е видял каквото и да е от сайта. */
.consent .btn {
    padding: 10px 22px;
    font-size: 0.82rem;
}

/* --- футърът: връзката за промяна на избора --- */

/* ⚠️ Няма свой цвят и свое подчертаване: тя стои вътре в `.terms-link` и
   взима същото, което имат другите три връзки долу. Четвърто правило със
   свой цвят е четвърто място, което да се разминава. */
.consent-reset { cursor: pointer; }

/* --- печат ---

   ⚠️ Лента с `position: fixed` се отпечатва НА ВСЯКА СТРАНИЦА от разпечатката
   — това е познатото „черна ивица през листа“. Тук се маха, заедно с
   връзката за настройките: на хартия нито едното върши работа.

   ⚠️ Пише се `@media print`, а не само `print` в общ блок: медия заявка без
   изричен вид важи и за екрана. */
@media print {
    .consent,
    .consent-reset { display: none; }
}

@media (max-width: 768px) {
    /* ⚠️ По-горе стои `.btn { width: 100% }` за телефон — вярно за бутоните
       в хероя, но тук то слага двата бутона един под друг и лентата пораства
       с още 60px. В прозореца те делят реда наполовина. */
    .consent .btn {
        width: auto;
        flex: 1 1 0;
        padding: 11px 10px;
        font-size: 0.78rem;
    }

    .consent-inner { padding: 14px 16px; gap: 12px; }
    .consent-buttons { width: 100%; }
    .consent-text { font-size: 0.86rem; line-height: 1.5; }

    /* ⚠️ Текстът НЕ се съкращава на телефон. Той е това, за което човекът
       дава съгласие — скъсен, прозорецът иска подпис под нещо непрочетено. */
}

/* ⚠️ ПОД 400px „Политика за бисквитките“ ВЕЧЕ НЕ СЕ ПОБИРА НА ЕДИН РЕД.
   Мерено на 320px: за текста остават 288px, а връзката ги изяжда до
   последния пиксел. Още малко и тя щеше да стърчи навън — а `overflow-x:
   hidden` на `html` НЕ реже елемент с `position: fixed`, тоест лентата
   щеше да излезе извън екрана, без нищо да я спре.

   Пречупена на два реда, връзката изглежда като две — затова горе стои
   `nowrap`. Тук изборът е между грозно и счупено. */
@media (max-width: 400px) {
    .consent-text a { white-space: normal; }
}