/* Хърков Пласт · общото: цветове, шрифт, глава, подвал, бутони, ритъм на блоковете */
:root {
  --hartiya: #EFEDE7;
  --hartiya-2: #E6E3DC;
  --hartiya-3: #DCD8CF;
  --mastilo: #16191B;
  --mastilo-2: #4B5054;
  --mastilo-3: #767B7E;
  --liniya: rgba(22, 25, 27, 0.14);
  --liniya-2: rgba(22, 25, 27, 0.08);
  --grafit: #23272A;
  --stomana: #C9CED2;
  --seladon: #A6B091;
  --seladon-tamen: #66724A;
  --smola: #C99335;
  --oranzh: #E8691C;
  --oranzh-tekst: #A84A0E;
  --r: 10px;
  --shir: min(1380px, calc(100% - 2 * var(--pole)));
  --pole: clamp(16px, 4vw, 48px);
  --vazduh: clamp(96px, 13vw, 190px);
  --glava-v: 72px;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* бутоните: цветовете идват от фона (виж .na-tamno) */
  --b-boya: var(--mastilo);
  --b-tekst: var(--hartiya);
  --b-boya-h: #BC5216;
  --b-tekst-h: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--glava-v) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--hartiya); color: var(--mastilo);
  font: 400 17px/1.55 var(--sans); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; font-feature-settings: 'ss01' 0;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--oranzh); color: #fff; }
:focus-visible { outline: 2px solid var(--oranzh); outline-offset: 3px; border-radius: 4px; }

.wrap { width: var(--shir); margin-inline: auto; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.preskochi { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--mastilo); color: #fff; padding: 10px 14px; border-radius: 8px; }
.preskochi:focus { top: 12px; }

/* ---------- заглавия и текст ---------- */
.h-str { font-weight: 500; font-size: clamp(52px, 8.6vw, 140px); line-height: 0.95; letter-spacing: -0.045em; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 420px) { .h-str { font-size: clamp(38px, 11.2vw, 52px); } }
.h-blok { font-weight: 500; font-size: clamp(42px, 6.2vw, 96px); line-height: 1.0; letter-spacing: -0.04em; }
.h-sreden { font-weight: 500; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.izr { color: var(--mastilo-2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; max-width: 34ch; margin-top: 22px; }
.etiket { font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mastilo-3); }
.etiket b { color: var(--oranzh-tekst); font-weight: 500; }

/* ---------- бутони ---------- */
.btn {
  --b: var(--b-boya); --t: var(--b-tekst);
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px;
  border-radius: var(--r); border: 1.5px solid var(--b); background: var(--b); color: var(--t);
  font: 500 16px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .25s; }
.btn:hover { --b: var(--b-boya-h); --t: var(--b-tekst-h); }
.btn:hover svg { transform: translateX(3px); }
.btn-kontur { background: transparent; color: var(--b-boya); }
.btn-kontur:hover { background: var(--b-boya); color: var(--b-tekst); --b: var(--b-boya); }
.vrazka { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; border-bottom: 1.5px solid currentColor; padding: 11px 0 9px; min-height: 44px; }
.vrazka:hover { color: var(--oranzh-tekst); }
.na-tamno { --b-boya: var(--hartiya); --b-tekst: var(--mastilo); --b-boya-h: #BC5216; --b-tekst-h: #fff; }

/* ---------- главата ---------- */
.glava { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--glava-v); transition: background-color .3s, box-shadow .3s; }
.glava.skrol, body:not(.nachalo) .glava { background: var(--hartiya); box-shadow: 0 1px 0 var(--liniya); }
.glava-vatre { width: var(--shir); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; min-height: 44px; }
.logo-img { height: 56px; width: auto; display: block; } /* логото на клиента: банерът от стария сайт, 800×291 */
.meniu { display: flex; gap: 4px; margin-left: auto; }
.meniu a { position: relative; padding: 12px 14px; text-decoration: none; font-size: 15.5px; font-weight: 450; color: var(--mastilo-2); border-radius: 8px; transition: color .2s; }
.meniu a:hover, .meniu a[aria-current] { color: var(--mastilo); }
.meniu a[aria-current]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px; background: var(--oranzh); }
.glava-desno { display: flex; align-items: center; gap: 10px; }
.ezik { font: 500 13px/1 var(--mono); text-decoration: none; padding: 0 12px; min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--mastilo-2); }
.ezik:hover { color: var(--mastilo); background: var(--liniya-2); }
.glava-tel { font: 500 14px/1 var(--mono); text-decoration: none; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r); border: 1.5px solid var(--mastilo); transition: background .2s, color .2s; white-space: nowrap; }
.glava-tel:hover { background: var(--mastilo); color: var(--hartiya); }
.burger { display: none; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--mastilo); transition: transform .3s, top .3s; }
.burger span:first-child { top: 19px; } .burger span:last-child { top: 28px; }
.burger[aria-expanded="true"] span:first-child { top: 23.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 23.5px; transform: rotate(-45deg); }
.mob-meniu { position: fixed; inset: var(--glava-v) 0 0 0; background: var(--hartiya); padding: 24px var(--pole) 40px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.mob-meniu nav { display: flex; flex-direction: column; }
.mob-meniu nav a { font-size: clamp(32px, 9vw, 44px); font-weight: 500; letter-spacing: -0.035em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--liniya-2); }
.mob-meniu nav a[aria-current] { color: var(--oranzh-tekst); }
.mob-dolu { display: grid; gap: 6px; margin-top: 28px; }
.mob-dolu a { font: 500 17px/1.3 var(--mono); text-decoration: none; padding: 10px 0; display: flex; justify-content: space-between; gap: 12px; }
.mob-dolu a span { font-family: var(--sans); color: var(--mastilo-3); font-size: 15px; }
@media (max-width: 1080px) {
  .meniu { display: none; }
  .burger { display: inline-block; }
  .glava-desno { margin-left: auto; }
}
@media (max-width: 560px) {
  .glava-tel { display: none; }
  .logo-img { height: 46px; }
}
body.meniu-otvoreno { overflow: hidden; }

/* ---------- блоковете ---------- */
.sekc { padding: var(--vazduh) 0; }
.sekc-glava { display: grid; gap: 0; margin-bottom: clamp(48px, 6vw, 88px); }
.sekc-glava .etiket { margin-bottom: 26px; }
.str-glava { padding: calc(var(--glava-v) + clamp(56px, 9vw, 130px)) 0 clamp(48px, 6vw, 90px); }
.str-glava .izr { max-width: 38ch; }

/* появяване: само opacity и transform */
.js .poyava { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .poyava.vidimo { opacity: 1; transform: none; }
.js .poyava.z1 { transition-delay: .08s; } .js .poyava.z2 { transition-delay: .16s; } .js .poyava.z3 { transition-delay: .24s; }

/* ---------- подвалът ---------- */
.podval { background: var(--grafit); color: #E9E7E1; padding: clamp(72px, 9vw, 120px) 0 28px; --b-boya: var(--hartiya); --b-tekst: var(--mastilo); }
.podval a { text-decoration: none; }
.podval-vatre { width: var(--shir); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.podval-ime { display: grid; gap: 22px; align-content: start; }
.podval-ime .logo-img { height: auto; width: 236px; max-width: 100%; }
.podval-ime p { color: #A9ADAE; max-width: 26ch; }
.podval-ime b { display: block; color: #fff; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 6px; }
.podval-kol { display: grid; align-content: start; gap: 2px; }
.podval-kol h2 { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8F9496; margin-bottom: 14px; }
.podval-kol a { padding: 9px 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; color: #E9E7E1; }
.podval-kol a:hover { color: #fff; }
.podval-kol a span { font-size: 13.5px; color: #8F9496; }
.podval-kol a[href^="tel"] { font-family: var(--mono); font-size: 15.5px; }
.podval-dolu { width: var(--shir); margin: clamp(56px, 7vw, 96px) auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; font-size: 13.5px; color: #8F9496; }
.podval-dolu p:last-child { display: flex; gap: 22px; flex-wrap: wrap; }
.podval-dolu a { color: #C9CCCC; display: inline-block; padding: 12px 0; margin: -12px 0; }
.podval-dolu a:hover { color: #fff; }
@media (max-width: 900px) { .podval-vatre { grid-template-columns: 1fr 1fr; } .podval-ime { grid-column: 1 / -1; } }
@media (max-width: 520px) { .podval-vatre { grid-template-columns: 1fr; } }

/* ---------- клиенти: логата им, едноцветни; височината е по пропорцията (--h), за да тежат еднакво ---------- */
.klienti .h-blok { margin-bottom: clamp(40px, 5vw, 72px); }
/* тринайсет са: на редове, центрирани, за да не остане едно само в края */
.klienti-loga { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
.klienti-loga li { flex: 0 0 auto; width: calc(100% / 7); }
@media (max-width: 1099px) { .klienti-loga li { width: 20%; } }
@media (max-width: 760px) { .klienti-loga li { width: 25%; } }
.klienti-loga a { display: grid; place-items: center; height: clamp(84px, 8vw, 112px); padding: 12px 14px; text-decoration: none; border-radius: 12px; transition: background-color .25s; }
.klienti-loga a:hover { background: var(--hartiya-2); }
.klienti-loga img { height: calc(var(--h, 40px) * var(--k, 1)); width: auto; max-width: 100%; object-fit: contain; opacity: .82; transition: opacity .25s; }
.klienti-loga a:hover img { opacity: 1; }
.klienti-loga .bez-logo span { font-weight: 700; font-size: calc(30px * var(--k, 1)); letter-spacing: .02em; text-align: center; color: var(--mastilo); opacity: .82; }
@media (max-width: 560px) { .klienti-loga { --k: .82; } .klienti-loga li { width: 50%; } }

/* знакът */

@media (prefers-reduced-motion: reduce) {
  .js .poyava { opacity: 1; transform: none; transition: none; }
  .btn, .btn svg { transition: none; }
}

/* 404 */
.greshka-glava { min-height: 70vh; padding-bottom: var(--vazduh); }
.greshka-kod { font-size: 15px; color: var(--oranzh-tekst); margin-bottom: 18px; }
.greshka-vrazki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Трите езика (1.11.2026): двата други езика един до друг в главата */
.ezici { display: flex; gap: 0; }