/* NapiCloud public site — design ported from wwwroot/pages/NAPI3.html.
   .nav/.dropdown from the prototype are renamed .site-nav/.site-dropdown so they do not collide with Bootstrap. */
/* ============================================================
   НАПИ (napi.bg) — редизайн прототип
   Дизайн-посока: „Институционална лекота" — професионално,
   стегнато, с много въздух. Гама Bootswatch Sandstone (запазена).
   Подпис на дизайна: „правни чипове" — всяка декларация носи
   етикет с правното си основание (чл. 62 КТ, чл. 127и ДОПК…).
   ============================================================ */

/* ---------- 1. Дизайн-токени: wwwroot/css/tokens.css (зарежда се преди този файл) ---------- */


/* ---------- 2. База ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .codex-auto .codex-item[aria-pressed="true"]::after{animation:codexStep var(--codex-step,2.5s) linear both!important}
  .roles-auto .role[aria-pressed="true"]::before{animation:codexStep var(--role-step,4s) linear both!important}
}
body{
  margin:0; font-family:var(--font-body); font-size:16.5px; line-height:1.65;
  color:var(--text); background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.18; color:var(--text); margin:0 0 .5em; letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.6vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.25rem,2.3vw,1.62rem); font-weight:800}
h3{font-size:1.22rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%; height:auto}
ul{padding-left:1.25em}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--indigo); color:#fff; padding:.6em 1em; z-index:200; border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}
.center{text-align:center}
hr.sep{border:0; border-top:1px solid var(--border); margin:0}

/* Секции */
.section{padding:72px 0}
.section.tight{padding:52px 0}
.section.soft{background:var(--bg-soft)}
.section.tint-blue{background:color-mix(in srgb,var(--blue) 14%,#fff)}
.section.tint-green{background:color-mix(in srgb,var(--green) 20%,#fff)}
.section.tint-duo{background:linear-gradient(120deg, color-mix(in srgb,var(--blue) 16%,#fff) 0%, color-mix(in srgb,var(--green) 20%,#fff) 100%)}
#solutions{background:var(--bg-tint)}
.section.tint{background:var(--bg-tint)}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font:600 .78rem/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-deep); margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--green); border-radius:2px}
.section-head{max-width:760px; margin-bottom:40px}
.section-head.center{margin-left:auto; margin-right:auto}
.section-head p{color:var(--muted); font-size:1.05rem}

/* ---------- 3. Бутони и значки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:600 .98rem/1.1 var(--font-display);
  padding:.85em 1.5em; border-radius:11px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none!important; transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:#fff}

/* Изтъкнат градиентен бутон (напр. hero CTA на страница ВФР) */
.btn-feature{
  background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue) 55%,var(--info)));
  color:#fff; border:none;
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--blue) 65%,transparent);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-feature:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px color-mix(in srgb,var(--blue) 75%,transparent);
  filter:brightness(1.06);
}
.btn-feature:active{transform:translateY(0)}

/* Градиентни бутони за hero-то на началната страница */
.btn-gradient-primary{
  background:linear-gradient(135deg,var(--green-deep),var(--blue));
  background-size:160% 160%; background-position:0% 50%;
  color:#fff; border:none;
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--green-deep) 55%,transparent);
  transition:transform .2s ease, box-shadow .2s ease, background-position .4s ease;
}
.btn-gradient-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px color-mix(in srgb,var(--green-deep) 65%,transparent);
  background-position:100% 50%;
}
.btn-gradient-primary:active{transform:translateY(0)}

.btn-gradient-outline{
  position:relative; color:var(--text);
  background-image:linear-gradient(var(--card),var(--card)), linear-gradient(135deg,var(--green-deep),var(--blue),var(--info));
  background-origin:border-box; background-clip:padding-box, border-box;
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn-gradient-outline:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -14px color-mix(in srgb,var(--blue) 45%,transparent);
  color:var(--blue);
}
.btn-gradient-outline:active{transform:translateY(0)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-green{background:var(--green); color:#243312}
.btn-green:hover{background:#A6DE54}
.btn-outline{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--blue); color:var(--blue)}
.btn-lg{padding:1.05em 1.9em; font-size:1.05rem}
.btn-sm{padding:.55em 1.05em; font-size:.88rem}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}

.badge{
  display:inline-flex; align-items:center; gap:.4em;
  font:700 .72rem/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  padding:.45em .8em; border-radius:99px;
}
.badge-pop{background:var(--blue); color:#fff}
.badge-beta{background:var(--beta-bg); color:var(--beta-text); border:1px solid rgba(161,103,29,.25)}
.badge-new{background:var(--bg-tint); color:var(--green-deep); border:1px solid color-mix(in srgb,var(--green-deep) 30%,transparent)}
.hero-badge{margin-bottom:14px}
.badge-web{background:var(--bg-tint); color:var(--green-dark); border:1px solid rgba(46,125,92,.2)}
.badge-dev{background:#EEF0FA; color:var(--indigo)}

/* ПОДПИС: правен чип — правно основание на всяка декларация */
.law{
  display:inline-flex; align-items:center; gap:.35em;
  font:500 .74rem/1 var(--font-body); letter-spacing:.02em;
  color:var(--blue); background:color-mix(in srgb,var(--blue) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);
  padding:.3em .6em; border-radius:6px; white-space:nowrap; vertical-align:middle;
}
.law::before{content:"§"; font-weight:700; opacity:.65}

/* ---------- Header, account menu and footer: wwwroot/css/chrome.css ---------- */

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--bg-tint-2) 0%,var(--bg-page) 90%);
  border-bottom:1px solid var(--border);
}
.hero-grid{display:block; max-width:640px; padding-top:76px; padding-bottom:84px}
.hero-grid.with-media{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; max-width:var(--maxw); margin:0 auto}
@media (max-width:980px){.hero-grid.with-media{grid-template-columns:minmax(0,1fr); gap:28px; max-width:520px; margin:0 auto}}
.hero h1 .l2{color:var(--indigo)}
.hero h1 .hl-blue, .page-hero h1 .hl-blue{color:var(--blue)}
.hero h1 .hl-green, .page-hero h1 .hl-green{color:var(--green-deep)}
.hero .lead{font-size:1.14rem; color:var(--muted); max-width:34em; margin-bottom:28px}
.hero-check{
  display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:500; color:var(--text);
  margin:-18px 0 24px;
}
.hero-check svg{flex:0 0 auto; color:var(--green-deep)}
.hero-cta{display:flex; flex-wrap:nowrap; gap:10px; margin-bottom:26px}
.hero-grid.with-media .hero-cta{margin-bottom:0}
@media (max-width:560px){.hero-cta{flex-wrap:wrap}.hero-cta > .btn{flex:1 1 100%; justify-content:center}}
.trust-row{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.9rem; color:var(--muted)}
.trust-row span{display:inline-flex; align-items:center; gap:.45em}
.trust-row svg{color:var(--green-deep); flex:0 0 auto}
@media (max-width:980px){.hero-grid{padding-top:52px; padding-bottom:60px}}

/* Hero визуал — „конзола за подаване" */
.console{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lift); overflow:hidden; font-size:.86rem;
}
.console-bar{display:flex; align-items:center; gap:8px; padding:11px 16px; background:var(--bg-soft); border-bottom:1px solid var(--border)}
.console-bar .dot{width:10px; height:10px; border-radius:50%; background:var(--border-strong)}
.console-bar b{font:600 .8rem/1 var(--font-display); color:var(--muted); margin-left:6px}
.console-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border)}
.console-row:last-child{border-bottom:0}
.console-row .f{font-family:ui-monospace,Consolas,monospace; font-size:.8rem; color:var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.console-row .co{font-weight:600; flex:1.2}
.pill{font:700 .68rem/1 var(--font-display); letter-spacing:.05em; text-transform:uppercase; padding:.4em .7em; border-radius:99px}

/* Интерактивна схема на потока — НАПИ Агент */
.agent-flow{display:flex; flex-direction:column; align-items:center; gap:0}
.af-node{
  width:100%; max-width:280px; background:var(--card); border:1.5px solid var(--border);
  border-radius:14px; padding:20px 18px 16px; text-align:center; position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.af-node:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--blue)}
.af-step{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%;
  background:var(--blue); color:#fff; font:800 .74rem/22px var(--font-display); text-align:center;
  box-shadow:0 0 0 3px var(--bg);
}
.af-ico{width:34px; height:34px; margin:4px auto 8px; border-radius:9px; display:grid; place-items:center; background:var(--bg-tint); color:var(--blue)}
.af-title{display:block; font:700 .95rem/1.3 var(--font-display); color:var(--text)}
.af-sub{display:block; font-size:.78rem; color:var(--muted); margin-top:2px}
.af-node.af-agent{border-color:var(--green-deep); border-width:2px}
.af-node.af-agent:hover{border-color:var(--green-deep)}
.af-node.af-agent .af-step{background:var(--green-deep)}
.af-node.af-agent .af-ico{background:color-mix(in srgb,var(--green-deep) 14%,transparent); color:var(--green-deep)}
.af-badge{
  display:inline-block; font:700 .64rem/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase;
  color:var(--green-deep); background:color-mix(in srgb,var(--green-deep) 10%,transparent);
  padding:.4em .75em; border-radius:99px; margin-bottom:10px;
}
.af-lock{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font:700 .76rem/1 var(--font-display); color:var(--green-deep)}
.af-lock-ring{position:relative; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center}
.af-lock-ring::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid currentColor; opacity:.5; animation:af-pulse 2.2s ease-out infinite}
@keyframes af-pulse{0%{transform:scale(.8); opacity:.6}70%{transform:scale(1.7); opacity:0}100%{opacity:0}}
.af-connector{display:flex; align-items:center; gap:12px; padding:10px 0}
.af-connector .af-line{position:relative; width:2px; height:32px; background:var(--border); flex:0 0 auto; border-radius:2px}
.af-connector .af-line::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--blue);
  animation:af-flow 2.6s ease-in-out infinite;
}
.af-connector.af-c2 .af-line::before{background:var(--green-deep); animation-delay:1.3s}
@keyframes af-flow{0%{top:0; opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 6px); opacity:0}}
.af-connector .af-clabel{font-size:.78rem; color:var(--muted); line-height:1.4; text-align:left}
.pill-ok{background:var(--bg-tint); color:var(--green-dark)}
.pill-run{background:#EAF6FC; color:#1A7FA8}
.pill-err{background:#FBEAE9; color:#B23B36}
.console-foot{display:flex; align-items:center; gap:14px; padding:13px 16px; background:var(--bg-soft)}
.pbar{flex:1; height:8px; border-radius:99px; background:var(--border); overflow:hidden}
.pbar i{display:block; height:100%; width:8%; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--green)); transition:width 2.2s cubic-bezier(.2,.7,.2,1)}
.pbar i.filled{width:86%}
.console-bar .live-dot{background:var(--green); position:relative}
.console-bar .live-dot::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--green); animation:livePulse 1.6s ease-out infinite}
@keyframes livePulse{from{opacity:.9; transform:scale(.6)}to{opacity:0; transform:scale(1.9)}}
.pill{transition:background .35s, color .35s}

.hero-flow-wrap{display:flex; justify-content:center; padding:8px 8px}
.hero-flow{width:100%; max-width:440px; height:auto}
@media (max-width:980px){.hero-flow-wrap{padding:0 4px 8px}.hero-flow{max-width:380px}}
.console-foot b{font:700 .8rem/1 var(--font-display); color:var(--green-deep); white-space:nowrap}
.hero-note{margin-top:14px; font-size:.8rem; color:var(--muted); display:flex; gap:.6em; align-items:flex-start}
.hero-note svg{flex:0 0 auto; margin-top:2px; color:var(--muted)}

/* Статистики под hero */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.stat{background:var(--card); padding:24px 22px}
.stat b{display:block; font:800 1.5rem/1.1 var(--font-display); color:var(--blue); margin-bottom:4px}
.stat span{font-size:.86rem; color:var(--muted); line-height:1.4; display:block}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}

/* ---------- Асистент „Напи" и обиколка на продукта ---------- */
.mascot{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:86px; height:86px; border:0; background:none; cursor:pointer; padding:0;
  filter:drop-shadow(0 10px 22px rgba(50,93,136,.35));
  transition:left .7s cubic-bezier(.3,.8,.3,1), top .7s cubic-bezier(.3,.8,.3,1), right .7s, bottom .7s, transform .3s;
}
.mascot:hover{transform:scale(1.07)}
.mascot .m-body{animation:mBob 3.2s ease-in-out infinite; transform-origin:50% 90%}
@keyframes mBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mascot .m-hint{
  position:absolute; right:96px; top:50%; transform:translateY(-50%); white-space:nowrap;
  font:600 .8rem/1 var(--font-display); color:var(--text);
  background:var(--card); border:1px solid var(--border); border-radius:99px;
  padding:.6em 1em; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s;
}
.mascot:hover .m-hint{opacity:1}
.mascot.touring{cursor:default}
.mascot.touring:hover{transform:none}
.mascot.talking .m-mouth{animation:mTalk .35s ease-in-out infinite alternate}
@keyframes mTalk{from{transform:scaleY(.4)}to{transform:scaleY(1.1)}}
.mascot .m-eye{animation:mBlink 4.6s infinite}
@keyframes mBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@media (max-width:980px){.mascot, .tour-bubble, #tour-start-hero{display:none!important}}

/* Балонче с текста и контролите */
.tour-bubble{
  position:fixed; z-index:151; max-width:360px; min-width:260px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lift); padding:18px 20px 14px; display:none;
  animation:pgIn .25s ease;
}
.tour-bubble.show{display:block}
.tour-bubble::after{
  content:""; position:absolute; width:16px; height:16px; background:var(--card);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  bottom:-9px; right:34px; transform:rotate(45deg);
}
.tour-bubble.tb-below::after{bottom:auto; top:-9px; transform:rotate(225deg)}
.tour-bubble .tb-step{font:700 .68rem/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); margin-bottom:6px}
.tour-bubble p{font-size:.94rem; margin:0 0 12px; line-height:1.55}
.tour-bubble .tb-ctrl{display:flex; gap:8px; align-items:center; border-top:1px dashed var(--border); padding-top:10px}
.tour-bubble .tb-ctrl .spacer{flex:1}
.tb-btn{
  font:600 .82rem/1 var(--font-display); border-radius:9px; cursor:pointer;
  padding:.55em 1em; border:1.5px solid var(--border-strong); background:none; color:var(--text);
}
.tb-btn:hover{border-color:var(--blue); color:var(--blue)}
.tb-btn.primary{background:var(--blue); border-color:var(--blue); color:#fff}
.tb-btn.primary:hover{background:var(--blue-hover)}
.tb-btn.x{border:0; font-size:1rem; padding:.4em .5em; color:var(--muted)}
.tb-btn.x:hover{color:var(--danger)}

/* Прожектор върху показвания елемент */
.tour-hl{
  position:relative; z-index:60; border-radius:var(--radius);
  outline:4px solid var(--green); outline-offset:6px;
  box-shadow:0 0 0 9999px color-mix(in srgb,var(--blue-deep) 26%,transparent), 0 0 42px rgba(147,197,75,.55);
  transition:outline-color .3s;
  scroll-margin:130px;
}
@media (max-width:700px){
  .mascot{width:66px; height:66px; right:16px; bottom:16px}
  .tour-bubble{max-width:calc(100vw - 32px)}
}

/* ---------- Интерактивен слой: голямо лого, роли, кодекс, глас ---------- */

/* Голямо лого в hero */
.hero-logo{
  width:132px; height:132px; border-radius:30px; box-shadow:var(--shadow-lift);
  margin-bottom:26px; animation:logoIn .7s cubic-bezier(.2,.8,.3,1.1); object-fit:contain; display:block;
}
@keyframes logoIn{from{opacity:0; transform:scale(.7) rotate(-6deg)}to{opacity:1; transform:none}}

/* Бутон „Прочети ми" (глас) */
.speak-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font:600 .85rem/1 var(--font-display); color:var(--blue);
  background:color-mix(in srgb,var(--blue) 8%,transparent);
  border:1.5px solid color-mix(in srgb,var(--blue) 25%,transparent);
  border-radius:99px; padding:.6em 1.1em; cursor:pointer; transition:background .15s;
}
.speak-btn:hover{background:color-mix(in srgb,var(--blue) 14%,transparent)}
.speak-btn.speaking{background:var(--blue); color:#fff; border-color:var(--blue)}
.speak-btn.speaking .eq{display:inline-flex}
.speak-btn .eq{display:none; gap:2px; align-items:flex-end; height:12px}
.speak-btn .eq i{width:3px; background:currentColor; border-radius:2px; animation:eq .8s ease-in-out infinite}
.speak-btn .eq i:nth-child(1){height:6px}
.speak-btn .eq i:nth-child(2){height:12px; animation-delay:.15s}
.speak-btn .eq i:nth-child(3){height:8px; animation-delay:.3s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.15)}}

/* Избор на роля — „character select" */
.roles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){.roles{grid-template-columns:1fr}}
.role{
  position:relative; text-align:left; cursor:pointer;
  background:var(--card); border:2px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 24px;
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .18s, border-color .18s, background .22s ease, opacity .22s ease;
  font:inherit; color:inherit;
}
.role:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--blue) 40%,var(--border))}
.role[aria-pressed="true"]{
  border-color:var(--green-deep); background:var(--bg-tint);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 30%,transparent), var(--shadow-lift);
  transform:translateY(-4px);
}
/* While the roles open one after another (js: .roles-auto), a bar fills along the bottom of the selected card. */
.roles-auto .role[aria-pressed="true"]::before{content:""; position:absolute; left:18px; right:18px; bottom:8px; height:3px; border-radius:3px; background:var(--green-deep); opacity:.5; transform-origin:left; animation:codexStep var(--role-step,4s) linear both}
#rp-story > *, #rp-solutions > *{animation:codexFade .35s ease}
.roles:has(.role[aria-pressed="true"]) .role:not([aria-pressed="true"]){
  opacity:.6; transform:scale(.97);
}
.roles:has(.role[aria-pressed="true"]) .role:not([aria-pressed="true"]):hover{
  opacity:1; transform:scale(.97) translateY(-4px);
}
.role[aria-pressed="true"]::after{
  content:"✓ Избрана роля"; position:absolute; top:-12px; right:14px;
  font:700 .68rem/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  background:var(--green-deep); color:#fff; padding:.5em .9em; border-radius:99px;
}
.role .r-ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--bg-tint); color:var(--green-deep); margin-bottom:16px;
}
.role h3{margin-bottom:4px}
.role .r-tag{font:600 .8rem/1.4 var(--font-display); color:var(--green-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px}
.role p{font-size:.92rem; color:var(--muted); margin:0}
.role .r-hint{display:block; margin-top:auto; padding-top:14px; font:600 .82rem/1 var(--font-display); color:var(--blue)}

/* Панел с разказа за избраната роля */
.role-panel{
  display:none; margin-top:26px;
  background:var(--card); border:1px solid var(--border); border-left:5px solid var(--green-deep);
  border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:32px 34px;
  animation:pgIn .3s ease;
}
.role-panel.show{display:block}
.role-panel .rp-head{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:14px}
.role-panel h3{margin:0; font-size:1.35rem}
.role-panel .rp-story{font-size:1.02rem; max-width:56em}
.role-panel .rp-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0}
@media (max-width:820px){.role-panel .rp-steps{grid-template-columns:1fr}}
.role-panel .rp-step{background:var(--bg-soft); border-radius:var(--radius-sm); padding:16px 18px; font-size:.92rem}
.role-panel .rp-step b{display:flex; gap:.5em; align-items:center; font-family:var(--font-display); margin-bottom:6px}
.role-panel .rp-step b i{
  font-style:normal; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:0 0 24px;
  background:var(--green-deep); color:#fff; font:800 .78rem/1 var(--font-display);
}
.role-panel .rp-cta{display:flex; flex-wrap:wrap; gap:12px}

.rp-highlight{
  display:inline-flex; align-items:center; gap:6px; font:700 .82rem/1 var(--font-display);
  color:var(--green-deep); background:var(--bg-tint); border-radius:999px; padding:6px 13px; margin-bottom:14px;
}

.rp-solutions{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:16px; margin:22px 0}
.rp-sol{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:18px 19px; display:flex; flex-direction:column; gap:9px; transition:box-shadow .15s, transform .15s;
}
.rp-sol:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.rp-sol-ico{width:36px; height:36px; border-radius:10px; background:var(--bg-tint); color:var(--green-deep); display:grid; place-items:center; flex:0 0 auto}
.rp-sol h4{margin:0; font:700 .98rem/1.3 var(--font-display); color:var(--text)}
.rp-sol p{margin:0; font-size:.85rem; line-height:1.5; color:var(--muted); flex:1}
.rp-sol a{font:600 .85rem/1 var(--font-display); color:var(--green-deep); text-decoration:none!important}
.rp-sol a:hover{text-decoration:underline!important}

/* Кодекс на декларациите — избери и ти разказва */
.codex{display:grid; grid-template-columns:340px 1fr; gap:26px; align-items:start}
@media (max-width:920px){.codex{grid-template-columns:1fr}}
.codex-list{display:grid; gap:8px}
.codex-item{
  display:flex; gap:12px; align-items:center; text-align:left; cursor:pointer;
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; font:inherit; color:inherit; transition:border-color .15s, background .15s;
}
.codex-item:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--border)); background:var(--bg-soft)}
.codex-item[aria-pressed="true"]{border-color:var(--green-deep); background:var(--bg-tint)}
.codex-item .c-ico{flex:0 0 34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--bg-tint); color:var(--green-deep)}
.codex-item[aria-pressed="true"] .c-ico{background:var(--green-deep); color:#fff}
/* While the selection moves by itself (js: .codex-auto on the list), a bar fills under the selected item. */
.codex-auto .codex-item{position:relative; overflow:hidden}
.codex-auto .codex-item[aria-pressed="true"]::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--green-deep); opacity:.55; transform-origin:left; animation:codexStep var(--codex-step,2.5s) linear both}
@keyframes codexStep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#codex-panel > *{animation:codexFade .35s ease}
@keyframes codexFade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.codex-item b{display:block; font:700 .9rem/1.25 var(--font-display)}
.codex-item small{color:var(--muted); font-size:.76rem}
.codex-panel{
  position:sticky; top:92px;
  min-height:380px;
}
.codex-panel .cp-law{margin-bottom:12px}
.codex-panel h3{font-size:1.3rem}
.codex-panel .cp-q{font:700 .78rem/1 var(--font-display); letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); margin:18px 0 6px}
.codex-panel p{font-size:.96rem; margin:0}
.codex-panel .cp-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; padding-top:18px; border-top:1px dashed var(--border)}
.codex-panel .cp-sub{margin-top:22px; padding-top:20px; border-top:1px dashed var(--border)}
.codex-panel .cp-sub:first-of-type{margin-top:16px}
.codex-panel .cp-sub h4{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:700 1.05rem/1.3 var(--font-display); color:var(--text); margin:0}

/* Маркетингова лента — основното търговско послание */
.offer-bar{
  background:linear-gradient(120deg,var(--green-deep),var(--blue-deep));
  color:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden;
}
.offer{
  display:flex; gap:14px; align-items:center; padding:24px 28px;
  border-right:1px solid rgba(255,255,255,.16);
}
.offer:last-child{border-right:0}
a.offer{text-decoration:none!important; color:#fff; transition:background .15s; -webkit-tap-highlight-color:transparent}
a.offer:hover{background:rgba(255,255,255,.08)}
a.offer:visited, a.offer:active, a.offer:focus{color:#fff}
.offer-ico{
  flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--green);
}
.offer b{display:block; font:700 1.04rem/1.3 var(--font-display); margin-bottom:3px; letter-spacing:.01em}
.offer span{font-size:.86rem; color:rgba(255,255,255,.8); line-height:1.4}
@media (max-width:900px){
  .offer-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer{border-right:0; border-bottom:1px solid rgba(255,255,255,.16)}
  .offer:last-child{border-bottom:0}
}
@media (max-width:560px){
  .offer-bar{grid-template-columns:minmax(0,1fr)}
  .offer{padding:20px 22px}
}
.offer-standalone{
  flex:0 1 220px; border-radius:var(--radius); box-shadow:var(--shadow-lift);
  background:linear-gradient(120deg,var(--green-deep),var(--blue-deep));
  padding:16px 20px; border-right:0;
}
a.offer-standalone:hover, a.offer-standalone:focus, a.offer-standalone:active{
  background:linear-gradient(120deg,var(--green-deep),var(--blue-deep));
  filter:brightness(1.1);
}
.offer-standalone .offer-ico{width:34px; height:34px; flex-basis:34px}
.offer-standalone b{font-size:.92rem}
.offer-standalone span span{font-size:.78rem}

/* Лента „Без ограничения" (НАПИ Desktop) */
.nolimits{
  display:grid; grid-template-columns:auto repeat(4,1fr); gap:14px 26px; align-items:center;
  background:var(--bg-tint); border:1px solid color-mix(in srgb,var(--green-deep) 25%,var(--border));
  border-radius:var(--radius); padding:20px 26px; margin-top:28px;
}
.nolimits .nl-title{font:800 1rem/1.2 var(--font-display); color:var(--green-dark); padding-right:14px; border-right:2px solid color-mix(in srgb,var(--green-deep) 30%,transparent)}
.nolimits .nl-item{display:flex; gap:.55em; align-items:center; font:600 .93rem/1.3 var(--font-display)}
.nolimits .nl-item svg{color:var(--green-deep); flex:0 0 18px}
.nolimits .nl-item small{display:block; font:400 .78rem/1.3 var(--font-body); color:var(--muted)}
@media (max-width:900px){
  .nolimits{grid-template-columns:1fr 1fr}
  .nolimits .nl-title{grid-column:1 / -1; border-right:0; border-bottom:2px solid color-mix(in srgb,var(--green-deep) 30%,transparent); padding:0 0 10px}
}
@media (max-width:520px){.nolimits{grid-template-columns:1fr}}

/* Карта "Цени и абонаменти" (начална страница) */
.price-split{display:grid; grid-template-columns:1.55fr .85fr; gap:32px; align-items:start; margin:0 auto}
@media (max-width:860px){.price-split{grid-template-columns:1fr}}
.price-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:6px 30px 30px;
}
.price-row{display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border)}
.price-row:last-of-type{border-bottom:0}
.price-ico{
  flex:0 0 42px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--green-deep) 14%,transparent); color:var(--green-deep);
}
.price-row b{display:block; font:700 1rem/1.3 var(--font-display); color:var(--text); margin-bottom:3px}
.price-row span{font-size:.9rem; color:var(--muted); line-height:1.5}
.price-row span.one-line{white-space:normal}
@media (min-width:900px){.price-row span.one-line{white-space:nowrap}}
.price-includes{margin-top:4px; padding-top:24px; border-top:1px dashed var(--border)}
.price-includes h3{font:700 1.02rem/1.3 var(--font-display); color:var(--text); margin-bottom:14px}
.price-includes .checks{grid-template-columns:1fr 1fr; gap:10px 28px}
.price-includes .checks li{font-size:.9rem}
@media (max-width:560px){.price-includes .checks{grid-template-columns:1fr}}
.price-side{
  background:linear-gradient(150deg,var(--green-deep),var(--blue-deep));
  color:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift);
  padding:34px 30px; text-align:center; position:sticky; top:100px;
}
.price-side .price-side-ico{
  width:52px; height:52px; border-radius:50%; margin:0 auto 16px;
  display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff;
}
.price-side h3{color:#fff; font-size:1.2rem; margin-bottom:10px}
.price-side p{color:rgba(255,255,255,.82); font-size:.9rem; line-height:1.5; margin-bottom:24px}
.price-side .btn{width:100%; justify-content:center}
.price-side .btn-green{background:#fff; color:var(--green-deep)}
.price-side .btn-green:hover{background:rgba(255,255,255,.9)}
.price-side small{display:block; margin-top:14px; color:rgba(255,255,255,.65); font-size:.8rem}
.price-side-standalone{max-width:540px; margin:28px auto 0; position:static}
@media (max-width:640px){.price-card{padding:4px 22px 26px}.price-row{gap:14px}.price-side{position:static}}

/* ---------- 6. Карти „решения" ---------- */
.cards-main{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:26px}
.cards-online{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media (max-width:980px){.cards-main{grid-template-columns:1fr}.cards-online{grid-template-columns:1fr}}
.pcard{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px 28px; display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s, border-color .2s; position:relative;
}
.pcard:hover{box-shadow:var(--shadow-lift); transform:translateY(-3px)}
.pcard.hl{border-color:color-mix(in srgb,var(--blue) 45%,var(--border))}
.pcard-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.pcard-ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--bg-tint); color:var(--green-deep)}
.pcard.hl .pcard-ico{background:color-mix(in srgb,var(--blue) 10%,transparent); color:var(--blue)}
.pcard h3{margin-bottom:2px}
.pcard .for{font:600 .8rem/1.3 var(--font-display); color:var(--green-deep); letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px}

/* FAQ accordion */
.faq-list{display:flex; flex-direction:column; gap:12px}
.faq-item{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease;
}
.faq-item[open]{border-color:color-mix(in srgb,var(--green-deep) 35%,var(--border)); box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; font:700 .98rem/1.4 var(--font-display); color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-plus{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-tint); color:var(--green-deep); font-size:1.1rem; line-height:1; transition:transform .2s ease;
}
.faq-item[open] summary .faq-plus{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 20px; color:var(--muted); font-size:.94rem; line-height:1.65}
.faq-item .faq-a p{margin:0 0 10px}
.faq-item .faq-a p:last-child{margin-bottom:0}

/* Подменюта (панели) на страница Инструкции — превключвани от dropdown в хедъра */
.instr-panel{display:none}
.instr-panel.active{display:block}

/* Общност: Facebook група и YouTube канал (страница Контакти) */
.community-card > p{margin:0 0 18px}
.community-link{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-top:12px;
  border:1px solid var(--border); border-radius:14px; background:var(--card); color:var(--text);
  text-decoration:none!important; transition:border-color .15s, background .15s, transform .15s;
}
.community-link:hover{border-color:var(--green-btn); background:var(--bg-soft); transform:translateY(-1px)}
.community-ico{flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff}
.community-ico.fb{background:#1877F2}
.community-ico.yt{background:#FF0000}
.community-text{display:flex; flex-direction:column; gap:3px; flex:1}
.community-text b{font:600 .98rem/1.3 var(--font-display)}
.community-text span{font-size:.85rem; color:var(--muted); line-height:1.45}
.community-arr{font-size:1.25rem; color:var(--green-deep); transition:transform .15s}
.community-link:hover .community-arr{transform:translateX(4px)}

/* Карта с данни за контакт */
.contact-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lift); padding:36px 32px 32px; position:relative; overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--green-deep),var(--blue));
}
.contact-card .cc-name{font-size:1.15rem; line-height:1.4; margin:2px 0 6px}
.contact-card .cc-eik{
  font-size:.82rem; color:var(--muted); margin:0 0 22px; padding-bottom:20px;
  border-bottom:1px dashed var(--border);
}
.cc-rows{display:flex; flex-direction:column; gap:18px}
.cc-row{display:flex; gap:14px; align-items:flex-start}
.cc-ico{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--green-deep) 14%,transparent); color:var(--green-deep);
}
.cc-row b{display:block; font:700 .68rem/1.3 var(--font-display); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:3px}
.cc-row a, .cc-row span.val{font:600 .95rem/1.4 var(--font-display); color:var(--text); text-decoration:none}
.cc-row a:hover{color:var(--blue)}
.cc-social{display:flex; justify-content:center; gap:10px; margin-top:22px; padding-top:20px; border-top:1px dashed var(--border)}
.cc-social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.cc-social a:hover{background:var(--blue); color:#fff; transform:translateY(-2px)}

/* CTA бутони на страница НАПИ Агент — download group + docs link */
.agent-cta{display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; margin:24px 0 6px}
.dl-group{
  display:flex; border:1.5px solid var(--border-strong); border-radius:16px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.dl-btn{
  display:flex; align-items:center; gap:13px; padding:15px 24px;
  color:var(--text); text-decoration:none!important;
  transition:background .15s ease;
}
.dl-btn + .dl-btn{border-left:1px solid var(--border)}
.dl-btn:hover{background:var(--bg-soft)}
.dl-ico{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--blue) 10%,transparent); color:var(--blue);
}
.dl-text{display:flex; flex-direction:column; line-height:1.3}
.dl-text b{font:700 .92rem/1.3 var(--font-display); color:var(--text)}
.dl-text span{font-size:.72rem; color:var(--muted)}
.docs-link{
  display:inline-flex; align-items:center; gap:9px; padding:15px 24px; border-radius:16px;
  border:1.5px dashed var(--border-strong); color:var(--text); text-decoration:none!important;
  font:700 .92rem/1 var(--font-display); background:transparent;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.docs-link:hover{border-color:var(--green-deep); border-style:solid; color:var(--green-deep); background:var(--bg-tint)}
.docs-link .arr{transition:transform .15s ease}
.docs-link:hover .arr{transform:translateX(3px)}
@media (max-width:640px){.dl-group{flex-direction:column; width:100%}.dl-btn + .dl-btn{border-left:0; border-top:1px solid var(--border)}.docs-link{width:100%; justify-content:center}}
.pcard p.desc{color:var(--muted); font-size:.95rem}
.checks{list-style:none; padding:0; margin:8px 0 20px; display:grid; gap:9px}
.checks li{display:flex; gap:.6em; align-items:flex-start; font-size:.93rem}
.checks svg{flex:0 0 18px; margin-top:3px; color:var(--green-deep)}
.pcard-foot{margin-top:auto; padding-top:14px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:12px}
.pcard-foot .price-note{font-size:.83rem; color:var(--muted)}
.pcard-actions{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- 7. Таблици ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow)}

/* Декларации, групирани по периодичност — минималистични карти (shopycopy.eu стил) */
.decl-groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px}
.decl-group{position:relative; padding-top:16px}
.decl-group::before{
  content:""; position:absolute; top:0; left:0; width:34px; height:4px; border-radius:2px;
  background:var(--accent,var(--blue));
}
.decl-group:nth-child(1){--accent:var(--blue)}
.decl-group:nth-child(2){--accent:var(--green-deep)}
.decl-group:nth-child(3){--accent:color-mix(in srgb,var(--warning) 85%,#000)}
.decl-group:nth-child(4){--accent:color-mix(in srgb,var(--info) 75%,#000)}
.decl-group-label{
  display:block; font:800 .82rem/1.3 var(--font-display); color:var(--accent,var(--text));
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;
}
.decl-group-items{display:flex; flex-direction:column; gap:10px}
.decl-chip{font-size:1.02rem; line-height:1.5; color:var(--accent,var(--blue)); display:flex; align-items:flex-start; gap:10px}
.decl-chip::before{
  content:""; flex:0 0 7px; width:7px; height:7px; border-radius:50%; margin-top:9px;
  background:var(--accent,var(--blue));
}
.decl-chip b{font:600 1.02rem/1.4 var(--font-body); color:var(--accent,var(--blue))}
.decl-chip a{color:var(--blue); text-decoration:underline; font-size:.92rem}
table.tbl{width:100%; border-collapse:collapse; font-size:.94rem; min-width:560px}
.tbl th{
  text-align:left; font:700 .78rem/1.3 var(--font-display); letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--blue); padding:13px 18px;
}
.tbl td{padding:13px 18px; border-top:1px solid var(--border); vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--bg-soft)}
.tbl td b{font-family:var(--font-display)}
.tbl code{font:500 .84rem ui-monospace,Consolas,monospace; background:var(--bg-soft); border:1px solid var(--border); padding:.15em .45em; border-radius:5px}

/* ---------- 8. Медия placeholder-и (снимки / GIF / видео) ---------- */
.ph{
  position:relative; border:1.5px dashed var(--border-strong); border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,var(--bg-soft) 0 14px,color-mix(in srgb,var(--bg-soft) 60%,var(--bg)) 14px 28px);
  display:grid; place-items:center; text-align:center; padding:28px; min-height:230px; color:var(--muted);
}
.ph .ph-in{display:grid; gap:10px; justify-items:center; max-width:34em}
.ph .ph-tag{font:700 .7rem/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:color-mix(in srgb,var(--blue) 9%,transparent); padding:.5em .9em; border-radius:99px}
.ph b{font-family:var(--font-display); color:var(--text)}
.ph small{font-size:.8rem}
.ph.video{min-height:340px}

.app-shot{
  border-radius:10px; overflow:hidden; border:1px solid var(--border);
  box-shadow:0 12px 28px -14px rgba(20,30,45,.28);
}
.app-shot img{display:block; width:100%; height:auto}
a.app-shot{cursor:zoom-in}
.av-card ol{padding-left:20px; margin:0 0 12px; color:var(--muted); font-size:.93rem}
.av-card li{margin-bottom:6px}
.av-card .small{font-size:.85rem; margin:0 0 12px}
.av-card code{overflow-wrap:anywhere}
.av-card .app-shot{display:block; margin:4px 0 8px}
.av-footer{margin-top:24px}
.video-embed{
  position:relative; display:block; width:100%; max-width:500px;
  aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 38px -16px rgba(20,30,45,.38);
  background:#0B0F14 center/cover no-repeat;
  transition:transform .25s ease, box-shadow .25s ease;
}
.video-embed:hover{transform:translateY(-3px); box-shadow:0 24px 46px -14px rgba(20,30,45,.46)}
.video-embed::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,14,18,0) 45%, rgba(10,14,18,.72) 100%);
}
.video-embed .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:54px; border-radius:16px; z-index:2;
  background:#FF0000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:transform .2s ease, background .2s ease;
}
.video-embed .play-btn svg{margin-left:3px}
.video-embed:hover .play-btn{transform:translate(-50%,-50%) scale(1.08); background:#CC0000}
.video-embed-cap{
  position:absolute; left:16px; bottom:14px; z-index:2;
  display:flex; align-items:center; gap:6px;
  font-size:.88rem; font-weight:600; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.video-embed-cap svg{flex:0 0 auto}
.video-embed-wrap{display:flex; padding:8px; background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow)}
.video-embed-wrap .video-embed{max-width:none; border-radius:15px}
@media (min-width:981px){
  .hero-grid.with-media{align-items:stretch}
  .video-embed-wrap{align-items:stretch}
  .video-embed{aspect-ratio:auto; min-height:280px}
}
@media (max-width:980px){.video-embed-wrap{max-width:520px; width:100%; margin:0 auto}}
.ph-dark{
  border:1.5px solid #2A2F36; background:#33383F; color:#C7CDD4;
}
.ph-dark .ph-in svg{color:#C7CDD4}
.ph-dark .ph-tag{color:#fff; background:rgba(255,255,255,.14)}
.ph-dark b{color:#fff}
.ph-dark small{color:#C7CDD4}
.ph .play{
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:#fff; box-shadow:var(--shadow-lift);
}
.ph.video:hover .play{background:var(--blue-hover)}

.fb-community{
  padding:32px 0;
  background:linear-gradient(120deg, color-mix(in srgb,var(--blue) 6%,#fff) 0%, color-mix(in srgb,var(--green) 8%,#fff) 100%);
}
.fb-comm-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center}
.fb-comm-text h3{font:800 1.22rem/1.25 var(--font-display); color:var(--text); margin-bottom:8px}
.fb-comm-sub{
  display:flex; align-items:center; gap:7px; font:600 .85rem/1.3 var(--font-display);
  color:var(--blue); margin-bottom:10px;
}
.fb-comm-sub svg{flex:0 0 auto}
.fb-comm-desc{font-size:.85rem; line-height:1.55; color:var(--muted); max-width:34em; margin-bottom:16px}
.fb-comm-cta.btn{border-color:var(--blue); color:var(--blue)}
.fb-comm-cta.btn:hover{background:var(--blue); color:#fff}

.fb-comm-visual{max-width:170px}
.fb-comm-preview{
  display:block; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 16px -10px rgba(20,30,45,.22);
}
.fb-comm-preview img{display:block; width:100%; height:auto}
@media (max-width:860px){
  .fb-comm-grid{grid-template-columns:1fr; gap:20px}
  .fb-comm-visual{max-width:150px; margin:0 auto}
}

.adv-list{display:flex; flex-direction:column; gap:12px; margin-top:22px}
.adv-item{
  display:flex; align-items:flex-start; gap:14px;
  background:#EDEDED; border:1px solid var(--border); border-radius:12px;
  padding:13px 16px; transition:box-shadow .15s, transform .15s;
  opacity:0; transform:translateY(18px);
}
.adv-item.in-view{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s ease, box-shadow .15s, transform .15s;
}
.adv-item:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.adv-item.in-view:hover{transform:translateY(-2px)}
.adv-ico{
  flex:0 0 38px; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; background:var(--bg-tint); color:var(--green-deep);
}
.adv-item span.adv-txt{font-size:.92rem; line-height:1.45; color:var(--text)}

/* Секция "Ключови предимства" — spotlight, винаги тъмна (независимо от темата) */
.section-spotlight{
  background:#454B54;
  color:#fff; padding-top:64px; padding-bottom:64px;
}
.section-spotlight .eyebrow{color:var(--green)}
.section-spotlight .eyebrow::before{background:var(--green)}
.section-spotlight h2{color:#fff; font-weight:600; letter-spacing:-.01em}
.section-spotlight .adv-item{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-left:3px solid var(--green);
}
.section-spotlight .adv-item span.adv-txt{color:#EDF1F5}
.section-spotlight p.muted{color:#B9C9DA}

.stat-bars{display:flex; flex-direction:column; gap:28px; width:100%}
.stat-bar-item{display:flex; flex-direction:column; gap:10px}
.stat-bar-head{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap}
.stat-bar-value{font:800 2.1rem/1 "Space Grotesk", var(--font-display); color:#fff; letter-spacing:-.01em; white-space:nowrap}
.stat-bar-desc{font-size:.94rem; color:#D7DEE6; text-align:right}
.stat-bar-track{position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.14); overflow:hidden}
.stat-bar-fill{
  position:absolute; inset:0 auto 0 0; width:0%; border-radius:6px; background:var(--green);
  transition:width 1.3s cubic-bezier(.22,.9,.35,1);
}
@media (max-width:640px){.stat-bar-value{font-size:1.7rem}.stat-bar-desc{font-size:.88rem}}

/* ---------- Секция "Как работи НАПИ" — product workflow (Вход → НАПИ → Резултат) ---------- */
.hiw{background:#F8FAFC; padding:88px 0}
.hiw .section-head{margin-bottom:60px}
.hiw .section-head p{max-width:520px; margin-left:auto; margin-right:auto}

.wf-flow{display:flex; align-items:center; gap:0; max-width:1020px; margin:0 auto}

.hiw-layout{display:block}
.hiw-flow-col{min-width:0}

/* --- Възли: вход / изход (леки, второстепенни) --- */
.wf-node{min-width:0}
.wf-node-label{display:block; font:800 .84rem/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--text); margin-bottom:14px}

.wf-input{flex:0 0 165px}
.wf-input-ico{display:block; width:26px; height:26px; color:var(--muted); margin-bottom:14px}
.wf-input-tags{display:flex; flex-direction:column; gap:7px}
.wf-input-tags span{
  font-size:.78rem; color:var(--text); background:#fff; border:1px solid var(--border);
  border-radius:7px; padding:5px 10px; width:fit-content;
}

/* --- НАП: получаващата институция --- */
.wf-nap{flex:0 0 150px; text-align:center}
.wf-nap .wf-node-label{text-align:center}
.wf-nap-ico{display:block; width:24px; height:24px; color:var(--muted); margin:0 auto 12px}
.wf-nap-name{display:block; font:700 .92rem/1 var(--font-display); color:var(--text)}
.wf-nap-sub{display:block; font-size:.66rem; line-height:1.4; color:var(--muted); margin-top:5px}
.wf-nap-status{
  display:flex; align-items:center; justify-content:center; gap:5px; margin-top:12px;
  font-size:.72rem; font-weight:700; color:var(--green-deep); opacity:0; transition:opacity .4s ease;
}
.wf-nap-status.in{opacity:1}

.wf-output{flex:0 0 190px}
.wf-output-panel{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 17px;
  opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease;
}
.wf-output-panel.in{opacity:1; transform:none}
.wf-output-ok{display:flex; align-items:center; gap:6px; color:var(--green-deep); font:700 .84rem/1 var(--font-display); margin-bottom:13px}
.wf-output-row{display:flex; justify-content:space-between; gap:10px; font-size:.78rem; padding:6px 0; border-top:1px solid var(--border)}
.wf-output-row:first-of-type{border-top:0; padding-top:0}
.wf-output-row span{color:var(--muted)}
.wf-output-row b{color:var(--text); font-family:var(--font-display); font-weight:700; text-align:right}
.wf-ok-text{color:var(--green-deep)}

/* --- Линии между възлите --- */
.wf-line{position:relative; flex:1 1 auto; height:2px; background:var(--border); margin:0 6px; align-self:center}
.wf-line-fill{position:absolute; inset:0; width:0; background:var(--green); transition:width .45s cubic-bezier(.3,.7,.2,1)}
.wf-line-fill.filled{width:100%}
.wf-flow.wf-reset, .wf-flow.wf-reset *{transition:none!important}
.wf-line-dot{
  position:absolute; top:50%; left:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 22%,transparent);
  transition:left 1.1s cubic-bezier(.3,.7,.2,1); opacity:0;
}
.wf-line-dot.filled{left:100%; opacity:1; transition:left .45s cubic-bezier(.3,.7,.2,1), opacity .2s}

.wf-line-pulse{
  position:absolute; top:50%; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:var(--green); opacity:0;
}
.wf-line.looping .wf-line-pulse{animation:wfPulseTravelX 2.6s ease-in-out infinite}
#wf-line-2.looping .wf-line-pulse{animation-delay:.87s}
#wf-line-3.looping .wf-line-pulse{animation-delay:1.74s}
@keyframes wfPulseTravelX{0%{left:0; opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%; opacity:0}}

/* --- НАПИ блок: центърът на потока, визуално доминиращ --- */
.wf-napi{
  flex:0 0 260px; position:relative; background:var(--blue-deep); color:#fff; border-radius:18px;
  padding:24px 24px 22px; box-shadow:0 10px 34px -14px rgba(11,29,53,.45);
  transition:box-shadow .3s ease, transform .3s ease;
}
.wf-napi:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 40%,transparent), 0 16px 42px -14px rgba(11,29,53,.55), 0 0 30px -4px color-mix(in srgb,var(--green) 45%,transparent); transform:translateY(-2px)}
.wf-napi-pulse{
  position:absolute; inset:-1px; border-radius:19px; border:1px solid color-mix(in srgb,var(--green) 45%,transparent);
  opacity:0; animation:wfGlow 3.2s ease-in-out infinite;
}
@keyframes wfGlow{0%,100%{opacity:0}50%{opacity:.55}}
.wf-napi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.wf-napi-badge{font:800 .9rem/1 var(--font-display); letter-spacing:.02em}
.wf-napi-live{display:flex; align-items:center; gap:6px; font-size:.72rem; color:#B9C9DA}
.wf-live-dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex:0 0 auto; animation:wfBlink 1.4s ease-in-out infinite}
@keyframes wfBlink{0%,100%{opacity:1}50%{opacity:.35}}

.wf-napi-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.wf-napi-checks li{
  display:flex; align-items:center; gap:9px; font-size:.83rem; color:#DCE6F0;
  opacity:0; transform:translateX(-6px); transition:opacity .4s ease, transform .4s ease;
}
.wf-napi-checks li.in{opacity:1; transform:none}
.wf-check-ico{
  flex:0 0 17px; width:17px; height:17px; border-radius:50%; background:var(--green); color:#0E2A1D;
  display:grid; place-items:center;
}

/* --- Мобилно: вертикален поток --- */
@media (max-width:760px){
  .wf-flow{flex-direction:column; gap:0; max-width:320px}
  .wf-input, .wf-nap, .wf-output{flex:none; width:100%}
  .wf-napi{flex:none; width:100%}
  .wf-line{width:2px; height:38px; margin:6px 0; align-self:center}
  .wf-line-fill{width:100%; height:0; transition:height .45s cubic-bezier(.3,.7,.2,1)}
  .wf-line-fill.filled{height:100%; width:100%}
  .wf-line-dot{top:0; left:50%; margin:-4px 0 0 -4px; transition:top .45s cubic-bezier(.3,.7,.2,1), opacity .2s}
  .wf-line-dot.filled{top:100%; left:50%}
  .wf-line.looping .wf-line-pulse{animation-name:wfPulseTravelY; top:0; left:50%; margin:-3px 0 0 -3px}
  @keyframes wfPulseTravelY{0%{top:0; opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%; opacity:0}}
}
@media (max-width:560px){
  .hiw{padding:56px 0}
}



/* ---------- 9. Промо, отзиви, timeline, стъпки ---------- */

.promo{
  background:linear-gradient(120deg,var(--green-deep),var(--blue-deep));
  color:#fff; border-radius:var(--radius); padding:30px 40px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center; box-shadow:var(--shadow-lift);
}
.promo h2,.promo h3{color:#fff; font-size:1.55rem}
.promo p{color:rgba(255,255,255,.85)}
.promo .checks svg{color:var(--green)}
.promo .checks li{color:rgba(255,255,255,.92)}
.promo-actions{display:grid; gap:12px; justify-items:stretch}
.promo-actions .btn{width:100%}
.promo-actions .btn-outline{border-color:rgba(255,255,255,.5); color:#fff}
.promo-actions .btn-outline:hover{border-color:#fff; color:#fff}
.promo small{color:rgba(255,255,255,.65)}
.promo .hl{color:var(--green)}
.promo-features{display:flex; flex-wrap:wrap; gap:20px 28px; margin-top:16px}
.promo-features .pf{display:flex; align-items:center; gap:9px; max-width:none}
.promo-features .pf svg{flex:0 0 auto; color:var(--green)}
.promo-features .pf span{font-size:.86rem; line-height:1.3; color:rgba(255,255,255,.92); white-space:nowrap}
.promo-right{border-left:1px solid rgba(255,255,255,.25); padding-left:36px; display:grid; gap:16px; justify-items:center; text-align:center}
.promo-right .btn{width:100%; white-space:nowrap}
.promo-right .note{display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.85); font-size:.85rem}
.promo-right .note svg{color:var(--green); flex:0 0 auto}
@media (max-width:820px){.promo{grid-template-columns:1fr; padding:34px 26px}.promo-right{border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.25); padding-top:24px}}

.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:980px){.quotes{grid-template-columns:1fr}}
.quote{
  position:relative; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:34px 28px 26px; border-top:3px solid var(--green);
}
.quote::before{
  content:"\201C"; position:absolute; top:8px; left:24px;
  font:800 3.2rem/1 Georgia,serif; color:var(--green); opacity:.5;
}
.quote p{font:italic 400 1.02rem/1.6 var(--font-body); color:var(--text); margin-top:6px}
.quote footer{
  display:block; margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
  font:700 .8rem/1.3 var(--font-display); letter-spacing:.03em; color:var(--muted); text-transform:uppercase;
}

/* Секция "Какво споделят нашите клиенти" — карти, синхронни с останалата част от сайта */
.testi-section{
  background:linear-gradient(100deg,#FFFAF6 0%,#FFEDD6 100%); padding:64px 0;
}
.testi-head{max-width:640px; margin:0 auto 44px; text-align:center}
.testi-head h2{font:800 2rem/1.25 var(--font-display); color:#1E293B; letter-spacing:-.01em}
.testi-list{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:860px){.testi-list{grid-template-columns:1fr}}
.testi-item{
  display:flex; flex-direction:column; gap:16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px 26px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.testi-item:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--green-deep) 30%,var(--border))}
.testi-mark{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:color-mix(in srgb,var(--green-deep) 14%,transparent); color:var(--green-deep);
  font:800 1.7rem/1 Georgia,serif;
}
.testi-item p{font-style:italic; color:var(--text); font-size:.95rem; line-height:1.6; margin:0; flex:1}
.testi-foot{display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px dashed var(--border)}
.testi-avatar{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,var(--blue),var(--green-deep)); color:#fff;
  font:700 .78rem/1 var(--font-display); letter-spacing:.01em;
}
.testi-item footer{font:700 .82rem/1 var(--font-display); color:var(--muted); letter-spacing:.02em}
.testi-more{text-align:center; margin-top:36px; font-size:.88rem; color:var(--muted)}
.testi-more b{color:var(--text); font-weight:700}

.timeline{position:relative; padding-left:34px; display:grid; gap:26px}
.timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--border-strong)}
.tl-item{position:relative}
.tl-item::before{content:""; position:absolute; left:-31px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--green); border:3px solid var(--bg-page)}
.tl-item.dev::before{background:var(--warning)}
.tl-date{font:700 .78rem/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:5px}
.tl-item h3{font-size:1.05rem; margin-bottom:6px}
.tl-item ul{margin:6px 0 0; color:var(--muted); font-size:.93rem}

.steps{display:grid; gap:0}
.step{display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px; padding:26px 0; border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:0}
.steps-compact .step{padding:14px 0; grid-template-columns:38px 1fr; gap:14px}
.steps-compact .step-n{width:32px; height:32px; font-size:.9rem; border-radius:9px}
.steps-compact .step h3{font-size:.94rem; margin-bottom:2px}
.steps-compact .step p{font-size:.82rem; line-height:1.4}
.step-n{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  font:800 1.1rem/1 var(--font-display); color:var(--blue);
  background:color-mix(in srgb,var(--blue) 9%,transparent); border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);
}
.step h3{margin-bottom:6px}
.step p,.step ul{color:var(--muted); font-size:.96rem}
@media (max-width:600px){.step{grid-template-columns:minmax(0,1fr); gap:10px}}

/* ---------- 10. Info кутии, продуктов layout, ценови карти ---------- */
.note{
  display:flex; gap:14px; border-radius:var(--radius-sm); padding:16px 18px; font-size:.93rem;
  border:1px solid; align-items:flex-start;
}
.note svg{flex:0 0 20px; margin-top:2px}
.note-info{background:color-mix(in srgb,var(--info) 8%,var(--card)); border-color:color-mix(in srgb,var(--info) 30%,transparent); color:var(--text)}
.note-warn{background:color-mix(in srgb,var(--warning) 9%,var(--card)); border-color:color-mix(in srgb,var(--warning) 32%,transparent)}
.note-info svg{color:#1A7FA8}
.note-warn svg{color:#C2571F}
.note-brand{
  background:var(--card); border-color:color-mix(in srgb,var(--green-deep) 35%,transparent);
  box-shadow:var(--shadow-lift);
}
.note-brand svg{color:var(--green-deep)}

.page-hero{padding:58px 0 46px; border-bottom:1px solid var(--border); background:var(--bg-tint-2)}
.page-hero.blue{background:var(--bg-soft)}
.page-hero .lead{font-size:1.1rem; color:var(--muted); max-width:44em}
.page-hero .page-subhead{font:700 1.28rem/1.4 var(--font-display); color:var(--text); max-width:38em; margin-bottom:8px}
.page-hero .hero-cta{margin:22px 0 0}
.lead-cta-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.lead-cta-row .lead{margin-bottom:0; flex:1 1 380px}
.hero-cta-inline{margin:0!important; flex:0 0 auto; flex-wrap:wrap}
@media (max-width:760px){
  .lead-cta-row{flex-direction:column; align-items:flex-start}
  .hero-cta-inline{width:100%}
}
.crumbs{font-size:.82rem; color:var(--muted); margin-bottom:18px}

/* ---------- "Какво е НАПИ Desktop?" — изчистен вариант ---------- */
.hero-microline{margin:0; font:600 .82rem/1 var(--font-display); color:var(--green-deep)}
.feature-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; max-width:820px}
.feature-tile{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.feature-tile .ft-ico{
  flex:0 0 34px; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--green-deep) 14%,transparent); color:var(--green-deep);
}
.feature-tile span:last-child{font:600 .88rem/1.35 var(--font-display); color:var(--text)}


.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}

.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:start}
.split.rev{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:900px){.split,.split.rev{grid-template-columns:minmax(0,1fr); gap:28px}}

.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:980px){.plans{grid-template-columns:1fr}}
.plan{
  background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px 28px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--blue),var(--green-deep)); opacity:.5;
  transition:opacity .2s ease;
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.plan:hover::before{opacity:1}
.plan-ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--bg-tint); color:var(--blue);
}
.plan .plan-k{
  display:inline-block; font:700 .7rem/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--bg-tint); padding:.45em .85em; border-radius:99px; margin-bottom:14px;
}
.plan .plan-t{font:800 1.6rem/1.15 var(--font-display); margin-bottom:2px}
.plan .plan-s{color:var(--muted); font-size:.9rem; margin-bottom:16px}
.plan .checks{margin-bottom:22px}
.plan .btn{margin-top:auto}
.plan .save{
  position:absolute; top:-13px; right:20px; font:700 .72rem/1 var(--font-display); letter-spacing:.06em;
  text-transform:uppercase; background:var(--green-deep); color:#fff; padding:.55em 1em; border-radius:99px;
}
.plan.hl{border-color:var(--green-deep); border-width:2px; box-shadow:var(--shadow-lift)}
.plan.hl::before{opacity:1; height:5px}
.plan.hl .plan-ico{background:color-mix(in srgb,var(--green-deep) 14%,transparent); color:var(--green-deep)}
.plan.hl .plan-k{background:var(--green-deep); color:#fff}
.plan-ribbon{
  position:absolute; top:16px; right:-32px; width:140px; text-align:center;
  background:var(--green-deep); color:#fff; transform:rotate(40deg);
  font:700 .68rem/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase; padding:.5em 0;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}

/* Цветен интерактивен вариант на .plan (напр. "Изберете начина на подаване" на ВФР) */
.plan-vivid{
  --accent:var(--blue);
  background:linear-gradient(165deg, color-mix(in srgb,var(--accent) 13%,var(--card)) 0%, var(--card) 60%);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
}
.plan-vivid .plan-ico{
  width:48px; height:48px; margin-bottom:18px;
  background:var(--accent); color:#fff;
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.plan-vivid::before{
  height:6px; opacity:1;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,#fff));
}
.plan-vivid:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 46px -18px color-mix(in srgb,var(--accent) 55%,transparent), var(--shadow-lift);
  border-color:var(--accent);
}
.plan-vivid:hover .plan-ico{transform:scale(1.14) rotate(-6deg)}
.plan-vivid.hl{border-width:2px; border-color:var(--accent); box-shadow:0 18px 38px -18px color-mix(in srgb,var(--accent) 50%,transparent)}
.plan-vivid.hl .plan-ico{background:var(--accent); color:#fff}
.plan-vivid.hl .plan-k{background:var(--accent)}
.plan-vivid .btn-primary{background:var(--accent); border-color:var(--accent)}
.plan-vivid .btn-primary:hover{background:color-mix(in srgb,var(--accent) 82%,#000)}
.plan-vivid .btn-outline{border-color:var(--accent); color:var(--accent); transition:background .2s ease, color .2s ease}
.plan-vivid .btn-outline:hover{background:var(--accent); color:#fff}

.related{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){.related{grid-template-columns:1fr}}
.rel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 22px; text-decoration:none!important; color:var(--text); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
.rel:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.rel b{font-family:var(--font-display); display:block; margin-bottom:4px; color:var(--blue)}
.rel span{font-size:.86rem; color:var(--muted)}

/* Персона-карти (напр. "За кого е?" на страница Агент) */
.persona-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px}
.persona-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.persona-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green-deep),var(--blue));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.persona-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--blue) 30%,var(--border))}
.persona-card:hover::before{transform:scaleX(1)}
.persona-ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background:color-mix(in srgb,var(--green-deep) 12%,transparent); color:var(--green-deep);
}
.persona-card b{display:block; font:700 .96rem/1.3 var(--font-display); color:var(--text); margin-bottom:5px}
.persona-card span{font-size:.87rem; color:var(--muted); line-height:1.55}

/* Минималистичен вариант — само заграждение, без карта/сянка/икона */
.persona-outline{
  border:2px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:16px 18px; background:var(--card);
}
.persona-outline b{display:block; font:700 .92rem/1.3 var(--font-display); color:var(--text); margin-bottom:4px}
.persona-outline span{font-size:.85rem; color:var(--muted); line-height:1.5}

/* Други възможности за работа с НАПИ — карти с детайли */
.alt-ways{display:grid; grid-template-columns:1fr; gap:8px; max-width:640px}
.alt-way-row{
  display:grid; grid-template-columns:48px 1fr; gap:20px; padding:26px 0;
  border-top:1px solid var(--border);
}
.alt-ways .alt-way-row:first-child{border-top:0}
.alt-way-ico{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--blue) 9%,transparent); color:var(--blue);
  border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);
}
.alt-way-row h3{margin:0 0 4px; font:800 1.05rem/1.3 var(--font-display); color:var(--text)}
.alt-way-row .aw-sub{margin:0 0 10px; font:600 .84rem/1.3 var(--font-display); color:var(--blue)}
.alt-way-row .aw-desc{margin:0 0 14px; font-size:.88rem; line-height:1.6; color:var(--muted); max-width:52em}
.alt-way-row .aw-cta{
  font:700 .88rem/1 var(--font-display); color:var(--green-deep); text-decoration:none!important;
  display:inline-flex; align-items:center; gap:4px;
}
.alt-way-row .aw-cta:hover .arr{transform:translateX(3px)}
.alt-way-row .arr{transition:transform .15s}

/* Самостоятелна карта — когато остава само 1 "друга възможност" */
.alt-way-single{
  display:flex; gap:22px; align-items:flex-start; max-width:720px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px 28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.alt-way-single:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb,var(--blue) 30%,var(--border));
}
.alt-way-single .alt-way-ico{flex:0 0 52px; width:52px; height:52px}

/* Код блок (Разработчици) */
.code{
  background:#20262C; color:#D8E2EA; border-radius:var(--radius-sm); border:1px solid #30383F;
  font:500 .84rem/1.65 ui-monospace,Consolas,"SF Mono",monospace;
  padding:18px 20px; overflow-x:auto; white-space:pre;
}
.code .c{color:#7C8B98}.code .k{color:#9FCD36}.code .s{color:#F0B762}
.code{box-shadow:var(--shadow)}

/* Акордеони (правни страници) */
details.acc{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); margin-bottom:12px; box-shadow:var(--shadow)}
details.acc summary{
  cursor:pointer; padding:16px 20px; font:700 .98rem/1.4 var(--font-display); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+"; font:400 1.3rem/1 var(--font-display); color:var(--muted)}
details.acc[open] summary::after{content:"–"}
.legal-section{margin:0 0 30px; color:var(--muted); font-size:.95rem}
.legal-section > h2{font-size:1.2rem; color:var(--text); margin:0 0 12px}
.legal-section h3{font-size:1.02rem; color:var(--text); margin:20px 0 8px}
.legal-section ul, .legal-section ol{padding-left:22px; margin:0 0 12px}
.legal-section li{margin-bottom:4px}
.legal-table{width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:.9rem}
.legal-table th, .legal-table td{border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top}
.legal-table th{background:var(--bg-tint); color:var(--text)}
@media (max-width:760px){ .legal-table{display:block; overflow-x:auto} }
details.acc .acc-body{padding:0 20px 18px; color:var(--muted); font-size:.95rem; border-top:1px solid var(--border); padding-top:14px}

/* ---------- 11. Дисклеймър лента (над футъра, на всяка страница) ---------- */
/* ---------- 11а. Footer: wwwroot/css/chrome.css ---------- */

/* ---------- 12. SPA-страници ---------- */
.page{animation:pgIn .25s ease}

@keyframes pgIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* Помощни */
.grid-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px}
@media (max-width:860px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.mb-0{margin-bottom:0}.mb-12{margin-bottom:12px}.mb-20{margin-bottom:20px}.mb-28{margin-bottom:28px}.mb-40{margin-bottom:40px}
.mt-20{margin-top:20px}.mt-28{margin-top:28px}.mt-40{margin-top:40px}


/* =====================================================================
   NapiCloud additions — parts the NAPI3 prototype does not have
   ===================================================================== */

/* ---------- Cookie notice ---------- */
.cookie-banner{position:fixed; left:20px; bottom:20px; z-index:150; max-width:360px;
  display:flex; gap:12px; align-items:center; padding:12px 14px;
  background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lift); font-size:.86rem; line-height:1.45}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0}

/* ---------- Pages that keep their own markup (Pages/Shared/_ContentLayout.cshtml) ---------- */
.content-page{padding-top:28px; padding-bottom:64px}

/* ---------- Bootstrap bridge: cards, forms, buttons and alerts on account and older pages ---------- */
.content-page .card{background:var(--card); color:var(--text); border:1px solid var(--border)!important;
  border-radius:var(--radius); box-shadow:var(--shadow)!important; overflow:hidden}
.content-page .card-header{background:var(--bg-soft)!important; color:var(--text)!important; border-bottom:1px solid var(--border)}
.content-page .card-header.bg-primary{background:var(--hero-grad)!important; color:#fff!important}
.content-page .card-header.bg-primary *{color:#fff}
.content-page .card-header.bg-primary :is(.form-select, .form-control, option){color:var(--text)}
.content-page .card-title{font-family:var(--font-display); font-weight:700}
/* Validation messages: nothing while a field is valid, a compact line when it is not. */
.content-page .field-validation-valid, .content-page .validation-summary-valid{display:none!important}
.content-page .field-validation-error{display:block; padding:0!important; margin-top:5px; font-size:.84rem}
/* style.v2.css gives every .bg-light "margin:20px auto; padding:25px 50px" (!important); undo it on content pages. */
.content-page .bg-light{margin-top:0!important; margin-left:0!important; margin-right:0!important; border-radius:var(--radius-sm)!important}
.content-page .card-header.bg-light{margin:0!important; padding:.85rem 1.25rem!important; border-radius:0!important; background:var(--bg-soft)!important}
.content-page .bg-light.p-2{padding:.6rem .8rem!important}
.content-page .bg-light.p-3{padding:1rem!important}
.content-page td.bg-light{padding:.5rem .75rem!important; border-radius:0!important}
.content-page .form-label{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--text)}
.content-page .form-control, .content-page .form-select{
  background:var(--bg); color:var(--text); border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:.6em .85em; font:inherit; font-size:.97rem}
.content-page .form-control:focus, .content-page .form-select:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); background:var(--bg); color:var(--text)}
.content-page .form-control::placeholder{color:var(--muted)}
.content-page .form-check-input:checked{background-color:var(--green-btn); border-color:var(--green-btn)}
.content-page .btn{border-radius:11px}
.content-page .btn-success{background:var(--green-btn); border-color:var(--green-btn); color:#fff}
.content-page .btn-success:hover{background:var(--green-btn-hover); border-color:var(--green-btn-hover)}
.content-page .btn-outline-secondary, .content-page .btn-outline-primary{
  background:transparent; color:var(--text); border:1.5px solid var(--border-strong)}
.content-page .btn-outline-secondary:hover, .content-page .btn-outline-primary:hover{border-color:var(--blue); color:var(--blue); background:transparent}
.content-page .alert{border-radius:var(--radius-sm)}
.content-page .alert a{color:inherit!important; font-weight:600; text-decoration:underline}
.content-page .compact-form .form-label{margin-bottom:.2rem; font-size:.85rem}
.content-page .compact-form .form-control{padding:.45em .75em}
.content-page .alert-light{background:var(--bg-soft); color:var(--muted); border-color:var(--border)!important}
.content-page .text-muted{color:var(--muted)!important}
.content-page .text-primary{color:var(--link)!important}
.content-page .table{color:var(--text); --bs-table-bg:transparent; --bs-table-color:var(--text)}

/* ---------- Sign-in and registration ---------- */
.auth{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:28px; align-items:stretch; margin:12px 0 18px}
.auth-aside{position:relative; overflow:hidden; border-radius:24px; padding:40px 38px; color:#fff; background:var(--hero-grad); box-shadow:var(--shadow-lift)}
.auth-aside::after{content:""; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--green) 55%,transparent) 0%,transparent 70%); pointer-events:none}
.auth-aside h1{color:#fff; font-size:clamp(1.7rem,3.2vw,2.3rem)}
.auth-aside .eyebrow{color:#DDF1B5}
.auth-aside .lead{color:rgba(255,255,255,.88); font-size:1.05rem; max-width:30em}
.auth-aside .checks li{color:#fff}
.auth-aside .checks svg{color:var(--green)}
.auth-logo{display:inline-block; margin-bottom:22px; background:#fff; border-radius:16px; padding:6px; box-shadow:0 8px 24px -10px rgba(0,0,0,.35)}
.auth-logo img{display:block; border-radius:12px}
.auth-community{display:inline-flex; align-items:center; gap:.55em; margin-top:10px; color:#fff!important; font-weight:500; font-size:.92rem;
  padding:.55em .95em; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25)}
.auth-community:hover{background:rgba(255,255,255,.22); text-decoration:none!important}
.auth-card{background:var(--card); border:1px solid var(--border); border-radius:24px; padding:34px 34px 28px; box-shadow:var(--shadow)}
.auth-card h2{font-size:1.45rem; margin-bottom:30px}
.auth-field{margin-bottom:16px}
.auth-hint{display:block; margin-top:6px; color:var(--muted); font-size:.82rem}
.auth .form-check{flex-wrap:wrap; row-gap:6px}
.auth .form-check > .text-danger:not(:empty){flex:1 1 100%; padding-left:32px}
.auth-policies{display:flex; flex-wrap:wrap; gap:4px 14px; flex:1 1 100%; padding-left:32px; font-size:.84rem}
.auth-submit{width:100%; margin-top:6px}
.auth-links{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); font-size:.93rem}
.auth-resend{margin:10px 0 0; font-size:.86rem}
.auth-info{display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:12px 14px; border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--info) 10%,transparent); border:1px solid color-mix(in srgb,var(--info) 30%,transparent); font-size:.88rem}
.auth-info svg{flex:0 0 18px; margin-top:2px; color:var(--blue)}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-aside{padding:30px 26px}
  .auth-card{padding:26px 22px 22px}
}

/* ---------- Other account screens (forgot password, confirmations, 2FA …) ---------- */
.account-page:not(:has(.auth, .manage)){max-width:600px; margin:12px auto 0; background:var(--card); border:1px solid var(--border);
  border-radius:24px; padding:34px 36px 30px; box-shadow:var(--shadow)}
.account-page:not(:has(.auth, .manage)) h1{font-size:1.6rem}
.account-page:not(:has(.auth, .manage)) h2{font-size:1.02rem; font-weight:500; color:var(--muted); font-family:var(--font-body)}
.account-page:not(:has(.auth, .manage)) hr{border:0; border-top:1px solid var(--border); margin:18px 0}
.account-page:not(:has(.auth, .manage)) .row > [class*="col-"]{flex:0 0 100%; max-width:100%}

/* ---------- Account management (Pages/Account/Manage/_ManageLayout.cshtml) ---------- */
.manage-head{padding:8px 0 22px}
.manage-head h1{font-size:clamp(1.6rem,3vw,2.2rem); margin:0}
.manage-grid{display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px; align-items:start}
.manage-nav{position:sticky; top:96px; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:10px; box-shadow:var(--shadow)}
.manage-nav .nav{gap:2px}
.manage-nav .nav-link{display:block; padding:.62em .9em; border-radius:12px; color:var(--text); font:600 .9rem/1.3 var(--font-display); background:none}
.manage-nav .nav-link:hover{background:var(--bg-soft); color:var(--blue); text-decoration:none}
.manage-nav .nav-link.active{background:color-mix(in srgb,var(--blue) 10%,transparent); color:var(--blue)}
.manage-content{min-width:0}
.manage-content > h3:first-child, .manage-content > h2:first-child{margin-top:0}
@media (max-width:900px){
  .manage-grid{grid-template-columns:1fr}
  .manage-nav{position:static}
  .manage-nav .nav{flex-direction:row!important; flex-wrap:wrap}
}

/* ---------- Pages that still load Bootstrap (body.legacy, see Pages/Shared/_ContentLayout.cshtml) ----------
   Bootstrap's Sandstone theme imports Roboto from Google Fonts; the design itself never loads Roboto or Manrope,
   so these pages keep the system fonts the design renders with, without the Bulgarian letterforms (locl). */
.legacy{
  --font-body:-apple-system,"Segoe UI",system-ui,Arial,sans-serif;
  --font-display:-apple-system,"Segoe UI",system-ui,sans-serif;
  font-feature-settings:"locl" 0;
}
.legacy .header .btn, .legacy .footer .btn, .legacy .cookie-banner .btn{text-transform:none; letter-spacing:normal}

/* ---------- Phones: reading mode (wwwroot/js/site.js adds body.reading-mode below 760px) ----------
   Everything is open and stacked so the page reads top to bottom by scrolling alone. */
@media (max-width:760px){
  .instr-panel{display:block}
  .instr-panel + .instr-panel{margin-top:40px; padding-top:32px; border-top:1px solid var(--border)}
  .faq-item summary, details.acc summary{pointer-events:none; cursor:default}
  .faq-item summary .faq-plus, details.acc summary::after{display:none}
  .reading-mode .codex-list, .reading-mode .roles, .reading-mode .role-panel .rp-head{display:none}
  .reading-mode .codex-panel .cp-entry + .cp-entry{margin-top:26px; padding-top:22px; border-top:1px solid var(--border)}
  .reading-mode .role-panel .rp-read + .rp-read{margin-top:26px; padding-top:22px; border-top:1px solid var(--border)}
  .reading-mode .role-panel .rp-read h3{margin-bottom:8px}
  .reading-mode .nav-tabs{display:none}
  .reading-mode .tab-content > .tab-pane{display:block; opacity:1}
  .reading-mode .tab-content > .tab-pane + .m-tab-title{margin-top:18px}
  .m-tab-title{font:700 .82rem/1.2 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); margin:6px 0 8px}
}

/* ---------- Getting-started checklist (Pages/Shared/_GettingStarted.cshtml: dashboard and profile) ---------- */
.dash-progress{display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:760px; margin-bottom:26px}
.dash-progress-bar{flex:1 1 260px; height:10px; border:0; border-radius:99px; overflow:hidden; background:var(--bg-soft); appearance:none; -webkit-appearance:none}
.dash-progress-bar::-webkit-progress-bar{background:var(--bg-soft); border-radius:99px}
.dash-progress-bar::-webkit-progress-value{background:linear-gradient(90deg,var(--green-btn),var(--green)); border-radius:99px}
.dash-progress-bar::-moz-progress-bar{background:linear-gradient(90deg,var(--green-btn),var(--green)); border-radius:99px}
.dash-progress-text{font-size:.92rem; color:var(--muted)}
.dash-steps{list-style:none; padding:0; margin:0; display:grid; gap:12px; max-width:880px}
.dash-step{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:16px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.dash-step-num{width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-tint); color:var(--green-deep); font:800 .95rem/1 var(--font-display)}
.dash-step.done .dash-step-num{background:var(--green-btn); color:#fff}
.dash-step-body h3{font-size:1.02rem; margin:0 0 4px}
.dash-step-body p{margin:0 0 4px; color:var(--muted); font-size:.92rem}
.dash-step-body a{font-size:.88rem; font-weight:600}
.dash-step.done .dash-step-body h3{color:var(--muted)}
.dash-step-form{margin:0}
@media (max-width:760px){
  .dash-step{grid-template-columns:36px minmax(0,1fr)}
  .dash-step-form{grid-column:2}
}

/* ---------- Column variants chosen by a page; they collapse on small screens ---------- */
.related.related-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-tiles.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.offer-bar.offer-bar-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.offer-bar-grow{flex:1 1 480px}
.checks.checks-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px}
@media (max-width:900px){.related.related-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.feature-tiles.cols-2, .offer-bar.offer-bar-3, .checks.checks-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.btn{max-width:100%; white-space:normal; text-align:center}}

/* ---------- Developers: teaser of the API documentation ---------- */
.docs-teaser{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 34px}
.docs-teaser h3{font-size:1.35rem; margin:6px 0 14px}
.docs-teaser .checks{margin:0 0 24px}
.docs-preview{background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; overflow:hidden; font-size:.82rem; box-shadow:var(--shadow)}
.dp-head{background:linear-gradient(90deg,var(--blue-deep),var(--blue)); color:#fff; padding:11px 16px; font:600 .88rem/1.2 var(--font-display)}
.dp-group{padding:12px 16px 4px; font:700 .66rem/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.07em; color:var(--green-deep)}
.dp-row{display:flex; align-items:center; gap:10px; margin:5px 12px; padding:8px 12px; background:var(--card); border:1px solid var(--border); border-radius:10px; font-weight:600; color:var(--text)}
.dp-row span{flex:1 1 auto}
.dp-row code{font-size:.68rem; color:var(--muted); background:var(--bg-soft); padding:1px 6px; border-radius:5px; white-space:nowrap}
.dp-row::after{content:"+"; color:var(--muted); font-weight:400}
.dp-more{padding:8px 16px 14px; color:var(--muted); font-size:.78rem}
@media (max-width:860px){.docs-teaser{grid-template-columns:minmax(0,1fr); padding:24px 20px}}
@media (max-width:560px){.dp-row code{display:none}}

/* ---------- Instructions: link to the next step, styled like a menu item ---------- */
.next-link{display:flex; align-items:center; gap:12px; margin-top:18px; padding:12px 16px; max-width:420px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow); color:var(--text); text-decoration:none!important; transition:border-color .15s, background .15s}
.next-link:hover{border-color:var(--green-btn); background:var(--bg-soft)}
.next-link-text{display:flex; flex-direction:column; gap:2px; flex:1}
.next-link-arr{font-size:1.25rem; color:var(--green-deep); transition:transform .15s}
.next-link:hover .next-link-arr{transform:translateX(4px)}