/* Променливи шрифтове от нашия сървър, смалени до знаците, които
   сайтът използва. Един файл покрива всички тежести — виж shriftove.py */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/golos-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/golos-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600 900;font-display:swap;src:url("/fonts/unbounded-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600 900;font-display:swap;src:url("/fonts/unbounded-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ═══════════════════════════════════════════════════════════
   ILLUMI · навигация
   Идея: панелът е екран. Винаги е обратното на страницата.
   Цветът е температура на светлината, не хроматичен акцент.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#FAFAF7;
  --bg-2:#F1EFE9;
  --ink:#111110;
  --ink-2:#57564F;
  --ink-3:#8C8B83;
  --rule:#E0DED5;
  --rule-2:#CBC8BC;

  /* панелът — инверсия на страницата */
  --pan:#0C0C0B;
  --pan-lit:#FFF7EA;
  --pan-mid:#9A988F;
  --pan-dim:#686760;
  --pan-rule:#252420;
  --pan-rule-2:#3A3833;

  --brand:#F36E27;        /* оранжевото от логото */
  --brand-2:#F04D4C;      /* коралът от логото */
  --brand-ink:#B14508;    /* за текст върху светло */
  --pan-brand:#F36E27;    /* панелът е тъмен в светла тема */
  --amber:#F36E27;
  --sel:rgba(243,110,39,.20);
  --warm:#B14508;
  --beam-blend:multiply;
  --beam-op:.11;
  --mote:0;
  --beam:linear-gradient(102deg,rgba(243,110,39,.15),rgba(243,110,39,.035) 62%,rgba(243,110,39,0));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="orange"]){
    --bg:#0C0C0B;
    --bg-2:#171614;
    --ink:#F5F3EE;
    --ink-2:#A6A49B;
    --ink-3:#76746C;
    --rule:#26251F;
    --rule-2:#38362F;

    --pan:#FAFAF7;
    --pan-lit:#111110;
    --pan-mid:#6C6B63;
    --pan-dim:#86847C;
    --pan-rule:#E0DED5;
    --pan-rule-2:#CBC8BC;

    --brand:#F36E27;
    --brand-2:#F04D4C;
    --brand-ink:#FFA366;
    --pan-brand:#B14508;  /* панелът е светъл в тъмна тема */
    --amber:#F36E27;
    --sel:rgba(243,110,39,.20);
    --warm:#FFB37A;
    --beam-blend:screen;
    --beam-op:.26;
    --mote:.5;
    --beam:linear-gradient(102deg,rgba(243,110,39,.17),rgba(243,110,39,.04) 62%,rgba(243,110,39,0));
  }
}
:root[data-theme="dark"]{
  --bg:#0C0C0B;
  --bg-2:#171614;
  --ink:#F5F3EE;
  --ink-2:#A6A49B;
  --ink-3:#76746C;
  --rule:#26251F;
  --rule-2:#38362F;

  --pan:#FAFAF7;
  --pan-lit:#111110;
  --pan-mid:#6C6B63;
  --pan-dim:#86847C;
  --pan-rule:#E0DED5;
  --pan-rule-2:#CBC8BC;

  --brand:#F36E27;
  --brand-2:#F04D4C;
  --brand-ink:#FFA366;
  --pan-brand:#B14508;  /* панелът е светъл в тъмна тема */
  --amber:#F36E27;
  --sel:rgba(243,110,39,.20);
  --warm:#FFB37A;
  --beam-blend:screen;
  --beam-op:.26;
  --mote:.5;
  --beam:linear-gradient(102deg,rgba(243,110,39,.17),rgba(243,110,39,.04) 62%,rgba(243,110,39,0));
}

/* ── ОРАНЖЕВА ТЕМА — светът на Illumi под топла светлина ──
   Стои СЛЕД тъмната, за да я побеждава при еднаква специфичност. */
:root[data-theme="orange"]{
  --bg:#FFF3E9;
  --bg-2:#FCE4D2;
  --ink:#23120A;
  --ink-2:#6C4630;
  --ink-3:#A38168;
  --rule:#F2DAC6;
  --rule-2:#E4C1A5;

  --pan:#1A0D05;
  --pan-lit:#FFEEDF;
  --pan-mid:#B0937E;
  --pan-dim:#7C614C;
  --pan-rule:#33200F;
  --pan-rule-2:#4A311C;

  --brand:#F36E27;
  --brand-2:#F04D4C;
  --brand-ink:#A63E05;
  --pan-brand:#F36E27;
  --amber:#F36E27;
  --sel:rgba(243,110,39,.24);
  --warm:#A63E05;
  --beam-blend:multiply;
  --beam-op:.16;
  --mote:0;
  --beam:linear-gradient(102deg,rgba(243,110,39,.20),rgba(243,110,39,.05) 62%,rgba(243,110,39,0));
}
/* залата в оранжевата тема е топло опушена, не студено черна */
:root[data-theme="orange"] .hero{
  --room:#150A03;
  --room-2:#1F0F06;
  --lit:#FFF1E3;
  --lit-2:#C4A896;
  --lit-3:#7A6151;
  --hair:#33200F;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ───────────────────────── ХЕДЪР ───────────────────────── */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
.hdr__in{
  max-width:1400px;margin:0 auto;padding:0 32px;
  height:74px;display:flex;align-items:center;gap:40px;
}

.mark{display:flex;align-items:center;flex:0 0 auto}
.mark img{display:block;width:108px;height:auto}
@media (max-width:600px){.mark img{width:92px}}
/* точката над i-то е лампата: единственият светещ пиксел в целия хедър */

.nav{flex:1 1 auto;min-width:0}
.nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:30px}
.nav__item{position:static}
.nav__link{
  display:block;position:relative;
  padding:26px 0;
  font-size:15.5px;font-weight:600;letter-spacing:-.008em;
  color:var(--ink-2);
  transition:color .15s;
  white-space:nowrap;   /* около 1000px „За нас“ се пречупваше на два реда */
}
.nav__link:hover{color:var(--ink)}
/* активният елемент се „закача“ за панела с линия */
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.nav__item.is-open .nav__link{color:var(--ink)}
.nav__item.is-open .nav__link::after{transform:scaleX(1)}

.hdr__end{display:flex;align-items:center;gap:26px;flex:0 0 auto}
/* три квадратчета: всяко показва почвата на своята тема */
.thm{display:flex;gap:5px;align-items:center;flex:0 0 auto}
.thm__b{
  width:21px;height:21px;padding:0;
  border:1px solid var(--rule-2);
  position:relative;transition:border-color .18s,transform .18s;
}
.thm__b:hover{transform:translateY(-1px);border-color:var(--ink-3)}
.thm__b[aria-pressed="true"]{border-color:var(--brand)}
.thm__b[aria-pressed="true"]::after{
  content:"";position:absolute;left:-3px;right:-3px;bottom:-4px;height:1px;
  background:var(--brand);
}
.thm__b[data-set="light"]{background:#FAFAF7}
.thm__b[data-set="dark"]{background:#0C0C0B}
.thm__b[data-set="orange"]{background:#F36E27}
.tel{
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;
}
.tel small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.cta{
  display:inline-flex;align-items:center;height:42px;padding:0 22px;
  background:var(--ink);color:var(--bg);
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;
  transition:opacity .15s;
}
.cta:hover{opacity:.84}
.ghost{
  width:40px;height:40px;display:none;place-items:center;
  border:1px solid var(--rule-2);color:var(--ink);
}

/* ───────────────────────── ПАНЕЛ ─────────────────────────
   Инверсия на страницата. Без стъкло, без сенки, без ъгли.  */
.panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--pan);
  color:var(--pan-lit);
  border-bottom:1px solid var(--pan-rule);
  overflow:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .34s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.nav__item.is-open .panel,
.nav__item:focus-within .panel{clip-path:inset(0 0 0 0);pointer-events:auto}

/* растерът на екрана — текстура, не градиент */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.028) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode:overlay;
}

.panel__in{
  position:relative;z-index:1;
  max-width:1400px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:300px 1fr;
  min-height:448px;
}

/* включване на екрана — светлината минава веднъж отгоре надолу */
.nav__item.is-open .panel__in::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:var(--pan-lit);opacity:.5;pointer-events:none;
  animation:powerline .42s cubic-bezier(.3,.7,.3,1) 1;
}
@keyframes powerline{
  from{transform:translateY(0);opacity:.55}
  to{transform:translateY(448px);opacity:0}
}

/* ── лявата колона: категориите, само една е осветена ── */
.cats{
  padding:40px 44px 40px 0;
  border-right:1px solid var(--pan-rule);
  display:flex;flex-direction:column;
}
.cat{
  display:flex;align-items:baseline;gap:16px;width:100%;
  padding:11px 0;text-align:left;
  color:var(--pan-dim);
  transition:color .2s;
}
.cat__n{
  font-size:11px;font-weight:600;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--pan-dim);
  transition:color .2s;
  flex:0 0 auto;width:18px;
}
.cat__t{
  font-family:Unbounded,"Golos Text",sans-serif;
  font-weight:700;font-size:23px;letter-spacing:-.045em;line-height:1.08;
}
.cat.is-on{color:var(--pan-lit)}
.cat.is-on .cat__n{color:var(--pan-brand)}
.cat:hover{color:var(--pan-mid)}
.cat.is-on:hover{color:var(--pan-lit)}

.cats__foot{
  margin-top:auto;padding-top:22px;
  border-top:1px solid var(--pan-rule);
  color:var(--pan-mid);font-size:13.5px;line-height:1.5;
}
.cats__foot b{color:var(--pan-lit);font-weight:600}

/* ── дясната страна: съдържанието на осветената категория ── */
.body{padding:40px 0 40px 44px;display:flex;flex-direction:column}
.set{display:none}
.set.is-on{display:block;animation:lit .3s cubic-bezier(.2,.7,.2,1)}
@keyframes lit{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.set__grid{columns:2;column-gap:46px}

/* ── витрината: екранът показва реална работа ── */
.panel--show .set.is-on{display:grid;grid-template-columns:1fr 268px;gap:46px;align-items:start}
.show{padding-top:2px}
.show__k{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pan-dim);margin-bottom:12px;
}
.shot{
  display:block;position:relative;overflow:hidden;
  background:var(--pan-rule);
  /* смяната е рязка, като превключване на източник */
  animation:cut .16s steps(2,end) 1;
}
@keyframes cut{0%{opacity:0}50%{opacity:.35}100%{opacity:1}}
.shot img{display:block;width:100%;height:auto;filter:saturate(.94) contrast(1.02)}
.shot--big{margin-bottom:11px}
.show__c{font-size:13px;line-height:1.45;color:var(--pan-mid);margin-bottom:5px}
.show__c b{color:var(--pan-lit);font-weight:600;display:block}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0 12px}
.show__more{
  display:inline-block;font-size:13px;font-weight:600;
  color:var(--pan-lit);border-bottom:1px solid var(--pan-brand);padding-bottom:1px;
}
.show__more:hover{border-bottom-width:2px}
.panel--show .brands{max-width:none}
.panel--show .set__foot{display:block}
.show .offer{text-align:left;max-width:none}
.show .offer__b{margin-top:2px}
.row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--pan-rule);
  break-inside:avoid;
  color:var(--pan-mid);
  transition:color .14s;
}
.row:hover{color:var(--pan-lit)}
.row__t{font-size:15px;font-weight:500;letter-spacing:-.01em}
.row__u{
  display:none;font-size:11.5px;color:var(--pan-dim);
  font-variant-numeric:tabular-nums;
}
.row__a{
  flex:0 0 auto;opacity:0;transform:translateX(-4px);
  transition:opacity .14s,transform .14s;
  font-size:14px;
}
.row:hover .row__a{opacity:1;transform:none}
.row__b{
  flex:0 0 auto;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--pan-brand);
}

.set__foot{
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--pan-rule-2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:34px;flex-wrap:wrap;
}
.brands{max-width:64%;font-size:13.5px;line-height:1.9;color:var(--pan-dim)}
.brands em{
  font-style:normal;color:var(--pan-mid);font-weight:600;
  margin-right:8px;
}
.brands a{color:var(--pan-mid);border-bottom:1px solid transparent;transition:color .14s,border-color .14s}
.brands a:hover{color:var(--pan-lit);border-bottom-color:var(--pan-brand)}
.brands span{color:var(--pan-dim);margin:0 5px}

.offer{flex:0 0 auto;max-width:290px;text-align:right}
.offer__t{
  font-family:Unbounded,"Golos Text",sans-serif;
  font-weight:700;font-size:15px;letter-spacing:-.035em;
  color:var(--pan-lit);margin-bottom:5px;
}
.offer__d{font-size:13px;color:var(--pan-mid);line-height:1.5;margin-bottom:11px}
.offer__b{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 18px;
  background:var(--pan-lit);color:var(--pan);
  font-size:13.5px;font-weight:700;
}

/* ───────────────────── МОБИЛНО ───────────────────── */
.sheet{
  position:fixed;inset:74px 0 0;z-index:55;
  background:var(--pan);color:var(--pan-lit);
  overflow-y:auto;padding:8px 22px 70px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .36s cubic-bezier(.32,.72,0,1);
}
.sheet.is-on{clip-path:inset(0 0 0 0)}
.mrow{border-bottom:1px solid var(--pan-rule)}
.mrow__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:19px 0;text-align:left;
  font-family:Unbounded,"Golos Text",sans-serif;
  font-weight:700;font-size:19px;letter-spacing:-.04em;
  color:var(--pan-lit);
}
.mrow__i{font-size:20px;color:var(--pan-dim);font-weight:400}
.mrow__body{display:none;padding-bottom:14px}
.mrow.is-on .mrow__body{display:block}
.mrow.is-on .mrow__i{color:var(--pan-brand)}
.mgrp{margin:6px 0 16px}
.mgrp__h{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pan-dim);padding:8px 0;
}

@media (max-width:1080px){
  .nav__list{gap:20px}
  .panel__in{grid-template-columns:280px 1fr}
  .tel small{display:none}
}
@media (max-width:920px){
  .nav,.tel,.cta{display:none}
  .ghost,.callb{display:grid}
  .hdr__in{gap:12px;justify-content:space-between;padding:0 18px}
  .thm{gap:4px}
  .thm__b{width:19px;height:19px}
}
/* на телефон дългият бутон отстъпва на едно докосване за обаждане */
.callb{
  display:none;width:40px;height:40px;place-items:center;
  background:var(--ink);color:var(--bg);flex:0 0 auto;
}
.callb svg{width:18px;height:18px}
@media (min-width:921px){.sheet{display:none}}


/* ── РЕЙКАТА ──────────────────────────────────────────────────
   Един лъч минава през цялата страница. Отметките са главите;
   светлината стига до тях, докато четете. Тънка е нарочно —
   разказът се води от съдържанието, не от индикатора.          */
.rail{
  position:fixed;left:20px;top:110px;bottom:64px;width:9px;z-index:40;
  pointer-events:none;
}
.rail__line{
  position:absolute;left:4px;top:0;bottom:0;width:1px;
  background:rgb(140 134 122 / .34);
}
.rail__lit{
  position:absolute;left:4px;top:0;width:1px;height:100%;
  background:var(--brand);
  transform:scaleY(var(--p,0));transform-origin:top;
}
.rail__stop{
  position:absolute;left:0;width:9px;height:1px;
  background:rgb(140 134 122 / .55);
  transform:translateY(var(--y,0));
  transition:background-color 260ms linear,width 260ms cubic-bezier(.22,1,.36,1);
  pointer-events:auto;
}
.rail__stop::after{
  content:attr(data-label);
  position:absolute;left:17px;top:-.62em;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);opacity:0;transform:translateX(-4px);
  transition:opacity 220ms linear,transform 260ms cubic-bezier(.22,1,.36,1);
}
.rail__stop.is-on{background:var(--brand);width:15px}
/* етикетите излизат само при посочване на рейката — иначе се блъскат в текста */
.rail:hover .rail__stop::after{opacity:.7;transform:none}
.rail:hover .rail__stop.is-on::after{opacity:1}
@media (max-width:1180px){.rail{display:none}}
@media (prefers-reduced-motion:reduce){
  .rail__stop,.rail__stop::after{transition:none}
}

/* номерът на главата стои пред надписа ѝ */
/* номерът се чете и върху хартия — в тъмните секции се връща на чисто оранжево */
.chap{color:var(--brand-ink);font-variant-numeric:tabular-nums;margin-right:.85em}
.sc--dark .chap,.hero .chap{color:var(--brand)}

/* ───────────────────── ХЕРО ─────────────────────
   Залата е тъмна във всяка тема — това е сцената.
   Прожекторът стои извън кадъра вляво, лъчът пада
   върху екран, а върху екрана са думите.            */
.hero{
  --room:#0A0A09;
  --room-2:#131211;
  --lit:#FFF8EC;
  --lit-2:#B6B3AB;
  --lit-3:#6F6D66;
  --hair:#232220;
  position:relative;overflow:hidden;
  background:var(--room);color:var(--lit);
  border-bottom:1px solid var(--rule);
}
/* стените на залата не са равни */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 8% 50%,rgba(243,110,39,.055),transparent 62%);
}

.beam{
  position:absolute;left:0;top:0;height:62%;width:min(1240px,92%);
  pointer-events:none;overflow:hidden;
  clip-path:polygon(0 48.6%,0 48.6%,0 51.4%,0 51.4%);
  background:linear-gradient(101deg,rgba(243,110,39,.20),rgba(243,110,39,.055) 54%,rgba(243,110,39,0));
  animation:beamOpen 1.6s .22s cubic-bezier(.14,.82,.22,1) forwards,
            lamp 7.5s 2s ease-in-out infinite;
}
@keyframes beamOpen{
  0%  {clip-path:polygon(0 48.6%,0 48.6%,0 51.4%,0 51.4%)}
  11% {clip-path:polygon(0 48.2%,9% 47.4%,9% 52.6%,0 51.8%)}
  100%{clip-path:polygon(0 31%,100% 3%,100% 97%,0 69%)}
}
/* истинските лампи не светят равно */
@keyframes lamp{
  0%,100%{opacity:1} 16%{opacity:.95} 21%{opacity:1}
  57%{opacity:.972} 61%{opacity:1} 82%{opacity:.94} 86%{opacity:1}
}
.beam::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
}
/* прах в снопа */
.mote{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s,2px);height:var(--s,2px);border-radius:50%;
  background:#FFC08A;opacity:0;
  animation:mote var(--d,17s) linear var(--dl,0s) infinite;
}
@keyframes mote{
  0%{opacity:0;transform:translate3d(0,0,0)}
  14%{opacity:.5} 86%{opacity:.3}
  100%{opacity:0;transform:translate3d(104px,-58px,0)}
}

.hero__in{
  position:relative;max-width:1400px;margin:0 auto;
  padding:104px 32px 0;min-height:min(76vh,660px);
}

/* екранът: леко наклонена повърхност, върху която пада светлината */
.proj{position:relative;display:inline-block;max-width:min(860px,100%);padding:42px 52px 46px}
.proj::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(101deg,rgba(255,236,218,.10),rgba(255,236,218,.03) 58%,rgba(255,236,218,.012));
  border:1px solid rgba(255,248,236,.10);
  transform:perspective(1500px) rotateY(-1.9deg);
  transform-origin:left center;
  animation:strike .62s .95s cubic-bezier(.3,.8,.2,1) both;
}
.proj::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  transform:perspective(1500px) rotateY(-1.9deg);
  transform-origin:left center;
}
@keyframes strike{from{clip-path:inset(0 0 100% 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
.proj > *{position:relative;z-index:1}

.hero__k{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lit-3);margin:0 0 24px;
}
.hero__h{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:800;
  font-size:clamp(31px,4.5vw,66px);line-height:1;letter-spacing:-.058em;
  margin:0;
}
.hero__h span{display:block}
.hero__l1{color:var(--lit)}
.hero__l2{color:var(--lit-2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__l1,.hero__l2{
    background-image:linear-gradient(96deg,var(--on) 0 36%,#FFAE72 44%,var(--off) 53%,var(--off) 100%);
    background-size:300% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:warm 1.5s 1s cubic-bezier(.38,0,.24,1) both;
  }
  .hero__l1{--on:var(--lit);--off:#4A4844}
  .hero__l2{--on:var(--lit-2);--off:#3B3936;animation-delay:1.2s}
}
@keyframes warm{to{background-position:0 0}}

.below{position:relative;max-width:min(860px,100%);padding:34px 52px 0}
.hero__s{font-size:clamp(15.5px,1.35vw,18px);line-height:1.55;color:var(--lit-2);max-width:52ch;margin:0 0 28px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.rise{animation:rise .8s 1.5s cubic-bezier(.22,1,.36,1) both}
@keyframes rise{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 26px;font-size:15.5px;font-weight:700;letter-spacing:-.012em}
/* основно състояние — върху хартия */
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{opacity:.85}
.btn--line{border:1px solid var(--rule-2);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
/* вътре в тъмната зала цветовете се обръщат */
.hero .btn--solid{background:var(--lit);color:var(--room)}
.hero .btn--solid:hover{opacity:.88}
.hero .btn--line{border-color:rgba(255,248,236,.22);color:var(--lit)}
.hero .btn--line:hover{border-color:var(--lit)}
.hero__note{font-size:14px;color:var(--lit-3);margin:22px 0 0}
.hero__note b{color:var(--lit-2);font-weight:600;font-variant-numeric:tabular-nums}

/* ── СТЕНАТА ОТ ЕКРАНИ ──────────────────────────────────────────
   Същата логика като в менюто: осветено е само това, което
   гледаш. Краищата тънат в тъмното, за да няма ръб на кадъра.  */
.wall{position:relative;margin-top:58px}
.wall__h{
  max-width:1400px;margin:0 auto;padding:0 32px 16px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.wall__k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--lit-3)}
.wall__n{font-variant-numeric:tabular-nums;color:var(--lit-3);font-weight:500;margin-left:12px;letter-spacing:0;text-transform:none}
.wall__all{
  font-size:13.5px;font-weight:600;color:var(--lit);
  border-bottom:1px solid var(--amber);padding-bottom:1px;
}
/* стената е широка колкото прозореца и тъне в двата края */
.wall__rail{
  position:relative;overflow:hidden;padding:4px 0 6px;
  border-top:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.wall__t{
  display:flex;gap:26px;width:max-content;padding-top:26px;
  will-change:transform;
}
/* стената се хваща и се влачи — с мишка или с пръст */
.wall__rail{
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.wall__rail img,.wall__rail a{-webkit-user-drag:none}
.wall__rail.is-drag{cursor:grabbing}
.wall__rail.is-drag .scr,.wall__rail.is-drag .scr__f,.wall__rail.is-drag img{transition:none}
.wall__rail.is-drag .scr{opacity:1;filter:none}

.scr{
  flex:0 0 340px;display:block;
  transition:opacity .4s cubic-bezier(.22,1,.36,1),filter .4s;
}
.scr__f{
  position:relative;overflow:hidden;
  border:1px solid var(--hair);
  transition:border-color .35s,transform .45s cubic-bezier(.22,1,.36,1);
}
.scr img{
  display:block;width:100%;height:auto;
  filter:saturate(.74) brightness(.84);
  transition:filter .4s,transform .6s cubic-bezier(.22,1,.36,1);
}
.scr__f::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);
}
.scr__c{margin-top:13px}
.scr b{
  display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--lit-2);transition:color .35s;
}
.scr i{
  display:block;font-style:normal;font-size:11.5px;color:var(--lit-3);
  margin-top:3px;transition:color .35s;
}

/* когато погледът е на стената, гасне всичко освен посоченото */
.wall__rail:hover .scr{opacity:.38;filter:saturate(.35)}
.wall__rail .scr:hover,.wall__rail .scr:focus-visible{opacity:1;filter:none}
.scr:hover .scr__f{border-color:rgba(255,248,236,.42);transform:translateY(-4px)}
.scr:hover img{filter:none;transform:scale(1.035)}
.scr:hover b{color:var(--lit)}
.scr:hover i{color:var(--lit-2)}

@media (prefers-reduced-motion:reduce){
  .scr:hover .scr__f{transform:none}
  .scr:hover img{transform:none}
}
@media (max-width:860px){
  .wall{margin-top:40px}
  .wall__h{padding:0 22px 14px}
  .wall__t{gap:18px;padding-top:20px}
  .scr{flex:0 0 262px}
  .wall__rail{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  }
}

.split{max-width:1400px;margin:0 auto;padding:0 32px}
.split__l{
  display:flex;align-items:center;gap:16px;padding:34px 0 0;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.split__l::after{content:"";flex:1 1 auto;height:1px;background:var(--rule)}

@media (max-width:860px){
  .hero__in{padding:62px 22px 0;min-height:0}
  .proj{padding:30px 24px 32px}
  .below{padding:26px 24px 0}
  .beam{height:66%}
  .btn{height:48px;padding:0 20px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .beam{animation:none !important;clip-path:polygon(0 31%,100% 3%,100% 97%,0 69%)}
  .proj::before{animation:none !important;clip-path:none;opacity:1}
  .mote{display:none}
  .rise{animation:none !important;opacity:1;transform:none}
}

/* ───────────────────── УСЛУГИ · ОПТИЧНА ПЕЙКА ─────────────────────
   Лъчът от залата продължава и тук: влиза бял отляво, минава през
   един ръб, разлага се на четири и се събира обратно бял вдясно.
   Цвят има само вътре в плочата. Всяка чертичка под име на услуга
   е спектрална линия — графиката Е съдържанието.                    */
.ob{
  --plate:#14120F;
  --beam:#FFF3E6;
  --w1:#F36E27;  --w2:#F26234;  --w3:#F15741;  --w4:#F04D4C;
  --seam:rgb(255 255 255 / .055);
  --edge:rgb(255 243 230 / .32);
  position:relative;overflow-x:clip;padding:104px 0 0;
}
:root[data-theme="orange"] .ob{--plate:#17100A}
.ob__wrap{max-width:1400px;margin:0 auto;padding:0 32px}

/* косъмът, в който влиза светлината */
.ob__rule{position:relative;height:1px;background:var(--rule);margin-bottom:40px}
.ob__rule::after{
  content:"";position:absolute;left:0;top:0;width:40px;height:1px;background:var(--brand);
}

.ob__eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}
.ob__head{position:relative}
.ob__readout{
  position:absolute;right:0;top:0;margin:0;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.ob__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(40px,6vw,92px);line-height:.92;letter-spacing:-.05em;
  margin:0 0 20px;color:var(--ink);
}
.ob__tail{
  display:block;font-weight:400;font-size:.40em;line-height:1.06;
  letter-spacing:-.03em;color:var(--ink-3);margin-top:.16em;
}
.ob__sub{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:46ch;margin:0 0 44px}

/* ── ПЛОЧАТА ── */
.ob__plate{
  position:relative;width:100%;background:var(--plate);
  min-height:clamp(680px,50vw,840px);
  display:grid;
  grid-template-columns:
    [entry] clamp(72px,10vw,168px)
    [fan]   clamp(88px,7.5vw,132px)
    [body]  minmax(0,1fr)
    [coll]  clamp(48px,4vw,76px);
  grid-template-rows:repeat(4,1fr);
}

/* входният клин — плътно топло бяло, твърди ръбове */
.ob__entry{grid-column:entry;grid-row:1/-1;position:relative}
.ob__in{
  position:absolute;inset:0;transform-origin:left center;background:var(--beam);
  background-image:repeating-linear-gradient(180deg,
    rgb(20 18 15 / .06) 0 1px, transparent 1px 4px);
  clip-path:polygon(0 calc(50% - 34px),100% calc(50% - 28px),
                    100% calc(50% + 28px),0 calc(50% + 34px));
}
.ob__plate.is-scanned .ob__in{animation:flick 7.3s steps(1,end) infinite}
@keyframes flick{
  0%,41%{opacity:1} 42%{opacity:.93} 44%{opacity:1}
  69%{opacity:1} 70%{opacity:.96} 73%{opacity:1} 100%{opacity:1}
}
.ob__since{
  position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;
  font-size:11px;letter-spacing:.10em;color:rgb(255 255 255 / .30);
}

/* ветрилото — четири трапеца от една декларация */
.ob__fan{
  grid-column:fan;grid-row:1/-1;position:relative;
  border-inline-start:1px solid var(--edge);
}
.ob__fan i,.ob__coll i{
  position:absolute;inset:0;background:var(--w);
  transition:opacity 300ms linear;
}
.ob__fan i{
  opacity:.22;
  clip-path:polygon(
    0    calc(50% - 28px + var(--k) * 14px),
    100% calc(var(--k) * 25%),
    100% calc((var(--k) + 1) * 25%),
    0    calc(50% - 28px + (var(--k) + 1) * 14px));
}
/* събирачът — огледално, светлината се връща в един лъч */
.ob__coll{grid-column:coll;grid-row:1/-1;position:relative}
.ob__coll i{
  opacity:.11;
  clip-path:polygon(
    0    calc(var(--k) * 25%),
    100% calc(50% - 20px + var(--k) * 10px),
    100% calc(50% - 20px + (var(--k) + 1) * 10px),
    0    calc((var(--k) + 1) * 25%));
}
.ob__out{
  position:absolute;right:0;top:0;bottom:0;width:11px;background:var(--beam);opacity:.85;
  clip-path:polygon(0 calc(50% - 20px),100% calc(50% - 15px),
                    100% calc(50% + 15px),0 calc(50% + 20px));
}

/* ── ЛЕНТАТА ── */
.ob__band{
  grid-column:body;position:relative;
  display:grid;grid-template-columns:minmax(180px,21ch) minmax(0,1fr);
  column-gap:clamp(28px,2.6vw,60px);align-content:center;
  padding-block:26px;padding-inline-end:clamp(24px,3vw,64px);
  border-block-start:1px solid var(--seam);
}
.ob__band:first-of-type{border-block-start:0}
/* цветният растер: осветената повърхност, не сияние */
.ob__band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--w);
  opacity:0;transition:opacity 300ms linear;
}
.ob__band > *{position:relative;z-index:1}

.ob__range{
  margin:0 0 9px;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  color:rgb(255 255 255 / .40);font-variant-numeric:tabular-nums;
}
.ob__band h3{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(19px,1.55vw,27px);letter-spacing:-.045em;line-height:1.06;
  margin:0 0 11px;color:rgb(255 248 236 / .90);transition:color 300ms linear;
}
.ob__band h3 a{color:inherit}
.ob__promise{
  margin:0;font-size:13.5px;line-height:1.45;max-width:32ch;
  color:rgb(255 248 236 / .58);
}

/* потокът — хоризонтален, не колона */
.ob__flow{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;column-gap:1.75em;row-gap:1.5em;max-inline-size:76ch;
}
.ob__flow li{display:flex;align-items:baseline;gap:.42em;white-space:nowrap}
.ob__flow i{
  font-style:normal;font-size:10px;font-weight:500;letter-spacing:.10em;
  color:rgb(255 255 255 / .30);font-variant-numeric:tabular-nums;
  transition:color 300ms linear;
}
.ob__flow a{
  position:relative;text-decoration:none;
  font-size:clamp(15.5px,1.1vw,17.5px);font-weight:500;letter-spacing:0;
  color:rgb(250 250 247 / .87);transition:color 300ms linear;
  scroll-margin-block:96px;
}
.ob__flow a::after{
  content:"";position:absolute;inset-inline:0;bottom:-.58em;height:1px;
  background:var(--w);opacity:.20;transform-origin:center;
  transition:opacity 300ms linear,transform 140ms linear;
}
.ob__flow a:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.ob__flow a:focus-visible::after{opacity:1}

/* ── НИВО 2: СКАН — светлината, която пада, докато четеш ── */
.ob__band.is-scan::after{opacity:.045;transition-duration:90ms}
.ob__band.is-scan h3{color:rgb(255 248 236 / .92);transition-duration:90ms}
.ob__band.is-scan .ob__flow a::after{opacity:.38;transition-duration:90ms}
.ob__band.is-scan .ob__flow i{color:var(--w);transition-duration:90ms}
.ob__fan i.is-scan{opacity:.55;transition-duration:90ms}

/* ── НИВО 3: КОМАНДА — светлината, която поискваш ── */
@media (hover:hover) and (pointer:fine){
  .ob__band:hover::after,.ob__band:focus-within::after{opacity:.075;transition-duration:90ms}
  .ob__band:hover h3,.ob__band:focus-within h3{color:#FFF8EC;transition-duration:90ms}
  .ob__band:hover .ob__flow a,.ob__band:focus-within .ob__flow a{
    color:#FAFAF7;transition-duration:90ms;
  }
  .ob__band:hover .ob__flow a::after,.ob__band:focus-within .ob__flow a::after{
    opacity:.68;transition-duration:90ms;
  }
  .ob__band:hover .ob__flow i,.ob__band:focus-within .ob__flow i{
    color:var(--w);transition-duration:90ms;
  }
  /* гасне залата, свети една */
  .ob__plate:has(.ob__band:hover) .ob__band:not(:hover) .ob__flow a,
  .ob__plate:has(.ob__band:focus-within) .ob__band:not(:focus-within) .ob__flow a{
    color:rgb(250 250 247 / .62);
  }
  /* отделната услуга: линията става по-ярка И по-широка */
  .ob__flow a:hover::after{opacity:.92;transform:scaleX(1.04)}
  .ob__flow a:hover ~ i,.ob__flow li:hover i{color:var(--w)}
  .ob__flow a:active::after{opacity:1;transform:scaleX(1.055);transition-duration:90ms}
}

/* ── ВИЗЬОРЪТ ──────────────────────────────────────────────────
   Хоризонтална линия, която следва курсора през цялата плоча и
   приема цвета на дължината на вълната, върху която стои.
   Уредът измерва; не украсява.                                  */
.ob__cross{
  position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:var(--cross,var(--beam));
  opacity:0;pointer-events:none;
  transform:translate3d(0,var(--cy,0px),0);
  transition:opacity 220ms linear,background-color 90ms linear;
}
.ob__cross::before,.ob__cross::after{
  content:"";position:absolute;top:-3px;width:1px;height:7px;
  background:var(--cross,var(--beam));
}
.ob__cross::before{left:0}
.ob__cross::after{right:0}
@media (hover:hover) and (pointer:fine){
  .ob__plate.is-live .ob__cross{opacity:.22}
}

/* ── ДИФРАКЦИЯ ──
   Плътната светлина не минава през ръб, без да остави следа.  */
.ob__fan::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:24px;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgb(255 243 230 / .09) 0 1px, transparent 1px 5px);
}

/* ── ОТЧЕТЪТ ──
   Горе вдясно, с фиксирана ширина, за да не подскача редът.    */
.ob__readout{
  min-width:26ch;text-align:right;white-space:nowrap;
  transition:color 120ms linear;
}
.ob__readout b{font-weight:500;color:var(--read,var(--ink-2));transition:color 120ms linear}

/* ── СВЕТЛИНАТА МИНАВА ПРЕЗ ЦЕЛИЯ ПЪТ ──
   Щом една вълна е осветена, светят и носът ѝ, и събирачът ѝ.  */
.ob__coll i.is-scan{opacity:.42;transition-duration:90ms}
@media (hover:hover) and (pointer:fine){
  .ob__fan i.is-hot{opacity:1;transition-duration:0ms}
  .ob__coll i.is-hot{opacity:.75;transition-duration:0ms}
  .ob__plate.is-hot .ob__out{opacity:1}
}
.ob__out{transition:opacity 90ms linear}

/* ── входът: тук се добавя трийсет и първият канал ──
   Единственото поле за писане на цялата страница. Без кутия
   и без рамка — само косъм, който светва, докато пишеш.      */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ob__add{margin-top:48px;padding-top:38px;border-top:1px solid var(--rule)}
.ob__addT{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(19px,2vw,29px);line-height:1.08;letter-spacing:-.05em;
  margin:0 0 26px;color:var(--ink);text-wrap:balance;
}
.ob__form{display:flex;align-items:flex-end;gap:16px;max-width:860px}
.ob__field{flex:1 1 auto;min-width:0;position:relative}
.ob__field input{
  width:100%;border:0;background:none;outline:none;
  font-family:inherit;font-size:clamp(16px,1.6vw,23px);font-weight:500;
  letter-spacing:-.015em;color:var(--ink);padding:10px 0 15px;
}
.ob__field input::placeholder{color:var(--ink-3);font-weight:400}
.ob__field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-2);
}
.ob__field::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;z-index:1;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.ob__form:focus-within .ob__field::before{transform:scaleX(1)}
.ob__send{
  flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;
  background:var(--ink);color:var(--bg);
  transition:background-color .2s linear,transform .25s cubic-bezier(.22,1,.36,1);
}
.ob__send:hover{background:var(--brand-ink);transform:translateX(4px)}
.ob__send svg{width:20px;height:20px}
.ob__addD{margin:20px 0 0;font-size:14px;color:var(--ink-3)}
.ob__addD b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}

/* ── ЕДНОКРАТНОТО СКАНИРАНЕ ──
   Покойното състояние в CSS е КРАЙНОТО. Ако JS падне, секцията
   изглежда завършена, не празна.                                */
.ob__plate.is-scanned .ob__in{animation:flick 7.3s steps(1,end) 1.4s infinite,
                              wedge .38s cubic-bezier(.2,.9,.1,1) backwards}
/* клинът израства с transform — clip-path вече носи трапеца и не се пипа */
@keyframes wedge{from{transform:scaleX(0)}}
.ob__plate.is-scanned .ob__fan i{animation:pop .21s linear calc(.38s + var(--k) * .09s)}
@keyframes pop{50%{opacity:1}}
.ob__plate.is-scanned .ob__flow a::after{
  animation:hit .1s linear calc(.78s + var(--i) * .026s);
}
@keyframes hit{50%{opacity:1}}
.ob__plate.is-scanned .ob__coll i,.ob__plate.is-scanned .ob__out{
  animation:fadein .3s linear 1.5s backwards;
}
@keyframes fadein{from{opacity:0}}

/* ── ТЕЛЕФОН ──────────────────────────────────────────────────
   Ветрилото не оцелява на тесен екран и не го спасяваме.
   Спасяваме физиката: всяка вълна става вертикална черта
   вляво на своята лента, а услугите слизат в една колона.   */
@media (max-width:900px){
  .ob{padding-top:56px}
  .ob__wrap{padding:0 22px}
  .ob__readout{
    position:static;min-width:0;text-align:left;
    margin:0 0 18px;letter-spacing:.12em;
  }
  .ob__h2{font-size:clamp(34px,10.5vw,50px)}
  .ob__tail{font-size:.46em}
  .ob__sub{margin-bottom:0;font-size:16px}

  /* плочата се разгъва вертикално */
  .ob__plate{display:block;min-height:0;padding:0}
  .ob__entry,.ob__fan,.ob__coll,.ob__cross{display:none}

  .ob__band{
    display:block;position:relative;
    padding:30px 20px 26px 34px;
    border-block-start:1px solid var(--seam);
  }
  .ob__band:first-of-type{border-block-start:0}
  /* дължината на вълната: вертикална черта вляво */
  .ob__band::before{
    content:"";position:absolute;left:16px;top:30px;bottom:26px;width:2px;
    background:var(--w);opacity:.55;
  }
  .ob__band.is-scan::before{opacity:1}

  .ob__range{display:block;margin-bottom:9px}
  .ob__band h3{font-size:22px;margin-bottom:10px}
  .ob__promise{max-width:none;font-size:14px}

  /* една услуга на ред, чертата е спектралната линия */
  .ob__flow{display:block;margin-top:20px;max-inline-size:none}
  .ob__flow li{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:.7em;align-items:baseline;position:relative;
    padding:13px 0;white-space:normal;
  }
  .ob__flow li::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--w);opacity:.26;
  }
  .ob__flow li:last-child::after{opacity:.26}
  .ob__flow a{font-size:16px;letter-spacing:-.005em}
  .ob__flow a::after{display:none}
  .ob__flow i{font-size:10.5px}

  .ob__add{margin-top:34px;padding:30px 22px 0}
  .ob__addT{font-size:21px}
  .ob__form{gap:12px}
  .ob__field input{font-size:16px}
  .ob__send{width:48px;height:48px}
}
@media (max-width:600px){
  .ob__band{padding:26px 16px 22px 30px}
  .ob__band::before{left:14px}
  .ob__flow a{font-size:15.5px}
  .ob__form{flex-wrap:wrap}
  .ob__field{flex:1 1 100%}
  .ob__send{width:100%;height:50px}
}

@media (prefers-reduced-motion:reduce){
  .ob__in{animation:none !important}
  .ob__plate.is-scanned *{animation:none !important}
  .ob__flow a::after{transition:opacity 90ms linear;transform:none !important}
  .ob__band,.ob__band *,.ob__fan i,.ob__band::after{transition-duration:0ms !important}
}


/* ───────────────────── КАК РАБОТИМ ─────────────────────
   След тъмната плоча — светло и просторно. Никакви рамки
   и никакви линии между стъпките: само въздух. Единствената
   линия е косъмът отгоре, по който светлината пътува,
   докато четете, и пали станциите една по една.            */
.how{padding:112px 0 118px;background:var(--bg)}
.how__wrap{max-width:1400px;margin:0 auto;padding:0 32px}

.how__rail{position:relative;height:1px;background:var(--rule);margin-bottom:44px;overflow:hidden}
.how__lit{
  position:absolute;inset:0;background:var(--brand);
  transform:scaleX(var(--p,1));transform-origin:left;
}

.how__eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px;
}
.how__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(32px,4.6vw,62px);line-height:1;letter-spacing:-.05em;
  margin:0 0 22px;max-width:14ch;text-wrap:balance;color:var(--ink);
}
.how__sub{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin:0}

.how__grid{
  list-style:none;margin:84px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(32px,4.5vw,80px);row-gap:clamp(64px,6vw,96px);
}
.how__step{max-width:34ch}
.how__n{
  display:block;position:relative;
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(66px,7.2vw,118px);line-height:.86;letter-spacing:-.075em;
  margin:0 0 22px;font-variant-numeric:tabular-nums;
  color:var(--brand);opacity:.24;
  transition:opacity 700ms cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.how__step.is-lit .how__n{opacity:1}

/* Кухата цифра се налива със светлина.
   Ако браузърът не може да рисува контур на буква, остава
   плътната цифра отгоре — никой не остава с празно място. */
@supports (-webkit-text-stroke:1px #000){
  .how__n{
    opacity:1;color:transparent;
    -webkit-text-stroke:1.4px var(--rule-2);
    background-image:linear-gradient(102deg,var(--brand) 0 42%,var(--brand-2));
    background-repeat:no-repeat;
    background-size:0% 100%;
    -webkit-background-clip:text;background-clip:text;
    transition:background-size 1150ms cubic-bezier(.19,1,.3,1) var(--d,0ms),
               -webkit-text-stroke-color 700ms linear var(--d,0ms);
  }
  .how__step.is-lit .how__n{
    background-size:100% 100%;
    -webkit-text-stroke-color:transparent;
  }
}

/* светлината пристига и на служебния ред */
.how__meta{display:flex;align-items:center;gap:0}
.how__meta::before{
  content:"";flex:0 0 auto;width:0;height:1px;background:var(--brand);
  transition:width 760ms cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) + 260ms),
             margin-right 760ms cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) + 260ms);
}
.how__step.is-lit .how__meta::before{width:20px;margin-right:11px}
.how__step h3{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(20px,1.8vw,27px);line-height:1.08;letter-spacing:-.045em;
  margin:0 0 12px;color:var(--ink);
}
.how__step p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.how__meta{
  display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}

.how__cta{position:relative;margin:96px 0 0;font-size:19px;font-weight:600;padding-top:34px}
.how__cta::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--rule);
}
.how__cta::after{
  content:"";position:absolute;left:0;top:0;height:1px;background:var(--brand);
  width:var(--exit,0%);transition:width 1.4s cubic-bezier(.19,1,.3,1) .6s;
}
.how.is-done .how__cta::after{width:min(340px,42%)}
.how__cta a{border-bottom:2px solid var(--brand);padding-bottom:3px;color:var(--ink)}
.how__cta span{display:block;font-size:14.5px;font-weight:400;color:var(--ink-3);margin-top:12px;border:0}

@media (max-width:1000px){
  .how__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .how{padding:72px 0 78px}
  .how__wrap{padding:0 22px}
  .how__grid{grid-template-columns:1fr;margin-top:48px;row-gap:44px}
  .how__step{max-width:none}
  .how__cta{margin-top:52px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .how__n,.how__meta::before,.how__cta::after{transition:none}
  .how__n{background-size:100% 100%;-webkit-text-stroke-color:transparent}
  .how__meta::before{width:20px;margin-right:11px}
}

/* ───────────────────── ЦЕНИ ─────────────────────
   Тъмна сцена в топъл тон — различна от залата горе,
   която е студено черна. Числата растат по кегел, а
   чертата под всяко стъпало се удължава: инвестицията
   и линията растат заедно с бизнеса.                    */
.pr{
  --stage:#141009;
  --ivory:#FBF4EA;
  --ivory-2:#B4A796;
  --ivory-3:#776B5D;
  --hair:#2B2219;
  position:relative;overflow:hidden;
  background:var(--stage);color:var(--ivory);
  padding:clamp(84px,9vw,132px) 0 clamp(76px,8vw,116px);
}
:root[data-theme="orange"] .pr{--stage:#180F06}
/* топло зарево откъм ъгъла, откъдето идва светлината */
.pr::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 6% 0%,rgb(243 110 39 / .085),transparent 60%);
}
/* фактурата на страницата остава, но само като шепот */
.pr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgb(255 255 255 / .022) 0 1px,transparent 1px 3px);
}
.pr__in{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 32px}

.pr__k{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory-3);margin:0 0 22px;
}
.pr__k .chap{color:var(--brand)}
.pr__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(30px,4.2vw,58px);line-height:1.02;letter-spacing:-.05em;
  margin:0 0 22px;max-width:17ch;text-wrap:balance;color:var(--ivory);
}
.pr__sub{font-size:16.5px;line-height:1.6;color:var(--ivory-2);max-width:56ch;margin:0}

.pr__steps{margin-top:clamp(56px,6vw,86px)}
.pr__step{
  position:relative;display:grid;
  grid-template-columns:clamp(38px,4vw,64px) minmax(0,1fr) auto;
  gap:clamp(18px,2.6vw,48px);align-items:baseline;
  padding:clamp(26px,3vw,42px) 0;
}
/* чертата расте със стъпалото */
.pr__step::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;background:var(--hair);
  width:calc(46% + var(--k) * 13.5%);
  transition:background-color .45s linear;
}
.pr__step:last-child::after{background:var(--hair)}
.pr__step::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:rgb(243 110 39 / .045);opacity:0;transition:opacity .35s linear;
}
.pr__step:hover::before,.pr__step:focus-within::before{opacity:1}
.pr__step:hover::after{background-color:var(--brand)}

.pr__rn{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:clamp(13px,1.15vw,17px);letter-spacing:.06em;
  color:var(--ivory-3);transition:color .35s linear;
}
.pr__step:hover .pr__rn{color:var(--brand)}

.pr__name{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(18px,1.65vw,25px);line-height:1.1;letter-spacing:-.045em;
  margin:0 0 10px;color:var(--ivory);
}
.pr__what{font-size:14.5px;line-height:1.65;color:var(--ivory-2);margin:0;max-width:56ch}
.pr__what b{color:var(--ivory);font-weight:600}

.pr__amt{
  display:flex;align-items:baseline;gap:.34em;justify-self:end;white-space:nowrap;
  transform:translateY(10px);opacity:0;
  transition:transform .9s cubic-bezier(.19,1,.3,1) var(--d,0ms),
             opacity .9s cubic-bezier(.19,1,.3,1) var(--d,0ms);
}
.pr.is-read .pr__amt{transform:none;opacity:1}
.pr__from{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ivory-3);
}
.pr__num{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:var(--sz);line-height:.86;letter-spacing:-.06em;
  color:var(--ivory);font-variant-numeric:tabular-nums;
  transition:color .35s linear;
}
.pr__step:hover .pr__num{color:var(--brand)}
.pr__cur{font-size:clamp(14px,1.2vw,18px);font-weight:500;color:var(--ivory-3)}

/* ── БАРАБАНИТЕ ───────────────────────────────────────────────
   Всяка цифра е лента 0–9, минала два пъти. Спира точно на
   своята стойност — както се уталожва прецизен брояч.         */
.dg{
  display:inline-block;height:1em;line-height:1;overflow:hidden;
  vertical-align:baseline;font-style:normal;
}
.dg b{
  display:block;white-space:pre;font-weight:inherit;line-height:1;
  transform:translateY(0);
  transition:transform 1.45s cubic-bezier(.16,.85,.2,1) var(--dd,0ms);
}
.pr.is-read .dg b,.is-in .dg b{transform:translateY(calc(var(--v) * -1em))}
.dgs{font-style:normal;display:inline-block}

/* ── СКАНИРАЩАТА ЧЕРТА ──
   Сцената се прочита веднъж отгоре надолу, после утихва.      */
.pr__scan{
  position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(255 214 160 / .55) 18%,rgb(243 110 39 / .8) 50%,rgb(255 214 160 / .55) 82%,transparent);
  opacity:0;
}
.pr.is-read .pr__scan{animation:prScan 1.5s cubic-bezier(.4,0,.25,1) .15s 1}
@keyframes prScan{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:.65}
  100%{opacity:0;transform:translateY(var(--h,760px))}
}

/* ── ЧЕРТИТЕ СЕ ИЗЧЕРТАВАТ ── */
.pr__step::after{
  transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.19,1,.3,1) var(--d,0ms),background-color .45s linear;
}
.pr.is-read .pr__step::after{transform:scaleX(1)}

/* при посочване числото се стопля и лекичко се вдига */
.pr__amt{transition:transform .9s cubic-bezier(.19,1,.3,1) var(--d,0ms),
                    opacity .9s cubic-bezier(.19,1,.3,1) var(--d,0ms),
                    color .35s linear}
.pr__step:hover .pr__amt{transform:translateY(-2px)}
.pr.is-read .pr__step:hover .pr__amt{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .dg b{transition:none;transform:translateY(calc(var(--v) * -1em))}
  .pr__scan{display:none}
  .pr__step::after{transition:none;transform:scaleX(1)}
}

.pr__foot{
  margin-top:clamp(40px,4.5vw,64px);display:flex;
  gap:clamp(20px,3vw,56px);flex-wrap:wrap;align-items:baseline;
}
.pr__note{font-size:14px;line-height:1.65;color:var(--ivory-2);max-width:54ch;margin:0}
.pr__go{
  font-size:16px;font-weight:600;color:var(--ivory);
  border-bottom:1px solid var(--brand);padding-bottom:4px;
}
.pr__go:hover{border-bottom-width:2px}

@media (max-width:880px){
  .pr__in{padding:0 22px}
  .pr__step{grid-template-columns:clamp(30px,7vw,44px) minmax(0,1fr);gap:14px;padding:24px 0}
  .pr__amt{grid-column:2;justify-self:start;margin-top:14px}
  .pr__step::after{width:100%}
  .pr__what{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .pr__amt{transition:none;transform:none;opacity:1}
}

/* ───────────────────── ПРОЕКТИ ─────────────────────
   Хоризонтална пътека със snap. Всички шест проекта стоят
   в HTML-а и се превъртат — нищо не се крие зад JavaScript.
   Следващият надзърта отдясно: това кара окото да продължи.  */
.pj{padding:clamp(84px,9vw,124px) 0 clamp(72px,8vw,108px);background:var(--bg);overflow:hidden}
.pj__in{max-width:1400px;margin:0 auto;padding:0 32px}

.pj__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.pj__k{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px;
}
.pj__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-.05em;
  margin:0 0 18px;max-width:16ch;text-wrap:balance;color:var(--ink);
}
.pj__sub{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:52ch;margin:0}

/* управление */
.pj__nav{display:flex;align-items:center;gap:14px;padding-bottom:4px}
.pj__count{
  font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.pj__count b{color:var(--ink);font-weight:700}
.pj__btn{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--rule-2);color:var(--ink);
  transition:border-color .2s,background-color .2s,color .2s;
}
.pj__btn:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--bg)}
.pj__btn:disabled{opacity:.3;cursor:default}
.pj__btn svg{width:17px;height:17px}

/* пътеката */
.pj__track{
  margin-top:clamp(38px,4.4vw,62px);
  display:flex;gap:clamp(20px,2.4vw,38px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:6px;
}
.pj__track::-webkit-scrollbar{display:none}
.pj__slide{
  flex:0 0 min(92%,1180px);scroll-snap-align:start;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(22px,2.8vw,46px);align-items:start;
}
.pj__shot{position:relative;margin:0;display:block;padding-bottom:34px}
.pj__shot img{display:block;width:100%;height:auto}
/* мониторът */
.pj__d{position:relative;display:block}
.pj__d img{border:1px solid var(--rule-2)}
.pj__d::after{
  content:"";position:absolute;inset:1px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 3px);
}
/* телефонът излиза пред долния десен ъгъл */
.pj__m{
  position:absolute;right:-3.5%;bottom:0;width:20.5%;min-width:112px;z-index:2;display:block;
}
.pj__m::before{
  content:"";position:absolute;left:-11px;top:-11px;right:-11px;bottom:-11px;
  background:var(--bg);z-index:-1;
}
.pj__m img{border:1px solid var(--ink-3)}
.pj__m::after{
  content:"";position:absolute;inset:1px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 3px);
}
@media (max-width:900px){
  .pj__m{width:26%;right:-2%}
}

/* табелката */
.pj__no{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:13px;letter-spacing:.08em;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;margin:0 0 12px;
}
.pj__name{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(21px,2.1vw,31px);line-height:1.06;letter-spacing:-.048em;
  margin:0 0 8px;color:var(--ink);
}
.pj__type{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}
.pj__desc{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 20px}
.pj__list{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--rule)}
.pj__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:14.5px;line-height:1.5;color:var(--ink-2);
}
.pj__list i{font-style:normal;color:var(--brand);font-size:13px;line-height:1.6}
.pj__url{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:14.5px;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--brand);padding-bottom:3px;
}
.pj__url span{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1);color:var(--brand-ink)}
.pj__url:hover span{transform:translateX(5px)}

/* релсата на напредъка */
.pj__rail{position:relative;height:1px;background:var(--rule);margin-top:clamp(28px,3vw,44px)}
.pj__rail b{
  position:absolute;left:0;top:-1px;height:3px;background:var(--brand);
  width:var(--w,17%);transform:translateX(var(--x,0));
  transition:transform .35s cubic-bezier(.22,1,.36,1),width .35s linear;
}

@media (max-width:900px){
  .pj{padding:64px 0 72px}
  .pj__in{padding:0 22px}
  .pj__top{grid-template-columns:1fr;gap:20px}
  .pj__nav{justify-content:flex-start}
  .pj__slide{grid-template-columns:1fr;gap:20px;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .pj__track{scroll-behavior:auto}
  .pj__rail b{transition:none}
}

/* ───────────────────── КОНТАКТ ─────────────────────
   Залата се връща. В херото лъчът се разтваря; тук се
   събира в точка върху номера — светлината, минала през
   цялата страница, се фокусира върху едно действие.      */
/* ───────────────────── ЗА НАС ─────────────────────
   Три пласта: хартия за фактите, тъмен панел за клиентите,
   хартия за правилата. Без наклони и без ефекти — тежестта
   идва от подредбата и от съдържанието.                     */
.ab{background:var(--bg);padding:clamp(84px,9vw,124px) 0 0}
.ab__in{max-width:1400px;margin:0 auto;padding:0 32px}
.ab__k{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 24px;
}
.ab__head{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px);align-items:start;
}
.ab__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-.05em;
  margin:0 0 22px;max-width:15ch;text-wrap:balance;color:var(--ink);
}
.ab__lead{font-size:17px;line-height:1.62;color:var(--ink-2);max-width:50ch;margin:0}

/* фактите */
.ab__facts{margin:0;border-top:1px solid var(--ink)}
.ab__facts div{
  display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);
  gap:6px 20px;padding:13px 0;border-bottom:1px solid var(--rule);
}
.ab__facts dt{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px;
}
.ab__facts dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}

/* тъмният панел с клиентите */
.ab__panel{
  margin-top:clamp(56px,6vw,84px);
  background:#0C0B0A;color:#FFF6EA;
  padding:clamp(44px,5vw,72px) 0 clamp(36px,4vw,58px);
}
:root[data-theme="orange"] .ab__panel{background:#120A04}
.ab__pk{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#6E6960;margin:0 0 24px;
}
.ab__pk b{color:#A9A297;font-weight:600;font-variant-numeric:tabular-nums}
.ab__rows{border-top:1px solid #221F1A}
.ab__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;
  gap:clamp(14px,2.4vw,44px);align-items:baseline;
  padding:15px 0;border-bottom:1px solid #221F1A;
  position:relative;transition:color .25s linear;
}
.ab__row::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.ab__row:hover::before,.ab__row:focus-within::before{transform:scaleX(1)}
.ab__cl{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(15px,1.35vw,19px);letter-spacing:-.04em;color:#FFF6EA;
}
.ab__wh{font-size:14.5px;line-height:1.5;color:#A9A297}
.ab__ad{
  font-size:13px;color:#6E6960;white-space:nowrap;justify-self:end;
  transition:color .25s linear;
}
.ab__row:hover .ab__ad{color:var(--brand)}

/* правилата */
.ab__rules{
  padding:clamp(52px,6vw,82px) 0 clamp(76px,8vw,112px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px);
}
.ab__rule{padding-top:20px;border-top:1px solid var(--rule);position:relative}
.ab__rule::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--brand);
  transition:width .7s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.ab.is-on .ab__rule::before{width:100%}
.ab__rule b{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:15.5px;line-height:1.2;letter-spacing:-.035em;color:var(--ink);margin-bottom:9px;
}
.ab__rule span{font-size:14px;line-height:1.6;color:var(--ink-2)}

@media (max-width:1000px){
  .ab__head{grid-template-columns:1fr;gap:34px}
  .ab__rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .ab__row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .ab__ad{display:none}
}
@media (max-width:640px){
  .ab{padding-top:64px}
  .ab__in{padding:0 22px}
  .ab__row{grid-template-columns:1fr;gap:5px;padding:16px 0}
  .ab__rules{grid-template-columns:1fr;padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .ab__rule::before,.ab__row::before{transition:none}
  .ab__rule::before{width:100%}
}

/* ───────────────────── ВЪПРОСИ ─────────────────────
   Native <details> — отваря се и без JavaScript, а отговорите
   са в HTML-а от сървъра. Отвореният въпрос получава оранжева
   черта отгоре: светлината пада върху това, което питаш.      */
.fq{background:var(--bg);padding:clamp(80px,8.5vw,118px) 0 clamp(76px,8vw,112px)}
.fq__in{
  max-width:1400px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,88px);align-items:start;
}
.fq__k{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 22px;
}
.fq__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(29px,4.2vw,54px);line-height:1.03;letter-spacing:-.05em;
  margin:0 0 20px;max-width:13ch;text-wrap:balance;color:var(--ink);
}
.fq__note{font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:34ch;margin:0 0 20px}
.fq__tel{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(19px,1.9vw,26px);letter-spacing:-.05em;color:var(--ink);
  font-variant-numeric:tabular-nums;transition:color .25s linear;
}
.fq__tel:hover{color:var(--brand)}

.fq__list{border-top:1px solid var(--rule)}
.fq__i{border-bottom:1px solid var(--rule);position:relative}
.fq__i::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.fq__i[open]::before,.fq__i:hover::before{transform:scaleX(1)}

.fq__q{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(16px,1.5vw,21px);line-height:1.22;letter-spacing:-.04em;
  color:var(--ink);transition:color .2s linear;
}
.fq__q::-webkit-details-marker{display:none}
.fq__q:hover{color:var(--brand-ink)}
.fq__q:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.fq__pm{
  position:relative;width:15px;height:15px;flex:0 0 auto;align-self:center;
}
.fq__pm::before,.fq__pm::after{
  content:"";position:absolute;background:var(--brand);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s linear;
}
.fq__pm::before{left:0;right:0;top:7px;height:1.5px}
.fq__pm::after{top:0;bottom:0;left:7px;width:1.5px}
.fq__i[open] .fq__pm::after{transform:rotate(90deg);opacity:0}

.fq__a{padding:0 0 24px;max-width:62ch}
.fq__a p{font-size:15.5px;line-height:1.68;color:var(--ink-2);margin:0 0 12px}
.fq__a p:last-child{margin-bottom:0}
.fq__a a{color:var(--ink);border-bottom:1px solid var(--brand);padding-bottom:1px}
.fq__a b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .fq{padding:64px 0 72px}
  .fq__in{grid-template-columns:1fr;gap:30px;padding:0 22px}
  .fq__note{max-width:none}
  .fq__q{font-size:17px;padding:18px 0}
}
@media (prefers-reduced-motion:reduce){
  .fq__i::before,.fq__pm::before,.fq__pm::after{transition:none}
}

.ct{
  --room:#0B0A09;
  --lit:#FFF8EC;
  --lit-2:#B3ADA2;
  --lit-3:#6F6A61;
  --hair:#221F1A;
  position:relative;overflow:hidden;
  background:var(--room);color:var(--lit);
  padding:clamp(88px,9.5vw,140px) 0 clamp(72px,8vw,110px);
}
:root[data-theme="orange"] .ct{--room:#120A04}
/* сходящият лъч: широк отляво, стеснен до точка вдясно */
.ct__beam{
  position:absolute;left:0;top:0;bottom:0;width:78%;pointer-events:none;
  background:linear-gradient(97deg,rgb(243 110 39 / .13),rgb(243 110 39 / .05) 55%,rgb(243 110 39 / .02));
  clip-path:polygon(0 14%,100% 46%,100% 54%,0 86%);
}
.ct__beam::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgb(255 255 255 / .035) 0 1px,transparent 1px 3px);
}
.ct__in{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 32px}

.ct__k{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lit-3);margin:0 0 22px;
}
.ct__k .chap{color:var(--brand)}
.ct__h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(32px,5vw,70px);line-height:1;letter-spacing:-.055em;
  margin:0 0 22px;max-width:13ch;text-wrap:balance;color:var(--lit);
}
.ct__sub{font-size:17px;line-height:1.6;color:var(--lit-2);max-width:48ch;margin:0}

.ct__grid{
  margin-top:clamp(48px,5.5vw,78px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,90px);align-items:start;
}

/* точката, в която пада светлината */
.ct__tel{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.055em;
  color:var(--lit);font-variant-numeric:tabular-nums;margin-bottom:14px;
  transition:color .3s linear;
}
.ct__tel:hover{color:var(--brand)}
.ct__mail{
  display:inline-block;font-size:clamp(16px,1.6vw,21px);font-weight:500;
  color:var(--lit-2);border-bottom:1px solid var(--brand);padding-bottom:3px;
  transition:color .3s linear;
}
.ct__mail:hover{color:var(--lit)}
.ct__meta{
  margin:30px 0 0;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:13.5px;color:var(--lit-3);
}
.ct__meta b{color:var(--lit-2);font-weight:600}

/* формата */
/* капан за роботи — невидим, но не display:none, за да го напълнят */
.ct__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}
/* Всичко за самата форма живее в parts/forma.css. */

@media (max-width:900px){
  .ct{padding:66px 0 74px}
  .ct__in{padding:0 22px}
  .ct__grid{grid-template-columns:1fr;gap:44px}
  .ct__beam{width:100%;clip-path:polygon(0 10%,100% 40%,100% 62%,0 92%)}
}
@media (prefers-reduced-motion:reduce){
  .ct__f::before,.ct__send{transition:none}
}

/* ───────────────────── ФУТЪР ─────────────────────
   Осветлението пада на степени: три ленти, всяка по-тъмна
   от горната, разделени с косъм. Реостат, свален на стъпки —
   без нито един градиент. Долу името светва, а най-отдолу
   остава контролната лампа.                                 */
.ft{
  --f1:#0A0908;--f2:#070706;--f3:#030303;
  --fi:#F7F1E7;--fi2:#9F988D;--fi3:#655F57;--fh:#1C1A17;
  background:var(--f3);color:var(--fi);
}
:root[data-theme="orange"] .ft{--f1:#0E0803;--f2:#090501;--f3:#040201}
.ft__in{max-width:1400px;margin:0 auto;padding:0 32px}

.ft__b1{background:var(--f1);border-top:1px solid var(--fh);padding:clamp(56px,6vw,84px) 0}
.ft__b2{background:var(--f2);border-top:1px solid var(--fh);padding:clamp(40px,4.5vw,64px) 0 clamp(30px,3vw,44px)}
.ft__b3{background:var(--f3);border-top:1px solid var(--fh);padding:26px 0 30px}

/* картата на сайта */
.ft__map{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.2fr);
  gap:clamp(22px,3vw,52px);
}
.ft__col h3{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fi3);margin:0 0 16px;
}
.ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft__col a{font-size:14.5px;line-height:1.35;color:var(--fi2);transition:color .2s linear}
.ft__col a:hover{color:var(--fi)}
.ft__all{
  display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--fi);
  border-bottom:1px solid var(--brand);padding-bottom:2px;
}
.ft__tel{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(21px,2.1vw,28px);letter-spacing:-.05em;color:var(--fi);
  font-variant-numeric:tabular-nums;margin-bottom:10px;transition:color .25s linear;
}
.ft__tel:hover{color:var(--brand)}
.ft__mail{font-size:15px;color:var(--fi2);border-bottom:1px solid var(--fh);padding-bottom:2px}
.ft__mail:hover{color:var(--fi);border-bottom-color:var(--brand)}
.ft__where{margin:16px 0 0;font-size:13.5px;line-height:1.7;color:var(--fi3)}
.ft__where b{color:var(--fi2);font-weight:600}

/* името светва */
.ft__sign{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,54px);align-items:end}
.ft__word{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:800;
  font-size:clamp(58px,13.5vw,190px);line-height:.8;letter-spacing:-.075em;
  margin:0;color:var(--brand);opacity:.22;
  transition:opacity .9s cubic-bezier(.22,1,.36,1);
}
.ft.is-lit .ft__word{opacity:1}
@supports (-webkit-text-stroke:1px #000){
  .ft__word{
    opacity:1;color:transparent;
    -webkit-text-stroke:1.4px var(--fh);
    background-image:linear-gradient(101deg,var(--brand) 0 44%,var(--brand-2));
    background-repeat:no-repeat;background-size:0% 100%;
    -webkit-background-clip:text;background-clip:text;
    transition:background-size 1.5s cubic-bezier(.19,1,.3,1),
               -webkit-text-stroke-color .9s linear;
  }
  .ft.is-lit .ft__word{background-size:100% 100%;-webkit-text-stroke-color:transparent}
}
.ft__legal{text-align:right;font-size:13px;line-height:1.9;color:var(--fi3)}
.ft__legal a{color:var(--fi2)}
.ft__legal a:hover{color:var(--fi)}
.ft__legal b{color:var(--fi2);font-weight:600}

/* контролната лампа */
.ft__pilot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:12.5px;color:var(--fi3);
}
.ft__dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto;
}
.ft__up{
  display:inline-flex;align-items:center;gap:.55em;color:var(--fi2);
  font-size:12.5px;font-weight:600;
}
.ft__up:hover{color:var(--fi)}
.ft__up span{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ft__up:hover span{transform:translateY(-3px)}

@media (max-width:1000px){
  .ft__map{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
}
@media (max-width:700px){
  .ft__in{padding:0 22px}
  .ft__sign{grid-template-columns:1fr;gap:24px}
  .ft__legal{text-align:left}
  .ft__pilot{flex-direction:row-reverse;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .ft__word{transition:none;background-size:100% 100%;-webkit-text-stroke-color:transparent}
}

/* ───────────────────── ДОКУМЕНТАЦИЯ ───────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.open{padding:30px 0 54px;border-bottom:1px solid var(--rule)}
.open__k{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;
}
.open .open__t{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:800;
  font-size:clamp(32px,5.4vw,62px);line-height:1;letter-spacing:-.055em;
  margin:0 0 22px;max-width:15ch;text-wrap:balance;
}
.open p{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0}
.tools{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tools em{font-style:normal;font-size:14px;color:var(--ink-3)}

.sec{padding:56px 0;border-bottom:1px solid var(--rule)}
.sec__h{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  margin-bottom:30px;align-items:start;
}
.sec__n{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--brand-ink);padding-top:9px;
  font-variant-numeric:tabular-nums;
}
.sec h2{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:700;
  font-size:clamp(21px,2.8vw,31px);line-height:1.12;letter-spacing:-.045em;
  margin:0 0 10px;text-wrap:balance;
}
.sec__d{font-size:16.5px;color:var(--ink-2);max-width:62ch;margin:0}
.sec__body{padding-left:84px}
@media (max-width:760px){
  .sec__h{grid-template-columns:1fr}
  .sec__n{padding-top:0}
  .sec__body{padding-left:0}
}

.t{width:100%;border-collapse:collapse;font-size:14.5px}
.t th{
  text-align:left;padding:0 16px 10px 0;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--rule-2);
}
.t td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t .s{font-weight:700;white-space:nowrap}
.t .u{color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.t .g{color:var(--ink-2)}
.scroll{overflow-x:auto}
.scroll .t{min-width:640px}

.pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 44px}
.pt{padding:22px 0;border-top:1px solid var(--rule)}
.pt h3{
  font-size:15px;font-weight:700;letter-spacing:-.015em;margin:0 0 7px;
}
.pt p{font-size:14.5px;color:var(--ink-2);margin:0}
.pt ul{margin:0;padding-left:17px;font-size:14.5px;color:var(--ink-2)}
.pt li{margin-bottom:5px}

.flag{
  border-left:2px solid var(--amber);padding:4px 0 4px 20px;
  font-size:16px;color:var(--ink-2);margin-top:26px;
}
.flag b{color:var(--ink)}
.end{padding:44px 0 80px;font-size:14px;color:var(--ink-3)}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);
  z-index:90;opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);
  padding:11px 18px;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:opacity .18s,transform .28s cubic-bezier(.32,.72,0,1);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════ ВЪТРЕШНИ СТРАНИЦИ ═══════════════════
   Същият език: косъмни линии, твърди ръбове, растер, оранжевото
   само там, където има светлина. Нищо ново за научаване.        */

.pg{max-width:1400px;margin:0 auto;padding:0 32px}

/* трохите */
.crumb{padding:22px 0 0;font-size:12.5px;color:var(--ink-3)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55em}
.crumb li::after{content:"·";margin-left:.55em;color:var(--rule-2)}
.crumb li:last-child::after{display:none}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink)}

/* херо на вътрешна страница */
.ph{padding:clamp(30px,4vw,54px) 0 clamp(56px,6vw,86px)}
.ph__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,80px);align-items:center;
}
.ph__k{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px;
}
.ph h1{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(34px,5.4vw,74px);line-height:.99;letter-spacing:-.055em;
  margin:0 0 22px;color:var(--ink);text-wrap:balance;
}
.ph__lede{font-size:clamp(16px,1.5vw,19px);line-height:1.58;color:var(--ink-2);max-width:48ch;margin:0 0 28px}
.ph__facts{
  display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px;
  border-top:1px solid var(--rule);
}
.ph__facts div{
  /* основата е съдържанието, не равна ширина: иначе телефонът се
     пречупва на два реда, докато съседните колони стоят полупразни */
  flex:1 1 auto;min-width:min(150px,100%);
  padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);
  /* колона, за да може стойността да се залепи долу: иначе по-дълъг
     етикет се пречупва на два реда и бута числото си под другите */
  display:flex;flex-direction:column;
}
.ph__facts dt{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}
.ph__facts dd{
  margin:auto 0 0;font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(15px,1.3vw,19px);letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ph__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* макет на устройство */
.dev{position:relative;margin:0;justify-self:center;max-width:100%}
.dev img{display:block;width:100%;height:auto}
.dev figcaption{
  margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
}

/* общ блок за секция */
.sc{padding:clamp(56px,6.5vw,96px) 0;border-top:1px solid var(--rule)}
.sc--dark{
  background:#0C0B0A;color:#FFF6EA;border-top:0;
  padding:clamp(60px,7vw,104px) 0;
}
:root[data-theme="orange"] .sc--dark{background:#120A04}
.sc__k{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}
.sc--dark .sc__k{color:#6E6960}
.sc__h{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(26px,3.6vw,46px);line-height:1.04;letter-spacing:-.05em;
  margin:0 0 18px;max-width:17ch;text-wrap:balance;color:var(--ink);
}
.sc--dark .sc__h{color:#FFF6EA}
.sc__l{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:56ch;margin:0}
.sc--dark .sc__l{color:#A9A297}
/* ⚠️ Тъмната секция досега обличаше само главата си. Списъците вътре
   оставаха с мастилените си цветове и излизаха черно върху черно —
   същият капан като при панела. Затова тук се обличат и те. */
.sc--dark .inc div,.sc--dark .drv div,.sc--dark .risk div{border-top-color:#252420}
.sc--dark .inc b,.sc--dark .drv b,.sc--dark .risk b{color:#FFF6EA}
.sc--dark .inc span,.sc--dark .drv span,.sc--dark .risk span{color:#A9A297}
.sc--dark .inc a,.sc--dark .drv a,.sc--dark .risk a{color:var(--brand)}
.sc--dark .inc a:hover,.sc--dark .drv a:hover,.sc--dark .risk a:hover{color:#FFF6EA}
.sc__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(34px,4vw,58px);
}

/* списък с включено */
.inc{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(20px,2.6vw,44px);
}
.inc div{padding:20px 0;border-top:1px solid var(--rule)}
.inc b{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:15px;line-height:1.22;letter-spacing:-.035em;color:var(--ink);margin-bottom:8px;
}
.inc span{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* видове сайтове */
.kinds{border-top:1px solid var(--rule)}
.kind{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2.6vw,44px);align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--rule);position:relative;
}
.kind::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.kind:hover::before{transform:scaleX(1)}
.kind__n{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;
}
.kind__t{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(17px,1.7vw,24px);letter-spacing:-.045em;color:var(--ink);
  display:block;margin-bottom:7px;
}
.kind__d{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.kind__p{
  font-size:14px;color:var(--ink-3);white-space:nowrap;justify-self:end;
  font-variant-numeric:tabular-nums;
}
.kind:hover .kind__p{color:var(--brand)}

/* пакети */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.tier{
  padding:26px clamp(18px,2vw,32px) 30px 0;border-top:1px solid #221F1A;position:relative;
}
.tier + .tier{padding-left:clamp(18px,2vw,32px);border-left:1px solid #221F1A}
.tier__n{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;font-size:12.5px;
  letter-spacing:.08em;color:var(--brand);margin:0 0 14px;
}
.tier__t{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(16px,1.5vw,21px);line-height:1.14;letter-spacing:-.045em;
  color:#FFF6EA;margin:0 0 12px;min-height:2.28em;
}
.tier__p{display:flex;align-items:baseline;gap:.3em;margin:0 0 18px}
.tier__p > i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#6E6960}
.tier__p > b{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:600;
  font-size:clamp(28px,3vw,42px);line-height:.9;letter-spacing:-.06em;color:#FFF6EA;
  font-variant-numeric:tabular-nums;
}
.tier__p > em{font-style:normal;font-size:14px;color:#6E6960}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tier li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6em;
  font-size:14px;line-height:1.5;color:#A9A297;
}
.tier li i{font-style:normal;color:var(--brand);font-size:12px;line-height:1.55}

/* стъпки */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,56px) clamp(22px,3vw,52px)}
.step{padding-top:18px;border-top:1px solid var(--rule)}
.step b{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:-.06em;
  color:var(--brand);margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.step h3{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;font-size:16px;
  letter-spacing:-.04em;margin:0 0 8px;color:var(--ink);
}
.step p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}

/* примери */
.gal{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,66px);align-items:center}
.gal__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(16px,2.4vw,38px);align-items:end}

/* какво движи цената */
.drv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,2.6vw,44px)}
.drv div{padding:20px 0;border-top:1px solid var(--rule)}
.drv b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.drv span{font-size:14px;line-height:1.6;color:var(--ink-2)}

@media (max-width:1000px){
  .ph__in{grid-template-columns:1fr;gap:34px}
  .dev{max-width:520px}
  .inc,.drv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:1fr}
  .tier + .tier{padding-left:0;border-left:0}
  .sc__top{grid-template-columns:1fr;gap:18px}
  .gal{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pg{padding:0 22px}
  .ph h1{font-size:clamp(31px,9vw,44px)}
  .inc,.drv,.steps{grid-template-columns:1fr}
  .kind{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .kind__p{display:none}
  .gal__pair{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .kind::before{transition:none}
}

/* ── МЕСЕЦЪТ В ПОДДРЪЖКА ──────────────────────────────────────
   Тридесет квадратчета — тридесет дни. Всеки ден има наблюдение,
   някои носят бекъп, ъпдейт или отчет. Графикът се вижда, вместо
   да се обещава с думи.                                        */
.mon{border-top:1px solid var(--rule);padding-top:26px}
.mon__grid{
  display:grid;grid-template-columns:repeat(30,minmax(0,1fr));
  gap:5px;margin-bottom:26px;
}
.mon__d{
  position:relative;aspect-ratio:1;border:1px solid var(--rule-2);
  opacity:0;transform:scale(.72);
  transition:opacity .5s cubic-bezier(.22,1,.36,1) var(--d,0ms),
             transform .5s cubic-bezier(.22,1,.36,1) var(--d,0ms),
             border-color .3s linear,background-color .3s linear;
}
.is-in .mon__d{opacity:1;transform:none}
.mon__d[data-k="bk"]{background:rgb(243 110 39 / .18);border-color:rgb(243 110 39 / .45)}
.mon__d[data-k="up"]{background:var(--brand);border-color:var(--brand)}
.mon__d[data-k="rp"]{background:var(--ink);border-color:var(--ink)}
.mon__d::after{
  content:attr(data-n);position:absolute;left:50%;top:-19px;transform:translateX(-50%);
  font-size:10px;color:var(--ink-3);opacity:0;transition:opacity .2s linear;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.mon__d:hover::after{opacity:1}
.mon__key{display:flex;flex-wrap:wrap;gap:10px 26px}
.mon__key span{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.mon__key i{width:13px;height:13px;flex:0 0 auto;border:1px solid var(--rule-2)}
.mon__key i.bk{background:rgb(243 110 39 / .18);border-color:rgb(243 110 39 / .45)}
.mon__key i.up{background:var(--brand);border-color:var(--brand)}
.mon__key i.rp{background:var(--ink);border-color:var(--ink)}

/* ── БЕЗ ПОДДРЪЖКА ── */
.risk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,2.6vw,44px)}
.risk div{padding:22px 0;border-top:1px solid var(--rule);position:relative}
.risk div::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--brand-2);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.is-in .risk div::before{transform:scaleX(1)}
.risk b{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:15px;line-height:1.22;letter-spacing:-.035em;color:var(--ink);margin-bottom:8px;
}
.risk span{font-size:14px;line-height:1.6;color:var(--ink-2)}

@media (max-width:900px){
  .mon__grid{grid-template-columns:repeat(15,minmax(0,1fr));gap:6px}
  .risk{grid-template-columns:1fr}
}


/* ═══════════════════════════════════════════════════════════
   ПРОЕКТИ — наслагани, без слайдър.
   Всеки ред е отделна експозиция: екранът вляво, разказът вдясно,
   после обратното. Номерът е кух и се напълва със светлина.
   ═══════════════════════════════════════════════════════════ */
.prjs{display:grid;gap:0}

.prj{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--rule);
}
.prj:first-child{border-top:0;padding-top:clamp(24px,3vw,40px)}
.prj:nth-child(even) .prj__shot{order:2}

/* екранът */
.prj__shot{position:relative;margin:0;min-width:0}
.prj__d{display:block;position:relative;z-index:1}
.prj__d img{display:block;width:100%;height:auto;border:1px solid var(--rule-2)}
.prj__m{
  display:block;position:absolute;z-index:2;right:-2%;bottom:-9%;width:23%;
  filter:drop-shadow(0 0 0 transparent);
}
.prj__m img{display:block;width:100%;height:auto;border:1px solid var(--rule-2)}

/* лъчът, който пада върху екрана */
.prj__shot::before{
  content:"";position:absolute;z-index:0;left:-6%;top:-14%;width:52%;height:128%;
  background:var(--beam);mix-blend-mode:var(--beam-blend);opacity:var(--beam-op);
  clip-path:polygon(0 0,100% 18%,100% 82%,0 100%);
  transform:scaleY(.2);transform-origin:0 50%;
}
.prj:nth-child(even) .prj__shot::before{
  left:auto;right:-6%;transform-origin:100% 50%;
  clip-path:polygon(100% 0,0 18%,0 82%,100% 100%);
}

/* разказът */
.prj__no{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.06em;
  color:var(--brand);margin:0 0 14px;font-variant-numeric:tabular-nums;
}
.prj__name{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(21px,2.2vw,30px);line-height:1.12;letter-spacing:-.045em;
  color:var(--ink);margin:0 0 6px;
}
.prj__type{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 16px;
}
.prj__desc{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 18px;max-width:52ch}
.prj__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.prj__list li{display:grid;grid-template-columns:18px 1fr;gap:8px;
  font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.prj__list i{font-style:normal;color:var(--brand);line-height:1.5}
.prj__url{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  padding-bottom:5px;border-bottom:1px solid var(--rule-2);
  transition:color .2s,border-color .2s;
}
.prj__url span{color:var(--brand);transition:transform .22s}
.prj__url:hover{color:var(--brand-ink);border-bottom-color:var(--brand)}
.prj__url:hover span{transform:translateX(4px)}

@media (max-width:860px){
  .prj{grid-template-columns:1fr;gap:26px}
  .prj:nth-child(even) .prj__shot{order:0}
  .prj__m{width:20%;right:0;bottom:-7%}
  .prj__desc{max-width:none}
}


/* ═══════════════════════════════════════════════════════════
   КАЛКУЛАТОР — пултът вляво, отчетът вдясно.
   Всеки избор „светва“; сумата се превърта на същите барабани,
   с които са изписани и останалите цени в сайта.
   ═══════════════════════════════════════════════════════════ */
.kl{background:var(--pan);color:var(--pan-lit);position:relative;overflow:hidden;
  padding:clamp(44px,5vw,76px) 0;border-top:1px solid var(--rule)}
.kl__in{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(28px,4vw,60px);
  align-items:start;position:relative;z-index:1}

/* лъчът пада отляво върху пулта */
.kl::before{content:"";position:absolute;z-index:0;left:-4%;top:-20%;width:46%;height:140%;
  background:linear-gradient(102deg,rgb(243 110 39 / .17),rgb(243 110 39 / .04) 60%,transparent);
  clip-path:polygon(0 0,100% 16%,100% 84%,0 100%);
  transform:scaleY(.15);transform-origin:0 50%}
.is-in .kl::before{transform:scaleY(1);
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1) 160ms}

.kl__row{padding:20px 0;border-top:1px solid var(--pan-rule)}
.kl__row:first-child{border-top:0;padding-top:0}
.kl__q{display:flex;align-items:baseline;gap:12px;margin:0 0 13px;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--pan-lit)}
.kl__q i{font-style:normal;font-family:Unbounded,"Golos Text",sans-serif;
  font-size:12px;color:var(--pan-brand);font-variant-numeric:tabular-nums}
.kl__q em{font-style:normal;margin-left:auto;font-size:11.5px;font-weight:400;
  letter-spacing:.02em;color:var(--pan-dim)}

.kl__opts{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--pan-rule-2)}
.kl__o{
  appearance:none;background:transparent;border:0;border-left:1px solid var(--pan-rule-2);
  color:var(--pan-mid);font:inherit;font-size:13.5px;line-height:1.3;
  padding:11px 15px;cursor:pointer;flex:1 1 auto;text-align:left;
  transition:color .2s,background-color .2s;
}
.kl__o:first-child{border-left:0}
.kl__o:hover{color:var(--pan-lit);background:rgb(255 255 255 / .04)}
.kl__o.is-on{color:#0C0C0B;background:var(--brand)}
.kl__o:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* многозначните редове се държат като превключватели */
.kl__row[data-multi] .kl__o.is-on{background:var(--brand);color:#0C0C0B}
.kl__row[data-multi] .kl__o::before{content:"+ ";color:inherit;opacity:.55}
.kl__row[data-multi] .kl__o.is-on::before{content:"\2713 ";opacity:1}

/* ── отчетът ── */
.kl__out{border:1px solid var(--pan-rule-2);padding:clamp(20px,2.4vw,30px);
  position:sticky;top:88px}
.kl__k{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pan-dim)}
.kl__sum{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:clamp(38px,4.4vw,64px);line-height:1;letter-spacing:-.06em;
  color:var(--pan-lit)}
.kl__sum i{font-style:normal;font-size:.28em;letter-spacing:.04em;
  color:var(--pan-dim);align-self:center}
.kl__sum em{font-style:normal;font-size:.42em;color:var(--pan-brand)}
.kl__to{margin:0 0 18px;font-size:12.5px;color:var(--pan-dim)}
.kl__to b{color:var(--pan-mid);font-weight:600;font-variant-numeric:tabular-nums}

.kl__list{list-style:none;margin:0 0 20px;padding:16px 0 0;
  border-top:1px solid var(--pan-rule);display:grid;gap:7px;min-height:44px}
.kl__list li{display:grid;grid-template-columns:1fr auto;gap:10px;
  font-size:13px;color:var(--pan-mid)}
.kl__list li b{font-weight:600;color:var(--pan-lit);font-variant-numeric:tabular-nums}
.kl__list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kl__cta{display:inline-flex;align-items:center;gap:9px;
  background:var(--brand);color:#0C0C0B;text-decoration:none;
  font-size:13.5px;font-weight:600;padding:12px 18px;
  transition:transform .22s,background-color .2s}
.kl__cta:hover{background:#FF8038;transform:translateX(3px)}
.kl__note{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:var(--pan-dim)}

@media (max-width:900px){
  .kl__in{grid-template-columns:1fr}
  .kl__out{position:static}
  .kl__opts{flex-direction:column}
  .kl__o{border-left:0;border-top:1px solid var(--pan-rule-2)}
  .kl__o:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){
  .kl::before{transform:scaleY(1);transition:none}
}


/* ═══════════════════════════════════════════════════════════
   ДЪЛГИТЕ ДУМИ
   „дигитализацията“, „възстановяване“, „оптимизация“ — на едър
   кегел не се побират в своята колона и лягаха върху съседния
   текст. Заглавията се пренасят; преносната чертица идва, когато
   браузърът я умее, иначе думата просто се пречупва.
   ═══════════════════════════════════════════════════════════ */
h1,h2,h3,
.sc__h,.fq__h2,.ct__h2,.ab__h2,.pr__h2,.arh h1,.ph h1,
.bl__t,.prj__name,.kind__t,.tier__t,.mrow__b,.row__t{
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:manual;
}

/* решетките не бива да се разпъват от една дълга дума */
.fq__in > *,.sc__top > *,.ct__grid > *,.ar > *,.bl__row > *,.prj > *{min-width:0}

/* ═══════════════════════════════════════════════════════════
   БЛОГЪТ
   Списъкът е пулт: избираш тема, останалите потъмняват.
   Статията е тясна колона, указател отстрани и косъмна черта
   отгоре, която се пълни, докато четеш.
   ═══════════════════════════════════════════════════════════ */

/* ── лентата с темите ── */
.bl{padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,90px);border-top:1px solid var(--rule)}

.bl__bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,2vw,28px);padding-bottom:18px;border-bottom:1px solid var(--rule);
}
.bl__k{margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.bl__chips{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule-2);justify-self:start}
.bl__chip{
  appearance:none;background:transparent;border:0;border-left:1px solid var(--rule-2);
  color:var(--ink-2);font:inherit;font-size:13px;letter-spacing:.01em;
  padding:9px 15px;cursor:pointer;transition:color .2s,background-color .2s;
}
.bl__chip:first-child{border-left:0}
.bl__chip:hover{color:var(--ink);background:var(--bg-2)}
.bl__chip.is-on{background:var(--ink);color:var(--bg)}
.bl__chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.bl__count{margin:0;font-size:12.5px;color:var(--ink-3);justify-self:end}
.bl__count b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ── редовете ── */
.bl__list{display:grid}

.bl__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:clamp(16px,2.4vw,34px);padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:opacity .3s,background-color .25s;
}
.bl__row:hover{background:var(--bg-2)}
.bl__row[hidden]{display:none}

/* когато е избрана тема, несъответстващите потъмняват вместо да изчезнат */
.bl__list.is-filtered .bl__row{opacity:.22}
.bl__list.is-filtered .bl__row.is-match{opacity:1}

.bl__no{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:clamp(20px,2vw,28px);line-height:1;letter-spacing:-.05em;
  color:var(--brand-ink);font-variant-numeric:tabular-nums;padding-top:3px;min-width:2ch;
}
.bl__mid{min-width:0}
.bl__t{
  display:block;font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(18px,1.9vw,25px);line-height:1.18;letter-spacing:-.04em;
  color:var(--ink);margin-bottom:8px;transition:color .2s;
}
.bl__row:hover .bl__t{color:var(--brand-ink)}
.bl__d{display:block;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:62ch}

.bl__meta{display:grid;gap:6px;justify-items:end;text-align:right;white-space:nowrap}
.bl__cat{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--rule-2);padding:4px 9px;
}
.bl__min{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bl__empty{margin:34px 0 0;font-size:15px;color:var(--ink-2)}
.bl__empty a{color:var(--brand-ink)}

@media (max-width:820px){
  .bl__bar{grid-template-columns:1fr;gap:12px}
  .bl__count{justify-self:start}
  .bl__chips{width:100%;flex-direction:row;overflow-x:auto}
  .bl__chip{flex:1 0 auto}
  .bl__row{grid-template-columns:auto 1fr;gap:14px}
  .bl__meta{grid-column:2;justify-items:start;text-align:left;
    grid-auto-flow:column;justify-content:start;gap:10px;margin-top:12px}
}

/* ═══════════════════════════════════════════════════════════
   СТАТИЯТА
   ═══════════════════════════════════════════════════════════ */

/* лентата на напредъка — тънък лъч, който се пълни */
.ar__progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:var(--rule);pointer-events:none;
}
.ar__progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));
}

/* главата на статията */
.arh{position:relative;overflow:hidden;padding:clamp(18px,2vw,30px) 0 clamp(34px,4vw,54px)}
.arh__beam{
  position:absolute;inset:-30% -10% -10% -8%;pointer-events:none;
  background:var(--beam);mix-blend-mode:var(--beam-blend);opacity:var(--beam-op);
  clip-path:polygon(0 0,100% 14%,100% 86%,0 100%);
  transform:scaleY(.16);transform-origin:0 50%;
  animation:arbeam 1.1s cubic-bezier(.2,.7,.3,1) 120ms backwards;
}
@keyframes arbeam{from{transform:scaleY(.16)}to{transform:scaleY(1)}}
.arh__beam{transform:scaleY(1)}
.arh__in{position:relative;z-index:1;max-width:74ch}

.arh__k{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.arh__k span{color:var(--brand-ink);border:1px solid var(--rule-2);padding:4px 9px}
.arh__k i{font-style:normal;color:var(--ink-3);letter-spacing:.06em}

.arh h1{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(30px,4.4vw,58px);line-height:1.04;letter-spacing:-.055em;
  color:var(--ink);margin:0 0 18px;
}
.arh__lede{
  font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--ink-2);
  margin:0 0 26px;max-width:62ch;
}
.arh__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;margin:0;border-top:1px solid var(--rule);
}
.arh__facts div{padding:14px 16px 14px 0;border-right:1px solid var(--rule)}
.arh__facts div:last-child{border-right:0}
.arh__facts dt{font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.arh__facts dd{margin:0;font-size:15px;font-weight:600;color:var(--ink)}

/* тялото: указател отляво, текст в тясна колона */
/* minmax(0,1fr) — за да може дясната колона да се свива, вместо да разпъва */
.ar{display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;
  padding-bottom:clamp(30px,4vw,56px)}

.ar__toc{position:sticky;top:96px;min-width:0}
.ar__toc-k{margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.ar__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border-left:1px solid var(--rule)}
.ar__toc a{
  display:grid;grid-template-columns:2.4ch 1fr;gap:8px;align-items:baseline;
  padding:7px 0 7px 13px;margin-left:-1px;border-left:1px solid transparent;
  font-size:13px;line-height:1.4;color:var(--ink-3);text-decoration:none;
  transition:color .2s,border-color .2s;
}
.ar__toc a i{font-style:normal;font-size:10.5px;font-variant-numeric:tabular-nums;
  color:var(--ink-3);transition:color .2s}
.ar__toc a:hover{color:var(--ink)}
.ar__toc a.is-here{color:var(--ink);border-left-color:var(--brand)}
.ar__toc a.is-here i{color:var(--brand-ink)}

/* секциите в статията са по-въздушни от тези в услугите */
.ar__body > .sc{padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--rule)}
.ar__body > .sc:first-child{border-top:0;padding-top:0}
.ar__body .sc__top{display:block;margin-bottom:26px}
.ar__body .sc__h{max-width:24ch}
.ar__body .sc__l{margin-top:12px;max-width:60ch;font-size:16px;line-height:1.65}
.ar__body .pg{padding:0;max-width:none}

/* в тясна колона списъците стават на един ред */
.ar__body .inc,.ar__body .drv,.ar__body .risk{grid-template-columns:1fr 1fr}
.ar__body .steps{grid-template-columns:1fr 1fr}
.ar__body .kinds{grid-template-columns:1fr}

.ar__body .fq{padding-top:clamp(34px,4vw,54px);border-top:1px solid var(--rule)}
.ar__body .fq__in{grid-template-columns:1fr;gap:24px;padding:0;max-width:none}
.ar__body .fq__h2{max-width:20ch}

@media (max-width:980px){
  .ar{grid-template-columns:1fr}
  /* min-width:0 — иначе указателят разпъва мрежата вместо да се плъзга */
  .ar__toc{position:static;min-width:0;padding-bottom:22px;
    border-bottom:1px solid var(--rule);margin-bottom:6px}
  .ar__toc ol{grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;border-left:0;gap:0}
  .ar__toc a{border-left:0;border-bottom:1px solid transparent;padding:6px 14px 6px 0}
  .ar__toc a.is-here{border-bottom-color:var(--brand)}
}
@media (max-width:700px){
  .ar__body .inc,.ar__body .drv,.ar__body .risk,.ar__body .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .arh__beam{animation:none;transform:scaleY(1)}
}

/* ── лентата над проектите ползва пулта от блога, с малки разлики ── */
.prj__bar{margin-bottom:6px}
.prj__bar .bl__chip i{
  font-style:normal;margin-left:7px;font-size:10.5px;opacity:.55;
  font-variant-numeric:tabular-nums;
}
.prjs.is-filtered .prj{opacity:.16;transition:opacity .35s}
.prjs.is-filtered .prj.is-match{opacity:1}

/* видът на проекта носи и етикет за групата */
.prj__type{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prj__type span{
  font-size:9.5px;letter-spacing:.1em;color:var(--brand-ink);
  border:1px solid var(--rule-2);padding:3px 7px;
}

/* ═══════════════════════════════════════════════════════════
   ПО-РАННИ РАБОТИ
   Компактни карти вместо пълни експозиции — йерархията е честна
   и страницата остава за преглеждане.
   ═══════════════════════════════════════════════════════════ */
.pk__top{padding:clamp(38px,4.5vw,64px) 0 clamp(18px,2vw,28px);
  border-top:1px solid var(--rule)}
.pk__top h3{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(20px,2.1vw,29px);line-height:1.14;letter-spacing:-.045em;
  color:var(--ink);margin:0 0 10px;
}
.pk__top p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:62ch}

.pks{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}

.pk{
  display:grid;grid-template-rows:auto auto auto 1fr auto;gap:0;
  background:var(--bg);padding:0 0 16px;text-decoration:none;color:inherit;
  transition:background-color .25s,opacity .35s;
}
.pk:hover{background:var(--bg-2)}
.pk__shot{display:block;overflow:hidden;border-bottom:1px solid var(--rule);
  margin-bottom:15px}
.pk__shot img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pk:hover .pk__shot img{transform:scale(1.03)}

.pk__no{
  display:block;padding:0 16px;font-family:Unbounded,"Golos Text",sans-serif;
  font-size:12px;letter-spacing:-.02em;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.pk__t{
  display:block;padding:0 16px;font-family:Unbounded,"Golos Text",sans-serif;
  font-weight:500;font-size:16.5px;line-height:1.18;letter-spacing:-.035em;
  color:var(--ink);margin-bottom:5px;transition:color .2s;
}
.pk:hover .pk__t{color:var(--brand-ink)}
.pk__ty{display:block;padding:0 16px 14px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2)}
.pk__f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 16px}
.pk__f i{
  font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);border:1px solid var(--rule-2);padding:3px 7px;white-space:nowrap;
}
.pk__f em{font-style:normal;font-size:12px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* филтърът гаси и картите, както гаси и редовете */
.pks.is-filtered .pk{opacity:.16}
.pks.is-filtered .pk.is-match{opacity:1}

@media (max-width:560px){
  .pks{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   ЗНАЦИТЕ — два вида, по място

   Плочка: знак в рамка с ъглови белези, като номериран лист от
   каталог на оптични прибори. Ползва се в списъците, където знаците
   са много и малки.

   Изометрия: за едрите и самотни места — главата на страницата и
   четирите ленти на пейката. Там има въздух за обем.

   И двата се оцветяват при скрол: лъчът минава отляво надясно.
   При посочване залива целия знак.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────── ПЛОЧКА ─────────────────────────── */
.ik{
  display:block;width:46px;height:46px;overflow:visible;
  stroke-linecap:butt;stroke-linejoin:miter;fill:none;
  margin-bottom:14px;
}
.ik .ik__ram{stroke:var(--rule);stroke-width:1}
.ik .ik__ygl{stroke:var(--brand);stroke-width:1.5}
.ik .ik__a,.ik .ik__b{stroke-width:1.5}
.ik .ik__seyanka .ik__a,.ik .ik__seyanka .ik__b{stroke:var(--ink)}
.ik .ik__znak .ik__a{stroke:var(--brand-ink)}
.ik .ik__znak .ik__b{stroke:var(--brand)}

/* лъчът, който оцветява знака вътре в плочката */
.ik .ik__znak{
  clip-path:polygon(-10% -10%, 62% -10%, 22% 110%, -10% 110%);
  transition:clip-path .5s cubic-bezier(.2,.7,.3,1);
}

/* върху тъмно */
.sc--dark .ik .ik__ram,.ct .ik .ik__ram,
.ab__rule .ik .ik__ram{stroke:var(--pan-rule-2)}
.sc--dark .ik .ik__seyanka *,.ct .ik .ik__seyanka *,
.ab__rule .ik .ik__seyanka *{stroke:var(--pan-lit)}

/* при посочване рамката пламва и знакът се оцветява целият */
.inc div:hover .ik .ik__ram,
.drv div:hover .ik .ik__ram,
.risk div:hover .ik .ik__ram,
.ab__rule:hover .ik .ik__ram{stroke:var(--brand)}
.inc div:hover .ik .ik__znak,
.drv div:hover .ik .ik__znak,
.risk div:hover .ik .ik__znak,
.ab__rule:hover .ik .ik__znak{
  clip-path:polygon(-10% -10%, 140% -10%, 140% 110%, -10% 110%);
}
.ik .ik__ram{transition:stroke .25s}

/* ────────────────────────── ИЗОМЕТРИЯ ───────────────────────── */
.iz{
  display:block;overflow:visible;fill:none;
  stroke-linecap:butt;stroke-linejoin:miter;
}
.iz .iz__d{stroke:var(--ink);stroke-width:1.4}
.iz .iz__l{stroke:var(--brand);stroke-width:1.7}

.sc--dark .iz .iz__d,.hero .iz .iz__d,
.ob__band .iz .iz__d{stroke:var(--pan-lit)}

.iz--band{width:46px;height:46px;margin:0 0 15px}
.iz--big{width:100%;height:100%;margin:0}
.iz--big .iz__d{stroke-width:.9}
.iz--big .iz__l{stroke-width:1.2}

/* ── знакът в главата ── */
.ph__emb{
  position:relative;justify-self:center;align-self:center;
  display:flex;align-items:center;justify-content:center;
  width:min(310px,100%);aspect-ratio:1;
  border:1px solid var(--rule);
}
.ph__emb::before,.ph__emb::after{
  content:"";position:absolute;width:16px;height:16px;
  border:1px solid var(--brand);
}
.ph__emb::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ph__emb::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.ph__emb-in{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:70%;aspect-ratio:1;
}
.ph__emb-in::before{
  content:"";position:absolute;inset:-34% -46% -34% -66%;z-index:0;
  background:var(--beam);mix-blend-mode:var(--beam-blend);opacity:var(--beam-op);
  clip-path:polygon(0 0,100% 18%,100% 82%,0 100%);
}
.ph__emb-in::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,rgb(0 0 0 / .05) 0 1px,transparent 1px 3px);
  clip-path:polygon(-5% -5%,58% -5%,18% 105%,-5% 105%);
}
.ik--big{position:relative;z-index:1;width:100%;height:100%;margin:0}
.ph__emb--iz .ph__emb-in{width:76%}
.ph__emb--iz .iz{position:relative;z-index:1}

@media (max-width:900px){
  .ph__emb{width:min(230px,72%);margin-top:26px}
  .ik{width:40px;height:40px}
  .iz--band{width:40px;height:40px}
}

/* ────────────────────────── ПОЯВАТА ─────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* контурът се изчертава, ако редът чака разкриване */
  .ik .ik__a,.ik .ik__b{stroke-dasharray:1;stroke-dashoffset:0}
  [data-reveal]:not(.is-in) .ik .ik__a,
  [data-reveal]:not(.is-in) .ik .ik__b{stroke-dashoffset:1}
  [data-reveal] .ik .ik__a{
    transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
  }
  [data-reveal] .ik .ik__b{
    transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.3,1)
               calc(var(--d,0ms) + 180ms);
  }

  /* ъгловите белези се появяват заедно с рамката */
  [data-reveal]:not(.is-in) .ik .ik__ygl{opacity:0}
  [data-reveal] .ik .ik__ygl{
    transition:opacity .5s ease calc(var(--d,0ms) + 260ms);
  }

  /* цветът идва последен — лъчът минава през плочката */
  [data-reveal]:not(.is-in) .ik .ik__znak{
    clip-path:polygon(-10% -10%, -10% -10%, -10% 110%, -10% 110%);
  }
  [data-reveal] .ik .ik__znak{
    transition:clip-path .75s cubic-bezier(.2,.7,.3,1) calc(var(--d,0ms) + 400ms);
  }

  /* изометричните се изчертават по същия ред */
  .ph .iz__d{animation:izrisuvane 1.2s cubic-bezier(.2,.7,.3,1) 240ms backwards}
  .ph .iz__l{animation:izrisuvane .9s cubic-bezier(.2,.7,.3,1) 900ms backwards}
  @keyframes izrisuvane{from{opacity:0}to{opacity:1}}

  /* главата не чака скрол */
  .ph .ik__a{animation:ikrisuvane 1.1s cubic-bezier(.2,.7,.3,1) 220ms backwards}
  .ph .ik__b{animation:ikrisuvane .9s cubic-bezier(.2,.7,.3,1) 700ms backwards}
  .ph .ik__znak{animation:ikluch 1.2s cubic-bezier(.2,.7,.3,1) 900ms backwards}
  @keyframes ikrisuvane{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes ikluch{
    from{clip-path:polygon(-10% -10%, -10% -10%, -10% 110%, -10% 110%)}
    to{clip-path:polygon(-10% -10%, 62% -10%, 22% 110%, -10% 110%)}
  }
}

/* ═══════════════════════════════════════════════════════════
   ИЛЮСТРАЦИИТЕ
   ═══════════════════════════════════════════════════════════ */
.ph__emb--il{
  width:min(430px,100%);aspect-ratio:auto;border:0;padding:0;overflow:visible;
}
.ph__emb--il::before,.ph__emb--il::after{display:none}
.ph__emb--il .ph__emb-in{width:100%;aspect-ratio:auto}
.ph__emb--il .ph__emb-in::before,
.ph__emb--il .ph__emb-in::after{display:none}

.il{
  display:block;width:100%;height:auto;overflow:visible;
  stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;fill:none;
}
.il .il__seyanka *{stroke:var(--ink)}
.il .il__svetlo *{stroke:var(--brand)}
.il .il__rastеr *{stroke:var(--brand);stroke-width:.5;opacity:.26}
.il .il__svetlo{
  clip-path:polygon(-4% -4%, 58% -4%, 20% 104%, -4% 104%);
  transition:clip-path .9s cubic-bezier(.2,.7,.3,1);
}

/* ── плочата се изчертава сама, част по част, веднъж ──
   Всяка част носи pathLength=1 и пореден номер --i, така че
   закъснението ѝ се смята направо в стила. */
@media (prefers-reduced-motion:no-preference){
  .il .il__seyanka > *,.il .il__svetlo > *:not(.il__rastеr){
    stroke-dasharray:1;
    animation:ilChertay .62s cubic-bezier(.25,.7,.3,1) backwards;
    animation-delay:calc(var(--i,0) * 46ms + 120ms);
  }
  .il .il__rastеr{
    animation:ilPoyava .8s ease backwards;
    animation-delay:calc(var(--broy,20) * 46ms + 260ms);
  }
  @keyframes ilChertay{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes ilPoyava{from{opacity:0}to{opacity:1}}
}
.ph__emb--il:hover .il .il__svetlo{
  clip-path:polygon(-4% -4%, 130% -4%, 130% 104%, -4% 104%);
}
.sc--dark .il .il__seyanka *,.hero .il .il__seyanka *{stroke:var(--pan-mid)}

@media (max-width:900px){
  .ph__emb--il{width:min(400px,92%);margin-top:22px}
}
@media (prefers-reduced-motion:no-preference){
  .ph .il__svetlo{animation:ilLuch 1.4s cubic-bezier(.2,.7,.3,1) 500ms backwards}
  @keyframes ilLuch{
    from{clip-path:polygon(-4% -4%, -4% -4%, -4% 104%, -4% 104%)}
    to{clip-path:polygon(-4% -4%, 58% -4%, 20% 104%, -4% 104%)}
  }
}

/* ═══════════════════════════════════════════════════════════
   НАЧАЛНАТА СТРАНИЦА
   Тук знаците не чакат посочване. Лъчът минава бавно и сам
   стига до края — иконата се показва цяла, в цвят.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  /* плочките в „За нас“: лъчът тръгва отляво и залива всичко */
  .ab__rule .ik .ik__znak{
    clip-path:polygon(-10% -10%, 140% -10%, 140% 110%, -10% 110%);
  }
  /* „За нас“ не ползва data-reveal, а собствения си клас is-on */
  .ab:not(.is-on) .ab__rule .ik .ik__znak{
    clip-path:polygon(-10% -10%, -10% -10%, -10% 110%, -10% 110%);
  }
  .ab .ab__rule .ik .ik__znak{
    transition:clip-path 1.9s cubic-bezier(.25,.6,.2,1) calc(var(--d,0ms) + 420ms);
  }

  /* изометричните на пейката се изчертават бавно, ръб по ръб */
  .ob__band .iz .iz__d,.ob__band .iz .iz__l{
    stroke-dasharray:1;stroke-dashoffset:0;
  }
  .ob .ob__band:not(.is-lit) .iz .iz__d,
  .ob .ob__band:not(.is-lit) .iz .iz__l{stroke-dashoffset:1}
  .ob__band .iz .iz__d{
    transition:stroke-dashoffset 1.8s cubic-bezier(.25,.6,.2,1) 200ms;
  }
  .ob__band .iz .iz__l{
    transition:stroke-dashoffset 1.4s cubic-bezier(.25,.6,.2,1) 900ms;
  }
}

/* ═══════════════════════════════════════════════════════════
   МЯСТО ЗА LOTTIE
   Държи съотношението, за да не подскача подредбата, докато
   анимацията се зарежда. Отдолу стои неподвижен кадър — той
   се вижда при изключено движение и ако плеърът не тръгне.
   ═══════════════════════════════════════════════════════════ */
.lot{
  position:relative;display:block;width:100%;
  aspect-ratio:var(--ratio,1);
}
.lot > svg{display:block;width:100%!important;height:100%!important}
.lot [data-rezerv]{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;
}
.lot [data-rezerv] svg,.lot [data-rezerv] img{width:100%;height:100%;display:block}

/* ═══════════════════════════════════════════════════════════
   ФОРМАТА — конзола, не бланка

   Полетата са канали. Лъчът стои върху този, в който пишеш, и се
   мести с теб. Попълненият канал светва отляво и остава светъл.
   Отгоре стои брояч колко са готови — същата логика като на
   оптичната пейка.

   ⚠ Секцията `.ct` е тъмна при всички теми (виж style.css). Затова
   тук НЕ се ползват `--pan-*`, които се обръщат заедно с темата —
   само собствените тонове на секцията.
   ═══════════════════════════════════════════════════════════ */

.ct{
  --f-hair:#221F1A;      /* тиха черта между каналите */
  --f-hair-2:#3A342C;    /* рамката и празният лъч */
  --f-on:#8F4415;        /* попълнен канал — стихнало оранжево */
}

.ct__form{
  position:relative;display:grid;gap:0;
  border:1px solid var(--f-hair-2);
  background:linear-gradient(158deg,rgb(255 248 236 / .035),transparent 62%);
  padding:clamp(20px,2.6vw,34px);
}
/* ъгловите белези — както при знаците */
.ct__form::before,.ct__form::after{
  content:"";position:absolute;width:20px;height:20px;
  border:1px solid var(--brand);pointer-events:none;
}
.ct__form::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ct__form::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ── лентата отгоре: брояч на попълненото ── */
.ct__glava{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid var(--f-hair);
}
.ct__glava p{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lit-3);
}
.ct__broy{display:flex;align-items:center;gap:7px}
.ct__broy i{
  width:24px;height:3px;background:var(--f-hair-2);
  transition:background-color .3s linear;
}
.ct__broy i.is-on{background:var(--brand)}

/* ── каналите ── */
.ct__f{
  position:relative;padding:18px 0 16px 22px;
  border-bottom:1px solid var(--f-hair);
}
.ct__f:last-of-type{border-bottom:0}

/* лъчът вляво: тъмен, светва при фокус и остава при попълване */
.ct__f::after{
  content:"";position:absolute;left:0;top:12px;bottom:12px;
  width:2px;height:auto;right:auto;
  background:var(--f-hair-2);transition:background-color .3s linear;
}
.ct__f.is-pylno::after{background:var(--f-on)}
.ct__f:focus-within::after{background:var(--brand)}

/* клинът, който пада върху канала под курсора */
.ct__f::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgb(243 110 39 / .15),transparent 80%);
  clip-path:polygon(0 0,100% 15%,100% 85%,0 100%);
  transition:width .34s cubic-bezier(.2,.7,.3,1);
  transform:none;pointer-events:none;
}
.ct__f:focus-within::before{width:min(340px,64%)}

.ct__lab{
  display:flex;align-items:baseline;gap:10px;margin-bottom:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lit-3);transition:color .25s linear;
}
.ct__lab i{
  font-style:normal;font-family:Unbounded,"Golos Text",sans-serif;
  font-size:11px;letter-spacing:0;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.ct__f:focus-within .ct__lab,.ct__f.is-pylno .ct__lab{color:var(--lit)}

.ct__f input,.ct__f textarea{
  position:relative;z-index:1;width:100%;
  background:transparent;border:0;padding:0;color:var(--lit);
  font:inherit;font-size:clamp(17px,1.6vw,20px);line-height:1.45;
}
.ct__f textarea{min-height:78px;resize:vertical}
.ct__f input::placeholder,.ct__f textarea::placeholder{
  color:var(--lit-3);font-weight:400;
}
.ct__f input:focus,.ct__f textarea:focus{outline:0}

/* поле с грешка */
.ct__f.e::after{background:var(--brand-2)}
.ct__f.e .ct__lab{color:var(--brand-2)}
.ct__hint{
  display:block;margin-top:8px;font-size:12.5px;line-height:1.5;
  color:var(--brand-2);opacity:0;transform:translateY(-3px);
  transition:opacity .22s,transform .22s;pointer-events:none;
}
.ct__f.e .ct__hint{opacity:1;transform:none}

/* ── съгласието ── */
.ct__sygl{
  display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;
  padding:20px 0 4px 22px;cursor:pointer;
}
.ct__sygl input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;
  background:transparent;border:1px solid var(--f-hair-2);
  cursor:pointer;position:relative;transition:border-color .25s linear;
}
.ct__sygl:hover input{border-color:var(--brand)}
.ct__sygl input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* светлината влиза отляво надясно, не изниква */
.ct__sygl input::after{
  content:"";position:absolute;inset:-1px;background:var(--brand);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path .3s cubic-bezier(.2,.7,.3,1);
}
.ct__sygl input:checked{border-color:var(--brand)}
.ct__sygl input:checked::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
/* отметката се изчертава след като плочката се напълни */
.ct__sygl input::before{
  content:"";position:absolute;z-index:1;left:4px;top:5px;
  width:12px;height:6px;border:2px solid var(--room);
  border-top:0;border-right:0;
  transform:rotate(-45deg) scale(0);transform-origin:50% 50%;
  transition:transform .24s cubic-bezier(.2,.7,.3,1) .12s;
}
.ct__sygl input:checked::before{transform:rotate(-45deg) scale(1)}
.ct__sygl span{font-size:14px;line-height:1.55;color:var(--lit-2)}
.ct__sygl a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.ct__sygl a:hover{color:var(--lit)}
.ct__sygl.e input{border-color:var(--brand-2)}
.ct__sygl.e span{color:var(--brand-2)}

/* ── бутонът ── */
.ct__dolu{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  padding:22px 0 0 22px;margin-top:8px;
  border-top:1px solid var(--f-hair);
}
.ct__send{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;height:56px;padding:0 30px;
  background:var(--lit);color:var(--room);border:0;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:700;letter-spacing:-.012em;
  transition:opacity .25s linear,background-color .25s linear,color .25s linear;
}
.ct__send span{display:inline-flex;align-items:center;gap:12px}
.ct__send i{
  font-style:normal;display:inline-block;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.ct__send:hover{background:var(--brand);color:var(--lit)}
.ct__send:hover i{transform:translateX(5px)}
.ct__send:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ct__send[disabled]{opacity:.28;cursor:not-allowed}
.ct__send[disabled]:hover{background:var(--lit);color:var(--room)}
.ct__send[disabled]:hover i{transform:none}
/* докато лети — лентата минава напред-назад под надписа */
.ct__send[aria-busy="true"]{pointer-events:none}
.ct__send[aria-busy="true"] span{opacity:0}
.ct__send::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
}
.ct__send[aria-busy="true"]::after{
  animation:ctVyrvi 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ctVyrvi{
  0%{transform:scaleX(0);transform-origin:0 50%}
  50%{transform:scaleX(1);transform-origin:0 50%}
  51%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}
.ct__note{margin:0;max-width:30ch;font-size:12.5px;line-height:1.55;color:var(--lit-3)}

/* ── получено ── */
.ct__ok{display:none;padding:26px 0 6px 22px}
.ct__form.is-ok .ct__f,
.ct__form.is-ok .ct__glava,
.ct__form.is-ok .ct__sygl,
.ct__form.is-ok .ct__dolu{display:none}
.ct__form.is-ok .ct__ok{display:block}
.ct__form.is-ok .ct__ok:focus{outline:0}

.ct__ok-z{
  display:flex;align-items:center;gap:14px;margin:0 0 12px;
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(21px,2.4vw,29px);line-height:1.12;letter-spacing:-.045em;
  color:var(--lit);
}
.ct__ok-z svg{
  flex:0 0 auto;width:32px;height:32px;fill:none;
  stroke:var(--brand);stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;
}
.ct__ok-z svg path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:ctChek .6s cubic-bezier(.2,.7,.3,1) .1s forwards;
}
@keyframes ctChek{to{stroke-dashoffset:0}}
.ct__ok p{margin:0;font-size:15.5px;line-height:1.62;color:var(--lit-2);max-width:52ch}
.ct__ok b{color:var(--lit)}

/* ── формата в главата на страницата за контакти ── */
/* Горе уводът стои в лявата колона, а не над двете. Така формата
   започва на височината на заглавието и се вижда без да се търси. */
.ct--gore{padding:clamp(56px,6vw,88px) 0 clamp(64px,7vw,100px)}
.ct--gore .ct__grid{margin-top:0}
.ct--gore .ct__k{margin-bottom:18px}
.ct--gore .ct__h2{font-size:clamp(30px,4vw,54px);max-width:11ch;margin-bottom:18px}
.ct--gore .ct__sub{font-size:16px;max-width:40ch;margin-bottom:0}
/* На широк екран уводът и връзката се редят един под друг вляво, а
   формата стои вдясно през двата реда. На тесен екран редът в кода
   върши работата: увод, форма, после телефонът. */
/* прагът е същият, при който .ct__grid се свива в една колона */
@media (min-width:901px){
  .ct--gore .ct__grid{
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
    grid-template-rows:auto 1fr;row-gap:clamp(34px,3.6vw,54px);
  }
  .ct--gore .ct__uvod{grid-column:1;grid-row:1}
  .ct--gore .ct__vryzka{grid-column:1;grid-row:2}
  .ct--gore .ct__form{grid-column:2;grid-row:1 / 3}
}
@media (max-width:900px){
  .ct--gore .ct__vryzka{margin-top:4px}
}

@media (max-width:640px){
  .ct__f,.ct__sygl,.ct__dolu,.ct__ok{padding-left:16px}
  .ct__glava{flex-wrap:wrap;gap:8px}
  .ct__send{width:100%;justify-content:center;height:54px}
  .ct__note{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .ct__send[aria-busy="true"]::after{animation:none;transform:scaleX(.4)}
  .ct__ok-z svg path{animation:none;stroke-dashoffset:0}
  .ct__f::before,.ct__sygl input::after,.ct__sygl input::before{transition:none}
}

/* ═══════════════════════════════════════════════════════════
   ИНСТРУМЕНТИ — пултове, които работят в полза на читателя

   Езикът е същият като на калкулатора: тъмен панел, лъч отляво,
   твърди ръбове. Разликата е, че тук не се смята сума, а се брои
   какво липсва.

   ⚠️ Панелът е обратното на страницата — вътре се ползват само
   `--pan-*` токените, никога `--ink`/`--bg`.
   ═══════════════════════════════════════════════════════════ */

.pv{
  background:var(--pan);color:var(--pan-lit);
  position:relative;overflow:hidden;
  padding:clamp(44px,5vw,76px) 0;border-top:1px solid var(--rule);
}
.pv__in{
  display:grid;grid-template-columns:1.35fr .95fr;
  gap:clamp(28px,4vw,60px);align-items:start;position:relative;z-index:1;
}
/* лъчът пада отляво върху пулта — както при калкулатора */
.pv::before{
  content:"";position:absolute;z-index:0;left:-4%;top:-20%;width:46%;height:140%;
  background:linear-gradient(102deg,rgb(243 110 39 / .17),rgb(243 110 39 / .04) 60%,transparent);
  clip-path:polygon(0 0,100% 16%,100% 84%,0 100%);
  transform:scaleY(.15);transform-origin:0 50%;
}
.is-in .pv::before{transform:scaleY(1);transition:transform 1.2s cubic-bezier(.2,.7,.3,1) 160ms}

/* ── групите въпроси ── */
.pv__gr{margin-bottom:clamp(26px,3vw,42px)}
.pv__gr:last-child{margin-bottom:0}
.pv__gh{
  display:flex;align-items:baseline;gap:12px;margin:0 0 4px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pan-dim);
}
.pv__gh i{
  font-style:normal;font-family:Unbounded,"Golos Text",sans-serif;
  font-size:11px;letter-spacing:0;color:var(--pan-brand);
  font-variant-numeric:tabular-nums;
}
.pv__gh b{margin-left:auto;font-weight:600;letter-spacing:.02em;
  text-transform:none;font-size:11.5px;color:var(--pan-dim);
  font-variant-numeric:tabular-nums}

/* ── един ред: това пише ли го в офертата ── */
.pv__r{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  padding:15px 0;border-top:1px solid var(--pan-rule);cursor:pointer;
}
.pv__r:hover .pv__t{color:var(--pan-lit)}
.pv__r input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:2px 0 0;position:relative;cursor:pointer;
  background:transparent;border:1px solid var(--pan-rule-2);
  transition:border-color .25s linear;
}
.pv__r:hover input{border-color:var(--brand)}
.pv__r input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* светлината влиза отляво надясно, после се изчертава отметката */
.pv__r input::after{
  content:"";position:absolute;inset:-1px;background:var(--brand);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path .3s cubic-bezier(.2,.7,.3,1);
}
.pv__r input:checked{border-color:var(--brand)}
.pv__r input:checked::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.pv__r input::before{
  content:"";position:absolute;z-index:1;left:4px;top:5px;
  width:12px;height:6px;border:2px solid var(--pan);
  border-top:0;border-right:0;
  transform:rotate(-45deg) scale(0);transform-origin:50% 50%;
  transition:transform .24s cubic-bezier(.2,.7,.3,1) .12s;
}
.pv__r input:checked::before{transform:rotate(-45deg) scale(1)}

.pv__t{
  display:block;font-size:15px;font-weight:600;line-height:1.4;
  color:var(--pan-mid);transition:color .2s linear;
}
.pv__r input:checked ~ span .pv__t,
.pv__r:has(input:checked) .pv__t{color:var(--pan-lit)}
.pv__d{
  display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--pan-dim);
}

/* ── отчетът ── */
.pv__out{
  border:1px solid var(--pan-rule-2);padding:clamp(20px,2.4vw,30px);
  position:sticky;top:88px;
}
.pv__k{
  margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pan-dim);
}
.pv__sum{
  display:flex;align-items:baseline;gap:8px;margin:0 0 14px;
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;
  font-size:clamp(38px,4.4vw,64px);line-height:1;letter-spacing:-.06em;
  color:var(--pan-lit);font-variant-numeric:tabular-nums;
}
.pv__sum em{font-style:normal;font-size:.34em;color:var(--pan-dim);letter-spacing:-.03em}

/* лентата: по едно деление за всяка проверка */
.pv__bar{display:flex;gap:3px;margin:0 0 16px}
.pv__bar i{
  flex:1 1 0;height:5px;background:var(--pan-rule-2);
  transition:background-color .3s linear;
}
.pv__bar i.is-on{background:var(--brand)}

.pv__v{
  margin:0 0 4px;font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:clamp(17px,1.7vw,21px);line-height:1.2;letter-spacing:-.045em;
  color:var(--pan-lit);
}
.pv__vd{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--pan-dim)}

.pv__btns{
  display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--pan-rule);
}
.pv__b{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--brand);color:#0C0C0B;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;padding:12px 16px;text-align:left;
  transition:background-color .2s linear,transform .22s;
}
.pv__b:hover{background:#FF8038;transform:translateX(3px)}
.pv__b:focus-visible{outline:2px solid var(--pan-lit);outline-offset:2px}
.pv__b--tih{
  background:transparent;color:var(--pan-mid);border:1px solid var(--pan-rule-2);
}
.pv__b--tih:hover{background:transparent;color:var(--pan-lit);border-color:var(--pan-lit)}
.pv__b[disabled]{opacity:.32;pointer-events:none}
.pv__note{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:var(--pan-dim)}

/* ── въпросите, които излизат отдолу ── */
.pv__q{border-top:1px solid var(--rule)}
.pv__q[hidden]{display:none}
.pv__ql{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.pv__ql li{background:var(--bg);padding:20px 22px}
.pv__ql b{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-ink);margin-bottom:8px;
}
.pv__ql p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.pv__ql span{display:block;margin-top:8px;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ── съобщението, че е копирано ── */
.pv__vest{
  margin:10px 0 0;font-size:12.5px;color:var(--pan-brand);
  opacity:0;transform:translateY(-3px);
  transition:opacity .2s,transform .2s;
}
.pv__vest.is-on{opacity:1;transform:none}

@media (max-width:900px){
  .pv__in{grid-template-columns:1fr}
  .pv__out{position:static}
}
@media (prefers-reduced-motion:reduce){
  .pv::before{transform:scaleY(1);transition:none}
  .pv__r input::after,.pv__r input::before,.pv__b{transition:none}
}


/* ═══════════════════════════════════════════════════════════
   ЗАДАНИЕТО
   Същият пулт, но тук се пише, а не се отмята. Отдясно расте
   самото задание — виждате какво ще излезе, докато го правите.
   ═══════════════════════════════════════════════════════════ */

.zd{
  background:var(--pan);color:var(--pan-lit);
  position:relative;overflow:hidden;
  padding:clamp(44px,5vw,76px) 0;border-top:1px solid var(--rule);
}
.zd__in{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4vw,60px);align-items:start;position:relative;z-index:1;
}
.zd::before{
  content:"";position:absolute;z-index:0;left:-4%;top:-20%;width:46%;height:140%;
  background:linear-gradient(102deg,rgb(243 110 39 / .17),rgb(243 110 39 / .04) 60%,transparent);
  clip-path:polygon(0 0,100% 16%,100% 84%,0 100%);
  transform:scaleY(.15);transform-origin:0 50%;
}
.is-in .zd::before{transform:scaleY(1);transition:transform 1.2s cubic-bezier(.2,.7,.3,1) 160ms}

.zd__r{padding:18px 0;border-top:1px solid var(--pan-rule)}
.zd__r:first-child{border-top:0;padding-top:0}
.zd__q{
  display:flex;align-items:baseline;gap:12px;margin:0 0 11px;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--pan-lit);
}
.zd__q i{
  font-style:normal;font-family:Unbounded,"Golos Text",sans-serif;
  font-size:12px;color:var(--pan-brand);font-variant-numeric:tabular-nums;
}
.zd__q em{
  font-style:normal;margin-left:auto;font-size:11.5px;font-weight:400;
  letter-spacing:.02em;color:var(--pan-dim);
}

/* писането: линия отдолу, лъч при фокус — както във формата */
.zd__w{position:relative}
.zd__w input,.zd__w textarea{
  position:relative;z-index:1;width:100%;
  background:transparent;border:0;padding:0 0 9px;color:var(--pan-lit);
  font:inherit;font-size:16px;line-height:1.5;
}
.zd__w textarea{min-height:62px;resize:vertical}
.zd__w input::placeholder,.zd__w textarea::placeholder{color:var(--pan-dim);font-weight:400}
.zd__w input:focus,.zd__w textarea:focus{outline:0}
.zd__w::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--pan-rule-2);
}
.zd__w::before{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;z-index:2;
  background:var(--brand);transition:width .38s cubic-bezier(.2,.7,.3,1);
}
.zd__w:focus-within::before{width:100%}
.zd__r.is-pylno .zd__w::after{background:var(--pan-mid)}

/* изборите: плочки с твърди ръбове */
.zd__opts{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--pan-rule-2)}
.zd__o{
  appearance:none;background:transparent;border:0;
  border-left:1px solid var(--pan-rule-2);border-top:1px solid var(--pan-rule-2);
  color:var(--pan-mid);font:inherit;font-size:13.5px;line-height:1.3;
  padding:11px 15px;cursor:pointer;flex:1 1 auto;text-align:left;
  transition:color .2s linear,background-color .2s linear;
}
.zd__o:hover{color:var(--pan-lit);background:rgb(255 255 255 / .04)}
.zd__o.is-on{color:#0C0C0B;background:var(--brand)}
.zd__o:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.zd__r[data-multi] .zd__o::before{content:"+ ";opacity:.55}
.zd__r[data-multi] .zd__o.is-on::before{content:"\2713 ";opacity:1}

/* ── заданието, което расте отдясно ── */
.zd__out{border:1px solid var(--pan-rule-2);position:sticky;top:88px}
.zd__glava{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px clamp(18px,2vw,24px);border-bottom:1px solid var(--pan-rule);
}
.zd__glava p{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pan-dim);
}
.zd__glava b{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:400;font-size:15px;
  letter-spacing:-.03em;color:var(--pan-lit);font-variant-numeric:tabular-nums;
}
/* ⚠️ Тук нарочно НЕ се ползва моноширинен шрифт: кирилицата в него
   пада на заместващ и текстът излиза разреден и чужд на сайта. */
.zd__list{
  margin:0;padding:clamp(18px,2vw,24px);max-height:46vh;overflow:auto;
  font-size:13.5px;line-height:1.62;color:var(--pan-mid);
  white-space:pre-wrap;word-break:break-word;
}
.zd__list b{
  display:block;margin-bottom:2px;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pan-brand);
}
.zd__list u{text-decoration:none;color:var(--pan-dim);font-style:italic}
.zd__dolu{padding:clamp(18px,2vw,24px);border-top:1px solid var(--pan-rule);display:grid;gap:8px}

@media (max-width:900px){
  .zd__in{grid-template-columns:1fr}
  .zd__out{position:static}
  .zd__opts{flex-direction:column}
  .zd__o{border-left:0}
  .zd__o:first-child{border-top:0}
  .zd__list{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .zd::before{transform:scaleY(1);transition:none}
  .zd__w::before,.zd__o{transition:none}
}


/* ═══════════════════════════════════════════════════════════
   ДОГОВОРЪТ С БЕЛЕЖКИ В ПОЛЕТО
   Отляво е клаузата, както се подписва. Отдясно — какво значи
   и кого пази. Лъчът минава по члена, върху който си.
   ═══════════════════════════════════════════════════════════ */

.dv{padding:clamp(44px,5vw,72px) 0;border-top:1px solid var(--rule)}
.dv__gl{
  display:flex;align-items:baseline;gap:14px;
  margin:clamp(30px,3.4vw,48px) 0 4px;padding-bottom:12px;
  border-bottom:1px solid var(--ink);
}
.dv__gl:first-child{margin-top:0}
.dv__gl i{
  font-style:normal;font-family:Unbounded,"Golos Text",sans-serif;
  font-size:12px;color:var(--brand-ink);font-variant-numeric:tabular-nums;
}
.dv__gl h2{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}

/* един член: текстът и бележката до него */
.dv__ch{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,3vw,46px);align-items:start;
  padding:20px 0;border-bottom:1px solid var(--rule);
  position:relative;
}
.dv__ch::before{
  content:"";position:absolute;left:-14px;top:0;bottom:0;width:2px;
  background:var(--brand);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.dv__ch:hover::before{transform:scaleY(1)}

.dv__t{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink)}
.dv__t b{
  font-family:Unbounded,"Golos Text",sans-serif;font-weight:500;
  font-size:13.5px;letter-spacing:-.02em;color:var(--ink);
  margin-right:6px;font-variant-numeric:tabular-nums;
}
.dv__t em{font-style:normal;color:var(--brand-ink);font-weight:600}
.dv__t u{
  text-decoration:none;background:rgb(243 110 39 / .12);
  padding:1px 5px;color:var(--brand-ink);font-weight:600;
}

/* бележката отстрани */
.dv__n{
  margin:0;padding-left:16px;border-left:1px solid var(--rule-2);
  font-size:13.5px;line-height:1.66;color:var(--ink-2);
}
.dv__n b{color:var(--ink);font-weight:600}
.dv__n i{
  display:block;font-style:normal;margin-bottom:6px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.dv__n--ok i{color:var(--brand-ink)}
.dv__n--vni i{color:var(--brand-2)}
.dv__n--ok{border-left-color:var(--brand)}
.dv__n--vni{border-left-color:var(--brand-2)}

/* страните — таблото най-горе */
.dv__strani{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:6px;
}
.dv__strani > div{background:var(--bg);padding:20px 22px}
.dv__strani h3{
  margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-ink);
}
.dv__strani p{margin:0 0 7px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.dv__strani p:last-child{margin-bottom:0}
.dv__strani span{color:var(--ink-3)}

/* приложението */
.dv__pril{
  display:grid;grid-template-columns:1fr auto;gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.dv__pril > div{background:var(--bg);padding:15px 20px}
.dv__pril b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.dv__pril span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.dv__pril em{
  font-style:normal;display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand-ink);
  white-space:nowrap;
}

/* лентата за сваляне */
.dv__lenta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  margin-top:clamp(26px,3vw,40px);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--rule-2);
}
.dv__lenta p{margin:0;flex:1 1 300px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.dv__lenta b{color:var(--ink)}
.dv__dl{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--bg);border:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.012em;
  height:52px;padding:0 26px;transition:opacity .2s linear,transform .22s;
}
.dv__dl:hover{opacity:.86;transform:translateX(3px)}
.dv__dl:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.dv__vest{
  flex:0 0 100%;margin:0;font-size:12.5px;color:var(--brand-ink);
  opacity:0;transition:opacity .2s;
}
.dv__vest.is-on{opacity:1}

@media (max-width:820px){
  .dv__ch{grid-template-columns:1fr;gap:14px}
  .dv__strani{grid-template-columns:1fr}
  .dv__pril{grid-template-columns:1fr}
  .dv__pril em{margin-top:6px}
  .dv__ch::before{left:-10px}
}
@media (prefers-reduced-motion:reduce){
  .dv__ch::before,.dv__dl{transition:none}
}

/* ═══════════════════ РАЗКРИВАНЕ ═══════════════════
   Същите жестове като на началната, но общи за всяка страница:
   светлината пристига по линиите, числата се навиват, кухите
   номера се наливат. Всичко тръгва от data-reveal.            */

/* ── заглавието се загрява като волфрамова лампа ── */
.ph h1{
  --on:var(--ink);--off:var(--rule-2);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ph h1{
    background-image:linear-gradient(96deg,var(--on) 0 36%,var(--warm) 44%,var(--off) 53%,var(--off) 100%);
    background-size:300% 100%;background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:warm 1.4s .25s cubic-bezier(.38,0,.24,1) both;
  }
}

/* ── лъчът пада и върху вътрешните хера ── */
.ph{position:relative;overflow:hidden}
.ph__beam{
  position:absolute;left:0;top:0;height:86%;width:min(1120px,88%);
  pointer-events:none;z-index:0;background:var(--beam);
  clip-path:polygon(0 48.6%,0 48.6%,0 51.4%,0 51.4%);
  animation:beamOpen 1.5s .2s cubic-bezier(.14,.82,.22,1) forwards;
}
.ph__in{position:relative;z-index:1}

/* ── макетите изплуват ── */
.dev{opacity:0;transform:translateY(18px);
  transition:opacity .95s cubic-bezier(.19,1,.3,1) var(--d,0ms),
             transform .95s cubic-bezier(.19,1,.3,1) var(--d,0ms);}
.is-in .dev,.dev.is-in{opacity:1;transform:none}
.ph .dev{animation:devIn 1s .5s cubic-bezier(.19,1,.3,1) both;opacity:1;transform:none;transition:none}
@keyframes devIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── косъмните линии се изчертават ── */
.inc div,.drv div,.step{border-top-color:transparent !important;position:relative}
.inc div::before,.drv div::before,.step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.is-in .inc div::before,.is-in .drv div::before,.is-in .step::before{transform:scaleX(1)}

.kinds{border-top-color:transparent}
.kinds::before{
  content:"";display:block;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.is-in .kinds::before{transform:scaleX(1)}
.kind{border-bottom-color:transparent}
.kind::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.is-in .kind::after{transform:scaleX(1)}

/* ── номерата на стъпките: кухи, докато светлината не стигне ── */
.step b{
  color:var(--brand);opacity:.24;
  transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.is-in .step b{opacity:1}
@supports (-webkit-text-stroke:1px #000){
  .step b{
    opacity:1;color:transparent;
    -webkit-text-stroke:1.3px var(--rule-2);
    background-image:linear-gradient(102deg,var(--brand) 0 42%,var(--brand-2));
    background-repeat:no-repeat;background-size:0% 100%;
    -webkit-background-clip:text;background-clip:text;
    transition:background-size 1.25s cubic-bezier(.19,1,.3,1) var(--d,0ms),
               -webkit-text-stroke-color .8s linear var(--d,0ms);
  }
  .is-in .step b{background-size:100% 100%;-webkit-text-stroke-color:transparent}
}

/* ── цените: числата се навиват, лентите светват ── */
.tier{border-top-color:transparent}
.tier::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#221F1A;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.is-in .tier::before{transform:scaleX(1)}
.tier__p{opacity:0;transform:translateY(8px);
  transition:opacity .8s cubic-bezier(.19,1,.3,1) var(--d,0ms),
             transform .8s cubic-bezier(.19,1,.3,1) var(--d,0ms);}
.is-in .tier__p{opacity:1;transform:none}
.tier li{opacity:0;transform:translateY(6px);
  transition:opacity .6s cubic-bezier(.19,1,.3,1) calc(var(--d,0ms) + var(--li,0ms)),
             transform .6s cubic-bezier(.19,1,.3,1) calc(var(--d,0ms) + var(--li,0ms));}
.is-in .tier li{opacity:1;transform:none}

/* ── заглавията на секциите се вдигат ── */
.sc__top{opacity:0;transform:translateY(12px);
  transition:opacity .85s cubic-bezier(.19,1,.3,1),transform .85s cubic-bezier(.19,1,.3,1);}
.is-in .sc__top{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ph h1{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
  .ph__beam{animation:none;clip-path:polygon(0 30%,100% 2%,100% 98%,0 70%)}
  .ph .dev{animation:none}
  .dev,.sc__top,.tier__p,.tier li{opacity:1;transform:none;transition:none}
  .inc div::before,.drv div::before,.step::before,.kind::after,.kinds::before,.tier::before{
    transform:scaleX(1);transition:none;
  }
  .step b{background-size:100% 100%;-webkit-text-stroke-color:transparent;transition:none}
}


/* проектите се появяват един по един; номерът се напълва със светлина */
.prj{opacity:0;transform:translateY(22px)}
.is-in .prj{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--d,0ms),
             transform .7s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.prj__shot::before{transition:transform 1.1s cubic-bezier(.2,.7,.3,1) calc(var(--d,0ms) + 120ms)}
.is-in .prj__shot::before{transform:scaleY(1)}

@supports (-webkit-text-stroke:1px black){
  .prj__no{
    color:transparent;-webkit-text-stroke:1px var(--brand);
    background:linear-gradient(90deg,var(--brand),var(--brand-2)) left/0% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;
    transition:background-size 1s cubic-bezier(.2,.7,.3,1) calc(var(--d,0ms) + 200ms),
               -webkit-text-stroke-color .5s calc(var(--d,0ms) + 700ms);
  }
  .is-in .prj__no{background-size:100% 100%;-webkit-text-stroke-color:transparent}
}

@media (prefers-reduced-motion:reduce){
  .prj{opacity:1;transform:none;transition:none}
  .prj__shot::before{transform:scaleY(1);transition:none}
  .prj__no{background-size:100% 100%;-webkit-text-stroke-color:transparent;transition:none}
}