/*
 * AICLOUD design system.
 *
 * Single source of truth for both the prerendered marketing pages and the
 * React portals, which is why it is a plain stylesheet rather than something
 * inside the Vite app: both link it directly, so a token change lands
 * everywhere without a rebuild.
 *
 * site-src/build.mjs publishes it as site/assets/aicloud.vN.css. The version
 * lives in site-src/assets.mjs, and app/index.html has to be updated by hand
 * whenever it moves — the build refuses to run otherwise.
 *
 * Every colour below was sampled out of the logo file, so the site and the
 * mark cannot drift apart.
 */

/* Cyrillic first: on a Bulgarian site it is the subset that always loads, and
   the browser fetches the Latin file only once a Latin glyph is actually
   needed. `swap` because a national platform must render text before it
   renders typography. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-cyrillic.v1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-cyrillic.v1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand ramp, straight off the logo: cyan of the "BG" plate, the blue of the
     "AI" wordmark, the navy the cloud sinks into. --brand-500 is the action
     colour; --brand-900 is also the text colour, so type and mark are one hue. */
  --brand-50: #F5F8FE;
  --brand-100: #EAF4FE;
  --brand-200: #CFE6FD;
  --brand-300: #06B9F6;
  --brand-500: #026EED;
  --brand-700: #0038B0;
  --brand-900: #01143B;

  --accent: var(--brand-500);
  --accent-hover: #0155C4;   /* darker on hover: on white, brighter reads weaker */
  --accent-ink: #ffffff;
  --accent-soft: var(--brand-100);

  --ink: #01143B;
  --ink-muted: #4A5C7A;
  --ink-faint: #7386A3;
  --line: #DCE6F5;

  --ok: #047857;
  --warn: #B45309;
  --danger: #DC2626;

  --page: #ffffff;
  --surface: #ffffff;
  --surface-raised: var(--brand-50);
  --sunken: var(--brand-50);

  --gradient: linear-gradient(135deg, #06B9F6 0%, #026EED 55%, #0038B0 100%);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* Layered rather than one big blur: a single heavy shadow that read as depth
     on the old navy reads as dirt on white. Tinted with the brand navy so the
     grey never goes neutral against the blues. */
  --shadow-sm: 0 1px 2px rgba(1, 20, 59, .06), 0 1px 3px rgba(1, 20, 59, .08);
  --shadow: 0 2px 4px rgba(1, 20, 59, .04), 0 8px 24px rgba(1, 20, 59, .08);
  --shadow-lg: 0 4px 8px rgba(1, 20, 59, .04), 0 20px 48px rgba(1, 20, 59, .12);
  --shadow-accent: 0 8px 24px rgba(2, 110, 237, .28);

  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', Arial, sans-serif;
  --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', 'Liberation Sans', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* One motion scale, so nothing in the site invents its own timing. */
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .45s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --measure: 68ch;
  --shell: 1120px;

  color-scheme: light;
  accent-color: var(--accent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Both faces ship Bulgarian localised Cyrillic (и→u, д→g, в→ʙ) and the
     browser switches to it on its own because the document is lang="bg". The
     printed logo and banner use the standard forms, so the site does too —
     one wordmark, one alphabet. */
  font-feature-settings: 'locl' 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.03em; }
h2 { font-size: clamp(24px, 2.8vw, 34px); }
h3 { font-size: 19px; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-5); }
.stack > * + * { margin-top: var(--space-4); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: 13px; }
.measure { max-width: var(--measure); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--accent-hover); text-decoration: none; box-shadow: var(--shadow-accent); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-raised); border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.btn.sm { padding: 7px 14px; font-size: 14px; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); box-shadow: none; }
.btn.danger:hover { background: var(--danger); color: #fff; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.field { display: block; }
.field > span { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 11px 13px; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--brand-200); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(2, 110, 237, .15);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); color: var(--ink-muted); background: var(--surface-raised);
}
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, #fff); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, #fff); }

.error { color: var(--danger); font-size: 14px; }

.grid { display: grid; gap: var(--space-4); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.center-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); }

/* The brand lockup: the mark ships as an image, the name stays live text so it
   is selectable, translatable, weightless and sharp at any zoom. The three
   colours are the three colours of the printed wordmark. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.brand-word {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -.025em; white-space: nowrap; line-height: 1;
}
.brand-word .ai { color: var(--accent); }
.brand-word .tld { color: var(--brand-300); }

/* ── лъчът през логото ────────────────────────────────────────────────
   На всеки десет секунди светла ивица минава бавно през знака и името.

   САМО ГОРЕ. Логото се рисува на четири места — в главата на сайта, в подписа
   му, в портала и в панела — и мига в подписа никой не гледа, а в панела е
   работен инструмент. Затова селекторът изброява двете глави поименно, вместо
   да хване `.brand` навсякъде.

   Десетте секунди са в анимацията, не в изчакване: самото минаване трае три
   секунди (0% до 30%), а останалите седем ивицата стои извън кутията. Един
   цикъл, никакъв скрипт, никакъв таймер.

   Прозрачно бяло, а не цвят: логото си има свои три цвята и четвърти, минаващ
   през тях, би ги сменил. Бялото само ги осветлява за миг. */
.site-head .brand,
.portal-top .brand {
  position: relative;
  overflow: hidden;
  /* Кутията е плътно около съдържанието; без това ивицата няма какво да пресече
     в началото и в края и се вижда как изниква. */
  isolation: isolate;
}
.site-head .brand::after,
.portal-top .brand::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, #fff 62%, transparent) 45%,
    color-mix(in srgb, #fff 76%, transparent) 50%,
    color-mix(in srgb, #fff 62%, transparent) 55%,
    transparent 100%
  );
  transform: translateX(-160%);
}

@media (prefers-reduced-motion: no-preference) {
  .site-head .brand::after,
  .portal-top .brand::after { animation: brand-shine 10s ease-in-out infinite; }
}

@keyframes brand-shine {
  0%   { transform: translateX(-160%); }
  30%  { transform: translateX(340%); }
  100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, a, .card, input, select, textarea {
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}