/*!
 * site.css — NikolovStudio v2 · вариант A „Пулт“ (bento-board).
 * Дизайн системата „Liquid Crystal Caverns“ се запазва: пламък #00FF00 × въглен, кристални блокове
 * с изрязан ъгъл и нажежен ръб, Geologica + JetBrains Mono. Сменена е само структурата.
 */

/* ============ Токени ============ */
:root {
  /* фонът (bg-core.js чете точно тези пет) */
  --bg-base: #030C03;
  --bg-c1: #00FF00;
  --bg-c2: #03C400;
  --bg-c3: #092A0B;
  --bg-accent: #38FF3C;

  /* скалата на пламъка и въглена (от v1) */
  --flame: #00FF00;
  --ember-100: #E7FFE7; --ember-200: #D2FFD2; --ember-300: #AEFFAE; --ember-500: #38FF3C;
  --burn-600: #03E600; --burn-700: #03C400;
  --coal-600: #092A0B; --coal-700: #051805; --coal-800: #030C03; --coal-900: #010501;

  /* интерфейс */
  --c-text: #E7FFE7;
  --c-muted: rgb(210 255 210 / .82);
  --c-dim: rgb(174 255 174 / .66);
  --c-surface: #051805;
  --c-surface-2: #092A0B;
  --c-line: rgb(0 255 0 / .2);
  --c-line-2: rgb(0 255 0 / .38);
  --c-primary: #00FF00;
  --c-on-primary: #000;
  --c-accent: #38FF3C;
  --c-cream: #E0FFE7;     /* стикерът на героя и балоните */
  --c-ink: #0A1A0B;       /* контурът на героя */

  /* шрифтове */
  --font-display: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* един език на формите: изрязан ъгъл (--cut) + 3 радиуса за капсулите */
  --cut: 22px;
  --r-s: 8px; --r-m: 14px; --r-l: 22px;

  /* кристалният блок */
  --edge: linear-gradient(140deg, rgb(0 255 0 / .85) 0%, rgb(255 255 255 / .45) 26%, rgb(3 230 0 / .65) 54%, rgb(0 255 0 / .85) 100%);
  --edge-hot: linear-gradient(140deg, #00FF00 0%, #FFFFFF 22%, #03E600 52%, #00FF00 100%);
  --fill: linear-gradient(158deg, rgb(9 42 11 / .9) 0%, rgb(3 12 3 / .93) 52%, rgb(0 0 0 / .95) 100%);
  --fill-hot: linear-gradient(158deg, rgb(6 70 6 / .9) 0%, rgb(4 24 3 / .92) 55%, rgb(0 0 0 / .94) 100%);
  --gem-shadow: drop-shadow(0 16px 24px rgb(0 0 0 / .55));
  --gem-shadow-hi: drop-shadow(0 26px 38px rgb(0 0 0 / .7));

  --container: 1240px;
  --sec-y: clamp(3.5rem, 6.5vw, 6rem);

  /* живият фон: течният кристал е силен → воал за спокойствие зад текста */
  --bg-veil: .42;
  --grain: .05;
}

html { scroll-padding-top: 6rem; }
body { font-weight: 300; line-height: 1.6; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
::selection { background: var(--c-primary); color: #000; }
.g-brand2 { --g: rgb(0 255 0 / .35); }   /* въглен-плочките светят в пламък, не в черно */

/* ============ 3D ФОНЪТ: плюсове и лаптопи по краищата + оранжево сияние в средата (assets/js/bg3d.js) ============
   Един fixed слой зад всичко (обща повърхност — без шевове между секциите). Елементите са изрязани от
   референтната снимка (_source/bg3d/), движат се само с transform. Сиянието: цветовете на снимката. */
.bg3d {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -2; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse 46vw 46vh at 50% 58%, rgb(7 62 6) 0%, rgb(4 40 4) 38%, rgb(3 22 3) 70%, rgb(2 9 2 / 0) 100%), #020902;
}
.bg3d__el { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.bg3d.is-ready .bg3d__el { opacity: 1; }
.bg3d__el img { display: block; width: 100%; height: auto; animation: bg3d-float var(--fd, 10s) ease-in-out var(--fdl, 0s) infinite; }
@keyframes bg3d-float { 50% { transform: translateY(var(--fy, -10px)) rotate(var(--fr, 3deg)); } }
@media (prefers-reduced-motion: reduce) { .bg3d__el img { animation: none; } }
@media print { .bg3d { display: none; } }

/* ============ Кристални примитиви ============ */
.gem {
  position: relative; isolation: isolate;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: var(--edge);
  filter: var(--gem-shadow);
  transition: filter var(--t-med) var(--ease-out), translate var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
.gem::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
  background: var(--fill);
  /* без backdrop-filter: под полупрозрачен родител (появяване, карусел, процес) Chrome размазва
     собствения оранжев ръб на блока и картата става оранжева. Пълнежът е почти плътен и без него. */
}
/* отблясък, който минава по кристала при hover */
.gem::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgb(255 255 255 / .55) 44%, rgb(0 255 0 / .45) 50%, rgb(255 255 255 / .45) 56%, transparent 68%);
  transform: translateX(-130%); opacity: 0;
}
.gem--live:hover, .gem--live:focus-within { filter: var(--gem-shadow-hi); translate: 0 -4px; }
.gem--live:hover::after, .gem--live:focus-within::after { opacity: 1; transform: translateX(130%); transition: transform 1100ms var(--ease-out), opacity 0s; }
.gem--hot { background: var(--edge-hot); }
.gem--hot::before { background: var(--fill-hot); }
.gem--sm { --cut: 12px; }
.gem--lg { --cut: 32px; }
/* светлина, която следва мишката (main.js пише --mx/--my) */
[data-glow]::before { background-image: radial-gradient(24rem 18rem at var(--mx, 70%) var(--my, -10%), rgb(0 255 0 / .22), transparent 60%), var(--fill); }
.gem--hot[data-glow]::before { background-image: radial-gradient(24rem 18rem at var(--mx, 70%) var(--my, -10%), rgb(0 255 0 / .3), transparent 60%), var(--fill-hot); }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 500 .74rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent);
}
.kicker::before {
  content: ""; flex: none; width: .45rem; height: .45rem; rotate: 45deg;
  background: linear-gradient(140deg, var(--flame), var(--burn-700)); box-shadow: 0 0 10px rgb(0 255 0 / .6);
}
.kicker--dark { color: var(--ember-200); }

.h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; margin: .45rem 0 .9rem; max-width: 18ch; }
.h2 em, .hero__title em, h3 em, .case--you__title em { font-style: normal; color: var(--c-accent); }
/* SplitText маските са високи точно един ред и режат опашките на д, з, у, р, ф при плътен line-height —
   място отдолу без да мърда подредбата */
[data-anim^="split-"] > div { padding-bottom: .2em; margin-bottom: -.2em; }
.lead { font-size: var(--fs-lg); color: var(--c-muted); max-width: 54ch; line-height: 1.5; }

.sec { position: relative; padding-block: var(--sec-y); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head--flip { grid-template-columns: auto minmax(0, 1fr); }
.sec-head--flip .h2, .sec-head--flip .lead { margin-left: auto; }
.sec-head--flip > div:last-child { text-align: right; }
.sec-head--flip .kicker { flex-direction: row-reverse; }

/* ============ Бутони ============ */
.btn-call, .btn-viber { min-height: 52px; padding: 0 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
/* бутоните за обаждане: чисто бели с черен текст (от 2026-10-22 — зеленото на WhatsApp се сливаше със зеления бранд) */
:root { --c-call-a: #FFFFFF; --c-call: #FFFFFF; --c-call-2: #FFFFFF; --c-on-call: #010501; }
.btn-call { background: #FFFFFF; box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 12px 32px -12px rgb(255 255 255 / .45); }
.btn-call:hover, .btn-call:focus-visible { box-shadow: 0 0 0 5px rgb(255 255 255 / .16), 0 0 30px rgb(255 255 255 / .32), 0 16px 40px -12px rgb(255 255 255 / .5); }
.btn-sm { min-height: 44px; padding: 0 1.15rem; font-size: .95rem; }
.btn-lg { min-height: 60px; padding: 0 2rem; font-size: 1.12rem; }
.btn-flame {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 1.4rem; font-weight: 600; color: #000; text-decoration: none; border: 0; cursor: pointer;
  background: linear-gradient(140deg, #5CFF67 0%, var(--flame) 45%, var(--burn-600) 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  filter: drop-shadow(0 10px 22px rgb(0 255 0 / .45));
  transition: filter var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out), scale 120ms var(--ease-out);
}
.btn-flame .ui-ic { transition: translate var(--t-med) var(--spring); }
.btn-flame:hover, .btn-flame:focus-visible, a:hover > .btn-flame, a:focus-visible > .btn-flame { filter: drop-shadow(0 0 14px rgb(0 255 0 / .75)) drop-shadow(0 14px 26px rgb(0 255 0 / .55)); translate: 0 -2px; }
.btn-flame:hover .ui-ic, a:hover > .btn-flame .ui-ic { translate: 4px 0; }
.btn-flame:active { scale: .97; }
.btn-flame--lg { min-height: 58px; width: 100%; font-size: 1.08rem; }

.link-arrow, .link-ext { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; font-weight: 500; transition: color var(--t-fast), gap var(--t-med) var(--ease-out); }
.link-arrow { color: var(--c-accent); }
.link-ext { font: 500 .78rem/1 var(--font-mono); letter-spacing: .04em; color: var(--c-dim); }
.link-arrow:hover, .link-arrow:focus-visible { gap: .7em; color: #fff; }
.link-ext:hover, .link-ext:focus-visible { color: var(--c-accent); }
.link-arrow:active, .link-ext:active { opacity: .75; }

/* ============ Header: стъклена капсула ============ */
.site-header {
  position: fixed; top: 14px; left: 50%; z-index: 200; translate: -50% 0;
  width: min(100% - 24px, 1120px); height: 64px;
  display: flex; align-items: center; gap: 1rem; padding: 0 8px 0 14px;
  border-radius: 999px; border: 1px solid var(--c-line-2);
  background: rgb(3 12 3 / .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 44px -22px #000, inset 0 1px 0 rgb(255 255 255 / .06);
  transition: background var(--t-med), box-shadow var(--t-med);
}
.site-header.is-scrolled { background: rgb(2 8 2 / .86); box-shadow: 0 18px 44px -18px #000, 0 0 0 1px rgb(0 255 0 / .12), inset 0 1px 0 rgb(255 255 255 / .06); }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.logo img { width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgb(0 255 0 / .45)); transition: rotate var(--t-med) var(--spring); }
.logo:hover img, .logo:focus-visible img { rotate: -8deg; }
.logo__txt { font-size: 1.05rem; color: var(--c-dim); letter-spacing: -.01em; }
.logo__txt b { color: var(--c-text); font-weight: 700; }
.menu { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); margin-inline: auto; }
.menu__link { font-size: .95rem; font-weight: 400; color: var(--c-muted); text-decoration: none; padding-block: .3rem; transition: color var(--t-fast); }
.menu__link:hover, .menu__link:focus-visible, .menu__link[aria-current="true"] { color: var(--c-text); }
.menu__link[aria-current="true"] { background-size: 100% 1.5px; }
.menu__link:active { opacity: .7; }
.menu__call { display: none; }
.header__call { min-height: 46px; padding: 0 1.1rem; font-size: .95rem; flex: none; }
.menu-btn { display: none; width: 46px; height: 46px; place-content: center; gap: 7px; color: var(--c-text); border-radius: 50%; }
.menu-btn:hover, .menu-btn:focus-visible { background: rgb(0 255 0 / .14); }
.menu-btn span { display: block; width: 22px; height: 2px; background: currentColor; transition: translate .3s var(--ease-out), rotate .3s var(--ease-out); }
.menu-btn[aria-expanded="true"] span:first-child { translate: 0 4.5px; rotate: 45deg; }
.menu-btn[aria-expanded="true"] span:last-child { translate: 0 -4.5px; rotate: -45deg; }
.menu-lock, .menu-lock body { overflow: hidden; }

/* ============ HERO: табло ============ */
.hero { padding: 100px 0 clamp(2.5rem, 5vw, 4rem); min-height: 100svh; display: grid; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.tile { padding: clamp(1.4rem, 2.4vw, 2rem); }
.tile--main { padding: clamp(1.8rem, 3.6vw, 3.3rem); display: flex; flex-direction: column; justify-content: center; }
.hero__title { font-size: clamp(2.4rem, 1.1rem + 2.9vw, 4rem); line-height: 1.02; letter-spacing: -.03em; margin: 1rem 0 1.1rem; max-width: 15ch; }
.hero__lead { font-size: var(--fs-lg); color: var(--c-muted); max-width: 46ch; line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero__micro { margin-top: .8rem; font: 400 .78rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--c-dim); }
/* целите карти-линкове към телефона: бутонът вътре реагира, когато мишката е върху картата */
.work-cta:hover .btn-call, .work-cta:focus-visible .btn-call {
  translate: 0 -2px; box-shadow: 0 0 0 5px rgb(255 255 255 / .16), 0 0 30px rgb(255 255 255 / .32); }

/* ============ HERO: устройствата от първия сайт (глич + бавно плаване) ============ */
.hero-side { display: grid; justify-items: center; align-content: center; gap: .4rem; min-width: 0; }
.hero-art { position: relative; display: block; width: min(100%, 540px); padding-block: 14px; }
.hero-art::before { content: ""; position: absolute; inset: 12% 8% 6%; z-index: -1; background: radial-gradient(closest-side, rgb(0 255 0 / .4), transparent); filter: blur(12px); pointer-events: none; }
.hero-art .glitch { animation: px-devices 7s ease-in-out infinite; }
.glitch { --g-img: url(../img/hero-devices-800.webp?v=5); position: relative; isolation: isolate; }
.glitch img { display: block; width: 100%; height: auto; animation: g-base 4.6s steps(1) infinite; }
.glitch__l { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--g-img) center / 100% 100% no-repeat; }
.glitch__l--r { filter: hue-rotate(185deg) saturate(2.4) brightness(1.15); mix-blend-mode: screen; animation: g-rgb 4.6s steps(1) infinite; }
.glitch__l--c { filter: brightness(1.5) contrast(1.3); animation: g-slice 4.6s steps(1) infinite; }
.glitch__scan { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgb(0 0 0 / .32) 3px 4px);
  -webkit-mask: var(--g-img) center / 100% 100% no-repeat; mask: var(--g-img) center / 100% 100% no-repeat; }
@keyframes g-base {
  0%, 10%, 47%, 100% { transform: none; filter: none; }
  2% { transform: skewX(-3deg); filter: saturate(1.6); }
  5% { transform: skewX(1.5deg); }
  8% { transform: skewX(2deg); }
  44% { transform: skewX(-1.5deg); filter: brightness(1.15); }
}
@keyframes g-rgb {
  0%, 10%, 47%, 100% { opacity: 0; transform: none; }
  1%, 6% { opacity: .55; transform: translate(-5px, 1px); }
  3%, 8% { opacity: .55; transform: translate(5px, -1px); }
  43%, 45% { opacity: .5; transform: translate(4px, 0); }
}
@keyframes g-slice {
  0%, 10%, 47%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  1% { opacity: .95; clip-path: inset(16% 0 64% 0); transform: translateX(-12px); }
  3% { opacity: .95; clip-path: inset(52% 0 30% 0); transform: translateX(10px); }
  5% { opacity: .95; clip-path: inset(34% 0 52% 0); transform: translateX(-6px); }
  7% { opacity: .95; clip-path: inset(70% 0 14% 0); transform: translateX(14px); }
  9% { opacity: .9; clip-path: inset(8% 0 84% 0); transform: translateX(-8px); }
  43% { opacity: .9; clip-path: inset(44% 0 44% 0); transform: translateX(9px); }
  45% { opacity: .9; clip-path: inset(22% 0 70% 0); transform: translateX(-10px); }
}

/* ============ ВИДЕО: 34 сек. (9:16) в рамка на телефон ============
   Всичко е нарисувано (градиенти, box-shadow) — без filter, който живият фон би преизчислявал всеки кадър. */
.vid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.vid__text .lead { max-width: 46ch; }
.vid__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: .7rem 1.8rem; }
.vid__list li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--c-text); }
.vid__list .ui-ic { --ui-ic: 17px; color: var(--c-accent); }
.vid__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

.vid__phone { position: relative; z-index: 0; margin: 0; width: clamp(250px, 25vw, 340px); justify-self: center; }   /* в средата на колоната */
.vid__phone::before { content: ""; position: absolute; inset: -12% -34%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 255 0 / .34), rgb(0 255 0 / .09) 58%, transparent); }
.vid__frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: 2.5rem;
  background: linear-gradient(160deg, #173a19, #050b05 46%, #102411);
  box-shadow: 0 0 0 1px rgb(56 255 60 / .4), inset 0 0 0 1px rgb(255 255 255 / .07),
    0 44px 80px -34px rgb(0 0 0 / .95), 0 0 70px -12px rgb(0 255 0 / .4);
}
.vid__video, .vid__start { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 2rem; overflow: hidden; }
.vid__video { display: block; object-fit: cover; background: var(--bg-base); }
.vid__start { padding: 0; border: 0; cursor: pointer; background: var(--bg-base); color: inherit; transition: opacity .4s var(--ease-out), visibility .4s; }
.vid__start img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid__start::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(1 5 1 / .82), rgb(1 5 1 / 0) 46%); }
.vid__play {
  position: absolute; left: 50%; top: 70%; z-index: 1; translate: -50% -50%;
  display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; color: #031603;
  background: linear-gradient(140deg, #6BFF75, var(--flame));
  box-shadow: 0 0 0 8px rgb(0 255 0 / .2), 0 16px 36px -8px rgb(0 255 0 / .75);
  transition: scale var(--t-med) var(--spring);
}
.vid__play svg { width: 32px; height: 32px; margin-left: 5px; }
/* кръг, който „диша“ навън — само transform и opacity (видеокартата го прави без прерисуване) */
.vid__play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--flame); animation: vidPing 2.4s var(--ease-out) infinite; }
@keyframes vidPing { 0% { scale: 1; opacity: .75; } 75%, 100% { scale: 1.7; opacity: 0; } }
.vid__meta { position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 1; text-align: center; font: 500 .76rem/1 var(--font-mono); letter-spacing: .06em; color: var(--c-cream); }
.vid__start:hover .vid__play, .vid__start:focus-visible .vid__play { scale: 1.08; }
.vid__start:active .vid__play { scale: .95; }
.vid__start:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }
.vid__frame.is-playing .vid__start { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .vid__play::before { animation: none; opacity: 0; } }
@media (max-width: 767px) {
  .vid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; text-align: center; }   /* без justify-items: center — иначе текстът е широк колкото най-дългия си ред и излиза от екрана */
  .vid__text .h2, .vid__text .lead { margin-inline: auto; text-wrap: balance; }
  .vid__text .h2 > div { text-align: inherit !important; }                 /* SplitText */
  .vid__list { justify-content: center; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .6rem 1rem; text-align: left; }
  .vid__list li { align-items: flex-start; font-size: .84rem; line-height: 1.35; }
  .vid__cta, .vid__micro { display: none; }                                  /* лентата „Обади се“ / „Viber“ е винаги долу */
  .vid__phone { width: min(100%, 360px); justify-self: center; }
}

/* ============ СТРАНИЦИ НА УСЛУГИТЕ (uslugi.html + uslugi/*.html — генерира _source/build_services.py) ============ */
.sp-hero { padding: 128px 0 clamp(1.5rem, 3vw, 2.5rem); }
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 4vw, 4rem); }
.sp-title { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; margin: 1rem 0 1.1rem; max-width: 17ch; }
.sp-title em { font-style: normal; color: var(--c-accent); }
.sp-hero .lead { max-width: 58ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 0 0 .4rem; padding: 0; list-style: none; font: 400 .74rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--c-dim); }
.crumbs li { display: inline-flex; align-items: center; gap: .55rem; }
.crumbs li + li::before { content: ""; width: .32rem; height: .32rem; rotate: 45deg; background: var(--c-line-2); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--c-accent); }
.crumbs [aria-current] { color: var(--c-accent); }

.sp-h2 { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
/* „Какво включва“ и „Как протича“ — 3D карусели (същите като услугите на главната; main.js → makeCarousel на всеки [data-c3d]) */
.sp-c3d { overflow-x: clip; }
.c3d .carousel__stage { height: 22rem; }                 /* реалната височина я слага main.js — по най-високата карта */
ol.carousel__stage { list-style: none; margin: 0; padding: 0; }
.c3d__card {
  position: absolute; left: 50%; top: 50%; width: min(24rem, 80vw); --cut: 22px; margin: 0; padding: 1.8rem 1.7rem 1.9rem;
  display: grid; gap: .8rem; align-content: start;
  backface-visibility: hidden; will-change: transform, opacity;
  transition: transform 620ms var(--ease-out), opacity 520ms var(--ease-out);
  filter: none;   /* без drop-shadow/blur — живият фон кара видеокартата да ги смята всеки кадър */
}
.carousel__stage.is-dragging .c3d__card { transition: none; }
.c3d__card { --fill: linear-gradient(158deg, rgb(9 42 11) 0%, rgb(3 12 3) 52%, rgb(0 0 0) 100%); }   /* плътен пълнеж — картата отзад не прозира */
.c3d__card > * { transition: opacity 520ms var(--ease-out); }
.c3d__card:not(.is-active) { pointer-events: none; }
.c3d__card:not(.is-active) > * { opacity: .28; }          /* съседните: рамката остава, текстът почти изчезва — без шум */
.c3d__card h3 { font-size: var(--fs-xl); line-height: 1.15; margin: 0; }
.c3d__card p { font-size: var(--fs-base); color: var(--c-muted); line-height: 1.6; }
.c3d__num { font: 600 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
@media (min-width: 62rem) { .c3d__card { width: 26rem; padding: 2.3rem 2.2rem; } }

.sp-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.sp-article h2 { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.02em; margin: 2.4rem 0 .9rem; max-width: 22ch; }
.sp-article h2:first-child { margin-top: 0; }
.sp-article p { color: var(--c-muted); line-height: 1.7; max-width: 64ch; }
.sp-article p + p { margin-top: .9rem; }
.sp-article a { color: var(--c-accent); }
.sp-aside { position: sticky; top: 100px; display: grid; gap: 1.1rem; padding: 1.5rem 1.4rem 1.6rem; }
.sp-aside__h { font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.sp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.sp-chips li { padding: .45em .8em; font-size: .86rem; color: var(--c-text); border: 1px solid var(--c-line-2); background: rgb(0 255 0 / .07);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.sp-cases { display: grid; gap: .5rem; }
.sp-cases a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .9rem; text-decoration: none; color: var(--c-text);
  border: 1px solid var(--c-line); background: rgb(0 255 0 / .05); transition: border-color var(--t-med), background var(--t-med); }
.sp-cases a:hover, .sp-cases a:focus-visible { border-color: var(--flame); background: rgb(0 255 0 / .14); }
.sp-cases small { display: block; font-size: .78rem; color: var(--c-dim); }
.sp-cases .ui-ic { --ui-ic: 16px; color: var(--c-accent); }

.sp-faq { display: grid; gap: 12px; max-width: 920px; }
.sp-faq details { padding: 0; }
.sp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary .ui-ic { --ui-ic: 22px; flex: none; color: var(--c-accent); transition: rotate var(--t-med) var(--ease-out); }
.sp-faq details[open] summary .ui-ic { rotate: 45deg; }
.sp-faq summary:focus-visible { outline: 2px solid var(--flame); outline-offset: -2px; }
.sp-faq details p { padding: 0 1.4rem 1.3rem; color: var(--c-muted); line-height: 1.65; max-width: 70ch; }

.sp-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 14px; margin-top: 18px; }   /* 5 карти в един ред на десктоп */
.sp-rel a { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem; text-decoration: none; color: inherit; }
.sp-rel b { display: block; font-size: 1.02rem; }
.sp-rel small { display: block; font: 400 .7rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); }
.sp-rel .ui-ic { --ui-ic: 18px; margin-left: auto; color: var(--c-accent); transition: translate var(--t-med) var(--spring); }
.sp-rel a:hover .ui-ic, .sp-rel a:focus-visible .ui-ic { translate: 4px 0; }

/* страницата „Услуги“ */
.sp-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-hub__c { display: grid; align-content: start; gap: .75rem; padding: 1.6rem 1.5rem 1.5rem; text-decoration: none; color: inherit; }
.sp-hub__c .svc__meta { margin-top: .3rem; }
.sp-hub__c h2 { font-size: var(--fs-xl); line-height: 1.15; margin: 0; }
.sp-hub__c p { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.55; }
.sp-hub__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-weight: 600; color: var(--c-accent); }
.sp-hub__go .ui-ic { --ui-ic: 18px; transition: translate var(--t-med) var(--spring); }
.sp-hub__c:hover .sp-hub__go .ui-ic, .sp-hub__c:focus-visible .sp-hub__go .ui-ic { translate: 4px 0; }

@media (max-width: 1100px) {
  .sp-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-body { grid-template-columns: 1fr; }
  .sp-aside { position: static; }
}
/* ===== /mobile · телефони (до 767px) — страниците на услугите: hero центрирано ===== */
@media (max-width: 767px) {
  .sp-hero { padding-top: 104px; }
  .sp-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .sp-title, .sp-hero .lead { margin-inline: auto; text-wrap: balance; }
  .sp-title > div { text-align: inherit !important; }                     /* SplitText */
  .crumbs { justify-content: center; }
  .sp-hero .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .sp-hero .hero__cta > a { padding: 0 .6rem; font-size: .95rem; }
  .sp-hub { grid-template-columns: minmax(0, 1fr); }
  .c3d__card { text-align: center; justify-items: center; padding: 1.6rem 1.3rem 1.7rem; }
  .sp-article h2 { font-size: var(--fs-xl); }
  .sp-faq summary { font-size: 1.02rem; padding: 1rem 1.1rem; }
  .sp-faq details p { padding: 0 1.1rem 1.1rem; }
}

/* ============ КЕЙСОВЕ: картите от оригиналния сайт ============ */
.work { display: grid; gap: 18px; }
.work__card {
  --cut: 22px; display: block; text-decoration: none; color: inherit;
  --card-shadow: var(--gem-shadow);
}
.work__card:hover, .work__card:focus-within { --card-shadow: var(--gem-shadow-hi); }
/* оранжевото сияние по ръба. Преди беше безкрайна анимация на drop-shadow — clip-path на картата я отрязваше,
   виждаше се само през полупрозрачния ръб и пълнеж, а скролът на телефон падаше до ~10 fps (живият фон кара
   видеокартата да преизчислява filter-а всеки кадър). Сега същият оранжев слой е нарисуван под ръба — без filter. */
.work__card { background: var(--edge), rgb(0 255 0 / var(--card-glow, .3)); }
.work__card::before {
  background-image:
    radial-gradient(9rem 9rem at 0% 0%, rgb(0 255 0 / .26), transparent 66%),
    radial-gradient(9rem 9rem at 100% 100%, rgb(0 255 0 / .26), transparent 66%),
    radial-gradient(22rem 16rem at var(--mx, 50%) var(--my, -20%), rgb(0 255 0 / .2), transparent 58%),
    var(--fill);
}
.work__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background:
    linear-gradient(rgb(0 255 0 / .09) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(0 255 0 / .09) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(60% 55% at 32% 28%, rgb(0 255 0 / .3), transparent 70%),
    linear-gradient(160deg, var(--coal-700), var(--coal-900));
  border-bottom: 1px solid var(--c-line);
}
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.work__card:hover .work__media img { transform: scale(1.04); }
.work__body { padding: 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.work__body h3 { font-size: clamp(1.2rem, 1.1rem + .45vw, 1.5rem); margin: 0 0 .25rem; }
.work__body p { font-size: var(--fs-sm); color: var(--c-muted); }
.work__tag { display: inline-flex; align-items: center; gap: .3rem; font: 400 .7rem/1.3 var(--font-mono); color: var(--c-accent); white-space: nowrap; padding-top: .25rem; }
.work__tag .ui-ic { --ui-ic: 12px; }
.work__live {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .42rem; padding: .34em .7em;
  font: 400 .68rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgb(1 10 1 / .72); border: 1px solid rgb(0 255 0 / .5); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.work__live::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: #38E08B; box-shadow: 0 0 8px #38E08B; animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.work__card:hover .work__live { background: rgb(0 255 0 / .9); border-color: var(--flame); }
@media (min-width: 48rem) {
  .work { display: flex; flex-wrap: wrap; justify-content: center; }
  .work__card { flex: 0 1 calc(50% - 9px); }
}
@media (min-width: 62rem) {
  .work__card { flex: 0 1 calc((100% - 36px) / 3); }
}
.work-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 18px; padding: 1.3rem 1.6rem; text-decoration: none; color: inherit; --cut: 16px; }
.work-cta__t { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; flex: 1 1 22rem; }
.work-cta__t em { font-style: normal; color: var(--c-accent); }

/* ============ ПРЕВЮ НА ЖИВО (от оригиналния сайт) ============ */
.pv {
  position: fixed; inset: 0; z-index: 260; display: grid; grid-template-rows: auto 1fr auto;
  background: rgb(0 2 0 / .975); opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med) var(--ease-out);
}
.pv.is-open { opacity: 1; visibility: visible; }
html:has(body.pv-open) { overflow: hidden; }
.pv > * { min-width: 0; }
.pv__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .6rem clamp(.6rem, 2vw, 1.1rem); background: linear-gradient(180deg, var(--coal-800), #000); border-bottom: 1px solid rgb(0 255 0 / .28); }
.pv__dots { display: inline-flex; gap: .38rem; }
.pv__dots i { width: .6rem; height: .6rem; border-radius: 50%; background: rgb(231 255 231 / .22); }
.pv__dots i:first-child { background: var(--flame); }
.pv__url { justify-self: center; display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; overflow: hidden; padding: .34em .9em;
  font: 400 .74rem/1.3 var(--font-mono); color: var(--ember-100); background: rgb(231 255 231 / .06); border: 1px solid rgb(231 255 231 / .14); border-radius: 999px; text-decoration: none; white-space: nowrap; }
.pv__url:hover, .pv__url:focus-visible { color: #fff; border-color: rgb(0 255 0 / .5); }
.pv__url b { font-weight: 400; }
.pv__live { display: inline-flex; align-items: center; gap: .35rem; color: #38E08B; text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; }
.pv__live::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #38E08B; box-shadow: 0 0 8px #38E08B; animation: livePulse 2.2s ease-in-out infinite; }
.pv__tools { display: inline-flex; align-items: center; gap: .35rem; }
.pv__tool { width: 2.1rem; height: 2.1rem; border-radius: 6px; display: grid; place-items: center; border: 1px solid rgb(231 255 231 / .18); background: transparent; color: rgb(231 255 231 / .7);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.pv__tool svg { width: 1.05rem; height: 1.05rem; }
.pv__tool:hover { color: #fff; border-color: rgb(0 255 0 / .55); }
.pv__tool:active { scale: .95; }
.pv__tool[aria-pressed="true"] { background: linear-gradient(140deg, var(--flame), var(--burn-600)); border-color: transparent; color: #fff; }
.pv__close { margin-left: .3rem; }
.pv__stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: grid; place-items: center; padding: clamp(.5rem, 2vw, 1.4rem); }
.pv__frame { position: relative; width: 100%; height: 100%; background: var(--coal-800); border-radius: 8px; overflow: hidden; border: 0 solid #081208;
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / .95);
  transition: width var(--t-med) var(--ease-out), height var(--t-med) var(--ease-out), border-radius var(--t-med) var(--ease-out), border-width var(--t-med) var(--ease-out); }
.pv__frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pv[data-view="mobile"] .pv__frame { box-sizing: content-box; width: 390px; height: calc(100% - 20px); max-height: 840px; border-width: 10px; border-radius: 2.2rem;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 255 0 / .28); overflow: hidden; }
.pv__load { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--coal-800); color: var(--c-dim); font: 400 .76rem/1 var(--font-mono);
  transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med) var(--ease-out); }
.pv__frame.is-ready .pv__load { opacity: 0; visibility: hidden; }
.pv__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: rgb(1 10 1 / .8); color: #fff; border: 1px solid rgb(0 255 0 / .35); transition: background-color var(--t-med) var(--ease-out); }
.pv__nav .ui-ic { --ui-ic: 1.1rem; }
.pv__nav--prev { left: .35rem; } .pv__nav--next { right: .35rem; }
.pv__nav:hover { background: var(--flame); }
.pv__nav:active { scale: .95; }
.pv__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: .8rem clamp(.7rem, 2vw, 1.2rem);
  background: linear-gradient(0deg, #000, var(--coal-800)); border-top: 1px solid rgb(0 255 0 / .28); }
.pv__name { display: grid; gap: .1rem; min-width: 0; }
.pv__name b { font-size: var(--fs-base); font-weight: 600; color: #fff; }
.pv__name span { font-size: var(--fs-sm); color: var(--c-dim); }
.pv__actions { display: flex; align-items: center; gap: .6rem 1.1rem; flex-wrap: wrap; }
@media (max-width: 47.99rem) { .pv__tool[data-role="desktop"] { display: none; } }
@media (max-width: 40rem) {
  .pv__nav { width: 2.1rem; height: 2.1rem; }
  .pv__nav--prev { left: .1rem; } .pv__nav--next { right: .1rem; }
  .pv__foot { flex-direction: column; align-items: stretch; text-align: center; gap: .7rem; }
  .pv__name { justify-items: center; }
  .pv__actions { flex-direction: column; align-items: stretch; }
  .pv__actions .link-arrow { justify-content: center; }
  .pv__url { font-size: .68rem; padding: .3em .6em; }
  .pv__live { display: none; }
}

/* ============ УСЛУГИ: 3D карусел (от оригиналния сайт) ============ */
/* страничните карти излизат извън екрана — режем ги на ръба на секцията, иначе страницата става по-широка */
#uslugi { overflow-x: clip; }
html { overflow-x: clip; }
.carousel { position: relative; }
.carousel__stage { position: relative; perspective: 1600px; perspective-origin: 50% 46%; height: 34rem; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.carousel__stage:focus-visible { outline: 2px solid var(--flame); outline-offset: 6px; }
.carousel__stage.is-dragging { cursor: grabbing; }
.carousel__stage.is-dragging .svc-card { transition: none; }
.svc-card {
  position: absolute; left: 50%; top: 50%; width: min(27rem, 84vw); --cut: 26px; padding: 2rem;
  display: grid; gap: 1rem; align-content: start;
  backface-visibility: hidden; will-change: transform, opacity;
  transition: transform 620ms var(--ease-out), opacity 520ms var(--ease-out), filter 520ms var(--ease-out);
  filter: var(--gem-shadow) saturate(.85);
}
.svc-card.is-active { filter: var(--gem-shadow-hi) saturate(1); }
.svc-card:not(.is-active) { pointer-events: none; filter: var(--gem-shadow) saturate(.75) blur(1.4px); }
.svc-card:not(.is-active) .svc__cta { opacity: .5; }
.svc-card h3 { font-size: var(--fs-xl); margin: 0; }
.svc-card > p { font-size: var(--fs-base); color: var(--c-muted); }
.svc__head { display: flex; align-items: center; gap: 1rem; }
.svc__meta { display: block; margin-bottom: .3rem; font: 400 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-dim); }
.svc__spec { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.svc__spec li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: var(--fs-sm); color: var(--c-muted); padding-top: .65rem; border-top: 1px solid var(--c-line); }
.svc__spec li:first-child { border-top: 0; padding-top: 0; }
.svc__spec li::before { content: ""; width: .45rem; height: .45rem; margin-top: .5rem; transform: rotate(45deg); border-radius: 1px; background: linear-gradient(140deg, var(--flame), var(--burn-700)); box-shadow: 0 0 8px rgb(0 255 0 / .4); }
.svc__cta { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding-top: .5rem; font-size: var(--fs-sm); font-weight: 500; color: #4ADE80; text-decoration: none; transition: color var(--t-fast); }
.svc__cta .ui-ic { --ui-ic: 1rem; }
.svc__cta:hover { color: #86EFAC; }
/* картата води към страницата на услугата (обаждането е в лентата и в hero-то) */
.svc__cta--page { color: var(--c-accent); font-weight: 600; }
.svc__cta--page:hover, .svc__cta--page:focus-visible { color: #fff; }
.svc__cta--page .ui-ic { transition: translate var(--t-med) var(--spring); }
.svc__cta--page:hover .ui-ic, .svc__cta--page:focus-visible .ui-ic { translate: 4px 0; }
.svc__cta:active { opacity: .75; }
.svc__cta:focus-visible { outline: 3px solid #16A34A; outline-offset: 4px; }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.carousel__arrow { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--c-accent); background: rgb(0 255 0 / .1); border: 1px solid var(--c-line-2);
  box-shadow: inset 0 1px 0 rgb(0 255 0 / .28), 0 1px 2px rgb(0 0 0 / .5);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.carousel__arrow .ui-ic { --ui-ic: 1.15rem; }
.carousel__arrow:hover { background: rgb(0 255 0 / .22); border-color: var(--flame); color: #fff; transform: translateY(-2px); }
.carousel__arrow:active { transform: translateY(0); }
.carousel__arrow:focus-visible { outline: 3px solid var(--burn-600); outline-offset: 3px; }
.carousel__dots { display: flex; align-items: center; gap: .5rem; }
.carousel__dot { position: relative; width: .55rem; height: .55rem; border-radius: 1px; transform: rotate(45deg); background: rgb(174 255 174 / .28);
  transition: background var(--t-med) var(--ease-out), box-shadow var(--t-med), transform var(--t-med) var(--ease-out); }
.carousel__dot::after { content: ""; position: absolute; inset: -.25rem; }   /* по-малка зона — по-голямата застъпваше съседната точка (завъртяна на 45°) и кликът избираше следващата */
.carousel__dot:hover { background: rgb(0 255 0 / .5); }
.carousel__dot:focus-visible { outline: 3px solid var(--burn-600); outline-offset: 4px; }
.carousel__dot[aria-current="true"] { background: linear-gradient(140deg, var(--flame), var(--burn-700)); box-shadow: 0 0 12px rgb(0 255 0 / .4); transform: rotate(45deg) scale(1.35); }
.carousel__hint { display: block; text-align: center; margin-top: 1rem; font: 400 .7rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); }
@media (min-width: 62rem) { .svc-card { padding: 3rem; } }

/* ============ Лента на браузър (рамката на скрийншотите в страниците-кейсове) ============ */
.browser__bar { display: flex; align-items: center; gap: 7px; padding: .8rem 1rem .8rem 2.3rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.browser__url { display: inline-flex; align-items: center; gap: .4rem; margin-left: .8rem; padding: .35rem .8rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 .78rem/1.2 var(--font-mono); color: var(--c-dim); background: rgb(0 0 0 / .45); border-radius: 999px; flex: 1; }
.browser__url .ui-ic { --ui-ic: 13px; color: #4ADE80; }
.browser__url b { color: var(--c-text); font-weight: 500; }
.browser__url span { overflow: hidden; text-overflow: ellipsis; }

/* ============ ПРОЦЕС: воден от скрола (main.js пише --prog и --k) ============ */
.steps { --prog: 0; position: relative; list-style: none; margin: 0; padding: 3.3rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.steps::before, .steps::after { content: ""; position: absolute; left: 1.1rem; right: 0; top: 1.05rem; height: 2px; pointer-events: none; }
.steps::before { background: rgb(0 255 0 / .16); }
.steps::after { background: linear-gradient(90deg, var(--burn-700), var(--flame), #89FF8B); box-shadow: 0 0 14px rgb(0 255 0 / .8); transform-origin: left center; transform: scaleX(var(--prog)); }
.step { --k: 0; position: relative; }
.step__node { position: absolute; top: -3.3rem; left: 0; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; rotate: 45deg;
  background: var(--coal-700); border: 1px solid var(--c-line-2); transition: background .35s var(--ease-out), box-shadow .35s, border-color .35s; }
.step__node span { rotate: -45deg; font: 500 .72rem/1 var(--font-mono); color: var(--c-accent); transition: color .35s; }
.step.is-hot .step__node { background: linear-gradient(140deg, #5CFF67, var(--flame)); border-color: #89FF8B; box-shadow: 0 0 22px rgb(0 255 0 / .7); }
.step.is-hot .step__node span { color: #000; }
.step__card { --cut: 18px; height: 100%; padding: 1.4rem 1.4rem 1.5rem; display: grid; gap: .45rem; align-content: start;
  opacity: calc(.28 + .72 * var(--k)); transform: translateY(calc((1 - var(--k)) * 22px)); }
.step__card p { color: var(--c-muted); font-size: .95rem; line-height: 1.5; }
.step__card .step__phase { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.step__title { font-size: var(--fs-xl); }
.step__card .step__out { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; padding: .35rem .6rem .35rem .35rem; justify-self: start;
  font: 400 .74rem/1.2 var(--font-mono); color: var(--ember-300); background: rgb(0 0 0 / .35); border: 1px solid var(--c-line); }
/* Процес на десктоп (над 1100px): картите се виждат изцяло през цялото време — без скриване до скрола
   (полупрозрачните карти изглеждаха като празно място). Скролът води само светлината: линията стига
   номера → картата светва отгоре (топъл ореол + светеща лента по горния ръб) и леко се повдига. Нагоре се прибира.
   Само opacity и transform — видеокартата ги прави без прерисуване. */
@media (min-width: 1101px) {
  .step__card { opacity: 1; transform: translateY(calc(var(--k) * -8px)); transition: transform .45s var(--ease-out); }
  .step__card::after {
    inset: 0; z-index: 0; transform: none; transition: none; opacity: var(--k);
    background:
      linear-gradient(90deg, transparent 6%, #89FF8B 30%, var(--flame) 50%, #89FF8B 70%, transparent 94%) top / 100% 2px no-repeat,
      radial-gradient(120% 70% at 50% 0%, rgb(0 255 0 / .26), rgb(0 255 0 / .08) 45%, transparent 75%);
  }
  .step__card > * { position: relative; z-index: 1; }
  .step.is-hot .step__title { color: #fff; }
}

/* ============ ЗА МЕН ============ */
.about { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.about__photo { position: relative; margin: 0; }
.about__frame { position: relative; padding: 10px; }
.about__frame .media { clip-path: polygon(calc(var(--cut) - 8px) 0, 100% 0, 100% calc(100% - var(--cut) + 8px), calc(100% - var(--cut) + 8px) 100%, 0 100%, 0 calc(var(--cut) - 8px)); }
.about__cap { margin-top: 1rem; display: grid; justify-items: start; gap: 1rem; }
.about__text p + p { margin-top: 1rem; }
.about__text > p:not(.kicker):not(.lead) { color: var(--c-muted); max-width: 56ch; }

/* ============ ВЪПРОСИ: чат ============ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.faq__card { margin-top: 2rem; padding: 1.4rem; display: flex; gap: 1rem; align-items: flex-start; }
.faq__card-t { font-weight: 700; font-size: 1.15rem; }
.faq__card p:not(.faq__card-t) { color: var(--c-muted); font-size: .95rem; margin: .3rem 0 1rem; }
.chat { display: flex; flex-direction: column; padding: 0; min-height: 560px; }
.chat__head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem .9rem 2.2rem; border-bottom: 1px solid var(--c-line); }
.chat__head b { display: block; font-size: 1rem; }
.chat__head small { display: inline-flex; align-items: center; gap: .45rem; font: 400 .72rem/1 var(--font-mono); color: var(--c-dim); }
.chat__ava { flex: none; width: 46px; height: 46px; overflow: hidden; border: 2px solid var(--c-ink); background: var(--c-cream); box-shadow: 3px 3px 0 var(--c-primary); }
.chat__ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.3rem 1.3rem .6rem; max-height: 440px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-line-2) transparent; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: .7rem .95rem; font-size: .95rem; line-height: 1.5; }
.msg--bot { align-self: flex-start; color: var(--c-ink); background: var(--c-cream); border: 2px solid var(--c-ink); box-shadow: 3px 3px 0 var(--c-primary); font-family: var(--font-mono); font-size: .86rem; }
.msg--me { align-self: flex-end; color: #000; font-weight: 500; background: linear-gradient(140deg, #5CFF67, var(--flame)); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.msg--typing { display: inline-flex; gap: 5px; padding: .8rem 1rem; }
.msg--typing i { width: 7px; height: 7px; background: var(--c-ink); animation: u-dot 1s steps(2) infinite; }
.msg--typing i:nth-child(2) { animation-delay: .2s; } .msg--typing i:nth-child(3) { animation-delay: .4s; }
@keyframes u-dot { 50% { opacity: .2; } }
.chat__qs { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem 1.3rem 1.4rem; border-top: 1px solid var(--c-line); }
.qchip {
  padding: .5rem .8rem; font-size: .86rem; text-align: left; color: var(--c-muted); background: rgb(0 0 0 / .35); border: 1px solid var(--c-line-2);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.qchip:hover, .qchip:focus-visible { color: #fff; border-color: var(--flame); background: rgb(0 255 0 / .18); }
.qchip:active { scale: .97; }
.qchip.is-asked { opacity: .45; }
.faq-src { display: none; }
.no-js .faq-src, html:not(.js) .faq-src { display: grid; gap: .4rem; padding: 1.3rem; }
html:not(.js) .faq-src dt { font-weight: 600; margin-top: .8rem; }
html:not(.js) .faq-src dd { margin: 0; color: var(--c-muted); }

/* ============ ФИНАЛЕН ПАНЕЛ ============ */
.final { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding: clamp(2rem, 5vw, 4.2rem); overflow: hidden; }
.final__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(0 255 0 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(0 255 0 / .09) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000, transparent); mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000, transparent); }
.final__glow { position: absolute; left: 10%; top: 10%; width: 60%; aspect-ratio: 1.6; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(0 255 0 / .35), transparent); }
.final__title { max-width: 16ch; }
.final__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.contacts { list-style: none; padding: 0; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; }
.contacts li { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-muted); font-size: .95rem; }
.contacts a { color: var(--c-text); text-decoration: none; }
/* финалният панел на главната: всичко на една ос в средата, на всички размери */
#kontakt .final { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
#kontakt .final__body { display: flex; flex-direction: column; align-items: center; }
#kontakt .final__title, #kontakt .final__body .lead { margin-inline: auto; text-wrap: balance; }
#kontakt .final__title > div { text-align: inherit !important; }               /* SplitText пише inline text-align */
#kontakt .final__cta, #kontakt .contacts { justify-content: center; }
#kontakt .kicker--sym { justify-content: center; padding-inline-start: .16em; } /* ромб и от двете страни (оптичен баланс) */
#kontakt .kicker--sym::after {
  content: ""; flex: none; width: .45rem; height: .45rem; rotate: 45deg;
  background: linear-gradient(140deg, var(--flame), var(--burn-700)); box-shadow: 0 0 10px rgb(0 255 0 / .6); }
#kontakt .final__glow { left: 20%; }                                          /* сиянието и решетката — също в средата */
#kontakt .final__grid { -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent); }

/* ============ FOOTER ============ */
.site-footer { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, rgb(1 5 1 / .75) 40%); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer__brand p { margin-top: 1rem; color: var(--c-muted); font-size: .95rem; max-width: 36ch; }
.footer__col { display: grid; align-content: start; gap: .6rem; font-size: .95rem; color: var(--c-muted); }
.footer__col a { color: var(--c-muted); text-decoration: none; justify-self: start; transition: color var(--t-fast); }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--c-text); }
.footer__h { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .3rem; }
.footer__tel { color: #4ADE80 !important; } .footer__viber { color: #B5A8FF !important; }
.wordmark {
  margin: clamp(2rem, 5vw, 3.5rem) 0 1rem; font-size: clamp(3rem, 12.4vw, 11.5rem); font-weight: 700; line-height: .82; letter-spacing: -.055em; text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgb(0 255 0 / .45);
  background: linear-gradient(180deg, rgb(0 255 0 / .28), transparent 75%); -webkit-background-clip: text; background-clip: text;
  user-select: none;
}
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); font: 400 .74rem/1.4 var(--font-mono); color: var(--c-dim); }
.footer__bottom a { color: var(--c-muted); text-decoration: none; }

/* Чатът в „Въпроси“ (#vaprosi): на iPhone (Safari) скролът с пръст в .chat__log не работеше —
   filter: drop-shadow + clip-path на прекия родител карат WebKit да „сплеска“ блока в една картинка
   и вътрешният скрол губи своя слой. Сянката и без това не се вижда (clip-path я отрязва), затова
   родителят остава без filter/clip-path, а формата на кристала (ръб + пълнеж) се рисува от ::after и ::before. */
.chat.gem { filter: none; clip-path: none; background: none; }
/* Чатът в страницата (#vaprosi): стигне ли края си, скролът продължава към страницата — иначе пръст,
   попаднал на пълния чат, „заковава“ сайта.
   ID-то бие .lenis [data-lenis-prevent] { overscroll-behavior: contain } от lenis.css. */
#vaprosi .chat__log { overscroll-behavior-y: auto; }
/* На тъч устройства чатът в „Въпроси“ е без вложен скрол — расте с всеки въпрос като част от страницата.
   Вложеният скрол „закачаше“ пръста: стигне ли чатът края си, браузърът не пуска жеста към страницата
   (дробната височина от rem-овете) и сайтът спираше да се скролва. Новият отговор main.js го показва сам. */
@media (pointer: coarse) {
  #vaprosi .chat__log { max-height: none; overflow: visible; }
}
.chat.gem::after {
  inset: 0; z-index: -2; opacity: 1; transform: none; transition: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: var(--edge);
}
.to-top { background: linear-gradient(140deg, #5CFF67, var(--flame)); color: #000; }

/* ============ Таблет (≤ 1100px) ============ */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* процесът: вертикален гръбнак вляво, картите вдясно — нищо не се застъпва */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 0 3.4rem; }
  .steps::before, .steps::after { left: 1.05rem; right: auto; top: .6rem; bottom: .6rem; width: 2px; height: auto; }
  .steps::after { background: linear-gradient(180deg, var(--burn-700), var(--flame), #89FF8B); transform-origin: center top; transform: scaleY(var(--prog)); }
  .step__node { top: 1.15rem; left: -3.4rem; }
  .step__card { transform: translateX(calc((1 - var(--k)) * 18px)); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ============ Мобилна навигация (≤ 900px) ============ */
@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .header__call { margin-left: auto; }
  .menu {
    position: fixed; inset: 0; z-index: -1; margin: 0; display: grid; place-content: center; justify-items: center; gap: 1.3rem;
    background: rgb(2 8 2 / .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .menu.is-open { opacity: 1; visibility: visible; }
  .site-header.menu-open { background: transparent; box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu__link { font-size: var(--fs-2xl); font-weight: 700; color: var(--c-text); }
  .menu__call { display: inline-flex; margin-top: 1rem; }
}

/* ============ Мобилни (≤ 767px) ============ */
@media (max-width: 767px) {
  :root { --cut: 16px; }
  .site-header { top: 10px; height: 58px; }
  .header__call span { display: none; }
  .header__call { width: 46px; padding: 0; }

  /* hero: трите плочки отпадат → устройствата с глич */
  .hero { padding-top: 84px; min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tile--main { padding: 1.5rem 1.25rem 1.4rem; }
  .hero__title { font-size: clamp(2rem, .9rem + 6.2vw, 2.7rem); margin: .8rem 0 .9rem; }
  .hero__lead { font-size: 1rem; }
  .hero__cta { margin-top: 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .hero__cta > a { padding: 0 .6rem; font-size: .95rem; }

  .sec-head, .sec-head--flip { grid-template-columns: 1fr; }
  .sec-head--flip > div:last-child { text-align: left; order: -1; }
  .sec-head--flip .h2, .sec-head--flip .lead { margin-left: 0; }
  .sec-head--flip .kicker { flex-direction: row; }

  /* кейсовете: както на оригиналния сайт — 2 колони, първата и последната широки, текстът върху снимката */
  .work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .work__card { --cut: 14px; position: relative; }
  .work__card:first-child { grid-column: 1 / -1; }
  .work__card:last-child:nth-child(even) { grid-column: 1 / -1; }
  .work__media { aspect-ratio: 1 / 1; border-bottom: 0; }
  .work__card:first-child .work__media, .work__card:last-child:nth-child(even) .work__media { aspect-ratio: 16 / 10; }
  .work__media img { object-position: 0% 0%; }
  .work__card:first-child .work__media img, .work__card:last-child:nth-child(even) .work__media img { object-position: 50% 0%; }
  .work__body { position: absolute; inset: auto 0 0 0; z-index: 2; flex-direction: column; align-items: flex-start; text-align: left; gap: 0;
    padding: 2rem .7rem .62rem; background: linear-gradient(to top, rgb(0 2 0 / .94) 26%, rgb(0 2 0 / .66) 58%, transparent); }
  .work__body h3 { font-size: var(--fs-sm); margin: 0; line-height: 1.2; }
  .work__body p { font-size: .66rem; color: var(--c-muted); line-height: 1.35; }
  .work__tag { display: none; }
  .work__live { top: .5rem; bottom: auto; left: .5rem; font-size: .56rem; padding: .26em .6em; gap: .34rem; }
  .work__card:not(:first-child) .work__live { display: none; }
  .work-cta { padding: 1.1rem 1.2rem; }
  .work-cta__t { font-size: 1rem; flex-basis: 100%; }

  /* услугите: центрирани карти като в оригинала */
  .svc-card { text-align: center; padding: 1.6rem 1.3rem; }
  .svc__head { flex-direction: column; align-items: center; }
  .svc-card > p { margin-inline: auto; }
  .svc__spec li { display: flex; justify-content: center; text-align: center; }
  .svc__spec li::before { flex: none; margin-top: .45rem; }
  .svc__cta { justify-self: center; min-height: 2.75rem; }


  .about { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .chat { min-height: 0; }
  .chat__log { max-height: 380px; }
  .final { grid-template-columns: 1fr; }
  .final__cta { display: grid; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid > .footer__col:last-child { grid-column: 1 / -1; }   /* „Контакт“ на цял ред — дългият имейл разпъваше колоната извън екрана на 320px */
}


/* ============ По-малко движение ============ */
@media (prefers-reduced-motion: reduce) {
  .glitch img, .glitch__l { animation: none !important; }
  .gem--live:hover, .gem--live:focus-within { translate: none; }
  .svc-card, .pv, .pv__frame, .pv__load, .work__live { transition: none; }
  .step__card { opacity: 1; transform: none; }
}

/* ============ СТРАНИЦИ-КЕЙСОВЕ (proekti/*.html) ============ */
.site-header--cs { justify-content: space-between; }
.cs-back { margin-right: auto; margin-left: 1rem; font-size: .95rem; }
.cs-back .ui-ic { --ui-ic: 18px; }
.cs-hero { padding: 120px 0 clamp(2rem, 4vw, 3rem); }
.cs-title { font-size: clamp(3rem, 1.4rem + 7vw, 7.5rem); line-height: .92; letter-spacing: -.045em; margin: .6rem 0 1.2rem; }
.cs-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.cs-shots { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .28fr); gap: 18px; align-items: end; margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.cs-desk { padding: 0 0 10px; }
.cs-desk .media { margin: 0 10px; }
.cs-desk .media img, .cs-phone .media img, .cs-extra .media img { object-position: 50% 0; }
.cs-phone { padding: 8px; --cut: 16px; margin-bottom: -2.5rem; }
.cs-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.cs-facts { padding: 1.4rem 1.5rem; position: sticky; top: 100px; }
.cs-facts dl { display: grid; gap: 1rem; margin: 0; }
.cs-facts dt { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.cs-facts dd { margin: .2rem 0 0; font-size: 1.05rem; }
.cs-sw { display: flex; gap: 6px; }
.cs-sw i { width: 34px; height: 34px; border: 1px solid rgb(255 255 255 / .2); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.cs-sig { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; margin-top: .5rem; }
.cs-sig p { color: var(--c-muted); }
.cs-sig b { color: var(--c-text); }
.cs-extra { margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 10px 10px 1rem; width: min(100% - 2 * var(--gutter), 980px); }
.cs-extra figcaption { margin: 1rem .5rem 0; }
.final--cs { display: block; text-decoration: none; color: inherit; }
.final--cs .final__body { display: grid; justify-items: start; gap: .6rem; }
.final--cs .btn-call { margin-top: .8rem; }
.final--cs:hover .btn-call, .final--cs:focus-visible .btn-call { translate: 0 -2px; box-shadow: 0 0 0 5px rgb(255 255 255 / .16), 0 0 30px rgb(255 255 255 / .32); }
.cs-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.cs-nav__a { display: grid; gap: .2rem; padding: 1.1rem 1.4rem; text-decoration: none; color: inherit; }
.cs-nav__a small { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.cs-nav__a b { font-size: var(--fs-xl); }
.cs-nav__a--next { text-align: right; }
.site-footer--cs { padding: 1rem 0 2rem; }
@media (max-width: 767px) {
  .cs-back { font-size: .85rem; margin-left: .4rem; }
  .cs-hero { padding-top: 96px; }
  .cs-shots { grid-template-columns: 1fr; }
  .cs-phone { display: none; }
  .cs-body { grid-template-columns: 1fr; }
  .cs-facts { position: static; }
  .cs-nav { grid-template-columns: 1fr; }
}


/* ===== /mobile · телефони легнало + таблети (до 1024px) — четим текст и цели за пръст ≥ 44px ===== */
@media (max-width: 1024px) {
  /* етикетите (кикери, моно надписи) бяха 11–12px → поне 12.5px */
  .kicker { font-size: .8rem; }
  .svc__meta, .carousel__hint, .footer__h, .chat__head small { font-size: .78rem; }
  .step__card .step__phase { font-size: .78rem; }
  .step__card .step__out { font-size: .8rem; }
  .work__live { font-size: .76rem; }
  .footer__bottom { font-size: .8rem; }
  /* цели за пръст: поне 44px височина */
  .logo, .menu__link, .svc__cta, .cs-back { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-btn { flex: none; width: 46px; }
  .footer__col a, .contacts a, .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__col { gap: 0; }
  /* ромбчетата на карусела: бутонът е 28px, ромбът се рисува вътре */
  .carousel__dots { gap: .1rem; }
  .carousel__dot, .carousel__dot:hover, .carousel__dot[aria-current="true"] { width: 28px; height: 28px; background: none; box-shadow: none; transform: none; display: grid; place-items: center; }
  .carousel__dot::after { content: none; }
  .carousel__dot::before { content: ""; width: .55rem; height: .55rem; border-radius: 1px; rotate: 45deg; background: rgb(174 255 174 / .28); transition: background var(--t-med), box-shadow var(--t-med), scale var(--t-med); }
  .carousel__dot:hover::before { background: rgb(0 255 0 / .5); }
  .carousel__dot[aria-current="true"]::before { background: linear-gradient(140deg, var(--flame), var(--burn-700)); box-shadow: 0 0 12px rgb(0 255 0 / .4); scale: 1.35; }
  /* процесът по вертикалния гръбнак: картите се плъзгат отдолу, не отстрани (иначе излизат 2px извън екрана) */
  .step__card { transform: translateY(calc((1 - var(--k)) * 16px)); }
  .work__tag { font-size: .78rem; }
  .svc__spec li { font-size: 1rem; }
  .footer__viber { min-width: 44px; }
}

/* ===== /mobile · телефони (до 767px) — симетрично центриране: hero (#top), #kontakt, заглавието на поверителност ===== */
@media (max-width: 767px) {
  /* hero: всичко на една ос в средата */
  .tile--main { text-align: center; align-items: center; }
  .hero__title, .hero__micro { margin-inline: auto; text-wrap: balance; }
  .hero__title > div { text-align: inherit !important; }               /* SplitText пише inline text-align */
  .hero__lead { margin-inline: auto; max-width: 34ch; text-align: left; } /* 143 знака → вляво, в центриран блок */
  .hero__cta { display: flex; flex-direction: column; align-items: center; gap: .65rem; width: 100%; }
  .hero__cta > a { flex: none; width: min(100%, 360px); }
  .hero-art { margin: .2rem 0 0; }

  /* устройствата от първия сайт: безкрайно бавно плаване нагоре-надолу.
     padding-block пази място за амплитудата — снимката не стига до съседните елементи */
  .hero-art { padding-block: 12px; }
  .hero-art .glitch { animation: px-devices 7s ease-in-out infinite; }

  /* кикерите в центрираните блокове (.kicker--sym): ромб и от двете страни (оптичен баланс) + компенсация за разредката */
  .kicker--sym { flex-direction: row; justify-content: center; padding-inline-start: .16em; }
  .kicker--sym::after {
    content: ""; flex: none; width: .45rem; height: .45rem; rotate: 45deg;
    background: linear-gradient(140deg, var(--flame), var(--burn-700)); box-shadow: 0 0 10px rgb(0 255 0 / .6); }

  /* финалният панел (центрирането за всички размери е горе, при „ФИНАЛЕН ПАНЕЛ“): бутоните един под друг */
  #kontakt .final__cta { display: flex; flex-direction: column; align-items: center; gap: .65rem; width: 100%; }
  #kontakt .final__cta > a { flex: none; width: min(100%, 360px); padding-inline: 1rem; }
  #kontakt .contacts { flex-direction: column; align-items: center; gap: .2rem; }
  #kontakt .contacts li { justify-content: center; text-align: center; }

  /* поверителност: само заглавието (правният текст остава подравнен вляво) */
  .legal__head { text-align: center; }
  .legal__head .h2 { margin-inline: auto; font-size: clamp(1.8rem, 1.1rem + 4vw, 2.3rem); text-wrap: balance; }
  .legal__head .h2 > div { text-align: inherit !important; }
  .legal a { white-space: nowrap; }                                    /* имейлът и телефонът не се чупят на два реда */

  /* четим текст */
  .work__body p { font-size: .75rem; }
  .work__live { font-size: .75rem; }
  .svc__spec li { font-size: 1rem; }
  .wordmark { font-size: 11.2vw; }
  .btn-lg { padding-inline: 1.2rem; }
}

/* ===== /mobile · малки телефони (до 374px) — заглавието и „Обади се“ в първия екран ===== */
@media (max-width: 374px) {
  .hero { padding-top: 76px; }
  .tile--main { padding: 1.15rem 1rem 1.2rem; }
  .hero__title { font-size: 1.8rem; margin: .6rem 0 .7rem; }
  .hero__lead { font-size: .95rem; line-height: 1.45; }
  .hero__cta { margin-top: 1rem; }
}

@keyframes px-devices { 0%, 100% { transform: translateY(9px); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-art .glitch { animation: none; } }

/* ===== /mobile · мобилно меню (до 900px) — менюто покрива целия екран ===== */
@media (max-width: 900px) {
  /* translate и backdrop-filter на header-а правят fixed менюто „затворено“ в капсулата (тя му става containing block)
     → на телефон/таблет капсулата се позиционира с left/right, а стъклото минава в ::before */
  .site-header { left: 12px; right: 12px; width: auto; translate: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: rgb(3 12 3 / .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    transition: opacity .3s var(--ease-out), background var(--t-med);
  }
  .site-header.is-scrolled::before { background: rgb(2 8 2 / .86); }
  .site-header.menu-open::before { opacity: 0; }
}

/* ===== /mobile · телефони (до 767px) — центрирани заглавия: #keysove, #uslugi, #vaprosi · „За мен“ вдясно ===== */
@media (max-width: 767px) {
  #keysove .sec-head, #uslugi .sec-head { justify-items: center; text-align: center; }
  #uslugi .sec-head--flip > div:last-child { text-align: center; }
  #vaprosi .faq__side { text-align: center; }
  #vaprosi .faq__card { text-align: left; }                               /* картата „Не намираш отговор?“ остава както е */
  #keysove .sec-head .h2, #keysove .sec-head .lead,
  #uslugi .sec-head .h2, #uslugi .sec-head .lead,
  #vaprosi .faq__side .h2, #vaprosi .faq__side .lead { margin-inline: auto; text-wrap: balance; }
  #keysove .sec-head .h2 > div, #uslugi .sec-head .h2 > div, #vaprosi .faq__side .h2 > div { text-align: inherit !important; }  /* SplitText */

  /* „За мен“: заглавието и текстът — подравнени вдясно */
  .about__text { text-align: right; }
  .about__text .kicker { flex-direction: row-reverse; }
  .about__text .h2, .about__text .lead, .about__text > p { margin-left: auto; }
  .about__text .h2 > div { text-align: inherit !important; }               /* SplitText */
}


/* ============ Третият цвят: Pistachio #C5DDA8 (от 2026-10-22) ============
   Водещи остават тъмното зелено и електрикът (#00FF00 — заглавия, бутони, панели, логото).
   Pistachio е за вторичното: надписите над заглавията, малките моно етикети, второстепенния текст,
   отговорите в чата и големите размазани плюсове във фона. */
:root { --pistachio: #C5DDA8; --c-muted: rgb(216 230 199 / .84); --c-dim: rgb(197 221 168 / .66); }
.kicker, .c3d__num, .step__card .step__phase, .work__tag, .footer__h, .sp-aside__h { color: var(--pistachio); }
.msg--bot { background: #DCEBCB; }

/* ============ Pistachio в кутиите (картите) ============
   Рамките — фъстъчени с една електрикова искра; сиянието вътре и заглавията на картите — Pistachio.
   Пълнежът на кутиите и всичко извън тях остават зелени. */
:root {
  --edge: linear-gradient(140deg, rgb(197 221 168 / .85) 0%, rgb(255 255 255 / .45) 26%, rgb(0 255 0 / .55) 54%, rgb(197 221 168 / .85) 100%);
  --edge-hot: linear-gradient(140deg, #C5DDA8 0%, #FFFFFF 22%, #00FF00 52%, #C5DDA8 100%);
}
[data-glow]::before { background-image: radial-gradient(24rem 18rem at var(--mx, 70%) var(--my, -10%), rgb(197 221 168 / .2), transparent 60%), var(--fill); }
.gem--hot[data-glow]::before { background-image: radial-gradient(24rem 18rem at var(--mx, 70%) var(--my, -10%), rgb(197 221 168 / .26), transparent 60%), var(--fill-hot); }
.work__card { background: var(--edge), rgb(197 221 168 / var(--card-glow, .3)); }
.work__card::before {
  background-image:
    radial-gradient(9rem 9rem at 0% 0%, rgb(197 221 168 / .22), transparent 66%),
    radial-gradient(9rem 9rem at 100% 100%, rgb(197 221 168 / .22), transparent 66%),
    radial-gradient(22rem 16rem at var(--mx, 50%) var(--my, -20%), rgb(197 221 168 / .18), transparent 58%),
    var(--fill);
}
@media (min-width: 1101px) {
  .step__card::after {
    background:
      linear-gradient(90deg, transparent 6%, #DCEBCB 30%, #C5DDA8 50%, #DCEBCB 70%, transparent 94%) top / 100% 2px no-repeat,
      radial-gradient(120% 70% at 50% 0%, rgb(197 221 168 / .24), rgb(197 221 168 / .07) 45%, transparent 75%);
  }
}
.final__glow { background: radial-gradient(closest-side, rgb(197 221 168 / .3), transparent); }
.final__grid { background-image: linear-gradient(rgb(197 221 168 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(197 221 168 / .09) 1px, transparent 1px); }
/* заглавията в кутиите */
.c3d__card h3, .work__body h3, .svc-card h3, .step__title, .faq__card-t, .sp-rel b { color: var(--pistachio); }
/* фъстъчен отблясък в пълнежа на всяка кутия (от горния ляв ъгъл) — тъмнозелената основа остава отдолу */
:root {
  --fill: radial-gradient(130% 100% at 0% 0%, rgb(197 221 168 / .17), transparent 62%), linear-gradient(158deg, rgb(9 42 11 / .9) 0%, rgb(3 12 3 / .93) 52%, rgb(0 0 0 / .95) 100%);
  --fill-hot: radial-gradient(130% 100% at 0% 0%, rgb(197 221 168 / .21), transparent 62%), linear-gradient(158deg, rgb(6 70 6 / .9) 0%, rgb(4 24 3 / .92) 55%, rgb(0 0 0 / .94) 100%);
}
.c3d__card { --fill: radial-gradient(130% 100% at 0% 0%, rgb(197 221 168 / .17), transparent 62%), linear-gradient(158deg, rgb(9 42 11) 0%, rgb(3 12 3) 52%, rgb(0 0 0) 100%); }