/* Marketing pages only. Portals load aicloud.css plus their own layer.
   Published as site/assets/marketing.vN.css by site-src/build.mjs. */

/* Sticky, translucent, and blurred where the browser supports it. The header is
   the only navigation these pages have, so it should not scroll away. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
}
.site-head-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { color: var(--ink-muted); font-size: 14px; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); }
.site-nav a.lang { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; }
.site-nav a.btn { color: var(--accent-ink); }

/* ── the menu disclosure ──────────────────────────────────────────────
   Above 900px the hamburger is not rendered at all and the nav sits in the
   header bar exactly as it always did. Below it, the nav becomes a panel that
   the <details> next to it opens. No JavaScript is involved at either size. */
.menu { display: none; }
@media (max-width: 900px) {
  .menu { display: block; }
  .menu > summary {
    display: grid; place-items: center; list-style: none; cursor: pointer;
    width: 42px; height: 42px; border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--ink); background: var(--surface);
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary svg { width: 22px; height: 22px; }
  .menu[open] > summary { background: var(--surface-raised); border-color: var(--brand-200); }

  .site-nav { display: none; }
  .menu[open] ~ .site-nav {
    position: absolute; right: var(--space-5); top: calc(100% + 6px); z-index: 30;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
    min-width: 236px; padding: var(--space-3);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  }
  .site-nav a { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.3; }
  .site-nav a:hover { background: var(--surface-raised); text-decoration: none; }
  .site-nav a.lang { align-self: flex-start; }
  .site-nav a.btn { justify-content: center; margin-top: var(--space-1); }
}

/* ── hero ─────────────────────────────────────────────────────────────
   The wash is a pair of soft radial tints in the logo's own cyan and blue,
   not the full gradient: white paper with light falling on it, which is what
   the printed banner looks like. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-8) 0 var(--space-8); text-align: center;
}
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 150%; z-index: -1;
  background:
    radial-gradient(52% 60% at 22% 0%, color-mix(in srgb, var(--brand-300) 22%, transparent), transparent 70%),
    radial-gradient(46% 58% at 82% 8%, color-mix(in srgb, var(--brand-500) 18%, transparent), transparent 70%);
}
/* ── светлината над героя се движи ────────────────────────────────────
   Три петна в цветовете на логото, които бавно се разминават. Не е нов фон:
   `.hero::before` отгоре си остава и е това, което се вижда неподвижно — тук се
   добавя само движението, върху него.

   ДВИЖИ СЕ САМО `transform`, никога самият градиент. Преначертаването на
   радиален градиент на всеки кадър е работа за процесора и на телефон личи
   веднага; преместването на вече нарисуван слой се случва в графичната карта.
   По същата причина петната са с мек край от самия градиент, а не с `filter:
   blur()` — размазването на площ от половин екран струва повече от всичко
   останало на страницата, взето заедно.

   Осемдесет и осем на сто от посетителите идват от Facebook, тоест от телефон.
   Затова слоят е три елемента, а не десет, и се върти бавно: това е фон, който
   се забелязва, ако човек се загледа, а не нещо, което дърпа окото от текста. */
/* Появата стои на РОДИТЕЛЯ, а обиколката — на децата.
   Иначе двете се бият: анимации на един елемент не се сливат, а по-късната в
   списъка печели общото свойство. Вдигнати на различни елементи, прозрачността
   на родителя просто умножава тази на децата и всяка си върши своето. */
.hero-aurora {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: 0;
}
.hero-aurora i {
  position: absolute; display: block; border-radius: 50%;
  /* Прозрачно към края: така трите се преливат едно в друго, вместо да се
     виждат три кръга. */
  background: radial-gradient(circle at 50% 50%, var(--glow), transparent 68%);
  will-change: transform, opacity;
}
/* Наситеността е за БЯЛА хартия: под 40% цветовете се разтварят в белия фон и
   отдалеч страницата изглежда неподвижна, каквото и да прави слоят. */
.hero-aurora i:nth-child(1) {
  --glow: color-mix(in srgb, var(--brand-300) 62%, transparent);
  width: 82vw; height: 82vw; max-width: 940px; max-height: 940px;
  top: -32%; left: -16%;
}
.hero-aurora i:nth-child(2) {
  --glow: color-mix(in srgb, var(--brand-500) 44%, transparent);
  width: 70vw; height: 70vw; max-width: 820px; max-height: 820px;
  top: -20%; right: -14%;
}
/* Това минава под текста, затова е най-светлото от трите (brand-200 е почти
   бяло): под заглавие в тъмно мастило не бива да застава наситен цвят. */
.hero-aurora i:nth-child(3) {
  --glow: color-mix(in srgb, var(--brand-200) 88%, transparent);
  width: 64vw; height: 64vw; max-width: 740px; max-height: 740px;
  bottom: -38%; left: 30%;
}

/* Движението личи чак когато има какво да се види за секунда-две. Обиколка от
   половин минута с размах седем на сто мести по няколко пиксела в секунда —
   математически се движи, на око стои. Оттам идват и трите промени: по-голям
   размах, по-къса обиколка и по-наситен цвят.

   Изключено ли е движението — героят е точно това, което беше: неподвижната
   шарка на `::before`, без нищо отгоре. */
@media (prefers-reduced-motion: no-preference) {
  .hero-aurora { animation: aurora-in 1.2s ease-out both; }
  .hero-aurora i { animation: aurora-drift 1s ease-in-out infinite; }
  .hero-aurora i:nth-child(1) { animation-duration: 17s; }
  .hero-aurora i:nth-child(2) { animation-duration: 23s; animation-delay: -9s; }
  .hero-aurora i:nth-child(3) { animation-duration: 13s; animation-delay: -5s; }
}

@keyframes aurora-in { from { opacity: 0; } to { opacity: 1; } }

/* Осморка, не кръг: кръгът се разпознава като въртене след втората обиколка.
   Прозрачността диша заедно с движението — това е, което кара едно петно да
   изглежда като светлина, а не като преместено петно. */
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  25%  { transform: translate3d(9%, 7%, 0) scale(1.18); opacity: 1; }
  50%  { transform: translate3d(15%, -5%, 0) scale(1.02); opacity: .8; }
  75%  { transform: translate3d(5%, -9%, 0) scale(1.14); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
}

/* A hairline of the brand gradient closes the section, so the hero ends on the
   logo's colours rather than on a grey rule. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gradient); opacity: .9;
}
.hero h1 { max-width: 20ch; margin-inline: auto; }
/* На телефон между менюто и значката „Създадено в България“ оставаха 72px бяло —
   повече от самата значка, и заглавието започваше под сгъвката. Горното поле пада
   до 24px; долното остава, то дели героя от следващия блок. */
@media (max-width: 640px) { .hero { padding-top: var(--space-5); } }

/* "Създадено в България" — the strongest differentiator on the banner, so it
   opens the page rather than hides in the footer. The flag is drawn in CSS:
   three bands, no request, and it cannot arrive after the text. */
.made-in {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 14px 5px 6px; margin-bottom: var(--space-5);
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted);
}
.made-in .flag {
  width: 22px; height: 15px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(#fff 0 33.34%, #00966E 33.34% 66.67%, #D62612 66.67%);
  box-shadow: inset 0 0 0 1px rgba(1, 20, 59, .12);
}

.eyebrow { color: var(--accent); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-4); }

/* ── the hero kicker types itself in ──────────────────────────────────
   Only the home hero, and only where the line does not wrap: the reveal is a
   left-to-right clip, so across two lines it would uncover both at once and
   read as a wipe rather than as typing. The kicker still fits on one line at
   560px, but edge to edge with nothing to spare — 640px is the first width
   where it has room. Narrower than that the text is simply there.

   The caret sits on .type rather than inside the clipped span, because a bar
   drawn inside would be cut off by the very edge it is meant to mark. */
.hero .eyebrow { font-size: 16px; font-weight: 600; }
.hero .eyebrow .type { position: relative; display: inline-block; }

@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hero .eyebrow .type {
    --type-step: 42ms;
    --type-start: .45s;
    --type-run: calc(var(--n) * var(--type-step));
  }
  .hero .eyebrow .type > span {
    display: inline-block; white-space: nowrap;
    animation-name: type-in;
    animation-duration: var(--type-run);
    animation-timing-function: steps(var(--n));
    animation-delay: var(--type-start);
    animation-fill-mode: both;
  }
  .hero .eyebrow .type::after {
    content: ''; position: absolute; top: .12em; bottom: .12em; left: 0;
    width: 2px; background: currentColor;
    /* Solid while it types, then seven blinks and gone — a caret that never
       stops blinking keeps pulling the eye away from the headline. */
    animation-name: type-caret, caret-blink;
    animation-duration: var(--type-run), .7s;
    animation-timing-function: steps(var(--n)), steps(1, end);
    animation-delay: var(--type-start), calc(var(--type-start) + var(--type-run));
    animation-iteration-count: 1, 7;
    animation-fill-mode: both, forwards;
  }
}
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes type-caret { from { left: 0; } to { left: 100%; } }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hero .lead { color: var(--ink-muted); font-size: 18px; margin: var(--space-5) auto 0; }
.hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.btn.lg { padding: 15px 30px; font-size: 17px; border-radius: var(--radius-lg); }

/* ── прозорчето за задание ────────────────────────────────────────────
   Кутията на портала, извадена пред входа: същата хартия, същият радиус и
   същият надпис, който човек ще види вътре. Изреченията се сменят сами
   (assets/prompt.js), затова височината на реда е ЗАКОВАНА за два реда — иначе
   всяко изтриване би вдигало бутона под нея с половин ред нагоре и надолу,
   а той е това, което искаме да натиснат.

   Сиянието е `::before` с брандовия градиент под белия фон: отрицателният
   z-index го оставя зад кутията, но пред секцията, защото `.pd-box` не отваря
   собствен контекст на наслагване. Същият градиент, който е в бутона — не втори
   цвят, измислен тук. */
.prompt-demo { max-width: 560px; margin: var(--space-6) auto 0; }
.pd-box {
  position: relative; text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.pd-box::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; background: var(--gradient);
  opacity: .5; filter: blur(9px);
}
.pd-line { margin: 0; min-height: 3.2em; font-size: 17px; line-height: 1.6; color: var(--ink); }
@media (max-width: 420px) { .pd-line { min-height: 4.8em; font-size: 16px; } }

/* Курсорът се появява само когато скриптът наистина пише. Без JavaScript в
   кутията стои първото изречение и мига под него би било лъжа. */
.pd-caret { display: none; }
.prompt-demo.is-live .pd-caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 2px;
  vertical-align: -.2em; background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .prompt-demo.is-live .pd-caret { animation: caret-blink 1s steps(1, end) infinite; }
  .pd-box::before { animation: pd-glow 6s var(--ease) infinite; }
}
@keyframes pd-glow { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }

.pd-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-3);
}
.pd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-raised);
  font-size: 13px; font-weight: 600; color: var(--ink-muted);
}
.pd-chip svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--brand-300); }
.pd-send {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm);
}
.pd-send svg { width: 19px; height: 19px; }
.pd-send:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); text-decoration: none; }

/* ── the six promises off the banner ──────────────────────────────────
   auto-fit rather than a fixed count, so the row is 6 / 3 / 2 wide with no
   breakpoints at all: the grid picks whatever fits. */
/* Неподвижната наредба е ОСНОВАТА, а не резервният вариант.
   Тя е това, което вижда браузър без поддръжка и човек, изключил движението:
   същата решетка, която стоеше тук досега. Движението се добавя отдолу, в
   заявката за движение, и само тогава второто копие излиза от скривалището. */
.features {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.feature-dup { display: none; }
.feature {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-3); text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink);
}
.feature .ico {
  width: 30px; height: 30px; padding: 9px; box-sizing: content-box;
  border-radius: var(--radius); color: var(--accent-ink);
  background: var(--gradient); box-shadow: var(--shadow-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .feature { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ── лентата с обещанията тръгва ──────────────────────────────────────
   Плочките минават бавно отдясно наляво, без спиране.

   РАЗСТОЯНИЕТО Е `margin-right`, НЕ `gap`. С `gap` дванайсетте плочки имат
   единайсет междини, тоест половината от дължината не е точно една редица —
   къса е с половин междина — и всяка обиколка подскача с толкова. С поле
   отдясно всяка плочка заема ширина плюс междина, шестте правят точно половината
   и шевът не съществува.

   Движи се `transform` на пътеката, а не положението на плочките: един слой се
   мести в графичната карта, вместо дванайсет кутии да се преначертават. */
.features-track { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* Краищата чезнат, вместо да режат: плочка, отрязана по средата на рамката
     си, изглежда като край на страницата, а не като продължение. */
  .features-track {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .features {
    display: flex; gap: 0; width: max-content;
    animation: features-roll 46s linear infinite;
    will-change: transform;
  }
  .feature, .feature-dup {
    display: flex;
    flex: 0 0 auto; width: 190px; margin-right: var(--space-3);
  }
  /* Спира под мишката: който е посегнал към плочка, я чете, а не я гони. */
  .features-track:hover .features { animation-play-state: paused; }
}

@keyframes features-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* The templates emit their sections as bare siblings inside <main> with no
   margins of their own, so the rhythm between them is declared once, here,
   instead of by every block that might ever follow another.
   `:not(:first-child)` rather than the obvious `* + *`: almost every one of
   these sections carries `.wrap`, whose `margin: 0 auto` outranks a selector
   made of universal selectors and would win. */
main > *:not(:first-child) { margin-top: var(--space-7); }

/* Inner pages: a narrower opening than the home hero, left aligned. The tint
   is the hero's wash at a fraction of the strength — enough that an inner page
   is recognisably the same site, not enough to compete with the text. */
.page-head { position: relative; isolation: isolate; padding: var(--space-6) var(--space-5) 0; }
/* `pointer-events: none` is load-bearing, not tidiness. The glow reaches 140px
   above its own section, which is exactly where the breadcrumbs sit, and
   .page-head is positioned while the crumb <nav> is not — so the decoration
   paints over the links and swallowed every click on them. */
.page-head::before {
  content: ""; position: absolute; inset: -140px 0 auto; height: 420px; z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 70% at 12% 0%, color-mix(in srgb, var(--brand-300) 13%, transparent), transparent 68%);
}
.page-head .lead { color: var(--ink-muted); font-size: 18px; }

.stack-lg > * + * { margin-top: var(--space-7); }
.block > * + * { margin-top: var(--space-4); }

.points { margin: 0; padding-left: var(--space-5); color: var(--ink-muted); max-width: var(--measure); }
/* `.points { margin: 0 }` and `.block > * + *` have the same specificity, and
   this file loads second — so the list would sit flush against the paragraph
   above it. Re-stating the gap here, on a selector that outranks both. */
.points:not(:first-child) { margin-top: var(--space-4); }
.points li + li { margin-top: var(--space-2); }
.points li::marker { color: var(--accent); }

/* Hub cards. A card without a page is drawn as an <article class="soon">: it
   must not look clickable, because CloudFront answers 200 for unbuilt paths. */
a.card { display: block; color: inherit; }
a.card:hover { border-color: var(--accent); text-decoration: none; }
a.card h3 { color: var(--ink); }
.card.soon { opacity: .6; }

/* The lift is on the card, not only on links: the home cards are <article> and
   should answer the pointer too. Scoped to cards inside a grid, so the form
   card and the company fact sheet — which are the page, not a choice on it —
   stay still. */
@media (prefers-reduced-motion: no-preference) {
  .grid > .card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease); }
}
.grid > .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.grid > .card.soon:hover { transform: none; box-shadow: var(--shadow-sm); }

/* The two routes to a finished system. The recommended one is marked by a
   warmer surface only — not by size and not by a ribbon: both routes end at the
   same system, and a card drawn bigger reads as a plan being sold. */
.track .track-note { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.track h3 { font-size: 21px; }
.card.track.featured { border-color: var(--brand-200); background: var(--surface-raised); }

.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list li {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-muted); font-size: 14px; font-weight: 500;
  background: var(--surface); box-shadow: var(--shadow-sm);
}

/* Flex with an auto margin on the button, so the three "Заредете кредити"
   buttons line up along the bottom however long the note above them runs.
   The stack margins are dropped in favour of a gap, which the auto margin
   cannot cancel. */
/* The shared auto-fit track has a 260px minimum, which at shell width fits three
   — so the fourth pack drops onto a row of its own and reads as an afterthought.
   The price grid therefore counts its columns instead of measuring them: four
   across while they stay legible, then two by two, then one. */
@media (min-width: 1000px) { .grid[data-prices] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 999.98px) { .grid[data-prices] { grid-template-columns: repeat(2, 1fr); } }

.price { display: flex; flex-direction: column; gap: var(--space-4); text-align: center; }
.price.stack > * + * { margin-top: 0; }
.price .btn { width: 100%; margin-top: auto; }
.price-tag { font-size: 15px; color: var(--ink-muted); }
.price-tag b {
  font-family: var(--font-display);
  font-size: 46px; color: var(--ink); font-weight: 800; letter-spacing: -.04em;
}

/* Written by promo.js only while a campaign runs; the band starts out hidden. */
.promo-band {
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  text-align: center; font-weight: 600;
}
/* One line per running campaign — they are aimed at different packs and each
   carries its own deadline, so they are listed, not merged. */
.promo-line { display: block; }
.promo-line + .promo-line { margin-top: var(--space-2); }
/* Tabular figures: without them the seconds change width every tick and the
   whole line jitters once a second. */
.promo-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.promo-band .promo-clock { opacity: .8; }
/* Подаръкът, на свой ред под кредитите на пакета — със същия цвят и размер,
   с които портала го изписва (app/src/styles/app.css, .notice). */
.promo-bonus { color: var(--ok); font-size: 14px; }
.promo-was { color: var(--ink-muted); font-size: 24px; font-weight: 500; margin-right: 6px; }
.promo-plus { color: var(--ok); }

.qa-list { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.qa { border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; }
/* The default triangle is replaced by a chevron that rotates, which is the
   one thing the marker cannot be made to do. */
.qa summary {
  display: flex; align-items: center; gap: var(--space-4); list-style: none;
  padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 600;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
}
.qa summary:hover { background: var(--surface-raised); }
.qa[open] summary { color: var(--accent); }
.qa[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
  .qa summary::after { transition: transform var(--dur) var(--ease); }
}
.qa > p { padding: 0 var(--space-5) var(--space-5); }

/* The one place the full logo gradient is used at size. Everything inside
   inverts, including the button, which flips to white-on-brand so it is still
   the loudest thing in the band. */
.cta-band {
  background: var(--gradient); border: 0; border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5); text-align: center;
  color: var(--accent-ink); box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: var(--accent-ink); }
.cta-band .muted { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); }
.cta-band .btn { background: var(--surface); color: var(--brand-700); }
.cta-band .btn:hover { background: var(--brand-100); box-shadow: var(--shadow-lg); }
.cta-band .measure { margin-left: auto; margin-right: auto; }

.facts { width: 100%; border-collapse: collapse; font-size: 15px; }
.facts th, .facts td { text-align: left; padding: var(--space-3) 0; border-top: 1px solid var(--line); vertical-align: top; }
.facts tr:first-child th, .facts tr:first-child td { border-top: 0; }
.facts th { color: var(--ink-muted); font-weight: 500; width: 42%; padding-right: var(--space-4); }

/* On a phone two columns leave the longest label ("седалище и адрес на
   управление") three lines tall next to a value that is just as tall. The rows
   stack instead: label above value, one row per fact. */
@media (max-width: 560px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
  .facts tr { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
  .facts tr:first-child { border-top: 0; padding-top: 0; }
  .facts th, .facts td { border-top: 0; padding: 0; }
  .facts th { margin-bottom: 2px; }
}

/* ── forms ───────────────────────────────────────────────────────────── */

.form-wrap form { max-width: 640px; margin: 0 auto; padding: var(--space-6); box-shadow: var(--shadow); }
.form-wrap form > .btn { width: 100%; padding-block: 14px; }
.field textarea { resize: vertical; }
/* The required marker. <i> rather than a colour on the whole label, so the
   asterisk is what carries the meaning and the label stays readable. */
.field i { color: var(--danger); font-style: normal; }
/* aicloud.css stretches every control to 100%, which is right for text inputs
   and wrong for a tick box. */
input[type="checkbox"], input[type="radio"] { width: auto; }

/* The honeypot, hidden with CSS rather than type=hidden — the type bots skip.
   Off-screen rather than display:none, which some fill-anything bots respect. */
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; color: var(--ink-muted); }
.consent input { margin-top: 3px; flex: 0 0 auto; }

.form-status { font-size: 14px; margin: 0; min-height: 1em; }
.form-status.bad { color: var(--danger); }
button[data-busy] { opacity: .6; cursor: progress; }

.form-done { max-width: 640px; margin: 0 auto; text-align: center; }

/* ── credit calculator (home + /pricing/) ────────────────────────────── */

/* One centred column: the heading, the lead and the form share a width and a
   left edge, so the block reads as one thing instead of a narrow box parked at
   the left of a full-width title. The text inside stays left — a centred label
   above a text field is harder to read, not prettier. */
.estimator, #calculator > h2, #calculator > p { max-width: 720px; margin-inline: auto; }
.estimator { padding: var(--space-6); box-shadow: var(--shadow); }

/* Същият светещ кант като на прозорчето за задание в героя.
   Двете са едно и също нещо на две места: поле, в което човек пише със свои
   думи какво иска, и което се изписва само, докато той гледа. Кутията горе го
   казва с вида си; калкулаторът досега изглеждаше като обикновена форма и
   връзката между двете не се четеше.

   `::before` под самата карта, не рамка: рамка би изместила съдържанието с един
   пиксел и би се борила с `border` на `.card`. `inset: -1px` слага светлината
   точно под ръба, а `z-index: -1` я държи зад бялата хартия — затова `.card`
   трябва да е `relative` и да НЕ отваря собствен контекст на наслагване. */
.estimator { position: relative; }
.estimator::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; background: var(--gradient);
  opacity: .5; filter: blur(9px);
}
/* Диша със същите шест секунди и същите стойности като горната: два еднакви на
   вид елемента, които пулсират различно, изглеждат като грешка. */
@media (prefers-reduced-motion: no-preference) {
  .estimator::before { animation: pd-glow 6s var(--ease) infinite; }
}
.estimator > .btn { align-self: flex-start; }

/* Empty until an answer arrives, and hidden while empty — a bordered box with
   nothing in it reads as something that failed to load. */
.estimate-out {
  border-top: 1px solid var(--line); padding-top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.estimate-title { font-weight: 600; margin: 0; }
.estimate-figure {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; margin: 0;
}
.estimate-out p { margin: 0; }
.estimate-assumptions { margin: 0; padding-left: 1.1em; color: var(--ink-muted); font-size: 14px; }
.estimate-assumptions li { margin-top: 2px; }

.qgroup { border: 0; border-top: 1px solid var(--line); margin: 0; padding: var(--space-5) 0 0; }
/* A legend is painted in the fieldset's top border by default, which puts the
   question text straight through the rule above it. Floating it takes it out of
   that slot and back into normal flow, below the border and the padding. */
.qgroup legend { float: left; width: 100%; font-weight: 600; padding: 0; }
.qgroup .faint { clear: both; margin: var(--space-2) 0 var(--space-3); }
.choice { display: flex; gap: var(--space-3); align-items: center; padding: 7px 0; cursor: pointer; }
/* The browser default is 13px, which is a poor target on a phone. accent-color
   is already set on :root, so the checked state is brand blue for free. */
.choice input { flex: 0 0 auto; width: 18px; height: 18px; }

.readiness-result { border-top: 1px solid var(--line); padding-top: var(--space-5); text-align: left; }
.score { font-size: 15px; color: var(--ink-muted); }
.score b { font-size: 40px; color: var(--accent); font-weight: 700; letter-spacing: -.03em; }

.legal .block h2 { font-size: 22px; }
.legal .points li { margin-bottom: var(--space-2); }
/* Loud on purpose. A draft clause that reads as final is the one thing this
   page must not do, so the banner is not a subtle grey note. */
.legal-draft {
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn); font-size: 14px; font-weight: 600;
  margin: 0; padding: var(--space-3) var(--space-4);
}

/* The separator is generated, so it is never selected by a copy of the text. */
.crumbs { padding-top: var(--space-5); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; font-size: 14px; }
.crumbs li + li::before { content: "/"; color: var(--line); margin-right: var(--space-3); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-muted); }

/* ── entrance ─────────────────────────────────────────────────────────
   Scroll-driven, with zero JavaScript: `animation-timeline: view()` ties the
   animation to the element's own trip through the viewport. The whole block is
   behind @supports, so a browser without it simply shows the content — which
   is the correct fallback and the reason no IntersectionObserver is loaded. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    /* The hero is already on screen when the page loads, so it has no trip to
       animate along — it gets a plain one-shot instead. */
    .hero > .wrap > * { animation: reveal-in var(--dur-slow) var(--ease-out) both; }
    /* Every delay repeats the full `.hero > .wrap >` path rather than being
       written as `.hero h1`, and that is not tidiness. `animation` above is a
       shorthand, so it resets animation-delay to 0 on everything it matches —
       and it matches at two classes. Written short, `.hero h1` and `.hero-cta`
       sit below that and lose the cascade outright: they ran with no delay at
       all, and the staggered hero was quietly entering four steps, not six.
       Spelled out, each of the five outranks the shorthand. */
    .hero > .wrap > .made-in { animation-delay: 0s; }
    .hero > .wrap > .eyebrow { animation-delay: .05s; }
    .hero > .wrap > h1 { animation-delay: .1s; }
    .hero > .wrap > .lead { animation-delay: .16s; }
    .hero > .wrap > .prompt-demo { animation-delay: .22s; }
    .hero > .wrap > .hero-cta { animation-delay: .28s; }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ── Новини ──────────────────────────────────────────────────────────────
   Списъкът е решетка от карти, всяка водеща към своя страница. Съдържанието
   идва от базата при пускането на сайта, затова всичко тук трябва да изглежда
   еднакво добре с една статия и с тридесет, със снимка и без снимка. */
.news-grid {
  display: grid; gap: var(--space-5);
  /* auto-fit, а не auto-fill: с две статии редът се запълва, вместо да остави
     празна трета колона, която изглежда като нещо, което не се е заредило. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Цялата карта е връзка, а не заглавието в нея: на телефон разликата между
   попадение и промъкване е няколко пиксела. */
.news-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.news-card:hover, .news-card:focus-visible {
  border-color: var(--brand-200); transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(1, 20, 59, .08));
  text-decoration: none;
}
/* Ръбът на фокуса е върху цялата карта, защото цялата карта е целта. */
.news-card:focus-visible { outline: 2px solid var(--brand-500, #026eed); outline-offset: 2px; }

/* Плочката е с фиксирано съотношение, за да не подскачат редовете на решетката
   при зареждане — но снимката вътре се ПОБИРА, не се реже.
   
   Снимките се качват от панела и са каквито ги е направил човекът; при нас две
   от четирите са квадратни. Дотук тук стоеше `object-fit: cover` върху 16:9,
   тоест квадратната губеше 44% от височината си — по 22 отгоре и отдолу. А
   тези снимки са афиши: горе е логото, долу е бутонът, и точно те падаха.
   
   4:3, а не 16:9: квадратът остава по-едър, а широката снимка почти запълва. */
.news-card-image {
  display: block; background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.news-card-image img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: contain;
}

.news-card-text {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); flex: 1;
}
.news-card-date { color: var(--ink-faint); font-size: 13px; }
.news-card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
}
.news-card-summary { color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
/* Бута се надолу, за да стои на едно ниво във всички карти, независимо колко
   дълго е резюмето. */
.news-card-more { margin-top: auto; padding-top: var(--space-2); color: var(--brand-600, #026eed); font-weight: 600; font-size: 14px; }
.news-card:hover .news-card-more { text-decoration: underline; }

/* ── Страницата на една статия ─────────────────────────────────────────── */
.news-article {
  display: flex; flex-direction: column; gap: var(--space-6);
  /* Шрифтът стои ТУК, а не само на тялото, защото `--measure` е в `ch` — а `ch`
     се смята спрямо шрифта на елемента, който го ползва. Останеше ли 17px само
     на текста, снимката щеше да мери същите 68ch с друг шрифт и да свърши с
     няколко пиксела разлика: подравняване, което почти съвпада, личи повече от
     явно центрирана снимка. */
  font-size: 17px;
}
/* На страницата на статията снимката се показва ЦЯЛА: тук няма решетка, която
   да се подравнява, и няма причина да се реже каквото и да е. Мястото се пази
   от истинските `width`/`height` в етикета (blocks.mjs), а не от наложено
   съотношение — затова текстът не подскача, докато тя се зарежда. */
/* Подравнена с текста, не центрирана.
   Статията е `.wrap` (широка), а тялото ѝ е `.measure` (тясна колона за четене).
   Снимка, центрирана в широкото, застава с левия си край навътре спрямо първия
   ред текст под нея и същевременно излиза вдясно отвъд него — две несъвпадения
   наведнъж. Затова се държи в същата колона и започва от същия ляв край. */
.news-article-image {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  /* ТОЧНО колкото е текстът под нея, не „до толкова“. С `fit-content` ширината
     идваше от снимката и съвпадаше с колоната само по случайност — квадратна
     снимка, опряла в таван по височина, свършваше няколко десетки пиксела
     по-рано и оставяше стъпало вдясно. Подравняване, което почти съвпада, личи
     повече от явно центрирана снимка. */
  width: min(100%, var(--measure));
}
/* Пълни рамката, а тя е широка колкото текста. Таванът по височина отпадна
   заедно с центрирането: той пазеше от квадрат, разпънат по ширината на ЦЯЛАТА
   страница, а тук ширината е тази на колоната за четене — квадратна снимка
   излиза висока колкото нея, което е обичайна снимка към статия. Съотношението
   се пази; нищо не се реже. */
.news-article-image img {
  display: block; width: 100%; height: auto;
}
/* Снимката може и да води някъде — връзката се набира от панела и се отваря в
   нов таб. Блок, а не ред: инлайн връзка около блокова снимка оставя под нея
   празен ред от подравняването по базовата линия. Подчертаване няма какво да
   подчертае, а лекото просветляване казва, че тук се натиска. */
.news-article-image a { display: block; line-height: 0; text-decoration: none; }
.news-article-image a:hover { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .news-article-image img { transition: opacity var(--dur) var(--ease); }
}
.news-article-image a:hover img { opacity: .9; }

.news-meta { margin: 0; color: var(--ink-faint); font-size: 15px; }

/* Тялото идва като готов HTML от сървъра, така че тук се оформят етикетите, а
   не класове — те не съществуват в него нарочно. */
.news-body { display: flex; flex-direction: column; gap: var(--space-4); line-height: 1.7; }
.news-body > :first-child { margin-top: 0; }
.news-body p, .news-body ul, .news-body ol { margin: 0; }
.news-body h3 { margin: var(--space-3) 0 0; font-size: 20px; font-family: var(--font-display); letter-spacing: -.01em; }
.news-body ul, .news-body ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.news-body strong { color: var(--ink); }

.news-back { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 16px; }

.site-foot { border-top: 1px solid var(--line); margin-top: var(--space-8); padding: var(--space-6) 0 var(--space-7); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.foot-nav a { color: var(--ink-muted); font-size: 14px; }
.foot-nav a:hover { color: var(--ink); }

/* Иконките на профилите. Кръгчето е с размера, който пръст улучва (38px), и
   стои в приглушения цвят на футъра, докато мишката не го вземе — тогава става
   плътно синьо, както бутоните. Знакът е SVG в currentColor, тоест наследява и
   двете състояния, без второ правило за него. */
.foot-social { display: flex; gap: var(--space-3); margin: 0; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-muted);
}
.foot-social svg { width: 19px; height: 19px; display: block; }
.foot-social a:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .foot-social a { transition: color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out); }
}

/* ---------------------------------------------------------------- docs --
 * Страницата с документация. Различава се от правните страници по двете
 * неща, които прозата не побира: блокове с код и таблица.
 *
 * Кодът е с моноширинен шрифт от системата — нито един байт нов шрифт заради
 * една страница. Превърта се хоризонтално, вместо да се пренася: пренесен ред
 * от команда е команда, която не се копира вярно.
 */
.docs-toc {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: var(--measure);
}
.docs-toc ol {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  color: var(--ink-muted);
  font-size: 15px;
}
.docs-toc li + li { margin-top: var(--space-2); }
.docs-toc li::marker { color: var(--accent); }
.docs-toc a { color: inherit; }
.docs-toc a:hover { color: var(--accent); }

.docs .block h2 { font-size: 22px; scroll-margin-top: var(--space-7); }

.code { margin: 0; }
.code figcaption {
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}
.code pre {
  margin: 0;
  overflow-x: auto;
  padding: var(--space-4);
  background: var(--brand-900);
  color: #E6EEFB;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}
.code code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  white-space: pre;
}
.block > .code + .code { margin-top: var(--space-3); }

/* Таблицата се превърта в своя кутия, а не разпъва страницата на телефон. */
.table-scroll { overflow-x: auto; }
.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
}
.docs-table th, .docs-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.docs-table thead th {
  border-top: 0;
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
}
.docs-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Малко повече въздух пред блок с код: етикетът му е дребен и залепен за
   изречението отгоре се чете като част от него, а не като заглавие на кода. */
.block > * + .code { margin-top: var(--space-5); }

/* ── светлината зад вътрешните страници ───────────────────────────────
   Същият слой като в героя и в портала, със същите настройки като в портала:
   тук се чете. „Цени“ е таблица, „Общи условия“ е дълъг текст, статия е дълъг
   текст със снимка — зад тях цветът е шум, а не ефект.

   Закован е към прозореца, а не към страницата: тези страници се скролват дълго
   и фон, който пътува с текста, се превръща в шарка, минаваща под абзаца.

   Началната страница го няма — там слоят стои в самия герой, по-наситен и
   по-едър (виж `.hero-aurora`). Вътрешните си имат и своя лек отблясък над
   заглавието (`.page-head::before`); този тук е под цялата страница и двата се
   събират меко, защото и двата са прозрачни към краищата. */
.page-aurora {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: 0;
}
.page-aurora i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glow), transparent 68%);
  will-change: transform, opacity;
}
.page-aurora i:nth-child(1) {
  --glow: color-mix(in srgb, var(--brand-300) 22%, transparent);
  width: 70vw; height: 70vw; max-width: 820px; max-height: 820px;
  top: -26%; left: -18%;
}
.page-aurora i:nth-child(2) {
  --glow: color-mix(in srgb, var(--brand-500) 15%, transparent);
  width: 62vw; height: 62vw; max-width: 740px; max-height: 740px;
  top: -18%; right: -16%;
}
.page-aurora i:nth-child(3) {
  --glow: color-mix(in srgb, var(--brand-200) 40%, transparent);
  width: 58vw; height: 58vw; max-width: 700px; max-height: 700px;
  bottom: -34%; left: 26%;
}

@media (prefers-reduced-motion: no-preference) {
  .page-aurora { animation: aurora-in 1.2s ease-out both; }
  .page-aurora i { animation: aurora-drift 1s ease-in-out infinite; }
  .page-aurora i:nth-child(1) { animation-duration: 17s; }
  .page-aurora i:nth-child(2) { animation-duration: 23s; animation-delay: -9s; }
  .page-aurora i:nth-child(3) { animation-duration: 13s; animation-delay: -5s; }
}