/*
    bfree.bg — маркетинговият сайт.

    Езикът е същият като на платформата: бял фон, графитен текст, ЕДНО червено, което
    означава действие или марка. Manrope за заглавията, Golos Text за текста.

    Логото: първата буква е черна, останалите червени — както е на Nutella и Kinder.
    Тежко, стегнато, с лека плътност. На тъмен фон „b“ става бяло.
*/
*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#16191d;--ink-2:#39414a;--ink-3:#5b636d;--ink-4:#727a84;
  --paper:#f4f5f7;--paper-2:#f7f8fa;--paper-3:#eef0f3;--white:#fff;
  --line:#e3e6ea;--line-2:#dfe3e8;
  /* Brand red, changed 2026-10-05 from #d81e2c at the owner's request, to try #e20014.
     The previous set is kept here in full so it can be put back in one edit:
       --accent:#d81e2c; --accent-ink:#a8202c; --accent-soft:#fdeaec; --accent-tint:#fff7f8;
     `accent-ink` is the darker one used on text that sits on white, where the bright red is
     hard to read at small sizes; the two soft tints are its backgrounds. All four are
     derived from the same hue, so changing only the first would leave the page mismatched. */
  --accent:#e20014;--accent-ink:#b00010;--accent-soft:#fdeaec;--accent-tint:#fff7f8;
  --ok:#0f7b4f;
  --radius:6px;--radius-s:4px;
  /* 1440 като самата витрина на платформата: на широк екран 1280 оставяше твърде много
     празно отстрани и сайтът изглеждаше тесен. */
  --shell:1440px;--pad:clamp(1rem,4vw,56px);
  --display:'Manrope','Golos Text','Segoe UI',system-ui,sans-serif;
  --body:'Golos Text','Segoe UI',system-ui,sans-serif;
  /* Само за логото: Manrope свършва на 800 и марката не изглеждаше достатъчно плътна.
     Nunito стига до 1000 и е със заоблени краища — духът на Kinder/Nutella. */
  --logo:'Nunito','Manrope','Segoe UI',system-ui,sans-serif;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:16px/1.65 var(--body);color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  line-height:1.1;text-wrap:pretty}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ─────────── логото ─────────── */
/* The logo is a file now, not type. Height is what is set and width follows, because the
   two files are the same shape and a fixed width would squash whichever is swapped in. */
.logo{display:inline-block;line-height:0}
.logo img{display:block;height:34px;width:auto}
.logo--big img{height:clamp(58px,10vw,112px)}

/* ─────────── горна лента и хедър ─────────── */
.topbar{background:var(--ink);color:var(--white);font-size:12.5px;font-weight:500}
.topbar .shell{display:flex;align-items:center;justify-content:center;gap:24px;height:38px;
  overflow:hidden;white-space:nowrap}
.topbar .sep{opacity:.3}
.topbar b{color:var(--accent)}

.site-header{position:sticky;top:0;z-index:40;background:var(--white);
  border-bottom:1px solid var(--line)}
.site-header .shell{display:flex;align-items:center;gap:30px;height:76px}
.site-nav{display:flex;align-items:center;gap:24px;font-size:14.5px;color:var(--ink-2)}
.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current=page]{color:var(--ink);font-weight:700}
.header-acts{display:flex;align-items:center;gap:16px;margin-left:auto}
.phone{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  white-space:nowrap}
.phone:hover{color:var(--accent)}
.burger{display:none}

/* Линк със стрелка вътре в текста. Собствен клас, а НЕ класът на телефона: телефонният
   номер е `white-space:nowrap`, за да не се чупи на две, и когато едно цяло изречение
   вземеше същия клас, то ставаше 462px и изкарваше цялата страница настрани на телефон. */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
  line-height:1.5;color:var(--accent)}
.link-arrow:hover{color:var(--accent-ink)}
.link-arrow svg{flex:0 0 auto}

/* ─────────── бутони ─────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;
  padding:0 26px;border:0;border-radius:var(--radius-s);background:var(--accent);
  color:var(--white);font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  white-space:nowrap}
.btn:hover{background:var(--accent-ink);color:var(--white)}
.btn--sm{height:44px;padding:0 20px;font-size:14.5px}
.btn--lg{height:58px;padding:0 32px;font-size:17px}
.btn--ghost{background:0;border:1px solid rgba(255,255,255,.28);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.08);color:var(--white)}
.btn--dark{background:var(--ink)}
.btn--dark:hover{background:#000}

/* ─────────── секции ─────────── */
section{scroll-margin-top:86px}
.band{padding:84px 0}
.band--tight{padding:60px 0}
.band--paper{background:var(--paper)}
.band--ink{background:var(--ink);color:var(--white)}
.band--tint{background:var(--accent-soft)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  color:var(--accent);text-transform:uppercase}
.band--ink .eyebrow{color:#ff6b74}
.h-lead{font-size:clamp(30px,4vw,44px)}
.lede{max-width:60ch;font-size:17px;line-height:1.65;color:var(--ink-2)}
.band--ink .lede{color:rgba(255,255,255,.86)}
/* Геройът е тъмен, но няма класа band--ink, затова абзацът му оставаше тъмносив върху
   тъмно и се четеше едва. Той носи главното изречение — тук е най-светлият текст. */
.hero .lede{color:rgba(255,255,255,.88)}
.hero .lede strong{color:var(--white)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-bottom:28px;flex-wrap:wrap}
.head-row .lede{max-width:44ch;font-size:15px;color:var(--ink-3)}

/* ─────────── геройът ─────────── */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--white)}
.hero .shell{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:48px;
  padding-top:76px;padding-bottom:84px;align-items:center}
.hero-ghost{position:absolute;left:2%;bottom:-6%;font-family:var(--display);
  font-size:200px;font-weight:800;letter-spacing:-.06em;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.06);pointer-events:none;user-select:none}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:24px}
/* Една идея по-малко: на 58px последният ред се пречупваше и заглавието идваше на пет реда
   вместо на четири. */
.hero h1{font-size:clamp(32px,4vw,50px);color:var(--white)}
/* Червената черта под ключовия израз. .mark работи навсякъде, .hero-mark остава заради
   героя, където се появи първо. */
.hero-mark,.mark{position:relative;display:inline-block}
.hero-mark::after,.mark::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:7px;
  background:var(--accent)}
.mark::after{height:6px;bottom:-4px}
.tag{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:3px;
  background:rgba(216,30,44,.16);color:#ff6b78;font-size:12px;font-weight:700;
  letter-spacing:.05em}
.hero-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-note{font-size:14px;color:rgba(255,255,255,.68)}

/* Истински екран от системата, сложен в рамка. Снимките идват от demo.bfree.bg и НЕ са
   рисувани: рисуваният макет си личеше, че е рисунка, и затова отпадна. */
.shotframe{border-radius:10px;overflow:hidden;background:var(--white);
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.shotframe img{display:block;width:100%;height:auto}
.shotframe--light{box-shadow:0 24px 60px rgba(22,25,29,.14)}
.shot-cap{margin-top:10px;font-size:12.5px;color:var(--ink-4)}
.hero .shot-cap{color:rgba(255,255,255,.62)}

/* ─────────── дашбордът в героя ───────────
   Направен е с HTML, а не със снимка: рисуваният макет си личеше, че е рисунка, а
   снимката на екран се размива при мащабиране. Това е самият интерфейс. */
.dash-win{border-radius:10px;overflow:hidden;background:#1b2026;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.dash-top{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;
  background:#14181d;border-bottom:1px solid rgba(255,255,255,.07)}
.dash-dots{display:flex;gap:6px}
.dash-dots i{width:9px;height:9px;border-radius:50%;background:#333b44}
.dash-where{flex:1;font-size:12px;color:rgba(255,255,255,.68)}
.dash-k{padding:4px 9px;border-radius:3px;background:rgba(255,255,255,.08);
  font-size:11px;color:rgba(255,255,255,.8)}
.dash-body{display:flex;flex-direction:column;gap:12px;padding:14px}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);min-width:0}
.kpi span{font-size:11px;color:rgba(255,255,255,.68)}
.kpi b{font-family:var(--display);font-size:19px;font-weight:800;color:#fff;
  letter-spacing:-.02em;white-space:nowrap}
.kpi em{font-style:normal;font-size:11px;font-weight:700}
.kpi .up{color:#49c98a}
.kpi .down{color:#49c98a}          /* по-малко изоставени колички е добра новина */
.dash-panel{padding:12px;border-radius:6px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);min-width:0}
.dash-h{display:block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}
.bars{display:flex;align-items:flex-end;gap:5px;height:78px}
.bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:rgba(255,255,255,.16)}
.bars i.now{background:var(--accent)}
.dash-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.dash-orders li{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;
  color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.06)}
.dash-orders li:first-child{border-top:0}
.dash-orders b{color:rgba(255,255,255,.62);font-weight:600}
.dash-orders span:nth-of-type(1){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dash-orders .num:last-of-type{font-weight:700;color:#fff}
.st{font-style:normal;padding:3px 8px;border-radius:3px;font-size:10.5px;font-weight:700;
  white-space:nowrap}
.st--paid{background:rgba(73,201,138,.14);color:#49c98a}
.st--sent{background:rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.st--new{background:rgba(226,0,20,.18);color:#ff8791}
/* Списъкът е .dash-best, а не .dash-top: .dash-top е лентата на прозореца и щеше да
   налее в него височина 42px и тъмен фон. */
.dash-best li{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;
  color:rgba(255,255,255,.82)}
.dash-best li span{flex:0 0 auto;max-width:11ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dash-best li i{flex:1;height:6px;border-radius:3px;background:var(--accent);width:var(--w);
  max-width:var(--w);opacity:.85}
.dash-best li b{color:#fff}
/* Таблицата с продуктите — вторият екран, пак в HTML. */
.dash-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.dash-filters span{padding:4px 9px;border-radius:3px;background:rgba(255,255,255,.06);
  font-size:11.5px;color:rgba(255,255,255,.82)}
.dash-filters .on{background:rgba(216,30,44,.2);color:#ff8791;font-weight:600}
/* Без това клетката на решетката се оразмерява по минималната ширина на таблицата и
   цялата секция ставаше 930px на телефон. Таблицата се превърта вътре в рамката. */
.split>*{min-width:0}
.dash-tablewrap{overflow-x:auto;min-width:0}
/* Фиксирано разпределение: иначе дългите имена изтласкваха колоната „Статус“ извън
   рамката и се губеше точно това, което трябва да се види. */
/* min-width:0 бие глобалното `table{min-width:900px}` (то е за сравнителната таблица);
   без него таблицата тук стърчеше извън прозореца и колоната „Статус“ не се виждаше. */
.dash-table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:12.5px;
  color:rgba(255,255,255,.88)}
.dash-table th:first-child,.dash-table td:first-child{width:44%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dash-table th:nth-child(2),.dash-table td:nth-child(2){width:22%}
.dash-table th:nth-child(3),.dash-table td:nth-child(3){width:16%}
.dash-table th{padding:8px 10px 8px 0;text-align:left;font-family:var(--body);font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.58);
  border-bottom:1px solid rgba(255,255,255,.09)}
.dash-table td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.dash-table tr:last-child td{border-bottom:0}
.dash-table th:last-child,.dash-table td:last-child{padding-right:0;text-align:right}
/* Пунктирът значи „това се променя тук, в реда“ — така работи администрацията. */
.dash-table .edit{border-bottom:1px dashed rgba(255,255,255,.32);font-weight:700;color:#fff}
.dash-note{margin-top:2px;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.62)}
@media(max-width:34rem){
  .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-cols{grid-template-columns:1fr}
  .dash-orders li span:nth-of-type(1){display:none}
  .dash-table .col-hide{display:none}
}
/* По-широка дясна колона в героя: снимка на 520px става нечетима. */
.hero .shell{grid-template-columns:minmax(0,1fr) 620px}
@media(max-width:68rem){.hero .shell{grid-template-columns:1fr}}

/* ─────────── лентата с интеграциите ─────────── */
.strip{padding:16px 0 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.strip-label{font-size:11.5px;font-weight:700;letter-spacing:.09em;color:var(--ink-3);
  padding-bottom:10px}
.strip-track{overflow:hidden}
.marquee{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee span{display:flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap;
  font-family:var(--display);font-size:17px;font-weight:700}
.marquee i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* The marks, at one height so a wide wordmark and a square icon read as the same size.
   `width:auto` because the eight files are eight different shapes and a fixed width would
   squash the wide ones. Greyed until hovered: a row of ten full-colour logos competes with
   the page, and the point of the strip is that the shop is already connected to them. */
.marquee img{height:26px;width:auto;display:block;filter:grayscale(1);opacity:.62;
  transition:filter .2s,opacity .2s}
.marquee span:hover img{filter:none;opacity:1}
/* Cash on delivery and bank transfer are methods rather than companies, so they stay words. */
.marquee b{font-weight:700}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}}

/* ─────────── решетки ─────────── */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:1px solid var(--line);
  border-radius:8px;background:var(--white)}
.card h3{font-size:18px;font-weight:700}
.card p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.card .n{font-family:var(--display);font-size:13px;font-weight:800;color:var(--accent)}
.card--flat{border:0;padding:0}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px}
.ticks svg{margin-top:3px;flex:0 0 auto}

/* ─────────── чипове с марките ─────────── */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--white);
  font-size:14.5px;font-weight:700}
.chip small{font-size:11px;font-weight:600;color:var(--ink-4)}
/* Чип с истинско лого вместо изписано име. Логата са с различни пропорции, затова
   височината е фиксирана, а ширината се води по нея. */
.chip--logo{padding:0 14px}
.chip--logo img{height:20px;width:auto;display:block}
/* Еднаква височина не значи еднакъв вид: някои лога носят собствени полета в файла и
   излизат по-дребни. Изравнени са на око, не по число. */
.chip--logo img[src$="econt.svg"]{height:17px}
.chip--logo img[src$="speedy.svg"]{height:25px}
.chip--logo img[src$="dpd.svg"]{height:27px}
.chip--logo img[src$="boxnow.svg"]{height:27px}
.chip--logo img[src$="epay.png"]{height:18px}
.chip--logo img[src$="paypercut.svg"]{height:17px}
.chip--on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.band--ink .chip{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:var(--white)}
/* Картите в тъмна секция: досега се оцветяваха на ръка със style="" на всяко място. */
.band--ink .card{background:#1c2026;border-color:rgba(255,255,255,.08)}
.band--ink .card h3{color:#fff}
.band--ink .card p{color:rgba(255,255,255,.84)}
.band--ink .card .n{color:#ff6b78}

/* ─────────── таблицата ─────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:8px;
  background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:900px}
th,td{padding:15px 18px;text-align:left;vertical-align:top}
thead th{font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
thead th small{display:block;margin-top:5px;font-family:var(--body);font-size:11.5px;
  font-weight:600;color:var(--ink-4)}
thead th.us{background:var(--accent-tint);border-left:3px solid var(--accent);color:var(--ink)}
thead th.us small{color:var(--accent)}
tbody td.us{background:var(--accent-tint);border-left:3px solid var(--accent);font-weight:700}
tbody tr{border-bottom:1px solid var(--paper-3)}
tbody td:first-child{font-weight:600}
tbody td{color:var(--ink-2)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;
  vertical-align:middle}
.note{font-size:12.5px;color:var(--ink-4)}

/* ─────────── призивът ─────────── */
.callout{display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:8px;
  background:var(--ink);color:var(--white);flex-wrap:wrap}
.callout b{font-family:var(--display);font-size:19px;font-weight:800}
.callout span{font-size:14px;color:rgba(255,255,255,.76)}
.callout .btn{margin-left:auto}

/* ─────────── формата ─────────── */
.form{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:8px;
  background:var(--white);box-shadow:0 20px 50px rgba(216,30,44,.12)}
.form h3{font-size:21px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:var(--radius-s);background:var(--white);font:inherit;font-size:15px;
  color:var(--ink)}
textarea{height:auto;padding:12px 14px;line-height:1.55;resize:vertical}
input:focus,textarea:focus{outline:0;border-color:var(--ink)}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;
  color:var(--ink-2)}
.consent input{width:17px;height:17px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent)}
.consent a{color:var(--accent);text-decoration:underline}
.form-note{font-size:12.5px;color:var(--ink-4);text-align:center}
.contact-list{display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.contact-list li{display:flex;align-items:center;gap:11px}

/* ─────────── футър ─────────── */
.site-footer{background:var(--ink);color:rgba(255,255,255,.76);font-size:14px}
.site-footer .shell{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-top:52px;padding-bottom:28px}
.site-footer h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:700;margin-bottom:12px}
.site-footer a:hover{color:var(--white)}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .shell{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:26px;font-size:12.5px;grid-template-columns:none}

/* ─────────── страници със списъци ─────────── */
.page-head{padding:64px 0 40px}
.page-head h1{font-size:clamp(34px,5vw,54px)}
.feature-group{padding:34px 0;border-top:1px solid var(--line)}
.feature-group:first-of-type{border-top:0}
.feature-group h2{font-size:24px;margin-bottom:6px}
.feature-group .count{font-size:13px;color:var(--ink-4);font-weight:600}
.feature-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;
  margin-top:18px}
.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5}
.feature-list svg{margin-top:4px;flex:0 0 auto}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.toc a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;
  border:1px solid var(--line-2);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.toc a:hover{border-color:var(--accent);color:var(--accent)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.step{display:flex;flex-direction:column;gap:9px;padding:26px 24px;background:var(--white)}
.step .n{font-family:var(--display);font-size:13px;font-weight:800;color:var(--accent)}
.step h3{font-size:17px}
.step p{font-size:14px;color:var(--ink-2);line-height:1.6}

.blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.block{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--white);font-size:14.5px;font-weight:600}
.block i{width:10px;height:10px;border-radius:2px;background:var(--accent);flex:0 0 auto}
.block--custom{border-style:dashed;border-color:var(--accent);color:var(--accent);
  background:var(--accent-tint)}

/* ─────────── по-малки екрани ─────────── */
@media(max-width:68rem){
  .hero .shell{grid-template-columns:1fr;gap:40px}
  .split{grid-template-columns:1fr;gap:36px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .shell{grid-template-columns:1fr 1fr}
}
@media(max-width:48rem){
  .site-nav,.topbar .fold{display:none}
  .site-header .shell{height:66px;gap:14px}
  /* Логото, телефонът и бутонът не се побират в 390px — заедно правеха страницата
     471px широка и тя тръгваше настрани. Телефонът остава в героя и във футъра,
     където е с пълен размер; тук се маха. */
  .header-acts .phone{display:none}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .steps,.blocks,.feature-list{grid-template-columns:1fr}
  .band{padding:56px 0}
  .form-row{grid-template-columns:1fr}
  .hero-ghost{font-size:110px}
  .site-footer .shell{grid-template-columns:1fr;gap:28px}
  .callout .btn{margin-left:0;width:100%}
}