/* ═══════════════════════════════════════════════════════════════════════════
   Е-Дневници — дизайн система на сайта
   Посока: „инспекторски контрол“ — тъмни чертожни ленти, едра display
   типография, фирмено синьо и данни с моноширинни цифри. Един файл обслужва
   всички статични страници (началната, дневниците, блога, цените).
   Приложението (/app/) е отделно и НЕ ползва този файл.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Шрифтове ─────────────────────────────────────────────────────────────
   Хостват се локално: CSP политиката (default-src 'self') не допуска външни
   CDN-и. И двата са променливи — един файл покрива всички дебелини. */
@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/unbounded-cyrillic.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/fonts/unbounded-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Фирменото синьо на приложението (blue-600/700). Сайтът и приложението
     ползват една палитра, за да не изглеждат като два различни продукта. */
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-deep: #1e3a8a;
  --brand-light: #eff6ff;
  --sky: #38bdf8;          /* акцент САМО върху тъмно */
  --ink: #0a1122;          /* мастилено тъмно — фон на тъмните ленти */
  --ink-2: #101b33;
  --slate: #475569;
  --muted: #64748b;
  --line: #e4e9f2;
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --on-dark: #e9eefb;
  --on-dark-muted: #93a4c6;
  --radius: 14px;
  --max: 1180px;
  --font-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  /* Текстът ползва точно стека на приложението (Tailwind v4 default),
     за да са еднакви сайтът и /app. Само заглавията остават с Unbounded. */
  --font-text: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Чертожната мрежа на тъмните ленти */
  --grid: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 100% 34px,
          linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 34px 100%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  color: #0f172a;
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ═══ Хедър ══════════════════════════════════════════════════════════════
   Тъмен и лепкав на всички страници — заедно с тъмното hero образува един
   плътен блок, а над светлото съдържание остава ясно отделен. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,17,34,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 68px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.02em; color: #fff; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand b { color: #fff; font-weight: 800; }
.brand .logo { display: inline-flex; }
.brand .logo svg { display: block; }
/* Стар вариант с емоджи — остава четим, ако някъде не е обновен */
.brand .logo:not(:has(svg)) { font-size: 22px; }

.menu { position: relative; display: flex; align-items: center; }
/* Превключвателят е истински checkbox: менюто работи без JavaScript и остава
   достъпно от клавиатурата (полето е прозрачно, но фокусируемо). */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.burger { display: none; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: #b9c6e2; font-weight: 500; font-size: 15px; letter-spacing: -.01em;
  transition: color .15s;
}
.nav a:not(.cta):hover { color: #fff; text-decoration: none; }
.nav .cta {
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 10px 24px -10px rgba(37,99,235,.9);
}
.nav .cta:hover { background: #3b82f6; text-decoration: none; }

/* Мобилно меню — работи без JavaScript (details/summary) */
@media (max-width: 900px) {
  .site-header .wrap { height: 60px; }
  .burger {
    display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  }
  .nav-toggle:focus-visible + .burger { outline: 3px solid var(--sky); outline-offset: 2px; }
  .burger .bars,
  .burger .bars::before,
  .burger .bars::after {
    content: ""; display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .2s, background .2s;
  }
  .burger .bars { position: relative; }
  .burger .bars::before { position: absolute; top: -6px; }
  .burger .bars::after { position: absolute; top: 6px; }
  .nav-toggle:checked + .burger .bars { background: transparent; }
  .nav-toggle:checked + .burger .bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked + .burger .bars::after { top: 0; transform: rotate(-45deg); }
  .menu .nav {
    display: none;
    position: absolute; right: 0; top: calc(100% + 12px); z-index: 70;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #0d1730; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    padding: 10px; min-width: 232px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .menu .nav a { padding: 11px 12px; border-radius: 8px; font-size: 15.5px; }
  .menu .nav a:not(.cta):hover { background: rgba(255,255,255,.06); }
  .menu .nav .cta { text-align: center; margin-top: 6px; }
}

/* ═══ Hero — тъмна чертожна лента ════════════════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
  padding: 64px 0 68px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grid);
  -webkit-mask-image: radial-gradient(120% 90% at 30% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 30% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.page-hero::after {
  content: ""; position: absolute; pointer-events: none;
  width: 900px; height: 520px; top: -260px; left: 50%; transform: translateX(-60%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(37,99,235,.55), transparent 70%);
  filter: blur(30px);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #b9c6e2; }
.page-hero p { color: #b9c6e2; }
.page-hero a:not(.btn):not(.cta) { color: #c7d6f5; }

/* Бадж: хапче с контур и пулсираща точка */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.06); color: #cfe0ff;
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-mono);
  font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 20px;
}
/* Върху светла карта същият бадж се нуждае от обратен контраст —
   иначе бялото върху бяло става нечетимо. */
.card .eyebrow, .section:not(.dark) .card .eyebrow {
  background: var(--brand-light); color: var(--brand-dark);
  border-color: rgba(37,99,235,.22); margin-bottom: 12px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sky); flex: none; box-shadow: 0 0 0 0 rgba(56,189,248,.6);
  animation: pulse 2.4s ease-out infinite;
}
.card .eyebrow::before { background: var(--brand); box-shadow: none; animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(56,189,248,.55); }
  70% { box-shadow: 0 0 0 9px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

h1 {
  font-family: var(--font-display); font-weight: 800;
  /* Unbounded е много широк — таванът е свален, за да не се чупи дълга дума
     като „автоматизиране" насред буквите в колоната на hero-то. */
  font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.045em;
  margin: 0 0 18px; text-wrap: balance; overflow-wrap: break-word;
}
h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.1vw, 36px); line-height: 1.14; letter-spacing: -.04em;
  margin: 56px 0 18px; text-wrap: balance;
}
h3 { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; letter-spacing: -.03em; margin: 26px 0 10px; }
.lead { font-size: 19.5px; line-height: 1.55; color: var(--slate); max-width: 640px; }

/* Акцент върху ключова дума в заглавие */
.hl {
  background: linear-gradient(100deg, var(--sky), #818cf8 55%, var(--brand));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══ Съдържание ═════════════════════════════════════════════════════════ */
main { padding: 8px 0 72px; }
main p, main li { color: #33415a; }
main ul { padding-left: 22px; }
main li { margin: 8px 0; }
main ol { padding-left: 22px; }
.section { padding: 8px 0; }
.section > p { max-width: 78ch; }

/* Малка чертичка над заглавията на секции — ритъм по цялата страница */
main .section > h2:first-child::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--sky));
  margin-bottom: 18px;
}

/* ═══ Бутони ═════════════════════════════════════════════════════════════ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--brand); color: #fff !important;
  padding: 15px 26px; border-radius: 12px;
  /* Бутоните ползват шрифта на приложението — не заглавния. */
  font-family: var(--font-text); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  margin-top: 8px; border: 0; cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(37,99,235,.85);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: #3b82f6; text-decoration: none; transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(37,99,235,.95); }
.btn:active { transform: translateY(0); }
/* Блясък, който минава веднъж при поява — дребен знак за изработка */
.btn::after {
  /* left: 0 е задължително — без него абсолютната позиция пада в статичната
     (след текста на бутона) и блясъкът стои видим и без hover. */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-160%); transition: transform .55s ease;
}
.btn:hover::after { transform: translateX(320%); }

.btn-ghost {
  background: transparent; color: #dbe6ff !important;
  border: 1.5px solid rgba(255,255,255,.28); box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); box-shadow: none; }
/* Върху светло съдържание призрачният бутон е тъмен */
main .btn-ghost, .calc .btn-ghost { color: #0f172a !important; border-color: #cbd5e1; }
main .btn-ghost:hover { background: #f1f5f9; border-color: var(--muted); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; }
.trust li { color: #9db0d4; font-size: 15px; display: flex; align-items: center; gap: 9px; margin: 0; }
.trust li::before {
  content: "✓"; color: var(--sky); font-weight: 800; font-size: 13px;
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.3);
}

/* ═══ Карти ══════════════════════════════════════════════════════════════ */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; margin: 28px 0; }
.card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px;
  background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--sky));
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.card:hover {
  box-shadow: 0 24px 50px -26px rgba(15,23,42,.45); transform: translateY(-4px);
  border-color: #c7d7f7;
}
.card:hover::before { transform: scaleX(1); }
.card .ico {
  font-size: 20px; width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-light); border: 1px solid #dbeafe;
  display: grid; place-items: center; margin-bottom: 12px;
}
.card h3 { margin: 0 0 6px; font-size: 17.5px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Карти-връзки (блог) */
a.card { display: flex; flex-direction: column; gap: 8px; color: inherit; }
a.card:hover { text-decoration: none; }
a.card h3 { color: #0f172a; }
a.card .cta { margin-top: auto; color: var(--brand-dark); font-weight: 700; font-size: 14.5px; padding-top: 8px; }

/* ═══ Таблици ════════════════════════════════════════════════════════════ */
.cmp {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 26px 0; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff;
}
.cmp th, .cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th {
  background: #0f1c36; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 14.5px; letter-spacing: -.02em;
}
.cmp tbody tr:nth-child(even) td { background: #fafbfe; }
.cmp tbody td:first-child { color: var(--slate); }

/* Съпоставка „хартия срещу нас“ — дясната колона печели видимо */
.cmp.vs thead th:first-child { background: #1e293b; color: #cbd5e1; }
.cmp.vs thead th:last-child { background: var(--brand-dark); }
.cmp.vs tbody td:first-child { color: #8494ac; }
.cmp.vs tbody td:first-child::before { content: "✕"; color: #b6c0d0; font-weight: 700; margin-right: 10px; }
.cmp.vs tbody td:last-child { color: #0f172a; font-weight: 600; background: #f3f7ff !important; }
.cmp.vs tbody td:last-child::before { content: "✓"; color: var(--brand); font-weight: 800; margin-right: 10px; }

@media (max-width: 620px) {
  .cmp { display: block; overflow-x: auto; }
  .cmp th, .cmp td { padding: 12px 14px; }
}

/* ═══ Цени ═══════════════════════════════════════════════════════════════ */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin: 30px 0; }
.price {
  position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px;
  text-align: center; background: #fff;
}
.price.popular {
  border-color: transparent; color: var(--on-dark);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(56,189,248,.22), transparent 65%),
    linear-gradient(160deg, #12203d, var(--ink));
  box-shadow: 0 34px 70px -34px rgba(10,17,34,.85);
}
.price.popular h3 { color: #fff; }
.price.popular p { color: var(--on-dark-muted); }
.price h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); font-weight: 600; margin: 0 0 12px; }
.price .amount {
  font-family: var(--font-display); font-size: 50px; font-weight: 800; letter-spacing: -.05em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.price .amount span { font-size: 17px; font-weight: 600; letter-spacing: 0; opacity: .7; }
.price .per { color: var(--muted); margin: 8px 0 14px; font-size: 15px; }
.price.popular .per { color: var(--on-dark-muted); }

/* ═══ Въпроси ════════════════════════════════════════════════════════════ */
.faq details {
  border: 1px solid var(--line); border-radius: 12px; padding: 2px 20px; margin: 10px 0; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.faq details[open] { border-color: #c7d7f7; box-shadow: 0 16px 40px -28px rgba(15,23,42,.5); }
.faq summary {
  font-weight: 600; cursor: pointer; padding: 16px 34px 16px 0; list-style: none;
  position: relative; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 12px;
  color: var(--brand); font-size: 24px; line-height: 1; font-weight: 400;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--slate); }

/* ═══ Трохи ══════════════════════════════════════════════════════════════ */
.crumbs { font-size: 13.5px; color: #7f92b6; padding: 0 0 18px; font-family: var(--font-mono); }
.crumbs a { color: #93a4c6; }

/* ═══ CTA лента ══════════════════════════════════════════════════════════ */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(37,99,235,.5), transparent 60%),
    linear-gradient(150deg, #12203d, var(--ink));
  color: #fff; border-radius: 24px; padding: 56px 36px; text-align: center; margin: 56px 0;
  box-shadow: 0 40px 80px -40px rgba(10,17,34,.9);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grid);
  -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 75%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin: 0 0 12px; }
.cta-band h2::before { display: none !important; }
.cta-band p { color: #b9c6e2; margin: 0 auto 24px; max-width: 56ch; }
.cta-band .btn { background: #fff; color: var(--brand-dark) !important; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.cta-band .btn:hover { background: #eff6ff; }

/* ═══ Футър ══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--ink); color: var(--on-dark-muted); padding: 56px 0 36px; font-size: 14.5px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.site-footer h4 {
  color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px;
}
.site-footer p { color: var(--on-dark-muted); margin: 0; line-height: 1.6; }
.site-footer a { color: #a8b8d8; display: block; margin: 7px 0; transition: color .15s; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer .copy {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  color: #7f92b6; font-size: 13.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Начална страница — hero с макет, калкулатор и тест за готовност
   ═══════════════════════════════════════════════════════════════════════ */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center;
}
@media (max-width: 980px) { .hero-split { grid-template-columns: 1fr; gap: 40px; } }
/* Колоните на grid са с min-width:auto по подразбиране и могат да разширят
   реда над ширината на екрана. Нулирането пази страницата без хоризонтален скрол. */
.hero-split > *, .calc > *, .grid > *, .price-grid > * { min-width: 0; }

.hero-note {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 14.5px; color: #8ea1c6 !important; max-width: 46ch;
}

/* Макет на таблото — чист HTML/CSS, без изображения */
.mock {
  position: relative; border-radius: 18px; padding: 20px;
  background: linear-gradient(165deg, #16233f, #0d1730);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.9);
}
.mock::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%);
}
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.mock-top .t { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #7f92b6; }
/* Макетът имитира приложението — затова е с неговия шрифт, не със заглавния. */
.mock-top .n { font-family: var(--font-text); font-weight: 700; color: #fff; font-size: 15.5px; letter-spacing: -.02em; margin-top: 3px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: rgba(37,99,235,.18); border: 1px solid rgba(56,189,248,.35);
  color: #bfe3ff; font-size: 12px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }

/* Пръстен с готовност */
.gauge { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.gauge .ring {
  --p: 0;
  position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--sky) calc(var(--p) * 1%), rgba(255,255,255,.09) 0);
  animation: fill 2.2s cubic-bezier(.2,.8,.2,1) .35s forwards;
}
@keyframes fill { from { --p: 0; } to { --p: 98; } }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.gauge .ring::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #0f1c36;
}
.gauge .ring .val {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-family: var(--font-text); font-weight: 800; font-size: 21px; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
}
.gauge .lbl { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.gauge .sub { color: #8ea1c6; font-size: 13.5px; margin-top: 2px; }

.mock-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mock-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06);
  opacity: 0; transform: translateY(6px);
  animation: rowin .5s ease forwards;
}
@keyframes rowin { to { opacity: 1; transform: none; } }
.mock-row:nth-child(1) { animation-delay: .5s; }
.mock-row:nth-child(2) { animation-delay: .75s; }
.mock-row:nth-child(3) { animation-delay: 1s; }
.mock-row:nth-child(4) { animation-delay: 1.25s; }
.mock-row:nth-child(5) { animation-delay: 1.5s; }
.mock-row .ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 15px; flex: none; }
.mock-row .nm { flex: 1; min-width: 0; color: #dce6fb; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row .tm { font-family: var(--font-mono); font-size: 12px; color: #7f92b6; }
.mock-row .vl { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--sky); font-variant-numeric: tabular-nums; }
.mock-row .ok { color: var(--sky); font-weight: 800; }

/* Скенерът минава веднъж през макета */
.mock .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 90px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(56,189,248,.22), transparent);
  animation: scan 3.4s ease-in-out 1.6s 2; opacity: 0; pointer-events: none;
}
@keyframes scan {
  0% { transform: translateY(0); opacity: .9; }
  100% { transform: translateY(360px); opacity: 0; }
}

/* Лента с гаранции под hero-то */
.strip { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.strip .wrap { display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.strip span {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--slate); font-weight: 500;
}
.strip span b { color: #0f172a; font-weight: 700; }
.strip .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }

/* ═══ Калкулатор ═════════════════════════════════════════════════════════ */
.calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center;
  border: 1px solid var(--line); border-radius: 20px; padding: 30px; background: var(--bg-soft);
  margin: 28px 0;
}
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }
.calc label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #0f172a; }
.calc label b { font-family: var(--font-mono); color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.calc .field { margin-bottom: 22px; }
.calc input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand) var(--fill, 40%), #dbe3f0 var(--fill, 40%));
  outline: none;
}
.calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); cursor: pointer;
  box-shadow: 0 6px 14px -4px rgba(37,99,235,.7);
}
.calc input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--brand);
  cursor: pointer;
}
.calc-out {
  border-radius: 16px; padding: 26px; text-align: center; color: #fff;
  background: linear-gradient(160deg, #12203d, var(--ink));
  box-shadow: 0 30px 60px -34px rgba(10,17,34,.9);
}
.calc-out .big {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 7vw, 56px);
  letter-spacing: -.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.calc-out .unit { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8ea1c6; margin-top: 10px; }
.calc-out .money { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: #bfe3ff; font-size: 15px; }
.calc-out .money b { font-family: var(--font-display); font-size: 20px; letter-spacing: -.03em; color: #fff; }

/* ═══ Тест за готовност ══════════════════════════════════════════════════ */
.quiz {
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin: 28px 0; background: #fff;
  box-shadow: 0 24px 60px -40px rgba(15,23,42,.6);
}
.quiz-head { padding: 24px 28px; background: var(--ink); color: #fff; }
.quiz-head .t { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; }
.quiz-head .s { color: #8ea1c6; font-size: 14.5px; margin-top: 4px; }
.quiz-bar { height: 4px; background: rgba(255,255,255,.12); border-radius: 4px; margin-top: 16px; overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--sky)); transition: width .35s ease; }
.quiz-body { padding: 28px; }
.quiz-q { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; margin-bottom: 18px; }
.quiz-a { display: grid; gap: 10px; }
.quiz-a button {
  text-align: left; padding: 15px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; font: inherit; font-size: 15.5px; color: #0f172a; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.quiz-a button:hover { border-color: var(--brand); background: var(--brand-light); transform: translateX(3px); }
.quiz-step { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.quiz-result { text-align: center; }
.quiz-score {
  font-family: var(--font-display); font-weight: 800; font-size: 62px; line-height: 1;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.quiz-score.low { color: #b91c1c; }
.quiz-score.mid { color: #b45309; }
.quiz-score.high { color: var(--brand); }
.quiz-verdict { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 12px 0 6px; letter-spacing: -.03em; }
.quiz-list { list-style: none; padding: 0; margin: 18px auto 22px; max-width: 520px; text-align: left; }
.quiz-list li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; background: var(--bg-soft); margin: 8px 0; font-size: 15px; }
.quiz-list li::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 12px; display: grid; place-items: center; margin-top: 2px; }
.quiz-list li.ok::before { content: "✓"; background: #dbeafe; color: var(--brand-dark); }

/* ═══ Лепкава лента с CTA ════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10,17,34,.96); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(110%); transition: transform .3s ease;
}
.sticky-cta.on { transform: none; }
.sticky-cta .txt { color: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.sticky-cta .txt small { display: block; color: #8ea1c6; font-weight: 500; font-size: 12.5px; }
.sticky-cta .btn { margin: 0; padding: 12px 20px; font-size: 14.5px; white-space: nowrap; }
@media (min-width: 861px) { .sticky-cta { display: none; } }

/* ═══ Появяване при скрол ════════════════════════════════════════════════
   Скриваме само ако seo.js се е заредил и е сложил .has-js на <html>. Ако
   скриптът блокира или не се зареди, съдържанието си остава видимо. */
.has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.has-js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .has-js .reveal { opacity: 1; transform: none; }
  .gauge .ring { background: conic-gradient(var(--sky) 98%, rgba(255,255,255,.09) 0); }
  .mock-row { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ═══ Дребни мобилни настройки ═══════════════════════════════════════════ */
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  /* Unbounded е много широк — на тесен екран дълга дума като „автоматизиране“
     не се побира и се чупи насред буквите, ако заглавието остане едро. */
  h1 { font-size: 29px; letter-spacing: -.035em; }
  h2 { font-size: 23px; }
  .page-hero { padding: 44px 0 48px; }
  .lead { font-size: 18px; }
  h2 { margin: 44px 0 14px; }
  .cta-band { padding: 40px 22px; border-radius: 20px; }
  .btn { width: 100%; }
  .btn-row { gap: 10px; }
  .sticky-cta .btn { width: auto; }
  .strip .wrap { gap: 10px 20px; }
}