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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Анимация при поява ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

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

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

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

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

/* Бургер */
.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);
  border-radius:8px;padding:9px 11px;cursor:pointer;align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:1.6px;background:var(--ink);margin:3.5px 0;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

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

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

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

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


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

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

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

/* Hero — илюстрация */
.hero-art{position:relative}
.mock{
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.mock-chrome{
  display:flex;align-items:center;gap:6px;padding:11px 14px;
  background:var(--paper-2);border-bottom:1px solid var(--rule);
}
.mock-chrome i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);display:block}
.mock-url{
  margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:#fff;border:1px solid var(--rule);border-radius:5px;padding:3px 10px;
}
.mock-body{padding:22px}
.sk{background:var(--paper-2);border-radius:6px}
.sk-h{height:19px;width:64%;margin-bottom:11px;background:var(--ink);opacity:.88;border-radius:5px}
.sk-p{height:9px;width:88%;margin-bottom:7px}
.sk-p.s{width:70%}
.sk-btns{display:flex;gap:8px;margin-top:17px}
.sk-b1{height:31px;width:104px;border-radius:7px;background:var(--ink)}
.sk-b2{height:31px;width:88px;border-radius:7px;background:var(--paper-2);border:1px solid var(--rule-2)}
.sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px}
.sk-card{height:66px;border:1px solid var(--rule);border-radius:8px;background:#fff;padding:9px}
.sk-card i{display:block;height:7px;border-radius:3px;background:var(--brass-soft);width:44%;margin-bottom:7px}
.sk-card u{display:block;height:6px;border-radius:3px;background:var(--paper-2);width:82%;margin-bottom:5px;text-decoration:none}
.sk-card u:last-child{width:60%}
.badge-float{
  position:absolute;bottom:-16px;left:-16px;background:#fff;border:1px solid var(--rule);
  border-radius:11px;box-shadow:var(--shadow);padding:11px 15px;
  display:flex;align-items:center;gap:10px;
}
.badge-float b{font-size:14px;display:block;font-family:var(--serif);font-weight:600}
.badge-float small{font-size:12px;color:var(--muted)}
.badge-float .dot{
  width:32px;height:32px;border-radius:8px;background:var(--brass-soft);
  display:grid;place-items:center;color:var(--brass-2);flex:0 0 auto;
}

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

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

/* ---------- Портфолио карти ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.works-lead{grid-template-columns:1.15fr 1fr 1fr}
.work{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;transition:.2s;display:flex;flex-direction:column;
}
.work:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.work .thumb{
  height:150px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;padding:18px;
}
.work .thumb svg{max-height:100%}
.work .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.work h3{font-size:17px;margin-bottom:6px}
.work p{font-size:14px;color:var(--muted);flex:1}
.work .meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brass-2);margin-top:14px;display:flex;align-items:center;gap:6px;
}
.work.real{outline:2px solid var(--brass-soft);outline-offset:-2px}

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

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

@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-art{max-width:520px}
  .packs{grid-template-columns:repeat(2,1fr)}
  .works,.works-lead{grid-template-columns:1fr 1fr}
  .works-lead .work:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .hero{padding:46px 0 42px}
  .sec{padding:52px 0}
  .sec-tight{padding:40px 0}
  .steps{grid-template-columns:1fr;gap:16px}
  .packs{grid-template-columns:1fr;gap:26px}
  .works,.works-lead{grid-template-columns:1fr}
  .works-lead .work:first-child{grid-column:auto}
  .final{padding:40px 24px}
  .badge-float{left:0;bottom:-14px}
  .cta-row .btn{flex:1 1 auto}
}

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

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

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

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

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

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

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

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

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

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

/* ---------- Ценови ориентири ---------- */
.market{display:flex;flex-direction:column;gap:11px}
.market-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;font-size:15px}
.market-row .ml{color:var(--ink-2)}
.market-row .mv{font-family:var(--mono);font-size:14px;color:var(--muted);white-space:nowrap}
.market-row.me .ml{font-weight:600;color:var(--ink)}
.market-row.me .mv{color:var(--brass-2);font-weight:600}
.mbar{height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden;margin-top:5px}
.mbar i{display:block;height:100%;border-radius:3px;background:var(--rule-2)}
.market-row.me .mbar i{background:var(--brass)}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

/* ---------- Портфолио — разширени карти ---------- */
.pf-item{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.pf-item .pf-thumb{
  height:210px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;padding:26px;position:relative;
}
.pf-item .pf-body{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column}
.pf-item h3{font-size:20px;margin-bottom:8px}
.pf-item .pf-sub{font-size:14px;color:var(--muted);margin-bottom:14px}
.pf-item p{font-size:15px;color:var(--ink-2);flex:1}
.pf-item .pf-meta{
  margin-top:18px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.pf-item .pf-meta a{
  font-size:14.5px;font-weight:600;color:var(--brass-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.pf-item .pf-meta a:hover{color:var(--ink)}
.pf-item .pf-meta .ar{transition:transform .18s}
.pf-item .pf-meta a:hover .ar{transform:translateX(3px)}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

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

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