/* 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()` — размазването на площ от половин екран струва повече от всичко
   останало на страницата, взето заедно.

   Слоят е три елемента, а не десет, и се върти бавно: това е фон, който се
   забелязва, ако човек се загледа, а не нещо, което дърпа окото от текста. */
/* Появата стои на РОДИТЕЛЯ, а обиколката — на децата.
   Иначе двете се бият: анимации на един елемент не се сливат, а по-късната в
   списъка печели общото свойство. Вдигнати на различни елементи, прозрачността
   на родителя просто умножава тази на децата и всяка си върши своето. */
.hero-aurora {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: 1;
}
.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%;
}

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

   Върви винаги, без заявка за движение: заявките в този файл са разгънати по
   решение на собственика — обяснението е при общия изключвател в aicloud.css.
   Затова и `opacity` на слоя горе е 1, а не 0: `aurora-in` пак го изсветлява
   отначало, но ако анимацията някога не тръгне, фонът е на място, не изчезнал. */
.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; }
/* Героят вече носи и прозорчето за задание, тоест на телефон е с цял блок
   по-висок. Горното поле пада до 24px, за да остане заглавието над сгъвката;
   долното остава — то дели героя от следващия блок. */
@media (max-width: 640px) { .hero { padding-top: var(--space-5); } }

.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) {
  .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);
}
/* Полето е самата кутия, не поле В нея: без ръб, без свой фон и без свой фокус —
   иначе вътре в едно поле щеше да се вижда второ. Затова тук се отменя всичко,
   което aicloud.css дава на един textarea, а фокусът се рисува върху кутията. */
.pd-field {
  display: block; width: 100%; box-sizing: border-box; resize: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  min-height: 3.2em; font: inherit; font-size: 17px; line-height: 1.6; color: var(--ink);
}
.pd-field:hover, .pd-field:focus {
  border: 0; outline: none; box-shadow: none; background: transparent;
}
.pd-field::placeholder { color: var(--ink-faint); opacity: 1; }
.pd-box:focus-within { border-color: var(--accent); }
@media (max-width: 420px) { .pd-field { min-height: 4.8em; font-size: 16px; } }

.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; }

/* ── чат бутонът стои ВЪРХУ изпращането при тесен екран ────────────────
   Измерено на живо, на 375×812, върху изгледа, с който посетителят отваря
   сайта: `.akc-launch` (плаващ кръг 60 px, chat.js) заема 295–355 × 732–792,
   а `.pd-send` — 296–334 × 746–784. Тоест покритието е 38×38, целият бутон, и
   `document.elementFromPoint` в центъра му връща чат бутона. Основната покана
   на героя е недостъпна на телефон.

   Кръг, залепен за десния улей, не може да се размине с плаващ кръг в същия
   улей при никакво превъртане — затова се мести поканата, не чат бутонът. На
   тесен екран тя слиза на свой ред и минава през цялата кутия: чат бутонът
   покрива десния ѝ край, останалите ~260 px се натискат. Пътьом целта става
   44 px висока — минимумът по WCAG 2.5.5, който кръгът от 38 px не покриваше. */
@media (max-width: 560px) {
  .pd-bar { flex-wrap: wrap; }
  .pd-send { flex: 1 1 100%; width: auto; height: 44px; border-radius: 999px; }
}

/* ── 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 {
  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`, не преди него. Двете имат еднаква тежест, тоест решава редът:
   написано отгоре, скриването се отменяше от `display: flex` три реда по-долу и
   второто копие стоеше видимо — решетката излизаше с дванайсет плочки на два
   реда вместо с шест. Редът по-долу, който върти лентата, го изважда обратно;
   този тук пази основата, ако някой ден въртенето отпадне. */
.feature-dup { display: none; }
.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);
}
.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; }

/* Краищата чезнат, вместо да режат: плочка, отрязана по средата на рамката
   си, изглежда като край на страницата, а не като продължение. */
.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. */
.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); }
.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);
}
/* Диша със същите шест секунди и същите стойности като горната: два еднакви на
   вид елемента, които пулсират различно, изглеждат като грешка. */
.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()) {
  .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 > .eyebrow { animation-delay: 0s; }
  .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); }
/* На страницата на статията снимката се показва ЦЯЛА: тук няма решетка, която
   да се подравнява, и няма причина да се реже каквото и да е. Мястото се пази
   от истинските `width`/`height` в етикета (blocks.mjs), а не от наложено
   съотношение — затова текстът не подскача, докато тя се зарежда. */
.news-article-image {
  margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  /* Свива се до снимката, вместо да е широка колкото текста: иначе рамката стои
     на едно място, а снимката — на друго, по средата ѝ. */
  width: fit-content; max-width: 100%;
}
/* Височината е ограничена, а не ширината: квадратна снимка, разпъната по
   ширината на текста, става висока колкото целия екран и избутва статията под
   него. Съотношението се пази — нищо не се реже, само се смалява. */
.news-article-image img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 620px;
}

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

/* Тялото идва като готов HTML от сървъра, така че тук се оформят етикетите, а
   не класове — те не съществуват в него нарочно. */
.news-body { display: flex; flex-direction: column; gap: var(--space-4); font-size: 17px; 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); }

.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); }

/* ---------------------------------------------------------------- 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: 1;
}
.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%;
}

.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; }