/* ==== 00-fonts.css ==== */

/* Самохостнати шрифтове — подрязани подмножества (кирилица + латиница).
   Източникът е src/fonts/*.ttf; build.mjs прави от всеки истински .woff2
   (около 81 kB за петте). .ttf остава като резерва за браузър, който не
   приеме woff2. Без заявки към външни сървъри. */

@font-face{
  font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/literata-400.woff2) format('woff2'),url(/fonts/literata-400.ttf) format('truetype');
}
@font-face{
  font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/literata-600.woff2) format('woff2'),url(/fonts/literata-600.ttf) format('truetype');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/inter-400.woff2) format('woff2'),url(/fonts/inter-400.ttf) format('truetype');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/inter-600.woff2) format('woff2'),url(/fonts/inter-600.ttf) format('truetype');
}
@font-face{
  font-family:'JB Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/mono-400.woff2) format('woff2'),url(/fonts/mono-400.ttf) format('truetype');
}

/* Стрелките (→ ← ↑ ↓) и ≈ ги няма в подрязаните шрифтове. Вместо да ги
   оставим на случаен резервен шрифт, ги вземаме от системен шрифт, който ги
   има на всяка система (WGL4). local() не тегли нищо от мрежата. Лицето
   стои второ в стековете (01-osnova.css), веднага след основния шрифт, и
   заради unicode-range се ползва само за тези знаци. */
@font-face{
  font-family:'Znaci';font-style:normal;font-weight:100 900;
  src:local('Segoe UI Symbol'),local('Segoe UI'),local('Arial'),local('ArialMT'),
      local('Helvetica'),local('Roboto'),local('DejaVu Sans');
  unicode-range:U+2190-2193,U+2248;
}


/* ==== 01-osnova.css ==== */

/* ============================================================
   ОСНОВА — токени, нулиране, типография, бутони
   Посока А „Хартия" + панелът СРОК/ПЛАЩАНЕ/ФАКТУРА от посока Б.
   ============================================================ */

:root{
  /* Повърхности */
  --paper:#FBF8F3;
  --paper-2:#F4EFE6;
  --card:#FFFFFF;
  --ink:#17212E;
  --ink-2:#2C3948;
  --muted:#5E6A78;
  --muted-2:#7A8695;

  /* Акцент — месингово */
  --brass:#9C6B1F;
  --brass-2:#7E5514;
  --brass-3:#B37E2C;
  --brass-soft:#F2E7D2;
  --brass-line:#E5D3B0;

  /* Линии */
  --rule:#E4DACB;
  --rule-2:#D3C6B1;

  /* Състояния */
  --ok:#2F6B4F;
  --ok-soft:#E6F0EA;
  --warn:#9A6400;
  --warn-soft:#FBF0DC;
  --err:#A8322B;
  --err-soft:#FAE9E7;

  /* Форма */
  --radius:14px;
  --radius-sm:9px;
  --radius-xs:6px;
  --wrap:1120px;
  --wrap-narrow:820px;

  /* Сенки */
  --shadow:0 1px 2px rgba(23,33,46,.04), 0 8px 24px -12px rgba(23,33,46,.14);
  --shadow-lg:0 2px 4px rgba(23,33,46,.05), 0 24px 48px -20px rgba(23,33,46,.22);

  /* Шрифтове */
  /* 'Znaci' = → и ≈ от системен шрифт (виж 00-fonts.css) */
  --serif:'Literata','Znaci',Georgia,'Times New Roman',serif;
  --sans:'Inter','Znaci',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JB Mono','Znaci',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}

h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0;letter-spacing:-.012em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
ul,ol{margin:0}
strong,b{font-weight:600}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-xs);padding:.08em .38em;color:var(--ink-2)}

/* Достъпност — само за екранни четци */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:-9999px;top:auto;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;
  text-decoration:none;font-weight:600;
}
.skip:focus{left:0;top:0}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:2px;border-radius:3px}

/* ---------- Контейнер ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-n{max-width:var(--wrap-narrow);margin:0 auto;padding:0 22px}

/* ---------- Бутони ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  padding:13px 22px;border-radius:var(--radius-sm);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;transition:.18s;line-height:1.2;
  text-align:center;
}
.btn-p{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-p:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-s:hover{border-color:var(--ink);background:#fff}
.btn-b{background:var(--brass);color:#fff;border-color:var(--brass)}
.btn-b:hover{background:var(--brass-3);border-color:var(--brass-3)}
.btn-lg{padding:16px 28px;font-size:16.5px}
.btn-sm{padding:10px 16px;font-size:14.5px}
.btn-full{width:100%}
.btn .ar{transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- Етикети ---------- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brass-2);display:block;margin-bottom:13px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.03em;color:var(--brass-2);
  background:var(--brass-soft);border:1px solid var(--brass-line);
  padding:6px 13px;border-radius:100px;margin-bottom:22px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--brass);display:block;flex:0 0 auto}
.tag{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brass-2);background:var(--brass-soft);
  border:1px solid var(--brass-line);padding:3px 9px;border-radius:100px;
}
.tag-ok{color:var(--ok);background:var(--ok-soft);border-color:#C9DED2}
.tag-warn{color:var(--warn);background:var(--warn-soft);border-color:#EBD6A8}

/* ---------- Секции ---------- */
.sec{padding:72px 0}
.sec-tight{padding:52px 0}
.sec-alt{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-head{max-width:64ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(26px,3.1vw,37px);margin-bottom:15px}
.sec-head p{color:var(--muted);font-size:17.5px}
.sec-head-c{text-align:center;margin:0 auto 40px}
.sec-head-c p{margin:0 auto}

/* ---------- Панелът от посока Б — СРОК / ПЛАЩАНЕ / ФАКТУРА ---------- */
.spec{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2);
  border-radius:var(--radius);overflow:hidden;margin:0 0 10px;
}
.spec > div{background:var(--paper-2);padding:15px 17px}
.spec dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.spec dd{margin:0;font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.spec dd small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:3px;letter-spacing:0}
.spec-2{grid-template-columns:repeat(2,1fr)}
.spec-4{grid-template-columns:repeat(4,1fr)}
/* На телефон — един под друг (в три колони ЕИК-ът се режеше). */
@media (max-width:560px){.spec,.spec-2,.spec-4{grid-template-columns:1fr}}

/* ---------- Карти ---------- */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 26px;
}
.card-flat{box-shadow:none}
.card-lift{transition:.2s}
.card-lift:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--rule-2)}

/* ---------- Списъци с отметки ---------- */
.ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:9px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.ticks li svg{flex:0 0 auto;margin-top:3.5px;color:var(--brass)}
.ticks-ok li svg{color:var(--ok)}
.ticks-lg li{font-size:16px;gap:11px}
.ticks-lg li svg{margin-top:4.5px}

/* ---------- Известия ---------- */
.notice{
  border-radius:var(--radius-sm);padding:15px 18px;font-size:14.5px;line-height:1.6;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-2);
}
.notice strong{color:var(--ink)}
.notice-warn{background:var(--warn-soft);border-color:#EBD6A8}
.notice-ok{background:var(--ok-soft);border-color:#C9DED2}
.notice-err{background:var(--err-soft);border-color:#E8C7C4}
.notice-info{background:var(--brass-soft);border-color:var(--brass-line)}

/* ---------- Таблици ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tbl th,.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:400;background:var(--paper-2);
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl td strong{font-size:16px}
.tbl .num{font-family:var(--mono);white-space:nowrap}

/* ---------- Дребен текст ---------- */
.micro{font-size:13.5px;color:var(--muted);line-height:1.6}
.micro-lg{font-size:14.5px;color:var(--muted);line-height:1.65}
.vat{margin-top:20px;font-size:13.5px;color:var(--muted);text-align:center}
.hr{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- Анимация при поява ----------
   Скрива се само когато има JavaScript (класът js идва от <head>): до 14.10.2026 .reveal
   беше прозрачен и без JavaScript — секциите оставаха невидими. Времената — по уменията
   dylantarre/scroll-animations (500–600 ms, ease-out). */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease-out,transform .6s ease-out}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .reveal,.js .reveal{opacity:1;transform:none}
}

/* ==== 02-karkas.css ==== */

/* ============================================================
   КАРКАС — хедър, навигация, футър
   ============================================================ */

/* ---------- Хедър ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(251,248,243,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:70px}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.012em;
  white-space:nowrap;flex:0 0 auto;
}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.brand-1{color:var(--brass-2)} /* 14.10.2026: #9c6b1f върху хартията беше 4,04:1 — под 4,5 (одит) */
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:15px;color:var(--ink-2);padding:6px 0;
  border-bottom:1.5px solid transparent;transition:.18s;white-space:nowrap;
}
.nav a:hover{color:var(--brass-2);border-bottom-color:var(--brass)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}
.hdr-cta{margin-left:4px;white-space:nowrap;flex:0 0 auto}
.nav{gap:18px}
.nav a{font-size:14.5px}

/* Три точки за „още" */
.nav-more{position:relative}
.nav-more > button{
  background:none;border:0;font:inherit;font-size:15px;color:var(--ink-2);
  cursor:pointer;padding:6px 2px;border-bottom:1.5px solid transparent;transition:.18s;
  display:flex;align-items:center;gap:5px;
}
.nav-more > button:hover{color:var(--brass-2);border-bottom-color:var(--brass)}
.nav-more[data-open] > button{color:var(--ink);border-bottom-color:var(--brass)}
.nav-more-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:210px;
  background:var(--card);border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:8px;display:none;flex-direction:column;gap:2px;
}
.nav-more[data-open] .nav-more-menu{display:flex}
.nav-more-menu a{
  padding:9px 12px;border-radius:var(--radius-xs);border:0;font-size:15px;
}
.nav-more-menu a:hover{background:var(--paper-2);color:var(--brass-2)}

/* Бургер */
.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);
  border-radius:8px;padding:9px 11px;cursor:pointer;align-items:center;justify-content:center;
}
/* три черти една под друга (16.10.2026: без flex-direction стояха в един ред — изглеждаше като една черта) */
.burger span{display:block;width:18px;height:1.6px;background:var(--ink);margin:0;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* Мобилно меню */
.mmenu{
  display:none;position:fixed;inset:70px 0 0;z-index:55;
  background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--rule);
}
.mmenu[data-open]{display:block}
.mmenu-in{padding:22px 22px 60px;max-width:560px;margin:0 auto}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{
  text-decoration:none;padding:15px 4px;border-bottom:1px solid var(--rule);
  font-family:var(--serif);font-size:19px;font-weight:600;
}
.mmenu nav a[aria-current="page"]{color:var(--brass-2)}
.mmenu .mgroup{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 8px;
}
.mmenu nav a.sm{font-family:var(--sans);font-size:16px;font-weight:400;padding:13px 4px}
.mmenu .mcta{margin-top:26px;display:flex;flex-direction:column;gap:11px}

/* ---------- Футър ---------- */
footer{background:var(--paper-2);border-top:1px solid var(--rule);padding:54px 0 34px;margin-top:72px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
.f-grid h2{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:15px;
}
.f-grid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.f-grid a{text-decoration:none;font-size:14.5px;color:var(--ink-2)}
.f-grid a:hover{color:var(--brass-2);text-decoration:underline}
.f-about p{font-size:14.5px;color:var(--muted);max-width:36ch;margin-top:14px}
.f-about .f-badge{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.f-legal{
  border-top:1px solid var(--rule);padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);
}
.f-legal a{text-decoration:none}
.f-legal a:hover{text-decoration:underline}

/* ---------- Път нагоре ---------- */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:50;width:44px;height:44px;
  border-radius:50%;background:var(--card);border:1px solid var(--rule-2);
  box-shadow:var(--shadow);cursor:pointer;display:none;place-items:center;color:var(--ink);
}
.totop[data-show]{display:grid}
.totop:hover{border-color:var(--brass);color:var(--brass-2)}

@media (max-width:1040px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex;flex-direction:column;gap:4px;width:44px;height:44px;padding:0}
}
@media (max-width:720px){
  .hdr-in{min-height:64px}
  .mmenu{inset:64px 0 0}
  .f-grid{grid-template-columns:1fr;gap:26px}
  footer{padding:42px 0 28px;margin-top:52px}
  .f-legal{flex-direction:column;gap:10px}
}


/* ==== 03-nachalo.css ==== */

/* ============================================================
   НАЧАЛНА СТРАНИЦА — hero, стъпки, пакети, портфолио, FAQ
   ============================================================ */

/* ---------- Hero ---------- */
.hero{padding:72px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:22px}
.hero h1 em{
  font-style:normal;color:var(--brass-2);white-space:nowrap;
  background-image:linear-gradient(to top,var(--brass-soft) 0 34%,transparent 34%);
  background-repeat:no-repeat;background-size:100% 100%;
  padding:0 .06em;margin:0 -.06em;border-radius:2px;
}
.hero .lead{font-size:19px;color:var(--ink-2);max-width:52ch;margin-bottom:30px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:7px}
.tick{width:15px;height:15px;flex:0 0 auto;color:var(--ok)}

/* ---------- Hero със снимка, ефекти и витрина (04–05.10.2026) ----------
   Ефектите са от готовите дизайни (CYBERNINJAS.AI\Уеб дизайн): сянка отляво и
   бягаща лента (Lumina Vision), течно стъкло (Velorah), думите изплуват от
   размазано (Asme), обикаляща рамка на бутона (Lumina), прожектор и зърно. */
.hero.hero-foto{padding:clamp(64px,9vh,104px) 0 clamp(76px,10vh,116px);background:#0E141D;color:var(--paper);isolation:isolate}
.hero.hero-studio{display:flex;align-items:center;min-height:min(calc(100vh - 71px),980px);min-height:min(calc(100svh - 71px),980px);
  padding:clamp(48px,7vh,88px) 0 calc(clamp(48px,7vh,88px) + 62px)}
.hero-studio > .wrap{width:100%}
.hero-studio .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(40px,4.5vw,72px)}
/* Текстът е подравнен с логото, а витрината излиза вдясно от реда — до 170 px, по-едра. */
.hero-studio .vitrina{margin-right:calc(-1 * clamp(0px,(100vw - var(--wrap)) / 2 - 28px,170px))}

/* Снимката: изостря се при отваряне, после бавно плава; site.js я приближава при скрол. */
.hero-foto-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-foto-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.06);transform-origin:50% 70%;will-change:transform}
.hero-studio .hero-foto-media{animation:studio-fokus 2.2s cubic-bezier(.16,1,.3,1) both,studio-plava-foto 30s ease-in-out 2.2s infinite alternate}
@keyframes studio-fokus{from{filter:blur(12px) brightness(.6);transform:scale(1.1)}to{filter:none;transform:none}}
@keyframes studio-plava-foto{from{transform:none}to{transform:scale(1.05) translate3d(-1.2%,-.6%,0)}}

/* Сянката: плътна само зад текста (вляво), вдясно снимката се вижда. */
.hero-foto::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,20,29,.9) 0%,rgba(14,20,29,.82) 28%,rgba(14,20,29,.5) 54%,rgba(14,20,29,.22) 78%,rgba(14,20,29,.16) 100%),
    linear-gradient(0deg,rgba(14,20,29,.82) 0,rgba(14,20,29,0) 30%),
    linear-gradient(180deg,rgba(14,20,29,.4) 0,rgba(14,20,29,0) 16%)}

/* Прожекторът: топла светлина под сянката — следва мишката, без мишка бавно обикаля. */
@property --hx{syntax:'<percentage>';inherits:true;initial-value:70%}
@property --hy{syntax:'<percentage>';inherits:true;initial-value:40%}
.hero-svetlina{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(560px circle at var(--hx) var(--hy),rgba(255,210,140,.75),rgba(255,210,140,0) 70%);
  transition:--hx .6s ease-out,--hy .6s ease-out;animation:studio-svetlina 16s ease-in-out infinite alternate}
.hero-studio.ima-mishka .hero-svetlina{animation:none}
@keyframes studio-svetlina{from{--hx:58%;--hy:28%}to{--hx:88%;--hy:66%}}

/* Филмово зърно (плочка 96 px, 4,8 KB). */
.hero-zarno{position:absolute;inset:-48px;z-index:-1;pointer-events:none;opacity:.075;
  background:url(/assets/hero/shum.webp) 0 0/96px;animation:studio-zarno .8s steps(4) infinite}
@keyframes studio-zarno{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-14px,10px,0)}50%{transform:translate3d(12px,-16px,0)}75%{transform:translate3d(-8px,-6px,0)}}

.hero-foto h1{color:#fff}
.hero-foto .lead{color:rgba(251,248,243,.88)}
.hero-foto .trust{color:rgba(251,248,243,.8)}
.hero-foto .tick{color:#E9C98F}
.hero-studio .hero-txt{position:relative;z-index:1}

/* Надписът над заглавието — течно стъкло (Velorah), точката пулсира. */
.hero-foto .eyebrow{color:#F2E7D2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-foto .eyebrow i{background:#E9C98F;animation:studio-puls 2.4s ease-out infinite}
@keyframes studio-puls{0%{box-shadow:0 0 0 0 rgba(233,201,143,.6)}80%,100%{box-shadow:0 0 0 9px rgba(233,201,143,0)}}

/* Заглавието: думите изплуват от размазано една след друга (Asme). */
.hero-studio h1{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero-dumi .duma{display:inline-block;animation:studio-duma 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.2s + var(--i,0) * .065s)}
.hero-dumi .duma:nth-child(2){--i:1}.hero-dumi .duma:nth-child(3){--i:2}.hero-dumi .duma:nth-child(4){--i:3}
.hero-dumi .duma:nth-child(5){--i:4}.hero-dumi .duma:nth-child(6){--i:5}.hero-dumi .duma:nth-child(7){--i:6}
.hero-dumi .duma:nth-child(8){--i:7}.hero-dumi .duma:nth-child(9){--i:8}.hero-dumi .duma:nth-child(10){--i:9}
.hero-dumi .duma:nth-child(11){--i:10}.hero-dumi .duma:nth-child(12){--i:11}
@keyframes studio-duma{from{opacity:0;filter:blur(12px);transform:translate3d(0,.35em,0)}to{opacity:1;filter:none;transform:none}}
/* „48 часа“: злато с отблясък, който минава, и черта, която се рисува. */
.hero-studio h1 em{position:relative;font-style:normal;white-space:nowrap;padding:0;margin:0;border-radius:0;color:#E9C98F;
  background:linear-gradient(100deg,#D6A452 0%,#F7E6BE 20%,#E9C98F 38%,#C98B33 58%,#F7E6BE 78%,#D6A452 100%) 0 0/250% 100%}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-studio h1 em{-webkit-background-clip:text;background-clip:text;color:transparent;animation:studio-zlato 7s linear 1.4s infinite}
}
.hero-studio h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.09em;border-radius:3px;
  background:linear-gradient(90deg,#9C6B1F,#E9C98F 60%,rgba(233,201,143,0));transform-origin:0 50%;animation:studio-cherta 1s cubic-bezier(.16,1,.3,1) 1.15s both}
@keyframes studio-zlato{to{background-position:-250% 0}}
@keyframes studio-cherta{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Бутоните: главният с обикаляща рамка (Lumina), вторият — стъкло. */
@property --ugal{syntax:'<angle>';inherits:false;initial-value:0deg}
.hero-foto .btn-p{background:var(--brass);border-color:var(--brass);color:#fff}
.hero-foto .btn-p:hover{background:var(--brass-3);border-color:var(--brass-3)}
.btn-orbita{position:relative;isolation:isolate;box-shadow:0 12px 34px -10px rgba(214,164,82,.75)}
.btn-orbita::before{content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ugal),#9C6B1F,#E9C98F 22%,#FFF7E3 32%,#C98B33 48%,#9C6B1F 70%,#F2DDB0 86%,#9C6B1F);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:studio-orbita 4.5s linear infinite}
@keyframes studio-orbita{to{--ugal:360deg}}
.hero-foto .btn-s{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hero-foto .btn-s:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.6)}

/* Витрината: истински примерни сайтове — прозорец, карти отзад и телефон със същия сайт. */
.vitrina{position:relative;perspective:1400px}
.hero-studio .vitrina{animation:studio-vitrina 1.5s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes studio-vitrina{from{opacity:0;transform:translate3d(70px,30px,0) rotateY(-16deg)}to{opacity:1;transform:none}}
.vitrina-scena{position:relative}
.vitrina-karta{position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16)}
.vitrina-karta-1{transform:translate3d(20px,-18px,0) rotate(2.2deg) scale(.975)}
.vitrina-karta-2{transform:translate3d(38px,-34px,0) rotate(4.4deg) scale(.95);opacity:.55}
.hero-foto .badge-float{color:var(--ink);z-index:3;animation:studio-plava 7s ease-in-out 1.5s infinite}
.vitrina-prozorec{position:relative;z-index:1;display:block;border-radius:var(--radius);overflow:hidden;background:#fff;text-decoration:none;
  box-shadow:0 44px 96px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
  transform:rotateY(-7deg) rotateX(3.5deg);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.vitrina-prozorec:focus-visible{outline:3px solid #E9C98F;outline-offset:4px}
.vitrina-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.vitrina-chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);display:block;flex:0 0 auto}
.vitrina-chrome i:nth-child(1){background:#E7776B}.vitrina-chrome i:nth-child(2){background:#E9C46A}.vitrina-chrome i:nth-child(3){background:#7DBA84}
.vitrina-url{display:inline-flex;align-items:center;gap:7px;margin-left:10px;min-width:0;flex:0 1 auto;overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:#fff;border:1px solid var(--rule);border-radius:6px;padding:4px 11px}
.vitrina-url svg{color:var(--ok);flex:0 0 auto}
.vitrina-url [data-vitrina-url]{overflow:hidden;text-overflow:ellipsis}
.vitrina.pishe .vitrina-url [data-vitrina-url]::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--ink)}
.vitrina-ekran{position:relative;aspect-ratio:16/10;background:#11161D;overflow:hidden}
.vitrina-ekran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;clip-path:inset(0 0 0 100%)}
.vitrina-ekran img.bilo{opacity:1;clip-path:inset(0);z-index:1}
.vitrina-ekran img.is-on{opacity:1;clip-path:inset(0);z-index:2;transition:clip-path .95s cubic-bezier(.77,0,.18,1)}
.vitrina-ekran::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:3px;z-index:3;pointer-events:none;opacity:0;
  background:#E9C98F;box-shadow:0 0 22px 4px rgba(233,201,143,.65)}
.vitrina-ekran.mina::after{animation:studio-liniya .95s cubic-bezier(.77,0,.18,1) both}
@keyframes studio-liniya{0%{left:100%;opacity:1}92%{opacity:1}100%{left:0;opacity:0}}
.vitrina-telefon{position:absolute;right:-28px;bottom:-40px;z-index:2;width:clamp(104px,22%,144px);aspect-ratio:1/2.06;padding:5px;border-radius:24px;
  background:#0B0F15;box-shadow:0 30px 60px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.16);animation:studio-plava 6s ease-in-out infinite}
.vitrina-telefon::before{content:"";position:absolute;top:10px;left:50%;z-index:2;width:28%;height:5px;border-radius:5px;background:#0B0F15;transform:translateX(-50%)}
.vitrina-telefon-ekran{position:relative;width:100%;height:100%;border-radius:19px;overflow:hidden;background:#fff}
.vitrina-telefon-ekran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translate3d(0,7%,0);
  transition:opacity .5s ease .3s,transform .8s cubic-bezier(.16,1,.3,1) .3s}
.vitrina-telefon-ekran img.is-on{opacity:1;transform:none}
@keyframes studio-plava{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}

/* Табовете — стъклена лента с иконките на браншовете; линията отдолу отброява до следващия. */
.vitrina-tabove{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-width:600px;margin:54px auto 0;padding:6px;
  border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.vitrina-tabove[hidden]{display:none}
.vitrina-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:9px 4px 12px;overflow:hidden;cursor:pointer;
  font:600 12.5px/1.15 var(--sans);color:rgba(251,248,243,.8);background:transparent;border:0;border-radius:14px;transition:color .25s,background .25s}
.vitrina-tab img{width:32px;height:32px;border-radius:0;flex:0 0 auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4));transition:transform .3s cubic-bezier(.16,1,.3,1)}
.vitrina-tab-ime{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vitrina-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.vitrina-tab:hover img{transform:translateY(-3px) scale(1.06)}
.vitrina-tab.is-on{color:var(--ink);background:rgba(251,248,243,.96)}
.vitrina-tab:focus-visible{outline:2px solid #E9C98F;outline-offset:2px}
.vitrina-tab-hod{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%}
.vitrina-tab.is-on .vitrina-tab-hod{animation:studio-hod 5.5s linear both}
.vitrina.pauza .vitrina-tab.is-on .vitrina-tab-hod{animation-play-state:paused}
@keyframes studio-hod{to{transform:scaleX(1)}}
.vitrina-bel{margin:16px 0 0;font-size:12.5px;color:rgba(251,248,243,.62);text-align:center}

/* Бягащата лента с браншовете (Lumina) — движи се само с копието от site.js. */
.hero-lenta{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:15px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(14,20,29,.1),rgba(14,20,29,.5));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hero-lenta-in{display:flex;gap:46px;width:max-content;padding-left:46px}
.hero-lenta.tece .hero-lenta-in{animation:studio-lenta 64s linear infinite}
.hero-lenta.tece:hover .hero-lenta-in{animation-play-state:paused}
.hero-lenta span{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(251,248,243,.66)}
.hero-lenta img{width:26px;height:26px;border-radius:0}
@keyframes studio-lenta{to{transform:translate3d(-50%,0,0)}}

/* Появата на текста — само CSS, работи и без JavaScript */
@keyframes hero-poyava{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-poyava{animation:hero-poyava .8s cubic-bezier(.16,1,.3,1) both}
.hero-poyava-1{animation-delay:.05s}.hero-poyava-2{animation-delay:.15s}.hero-poyava-3{animation-delay:.55s}
.hero-poyava-4{animation-delay:.7s}.hero-poyava-5{animation-delay:.82s}
@media (prefers-reduced-motion:reduce){
  .hero-poyava,.hero-dumi .duma,.hero-studio .hero-foto-media,.hero-svetlina,.hero-zarno,.hero-foto .eyebrow i,.hero-studio h1 em,
  .hero-studio h1 em::after,.btn-orbita::before,.hero-studio .vitrina,.hero-foto .badge-float,.vitrina-telefon,.hero-lenta-in,
  .vitrina-ekran::after,.vitrina-tab-hod{animation:none!important}
  .hero-foto-media img{transform:none!important}
  .vitrina-prozorec{transform:none!important;transition:none}
  .vitrina-ekran img,.vitrina-telefon-ekran img{transition:none!important}
}

.badge-float{color:var(--ink)}
.vitrina-prozorec{display:block;border-radius:var(--radius);overflow:hidden;background:#fff;text-decoration:none;
  box-shadow:0 30px 80px rgba(6,10,16,.5),0 0 0 1px rgba(255,255,255,.08);
  transform:rotateY(-6deg) rotateX(3deg);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.vitrina-prozorec:focus-visible{outline:3px solid var(--brass-3);outline-offset:4px}
.vitrina-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.vitrina-chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);display:block}
.vitrina-url{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:#fff;border:1px solid var(--rule);border-radius:5px;padding:3px 10px}
.vitrina-ekran{position:relative;aspect-ratio:16/10;background:var(--paper-2)}
.vitrina-ekran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.vitrina-ekran img.is-on{opacity:1}
.vitrina-bel{margin:38px 0 0;font-size:12.5px;color:rgba(251,248,243,.64);text-align:center}

/* Появата на текста и витрината — само CSS, работи и без JavaScript */
@keyframes hero-poyava{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-poyava{animation:hero-poyava .8s cubic-bezier(.16,1,.3,1) both}
.hero-poyava-1{animation-delay:.05s}.hero-poyava-2{animation-delay:.15s}.hero-poyava-3{animation-delay:.27s}
.hero-poyava-4{animation-delay:.39s}.hero-poyava-5{animation-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .hero-poyava{animation:none}
  .hero-foto-media img{transform:none!important}
  .vitrina-prozorec{transform:none!important;transition:none}
  .vitrina-ekran img{transition:none}
}

.badge-float{
  position:absolute;bottom:-16px;left:-16px;background:#fff;border:1px solid var(--rule);
  border-radius:11px;box-shadow:var(--shadow);padding:11px 15px;
  display:flex;align-items:center;gap:10px;
}
.badge-float b{font-size:14px;display:block;font-family:var(--serif);font-weight:600}
.badge-float small{font-size:12px;color:var(--muted)}
.badge-float .dot{
  width:32px;height:32px;border-radius:8px;background:var(--brass-soft);
  display:grid;place-items:center;color:var(--brass-2);flex:0 0 auto;
}

/* ---------- Стъпки ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 26px 30px;position:relative;
}
.step::before{
  counter-increment:s;content:"0" counter(s);
  font-family:var(--serif);font-size:14px;font-weight:600;color:var(--brass-2);
  display:block;margin-bottom:15px;letter-spacing:.04em;
}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:var(--muted);font-size:15.5px}
.step .time{
  display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--brass-2);background:var(--brass-soft);
  padding:4px 11px;border-radius:100px;
}

/* ---------- Пакети ---------- */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pack{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 24px 26px;display:flex;flex-direction:column;transition:.2s;position:relative;
}
.pack:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--rule-2)}
.pack.feat{border:1.5px solid var(--brass);box-shadow:var(--shadow)}
.pack .poptag{
  position:absolute;top:-11px;left:24px;background:var(--brass);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:4px 12px;border-radius:100px;
}
.pack h3{font-size:19px;margin-bottom:8px}
.pack .sub{font-size:14px;color:var(--muted);min-height:44px;margin-bottom:18px}
.price{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1;margin-bottom:4px}
.price small{
  font-size:13.5px;font-family:var(--sans);font-weight:400;color:var(--muted);
  display:block;margin-top:8px;letter-spacing:0;line-height:1.45;
}
.pack .ticks{margin:20px 0 22px;flex:1}
.pack .btn{width:100%}

/* ---------- Портфолио карти ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.works-lead{grid-template-columns:1.15fr 1fr 1fr}
.work{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;transition:.2s;display:flex;flex-direction:column;
}
.work:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.work .thumb{
  height:150px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;padding:18px;
}
.work .thumb svg{max-height:100%}
.work .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.work h3{font-size:17px;margin-bottom:6px}
.work p{font-size:14px;color:var(--muted);flex:1}
.work .meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brass-2);margin-top:14px;display:flex;align-items:center;gap:6px;
}
.work.real{outline:2px solid var(--brass-soft);outline-offset:-2px}
/* Кадър на примера вместо иконка (07.10.2026) — цялата карта е връзка към него. */
.work .thumb.thumb-shot{display:block;place-items:normal;height:auto;padding:0;aspect-ratio:16/10;overflow:hidden;background:#11161D}
.thumb-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.work:hover .thumb-shot img,.work:focus-visible .thumb-shot img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.thumb-shot img{transition:none}}

/* ---------- FAQ ---------- */
.faq{max-width:var(--wrap-narrow);margin:0 auto}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 42px 20px 0;position:relative;
  font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::-moz-list-bullet{list-style:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--brass);border-bottom:1.8px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:.22s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details > div{padding:0 42px 22px 0;color:var(--muted);font-size:16px}
.faq details > div p + p{margin-top:12px}

/* ---------- Финален призив ---------- */
.final{
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:56px 48px;text-align:center;position:relative;overflow:hidden;
}
.final::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(560px 300px at 50% 0%,rgba(156,107,31,.32),transparent 70%);
}
.final>*{position:relative;z-index:1}
.final h2{font-size:clamp(25px,3vw,34px);color:#fff;margin-bottom:14px}
.final p{color:#B9C3CE;max-width:56ch;margin:0 auto 30px;font-size:17px}
.final .cta-row{justify-content:center;margin-bottom:0}
.final .btn-p{background:var(--brass);border-color:var(--brass)}
.final .btn-p:hover{background:var(--brass-3);border-color:var(--brass-3)}
.final .btn-s{color:#fff;border-color:rgba(255,255,255,.34)}
.final .btn-s:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6)}
.final .micro{margin-top:22px;color:#8E9AA7}
.final .micro a{color:#D8DFE6}

@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero.hero-studio{min-height:0}
  .hero-studio .hero-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .vitrina,.hero-studio .vitrina{max-width:620px;width:100%;margin:0 auto}
  .vitrina-prozorec{transform:none}
  .vitrina-telefon{right:-14px}
  .packs{grid-template-columns:repeat(2,1fr)}
  .works,.works-lead{grid-template-columns:1fr 1fr}
  .works-lead .work:first-child{grid-column:1/-1}
}
@media (max-width:460px){
  .vitrina-tab-ime{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vitrina-tab{padding:9px 2px 13px}
}
@media (max-width:720px){
  .hero{padding:46px 0 42px}
  .hero.hero-studio{padding:40px 0 104px}
  .vitrina-karta{display:none}
  .hero-studio .badge-float{display:none}
  .vitrina-telefon{width:88px;right:-6px;bottom:-26px;padding:4px;border-radius:18px}
  .vitrina-telefon-ekran{border-radius:14px}
  .vitrina-url{font-size:10.5px}
  .vitrina-tabove{margin-top:44px;padding:5px;gap:2px;border-radius:16px}
  .vitrina-tab{padding:8px 2px 11px;font-size:11px;border-radius:12px}
  .vitrina-tab img{width:28px;height:28px;border-radius:8px}
  .vitrina-tab-hod{left:10px;right:10px}
  .hero-lenta{padding:12px 0}
  .hero-lenta span{font-size:11px}
  .hero-lenta img{width:22px;height:22px}
  .sec{padding:52px 0}
  .sec-tight{padding:40px 0}
  .steps{grid-template-columns:1fr;gap:16px}
  .packs{grid-template-columns:1fr;gap:26px}
  .works,.works-lead{grid-template-columns:1fr}
  .works-lead .work:first-child{grid-column:auto}
  .final{padding:40px 24px}
  .badge-float{left:0;bottom:-14px}
  .cta-row .btn{flex:1 1 auto}
}

/* ==== 04-stranici.css ==== */

/* ============================================================
   ВЪТРЕШНИ СТРАНИЦИ — page hero, съдържание, сравнение, CTA лента
   ============================================================ */

/* ---------- Въведение на страница ---------- */
.phero{padding:56px 0 44px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.phero h1{font-size:clamp(29px,3.7vw,44px);margin-bottom:16px;max-width:22ch}
.phero .lead{font-size:18.5px;color:var(--ink-2);max-width:62ch}
.phero .cta-row{margin:26px 0 0}
.breadcrumb{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.breadcrumb a{text-decoration:none;color:var(--muted)}
.breadcrumb a:hover{color:var(--brass-2)}
/* Разделителят е по-светъл, текущата страница е с плътен цвят — и двете
   трябва да минат контраст 4.5:1 върху хартиения фон. */
.breadcrumb span{color:var(--muted-2)}
.breadcrumb span:last-child{color:var(--ink-2)}

/* ---------- Съдържание на документ (правни, статии) ---------- */
.doc{max-width:76ch;margin:0 auto}
.doc h2{font-size:clamp(21px,2.4vw,27px);margin:44px 0 15px;padding-top:8px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:19px;margin:30px 0 11px}
.doc p{margin:0 0 16px;color:var(--ink-2)}
.doc p:last-child{margin-bottom:0}
.doc ul,.doc ol{margin:0 0 18px;padding-left:24px;display:flex;flex-direction:column;gap:9px}
.doc li{color:var(--ink-2)}
.doc li::marker{color:var(--brass)}
.doc a{color:var(--brass-2);text-decoration-thickness:1px;text-underline-offset:2px}
.doc a:hover{color:var(--ink)}
.doc strong{color:var(--ink)}
.doc blockquote{
  margin:22px 0;padding:18px 22px;background:var(--card);
  border-left:3px solid var(--brass);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-2);font-size:16px;
}
.doc blockquote p:last-child{margin-bottom:0}
.doc .doc-note{
  margin:0 0 34px;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--warn-soft);border:1px solid #EBD6A8;font-size:14.5px;color:#6B4700;
}
.doc .doc-note strong{color:#573A00}
.doc table{margin:22px 0}

/* Съдържание (за дълги документи) */
.toc{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 38px;
}
.toc h2{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 13px;padding:0}
.toc ol{margin:0;padding-left:22px;gap:7px}
.toc li{font-size:15px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- Сравнение (две колони) ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.cmp-col{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 26px;display:flex;flex-direction:column;
}
.cmp-col.win{border:1.5px solid var(--brass);box-shadow:var(--shadow)}
.cmp-col h3{font-size:21px;margin-bottom:6px}
.cmp-col .csub{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.cmp-price{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1;margin-bottom:4px}
.cmp-price small{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted);margin-top:8px}
.cmp-col .ticks{margin:20px 0 22px;flex:1}
.cmp-col .btn{width:100%}
.forwho{margin-top:20px;padding:16px 18px;border-radius:var(--radius-sm);font-size:14.5px;line-height:1.6}
.forwho-yes{background:var(--ok-soft);border:1px solid #C9DED2;color:#1F4D38}
.forwho-no{background:var(--paper-2);border:1px solid var(--rule);color:var(--muted)}
.forwho b{display:block;margin-bottom:5px;color:var(--ink)}

/* ---------- Мрежа от карти ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}

/* ---------- Карта с икона ---------- */
.icard{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px 24px;
}
.icard .ico{
  width:40px;height:40px;border-radius:10px;background:var(--brass-soft);
  display:grid;place-items:center;color:var(--brass-2);margin-bottom:16px;
}
.icard h3{font-size:18px;margin-bottom:9px}
.icard p{font-size:14.5px;color:var(--muted)}

/* ---------- Стъпки вертикални (номерирани) ---------- */
.vsteps{display:flex;flex-direction:column;gap:0;counter-reset:v}
.vstep{
  display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;
  border-bottom:1px solid var(--rule);counter-increment:v;
}
.vstep:last-child{border-bottom:0}
.vstep::before{
  content:counter(v,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;color:var(--brass-2);
  width:44px;height:44px;border:1px solid var(--brass-line);border-radius:50%;
  display:grid;place-items:center;background:var(--brass-soft);
}
.vstep h3{font-size:19px;margin-bottom:8px}
.vstep p{color:var(--muted);font-size:15.5px;max-width:68ch}
.vstep .vmeta{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- CTA лента ---------- */
.cta-band{
  background:var(--card);border:1px solid var(--rule-2);border-radius:var(--radius);
  padding:36px 38px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  justify-content:space-between;
}
.cta-band h2{font-size:clamp(21px,2.4vw,27px);margin-bottom:8px}
.cta-band p{color:var(--muted);font-size:15.5px;max-width:58ch}

@media (max-width:1000px){
  .cmp{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .phero{padding:40px 0 34px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .cta-band{padding:28px 24px;gap:22px}
  .cta-band .btn{width:100%}
  .vstep{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .vstep::before{width:38px;height:38px}
}

/* „Магазин“ — истинският пример вместо празния макет (16.10.2026) */
.magazin-primer{display:grid;justify-items:center;gap:14px;width:fit-content;max-width:100%;margin:0 auto;text-decoration:none;color:var(--ink);font-weight:600}
.magazin-primer img{width:min(280px,72vw);height:auto;border-radius:28px;border:7px solid #17171b;box-shadow:var(--shadow-lg)}
.magazin-primer:hover span{color:var(--brass-2)}


/* ==== 05-formi.css ==== */

/* ============================================================
   ФОРМИ — полета, избор, състояния, стъпки
   ============================================================ */

.form-card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:34px 32px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1/-1}
.field label{font-size:14.5px;font-weight:600;color:var(--ink)}
.field .hint{font-size:13px;color:var(--muted);line-height:1.5}
.field .req{color:var(--brass-2);font-weight:600}

.input,.select,.textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule-2);border-radius:var(--radius-sm);
  padding:12px 15px;width:100%;transition:.16s;line-height:1.45;
}
.input::placeholder,.textarea::placeholder{color:#9AA5B1}
.input:hover,.select:hover,.textarea:hover{border-color:#BBAA8E}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brass);background:#fff;
  box-shadow:0 0 0 3.5px rgba(156,107,31,.1);
}
.textarea{min-height:118px;resize:vertical}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'%3E%3Cpath d='M1 1.5L6.5 7L12 1.5' stroke='%235E6A78' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;
}

/* Грешка / успех на поле */
.field[data-state="err"] .input,
.field[data-state="err"] .select,
.field[data-state="err"] .textarea{border-color:var(--err);background:var(--err-soft)}
.field .err-msg{font-size:13px;color:var(--err);display:none;align-items:center;gap:5px}
.field[data-state="err"] .err-msg{display:flex}
.field[data-state="ok"] .input,.field[data-state="ok"] .select,.field[data-state="ok"] .textarea{border-color:#8FC4A9}

/* Радио/чек карти */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  border:1.5px solid var(--rule-2);border-radius:var(--radius-sm);
  padding:15px 16px;cursor:pointer;transition:.16s;background:var(--paper);
}
.opt:hover{border-color:#BBAA8E;background:#fff}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{
  flex:0 0 auto;width:19px;height:19px;border:1.5px solid var(--rule-2);border-radius:50%;
  margin-top:2px;display:grid;place-items:center;transition:.16s;background:#fff;
}
.opt .box::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--brass);
  transform:scale(0);transition:.16s;
}
.opt input:checked ~ .box{border-color:var(--brass)}
.opt input:checked ~ .box::after{transform:scale(1)}
.opt input:focus-visible ~ .box{outline:2.5px solid var(--brass);outline-offset:2px}
.opt:has(input:checked){border-color:var(--brass);background:var(--brass-soft);box-shadow:0 0 0 1px var(--brass) inset}
.opt .ol{display:flex;flex-direction:column;gap:2px}
.opt .ol b{font-size:15px;font-weight:600}
.opt .ol span{font-size:13px;color:var(--muted);line-height:1.5}

/* Чекбокс */
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .sq{
  flex:0 0 auto;width:19px;height:19px;border:1.5px solid var(--rule-2);border-radius:5px;
  margin-top:2px;display:grid;place-items:center;transition:.16s;background:var(--paper);
}
.check .sq::after{
  content:"";width:10px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(0);transition:.16s;margin-top:-2px;
}
.check input:checked ~ .sq{background:var(--brass);border-color:var(--brass)}
.check input:checked ~ .sq::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible ~ .sq{outline:2.5px solid var(--brass);outline-offset:2px}
.check a{color:var(--brass-2)}

/* Група с легенда */
.fgroup{border:0;padding:0;margin:0 0 6px}
.fgroup legend{
  font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:11px;padding:0;
  display:flex;align-items:center;gap:6px;
}
.fgroup legend .tag{margin-left:2px}

/* Състояния на групата с радио/отметки */
.fgroup .err-msg{
  font-size:13px;color:var(--err);display:none;align-items:center;gap:5px;margin-top:10px;
}
.fgroup[data-state="err"] .err-msg{display:flex}
.fgroup[data-state="err"] .opt .box{border-color:var(--err)}
.fgroup[data-state="ok"] .opt .box{border-color:#8FC4A9}

/* Разделител в дълга форма */
.fsep{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:14px 0 4px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.fsep::after{content:"";flex:1;height:1px;background:var(--rule)}

/* Бутон + състояние */
.form-foot{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;margin-top:6px}
.form-foot .btn{width:100%}
.form-foot .fnote{font-size:13px;color:var(--muted);text-align:center;line-height:1.6}

/* Лента за грешка на цялата форма */
.form-alert{
  border-radius:var(--radius-sm);padding:15px 18px;font-size:14.5px;
  display:none;gap:10px;align-items:flex-start;line-height:1.6;
}
.form-alert[data-show]{display:flex}
.form-alert.err{background:var(--err-soft);border:1px solid #E8C7C4;color:#74241F}
.form-alert.ok{background:var(--ok-soft);border:1px solid #C9DED2;color:#1F4D38}

/* Брояч на знаци */
.counter{font-family:var(--mono);font-size:11.5px;color:var(--muted);align-self:flex-end}

/* ---------- Успешна страница ---------- */
.done{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:44px 40px;text-align:center;max-width:680px;margin:0 auto;
}
.done .big-ico{
  width:64px;height:64px;border-radius:50%;background:var(--ok-soft);color:var(--ok);
  display:grid;place-items:center;margin:0 auto 22px;
}
.done h1{font-size:clamp(25px,3vw,33px);margin-bottom:14px}
.done p{color:var(--muted);font-size:17px;max-width:52ch;margin:0 auto 12px}
.done .acts{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:720px){
  .form-card{padding:24px 20px}
  .form-grid{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .done{padding:32px 22px}
  .done .acts .btn{width:100%}
}


/* ==== 06-blog.css ==== */

/* ============================================================
   БЛОГ и ПОРТФОЛИО
   ============================================================ */

/* ---------- Списък статии ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.post{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:.2s;
}
.post:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.post .pthumb{
  height:140px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;color:var(--brass-2);
}
.post .pbody{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.post .pmeta{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap;
}
.post h2{font-size:20px;margin-bottom:10px;line-height:1.3}
.post p{font-size:14.5px;color:var(--muted);flex:1}
.post .pmore{
  margin-top:16px;font-size:14.5px;font-weight:600;color:var(--brass-2);
  display:flex;align-items:center;gap:7px;
}
.post:hover .pmore .ar{transform:translateX(3px)}
.post .ar{transition:transform .18s}

/* ---------- Статия ---------- */
.article-hdr{padding:52px 0 34px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.article-hdr h1{font-size:clamp(27px,3.4vw,40px);margin-bottom:16px;max-width:26ch}
.article-meta{
  display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.article-body{max-width:72ch;margin:0 auto;padding:48px 0 0}
.article-body h2{font-size:clamp(21px,2.4vw,26px);margin:44px 0 15px}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:18.5px;margin:30px 0 11px}
.article-body p{margin:0 0 17px;color:var(--ink-2);font-size:17px;line-height:1.72}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:24px;display:flex;flex-direction:column;gap:10px}
.article-body li{color:var(--ink-2);line-height:1.7}
.article-body li::marker{color:var(--brass)}
.article-body a{color:var(--brass-2);text-underline-offset:2px}
.article-body a:hover{color:var(--ink)}
.article-body strong{color:var(--ink)}
.article-body .callout{
  margin:26px 0;padding:20px 24px;background:var(--brass-soft);
  border:1px solid var(--brass-line);border-radius:var(--radius-sm);font-size:16px;
}
.article-body .callout p{margin-bottom:10px;font-size:16px}
.article-body .callout p:last-child{margin-bottom:0}
.article-body .callout b{color:var(--ink)}
.article-body figure{margin:26px 0}
.article-body figcaption{font-size:13px;color:var(--muted);margin-top:9px;text-align:center}

/* Източници */
.sources{
  margin:44px 0 0;padding:24px 26px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--radius);
}
.sources h2{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.sources ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.sources li{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.sources a{word-break:break-word}
.sources .checked{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em;
}

/* ---------- Портфолио — разширени карти ---------- */
.pf-item{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.pf-item .pf-thumb{
  height:210px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;padding:26px;position:relative;
}
/* Кадър на примера в прозорец на браузър (07.10.2026) — щракване отваря примера. */
.pf-item .pf-thumb.pf-shot{display:block;place-items:normal;height:auto;padding:0;overflow:hidden;background:#11161D;text-decoration:none}
.pf-shot-chrome{display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.pf-shot-chrome i{width:8px;height:8px;border-radius:50%;background:var(--rule-2);flex:0 0 auto}
.pf-shot-chrome i:nth-child(1){background:#E7776B}.pf-shot-chrome i:nth-child(2){background:#E9C46A}.pf-shot-chrome i:nth-child(3){background:#7DBA84}
.pf-shot-chrome span{margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--muted);
  background:#fff;border:1px solid var(--rule);border-radius:5px;padding:2px 9px}
.pf-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pf-item:hover .pf-shot img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.pf-shot img{transition:none}}
.pf-item .pf-body{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column}
.pf-item h3{font-size:20px;margin-bottom:8px}
.pf-item .pf-sub{font-size:14px;color:var(--muted);margin-bottom:14px}
.pf-item p{font-size:15px;color:var(--ink-2);flex:1}
.pf-item .pf-meta{
  margin-top:18px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.pf-item .pf-meta a{
  font-size:14.5px;font-weight:600;color:var(--brass-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.pf-item .pf-meta a:hover{color:var(--ink)}
.pf-item .pf-meta .ar{transition:transform .18s}
.pf-item .pf-meta a:hover .ar{transform:translateX(3px)}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- Галерия демо (мрежа от малки карти) ---------- */
.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.demo{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:18px 20px;text-decoration:none;transition:.18s;display:flex;flex-direction:column;gap:4px;
}
.demo:hover{border-color:var(--brass);box-shadow:var(--shadow)}
.demo .dname{font-family:var(--serif);font-size:17px;font-weight:600}
.demo .dsec{font-size:13.5px;color:var(--muted)}
.demo .dgo{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brass-2)}
.demo-pending{opacity:.72}
.demo-pending .dgo{color:var(--muted)}

@media (max-width:800px){
  .pf-grid{grid-template-columns:1fr}
  .post .pthumb{height:120px}
}

/* ==== 07-zhivi.css ==== */

/* 07-zhivi.css — живите елементи (14.10.2026). Механиките — от КИБЕР СЦЕНА (MIT, /LICENSES.txt),
   написани наново в цветовете на сайта. Без JavaScript всичко стои подредено и се чете;
   при „по-малко движение“ — без анимации (виж края). */

/* ── Бутон „Спри движението“ (WCAG 2.2.2) ── */
.pauza-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink-2);
  font:500 13px/1 var(--sans);padding:8px 12px;border-radius:999px;cursor:pointer}
.pauza-btn:hover{border-color:var(--brass)}
.pauza-btn:focus-visible{outline:2px solid var(--brass-2);outline-offset:2px}
.pauza-btn svg{width:14px;height:14px}

/* ── ПРЕОБРЪЩАНЕ: думата е стена на куб ── */
.obr{display:inline-block;position:relative;vertical-align:bottom;perspective:900px;transition:width .6s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.obr-lice{display:inline-block;color:var(--brass-2);transform-origin:50% 50% -.5em;backface-visibility:hidden}
.obr-gyrb{position:absolute;left:0;top:0;color:var(--brass-2);transform-origin:50% 50% -.5em;transform:rotateX(-90deg);backface-visibility:hidden;white-space:nowrap}
.obr-vartene .obr-lice{animation:obr-izhod .62s cubic-bezier(.6,0,.3,1) forwards}
.obr-vartene .obr-gyrb{animation:obr-vhod .62s cubic-bezier(.6,0,.3,1) forwards}
@keyframes obr-izhod{to{transform:rotateX(90deg);opacity:.2}}
@keyframes obr-vhod{from{transform:rotateX(-90deg);opacity:.2}to{transform:rotateX(0);opacity:1}}

/* ── ПЪТ НА ПРОЕКТА ── */
.pat{position:relative;display:grid;gap:18px;--pat-nivo:0}
.pat::before{content:'';position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--rule)}
.pat::after{content:'';position:absolute;left:23px;top:24px;width:2px;height:calc((100% - 48px) * var(--pat-nivo));background:var(--brass);transition:height .6s ease-out}
.pat-stapka{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start}
.pat-nomer{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:var(--card);border:2px solid var(--rule-2);font:600 17px/1 var(--serif);color:var(--muted);transition:background .3s,border-color .3s,color .3s,transform .3s}
.pat-minala .pat-nomer{border-color:var(--brass);color:var(--brass-2)}
.pat-aktivna .pat-nomer{background:var(--brass);border-color:var(--brass);color:#fff;transform:scale(1.06)}
.pat-tyalo{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 22px;transition:border-color .3s,box-shadow .3s,transform .3s}
.pat-aktivna .pat-tyalo{border-color:var(--brass-line);box-shadow:var(--shadow-lg);transform:translateX(4px)}
.pat-tyalo h3{margin:0 0 6px;font:600 20px/1.3 var(--serif);color:var(--ink)}
.pat-tyalo p{margin:0;color:var(--ink-2)}
.pat-tyalo .pat-vreme{display:inline-block;margin-top:10px;font:500 13px/1 var(--mono);color:var(--brass-2);background:var(--brass-soft);padding:6px 10px;border-radius:999px}

/* ── ГАЛЕРИЯ В ПРОСТРАНСТВОТО ── */
.g3{position:relative;outline:none}
.g3-scena{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.g3-karta{margin:0;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.g3-karta a{display:block;color:inherit;text-decoration:none}
.g3-karta img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--paper-2)}
.g3-karta figcaption{padding:12px 14px;font:600 15px/1.3 var(--sans);color:var(--ink)}
.g3-karta figcaption span{display:block;font:400 13px/1.4 var(--sans);color:var(--muted);margin-top:2px}
.g3-upr{display:none}
.g3-zhiva .g3-scena{display:block;height:370px;perspective:1600px;overflow:hidden;cursor:grab;touch-action:pan-y}
.g3-zhiva .g3-prasten{position:absolute;left:50%;top:40px;width:360px;margin-left:-180px;transform-style:preserve-3d}
.g3-zhiva .g3-plavno{transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.g3-zhiva .g3-karta{position:absolute;left:0;top:0;width:360px;backface-visibility:hidden}
/* картите отзад — бледа само снимката; надписът остава с пълен контраст (достъпност) */
.g3-zhiva .g3-karta img{transition:opacity .4s,filter .4s;opacity:.5;filter:saturate(.7)}
.g3-zhiva .g3-otpred img{opacity:1;filter:none}
.g3-zhiva .g3-otpred{box-shadow:var(--shadow-lg)}
.g3-zhiva .g3-upr{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.g3-upr button:not(.pauza-btn){all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule-2);background:var(--card);color:var(--ink)}
.g3-upr button:not(.pauza-btn):hover{border-color:var(--brass)}
.g3-upr button:focus-visible{outline:2px solid var(--brass-2);outline-offset:2px}
.g3-upr [data-g3-nadpis]{min-width:220px;text-align:center;font:600 16px/1.3 var(--serif);color:var(--ink)}
@media (max-width:720px){
  .g3-zhiva .g3-scena{height:290px}
  .g3-zhiva .g3-prasten{width:260px;margin-left:-130px;top:24px}
  .g3-zhiva .g3-karta{width:260px}
}

/* ── БРОЯЧ ── */
.broyach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.broyach > div{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 18px 16px}
.broyach [data-chislo]{display:flex;font:600 clamp(30px,4vw,40px)/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--ink);letter-spacing:-.01em}
.br-kolelo{display:inline-block;height:1em;overflow:hidden;width:.62em;text-align:center}
.br-lenta{display:block;white-space:pre;line-height:1em;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.broyach small{display:block;margin-top:8px;font:400 14px/1.4 var(--sans);color:var(--muted)}
.broyach-izvor{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:720px){.broyach{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── ПЛАНОВЕ: превключвател месечно/годишно ── */
.period{display:inline-flex;padding:4px;border:1px solid var(--rule-2);border-radius:999px;background:var(--card);gap:4px}
.period button{all:unset;cursor:pointer;padding:8px 16px;border-radius:999px;font:500 14px/1 var(--sans);color:var(--ink-2)}
.period button[aria-pressed="true"]{background:var(--ink);color:#fff}
.period button:focus-visible{outline:2px solid var(--brass-2);outline-offset:2px}
.spestqvate[hidden]{display:none}
.spestqvate{display:inline-block;margin-left:6px;font:500 12px/1 var(--mono);color:var(--ok);background:var(--ok-soft);padding:4px 8px;border-radius:999px}

/* ── ЖИВИ ВРЪЗКИ (AI помощникът) ── */
.vrazki{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:22px 18px;box-shadow:var(--shadow)}
.vrazki svg{width:100%;height:auto;display:block}
.vrazki .vr-pat{fill:none;stroke:var(--rule-2);stroke-width:2;stroke-dasharray:4 6}
.vrazki .vr-tochka{fill:var(--brass);filter:drop-shadow(0 0 6px rgba(156,107,31,.55));opacity:0}
.vrazki [data-vazel] rect{fill:var(--card);stroke:var(--rule-2);stroke-width:1.5;transition:stroke .3s,fill .3s}
.vrazki [data-vazel] text{font:600 19px var(--sans);fill:var(--ink-2)}
.vrazki .vr-svetne rect{stroke:var(--brass);fill:var(--brass-soft)}
.vrazki .vr-chovek rect{stroke:var(--ok)}

/* ── КАРТИ С ПРОЖЕКТОР ── */
.prozhektor > *{position:relative;isolation:isolate}
.prozhektor > *::before{content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(179,126,44,.18),transparent 60%)}
.prozhektor:hover > *::before{opacity:1}

/* ── СВЕТЕЩ РЪБ на основния бутон ── */
.btn-rab{position:relative;isolation:isolate}
.btn-rab::after{content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;padding:2px;
  background:conic-gradient(from var(--rab-agal,0deg),transparent 0 70%,var(--brass-3) 80%,#fff3 86%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.js .btn-rab::after{animation:rab 3.2s linear infinite}
@property --rab-agal{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rab{to{--rab-agal:360deg}}

/* ── Спряно движение и „по-малко движение“ ── */
/* „Спрете движението“ спира всичко, което се движи само — и първия екран (WCAG 2.2.2) */
.zhivi-pauza .btn-rab::after,.zhivi-pauza .btn-orbita::before,.zhivi-pauza .hero-lenta-in,
.zhivi-pauza :is(.hero-zarno,.hero-svetlina,.hero-foto-media,.hero-foto .eyebrow i,.hero-studio h1 em,.vitrina-telefon,.badge-float,.vitrina-tab-hod){animation-play-state:paused!important}
[data-pauza][hidden]{display:none!important}
html:not(.js) [data-pauza]{display:none}
@media (prefers-reduced-motion:reduce){
  .obr,.pat::after,.pat-tyalo,.br-lenta,.g3-zhiva .g3-plavno,.g3-karta{transition:none!important}
  .btn-rab::after,.obr-lice,.obr-gyrb{animation:none!important}
}

/* ── Началната (14.10.2026): лентата долу в първия екран е от връзки ── */
.hero-lenta a{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(251,248,243,.78);text-decoration:none;padding:4px 0}
.hero-lenta a:hover,.hero-lenta a:focus-visible{color:#fff}
.hero-lenta a:focus-visible{outline:2px solid var(--brass-3);outline-offset:4px}
.hero-lenta.tece:focus-within .hero-lenta-in{animation-play-state:paused}
.zhivi-pauza .hero-lenta-in{animation-play-state:paused!important}
.hero-pauza{position:absolute;right:12px;bottom:12px;z-index:3;width:32px;height:32px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.34);background:rgba(14,20,29,.78);color:#fff}
.hero-pauza:hover{border-color:var(--brass-3)}
.hero-pauza:focus-visible{outline:2px solid var(--brass-3);outline-offset:2px}
.hero-pauza[aria-pressed="true"]{background:var(--brass);border-color:var(--brass)}

/* ── Превключвателят месечно/годишно — само с JavaScript ── */
[data-planove] > .period{display:none;margin:0 0 22px}
.js [data-planove] > .period{display:inline-flex}

/* ── Пътят — списък без номера (номерата са в кръгчетата) ── */
ol.pat{list-style:none;margin:0;padding:0}

/* ── Галерията без JavaScript и при „по-малко движение“ — решетка ── */
html:not(.js) .g3-karta img[data-src]{display:none}
.g3:not(.g3-zhiva) .g3-scena{display:block}
.g3:not(.g3-zhiva) .g3-prasten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.g3-zhiva:focus-visible{outline:2.5px solid var(--brass);outline-offset:6px;border-radius:var(--radius)}
.g3-upr .pauza-btn{margin-left:12px}
.g3 + .broyach{margin-top:34px}

/* ── AI помощникът: текст вляво, схемата вдясно ── */
.ai-red{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.ai-red .sec-head{margin-bottom:0}
@media (max-width:900px){.ai-red{grid-template-columns:minmax(0,1fr);gap:24px}}
.ai-red .ticks{margin-top:18px}
@media (max-width:720px){
  .g3-zhiva .g3-upr{flex-wrap:wrap;row-gap:10px}
  .g3-upr [data-g3-nadpis]{min-width:0;flex:1 1 160px}
  .g3-upr .pauza-btn{margin-left:0;flex-basis:100%;justify-content:center;max-width:220px}
  .vrazki{padding:16px 10px}
  .vrazki [data-vazel] text{font-size:22px}
}

/* ── След прегледа за достъпност (14.10.2026) ── */
/* обърнатата дума върху тъмната снимка — златна (кафявото беше 2,1:1) */
.hero-foto .obr-lice,.hero-foto .obr-gyrb,.hero-foto .obr-lice em{color:#E9C98F}
/* лентата: при Tab спира; без движение — плъзга се с пръст */
.hero-lenta.lenta-fokus .hero-lenta-in{animation:none!important}
.hero-lenta{scroll-padding-inline:10% 64px}
.hero-lenta:not(.tece){overflow-x:auto;scrollbar-width:none}
.hero-lenta:not(.tece)::-webkit-scrollbar{display:none}
/* под пакетите — обръщането на риска */
.pak-riskno{margin:22px auto 0;max-width:62ch;text-align:center;font-size:15.5px;color:var(--ink-2)}
@media (max-width:400px){.hero-studio h1{font-size:31px}}


/* ==== 08-branshove.css ==== */

/* 08-branshove.css — страниците „Сайт за <бранш>“ (/sait-za-*) и групите в портфолиото (14.10.2026).
   Сглобяват се от src/branshove.json с tools/branshove.mjs. */

/* ── Първи екран: текст вляво, кадър от примера вдясно (компютър + телефон) ── */
.bransh-hero{padding:44px 0 52px}
.bransh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.bransh-txt h1{max-width:18ch}
.bransh-cena{margin:16px 0 0;font:500 14px/1.55 var(--sans);color:var(--ink-2);max-width:60ch;
  padding:10px 14px;background:var(--card);border:1px solid var(--brass-line);border-radius:var(--radius-sm)}
.bransh-dovarie{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.bransh-dovarie li{display:inline-flex;align-items:center;gap:7px}
.bransh-dovarie svg{color:var(--ok);flex:none}

.bransh-kadar{position:relative;display:block;border-radius:var(--radius);overflow:visible;text-decoration:none;
  background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow-lg);margin-right:34px}
.bransh-chrome{display:flex;align-items:center;gap:5px;padding:9px 12px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  border-radius:var(--radius) var(--radius) 0 0}
.bransh-chrome i{width:8px;height:8px;border-radius:50%;flex:none}
.bransh-chrome i:nth-child(1){background:#E7776B}.bransh-chrome i:nth-child(2){background:#E9C46A}.bransh-chrome i:nth-child(3){background:#7DBA84}
.bransh-chrome span{margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px var(--mono);color:var(--muted)}
.bransh-kadar > img:not(.bransh-tel){display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;
  border-radius:0 0 var(--radius) var(--radius)}
.bransh-tel{position:absolute;right:-34px;bottom:-26px;width:27%;height:auto;aspect-ratio:1/2;object-fit:cover;object-position:top;
  border:5px solid #17212E;border-radius:22px;box-shadow:var(--shadow-lg);background:#17212E}
.bransh-kadar:hover{border-color:var(--brass)}
.bransh-kadar:focus-visible{outline:2.5px solid var(--brass);outline-offset:4px}

/* ── Текстът ── */
.bransh-uvod p{font-size:18px;line-height:1.75;color:var(--ink-2);margin-bottom:18px}
.bransh-uvod p:first-child{font-size:19.5px;color:var(--ink)}
.bransh-uvod .micro{font-size:13.5px;color:var(--muted);margin-top:8px}
.bransh-funkcii .icard h3{font-size:17.5px}
.bransh-kam{margin-top:26px;text-align:center}
.bransh-kam a:not(.btn){color:var(--brass-2);font-weight:600;text-decoration:none}
.bransh-kam a:not(.btn):hover{color:var(--ink)}

.bransh-paket{padding:34px 34px 28px;border-color:var(--brass-line)}
.bransh-paket h2{font-size:clamp(22px,2.6vw,29px);margin-bottom:12px}
.bransh-paket p{color:var(--ink-2)}
.bransh-paket .cta-row{margin:22px 0 14px}
.bransh-paket .micro a{color:var(--brass-2)}

/* ── Сродни браншове ── */
.bransh-oshte{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bransh-oshte-k{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s,border-color .2s}
.bransh-oshte-k img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.bransh-oshte-k span{display:block;padding:14px 16px;font:600 16px/1.3 var(--serif)}
.bransh-oshte-k:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--rule-2)}

/* ── Портфолио по групи ── */
.pf-grupa{font-size:15px;font-family:var(--mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-2);
  margin:46px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.pf-grupa:first-of-type{margin-top:0}

@media (max-width:900px){
  .bransh-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .bransh-kadar{margin-right:22px}
  .bransh-tel{right:-22px;width:25%}
}
@media (max-width:720px){
  .bransh-hero{padding:30px 0 40px}
  .bransh-oshte{grid-template-columns:1fr}
  .bransh-paket{padding:26px 22px 22px}
  .bransh-uvod p{font-size:17px}
  .bransh-uvod p:first-child{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.bransh-oshte-k{transition:none}}

/* ── Под статиите: връзки към браншовете ── */
.bransh-vrazki{border-top:1px solid var(--rule)}
.bransh-vrazki h2{font-size:clamp(21px,2.4vw,26px);margin-bottom:8px}
.bransh-vrazki p{color:var(--muted);margin-bottom:16px}
.bransh-cipove{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.bransh-cipove a{display:inline-block;padding:7px 14px;border:1px solid var(--rule-2);border-radius:999px;background:var(--card);
  color:var(--ink-2);font-size:14.5px;text-decoration:none;transition:border-color .2s,color .2s}
.bransh-cipove a:hover,.bransh-cipove a:focus-visible{border-color:var(--brass);color:var(--brass-2)}


/* ==== 09-vitrina.css ==== */

/* ВИТРИНАТА на началната (16.10.2026, от образеца proba/ — „Чистата витрина“, етапи 2–4).
   Галерия: витрина без собствен цвят — тъмна сцена само в херото, светло неутрално тяло, бутоните черно-бели;
   цветът идва от примерите. Всичко е под .vt (херото, „Всичките 16“, гаранцията, диалогът) и с представка vt-:
   стиловете се слепват с целия сайт, а .vitrina, .sec, .lead, .kicker, .pauza вече ги има там.
   Мерки: скала ~1,25, мрежа 8 px, 2 сенки, 2 времена (180 / 700 ms), една крива. Шрифтът е Inter на сайта —
   новият заглавен шрифт е за след 19.10 (етап 3). */

.vt {
  --scena: #0A0A0C; --scena-2: #141418; --scena-tekst: #F3F3EE; --scena-tih: #A3A3AB; --scena-liniya: rgba(255,255,255,.10);
  --fon: #FFFFFF; --fon-2: #F4F4F0; --tekst: #0D0D10; --tekst-2: #3A3A42; --tih: #6A6A73; --liniya: #E5E5DF;
  --sianka-1: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
  --sianka-2: 0 40px 80px -30px rgba(0,0,0,.85), 0 18px 36px -18px rgba(0,0,0,.6);
  --burzo: 180ms; --bavno: 700ms; --kriva: cubic-bezier(.22,.61,.36,1);
  font-family: var(--sans); line-height: 1.55;
}
.vt h1, .vt h2 { font-family: var(--sans); }
.vt img { display: block; max-width: 100%; }
.vt-w { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ── бутони: черно-бели, без цвят ── */
.vt-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: -.005em; transition: transform var(--burzo) var(--kriva), background var(--burzo); }
.vt-b:active { transform: scale(.98); }
.vt-b-svetal { background: var(--scena-tekst); color: var(--scena); }
.vt-b-svetal:hover { background: #fff; color: var(--scena); }
.vt-b-tamen { background: var(--tekst); color: var(--fon); }
.vt-b-tamen:hover { background: #26262c; color: var(--fon); }
.vt-b-malak { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* ── херото: тъмна сцена с прожектор ── */
.vt-geroy { position: relative; overflow: hidden; color: var(--scena-tekst);
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(255,255,255,.13), rgba(255,255,255,0) 70%),
    radial-gradient(46% 18% at 50% 88%, rgba(255,255,255,.07), rgba(255,255,255,0) 72%),
    var(--scena);
  padding: 20px 16px 28px; text-align: center; }
.vt-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--scena-tih); }
.vt-k-tamen { color: var(--tih); }
.vt-geroy h1 { margin: 0 auto; max-width: 15ch; font-weight: 600; font-size: clamp(32px, 8.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; color: var(--scena-tekst); }
.vt-h1-2 { color: #CFCFC8; }
.vt-lead { margin: 16px auto 0; max-width: 46ch; color: var(--scena-tih); font-size: 17px; }
.vt-lead-gore { display: none; }

/* витрината */
.vt-vitrina { position: relative; margin-top: 12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* размерите са в CSS (иначе сцената скача след зареждане — CLS): телефон — височината на екрана минус
   лентата, заглавието, надписа и бутона с цената (~334 px); компютър — картата 16:10 + лента 30 px */
.vt-vitrina { --v-h: clamp(220px, calc(100svh - 334px), 560px); --k-h: var(--v-h); --k-w: min(calc(var(--v-h) / 1.72), 62vw, 300px); }
@media (min-width: 1024px) { .vt-vitrina { --k-w: min(540px, 38vw, max(260px, calc((100svh - 490px) * 1.6))); --k-h: calc(var(--k-w) * .625 + 30px); --v-h: calc(var(--k-h) + 36px); } }
.v-scena { position: relative; height: var(--v-h); perspective: 1400px; perspective-origin: 50% 40%; }
.v-karti { position: absolute; inset: 0; transform-style: preserve-3d; }
.v-karta { position: absolute; left: 50%; top: 0; width: var(--k-w); height: var(--k-h); margin-left: calc(var(--k-w) / -2);
  transition: transform var(--bavno) var(--kriva), opacity var(--bavno) var(--kriva), filter var(--bavno); will-change: transform; cursor: pointer; }
.v-karta.bez-prehod { transition: none; }
.v-ramka { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; background: #111; box-shadow: var(--sianka-2), 0 0 0 1px rgba(255,255,255,.14); }
.v-ekran { position: absolute; inset: 0; overflow: hidden; background: #0d0d0f; }
.v-ekran img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
/* живата рамка: прозрачна до „готово“ от демото, после плавно (без бял екран — снимката е отдолу) */
.v-ekran iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: transparent; opacity: 0; transition: opacity 450ms var(--kriva); }
.v-ekran iframe.gotova { opacity: 1; }
.v-karta.zhiva .v-ekran img { visibility: hidden; animation: none; }  /* живото е отгоре, снимката почива */
/* живите съседи се виждат живи: без размиване, по-слабо потъмняване */
.v-karta.zhiva, .v-karta[data-video="tece"] { filter: none !important; }
.v-karta.zhiva::after, .v-karta[data-video="tece"]::after { opacity: calc(var(--tamno, 0) * .55); }
.v-karta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--scena); opacity: var(--tamno, 0); pointer-events: none; transition: opacity var(--bavno); }

/* телефон (до 1023 px) */
.rezhim-daga .v-karta { border-radius: 30px; }
.rezhim-daga .v-ramka { border-radius: 30px; padding: 7px; background: linear-gradient(160deg, #2a2a30, #121215); }
.rezhim-daga .v-ekran { inset: 7px; border-radius: 23px; }

/* браузър (от 1024 px) */
.rezhim-prasten .v-karta { border-radius: 14px; }
.rezhim-prasten .v-ramka { border-radius: 14px; }
.rezhim-prasten .v-ekran { top: 30px; }
.v-bar { position: absolute; inset: 0 0 auto; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #1b1b20; color: #8d8d96; font: 500 11px/1 var(--sans); letter-spacing: .01em; }
.v-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a42; }
.v-bar span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* адресът — чрез CSS, не текст: иначе е „текст в бутона, който не е в името му“ (Lighthouse, 16.10) */
.v-url::after { content: attr(data-url); }
.rezhim-daga .v-bar { display: none; }

/* бавното превъртане в предната карта (ако видеото не тръгне) */
.v-karta.skrol .v-ekran img { animation: v-skrol var(--skrol-t, 14s) var(--kriva) var(--skrol-zab, .8s) infinite alternate; }
@keyframes v-skrol { 0%, 12% { transform: translateY(0); } 90%, 100% { transform: translateY(var(--skrol, 0px)); } }

.v-pod { position: absolute; left: 50%; bottom: -6px; width: min(70%, 640px); height: 40px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); pointer-events: none; }

/* долният ред: ‹ надпис-бутон › (5-секундният тест: нищо върху телефоните) */
.v-dolu { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.v-str { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--scena-liniya); background: rgba(255,255,255,.03); color: var(--scena-tekst); display: grid; place-items: center; cursor: pointer; transition: background var(--burzo); }
.v-str:hover { background: rgba(255,255,255,.08); }
.v-str svg { width: 20px; height: 20px; }
.v-nadpis { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; flex: 0 1 340px; display: grid; gap: 3px; justify-items: center; padding: 4px 10px; border-radius: 14px; transition: background var(--burzo); }
.v-nadpis:hover { background: rgba(255,255,255,.05); }
.v-nadpis:focus-visible { outline: 2px solid #7FB2FF; outline-offset: 2px; }
.v-n1 { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.v-n1 b { font-weight: 600; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-n2 { max-width: 100%; font-size: 13px; color: var(--scena-tih); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* пулсът — с transform/opacity (композиторът): с box-shadow основната нишка рисуваше всеки кадър */
.tochka { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.tochka::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(61,220,132,.6); animation: puls 2s infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3); opacity: 0; } }

.vt-dolu { margin-top: 14px; display: grid; justify-items: center; gap: 10px; }
.vt-doverie { margin: 0; font-size: 13px; color: var(--scena-tih); }
.vt-pauza { font: 500 12px/1 var(--sans); color: var(--scena-tih); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.vt-pauza:hover { color: var(--scena-tekst); }
.vt-bel { margin: 6px 0 0; font-size: 12px; color: var(--scena-tih); }

/* компютър: заглавието на един ред, пръстенът под него */
@media (min-width: 1024px) {
  .vt-geroy { padding: 32px 32px 36px; }
  .vt-geroy h1 { max-width: none; font-size: clamp(48px, 4.6vw, 68px); }
  .vt-lead { margin-top: 12px; max-width: 64ch; }
  .vt-lead-gore { display: block; }
  .vt-vitrina { margin-top: 20px; }
}

/* ── тялото ── */
.vt-sec { padding: 72px 0; color: var(--tekst); }
.vt-sec h2 { margin: 0; font-weight: 600; font-size: clamp(28px, 5.6vw, 52px); line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; color: var(--tekst); }
.vt-lead-tamen { margin: 16px 0 0; max-width: 56ch; color: var(--tekst-2); }
.vt-sec-16 { background: var(--fon); }
.vt-lenta16 { list-style: none; margin: 32px 0 0; padding: 0 16px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.vt-lenta16::-webkit-scrollbar { display: none; }
.vt-lenta16 li { scroll-snap-align: start; }
.vt-lenta16 button { all: unset; cursor: pointer; display: grid; gap: 8px; width: 136px; }
.vt-lenta16 button:focus-visible { outline: 2px solid var(--tekst); outline-offset: 4px; border-radius: 14px; }
.vt-lenta16 img { width: 136px; height: 230px; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: var(--sianka-1), 0 0 0 1px var(--liniya); transition: transform var(--burzo) var(--kriva); }
.vt-lenta16 button:hover img, .vt-lenta16 button:focus-visible img { transform: translateY(-4px); }
.vt-lenta16 b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.vt-lenta16 small { font-size: 12px; color: var(--tih); }
@media (min-width: 1024px) { .vt-lenta16 { padding-inline: max(16px, (100% - 1120px) / 2); scroll-padding-inline: max(16px, (100% - 1120px) / 2); } }
.vt-vsichki { margin: 20px 0 0; }
.vt-vsichki a { color: var(--tekst); font-weight: 600; text-underline-offset: 3px; }

.vt-sec-garancia { background: var(--fon-2); }
.vt-garancia { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; counter-reset: g; }
.vt-garancia li { counter-increment: g; position: relative; padding: 24px 0 24px 48px; border-bottom: 1px solid var(--liniya); font-size: clamp(24px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -.025em; }
.vt-garancia li::before { content: '0' counter(g); position: absolute; left: 0; top: 24px; font-size: 13px; line-height: 2.4; letter-spacing: .1em; color: var(--tih); }
.vt-garancia b { font-weight: 600; display: block; }
.vt-garancia span { color: var(--tih); display: block; }
.vt-kak { margin: 28px 0 24px; color: var(--tekst-2); max-width: 62ch; }

/* ── живият пример на цял екран ── */
.ziv { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--scena); color: var(--scena-tekst); overscroll-behavior: contain; }
.ziv::backdrop { background: rgba(0,0,0,.6); }
.ziv[open] { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.ziv .vt-b { white-space: nowrap; }
.ziv-lenta { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--scena-liniya); }
.ziv-ime { margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.ziv-ime span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ziv-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--scena-liniya); background: transparent; color: var(--scena-tekst); display: grid; place-items: center; cursor: pointer; }
.ziv-x svg { width: 20px; height: 20px; }
/* Докато сайтът се зарежда, отдолу стои постерът му на цял екран (-ziv*.webp), декодиран предварително; фонът е
   средният му цвят. Сайтът изплува ОТГОРЕ само при „готово“ и постерът не изгасва → без тъмна дупка.
   Невидимата рамка не приема докосвания, докато не изплува. */
.ziv-kadar { grid-row: 2; grid-column: 1; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 0; pointer-events: none; }
.ziv iframe { grid-row: 2; grid-column: 1; position: relative; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity 150ms var(--kriva); }
.ziv iframe.gotova { opacity: 1; pointer-events: auto; }
.ziv:not(.gotov) .ziv-lenta::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--scena-tekst), transparent); opacity: .5; animation: ziv-zarezhda 1.1s ease-in-out infinite; }
@keyframes ziv-zarezhda { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
html.ziv-otvoren { overflow: hidden; }

/* „Спрете движението“ и „по-малко движение“ */
.pauza-vkl .v-karta.skrol .v-ekran img, .pauza-vkl .tochka::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .v-karta, .v-karta::after, .v-ekran iframe, .ziv iframe { transition: none; }
  .ziv:not(.gotov) .ziv-lenta::after { animation: none; }
  .v-karta.skrol .v-ekran img, .tochka::after { animation: none; }
  .vt-pauza { display: none; }
}
/* без JavaScript: витрината е един кадър (първата карта), лентата — само надписите */
html:not(.js) .v-karta:not(:first-child), html:not(.js) .v-dolu, html:not(.js) .vt-pauza { display: none; }
html:not(.js) .v-scena, html:not(.js) .vt-lenta16 { display: none; }
.vt-bez-js { width: auto; height: min(70svh, 560px); margin: 0 auto; border-radius: 24px; box-shadow: var(--sianka-2); }
.vt-branshove { margin-top: 40px; }
.vt-branshove .vt-lead-tamen { margin-bottom: 12px; }

/* пакетите на началната — двата основни (16.10.2026); магазинът и социалните мрежи — един ред под тях */
.packs.packs-2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
@media (max-width: 720px) { .packs.packs-2 { grid-template-columns: 1fr; gap: 20px; } }
.pak-oshte { margin: 22px auto 0; max-width: 62ch; text-align: center; font-size: 15px; color: var(--muted); }
.pak-oshte a { color: var(--ink); }