/* 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%);
}
/* 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; }

/* "Създадено в България" — 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); }

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

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

.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; }
    .hero .made-in { animation-delay: 0s; }
    .hero .eyebrow { animation-delay: .05s; }
    .hero h1 { animation-delay: .1s; }
    .hero .lead { animation-delay: .16s; }
    .hero-cta { animation-delay: .22s; }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

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