/* paraf.bg — оформлението на сайта: началната, четирите страници на
   програмите и двете правни.

   ⚠️ ЕДНО ЛИЦЕ С verify.paraf.bg. Страницата за проверка на документ носи
   Playfair Display за заглавията, Sofia Sans за текста и PT Mono за малките
   надписи с разредка. Различен шрифт тук разминава двете лица на продукта —
   човек, дошъл от документа към paraf.bg, попада другаде. Тук са същите три,
   със същите редове (verify-site/stil.css).

   Montserrat остава ВГРАДЕН В ПРОГРАМИТЕ (шрифтът на печатните образци), но
   на сайта не се ползва.

   Всички са под лиценз SIL OFL и стоят при страницата — външен адрес няма нито
   един, тъй че сайтът минава и през най-строгите заглавия във vercel.json. */

@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("fonts/playfair-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/sofiasans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/sofiasans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ptmono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ptmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ⚠️ СТРАНИЦАТА Е СВЕТЛА ВИНАГИ — тук нарочно НЯМА тъмен вариант: страницата
   за проверка на документ (verify-site/) е само светла, а двете лица на
   продукта трябва да са едно. */
/* ⚠️ ЕДИН ЦВЯТ С verify.paraf.bg. Човек, дошъл от документа към paraf.bg,
   трябва да попадне на същия продукт: тук са същите стойности като в
   verify-site/stil.css. */
:root {
  --hartia: #f6f1e6;      /* кремавото на страницата за проверка */
  --hartia-2: #efe8d9;    /* по-плътната ивица за редуващите се раздели */
  --mastilo: #22364e;     /* мастилото е синкаво тъмно, не черно */
  --mek: #5b6b80;
  --blyad: #8a97ab;
  --linia: #e3dbc9;
  --sinyo: #5c86c0;       /* акцентът */
  --tamnosinyo: #1f3f6b;  /* заглавия и копчета */
  --tamnosinyo-2: #16304f;
  --grafit: #1f3f6b;
  --kutia: #fffdf9;
  color-scheme: light;   /* и полетата, и лентата за превъртане остават светли */
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Sofia Sans", "Segoe UI", system-ui, Arial, sans-serif;
  background: var(--hartia);
  /* Същият фон като на страницата за проверка: едва доловим ореол горе и
     хоризонтален хеърлайн — усещане за лист, не за екран. */
  background-image:
    radial-gradient(1100px 500px at 50% -10%, rgba(92, 134, 192, .10), transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(31, 63, 107, .014) 3px 4px);
  background-attachment: fixed;
  color: var(--mastilo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--sinyo); outline-offset: 3px; }
/* ⚠️ Скритото ДА Е скрито. Браузърът сам крие `hidden`, но с правило от
   собствения си списък, а всяко правило на страницата го надделява — `.kopche`
   с display: inline-block показваше и копче с hidden. Копчетата за macOS и
   „Заявете инсталация“ стоят скрити, докато обявлението не каже друго. */
[hidden] { display: none !important; }

/* Лента най-горе */
.lenta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(16px, 5vw, 56px);
  border-bottom: 1px solid var(--linia);
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--hartia) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
}
.znak { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: .14em; font-size: 18px; color: var(--tamnosinyo); }
/* ⚠️ Менюто СЕ ПРЕНАСЯ на нов ред. Точките са пет („Нотариус Адвокат Календар
   Документи Контакти“) и на един ред не се побират: на телефон редът излиза
   извън листа и цялата страница се влачи настрани. */
.lenta nav { display: flex; flex-wrap: wrap; gap: 10px clamp(12px, 3vw, 28px); font-size: 13px; font-weight: 600; }
.lenta nav a { color: var(--mek); text-decoration: none; }
.lenta nav a:hover { color: var(--mastilo); }
/* Коя страница се чете в момента. Без това петте страници изглеждат еднакво и
   човек се лута коя точно е отворил. */
.lenta nav a[aria-current="page"] { color: var(--mastilo); border-bottom: 2px solid var(--sinyo); padding-bottom: 2px; }

/* Начало */
.hero {
  padding: clamp(48px, 9vw, 104px) clamp(16px, 5vw, 56px) clamp(40px, 7vw, 76px);
  max-width: 1080px;
}
.nadpis { font-family: "PT Mono", monospace; font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--sinyo); margin-bottom: 18px; }
h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(27px, 3.8vw, 40px);
  font-weight: 800;
  color: var(--tamnosinyo);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 22px;
}
.vodesht { max-width: 62ch; color: var(--mek); font-size: clamp(15px, 1.6vw, 17px); font-weight: 500; }
.deystvia { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kopche {
  display: inline-block; padding: 13px 26px; border-radius: 3px;
  background: var(--grafit); color: #f6f4ef; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  border: 1px solid var(--grafit);
  transition: transform .15s ease, opacity .15s ease;
}
.kopche:hover { transform: translateY(-1px); opacity: .92; }
.kopche.vtorichno { background: transparent; color: var(--mastilo); border-color: var(--linia); }

/* Кодът за изтегляне на платена програма. Показва се само когато има какво да
   се тегли — versia.js го вдига по обявлението, инак стои скрит. */
.kodZaIzteglyane { margin-top: 28px; max-width: 480px; }
.kodZaIzteglyane label { display: block; font-family: "PT Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mek); margin-bottom: 8px; }
.kodZaIzteglyane input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 3px;
  border: 1px solid var(--linia); background: var(--kutia); color: var(--mastilo);
  font-family: inherit; font-size: 14px; font-weight: 600;
}
.kodZaIzteglyane input:focus { outline: 2px solid var(--sinyo); outline-offset: 1px; border-color: var(--sinyo); }
.kodZaIzteglyane .drebno { margin-top: 8px; }
/* Копче без въведен код: вижда се, но не води никъде. */
.kopche[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Заявката. Едно поле на ред: попълва се веднъж и от телефон. */
.zayavka { max-width: 560px; }
.zayavka label { display: block; font-family: "PT Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mek); margin: 16px 0 7px; }
.zayavka label:first-child { margin-top: 0; }
.zayavka input, .zayavka select, .zayavka textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 3px;
  border: 1px solid var(--linia); background: var(--kutia); color: var(--mastilo);
  font-family: inherit; font-size: 14px; font-weight: 600;
}
.zayavka textarea { resize: vertical; min-height: 72px; }
.zayavka input:focus, .zayavka select:focus, .zayavka textarea:focus {
  outline: 2px solid var(--sinyo); outline-offset: 1px; border-color: var(--sinyo);
}
.zayavka .deystvia { margin-top: 22px; }
.zayavka .kopche { cursor: pointer; font-family: inherit; }
/* Примамката: извън екрана, но достъпна за самоходните програми, които четат
   HTML-а. `display: none` не върши работа — те я разпознават и я прескачат. */
.zayavka .skrito { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Кратко „какво има вътре“ на страницата на програмата: няколко думи в ред,
   не шест карета. Подробното стои в програмата и в ръководството ѝ. */
.nakratko { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--mek); }
.nakratko li + li::before { content: "·"; color: var(--sinyo); margin: 0 12px; }

/* ── Началната страница: текст отляво, перото отдясно ──
   Перото е знакът на ПАРАФ, начертан пред очите на посетителя: първо
   очертанията, после линията, после точката на върха — и накрая по линията се
   изписва параф в златно, който се подновява на всеки няколко секунди. Всяка
   линия носи pathLength="1", тъй че дължината ѝ за анимацията е винаги 1, а
   не зависи от координатите. Без JavaScript — само оформление. */
.hero.dvoen { max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.podpis { margin: 0; display: flex; justify-content: center; }
.podpis svg { width: min(100%, 400px); height: auto; overflow: visible; }
.pero, .linia, .podpisvane { fill: none; stroke: var(--grafit); stroke-width: 7.5; stroke-linejoin: miter; stroke-linecap: square; stroke-miterlimit: 1.35; stroke-dasharray: 1; stroke-dashoffset: 1; animation: risuvane .9s cubic-bezier(.4, 0, .2, 1) forwards; }
.pero.tanka { stroke-width: 4.7; }
.pero.otvor { stroke-width: 4.3; }
.pero:nth-of-type(1) { animation-delay: .2s; }
.pero:nth-of-type(2) { animation-delay: .55s; }
.pero:nth-of-type(3) { animation-delay: .9s; }
.pero:nth-of-type(4) { animation-delay: 1.3s; }
.pero:nth-of-type(5) { animation-delay: 1.6s; }
.linia { animation-delay: 1.9s; animation-duration: .7s; }
.tochka { fill: var(--grafit); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: tochka .45s cubic-bezier(.34, 1.56, .64, 1) 2.55s forwards; }
.podpisvane { stroke: var(--sinyo); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: podpisvane 9s ease-in-out 3.1s infinite; }
@keyframes risuvane { to { stroke-dashoffset: 0; } }
@keyframes tochka { to { transform: scale(1); } }
@keyframes podpisvane {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  30%  { stroke-dashoffset: 0; opacity: 1; }
  72%  { stroke-dashoffset: 0; opacity: 1; }
  84%  { stroke-dashoffset: 0; opacity: 0; }
  85%  { stroke-dashoffset: 1; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
/* Текстът влиза стъпаловидно, малко след като перото е тръгнало. */
.vhod > * { opacity: 0; animation: vhod .7s ease-out forwards; }
.vhod > :nth-child(1) { animation-delay: .1s; }
.vhod > :nth-child(2) { animation-delay: .3s; }
.vhod > :nth-child(3) { animation-delay: .55s; }
.vhod > :nth-child(4) { animation-delay: .8s; }
.vhod > :nth-child(5) { animation-delay: 1s; }
.vhod > :nth-child(6) { animation-delay: 1.15s; }
@keyframes vhod { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Който е поискал по-малко движение, получава готовата картина наведнъж. */
@media (prefers-reduced-motion: reduce) {
  .pero, .linia, .podpisvane, .tochka, .vhod > * { animation: none; }
  .pero, .linia { stroke-dashoffset: 0; }
  .podpisvane { stroke-dashoffset: 0; opacity: 1; }
  .tochka { transform: none; }
  .vhod > * { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* Раздели */
.razdel { padding: clamp(40px, 6vw, 72px) clamp(16px, 5vw, 56px); max-width: 1080px; }
.razdel.tiho { background: var(--hartia-2); max-width: none; }
.razdel.tiho > * { max-width: 1080px; }
h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(20px, 2.3vw, 27px); font-weight: 800; color: var(--tamnosinyo); letter-spacing: -0.005em; margin-bottom: 26px; text-wrap: balance; }
h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }

.reshetka { display: grid; gap: 26px 34px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.reshetka article { padding-top: 16px; border-top: 2px solid var(--sinyo); }
.reshetka p { color: var(--mek); font-size: 14px; font-weight: 500; }

/* Продуктовите карти: две по две (не 3+1), а описанието бута реда с
   етикетчето и връзката към дъното — картите стоят подравнени независимо
   от дължината на текста. */
/* Четири карета в решетка по три оставят четвъртото само на реда, а до него —
   празно поле в половин екран. Затова четворките се редят две по две. */
.reshetka.programi,
.reshetka.dve { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.reshetka.programi article { display: flex; flex-direction: column; }
.reshetka.programi article p:first-of-type { flex: 1; }
/* Знакът и в шапката на страницата на програмата — същият, който човек ще
   види на лентата на задачите, след като я инсталира. */
.nadpisSaZnak { display: inline-flex; align-items: center; gap: 9px; }
.nadpisSaZnak img { flex: 0 0 auto; border-radius: 6px; }
/* Знакът на програмата стои ДО името ѝ. Четирите знака се различават по
   силует, поле и мастило — така картата се разпознава, преди да се чете. */
.imeProdukt { display: flex; align-items: center; gap: 11px; }
.imeProdukt img { flex: 0 0 auto; border-radius: 7px; }
.redProdukt { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.redProdukt a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--mastilo); border-bottom: 2px solid var(--sinyo); padding-bottom: 1px; }
.etiketche { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sinyo); }

/* Версия */
.kutia { background: var(--kutia); border: 1px solid var(--linia); border-radius: 4px; padding: clamp(18px, 3vw, 30px); max-width: 760px; }
dl { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 22px; margin-bottom: 18px; }
dt { font-family: "PT Mono", monospace; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .22em; color: var(--mek); }
dd { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.drebno { font-size: 12.5px; color: var(--mek); font-weight: 500; line-height: 1.65; }
.drebno.sled-deystvia { margin-top: 10px; }

.kontakti { margin-top: 16px; font-size: clamp(16px, 2vw, 19px); font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kontakti a { text-decoration: none; border-bottom: 2px solid var(--sinyo); padding-bottom: 2px; }
.kontakti span { color: var(--linia); }

footer {
  border-top: 1px solid var(--linia);
  padding: 30px clamp(16px, 5vw, 56px) 44px;
  font-size: 12.5px; color: var(--mek); font-weight: 500;
  display: grid; gap: 6px;
}

/* Текстови страници (Общи условия, Поверителност): един стълб с ширина за
   четене, а не решетка. Заглавието е по-малко от това на витрините, защото тук
   не продава, а озаглавява. */
.tekst { max-width: 78ch; }
.tekst h1 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 400; margin-bottom: 14px; }
.tekst .vodesht { margin-bottom: 8px; }
.tekst h2 { font-size: clamp(17px, 2.2vw, 21px); margin: 40px 0 12px; }
.tekst h3 { font-size: 15px; margin: 22px 0 6px; }
.tekst p, .tekst li { font-size: 15px; font-weight: 500; line-height: 1.7; }
.tekst p { margin-bottom: 12px; }
.tekst ul, .tekst ol { padding-left: 22px; margin-bottom: 14px; }
.tekst li { margin-bottom: 7px; }
.tekst a { text-decoration: none; border-bottom: 2px solid var(--sinyo); padding-bottom: 1px; }
.tekst strong { font-weight: 700; }
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linia); }
footer a:hover { color: var(--mastilo); border-bottom-color: var(--sinyo); }

@media (max-width: 760px) {
  .hero.dvoen { grid-template-columns: 1fr; }
  .podpis { order: -1; }
  .podpis svg { width: min(100%, 220px); }
}
@media (max-width: 520px) {
  dl { grid-template-columns: 1fr; gap: 4px; }
  dl dd { margin-bottom: 10px; }
  .lenta { flex-direction: column; align-items: flex-start; gap: 10px; position: static; }
}