/* ═══════════════════════════════════════════════════════════════════════════
   AI ПИЛОТ - общата основа на всички страници.
   Стойностите тук идват от ../DESIGN.md, който пък ги вади от
   ../оувърлеи/hf/compositions/card.html. Не се пипат на място.

   Всяка страница внася този файл ПЪРВИ и после слага само собствения си
   макет. Ако някоя страница си дефинира собствен цвят или собствен шрифт,
   значи нещо е сбъркано.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* светло */
  --ground:#F7F9FB; --paper:#FFFFFF;
  --ink:#0B1524; --ink-2:#17293F; --muted:#5B7186; --hair:#DCE5ED;
  /* акцентът */
  --neon:#3EC1F3; --neon-txt:#0B6E9B; --on-neon:#06182A;
  /* върху тъмно */
  --deep-txt:#F5F7FA; --deep-2:#9FD3EE; --deep-hair:rgba(255,255,255,.14);
  /* ритъм */
  --s1:.4rem; --s2:.8rem; --s3:1.4rem; --s4:2.2rem; --s5:3.6rem; --s6:5.6rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ink);
  font-family:Montserrat,system-ui,-apple-system,sans-serif;
  font-size:17px;font-weight:500;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
b,strong{font-weight:800}
a{color:inherit}
img,svg{max-width:100%;display:block}
::selection{background:var(--neon);color:var(--on-neon)}

/* ─────────────────────────────────────── подписите на марката ───────────── */

/* Неоновият пип. Същият правоъгълник, който стои до кикера във видеокартите. */
.pip{display:inline-block;width:9px;height:1.05em;background:var(--neon);
  border-radius:5px;vertical-align:-.14em;margin-right:.7rem;flex:none}

.kick{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon-txt);display:flex;align-items:center;line-height:1}

/* Дебелата неонова черта под заглавие. .h-rule от картите. */
.rule{width:132px;height:6px;background:var(--neon);border-radius:3px;border:0;
  transform-origin:left center;margin:var(--s2) 0 0}

/* Числата са винаги таблични и винаги стегнати. */
.big{font-weight:800;letter-spacing:-.045em;line-height:.8;
  font-variant-numeric:tabular-nums}

h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.12}

/* ─────────────────────────────────────── управление ─────────────────────── */

.opt{font:inherit;font-weight:700;font-size:.87rem;background:none;color:var(--ink);
  border:1px solid var(--ink);padding:.5rem .95rem;border-radius:999px;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s}
.opt:hover{background:var(--ink);color:var(--deep-txt)}
.opt[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--on-neon)}
/* На телефон копчето става 44px високо. Под тази мярка пръстът бута съседния
   отговор - и Apple, и Google дават 44px като долна граница. */
@media(max-width:639px){.opt{padding:.63rem 1.05rem}}

/* върху тъмна основа копчетата се обръщат */
.on-deep .opt{color:var(--deep-txt);border-color:rgba(255,255,255,.3)}
.on-deep .opt:hover{background:var(--deep-txt);color:var(--ink)}
.on-deep .opt[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--on-neon)}

.btn{font:inherit;font-weight:800;font-size:.95rem;letter-spacing:.01em;
  background:var(--neon);color:var(--on-neon);border:none;text-decoration:none;
  padding:.9rem 2.1rem;border-radius:999px;cursor:pointer;display:inline-block;
  transition:background .12s,color .12s}
.btn:hover{background:var(--ink);color:var(--deep-txt)}
.on-deep .btn:hover{background:var(--deep-txt);color:var(--ink)}

.fld{font:inherit;font-weight:700;background:none;color:inherit;border:none;
  border-bottom:2px solid currentColor;padding:.55rem 0;border-radius:0}
.fld::placeholder{color:var(--muted);font-weight:500}
.fld:focus{outline:none;border-color:var(--neon)}
.on-deep .fld::placeholder{color:var(--deep-2)}

:focus-visible{outline:3px solid var(--neon);outline-offset:3px}

/* ─────────────────────────────────────── тъмният панел ──────────────────── */
/* Задължителен на всяка страница. Това е буквално повърхността на видеокартата.
   Виж DESIGN.md, раздел „Тъмният панел е задължителен". */

.deep{background:var(--ink);color:var(--deep-txt);position:relative;overflow:hidden}
.deep::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 620px at 50% 30%,var(--ink-2) 0%,var(--ink) 68%)}
.deep>*{position:relative}
.deep .kick{color:var(--neon)}
.deep .muted,.deep .lede{color:var(--deep-2)}

.hr{border:0;border-top:1px solid var(--hair)}
.deep .hr{border-top-color:var(--deep-hair)}

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

@keyframes растеж{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes пулс{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes появи{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.жив{width:9px;height:9px;border-radius:50%;background:var(--neon);display:inline-block;
  animation:пулс 2.2s ease-in-out infinite}

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