/* alexnenov.com — основни стилове */
/* =========================================================================
   ВИЗИЯ 2026 — „Cobalt sky“
   Страницата е редица от ЦВЕТНИ ЛЕНТИ. Всяка секция сменя фона и със себе си
   сменя локално мастилото, линиите и бутоните. Бялото е почивка между тях,
   не основата.

   #000080 нави    — шапка, случай, подвал
   #0047AB кобалт  — херо, заявка, подчертаните неща
   #82C8E5 небе    — секцията „проблем → решение“, акценти върху тъмно
   #6D8196 шисти   — лентата „за мен“
   #E9F4FA небе 10% — стъпките и леките подложки
   ========================================================================= */

:root{
  --navy:#000080;
  --cobalt:#0047AB;
  --sky:#82C8E5;
  --orange:#FF9F1C;      /* ярък кехлибар — бутоните и подчертаните думи върху синьо */
  --orange-2:#C06A00;    /* същото, но за текст върху светло */
  --orange-soft:#FFF4E0;
  --orange-ink:#14213D;  /* текстът ВЪРХУ кехлибара — тъмен, не бял */
  --slate:#6D8196;
  --tint:#E4F1FA;
  --tint-2:#CDE4F2;

  --paper:#FFFFFF;
  --soft:#F4F9FC;
  --line:#DCE7F0;
  --line-2:#BFD2E2;
  --ink:#0A1428;
  --ink-2:#44546A;
  --ink-3:#6D8196;
  --acc:#0047AB;
  --acc-2:#000080;

  --fh:"Inter Tight","Inter",system-ui,sans-serif;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(20px,5vw,40px);
  --max:1120px;
  --measure:40rem;
}

*,*::before,*::after{box-sizing:border-box}
/* Селекцията беше небесна — върху небесната лента ставаше невидима.
   Сега е нави с бяло, а върху тъмните ленти — кехлибар. */
::selection{background:var(--navy);color:#fff}
.band--navy ::selection,.band--cobalt ::selection{background:var(--orange);color:#14213D}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4{margin:0;font-family:var(--fh);font-weight:600;color:var(--ink);
  letter-spacing:-.028em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.2vw,3.1rem);letter-spacing:-.036em;line-height:1.06}
h2{font-size:clamp(1.5rem,2.5vw,2.05rem);letter-spacing:-.03em}
h3{font-size:1.06rem;letter-spacing:-.018em}
/* отбелязване с небето — върху една ключова дума */
/* Ключовата дума в заглавието: подчертавка + ярък цвят на буквите.
   Върху тъмните ленти ивицата е небесна, а буквите кехлибарени;
   върху светлите буквите потъмняват, за да се четат. */
.hl{color:var(--orange);box-shadow:inset 0 -.28em 0 rgba(130,200,229,.34)}
/* Кехлибарена подчертавка: буквите остават в цвета си, ивицата е топла. */
.hl-am{box-shadow:inset 0 -.3em 0 rgba(255,159,28,.5)}
.band--navy .hl-am,.band--cobalt .hl-am{box-shadow:inset 0 -.3em 0 rgba(255,159,28,.65)}
.band--paper .hl,.band--tint .hl{color:var(--navy);box-shadow:inset 0 -.3em 0 var(--sky)}
.band--sky .hl{color:var(--orange-2);box-shadow:inset 0 -.3em 0 rgba(255,255,255,.6)}

/* =========================================================================
   ЛЕНТИТЕ
   Всяка преобръща локално променливите, затова всички блокове вътре
   се пренастройват сами — не се пише по два пъти.
   ========================================================================= */
.band{position:relative}

.band--navy{background:var(--navy);
  --ink:#FFFFFF; --ink-2:#C2D3F0; --ink-3:#8FA6D6;
  --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.42);
  --acc:#82C8E5; --acc-2:#FFFFFF; --soft:rgba(255,255,255,.07);
  color:#fff}

.band--cobalt{background:var(--cobalt);
  --ink:#FFFFFF; --ink-2:#D6E5F8; --ink-3:#A8C6EA;
  --line:rgba(255,255,255,.26); --line-2:rgba(255,255,255,.45);
  --acc:#82C8E5; --acc-2:#FFFFFF; --soft:rgba(255,255,255,.08);
  color:#fff}

.band--sky{background:var(--sky);
  --ink:#04102B; --ink-2:#163353; --ink-3:#3A5E80;
  --line:rgba(4,16,43,.2); --line-2:rgba(4,16,43,.34);
  --acc:#000080; --acc-2:#0047AB; --soft:rgba(255,255,255,.35);
  color:#04102B}

.band--slate{background:var(--slate);
  --ink:#FFFFFF; --ink-2:#0D1B2E; --ink-3:#20354C;
  --line:rgba(255,255,255,.3); --line-2:rgba(255,255,255,.5);
  --acc:#00135E; --acc-2:#000080; --soft:rgba(255,255,255,.14);
  color:#0D1B2E}

.band--tint{background:var(--tint); --line:#C4DEEE; --line-2:#9FC8E0; --soft:#DBEDF7}

.band--paper{background:var(--paper)}

/* ---------------------------------------------------------------- рамка */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(3rem,5.5vw,5rem)}
.sec--tight{padding-block:clamp(2.2rem,4vw,3.4rem)}
.lede{font-size:1.18rem;line-height:1.6;color:var(--ink-2);max-width:var(--measure)}
.measure{max-width:var(--measure)}


.sec-head{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.sec-head p{margin-top:.8rem;color:var(--ink-2);max-width:var(--measure)}
.sec-head--row{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem 2rem;flex-wrap:wrap}

/* ---------------------------------------------------------------- действия */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 .98rem/1 var(--f);
  padding:.92rem 1.35rem;background:var(--cobalt);color:#fff;border:1px solid var(--cobalt);
  border-radius:4px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--line{background:none;color:var(--ink);border-color:var(--line-2)}
.btn--line:hover{background:none;border-color:var(--ink);color:var(--ink)}
.btn--lg{padding:1.05rem 1.6rem;font-size:1.02rem}

.band--navy .btn,.band--cobalt .btn{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.band--navy .btn:hover,.band--cobalt .btn:hover{background:#fff;border-color:#fff;color:var(--navy)}
.band--navy .btn--line,.band--cobalt .btn--line{background:none;color:#fff;
  border-color:rgba(255,255,255,.5)}
.band--navy .btn--line:hover,.band--cobalt .btn--line:hover{background:rgba(255,255,255,.1);
  border-color:#fff;color:#fff}
.band--sky .btn{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.band--sky .btn:hover{background:#fff;border-color:#fff;color:var(--navy)}
.band--sky .btn--line{background:none;color:#04102B;border-color:rgba(4,16,43,.4)}
.band--sky .btn--line:hover{background:rgba(255,255,255,.4);border-color:#04102B}
.band--slate .btn{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.band--slate .btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.a{color:var(--acc);font-weight:500;border-bottom:1px solid transparent;transition:.15s}
.a:hover{border-color:currentColor}
.more{font:500 .95rem/1 var(--f);color:var(--acc);white-space:nowrap}
.more::after{content:" →"}


/* ---------------------------------------------------------------- шапка
   Нави лента от край до край. Небето отбелязва текущия раздел. */
/* Прескачане на менюто — вижда се само при движение с таб. */
.skip{position:fixed;left:.6rem;top:-4rem;z-index:100;padding:.7rem 1.1rem;
  background:var(--orange);color:var(--orange-ink);font-weight:600;
  border-radius:0 0 .5rem .5rem;text-decoration:none;transition:top .15s}
.skip:focus{top:0}
.hdr{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
.hdr .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);min-height:78px}
.mark{display:block;font:600 1.06rem/1 var(--fh);letter-spacing:-.02em;white-space:nowrap;color:inherit}
.mark img{height:44px;width:auto;display:block}
.mark span{display:block;font:500 .7rem/1 var(--f);letter-spacing:.06em;
  color:var(--sky);margin-top:.5rem}
/* Менюто се разпъва по цялата височина на шапката, за да опре в панела —
   иначе между връзката и падащото меню остава процеп, в който мишката
   излиза и панелът се затваря. */
.nav{display:flex;align-items:center;align-self:stretch;gap:clamp(.8rem,2vw,1.7rem);
  margin-left:auto;overflow:visible;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;font:500 .97rem/1 var(--f);color:#C2D3F0;padding-block:.5rem;
  white-space:nowrap;transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;
  height:2px;background:var(--sky)}
.hdr-tel{font:500 .95rem/1 var(--f);color:#fff;white-space:nowrap}
.hdr .btn{padding:.72rem 1.1rem;font-size:.92rem;background:var(--orange);
  border-color:var(--orange);color:var(--orange-ink)}
.hdr .btn:hover{background:#fff;border-color:#fff;color:var(--navy)}
@media (max-width:900px){ .hdr-tel{display:none} }
@media (max-width:620px){
  .hdr .wrap{flex-wrap:wrap;gap:.8rem 1.2rem;padding-block:.9rem}
  .nav{order:3;width:100%;margin-left:0}
}

/* ---------------------------------------------------------------- начало на страница */
.lead{padding-block:clamp(3rem,6vw,5rem) clamp(2.6rem,5vw,4rem)}
.lead h1{max-width:30ch}
.lead .lede{margin-top:1.3rem}
.lead-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:2.2rem}
.lead-actions small{color:var(--ink-2);font-size:.92rem}

.ticks{display:flex;flex-wrap:wrap;gap:.8rem 1.9rem;margin-top:1.8rem}
.ticks li{display:flex;align-items:center;gap:.55rem;font:500 .99rem/1.2 var(--f);
  color:var(--ink)}
.ticks svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--acc);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}


/* ---------------------------------------------------------------- логата
   В цвят: тези лога се познават именно по цвета си. */
.logos{padding-block:clamp(1.8rem,3vw,2.6rem)}
.logos p{font:500 .76rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1.4rem}
.logo-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(1.2rem,2.4vw,2rem);align-items:center}
.logo-row span,.logo-row a{display:grid;place-items:center;min-height:36px}
.logo-row img{max-height:28px;max-width:100%;width:auto;object-fit:contain;
  transition:transform .18s}
.logo-row span:hover img,.logo-row a:hover img{transform:scale(1.07)}
@media (max-width:760px){ .logo-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem} }

/* ---------------------------------------------------------------- проблем → решение */
.pr{border-top:1px solid var(--line-2)}
.pr-row{display:grid;grid-template-columns:1fr 2.6rem 1fr;align-items:center;
  gap:.6rem;padding-block:1.4rem;border-bottom:1px solid var(--line)}
.pr-row b{font:500 1.05rem/1.45 var(--f);color:var(--ink-2)}
.pr-row i{font-style:normal;text-align:center;color:var(--acc);font-weight:600}
.pr-row strong{font:600 1.08rem/1.45 var(--fh);letter-spacing:-.018em;color:var(--ink)}
.pr-head{display:grid;grid-template-columns:1fr 2.6rem 1fr;gap:.6rem;padding-bottom:.8rem;
  font:600 .72rem/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.pr-head span:nth-child(2){text-align:center}
@media (max-width:680px){
  .pr-head{display:none}
  .pr-row{grid-template-columns:1fr;gap:.35rem;padding-block:1.15rem}
  .pr-row i{text-align:left}
}

/* ---------------------------------------------------------------- карти с услуги
   Без номера. Иконата носи картата: тъмносиньо квадратче с бял знак.
   При посочване цялата карта се обръща в кобалт, а знакът става кехлибарен —
   оттам идва и видимостта, и „живецът“. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.4rem)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:1.7rem 1.6rem 1.6rem;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFD 100%);
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(4,16,43,.06);
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
/* тънка кобалтова ивица горе, която се разгъва при посочване */
.card::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:0;
  background:var(--orange);transition:width .28s ease}
.card h3{line-height:1.35;font-size:1.12rem;transition:color .18s}
.card p{color:var(--ink-2);font-size:.97rem;line-height:1.58;transition:color .18s}
.card .more{margin-top:auto;padding-top:1rem;transition:color .18s}

.card-ico-box{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;
  margin-bottom:.6rem;background:linear-gradient(145deg,var(--cobalt),var(--navy));
  box-shadow:0 6px 16px rgba(0,32,92,.25);transition:background .18s,box-shadow .18s}
.card-ico{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}

/* обръщането на цвета — само за картите, които са връзки */
a.card:hover{background:var(--cobalt);border-color:var(--cobalt);
  box-shadow:0 20px 44px rgba(0,32,92,.3);transform:translateY(-4px)}
a.card:hover::before{width:100%}
a.card:hover h3{color:#fff}
a.card:hover p{color:#D6E5F8}
a.card:hover .more{color:var(--orange)}
a.card:hover .card-ico-box{background:var(--orange);box-shadow:0 6px 16px rgba(255,159,28,.45)}
a.card:hover .card-ico{stroke:var(--orange-ink)}

/* върху цветните ленти картата остава бяла, за да изпъква */
.band--tint .card,.band--sky .card{border-color:var(--line-2);
  box-shadow:0 4px 14px rgba(4,16,43,.1)}

@media (max-width:980px){ .cards,.cards--2,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .cards,.cards--2,.cards--4{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- числа */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-2)}
.nums div{padding:1.8rem clamp(1rem,2vw,1.6rem) 1.7rem;border-left:1px solid var(--line)}
.nums div:first-child{border-left:0;padding-left:0}
.nums u{display:block;font:600 2.6rem/1 var(--fh);letter-spacing:-.04em;
  color:var(--orange);text-decoration:none}
.nums u.ph{border-bottom:2px dashed var(--line-2);min-width:3.6rem;display:inline-block;
  opacity:.75}
.nums span{display:block;margin-top:.7rem;font-size:.96rem;color:var(--ink-2)}
@media (max-width:680px){
  .nums{grid-template-columns:1fr}
  .nums div{border-left:0;padding-inline:0;border-top:1px solid var(--line)}
  .nums div:first-child{border-top:0}
}

/* ---------------------------------------------------------------- стъпки */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,2.5vw,2rem)}
.steps li{border-top:2px solid var(--orange);padding-top:1.1rem}
.steps li h3{margin-bottom:.45rem}
.steps li p{color:var(--ink-2);font-size:.96rem;line-height:1.55}


@media (max-width:760px){ .steps{grid-template-columns:1fr 1fr;gap:1.6rem} }
@media (max-width:460px){ .steps{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- цена и обхват */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line)}
.tiers > div{background:var(--paper);padding:1.8rem clamp(1.1rem,2vw,1.7rem) 2rem}
.tiers > div.hi{background:var(--cobalt);color:#fff;
  --ink:#FFFFFF; --ink-2:#D6E5F8; --ink-3:#A8C6EA; --line-2:rgba(255,255,255,.45)}
.tiers h3{margin-bottom:.7rem}
.tiers .price{display:block;font:600 1.4rem/1 var(--fh);letter-spacing:-.03em;
  margin-bottom:1rem;color:var(--acc)}
.tiers > div.hi .price{color:var(--sky)}
.tiers .price em{font-style:normal;color:var(--ink-3);font-size:.92rem;font-weight:500}
.tiers .price .ph{border-bottom:2px dashed var(--line-2);display:inline-block;
  min-width:4.2rem;opacity:.8}
.tiers p{color:var(--ink-2);font-size:.97rem;line-height:1.55}
.tiers ul{margin-top:1rem;display:grid;gap:.55rem}
.tiers ul li{position:relative;padding-left:1.15rem;font-size:.95rem;color:var(--ink-2)}
.tiers ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--sky)}
@media (max-width:860px){ .tiers{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- портрет
   Кръг с пръстен от четирите цвята на палитрата и бяла фуга между тях. */
.portrait{display:inline-block;line-height:0;border-radius:50%;padding:7px;
  background:conic-gradient(from 200deg,
    var(--cobalt) 0deg, var(--sky) 95deg, var(--navy) 190deg,
    var(--slate) 280deg, var(--cobalt) 360deg)}
.portrait img{width:clamp(160px,20vw,232px);aspect-ratio:1;object-fit:cover;
  object-position:center 18%;border-radius:50%;border:4px solid #fff;display:block}
.portrait--sm img{width:76px;border-width:3px}
.portrait--sm{padding:4px}
.who{display:flex;align-items:center;gap:1.1rem;margin-top:2rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.who b{display:block;font:600 1rem/1.3 var(--fh);color:var(--ink)}
.who span{font-size:.94rem;color:var(--ink-2)}

/* ---------------------------------------------------------------- две колони */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem)}
.cols2--side{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:860px){ .cols2,.cols2--side{grid-template-columns:1fr} }

.checks{display:grid;gap:.8rem}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:.7rem;align-items:start;
  font-size:1rem;color:var(--ink-2);line-height:1.5}
.checks svg{width:16px;height:16px;margin-top:.33rem;stroke:var(--acc);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.checks--no svg{stroke:var(--ink-3)}

.dl{border-top:1px solid var(--line-2)}
.dl > div{padding-block:1.35rem;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1rem,3vw,2.5rem)}
.dl dt{font:600 1.03rem/1.4 var(--fh);letter-spacing:-.018em;color:var(--ink)}
.dl dd{margin:0;color:var(--ink-2);font-size:.99rem;line-height:1.6}
@media (max-width:700px){ .dl > div{grid-template-columns:1fr;gap:.4rem} }

.side{font-size:.97rem}
.side h3{margin-bottom:1rem;padding-bottom:.7rem;border-bottom:2px solid var(--acc)}
.side ul li{border-bottom:1px solid var(--line)}
.side ul a{display:flex;justify-content:space-between;gap:1rem;padding-block:.85rem;
  color:var(--ink-2);transition:color .15s}
.side ul a:hover{color:var(--acc)}
.side ul a span{color:var(--acc);font-size:.88rem;font-weight:600}

/* ---------------------------------------------------------------- форма
   Полета с една линия отдолу — върху кобалт линията е бяла. */
.ask .wrap{padding-block:clamp(3rem,5.5vw,4.6rem)}
.ask-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem)}
.ask h2{max-width:24ch}
.ask .lede{margin-top:.9rem;font-size:1.07rem}
.form{display:grid;gap:1.35rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.field label{display:block;font:600 .74rem/1 var(--f);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem}
.band--cobalt .field label,.band--navy .field label{color:#D6E5F8}
/* Истински бели полета с рамка — подчертавките се пропускат от хората. */
.field input,.field textarea,.field select{width:100%;font:400 1rem/1.5 var(--f);
  color:#0A1428;background:#fff;border:1px solid #C5D2DD;border-radius:6px;
  padding:.8rem .9rem;box-shadow:inset 0 1px 2px rgba(4,16,43,.05)}
.field textarea{resize:vertical;min-height:6.5rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;
  border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(130,200,229,.55)}
.field input::placeholder,.field textarea::placeholder{color:#8A94A6}
/* върху тъмните ленти бялото поле няма нужда от сива рамка */
.band--cobalt .field input,.band--cobalt .field textarea,.band--cobalt .field select,
.band--navy .field input,.band--navy .field textarea,.band--navy .field select{border-color:#fff}
.band--cobalt .field input:focus,.band--cobalt .field textarea:focus,
.band--navy .field input:focus,.band--navy .field textarea:focus{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,159,28,.5)}
.band--cobalt .field select option,.band--navy .field select option{color:#0A1428}
.form-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form-foot small{color:var(--ink-3);font-size:.88rem;max-width:28ch;line-height:1.45}
@media (max-width:860px){ .ask-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .form .row{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- подвал */
.ftr-main{padding-block:clamp(2.2rem,3.5vw,2.8rem)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.ftr-grid h4{font:600 .73rem/1 var(--f);letter-spacing:.13em;text-transform:uppercase;
  color:var(--sky);margin-bottom:1.1rem}
.ftr-grid ul{display:grid;gap:.65rem}
.ftr-grid a{font-size:.95rem;color:var(--ink-2)}
.ftr-grid a:hover{color:#fff}
.ftr-about{color:var(--ink-2);font-size:.96rem;max-width:34ch;margin-top:.9rem}
.ftr-bot{border-top:1px solid var(--line);padding-block:1.6rem;display:flex;
  align-items:center;justify-content:center;text-align:center;gap:.8rem 2rem;flex-wrap:wrap;font-size:.87rem;
  color:var(--ink-3)}
.ftr-bot a{color:var(--sky)}
@media (max-width:860px){
    .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .ftr-grid{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- дребно */
.ph-note{display:inline-block;font-size:.82rem;color:var(--ink-3);
  border-bottom:1px dashed var(--line-2)}
.note{position:fixed;right:16px;bottom:16px;z-index:90;max-width:19rem;
  background:#fff;border-left:4px solid var(--cobalt);box-shadow:0 6px 24px rgba(0,20,60,.18);
  padding:.85rem 1rem;font-size:.83rem;color:#44546A;line-height:1.5}
.note b{display:block;color:#0A1428;font-weight:600;margin-bottom:.2rem}
.note i{font-style:normal;color:#6D8196}
@media (max-width:900px){ .note{display:none} }

/* подвалът се отделя с небесна черта */
.ftr{border-top:4px solid var(--sky)}

/* гаранцията — изречение с кехлибарена черта отстрани */
/* Изречението, което носи обещанието — по-едро от увода, но не заглавие. */
.claim{margin-top:1rem;font:600 1.1rem/1.55 var(--fh);letter-spacing:-.015em;
  color:var(--navy);max-width:var(--measure)}
.band--navy .claim,.band--cobalt .claim{color:#fff}

.guar{margin-top:1.9rem;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--orange);
  font-size:1.02rem;color:var(--ink-2);max-width:52rem}
.guar b{display:block;color:var(--ink);font-weight:600;font-family:var(--fh);
  font-size:1.04rem;letter-spacing:-.015em;margin-bottom:.4rem}
.guar p{color:var(--ink-2);font-size:1rem;line-height:1.6}

/* ---------------------------------------------------------------- начало с портрет */
.lead-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.8rem,5vw,4rem);align-items:center}
.lead-grid .portrait{justify-self:end}
.lead-grid .portrait img{width:clamp(180px,24vw,280px)}
@media (max-width:860px){
  .lead-grid{grid-template-columns:1fr;gap:2rem}
  .lead-grid .portrait{justify-self:start}
  .lead-grid .portrait img{width:160px}
}

/* три стъпки вместо четири */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){ .steps--3{grid-template-columns:1fr} }

/* контакти: редове с данни */
.contact{display:grid;gap:0;border-top:1px solid var(--line-2)}
.contact > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1rem,3vw,2.5rem);padding-block:1.3rem;border-bottom:1px solid var(--line)}
.contact dt,.contact b{font:600 1.02rem/1.4 var(--fh);letter-spacing:-.018em;color:var(--ink)}
.contact span{color:var(--ink-2)}
.contact a{color:var(--acc);font-weight:500}
@media (max-width:700px){ .contact > div{grid-template-columns:1fr;gap:.35rem} }

/* ---------------------------------------------------------------- изскачаща заявка */
.modal{border:0;padding:0;width:min(38rem,calc(100% - 2rem));border-radius:10px;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(4,16,43,.4)}
.modal::backdrop{background:rgba(4,16,43,.58);backdrop-filter:blur(2px)}
.modal-head{background:var(--cobalt);color:#fff;padding:1.5rem clamp(1.3rem,3vw,2rem) 1.4rem;
  position:relative}
.modal-head h2{color:#fff;font-size:1.5rem}
.modal-head p{color:#D6E5F8;margin-top:.5rem;font-size:.98rem}
.modal-x{position:absolute;top:.9rem;right:.9rem;width:32px;height:32px;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.3rem;
  line-height:1;cursor:pointer;transition:background .15s}
.modal-x:hover{background:rgba(255,255,255,.3)}
.modal-body{padding:clamp(1.3rem,3vw,2rem)}
.modal-body .form{gap:1.1rem}
.booking{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.1rem clamp(1.3rem,3vw,2rem);background:var(--tint);
  border-bottom:1px solid var(--line-2)}
.booking b{font:600 1rem/1.3 var(--fh);display:block}
.booking span{font-size:.92rem;color:var(--ink-2)}
.booking .btn{margin-left:auto}
@media (max-width:520px){ .booking .btn{margin-left:0;width:100%;justify-content:center} }
.modal-or{display:block;text-align:center;font:600 .74rem/1 var(--f);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:1.1rem 0 .2rem}
.modal-mail{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.95rem;color:var(--ink-2)}
.modal-mail a{color:var(--acc);font-weight:600}


/* ---------------------------------------------------------------- избор на дни и часове
   Чекбоксове, облечени като хапчета. Клиентът маркира няколко удобни
   дни и часа, а изборът кога точно остава мой. */
.field label em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--ink-3);margin-left:.4rem}
.band--cobalt .field label em,.band--navy .field label em{color:#A8C6EA}
/* =========================================================================
   МАКЕТИ НА ЕКРАНИ, РИСУВАНИ С HTML
   Всяка услуга показва свой екран в херото: ERP табло, фуния на CRM,
   поток на автоматизация, две системи една до друга при миграция.
   Всичко е div-ове — няма картинки, няма снимки от стокови сайтове.
   ========================================================================= */
.mock{background:#fff;border-radius:12px;overflow:hidden;color:#0A1428;
  font:400 .82rem/1.4 var(--f);border:1px solid rgba(255,255,255,.45);
  box-shadow:0 30px 70px rgba(0,14,46,.45)}
.mock-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;
  background:#EEF3F8;border-bottom:1px solid #DCE7F0}
.mock-dot{width:9px;height:9px;border-radius:50%;background:#C8D4E0;flex:0 0 auto}
.mock-dot:first-child{background:#FF9F1C}
.mock-url{margin-left:.5rem;flex:1;font:500 .71rem/1 var(--f);color:#6D8196;background:#fff;
  border:1px solid #DCE7F0;border-radius:5px;padding:.32rem .6rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-body{padding:.9rem}
.mock-h{font:600 .68rem/1 var(--f);color:#6D8196;letter-spacing:.08em;
  text-transform:uppercase;margin:.2rem 0 .5rem}

/* плочки с числа */
.mock-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.7rem}
.mock-tile{background:#F5F9FC;border:1px solid #E2E9EF;border-radius:8px;padding:.55rem .65rem}
.mock-tile b{display:block;font:600 1.1rem/1 var(--fh);letter-spacing:-.02em}
.mock-tile span{display:block;font-size:.68rem;color:#6D8196;margin-top:.3rem}
.mock-tile i{font-style:normal;font-size:.67rem;font-weight:600;color:#0F7A4F}
.mock-tile i.down{color:#C2410C}

/* таблица */
.mock-tr{display:grid;grid-template-columns:1.1fr 2fr 1.3fr .9fr;gap:.5rem;
  padding:.45rem .5rem;border-radius:6px;align-items:center}
.mock-tr--h{font:600 .66rem/1 var(--f);text-transform:uppercase;letter-spacing:.07em;color:#6D8196}
.mock-tr--on{background:#F0F7FC}
.mock-tr b{font-weight:600;font-size:.76rem}
.mock-tr span{font-size:.73rem;color:#44546A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-tr u{text-decoration:none;font-weight:600;font-size:.76rem;text-align:right}
.mock-chip{display:inline-block;padding:.18rem .5rem;border-radius:999px;
  font:600 .64rem/1.5 var(--f);background:#E9F4FA;color:#0047AB;white-space:nowrap}
.mock-chip--ok{background:#E4F6EC;color:#0F7A4F}
.mock-chip--wait{background:#FFF4E0;color:#9A5B00}
.mock-chip--new{background:#EDEBFF;color:#4338CA}

/* колони на фуния */
.mock-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mock-col{background:#F5F9FC;border:1px solid #E2E9EF;border-radius:8px;padding:.5rem}
.mock-col h5{margin:0 0 .45rem;font:600 .68rem/1 var(--f);color:#44546A;
  display:flex;justify-content:space-between;gap:.4rem}
.mock-col h5 em{font-style:normal;color:#6D8196}
.mock-mini{background:#fff;border:1px solid #E2E9EF;border-radius:6px;padding:.45rem .5rem;
  box-shadow:0 1px 2px rgba(4,16,43,.05)}
.mock-mini + .mock-mini{margin-top:.38rem}
.mock-mini b{display:block;font:600 .73rem/1.25 var(--f)}
.mock-mini span{font-size:.66rem;color:#6D8196}

/* поток на автоматизация */
.mock-flow{display:grid;gap:.35rem}
.mock-node{display:flex;align-items:center;gap:.55rem;background:#F5F9FC;
  border:1px solid #E2E9EF;border-radius:8px;padding:.5rem .6rem}
.mock-node i{width:24px;height:24px;border-radius:7px;background:#0047AB;color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:.68rem;font-weight:700;flex:0 0 auto}
.mock-node--auto{background:#FFF8EE;border-color:#F3DCB4}
.mock-node--auto i{background:#FF9F1C;color:#14213D}
.mock-node b{display:block;font:600 .75rem/1.2 var(--f)}
.mock-node span{display:block;font-size:.67rem;color:#6D8196;margin-top:.12rem}
.mock-arrow{justify-self:center;color:#9FC8E0;font-size:.95rem;line-height:.5;height:.5rem}

/* две системи една до друга */
.mock-split{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-items:start}
.mock-pane{border:1px solid #E2E9EF;border-radius:8px;padding:.6rem}
.mock-pane--old{background:#F4F4F2;border-color:#E2E0DA}
.mock-pane--new{background:#F0F7FC;border-color:#9FC8E0}
.mock-pane h5{margin:0 0 .5rem;font:600 .7rem/1 var(--f);display:flex;
  justify-content:space-between;gap:.4rem}
.mock-pane--old h5{color:#77838F}
.mock-pane--new h5{color:#0047AB}
.mock-li{display:flex;gap:.4rem;align-items:flex-start;font-size:.71rem;line-height:1.35;
  margin-bottom:.32rem;color:#44546A}
.mock-pane--old .mock-li{color:#8A8F95}
.mock-li svg{width:11px;height:11px;flex:0 0 auto;margin-top:.2rem;fill:none;
  stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke:#0047AB}
.mock-pane--old .mock-li svg{stroke:#B0B5BB}

/* стълбчета */
.mock-bars{display:flex;align-items:flex-end;gap:.28rem;height:54px;margin-top:.5rem}
.mock-bars span{flex:1;background:#C7E0F0;border-radius:3px 3px 0 0}
.mock-bars span.on{background:#0047AB}

/* вътрешна система: ляво меню и съдържание */
.mock-side{display:grid;grid-template-columns:76px 1fr;gap:.6rem}
.mock-menu{display:grid;gap:.22rem;align-content:start;border-right:1px solid #EDF2F7;
  padding-right:.5rem}
.mock-menu span{font-size:.67rem;color:#6D8196;padding:.3rem .42rem;border-radius:5px}
.mock-menu span.on{background:#0047AB;color:#fff;font-weight:600}

/* херото с макет вместо портрет */
.lead-grid--wide{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
@media (max-width:860px){ .lead-grid--wide{grid-template-columns:1fr} }

.form-note{margin-top:.8rem;padding-left:.9rem;border-left:3px solid var(--orange);
  font-size:.89rem;line-height:1.45;color:var(--ink-2)}
.band--cobalt .form-note,.band--navy .form-note{color:#D6E5F8}

/* Логата на проектите идват от осем различни сайта в осем различни цвята.
   Върху нави ги обезцветяваме до бяло, за да изглеждат като един набор —
   включително цветното лого на Reshenia. */
.band--navy .logo-row img{filter:brightness(0) invert(1);opacity:.82;
  transition:opacity .18s,transform .18s}
.band--navy .logo-row span:hover img,.band--navy .logo-row a:hover img{opacity:1;transform:scale(1.07)}

/* =========================================================================
   СТАТИИ, КНИГИ, РАЗКАЗИ
   Списъкът със статии е списък със статии: снимка, категория, заглавие,
   откъс, дата. Без изобретения.
   ========================================================================= */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2vw,1.6rem)}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(4,16,43,.06);
  transition:box-shadow .18s,transform .18s,border-color .18s}
.post:hover{box-shadow:0 18px 40px rgba(0,32,92,.16);transform:translateY(-3px);
  border-color:var(--line-2)}
.post-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post:hover .post-img img{transform:scale(1.05)}
.post-img--none{display:grid;place-items:center;
  background:linear-gradient(140deg,var(--tint),var(--tint-2))}
.post-img--none span{font:700 1.5rem/1 var(--fh);color:#9FC8E0}
.post-body{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.2rem 1.2rem;flex:1}
.post-cat{align-self:flex-start;font:600 .7rem/1 var(--f);letter-spacing:.08em;
  text-transform:uppercase;color:var(--cobalt);background:var(--tint);
  padding:.35rem .6rem;border-radius:999px}
.post h3{font-size:1.06rem;line-height:1.35}
.post:hover h3{color:var(--cobalt)}
.post p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.post time{margin-top:auto;padding-top:.5rem;font-size:.84rem;color:var(--ink-3)}

/* книги */
.books{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.1rem,2vw,1.5rem)}
.book{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(4,16,43,.06);
  transition:box-shadow .18s,transform .18s}
.book:hover{box-shadow:0 18px 40px rgba(0,32,92,.16);transform:translateY(-3px)}
.book-cover{display:grid;place-items:center;aspect-ratio:3/4;background:var(--tint);
  padding:9%;overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(4,16,43,.25))}
.book-cover span{font:600 .9rem/1.3 var(--fh);color:#6D8196;text-align:center}
.book-body{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem 1.2rem;flex:1}
.book-body h3{font-size:1rem;line-height:1.3}
.book-meta{font-size:.84rem;color:var(--ink-3)}
.book-meta em{font-style:normal;display:block;color:var(--cobalt);font-weight:600;
  margin-top:.2rem}
.book-body p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.book-body .chip{align-self:flex-start;margin-top:auto}
.chip--ok{background:#E4F6EC;color:#0F7A4F}

/* разкази */
.stories{display:grid;gap:1rem;max-width:52rem}
.story{display:block;padding:1.4rem 1.5rem;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--cobalt);border-radius:0 10px 10px 0;
  box-shadow:0 2px 10px rgba(4,16,43,.06);transition:box-shadow .18s,transform .18s}
.story:hover{box-shadow:0 14px 34px rgba(0,32,92,.14);transform:translateX(3px)}
.story h3{font-size:1.15rem;margin-bottom:.5rem}
.story:hover h3{color:var(--cobalt)}
.story p{font-size:.97rem;color:var(--ink-2);line-height:1.6}
.story time{display:block;margin-top:.7rem;font-size:.84rem;color:var(--ink-3)}

@media (max-width:980px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .posts{grid-template-columns:1fr}
  .books{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* скритото поле срещу ботове — не се вижда, но го има в разметката */
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   МОСТ КЪМ СТАРИТЕ ИМЕНА
   Страниците, които още не са преправени (статия, книга, ресурси),
   ползват имената от предишния дизайн. Тук те сочат към новите цветове,
   за да изглеждат като част от същия сайт, докато им дойде редът.
   ========================================================================= */
:root{
  --bg:#FFFFFF; --bg-soft:var(--soft); --bg-mute:var(--tint);
  --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3);
  --brand:var(--cobalt); --brand-2:var(--navy); --brand-soft:var(--tint);
  --accent:var(--orange); --accent-2:var(--orange-2); --accent-soft:var(--orange-soft);
  --warm:var(--orange-2); --warm-soft:var(--orange-soft);
  --ok:#0F7A4F; --ok-soft:#E4F6EC;
  --r:10px; --r-sm:6px; --r-pill:999px;
  --sh:0 1px 2px rgba(4,16,43,.05);
  --sh-md:0 6px 18px rgba(4,16,43,.09);
  --sh-lg:0 18px 44px rgba(4,16,43,.14);
}
.sec--soft{background:var(--tint);border-block:1px solid var(--line)}
.eyebrow{display:block;font:600 .72rem/1 var(--f);letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:1rem}
.link{color:var(--acc);font-weight:600;display:inline-flex;align-items:center;gap:.35rem;
  transition:gap .16s}
.link:hover{gap:.6rem}
.chip--brand{background:var(--tint);color:var(--cobalt)}
.chip--ok{background:#E4F6EC;color:#0F7A4F}
.chip--warm,.chip--accent{background:var(--orange-soft);color:var(--orange-2)}

/* Още два стари класа, докато статията и книгата си дойдат на реда. */
.btn--ghost{background:none;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:none;border-color:var(--ink);color:var(--ink)}
.cta-band{background:var(--navy);color:#fff;border-radius:10px;
  padding:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1fr auto;gap:2rem;
  align-items:center;box-shadow:0 18px 44px rgba(4,16,43,.2)}
.cta-band h2{color:#fff}
.cta-band p{color:#C2D3F0;margin-top:.8rem;max-width:44ch}
.cta-band .btn{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.cta-band .btn:hover{background:#fff;border-color:#fff;color:var(--navy)}
@media (max-width:860px){ .cta-band{grid-template-columns:1fr} }

/* =========================================================================
   МЕГА МЕНЮ
   Панелът е от край до край под шапката: деветте услуги с иконки в три
   колони и лента с призив отдолу. Отваря се при посочване и при фокус
   с клавиатура; на телефон го няма — там „Услуги“ води към секцията.
   ========================================================================= */
/* Зоната за посочване стига до долния ръб на шапката, а панелът започва
   точно оттам — така между тях няма празнина, в която мишката да изпусне
   менюто. Посочването върху самия панел също го задържа отворен. */
.has-sub{position:static;display:inline-flex;align-items:center;align-self:stretch}
.has-sub > a{display:inline-flex;align-items:center;gap:.35rem}
.caret{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}

/* Закачен за прозореца, не за съседа: така ширината му не зависи от това
   кой елемент наоколо е позициониран. Шапката е залепена горе и е 68px. */
.mega{position:fixed;left:0;right:0;top:78px;z-index:70;display:none;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 26px 60px rgba(4,16,43,.28);
  max-height:calc(100vh - 78px);overflow:auto}
.has-sub:hover .mega,.has-sub:focus-within .mega,.mega:hover,
.has-sub.is-open .mega{display:block}
.mega-in{max-width:var(--max);margin:0 auto;padding:clamp(1.2rem,2.4vw,1.8rem) var(--gut);
  display:grid !important;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) !important;
  gap:.2rem 1.2rem}
.mega-in a{display:grid !important;grid-template-columns:42px minmax(0,1fr) !important;
  gap:.85rem;align-items:start;
  padding:.7rem .8rem;border-radius:8px;transition:background .15s}
.mega-in a:hover{background:var(--tint)}
/* Връзките в шапката са с nowrap; вътре в панела текстът трябва да се пренася. */
.mega-in a,.mega-in b,.mega-in span,.mega-foot-in{white-space:normal}
.mega-ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--cobalt),var(--navy));
  box-shadow:0 4px 12px rgba(0,32,92,.22)}
.mega-ico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mega-in a:hover .mega-ico{background:var(--orange)}
.mega-in a:hover .mega-ico svg{stroke:var(--orange-ink)}
.mega-in b{display:block;font:600 .98rem/1.3 var(--fh);letter-spacing:-.018em;color:var(--ink)}
.mega-in a:hover b{color:var(--cobalt)}
.mega-in span span{display:block;font-size:.85rem;line-height:1.45;color:var(--ink-2);
  margin-top:.22rem}
.mega-foot{background:var(--tint);border-top:1px solid var(--line)}
.mega-foot-in{max-width:var(--max);margin:0 auto;padding:.85rem var(--gut);display:flex;
  align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.94rem;color:var(--ink-2)}
.mega-foot-in b{color:var(--ink)}
.btn--sm{padding:.6rem 1rem;font-size:.9rem}
@media (max-width:760px){
  .nav{overflow-x:auto}
  .mega{display:none !important}
  .caret{display:none}
}


/* ---------------------------------------------------------------- еко сертификат
   Кръглият печат на EpicStamp. Стои в долния ред на подвала и се
   свива на телефон, за да не изяде екрана. */
.eco{display:inline-block;margin-top:1.3rem;line-height:0;transition:transform .18s}
.eco:hover{transform:scale(1.04)}
.eco img{width:118px;height:118px}
@media (max-width:620px){ .eco img{width:118px;height:118px} }
/* логата на двата сайта в долния ред на подвала — бели, за да са от един набор */
.ftr-logos{display:inline-flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.ftr-made{color:var(--ink-3)}
.ftr-logos img{height:20px;width:auto;filter:brightness(0) invert(1);opacity:.75;
  transition:opacity .18s}
.ftr-logos a:hover img{opacity:1}
.ftr-logos img[alt="Dynomica.eu"]{height:26px}
/* ---------------------------------------------------------------- кутии с числа
   Бели правоъгълници с едро число и един ред обяснение. Стоят върху
   тъмна лента, затова са бели — както логата на проектите. */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.4rem)}
.stat{background:#fff;border-radius:12px;padding:clamp(1.4rem,2.6vw,2rem);
  box-shadow:0 10px 30px rgba(0,16,50,.25)}
.stat u{display:block;font:600 clamp(2.2rem,4.4vw,3.2rem)/1 var(--fh);letter-spacing:-.04em;
  color:var(--cobalt);text-decoration:none}
.stat span{display:block;margin-top:.7rem;font-size:1.02rem;line-height:1.5;color:#44546A}
.stat span b{color:#0A1428;font-weight:600}
.stat-note{margin-top:.9rem;font-size:.92rem;color:var(--ink-3)}
@media (max-width:700px){ .stats{grid-template-columns:1fr} }
/* ---------------------------------------------------------------- разпокъсаните данни
   Малка илюстрация до текста: шест места, на които живее информацията
   за един клиент. Кутийките са с прекъсната рамка — нищо не ги свързва. */
.frag{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.1rem,2.4vw,1.5rem);box-shadow:0 6px 22px rgba(4,16,43,.07)}
.frag-h{font:600 .72rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1rem}
.frag-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.frag-box{display:block;padding:.7rem .75rem;border:1px dashed var(--line-2);
  border-radius:9px;background:var(--soft)}
.frag-box svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.4rem}
.frag-box b{display:block;font:600 .85rem/1.2 var(--fh);color:var(--ink)}
.frag-box i{display:block;font-style:normal;font-size:.74rem;line-height:1.35;
  color:var(--ink-3);margin-top:.2rem}
.frag-box:nth-child(2){transform:rotate(.7deg)}
.frag-box:nth-child(3){transform:rotate(-.6deg)}
.frag-box:nth-child(6){transform:rotate(.5deg)}
.frag-note{margin-top:1rem;font-size:.85rem;color:var(--ink-3)}
@media (max-width:520px){ .frag-grid{grid-template-columns:1fr} }

/* макет на уебсайт вътре в прозореца на браузъра */
.mock-site{border:1px solid #E2E9EF;border-radius:8px;overflow:hidden}
.mock-site-bar{display:flex;gap:.5rem;align-items:center;padding:.5rem .6rem;
  background:#F5F9FC;border-bottom:1px solid #E2E9EF}
.mock-site-bar span{height:6px;border-radius:3px;background:#C7D7E4}
.mock-site-bar span:first-child{width:28px;background:#0047AB}
.mock-site-bar span:nth-child(n+2){width:22px}
.mock-site-hero{padding:.9rem .8rem;background:linear-gradient(140deg,#0047AB,#000080);color:#fff}
.mock-site-hero b{display:block;font:600 .9rem/1.25 var(--fh)}
.mock-site-hero i{display:block;font-style:normal;font-size:.7rem;color:#C7DCF5;margin-top:.25rem}
.mock-site-hero em{display:inline-block;margin-top:.5rem;font-style:normal;
  font:600 .66rem/1 var(--f);background:#FF9F1C;color:#14213D;padding:.35rem .6rem;border-radius:4px}
.mock-site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.6rem}
.mock-site-cards span{height:34px;border:1px solid #E2E9EF;border-radius:6px;background:#F8FBFD}