/* ============================================================================
   site.css — единственият източник на стилове за целия сайт.
   Зарежда се от всяка страница с <link rel="stylesheet" href="/assets/css/site.css">.

   Защо е външен файл, а не inline в страницата: сайтът става многостраничен.
   Ако стиловете стоят inline, всяка нова страница ги преписва наново и след
   третата страница те се разминават. Външният файл се и кешира между
   страниците. Виж specs/001-homepage-redesign/plan.md, раздел Complexity
   Tracking.

   Ред на съдържанието — спазвай го при добавяне:
     1. Токени (:root, тъмна тема, prefers-color-scheme)
     2. База (reset, типография, .wrap, фокус, език)
     3. Анимации при скрол ([data-reveal] — само под html.js)
     4. Шел (навигация, футър)
     5. Секции на страниците

   Правило за цветовете: цвят се пише само през токен, никога буквално.
   Договорът за имената е в specs/001-homepage-redesign/contracts/page-shell.md.
   ========================================================================== */


/* ==========================================================================
   0. ШРИФТОВЕ (self-hosted)
   Преди зареждани от fonts.googleapis.com/fonts.gstatic.com — махнати заради
   реален GDPR риск: браузърът на всеки посетител тегли шрифта директно от
   Google, а с него изтича и IP адресът му към Google, без правно основание
   (немски съд, LG München, януари 2022 — глоба точно за това, широко
   документиран случай). Файловете вече седят локално в /assets/fonts/ и се
   сервират от нашия собствен домейн — нулев трафик към Google, същите
   шрифтове, същото тегло на страницата (браузърът пак тегли същите файлове,
   само от друг адрес).
   Само latin + cyrillic subset-и (не latin-ext/gr/vietnamese и т.н.) —
   покрива и двата езика на сайта (BG/EN), по-малко тегло от пълния комплект.
   Изтеглени с `curl` от реалния Google Fonts CSS отговор (v20/v23 на
   съответните шрифтове, точните тегла, които вече ползвахме: Sans
   400/500/600, Serif 400, Mono 400). При смяна на шрифт/тегло — изтегли пак
   през същия метод, не added ръчно. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-500-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600-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:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-serif-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-serif-400-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. ТОКЕНИ
   Пренесени едно към едно от стария index.html. Нито един цвят не е променен —
   марката остава същата, сменя се само оформлението.
   ========================================================================== */

:root{
  --ink:#0C2033;
  --muted:#4A6076;
  --paper:#F6F8FA;
  --panel:#FFFFFF;
  --line:#DCE5EE;
  --grid:#E7EDF3;
  --chart-label:#7E93A8;
  /* Марката беше наситено лилаво (#5A2B9C) — собственикът реши да смени на
     класическо "бизнес консултантско" синьо, по общоприетия принцип
     синьо=доверие/компетентност за IT/консултантски сайтове (проверено само
     като общ дизайн принцип, не снето от конкретен източник, за разлика от
     техниките, взети буквално от intuendi.com другаде във файла).
     #2C5AA0 — средно тъмно, четливо с бял текст отгоре, не толкова студено
     /безлично като чист navy, не толкова бледо като sky blue. */
  --blue:#2C5AA0;
  --blue-soft:rgba(44,90,160,.10);
  /* Двата кръга от sfondo-hero.svg на intuendi.com — r=873 при opacity
     0.5 (--glow-outer), r=437 при opacity 0.8 (--glow-inner), един и същ
     център. Техните са бели върху сиво; нашите са в цвета на марката,
     върху var(--paper) — цветовете си остават нашите. */
  --glow-outer:rgba(44,90,160,.07);
  --glow-inner:rgba(44,90,160,.14);
  --bar1:#A8C4E8;
  --bar2:#5D8AC4;
  --bar3:#2C5AA0;
  --amber:#DF9A2E;
  --nav-bg:rgba(246,248,250,.92);
  --shadow:0 8px 30px rgba(12,32,51,.06);
  --radius:10px;
  /* Само за футъра (виж .site-footer по-долу): преди рибрандинга (когато
     марката беше лилаво) тъмната лента на футъра в светла тема излизаше
     "тъмно синьо" и "не вървеше" — идваше от --ink, токен за текст/UI хром,
     случайно с тъмно navy оттенък, различен от тогавашния лилав акцент.
     Сега марката вече Е синьо, но токенът остава изведен directно от
     --blue (color-mix), не произволен литерал — ако --blue се смени пак,
     футърът го следва автоматично, без ръчна поправка. Двойната декларация
     е нарочна: ако color-mix() не се поддържа, цялото свойство пада
     невалидно и остава по-ранната стойност (buquet). */
  --footer-bg:#11223D;
  --footer-bg:color-mix(in srgb, var(--blue) 38%, black);
  /* Golos Text (получер сериф-заместител) сменен с IBM Plex Serif, тегло 400
     — снето директно от intuendi.com, не по усет. Никъде на техния сайт не
     видях получер сериф, дори в 60px заглавия. */
  --display:'IBM Plex Serif',serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

:root[data-theme="dark"]{
  /* Собственикът: "тъмната тема е цялата лилава" — с право. Смяната на
     --blue сама не стигаше, защото --ink/--muted/--paper/--panel/--line/
     --grid/--chart-label/--nav-bg в тъмна тема НИКОГА не бяха неутрални —
     бяха част от оригиналната лилава система (напр. --paper:#171522 има
     явен лилав оттенък: B>R,G). Сега всички стават неутрален чакъл/сиво със
     съвсем лек студен (синкав, не лилав) нюанс — по съвета "Gray & Charcoal:
     neutral, modern, sleek corporate professionalism" — с --blue като
     единствения наситен цвят, точно 10% акцент, не фонов тон. */
  --ink:#EDEFF2;
  --muted:#93A0B0;
  --paper:#12151C;
  --panel:#1B2029;
  --line:#2B3140;
  --grid:#262C38;
  --chart-label:#8A93A5;
  /* По-светъл, по-ярък нюанс синьо от светлата тема (#2C5AA0 директно върху
     тъмен фон би изглеждал тъмно и невзрачно) — същия принцип като преди
     смяната (тъмната тема винаги взима по-светла версия на акцента). */
  --blue:#5B9BD5;
  --blue-soft:rgba(91,155,213,.16);
  --glow-outer:rgba(91,155,213,.10);
  --glow-inner:rgba(91,155,213,.20);
  --bar1:#3D5A80;
  --bar2:#4A80C4;
  --bar3:#5B9BD5;
  --nav-bg:rgba(18,21,28,.92);
  --shadow:0 8px 30px rgba(0,0,0,.35);
  /* --footer-bg е дефиниран само в светлата :root по-горе (виж бележката
     там) — без това нулиране тук той пак щеше да важи (custom properties се
     наследяват по свойство, не по цял rule-блок; тъмната тема не пипаше
     --footer-bg изобщо, значи стойността от светлия :root продължаваше да
     тече). initial прави var(--footer-bg,var(--ink)) да падне на fallback-а. */
  --footer-bg:initial;
}

/* Без изричен избор темата следва системата. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --ink:#EDEFF2;
    --muted:#93A0B0;
    --paper:#12151C;
    --panel:#1B2029;
    --line:#2B3140;
    --grid:#262C38;
    --chart-label:#8A93A5;
    --blue:#5B9BD5;
    --blue-soft:rgba(91,155,213,.16);
    --glow-outer:rgba(91,155,213,.10);
    --glow-inner:rgba(91,155,213,.20);
    --bar1:#3D5A80;
    --bar2:#4A80C4;
    --bar3:#5B9BD5;
    --nav-bg:rgba(18,21,28,.92);
    --shadow:0 8px 30px rgba(0,0,0,.35);
    --footer-bg:initial;
  }
}


/* ==========================================================================
   2. БАЗА
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px}
a{color:inherit}
img,svg{display:block;max-width:100%}
/* line-height 1.12 и отрицателен tracking бяха тунинг за плътен получер
   sans (Golos). Сериф с нормални тегла иска повече въздух: при Intuendi 60px
   заглавие има line-height 78px = 1.3, и никакъв letter-spacing. */
h1,h2,h3{font-family:var(--display);line-height:1.25;letter-spacing:normal}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* Skip-link — достъпност (WCAG 2.4.1 Bypass Blocks). Скрит визуално, но
   присъства за screen reader-и и клавиатурна навигация; появява се само
   при focus (Tab от началото на страницата), позволява да се прескочи
   навигацията директно към съдържанието, без да се минава през всеки линк
   в nav-а с Tab всеки път. */
.skip-link{
  position:absolute;top:-100px;left:12px;z-index:1000;
  background:var(--blue);color:#fff;
  padding:10px 18px;border-radius:8px;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* Ширината е снета от intuendi.com: техният вътрешен контейнер за четене е
   min(100%, 1205px), но hero-то и навигацията НЕ го ползват — техният
   контейнер там е maxWidth:none, само с отстъп. Тоест шелът и първият екран
   вървят чак до ръба на екрана, на всякаква ширина, а четивните секции се
   свиват.

   Първият опит тук грешно сложи max-width:1560px на .wrap "за всеки случай"
   — на екран, по-широк от 1560 (какъвто е този на собственика), това пак
   оставя голи полета отстрани, точно каквото трябваше да се избегне. Свалено.

   .wrap        — БЕЗ таван, само отстъп — истински през целия екран
   .wrap-narrow — 1205px, същата стойност като при тях, за секции с четене */
.wrap{width:100%;margin:0 auto;padding:0 clamp(16px,3.6vw,60px)}
.wrap-narrow{max-width:1205px;margin:0 auto}

/* Двуезичие: показва се само вариантът на избрания език. Механизмът е същият
   като в стария сайт — доказан е и работи без JavaScript за подразбиращия се
   език. Виж research.md, R6. */
html[data-lang="bg"] .l-en{display:none!important}
html[data-lang="en"] .l-bg{display:none!important}

/* Ако темата се сменя, докато страницата стои отворена, преходът да не е рязък.
   Никога върху свойства, които предизвикват преоформяне. */
@media (prefers-reduced-motion: no-preference){
  body{transition:background-color .2s ease, color .2s ease}
}


/* ==========================================================================
   3. РАЗКРИВАНЕ ПРИ СКРОЛ
   Началното скрито състояние важи САМО под html.js — тоест само когато
   site.js наистина работи. Ако скриптът падне, класът js липсва и цялото
   съдържание е видимо. Това е защитата срещу дефекта при confluence.com,
   където при бърз скрол части от страницата остават празни.
   ========================================================================== */

/* Рецептата е снета едно към едно от intuendi.com:
     @keyframes fadeUp{from{opacity:0;transform:translate3d(0,30px,0)}to{...}}
     .visible{animation:fadeUp .5s ease forwards}
   Същественото при тях не е разстоянието, а зърнистостта: класът се слага на
   ВСЕКИ отделен елемент — заглавие, абзац, бутон, снимка поотделно — а не на
   цял блок. Оттам идва каскадата, заради която страницата им изглежда жива.
   Затова в разметката [data-reveal] стои на отделните елементи. */
@keyframes fadeUp{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:none}
}

html.js [data-reveal]{opacity:0}
html.js [data-reveal].is-in{
  animation:fadeUp .5s ease forwards;
  animation-delay:var(--reveal-delay, 0ms);
}

/* Посетител, който е поискал по-малко движение, получава напълно статична
   страница и не губи нищо от съдържанието. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1}
  html.js [data-reveal].is-in{animation:none}
}


/* ==========================================================================
   4. ШЕЛ — НАВИГАЦИЯ
   Футърът влиза в User Story 3 (фаза 5).
   ========================================================================== */

.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* Три колони, двете крайни РАВНИ (1fr всяка) — единственият начин връзките
   в средата да застанат на истинския център на лентата, а не на центъра на
   каквото остане свободно. С auto 1fr auto среднaта колона се измества към
   по-тясната крайна колона. Всяка крайна колона поема каквото ѝ трябва,
   остатъкът от 1fr просто е поле. */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:22px;height:64px}
.logo{font-size:21px;text-decoration:none;flex:none;justify-self:start}

.nav-links{display:flex;gap:24px}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
/* .nav-links button — "Контакти" е плосък елемент тук, не вътре в падащо
   меню (собственикът прибра дропдауна обратно; засега два отделни елемента,
   докато не се разбере как точно да изглежда занапред). Стилизиран еднакво
   с връзките до него — само функционално не води никъде (виж index.html). */
.nav-links button{
  font-family:var(--body);text-decoration:none;font-size:15px;font-weight:500;
  color:var(--muted);background:none;border:0;padding:0;cursor:pointer;
}
.nav-links button:hover{color:var(--ink)}
/* Празна средна колона не бива да пречи на разпределението. */
.nav-links:empty{display:none}

.nav-actions{display:flex;align-items:center;gap:12px;justify-self:end}

/* С равни крайни колони, дясната (вход + 2 бутона) трябва да се побере в
   същата ширина като лявата (логото). Границата е измерена, не е кръгло
   число по навик — под нея дясната група не се събира без пренасяне. */
@media(max-width:900px){
  .nav-links{display:none}
}
/* На тесен екран четирите елемента в навигацията не се събират: логото плюс
   „Вход" плюс двата превключвателя надхвърлят 320px още преди отстоянията.
   Затова тук се свиват отстоянията, логото и вътрешните полета на бутоните.
   Бутоните не се крият — „Вход" трябва да се вижда и на телефон (FR-017). */
@media(max-width:520px){
  .nav-in{column-gap:8px}
  .nav-actions{gap:6px}
  .logo{font-size:17px}
  .ctrl-btn{padding:6px 9px}
  .login-btn{padding:6px 11px;font-size:12.5px}
}

.ctrl-btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:13px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;min-height:32px;flex:none}
.ctrl-btn:hover{border-color:var(--blue);color:var(--blue)}
.ctrl-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Входът към клиентския дашборд. Стои и на телефон, за разлика от .nav-links. */
.login-btn{border:1px solid var(--blue);background:var(--blue-soft);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:13px;color:var(--blue);text-decoration:none;display:flex;align-items:center;min-height:32px;white-space:nowrap;flex:none}
.login-btn:hover{background:var(--blue);color:var(--paper)}


/* ==========================================================================
   5. СЕКЦИИ — ПЪРВИ ЕКРАН
   ========================================================================== */

/* Измерих директно защо изглеждахме "накуцани по краищата" при отдалечен
   изглед: hero-то при intuendi.com расте с височината на прозореца (636px
   при 720px прозорец, 1020px при 1200px — пропорционално), докато нашето
   беше високо точно колкото съдържанието плюс padding с таван по clamp. При
   голям ефективен viewport тяхното продължава да пълни почти целия екран;
   нашето спираше да расте и оставаше малко петно в единия ъгъл на много
   по-голямо платно.
   min-height, не height — ако съдържанието някога стане по-високо от това
   (дълъг български текст, малък екран), кутията расте с него, не го реже.
   64px е точната височина на .nav (виж по-долу), не кръгло число. */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,88px);overflow:hidden}
/* Бяха почти равни колони (1fr / 1.02fr) с широка междина — на широк екран
   текстът е естествено по-тесен от колоната си (шрифтът е с таван по clamp),
   а кадърът си стоеше в своята половина: резултатът беше голяма мъртва дупка
   по средата, нищо общо с intuendi.com. При тях кадърът поема забележимо
   повече от лентата и започва близо до текста. Тук същото — по-тясна текстова
   колона, по-широка за кадъра, по-стегната междина. */
/* min-height:85vh е буквалната им стойност, свалена от истинския им CSS
   (не от усет): ".elementor-element-45c2c49 > .elementor-container{
   min-height: 85vh }" — редът с двете колони, не секцията отвън. Преди беше
   на .hero, като calc(100vh - 64px) — работеше по число, но не беше
   буквално тяхното. align-items:center центрира двете колони вътре в тази
   по-висока кутия, точно както при тях (align-items:center на реда им). */
/* Съотношението на колоните е .5fr:1fr, вместо буквалните .62fr:1fr на
   Intuendi (виж бележката по-горе) — нарочно отклонение: собственикът
   поиска по-голям кадър ("много мънички, нищо не се вижда"), а с
   .62fr:1fr текстовата колона взимаше повече, отколкото ѝ трябва (текстът
   е с таван 710px и не го достигаше), докато кадърът — двойна композиция с
   доста дребен текст вътре — имаше нужда точно от повече пространство.
   max-height в .shot-img вдигнат успоредно, но НЕ той е бил истинското
   ограничение тук — измерено директно: при по-високия max-height кадърът
   пак излизаше 676px широк, защото самата колона му даваше точно толкова
   (max-width:100% го спираше преди max-height изобщо да се задейства). */
.hero-grid{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;min-height:85vh}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
}

/* Таван 710px, снет от кода им (виж по-горе) — текстът не расте безгранично
   с колоната. Самото центриране обаче е решение на собственика, не снето от
   тях: при проверка тяхното h1 стои близо до левия ръб на колоната си, не
   центрирано. Собственикът поиска изрично същото третиране като при кадъра
   — margin:0 auto центрира блока в лявата колона, текстът вътре си остава
   ляво подравнен (нормален начин на четене), само кутията му е по средата. */
.hero-copy{max-width:710px;margin:0 auto}

.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
/* Тегло 400, не 800 — получер сериф на 60px изглежда тежко и разбира се не
   е тяхното. Проверих: тяхното 60px H3 е точно тегло 400. */
.hero h1{font-size:clamp(36px,5.4vw,60px);font-weight:400;margin-bottom:22px;text-wrap:balance}
.hero .lead{font-size:clamp(17px,1.4vw,19.5px);color:var(--muted);max-width:50ch;margin-bottom:32px}

.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:14px 28px;border-radius:999px;border:1.5px solid var(--blue);background:var(--blue);color:#fff;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}

/* --- рамката около кадъра от дашборда ---
   Рамката е еднаква в двете теми; кадърът вътре се сменя. Тънката лента с
   трите точки отгоре го чете като прозорец на приложение, вместо като
   залепена картинка. */
/* width:fit-content — рамката се свива до ширината на кадъра вътре, вместо
   да остане широка колкото цялата колона. Иначе, откакто кадърът вече не се
   реже (виж .shot-img по-долу), рамката оставаше пълна ширина с голи полета
   от двете страни на по-тесния кадър — точно толкова грозно, колкото
   отрязването, което замества.
   margin:0 auto, не margin-left:auto — центрирана в колоната си, не опряна в
   десния край. Първият опит опираше рамката в десния ръб; при много широк
   ефективен viewport (zoom out) кадърът, с таван по височина, оставаше малък
   и фиксиран, докато колоната растеше неограничено — рамката буквално
   "бягаше" към ръба, все по-далеч от текста. Проверих директно в техния код:
   тяхната собствена рамка е центрирана в половината си от реда (334px/335px
   разстояние от двата ръба на колоната — практически идентично), не опряна
   в ръба. */
/* Рамката е по-плътна (2px, var(--ink)), не тънка линия — собственикът
   показа мостра с плътен тъмен кант около кадъра, вместо едва забележим
   контур. var(--ink) се обръща заедно с темата, както навсякъде другаде: в
   светла тема е тъмна рамка, в тъмна тема — светла. */
/* Кадърът вече идва с готова рамка/сянка от самата png (виж бележката в
   index.html) — .shot само центрира, не рисува собствен border/фон/сянка
   отгоре. Старата плътна рамка (2px var(--ink)) и фалшивият browser-chrome
   (.shot-bar с трите точки) паднаха с тази смяна — бяха нужни само докато
   кадърът беше гол, единичен скрийншот. */
.shot{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
}
/* Предният опит режеше кадъра по височина (max-height + object-fit:cover) и
   заглаждаше долния ръб с преливане към фона. Проблемът: кадърът е таблица
   от карти в редове — отрязването падаше по средата на реда с четирите KPI
   карти, а не на чиста граница, и с преливането отгоре изглеждаше като
   счупена страница, не като нарочен избор. При Intuendi кадърът е цял
   правоъгълник, без замъглени/отрязани ръбове.
   Сега кадърът се показва ЦЯЛ — никакво отрязване, никакво преливане. По-
   тясната текстова колона (виж .hero-grid по-горе) вече дава на кадъра
   достатъчно място, без да е нужно да се реже. */
/* height (не max-height) плюс width:auto — на <img> това е еднозначно
   изчислимо: браузърът смята ширината от истинската пропорция на кадъра, без
   никаква зона за грешка. Кадърът никога не се реже, само се смалява.
   Центриран е, защото рамката остава широка колкото колоната си, а кадърът
   вътре обикновено е по-тесен от нея. */
/* max-height, не height — с height фиксирана, max-width:100% я биеше на
   тесен екран и разваляше пропорцията (кадърът се смачкваше, вместо да се
   смалява цял). С две "max-" стойности браузърът винаги пази пропорцията,
   каквато и от двете да е по-строгата. */
/* Вдигнато сериозно (собственикът: "много мънички, нищо не се вижда") —
   новият кадър е двойна композиция от 2 застъпени екрана с доста дребен
   текст вътре (KPI карти, sidebar), не един прост скрийншот като преди;
   при старите, по-ниски граници се смаляваше твърде много, за да остане
   четимо каквото и да е от съдържанието. */
.shot-img{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(380px,68vh,720px)}
@media(max-width:960px){
  .shot-img{max-height:min(72vh,620px)}
}


/* ==========================================================================
   5б. СЕКЦИИ — ШЕСТТЕ СТЪПКИ (зиг-заг път с движеща се точка)
   Договорът е в specs/001-homepage-redesign/contracts/page-shell.md, §6.
   ========================================================================== */

.steps{padding:clamp(56px,7vw,104px) 0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:60ch;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{font-size:clamp(27px,3.4vw,40px);font-weight:400;margin-bottom:14px;text-wrap:balance}
.sec-head p{color:var(--muted)}

/* position:relative прави мрежата отправна точка за абсолютно позиционираните
   контур и точка, и същевременно прави offsetTop/offsetLeft на картите
   директно годни за координати в SVG-то. */
.steps-grid{position:relative;display:grid;grid-template-columns:1fr;gap:16px}

@media(min-width:860px){
  .steps-grid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,7vw,110px);row-gap:clamp(34px,4.4vw,60px)}
  /* Зиг-заг: нечетните вляво, четните вдясно, всяка на собствен ред. Редът в
     разметката остава естественият 1..6 — подредбата е работа на стила. */
  .step-card:nth-of-type(odd){grid-column:1}
  .step-card:nth-of-type(even){grid-column:2}
  .step-card:nth-of-type(1){grid-row:1}
  .step-card:nth-of-type(2){grid-row:2}
  .step-card:nth-of-type(3){grid-row:3}
  .step-card:nth-of-type(4){grid-row:4}
  .step-card:nth-of-type(5){grid-row:5}
  .step-card:nth-of-type(6){grid-row:6}
}

/* Контурът и точката са украса, не съдържание — стоят зад картите и под
   ширината на две колони изобщо не се показват. */
.steps-path,.steps-dot{display:none}
@media(min-width:860px){
  .steps-path{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
  .steps-dot{
    display:block;position:absolute;left:0;top:0;z-index:0;
    width:11px;height:11px;border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 0 5px var(--blue-soft);
    transform:translate(-50%,-50%) translate3d(0,0,0);
    will-change:transform;
    opacity:0;
  }
  .steps-dot.is-on{opacity:1}
}

.steps-line{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.steps-arrows{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Картите са плътни, за да скрият вертикалните участъци на пътя: точката
   влиза в картата и излиза отдолу. */
.step-card{
  position:relative;z-index:1;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 24px 26px;
  box-shadow:var(--shadow);
}
.step-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--blue);background:var(--blue-soft);
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
}
.step-tag svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.step-card h3{font-size:19.5px;font-weight:700;margin-bottom:9px;text-wrap:balance}
.step-card p{font-size:15.5px;color:var(--muted)}

/* Шестата стъпка е по желание. Белегът е думи, не само цвят — цветът сам по
   себе си не е достъпна разлика. */
.step-opt{
  display:inline-block;margin-left:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);border:1px dashed var(--line);
  padding:3px 8px;border-radius:999px;vertical-align:middle;
}


/* ==========================================================================
   5в. СЕКЦИИ — ИЗЯВЛЕНИЕ ЗА ПОДХОДА
   Текстът се разкрива дума по дума. Думите се увиват в <span> по време на
   изпълнение, от site.js — в разметката стои нормален текст, за да е четим за
   търсачки, за екранни четци и при изключен JavaScript.
   ========================================================================== */

/* Проверих реалната им последователност от фонове: hero rgb(243,244,247),
   следващата секция rgb(250,250,250), следващата пак rgb(243,244,247) — две
   близки, но различни сиви, редувани. При нас hero/подход/покриваме бяха
   и трите на голия --paper, неразличими едно от друго. Редувам --paper/
   --panel по същия принцип, плюс тънка линия — при тях разликата е само
   6-7 нюанса сиво, при нас на светла тема --panel(бяло)/--paper е също
   толкова фина; линията прави границата сигурна дори на екран с лош
   контраст. */
.approach{padding:clamp(64px,9vw,132px) 0;background:var(--panel);border-top:1px solid var(--line)}
.approach .eyebrow{margin-bottom:26px}
.statement{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px,4.2vw,48px);
  line-height:1.3;
  letter-spacing:normal;
  max-width:26ch;
}
/* Втората и третата мисъл са по-тихи от първата — иначе трите изречения се
   бият за едно и също внимание. */
.statement .q{color:var(--muted)}


/* ==========================================================================
   5д. СЕКЦИИ — КАКВО ПОКРИВАМЕ
   Мрежа от възможности, по модел на "solution overview" при intuendi.com.
   За разлика от техните карти, елементите тук не водят никъде — все още
   нямаме отделни страници по услуга. Стават връзки, щом тези страници се
   появят.
   ========================================================================== */

.coverage{padding:clamp(56px,7vw,104px) 0;background:var(--paper);border-top:1px solid var(--line)}
.coverage .sec-head{max-width:60ch}

.coverage-grid{
  display:grid;grid-template-columns:1fr;
  column-gap:clamp(40px,6vw,96px);row-gap:clamp(36px,4.4vw,56px);
}
@media(min-width:720px){
  .coverage-grid{grid-template-columns:1fr 1fr}
}

.coverage-card .coverage-ic{width:38px;height:38px;margin-bottom:16px;color:var(--blue)}
.coverage-card .coverage-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.coverage-card h3{font-size:19px;font-weight:700;margin-bottom:8px}
.coverage-card p{font-size:15.5px;color:var(--muted);max-width:44ch}


/* ==========================================================================
   5д2. ПЪЛНОШИРИННИ КАДРИ С ПАРАЛАКС ([data-shift-band] / [data-shift-layer])
   Общ механизъм, ползван от две секции по-долу: разделителя между „подхода"
   и „какво покриваме" (section-divider.webp) и снимката до цитата на
   основателя. Затова е изваден тук, а не повтарян във всяка секция.

   Фиксирана височина на лентата (задава се от самата секция, не оттук) +
   object-fit:cover на кадъра вътре — еквивалентът на background-size:cover
   от техния код (виж бележката в index.html при разделителя). Лентата НЕ
   следва естественото съотношение на файла — реже кадъра, никога не го
   разтяга и никога не оставя празно поле, на каквато и да е ширина или zoom.

   [data-shift-layer] е слоят с лекия паралакс (движи се обратно на скрола) —
   по-висок от лентата с --shift-range, центриран с translateY(-50%), JS-ът
   в site.js добавя отгоре малко допълнително отместване през --shift. Без
   JS или при prefers-reduced-motion остава просто центриран, статичен кадър
   — не изчезва нищо, само липсва движението. --shift-range трябва да е поне
   2× стойността на data-shift-range в HTML (обичайно 90 → 200px тук).
   ========================================================================== */
[data-shift-band]{
  position:relative;overflow:hidden;
  --shift-range:200px;
  --shift:0px; /* пипа се от site.js при скрол; 0 без JS/reduced-motion */
}
[data-shift-layer]{
  position:absolute;left:0;right:0;top:50%;
  height:calc(100% + var(--shift-range));
  transform:translateY(calc(-50% + var(--shift)));
}
[data-shift-band] img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* .tint-overlay — двата тъмни кадъра (section-divider-dark.webp,
   founder-shot-dark.webp) са рисувани от собственика в старата лилава
   марка — снимки, не CSS токени, не се преоцветяват сами при рибрандинга.
   Резултат: лилав кадър върху нов син фон, "пръска" (собственикът).
   Вместо да иска нови снимки, тонираме съществуващите през CSS:
   mix-blend-mode:color взима ХЮ-а/наситеността от този слой (--blue) и
   пази светлината на кадъра отдолу непокътната — тъмните/средните тонове
   се обръщат забележимо към синьо, бялото остава почти бяло (за да остане
   четим текстът вътре), контрастът на самия кадър не се губи.
   display:none по подразбиране — само тъмната тема е засегната (светлите
   кадри вече са в правилния цвят, тонирането там би развалило нещо
   работещо). */
.tint-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--blue);
  mix-blend-mode:color;
  opacity:.45; /* пълна сила (1) излезе твърде ярко/неоново върху светлите
    части на кадъра — собственикът поиска по-спокойно, по-тъмно. Намалената
    opacity частично връща оригиналния лилав тон под синия, омекотява
    ефекта, без да го маха. */
  display:none;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tint-overlay{display:block}
}
:root[data-theme="dark"] .tint-overlay{display:block}

/* Разделителят между „подхода" и „какво покриваме". Вече има тъмен вариант
   (section-divider-dark.webp), теглен през <picture> в index.html — не се
   крие повече в тъмна тема. */
.section-divider{height:clamp(200px,26vw,440px)}


/* ==========================================================================
   5д3. СЕКЦИЯ — ЦИТАТ ОТ ОСНОВАТЕЛЯ (founder-shot-light.webp)
   По модел на testimonial секция от intuendi.com: текст+снимка отляво в
   padded колона, наклонен екран отдясно, който се проточва до ръба на
   секцията (няма .wrap таван на самата снимка — само на текстовата колона).

   Височината на .founder-visual е нарочно голяма (близо до hero), не тънка
   лента като .section-divider — при locale проверка (виж бележката в
   index.html) наклонът/сянката на кадъра стават видими едва при съотношение
   между 1:1 и 1.3:1; по-широка/по-тънка лента реже точно през средата на
   екрана и заличава целия ефект на "наклонен кадър".
   ========================================================================== */
.founder{background:var(--paper);border-top:1px solid var(--line);overflow:hidden}
.founder-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.3fr);align-items:center;column-gap:clamp(16px,3vw,48px)}
@media(max-width:900px){ .founder-grid{grid-template-columns:1fr} }

/* max-width + margin:0 auto, не vw-базиран padding — същата поправка, както
   при .hero-copy (виж бележката там): без таван текстът просто следваше
   ширината на собствената си (широка) колона и на голям монитор увисваше
   близо до левия ръб, "залепен за стената", а позицията му се местеше с
   всяка промяна на ефективната ширина (голям монитор, browser zoom-out).
   С таван и auto центриране текстът пада на собствено, стабилно място по
   средата на колоната си, което не зависи от zoom. */
.founder-copy{
  padding:clamp(48px,7vw,96px) 24px;
  max-width:440px;
  margin:0 auto;
}
.founder-quote{margin:0 0 28px}
.founder-quote p{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(20px,2.2vw,28px);line-height:1.45;margin:0;
  text-wrap:balance;
}
.founder-attribution{display:flex;align-items:center;gap:14px}
.founder-avatar{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none}
.founder-name{font-weight:700;margin:0}
.founder-role{color:var(--muted);font-size:14.5px;margin:0}

/* Колоната с кадъра свита от 1.6fr на 1.3fr (по-малка снимка) и височината
   вдигната малко (по желание на собственика) — заедно движат съотношението
   на изрязване леко надолу към 1:1, все още в проверения "безопасен" обхват
   1:1–1.3:1 от бележката горе. */
.founder-visual{height:clamp(460px,48vw,740px)}
@media(max-width:900px){ .founder-visual{height:clamp(380px,92vw,660px)} }
/* Вече има тъмен вариант (founder-shot-dark.webp), теглен през <picture> в
   index.html — двуколонната решетка остава и в тъмна тема, снимката не се
   крие повече. */


/* ==========================================================================
   4б. ШЕЛ — ПАДАЩИ МЕНЮТА
   Механизмът е готов, но засега е празен: няма нито една друга страница, а
   меню без съществуваща подстраница изобщо не се извежда (FR-015).
   ========================================================================== */

.nav-menu{position:relative;display:flex;align-items:center}
.nav-menu-btn{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted);
  padding:0;
}
.nav-menu-btn:hover,.nav-menu-btn[aria-expanded="true"]{color:var(--ink)}
.nav-menu-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.nav-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-submenu{
  position:absolute;top:calc(100% + 14px);left:-10px;
  min-width:210px;list-style:none;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:8px;
}
.nav-submenu[hidden]{display:none}
/* .nav-submenu button — "Контакти" вътре е кликаем бутон без дестинация
   (по изрично решение на собственика, докато няма истинска страница
   "Контакти"), не <a>. Стилизиран еднакво с истинската връзка до него, за
   да не личи разликата визуално — само функционално не води никъде. */
.nav-submenu a,.nav-submenu button{
  display:block;width:100%;padding:9px 12px;border-radius:8px;
  font-family:var(--body);font-size:15px;text-align:left;
  color:var(--muted);text-decoration:none;
  background:none;border:0;cursor:pointer;
}
.nav-submenu a:hover,.nav-submenu button:hover{background:var(--blue-soft);color:var(--blue)}


/* ==========================================================================
   4в. ШЕЛ — ФУТЪР
   ========================================================================== */

.site-footer{border-top:1px solid var(--line);padding-bottom:26px}

/* Първият опит тук претупа мащаба — 46px слоган и padding до 108px са много
   по-едри от истинската CTA-лента на intuendi.com, която е скромна: кратко
   изречение, обикновен бутон, тънки вълни на заден план, не водещ елемент.
   Свалено обратно до размер, близък до нормален подзаглавие, не до hero. */
.footer-top{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
  padding:clamp(40px,5.5vw,64px) 24px;border-bottom:1px solid var(--line);
}
.footer-waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.footer-waves path{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.14}
/* :not(.footer-waves) — БЪГ, открит по сигнал на собственика (много празно
   място над слогана): това правило събаряше position:absolute на вълните
   (еднаква специфичност, по-късно в листа → печели), превръщайки ги от
   плаващ фон в обикновен flex елемент, който заемаше собствен ред ~200px
   височина. Оттам идваше цялата "празнина" — не от padding. */
.footer-top > :not(.footer-waves){position:relative;z-index:1}
.footer-slogan{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,26px);line-height:1.25;letter-spacing:normal;max-width:22ch}

/* Обикалящ акцент по канта на "Поискайте демо" — буквално проверено в кода
   на intuendi.com (footer .elementor-button): плътен цвят в padding-box,
   conic-gradient в border-box, вижда се само в тясна ивица на канта,
   --gradient-angle расте безкрайно през @property.

   Първата ми теория (@property не се поддържа навсякъде) излезе грешна —
   собственикът провери директно в DevTools на intuendi.com, в същия браузър
   (Opera), и --gradient-angle реално се сменя постоянно там. Втория ми опит
   (mask + transform:rotate) също не беше търсеното.
   Истинската добавка е друга, по изрична молба на собственика: пръстенът НЕ
   се вижда постоянно — ъгълът тече през цялото време отдолу (--gradient-angle
   никога не спира), но самият пръстен е скрит в покой (border-box фонът е
   същия плътен --blue като padding-box-а, шевът е невидим) и се появява
   едва на :hover, чрез смяна на border-box фона към conic-gradient-а — точно
   "рамката светва в цвета, който обикаля" при посочване с мишката.
   Цветът е светло небесносиньо (#7EC8F0), обновено заедно с рибрандинга на
   марката от лилаво към синьо — не тяхното зелено. Ротацията спира при
   prefers-reduced-motion (само hover ефектът остава — статичен пръстен, не
   въртящ се). */
.footer-top .btn{
  position:relative;
  border:3px solid transparent;
  background:
    linear-gradient(var(--blue),var(--blue)) padding-box,
    linear-gradient(var(--blue),var(--blue)) border-box;
  transition:background .25s ease,filter .25s ease;
}
@property --gradient-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes btn-orbit{to{--gradient-angle:360deg}}
@media(prefers-reduced-motion:no-preference){
  .footer-top .btn{animation:btn-orbit 3s linear infinite}
}
/* Първият опит (3px кант, 17% от кръга ярко) излезе твърде фин, за да се
   забележи на живо — вдигнато сериозно: почти половината пръстен вече е в
   акцентния цвят, плюс drop-shadow сияние около целия бутон на hover, за да
   няма никакво съмнение, че нещо се случва. */
.footer-top .btn:hover{
  background:
    linear-gradient(var(--blue),var(--blue)) padding-box,
    conic-gradient(from var(--gradient-angle,0deg),#7EC8F0,transparent 45%,transparent 55%,#7EC8F0 100%) border-box;
  filter:drop-shadow(0 0 10px rgba(126,200,240,.65));
}

/* Логото на компанията във футъра (виж бележката в index.html при
   .footer-brand). <prognautix-logo> чете --ink/--paper директно (SVG
   fill="var(--ink,...)"), не наследява ги през color. Лентата на футъра е
   ОБЪРНАТА спрямо темата на страницата (.site-footer{background:var(--ink)}
   по-долу) — затова тук --ink/--paper се пренасочват локално към буквалните
   стойности на ОБРАТНАТА тема (не var(), за да се избегне циркулярна
   референция в едно и също правило): в светла тема лентата е тъмна, значи
   логото трябва да е "тъмна тема" на цвят; в тъмна тема лентата е светла
   (обърната), значи логото трябва да е "светла тема" на цвят. */
/* Стойностите тук трябва да пасват буквално на реалния фон на лентата (виж
   --footer-bg по-горе), не просто на "тъмна/светла тема" по принцип —
   иначе checkmark-който-изрязва спира да съвпада с фона, щом тонът на
   лентата се смени (точно каквото стана при рибрандинга: старите литерали
   тук останаха сочещи стария лилав --paper/--ink на тъмната тема, докато
   токените вече бяха обновени — засечено при преглед на новата палитра). */
.footer-brand{margin-bottom:clamp(20px,3vw,32px);font-size:26px;line-height:0}
/* Светла тема: --footer-bg = color-mix(var(--blue) 38%, black) ≈ #11223D. */
.footer-brand prognautix-logo{--ink:#F6F8FA;--paper:#11223D}
/* Тъмна тема: --footer-bg:initial пада на var(--ink), тоест лентата е
   светла = новата --ink на тъмната тема (#EDEFF2) — логото трябва да е
   тъмно (новата --paper на тъмната тема, #12151C), за да се чете. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-brand prognautix-logo{--ink:#12151C;--paper:#EDEFF2}
}
:root[data-theme="dark"] .footer-brand prognautix-logo{--ink:#12151C;--paper:#EDEFF2}

.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px;padding:clamp(28px,3.6vw,44px) 0}
.footer-col h3{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.footer-col ul{list-style:none;display:grid;gap:10px}
.footer-col a{text-decoration:none;font-size:15px;color:var(--ink)}
.footer-col a:hover{color:var(--blue)}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted);
}
.social{display:flex;gap:10px}
.social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--muted)}
.social a:hover{border-color:var(--blue);color:var(--blue)}
.social svg{width:17px;height:17px;fill:currentColor}

/* ==========================================================================
   6. ЗАНАЯТ — слоеве в първия екран и тъмна лента най-долу
   Добавено, след като сравнението с intuendi.com показа, че при тях hero-то
   е слоесто: снимката излиза извън контейнера, зад нея стои очертан кръг и
   мек ореол. Нашето беше плоска решетка от две колони.
   ========================================================================== */

/* Проверих директно в кода им: кадърът им НЕ опира в десния ръб — стои
   центриран в собствената си половина от реда (background-size:930px,
   фиксирано число, но при 3200px екран разстоянието от кадъра до левия ръб
   на колоната му е 334px, до десния — 335px, практически еднакво). "Bleed"
   към ръба, който имаше тук, беше измислен, не снет от техния код — свален. */
.hero-visual{position:relative}
.hero-visual .shot{z-index:1}

/* Взето от техния действителен файл, не по усет: fetch-нах
   sfondo-hero.svg и прочетох съдържанието му. Два концентрични кръга, един
   и същ център — r=873 при opacity 0.5, r=437 при opacity 0.8 — върху сива
   основа. Не два отделни decorative елемента (::before контур + ::after
   блъснато сияние, каквото имаше тук преди — измислено, не тяхното), а един
   слой на самата секция, точно както при тях (background-image на цялата
   .elementor-element-45c2c49, не само зад картинката).
   Цветовете са нашите (--glow-outer/--glow-inner, тонирани в --blue), не
   бяло върху сиво — техниката е тяхна, палитрата си остава наша. Позицията
   82% 46% отговаря на техния десен-център фокус (center 1241 от viewBox
   1440 ≈ 86% хоризонтално); радиусите 55%/28% пазят съотношението 873:437. */
.hero{
  background-image:
    radial-gradient(circle at 82% 46%, var(--glow-inner) 0%, transparent 28%),
    radial-gradient(circle at 82% 46%, var(--glow-outer) 0%, transparent 55%);
  background-repeat:no-repeat;
}

/* Тъмна лента най-долу. Лентата се обръща заедно с темата: тъмна върху
   светла страница и светла върху тъмна. Фонът е --footer-bg (виж токена
   по-горе) само в светла тема, изведен от --blue, не от --ink — иначе
   лентата излизаше "тъмно синьо", не лилаво. В тъмна тема --footer-bg не е
   дефиниран и пада обратно на --ink, което вече изглежда добре (собственикът
   го потвърди). Разделителните линии са неутрално сиви, за да работят и в
   двата случая. */
.site-footer{background:var(--footer-bg,var(--ink));color:var(--paper);border-top:0}
.site-footer .footer-top,
.site-footer .footer-bottom{border-color:rgba(128,128,128,.3)}
.site-footer .footer-col h3{color:currentColor;opacity:.55}
.site-footer .footer-col a{color:currentColor;opacity:.85}
.site-footer .footer-col a:hover{opacity:1}
.site-footer .footer-bottom{color:currentColor;opacity:.7}
.site-footer .social a{border-color:rgba(128,128,128,.4);color:currentColor}


/* ==========================================================================
   7. СТРАНИЦА — ЗА НАС (about.html)
   Специфично само за тази страница — виж реда на файла в началото. Хедърът
   и футърът идват от общия шел (page-shell.md), не се повтарят тук.
   ========================================================================== */

/* -- Блок 1: hero ---------------------------------------------------------
   Фонът беше оригинална CSS градиентна композиция, докато нямаше снимка под
   ръка — вече има (about-block-1.webp, доставена от собственика). Градиентът
   остава като база под снимката (var(--ink) е тъмна в светла тема, светла в
   тъмна тема — .about-hero нарочно е "обърнат" спрямо темата, hero изглежда
   тъмно/драматично независимо от общата тема на сайта). Снимката е почти
   бяла/светла абстрактна текстура — на пълна яркост би счупила контраста с
   текста върху нея, затова седи на ниска opacity (само текстура, градиентът
   отдолу продължава да носи контраста), а .tint-overlay отгоре ѝ дава
   марковия син нюанс. За разлика от .tint-overlay на главната страница
   (там само в тъмна тема, коригира стар лилав кадър), тук тонирането е
   винаги включено — снимката е неутрална навсякъде, не само в тъмна тема.
   data-shift-band/layer — същият паралакс механизъм като на главната
   страница (по изрично желание: "снимката пак се скролва"). */
.about-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.about-hero-bg{position:absolute;inset:0;z-index:0}
.about-hero-bg [data-shift-layer]{
  background:
    radial-gradient(circle at 28% 30%, var(--glow-inner) 0%, transparent 45%),
    radial-gradient(circle at 76% 68%, var(--glow-outer) 0%, transparent 55%),
    var(--ink);
}
/* Лек blur (не 28px както първия опит — собственикът поиска снимката да се
   вижда, не да е скрита) + малко overscale да покрие ръбовете. */
.about-hero-bg [data-shift-layer] img{opacity:.55;filter:blur(6px);transform:scale(1.05)}
.about-hero-bg .tint-overlay,
.about-team-bg .tint-overlay{display:block}
.about-hero-in{position:relative;z-index:1;padding:clamp(96px,16vw,200px) 24px clamp(72px,10vw,120px);text-align:center;max-width:900px;margin:0 auto}
/* Меко "петно" зад текста/бутоните (не text-shadow — с толкова видима
   снимка отзад, тънък ореол около буквите не стигаше за контраст, особено
   когато hero-то се обръща светло в тъмна тема, виж бележката горе). Радиален
   градиент в цвета на самия hero фон (var(--ink)), избледняващ навън —
   снимката остава напълно видима извън текстовия блок, само зад него се
   къса плавно за четимост. z-index:-1 го слага зад h1/бутоните, но над
   .about-hero-bg (тъй като .about-hero-in вече е на z-index:1 спрямо hero-то). */
.about-hero-in::before{
  content:'';position:absolute;inset:-12% -8%;z-index:-1;
  background:radial-gradient(ellipse at center, var(--ink) 0%, var(--ink) 35%, transparent 72%);
  opacity:.6;
}
.about-hero-in h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,56px);line-height:1.2;letter-spacing:normal;text-wrap:balance;margin:0 0 32px}
.about-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* .btn-ghost съществуваше преди, паднал при чистенето на старата CTA секция
   (Phase 24) — трябва отново, за вторичния бутон тук ("Свържете се с нас").
   currentColor вместо var(--ink), защото седи върху тъмния hero фон, не
   върху нормален панел. */
.btn-ghost{
  display:inline-block;text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:999px;
  border:1.5px solid currentColor;color:currentColor;background:none;
  white-space:nowrap;cursor:pointer;
}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* -- Блок 2: история --------------------------------------------------- */
.about-history{padding:clamp(64px,9vw,120px) 0;background:var(--panel);border-top:1px solid var(--line);text-align:center}
.about-history-in{max-width:70ch;margin:0 auto}
.about-history-in p{color:var(--muted);font-size:17px;line-height:1.7}

/* -- Блок 3: числата -----------------------------------------------------
   Не буквалният Venn/припокриващи-се кръгове на intuendi.com (собственикът
   изрично поиска "не баш същия") — тук всяко число е в собствен пръстен,
   редуващите се плочки леко отместени надолу, за да не е плосък еднакъв
   ред. Реални, проверени числа от McKinsey (виж бележката в about.html при
   .numbers-note) — не измислени. */
.about-numbers{padding:clamp(64px,9vw,120px) 0;background:var(--paper);border-top:1px solid var(--line);text-align:center}
.about-numbers h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);margin:0 0 clamp(40px,6vw,64px)}
.numbers-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,4vw,56px)}
.number-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(140px,18vw,180px);height:clamp(140px,18vw,180px);
  border-radius:50%;
  background:radial-gradient(circle,var(--blue-soft) 0%,transparent 72%);
  border:1px solid var(--line);
}
.number-tile:nth-child(even){margin-top:28px}
.number-tile strong{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);color:var(--blue)}
.number-tile span{font-size:13.5px;color:var(--muted);max-width:20ch;margin-top:6px;text-align:center}
.numbers-note{margin:clamp(32px,5vw,48px) auto 0;max-width:70ch;font-size:13px;color:var(--muted)}
.numbers-note a{color:var(--muted);text-decoration:underline}

/* -- Блок 4: екип ----------------------------------------------------------
   Не вертикален "албум"/карусел като при intuendi.com (собственикът не го
   хареса) — но снимката трябва да е голяма като тяхната, не малка карта.
   Затова: текст+снимка едно до друго (като hero), не card в рамка; членовете
   един под друг, докато има повече от един. Първата версия (малка card
   снимка 96-140px) изглеждаше "мега жалко" по думите на собственика —
   вдигнато сериозно, почти колкото founder-shot секцията.
   ВНИМАНИЕ: zarin.png е 288×288 — единствената налична снимка, не заснета за
   толкова голям показ. При ~360px показ това е ~1.25× overscale, леко меко,
   но не пикселизирано. По-висока резолюция ще стане нужна, ако снимката
   порасне още, или при нов човек в екипа. */
.about-team{position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0;background:var(--panel);border-top:1px solid var(--line)}
/* Фон зад "Екипът" — about-block-2.webp, същата логика като hero-снимката
   по-горе: ниска opacity (само текстура върху var(--panel), не пълна
   снимка), марковият син тон отгоре през .tint-overlay (форсиран винаги
   видим, виж правилото при .about-hero-bg по-горе), същият паралакс. Текстът
   и снимката на екипа седят в .wrap-narrow, вдигнат над фона с z-index. */
.about-team-bg{position:absolute;inset:0;z-index:0}
.about-team-bg [data-shift-layer] img{opacity:.4;filter:blur(6px);transform:scale(1.05)}
.about-team > .wrap{position:relative;z-index:1}
/* Собственикът: без сенки/петна тук, "Екипът" се вижда достатъчно и без тях
   — обикновен плътен текст върху тонираната снимка е достатъчен контраст,
   по-просто и по-сигурно от градиентни петна. var(--ink) вместо буквален
   бял цвят — той автоматично е тъмен в светла тема, светъл в тъмна (черно
   на светло, бяло на тъмно, точно каквото поиска собственикът), докато
   буквалният #fff беше нечетим в светла тема. */
.about-team h2{
  color:var(--ink);
  font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);text-align:center;margin:0 0 clamp(40px,6vw,64px);
}
.team-list{display:grid;gap:clamp(56px,8vw,96px)}
.team-member{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
}
.team-member:nth-child(even){direction:rtl}
.team-member:nth-child(even) > *{direction:ltr}
/* aspect-ratio:1/1, не фиксирана height — zarin.png самата е квадратна
   (288×288). С фиксирана height кутията излизаше по-широка от висока
   (landscape), а object-fit:cover режеше горе/долу — точно оплакването
   "кропната през челото". При квадратна кутия, съвпадаща със съотношението
   на самата снимка, cover показва снимката ЦЯЛА, без никакво отрязване —
   cover и contain стават едно и също, когато пропорциите съвпадат.
   border-radius вдигнат до 28px (по-заоблено, изрично поискано), не общия
   --radius (10px, твърде остро за толкова голям елемент). */
.team-photo{width:100%;aspect-ratio:1/1;height:auto;border-radius:28px;object-fit:cover;box-shadow:var(--shadow)}
/* Без петна/сенки (собственикът: "не искам никакви други тъпотии") — само
   плътен текст, по-едър от преди, директно върху тонираната снимка.
   var(--ink) навсякъде вместо буквален бял цвят — черно в светла тема,
   бяло в тъмна, автоматично (виж бележката при .about-team h2 по-горе). */
.team-name{color:var(--ink);font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,38px);margin:0}
.team-role{color:var(--ink);font-size:17px;font-weight:600;margin:8px 0 16px}
.team-bio{color:var(--ink);opacity:.82;font-size:17px;line-height:1.6;margin:0 0 20px;max-width:52ch}
.team-linkedin{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1.5px solid var(--ink);border-radius:50%;
  background:none;color:var(--ink);text-decoration:none;
}
.team-linkedin:hover{background:var(--ink);color:var(--panel)}
.team-linkedin svg{width:18px;height:18px;fill:currentColor}
@media(max-width:720px){
  .team-member,.team-member:nth-child(even){grid-template-columns:1fr;direction:ltr;text-align:center}
  .team-bio{margin-left:auto;margin-right:auto}
}
.site-footer .social a:hover{border-color:currentColor}

/* ==========================================================================
   8. ПРАВНИ СТРАНИЦИ (privacy.html, terms.html, cookies.html)
   Прост, четим лейаут — не hero със снимка/паралакс като другите страници,
   тук съдържанието е самият текст, не визия. Общо за трите: къс хедър с
   заглавие + дата на последна редакция, после проза в тесен четим стълб
   (.wrap-narrow), разделена на секции с h2.
   ========================================================================== */
.legal-hero{padding:clamp(56px,9vw,96px) 0 clamp(32px,5vw,48px);border-bottom:1px solid var(--line)}
.legal-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1.2;margin:10px 0 14px}
.legal-updated{color:var(--muted);font-size:14px}
.legal-body{padding:clamp(40px,6vw,64px) 0 clamp(80px,10vw,120px)}
/* Предупредителна плашка — не декорация, а функционална граница между
   "чернова, генерирана от AI помощник" и "правно обвързващ текст". Стои в
   началото на трите страници, вижда се без да се търси, изчезва само след
   изричен коментар/премахване от собственика, след преглед от юрист. Жълт
   тон нарочно, различен от марковото синьо — предупреждение, не бранд
   елемент. */
.legal-notice{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(230,162,60,.12);border:1.5px solid rgba(230,162,60,.5);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:clamp(40px,6vw,56px);
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.legal-notice strong{display:block;margin-bottom:4px;font-size:15px}
.legal-section{max-width:74ch;margin:0 auto clamp(40px,5vw,56px)}
.legal-section:last-child{margin-bottom:0}
.legal-section h2{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,24px);margin:0 0 14px}
.legal-section h3{font-family:var(--body);font-weight:600;font-size:16px;margin:20px 0 8px}
.legal-section p{margin:0 0 14px}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul,.legal-section ol{margin:0 0 14px;padding-left:22px}
.legal-section li{margin-bottom:8px}
.legal-section a{color:var(--blue);text-decoration:underline}
.legal-section strong{font-weight:600}
/* Плейсхолдър за факти, специфични за фирмата (ЕИК, адрес, компетентен съд
   и т.н.), които не мога да знам/измисля — видимо различни от готовия текст
   и в четения изглед, не само в HTML коментар, за да не могат да минат
   случайно необърнати в публикация. */
.legal-todo{background:rgba(217,68,68,.12);border:1px dashed rgba(217,68,68,.6);border-radius:6px;padding:1px 7px;color:#B03A3A;font-weight:600;white-space:normal}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .legal-todo{color:#FF9B9B}}
:root[data-theme="dark"] .legal-todo{color:#FF9B9B}
.legal-toc{list-style:none;display:grid;gap:8px;margin:0 0 clamp(40px,5vw,56px);padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.legal-toc a{font-size:14.5px}