/* ═══════════════════════════════════════════════════════════════════════════
   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}
/* Кикерът стои на ЕДИН ред и на телефон. Свива се шрифтът и разредката, не
   се пренася текстът - пренесен кикер изглежда като счупено заглавие. */
/* Максимално едро, но пак на един ред. Мерено в браузър: най-дългият кикер
   („Как се промениха социалните мрежи") се побира до 9.7px на 320px и до
   21px на 640px. Правата през тези точки е долу, с 4% запас, и спира на
   размера от десктоп. */
@media(max-width:640px){
  .kick{font-size:clamp(.6rem,calc(-1.5px + 3.38vw),.75rem);letter-spacing:.1em}
  .kick .pip{width:.55em;margin-right:.7em}}

/* Дебелата неонова черта под заглавие. .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;
  box-shadow:0 2px 0 rgba(6,24,42,.16);
  transition:background .16s,transform .22s cubic-bezier(.2,.7,.2,1),
    box-shadow .22s cubic-bezier(.2,.7,.2,1)}
/* При посочване копчето НЕ си сменя цвета - вдига се и светва. Старият
   вариант го боядисваше в цвета на мастилото и точно върху тъмния панел
   копчето изчезваше изцяло, защото панелът е със същия цвят. */
.btn:hover,.btn:focus-visible{background:#63D2FB;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(62,193,243,.45),0 2px 0 rgba(6,24,42,.16)}
.btn:active{transform:translateY(0);
  box-shadow:0 1px 0 rgba(6,24,42,.16)}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:focus-visible,.btn:active{transform:none}}
/* На най-тесния телефон дългият надпис се пренася на два реда вътре в
   хапчето и то изглежда счупено. Свива се падингът, не текстът. */
@media(max-width:400px){.btn{padding:.85rem 1.35rem;font-size:.9rem}}

.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>*`, иначе онова правило му
   слага position:relative и платното ляга в потока вместо да покрива панела. */
.deep>canvas.fon,canvas.fon{position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:0}
.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)}

/* ───────────────── КОПЧЕ С РАЗГЪВАЩА СЕ СТРЕЛКА ───────── */
/* ЕДНО КОПЧЕ ЗА ЦЕЛИЯ САЙТ. Живее тук, а не в komp.css, защото
   brand.css се зарежда на всяка страница, а komp.css само на трите големи.

   При посочване или натискане неоновият квадрат се разтяга през цялото
   копче, стрелките изтичат една след друга, а надписът се скрива под тях.

   ХОВЪРЪТ Е САМО ЗА МИШКА. С пръст няма посочване, а браузърите оставят
   :hover залепен след докосване - копчето оставаше разгънато и надписът
   изчезнал. Затова целият разгъващ се блок е зад (hover:hover).           */
.стрелк{position:relative;display:inline-flex;align-items:center;
  height:62px;max-width:100%;
  border:0;border-radius:20px;background:var(--ink);color:var(--deep-txt);
  padding:6px;cursor:pointer;font:inherit;text-decoration:none;user-select:none;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(11,21,36,.18);
  transition:transform .3s cubic-bezier(.2,.9,.3,1),
             box-shadow .3s cubic-bezier(.2,.9,.3,1)}
.стрелк .акцент{position:absolute;top:6px;bottom:6px;left:6px;width:50px;
  border-radius:15px;background:var(--neon);color:var(--on-neon);z-index:1;
  overflow:hidden;transition:width .82s cubic-bezier(.22,1,.36,1)}
.стрелк .една{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .14s ease-out}
.стрелк .редица{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-around;padding:0 12px;pointer-events:none}
/* Избледняването на редицата минава през --о, а НЕ през inline opacity:
   inline стилът бие правилото по-долу и петте стрелки се виждаха бледи в
   квадратчето, докато копчето е в покой. */
.стрелк .редица span{opacity:0;transform:translateX(-7px);
  transition:opacity .2s ease-out,transform .2s ease-out}
.стрелк svg{width:19px;height:26px;fill:currentColor;display:block}
.стрелк .надпис{position:relative;z-index:0;margin-left:62px;margin-right:20px;
  white-space:nowrap;font-size:1rem;font-weight:800;letter-spacing:-.015em;
  transition:opacity .26s ease-out,transform .26s ease-out}

/* Натискането е меко: копчето потъва и сянката се свива, вместо да подскочи. */
.стрелк:active{transform:translateY(2px) scale(.988);
  box-shadow:0 2px 8px rgba(11,21,36,.22)}

/* Разгъването се пуска и от клас, за да работи и при натискане с пръст. */
.стрелк.натиснато .акцент{width:calc(100% - 12px)}
.стрелк.натиснато .една{opacity:0}
.стрелк.натиснато .редица span{opacity:var(--о,1);transform:none}
.стрелк.натиснато .редица span:nth-child(1){transition-delay:.04s}
.стрелк.натиснато .редица span:nth-child(2){transition-delay:.07s}
.стрелк.натиснато .редица span:nth-child(3){transition-delay:.1s}
.стрелк.натиснато .редица span:nth-child(4){transition-delay:.13s}
.стрелк.натиснато .редица span:nth-child(5){transition-delay:.16s}
.стрелк.натиснато .надпис{opacity:0;transform:translateX(8px)}

@media(hover:hover) and (pointer:fine){
  .стрелк:hover .акцент,.стрелк:focus-visible .акцент{width:calc(100% - 12px)}
  .стрелк:hover .една,.стрелк:focus-visible .една{opacity:0}
  .стрелк:hover .редица span,.стрелк:focus-visible .редица span{opacity:var(--о,1);
    transform:none}
  .стрелк:hover .редица span:nth-child(1),.стрелк:focus-visible .редица span:nth-child(1){transition-delay:.1s}
  .стрелк:hover .редица span:nth-child(2),.стрелк:focus-visible .редица span:nth-child(2){transition-delay:.2s}
  .стрелк:hover .редица span:nth-child(3),.стрелк:focus-visible .редица span:nth-child(3){transition-delay:.3s}
  .стрелк:hover .редица span:nth-child(4),.стрелк:focus-visible .редица span:nth-child(4){transition-delay:.4s}
  .стрелк:hover .редица span:nth-child(5),.стрелк:focus-visible .редица span:nth-child(5){transition-delay:.5s}
  .стрелк:hover .надпис,.стрелк:focus-visible .надпис{opacity:0;
    transform:translateX(8px)}
}

/* Тесен телефон: надписът се свива, вместо да разтяга страницата. С nowrap и
   фиксиран кегел копчето имаше вътрешна ширина 309px и разширяваше целия
   документ до 350 при екран 320. */
@media(max-width:430px){
  .стрелк{height:56px}
  .стрелк .акцент{width:44px;border-radius:13px}
  .стрелк svg{width:16px;height:22px}
  .стрелк .надпис{font-size:clamp(.74rem,3.2vw,1rem);
    margin-left:54px;margin-right:14px;letter-spacing:-.02em}
}
@media(prefers-reduced-motion:reduce){
  .стрелк,.стрелк *{transition:none}
  .стрелк:active{transform:none}
}

/* Тъмна секция: копчето обръща цветовете, за да не се слее с фона. */
.deep .стрелк{background:var(--neon);color:var(--on-neon);box-shadow:none}
.deep .стрелк .акцент{background:var(--on-neon);color:var(--neon)}
.deep .стрелк:active{box-shadow:none;transform:translateY(2px) scale(.988)}

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

@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}
}