/* ============================================================
   Nikolay Stefanov, портфолио. МОСТРА.

   Правилата, дошли от Николай на 19 септември:
   - никога Inter
   - най-малкият шрифт е 16 пиксела, навсякъде
   - без хапчета
   - кейсовете не скачат наляво и надясно
   - нито една дума сама на последния ред
   - тъмно лилаво в мастилото и в последната секция (вариант 2, избран на 21 септември)
   ============================================================ */

:root{
  /* Сивото е на Apple, изсветлено с 25% към бялото по желание на Николай:
     основата беше #F5F5F7, сега #F8F8F9. Мастилото остава #1D1D1F. */
  --bg:      #F8F8F9;
  --card:    #FFFFFF;
  --ink:     #1E1726;   /* тъмно лилаво мастило, 16.41:1 върху основата */
  --ink-2:   #4B4557;   /* 8.65:1 върху основата, и над 7:1 дори върху лилавото петно */
  --hair:    rgba(29,29,31,.075);

  /* Действие: само бутоните, в мастилото. Бял текст върху него дава 17.42:1.
     При посочване #342A44. */
  --act:     #1E1726;
  --act-2:   #342A44;
  --act-ink: #FFFFFF;

  /* Акцент: светлина и сянка в сивото. Само петна и тънки черти, никога текст. */
  --glow:    #FFFFFF;
  --mist:    #DCD5EC;   /* бледо лилаво петно в херото */
  --rule:    #C7C7CC;

  /* Лилавият финал, картата на Маска и тъмният въпрос в кейсовете. Плътен цвят, без преливане. */
  --dark:      #241A33;   /* тъмно лилаво, избрано пак на 26.10; бял текст 16.53:1 */
  --on-dark-2: #E6E1F2;   /* 12.92:1 върху лилавото */

  --font: "Plus Jakarta Sans", system-ui, sans-serif;

  --wrap: 1120px;
  --r-card: 24px;
  --r-btn: 12px;

  --ease: cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Без висящи думи: заглавията се балансират, текстът се подрежда.
   JavaScript отгоре връзва последните две думи за браузърите, които не могат. */
/* Не балансираме заглавията: балансът им отнема ширина и ражда излишен ред.
   Срещу висяща дума пази неразделимият интервал, който скриптът слага. */
h1,h2,h3{ text-wrap:pretty; }
p,li,dd{ text-wrap:pretty; }

/* height:auto е задължително: иначе при max-width:100% картинката пази височината
   от атрибута си и се сплесква. Точно това се случи с кориците. */
img{ max-width:100%; height:auto; display:block; }

/* ---------- Достъпност ---------- */

.skip{
  position:absolute; left:16px; top:-72px; z-index:100;
  background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:var(--r-btn);
  text-decoration:none; font-size:16px; font-weight:600;
  transition:top 160ms ease;
}
.skip:focus{ top:16px; }

:focus-visible{
  outline:2px solid var(--act);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Решетка ---------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 16px;
}
@media (min-width:760px){ .wrap{ padding:0 40px; } }

/* ---------- Лента отгоре ---------- */

.bar{
  position:sticky; top:0; z-index:50;
  background:rgba(248,248,249,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color 240ms ease;
}
.bar.is-scrolled{ border-bottom-color:var(--hair); }

.bar__in{
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; gap:12px;
}
.bar__name{
  color:var(--ink); text-decoration:none;
  white-space:nowrap;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  display:inline-flex; align-items:center; min-height:44px;
}
.bar__nav{ display:flex; }
.bar__nav a{
  /* Мастилен цвят, не сив: лентата е полупрозрачна и когато под нея мине тъмната
     секция, сивото падаше до 4.72:1. Така е поне 10.4:1 при всяко положение. */
  color:var(--ink); text-decoration:none;
  font-size:16px; font-weight:500;
  padding:0 8px;
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color 180ms ease;
}
.bar__nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (min-width:760px){ .bar__nav a{ padding:0 14px; } }

/* ---------- Херо ---------- */

.hero{ position:relative; padding:56px 0 56px; }
@media (min-width:760px){ .hero{ padding:96px 0 64px; } }

/* Слой зад цялата страница. Секциите вече не режат петната на ръба си. */
.blooms{
  position:absolute; top:0; left:0; right:0;
  height:1000px;
  z-index:0; pointer-events:none;
  overflow:hidden;
}
.bloom{
  position:absolute; z-index:0; pointer-events:none;
  border-radius:50%;
  filter:blur(120px);
}
.bloom--a{
  width:640px; height:640px; top:-280px; left:-200px;
  background:radial-gradient(circle at 35% 35%, var(--glow), transparent 68%);
  opacity:.95;
}
.bloom--b{
  /* Центърът на петното стои извън екрана, за да не пада под текст. */
  width:640px; height:640px; top:-80px; right:-380px;
  background:radial-gradient(circle at 60% 40%, var(--mist), transparent 70%);
  opacity:.9;
}
.hero .wrap{ position:relative; z-index:1; }

/* ---------- Типография ---------- */

.eyebrow{
  margin:0 0 20px;
  font-size:16px; font-weight:600;
  color:var(--ink-2);
}

.hero__h{
  margin:0 0 28px;
  font-weight:700;
  font-size:clamp(2.5rem, 7vw, 4.75rem);
  line-height:1.04;
  letter-spacing:-.035em;
}

.h2{
  margin:0 0 20px;
  font-weight:700;
  font-size:clamp(1.9rem, 4.4vw, 3rem);
  line-height:1.1;
  letter-spacing:-.03em;
}
.h2--big{ font-size:clamp(2.3rem, 6vw, 4rem); }

.lede{
  margin:0 0 40px;
  max-width:none;   /* текстът стига до ръба на колоната, негово правило от 11 октомври */
  font-size:clamp(1.0625rem, 1.6vw, 1.25rem);
  color:var(--ink-2);
}
.lede--tight{ margin-bottom:56px; }

/* ---------- Факти в херото ---------- */

.facts{
  display:grid; gap:22px 40px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin:0 0 44px;
  padding-top:26px;
  border-top:1px solid var(--hair);
  max-width:none;
}
/* На тясно инструментите заемат целия ред, защото стойността им е най-дълга. */
.facts__wide{ grid-column:1 / -1; }
@media (min-width:760px){
  .facts{ grid-template-columns:repeat(3, auto); justify-content:start; column-gap:64px; }
  .facts__wide{ grid-column:auto; }
}
.facts dt{ font-size:16px; color:var(--ink-2); margin-bottom:4px; }
.facts dd{ margin:0; font-size:17px; font-weight:600; }

/* Дупка, която чака факт. */
.pending{
  display:inline-block;
  padding:2px 10px;
  border:1px dashed rgba(29,29,31,.35);
  border-radius:8px;
  font-size:16px; color:var(--ink-2);
  background:repeating-linear-gradient(135deg, rgba(29,29,31,.045) 0 6px, transparent 6px 12px);
}

/* ---------- Бутони: заоблен правоъгълник, не хапче ---------- */

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 24px;
  border-radius:var(--r-btn);
  background:var(--act); color:var(--act-ink);
  border:1px solid var(--act);
  text-decoration:none; font-size:17px; font-weight:600;
  transition:background 180ms ease, border-color 180ms ease;
}
.btn:hover{ background:var(--act-2); border-color:var(--act-2); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(29,29,31,.22);
}
.btn--ghost:hover{ background:rgba(29,29,31,.04); border-color:rgba(29,29,31,.35); }

.link{
  position:relative;
  color:var(--ink); font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(29,29,31,.28);
  padding-bottom:2px;
  transition:border-color 180ms ease;
}
.link:hover{ border-bottom-color:var(--ink); }
/* Целта за пръст става 44 пиксела, без да мести подчертаването. */
.link::after{
  content:''; position:absolute;
  left:-4px; right:-4px; top:50%;
  transform:translateY(-50%);
  height:44px;
}

/* ---------- Секции ---------- */

.band{ padding:64px 0; position:relative; }
@media (min-width:760px){ .band{ padding:88px 0; } }
.band--white{ background:#FFFFFF; }

/* ---------- Кейс: снимката горе, текстът долу. Еднакво за всички. ---------- */

.case{
  background:var(--card);
  border-radius:var(--r-card);
  border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(29,29,31,.04), 0 12px 32px rgba(29,29,31,.05);
  overflow:hidden;
  margin-bottom:32px;
}

/* Заместител на снимка: сив блок с щриховка и надпис. */
.case__art{
  aspect-ratio:16 / 10;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(29,29,31,.0375) 0 10px, transparent 10px 20px),
    #F0F0F3;
  border-bottom:1px solid var(--hair);
}
@media (min-width:900px){ .case__art{ aspect-ratio:16 / 8; } }
/* Със снимка: мястото приема пропорцията на самата снимка, нищо не се реже. */
.case__art--img{ aspect-ratio:auto; background:#FFFFFF; display:block; }
@media (min-width:900px){ .case__art--img{ aspect-ratio:auto; } }
.case__art--img img{ width:100%; height:auto; display:block; }
.case__art span{
  font-size:16px; font-weight:600;
  color:#4E4E57; /* 7.24:1 върху сивото на заместителя, минава AAA */
}

.case__body{
  padding:30px 22px 34px;
  display:grid; gap:28px;
}
@media (min-width:760px){ .case__body{ padding:44px 48px 48px; } }
@media (min-width:900px){
  .case__body{ grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
}

.case__meta{ margin:0 0 10px; font-size:16px; color:var(--ink-2); }
.case__h{
  margin:0 0 14px;
  font-size:clamp(2rem, 3.6vw, 2.75rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.05;
}
.case__sub{ margin:0; color:var(--ink-2); max-width:none; }

/* Обхватът: обикновен текст, без хапчета. */
.scope{ margin:0 0 24px; }
.scope dt{ font-size:16px; color:var(--ink-2); margin-bottom:4px; }
.scope dd{ margin:0; font-size:17px; font-weight:500; }

.stats{
  display:grid; gap:14px;
  margin:0 0 26px; padding:22px 0 0;
  border-top:1px solid var(--hair);
  list-style:none;
}
.stat{ display:flex; align-items:baseline; gap:14px; }
.stat b{
  flex:0 0 auto;
  min-width:1.2ch;
  font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1;
  color:var(--ink);
}
.stat span{ font-size:16px; color:var(--ink-2); line-height:1.45; }

.case__note{
  margin:0;
  font-size:16px; color:var(--ink-2);
  padding-left:14px;
  border-left:2px solid var(--rule);
}
.case__links{ margin:0; }

/* ---------- Заглавие на вътрешна страница ---------- */

.page-head{ position:relative; padding:56px 0 8px; }
@media (min-width:760px){ .page-head{ padding:96px 0 16px; } }
.page-head .wrap{ position:relative; z-index:1; }
.page-head__h{
  margin:0 0 24px;
  font-weight:700;
  font-size:clamp(2.1rem, 5.2vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.033em;
}
.bar__nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---------- Малки карти за по-старото ---------- */

.minis{
  list-style:none; margin:0 0 8px; padding:0;
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:620px){ .minis{ grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:28px; } }

.mini{
  background:var(--bg);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.mini__art{
  aspect-ratio:16 / 10;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(29,29,31,.0375) 0 10px, transparent 10px 20px),
    #F0F0F3;
  border-bottom:1px solid var(--hair);
}
.mini__art span{ font-size:16px; font-weight:600; color:#4E4E57; }
/* Със снимка: мястото е в пропорцията на корицата от Behance, 808 на 632,
   за да влиза цялата и трите карти пак да са еднакво високи. */
.mini__art--img{ aspect-ratio:808 / 632; background:#FFFFFF; display:block; }
.mini__art--img img{ width:100%; height:auto; display:block; }
.mini__body{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; flex:1; }
.mini__meta{ margin:0; font-size:16px; color:var(--ink-2); }
.mini__h{ margin:0; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; }
.mini__p{ margin:0 0 4px; font-size:16px; color:var(--ink-2); }
/* Връзката ляга на дъното, за да стои на една линия и в трите карти. */
.mini__body .link{ margin-top:auto; }

/* ---------- По-старото ---------- */

.more{
  display:flex; flex-wrap:wrap; gap:18px 32px;
  align-items:flex-end; justify-content:space-between;
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid var(--hair);
}
@media (min-width:760px){ .more{ margin-top:72px; } }
.more__h{ margin:0 0 8px; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; }
.more__p{ margin:0; color:var(--ink-2); max-width:none; font-size:16px; }

/* ---------- За мен ---------- */

.cols{
  display:grid; gap:28px 48px;
  grid-template-columns:1fr;
  max-width:none;
}
@media (min-width:760px){ .cols{ grid-template-columns:1fr 1fr; } }
/* Първият абзац е на цял ред: разговорът с бизнеса идва преди всичко останало. */
.col__p.col__p--lead{ grid-column:1 / -1; font-size:clamp(1.125rem, 1.6vw, 1.25rem); }
.col__p{
  margin:0;
  font-size:17px;
  padding-top:20px;
  border-top:1px solid var(--hair);
}


/* ---------- Контакт ---------- */

.chan{ list-style:none; margin:0; padding:0; max-width:none; }
.chan li{
  display:grid; gap:2px;
  padding:16px 0;
  border-top:1px solid var(--hair);
}
.chan li:last-child{ border-bottom:1px solid var(--hair); }
/* На тясно етикетът стои над стойността винаги, не само когато не се събере. */
@media (min-width:560px){
  .chan li{ grid-template-columns:110px 1fr; gap:16px; align-items:center; padding:18px 0; }
}
.chan li .link{ justify-self:start; }
.chan__k{ font-size:16px; color:var(--ink-2); }

/* ---------- Подвал ---------- */

/* ---------- Тъмният финал ---------- */

/* Последната секция е плътно тъмно лилаво и е висока поне колкото екрана.
   Така при скрол до дъното отгоре не наднича ивица от бялото над нея. */
.finale{
  background:var(--dark);
  color:#FFFFFF;
  min-height:100svh;
  display:flex; align-items:center;
}
.finale > .wrap{ width:100%; }
.finale .h2{ color:#FFFFFF; }
.finale .eyebrow,
.finale .lede,
.finale .chan__k{ color:var(--on-dark-2); }        /* 12.92:1 върху лилавото */
.finale .link{ color:#FFFFFF; border-bottom-color:rgba(255,255,255,.45); }
.finale .link:hover{ border-bottom-color:#FFFFFF; }
.finale .chan li{ border-color:rgba(255,255,255,.18); }
.finale .btn{ background:#FFFFFF; color:var(--dark); border-color:#FFFFFF; }
.finale .btn:hover{ background:#E8E4F0; border-color:#E8E4F0; }
.finale .btn--ghost{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.45); }
.finale .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#FFFFFF; }
.finale :focus-visible{ outline-color:#FFFFFF; }

.foot{
  padding:40px 0 56px;
  background:var(--dark);
  border-top:1px solid rgba(255,255,255,.14);
}
.foot p{ color:var(--on-dark-2); }
.foot__in{ display:flex; flex-wrap:wrap; gap:8px 32px; justify-content:space-between; }
.foot p{ margin:0; font-size:16px; }

/* ---------- Появяване при скрол: само нагоре, никога встрани ---------- */

/* Само преливане, без движение. Общото му правило от 23 септември. */
.reveal{
  opacity:0;
  transition:opacity 500ms var(--ease);
}
.reveal.is-in{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}


/* ============================================================
   Страница на кейс (Sola). Същите правила: 16 пиксела минимум,
   без хапчета, еднакъв ред на снимката и текста навсякъде.
   ============================================================ */

/* Ред с действията под всеки кейс на началната страница. */
/* Действието стои долу вляво, под описанието, на дъното на колоната. */
.case__links{
  display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center;
  margin:28px 0 0;
}
.case__col{ display:flex; flex-direction:column; align-self:stretch; align-items:flex-start; }
.case__col .case__links{ margin-top:auto; padding-top:28px; }

/* ---------- Общи части на кейса ---------- */

.cs-sec{ padding:56px 0; position:relative; }
@media (min-width:760px){ .cs-sec{ padding:80px 0; } }
.cs-sec--white{ background:#FFFFFF; }

.cs-h{
  margin:0 0 20px;
  font-weight:700;
  font-size:clamp(1.75rem, 4vw, 2.75rem);
  line-height:1.1;
  letter-spacing:-.03em;
}
.cs-h3{
  margin:0 0 12px;
  font-weight:700;
  font-size:clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing:-.02em;
  line-height:1.2;
}
/* Абзацът стига до ръба на колоната. Без таван в ch: сам поиска цялата ширина. */
.cs-p{ margin:0 0 20px; max-width:none; color:var(--ink-2); }
.cs-p:last-child{ margin-bottom:0; }
.cs-p--wide{ max-width:none; }

/* Малък надпис над блок. Обикновен текст, не хапче. */
.cs-label{
  margin:0 0 10px;
  font-size:16px; font-weight:600;
  color:var(--ink-2);
}

/* ---------- Решетки от карти ---------- */

.cs-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .cs-grid{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; } }
/* Четирите карти: 2 на 2 в средата, на един ред чак когато има място. 3+1 изглежда счупено. */
@media (min-width:640px){ .cs-grid--4{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .cs-grid--4{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:860px){ .cs-grid--2{ grid-template-columns:1fr 1fr; gap:28px; } }

.cs-card{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  padding:26px 24px 28px;
  display:flex; flex-direction:column;
}
.cs-sec--white .cs-card{ background:var(--bg); }
.cs-card h3{ margin:0 0 12px; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.cs-card p{ margin:0; font-size:16px; color:var(--ink-2); }
.cs-card p + p{ margin-top:12px; }

/* Трите правила: бледо мастило вместо хапче. Текстът остава над 7:1. */
.cs-card--tint-a{ background:#E9EFEB; }
.cs-card--tint-b{ background:#E7EAF7; }
.cs-card--tint-c{ background:#F3E7DE; }
.cs-sec--white .cs-card--tint-a{ background:#E9EFEB; }
.cs-sec--white .cs-card--tint-b{ background:#E7EAF7; }
.cs-sec--white .cs-card--tint-c{ background:#F3E7DE; }

/* Номерът в картата: 01 Quick questionnaire. */
.cs-step{ margin:0 0 10px; font-size:16px; font-weight:600; color:var(--ink-2); }

/* Разбор на чужд продукт: заглавие и бележка на един ред. */
.cs-card__top{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin-bottom:12px;
}
.cs-card__top h3{ margin:0; }
.cs-tag{ font-size:16px; font-weight:600; color:var(--ink-2); }

.cs-steps{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:16px; }
.cs-steps li{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; }
.cs-steps i{ grid-column:1; grid-row:1; font-style:normal; font-size:16px; font-weight:600; color:var(--ink-2); }
.cs-steps b{ grid-column:2; grid-row:1; font-size:16px; font-weight:700; }
.cs-steps span{ grid-column:2; grid-row:2; font-size:16px; color:var(--ink-2); }

/* ---------- Числа ---------- */

.cs-figs{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .cs-figs{ grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:24px; } }
.cs-fig{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-card); padding:26px 24px 28px;
}
.cs-sec--white .cs-fig{ background:var(--bg); }
.cs-fig b{ display:block; font-size:clamp(2.25rem,5vw,3rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.cs-fig b small{ font-size:1.125rem; font-weight:600; letter-spacing:0; }
.cs-fig span{ display:block; margin-top:14px; font-size:16px; color:var(--ink-2); }

/* ---------- Номериран списък с изводи ---------- */

.cs-truths{ list-style:none; margin:0; padding:0; display:grid; gap:30px; }
/* Числото и заглавието лягат на една основна линия, текстът стига докрай. */
.cs-truths li{ display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:baseline; }
@media (min-width:640px){ .cs-truths li{ gap:6px 32px; } }
.cs-truths em{
  grid-row:1 / span 2; grid-column:1; align-self:baseline;
  font-style:normal; font-weight:700;
  font-size:clamp(2rem,4vw,2.75rem); line-height:1;
  letter-spacing:-.04em;
  /* Не var(--rule): там числото падаше на 1.68:1. Това дава 4.88:1, минава AAA за едър текст. */
  color:#6E6878;
}
.cs-truths b{ grid-column:2; grid-row:1; font-size:17px; }
.cs-truths span{ grid-column:2; grid-row:2; font-size:16px; color:var(--ink-2); max-width:none; }

/* ---------- Тъмният въпрос ---------- */

.cs-ask{
  background:var(--dark); color:#FFFFFF;
  border-radius:var(--r-card);
  padding:34px 26px;
}
@media (min-width:760px){ .cs-ask{ padding:48px 44px; } }
.cs-ask p:first-child{ margin:0 0 14px; font-size:16px; font-weight:600; color:var(--on-dark-2); }
.cs-ask p:last-child{
  margin:0;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight:600; line-height:1.3; letter-spacing:-.02em;
}

/* ---------- Персона ---------- */

.cs-persona{ display:grid; gap:28px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .cs-persona{ grid-template-columns:340px 1fr; gap:48px; } }
.cs-pcard{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  padding:26px 24px 28px;
}
.cs-sec--white .cs-pcard{ background:var(--bg); }
.cs-pcard img{ width:88px; height:88px; border-radius:50%; margin-bottom:18px; }
.cs-pcard h3{ margin:0 0 4px; font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
.cs-pcard > p{ margin:0 0 18px; font-size:16px; color:var(--ink-2); }
.cs-pdl{ margin:0; }
.cs-pdl div{
  display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between;
  padding:13px 0; border-top:1px solid var(--hair);
}
.cs-pdl dt{ font-size:16px; color:var(--ink-2); }
.cs-pdl dd{ margin:0; font-size:16px; font-weight:600; }
.cs-traits{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:8px 18px; }
.cs-traits li{ font-size:16px; font-weight:600; }

.cs-plists{ display:grid; gap:28px 48px; grid-template-columns:1fr; margin-top:28px; }
@media (min-width:640px){ .cs-plists{ grid-template-columns:1fr 1fr; } }
.cs-plist h4{ margin:0 0 12px; font-size:16px; font-weight:700; }
.cs-plist ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cs-plist li{ font-size:16px; color:var(--ink-2); padding-left:20px; position:relative; }
.cs-plist li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:var(--rule);
}

/* ---------- Кадрите от разказа ---------- */

.cs-frames{ list-style:none; margin:0; padding:0; display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:620px){ .cs-frames{ grid-template-columns:repeat(auto-fit, minmax(275px,1fr)); gap:28px; } }
.cs-frame img{ width:100%; border:1px solid var(--hair); border-radius:12px; background:#FFFFFF; }
.cs-frame b{ display:block; margin:16px 0 6px; font-size:17px; }
.cs-frame span{ display:block; font-size:16px; color:var(--ink-2); }

/* ---------- Решение: избраното и отхвърленото ---------- */

.cs-dec{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  padding:26px 24px 28px;
}
.cs-sec--white .cs-dec{ background:var(--bg); }
.cs-dec__top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:18px; }
.cs-dec__top h3{ margin:0; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.cs-verdict-k{ font-size:16px; font-weight:700; }
.cs-verdict-k--out{ font-weight:600; color:var(--ink-2); }
.cs-pc{ margin:0 0 8px; font-size:16px; font-weight:700; }
.cs-pc-list{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.cs-pc-list li{ font-size:16px; color:var(--ink-2); padding-left:22px; position:relative; }
.cs-pc-list li::before{ position:absolute; left:0; top:0; font-weight:700; color:var(--ink-2); }
.cs-pc-list--pro li::before{ content:'+'; }
.cs-pc-list--con li::before{ content:'\2212'; }
.cs-verdict{
  margin:4px 0 0; padding:16px 18px;
  border:1px solid var(--hair); border-radius:12px;
  font-size:16px; color:var(--ink-2);
  background:rgba(29,29,31,.02);
}
.cs-verdict b{ color:var(--ink); }

/* ---------- Тестът с хора ---------- */

.cs-issue{ display:grid; gap:24px; grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){
  .cs-issue{ grid-template-columns:1fr 1fr; gap:48px; }
  /* Вторият случай разменя страните. На тясно редът пак е текст, после снимка. */
  .cs-issue--flip .cs-issue__text{ order:2; }
  .cs-issue--flip .cs-shot{ order:1; }
}
.cs-issue + .cs-issue{ margin-top:56px; padding-top:56px; border-top:1px solid var(--hair); }
.cs-quote{ margin:0 0 6px; font-size:17px; font-style:italic; color:var(--ink-2); }
.cs-who{ margin:0 0 18px; font-size:16px; color:var(--ink-2); }
.cs-fix{ margin:0; font-size:16px; color:var(--ink-2); }
.cs-fix b{ color:var(--ink); }
.cs-shot{ background:#FFFFFF; border:1px solid var(--hair); border-radius:16px; padding:14px; }
.cs-sec--white .cs-shot{ background:var(--bg); }

/* ---------- Трите хода: редуват се наляво и надясно, както в неговия кейс ---------- */

.cs-move{ display:grid; gap:28px; grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){
  .cs-move{ grid-template-columns:1fr 340px; gap:64px; }
  /* Вторият ход разменя колоните. На тясно редът остава текст, после снимка. */
  .cs-move--flip{ grid-template-columns:340px 1fr; }
  .cs-move--flip .cs-move__text{ order:2; }
  .cs-move--flip .cs-move__shot{ order:1; }
}
.cs-move + .cs-move{ margin-top:56px; padding-top:56px; border-top:1px solid var(--hair); }
.cs-move__shot{ justify-self:start; max-width:340px; }
@media (min-width:860px){ .cs-move__shot{ justify-self:center; } }
/* Изрязано е точно по апарата, затова ъгълът на снимката съвпада с ъгъла на телефона
   и около него не остава сив правоъгълник. */
.cs-move__shot img{ border-radius:17.35% / 8.55%; }
.cs-check{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.cs-check li{ font-size:17px; padding-left:28px; position:relative; }
.cs-check li::before{ content:'\2713'; position:absolute; left:0; top:0; font-weight:700; color:var(--ink-2); }

/* ---------- Дизайн системата ---------- */

.cs-sw{ list-style:none; margin:0 0 40px; padding:0; display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .cs-sw{ grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:20px; } }
.cs-sw li{ border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--card); }
.cs-sec--white .cs-sw li{ background:var(--bg); }
.cs-sw i{ display:block; height:76px; }
.cs-sw b{ display:block; padding:12px 14px 0; font-size:16px; font-weight:600; }
.cs-sw span{ display:block; padding:2px 14px 14px; font-size:16px; color:var(--ink-2); }

.cs-type{ border:1px solid var(--hair); border-radius:var(--r-card); background:var(--card); overflow:hidden; margin:0; }
.cs-sec--white .cs-type{ background:var(--bg); }
.cs-type div{
  display:grid; gap:4px 28px; grid-template-columns:1fr;
  padding:20px 22px; border-top:1px solid var(--hair);
}
.cs-type div:first-child{ border-top:0; }
@media (min-width:560px){ .cs-type div{ grid-template-columns:170px 1fr; align-items:baseline; } }
.cs-type dt{ font-size:16px; color:var(--ink-2); }
.cs-type dt b{ display:block; color:var(--ink); font-size:16px; font-weight:700; }
.cs-type dd{ margin:0; }
.cs-type .ts-1{ font-size:1.75rem; font-weight:600; letter-spacing:-.02em; }
.cs-type .ts-2{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; }
.cs-type .ts-3{ font-size:17px; }
.cs-type .ts-4{ font-size:16px; color:var(--ink-2); font-weight:600; }

/* ---------- Широка снимка с надпис ---------- */

.cs-wide{ margin:0; }
.cs-wide img{ width:100%; border:1px solid var(--hair); border-radius:16px; background:#FFFFFF; }
.cs-wide figcaption{ margin-top:14px; font-size:16px; color:var(--ink-2); }

/* ---------- Изводът ---------- */

.cs-end{ max-width:none; }


/* ---------- Главата на кейса: четирите факта и действието на един ред ---------- */

.cs-head{
  display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:flex-end; justify-content:space-between;
  margin:0; padding-top:26px;
  border-top:1px solid var(--hair);
}
.cs-head .facts{
  margin:0; padding-top:0; border-top:0; max-width:none;
  flex:1 1 380px;
}
@media (min-width:760px){
  .cs-head .facts{ grid-template-columns:repeat(4, auto); justify-content:start; column-gap:56px; }
}
.cs-head .btn{ flex:0 0 auto; }

/* Текстът в главата на кейса също ползва цялата ширина. */
.lede--full{ max-width:none; }


/* ============================================================
   Кейсът на Маска: преди и после, времева линия, резултати от теста.
   Същите правила: 16 пиксела минимум, без хапчета, текстът стига докрай.
   ============================================================ */

/* ---------- Преди и после: две снимки една до друга ---------- */

.ba{ display:grid; gap:20px; grid-template-columns:1fr; margin:0; }
@media (min-width:760px){ .ba{ grid-template-columns:1fr 1fr; gap:28px; } }
.ba + .ba{ margin-top:48px; }
.ba figure{ margin:0; }
.ba img{ width:100%; border:1px solid var(--hair); border-radius:12px; background:#FFFFFF; }
.ba figcaption{ margin-top:12px; font-size:16px; color:var(--ink-2); }
.ba figcaption b{ color:var(--ink); }
/* Снимките от телефон стоят тесни, за да не стават огромни на широк екран. */
.ba--phone figure{ max-width:360px; }
@media (min-width:760px){ .ba--phone{ grid-template-columns:repeat(2, minmax(0,360px)); justify-content:start; gap:48px; } }

/* ---------- Времевата линия ---------- */

.tl{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line, #E5E1DB); }
.tl li{
  position:relative;
  display:grid; gap:4px 32px; grid-template-columns:1fr;
  padding:0 0 28px 24px;
}
.tl li:last-child{ padding-bottom:0; }
.tl li::before{
  content:''; position:absolute; left:-7px; top:6px;
  width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid var(--bg);
}
.cs-sec--white .tl li::before{ border-color:#FFFFFF; }
@media (min-width:760px){ .tl li{ grid-template-columns:170px 1fr; } }
.tl time{ font-size:16px; font-weight:700; color:var(--ink); }
.tl b{ display:block; font-size:17px; }
.tl span{ display:block; font-size:16px; color:var(--ink-2); }

/* ---------- Резултатите по задачи ---------- */

.bars{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.bars li{ display:grid; gap:6px 24px; grid-template-columns:1fr; align-items:center; }
@media (min-width:760px){ .bars li{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; } }
.bars b{ font-size:16px; font-weight:600; }
.bars b small{ display:block; font-size:16px; font-weight:400; color:var(--ink-2); }
/* Лентата е украса към числото до нея. Стойността винаги е написана с думи. */
.bars i{
  display:block; height:10px; border-radius:6px;
  background:var(--hair);
  position:relative; overflow:hidden;
}
.bars i::after{
  content:''; position:absolute; inset:0 auto 0 0;
  width:var(--v); background:var(--ink); border-radius:6px;
}
.bars em{ font-style:normal; font-size:16px; color:var(--ink-2); white-space:nowrap; }

/* ---------- Цитат от участник ---------- */

.cs-quotes{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:760px){ .cs-quotes{ grid-template-columns:1fr 1fr; gap:24px; } }
.cs-quotes li{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-card); padding:24px;
}
.cs-sec--white .cs-quotes li{ background:var(--bg); }
.cs-quotes p{ margin:0 0 10px; font-size:17px; color:var(--ink); }
.cs-quotes span{ font-size:16px; color:var(--ink-2); }


/* ============================================================
   26 октомври: лилав акцент, етикети за избор, подравнени карти, повече въздух.
   ============================================================ */

/* Лилавото е за надписите над блоковете и за големите числа.
   #563A8F дава поне 7.2:1 върху бяло, сиво и трите оцветени карти. */
:root{ --accent:#563A8F; }
.cs-label, .cs-step, .cs-tag{ color:var(--accent); }
.cs-fig b{ color:var(--accent); }
.bars i::after{ background:var(--accent); }
.tl li::before{ background:var(--accent); }

/* Chosen и Discarded: правоъгълен етикет, не хапче. Зелено 7.34:1, червено 8.2:1. */
.cs-verdict-k{
  display:inline-block; padding:2px 10px; border-radius:6px;
  font-size:16px; font-weight:700;
  background:#E2F0E5; color:#1E5631;
}
.cs-verdict-k--out{ background:#F9E4E4; color:#7F1D24; font-weight:700; }

/* Картите в един ред са подравнени по редове: надпис, заглавие и текст започват
   на една и съща височина, колкото и да е дълго заглавието в съседната карта. */
.cs-sub3 > li, .cs-sub3 > .cs-card{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; }
.cs-sub2 > li, .cs-sub2 > .cs-card{ display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; align-content:start; }
.cs-quotes.cs-sub2 > li p{ align-self:start; }
.cs-quotes.cs-sub2 > li span{ align-self:end; }

/* Повече въздух. */
.cs-sec{ padding:72px 0; }
@media (min-width:760px){ .cs-sec{ padding:112px 0; } }
.cs-h{ margin-bottom:24px; }
.cs-label{ margin-bottom:14px; }
.cs-sec .cs-grid, .cs-sec .cs-figs, .cs-sec .cs-frames, .cs-sec .cs-truths,
.cs-sec .cs-persona, .cs-sec .cs-sw, .cs-sec .cs-quotes, .cs-sec .bars, .cs-sec .tl{ margin-top:44px; }
@media (min-width:640px){ .cs-grid, .cs-figs, .cs-quotes{ gap:28px; } }
.cs-move + .cs-move, .cs-issue + .cs-issue{ margin-top:80px; padding-top:80px; }
.cs-h3{ margin-top:0; }
.cs-sec .cs-h3:not(:first-child){ margin-top:64px; }
.cs-card h3{ margin-bottom:14px; }
.cs-step{ margin-bottom:12px; }

/* About: тетрадката на цял ред, другите три в една редица на широко. */
@media (min-width:900px){ .cols--3{ grid-template-columns:repeat(3, 1fr); } }


/* ---------- Плаващ бутон за връзка, само на телефон ---------- */

.fab-cta{ display:none; }
@media (max-width:759px){
  .fab-cta{
    display:flex; align-items:center; justify-content:center;
    position:fixed; z-index:60;
    left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    min-height:52px; padding:0 20px;
    border-radius:var(--r-btn);
    background:var(--act); color:var(--act-ink);
    font-size:17px; font-weight:600; text-decoration:none;
    box-shadow:0 8px 24px rgba(30,23,38,.22);
    opacity:0; visibility:hidden;
    transition:opacity 260ms ease, visibility 0s linear 260ms;
  }
  .fab-cta.is-on{ opacity:1; visibility:visible; transition:opacity 260ms ease, visibility 0s; }
  .fab-cta:focus-visible{ outline:2px solid #FFFFFF; outline-offset:-5px; }
}
@media (prefers-reduced-motion: reduce){ .fab-cta, .fab-cta.is-on{ transition:none; } }

/* ---------- Мрежа от точки в херото и махането за здрасти ----------
   Точките са като платното във Figma, но меки и бледи, за да не се набиват на очи.
   Свършват над чертата на ролите: височината им се задава от main.js, а последните 120 пиксела
   изчезват плавно. Ръката излиза само при мишка, когато курсорът се раздруса наляво надясно. */
.dots{
  position:absolute; top:0; left:0; right:0; height:100%;
  z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(30,23,38,.11) 0, rgba(30,23,38,.06) 1.4px, transparent 2.4px);
  background-size:24px 24px;
  background-position:center top;
  filter:blur(.4px);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 120px), transparent), radial-gradient(ellipse 80% 100% at 50% 20%, #000 30%, transparent 80%);
          mask-image:linear-gradient(#000 calc(100% - 120px), transparent), radial-gradient(ellipse 80% 100% at 50% 20%, #000 30%, transparent 80%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.wave{
  position:fixed; z-index:80; left:0; top:0; pointer-events:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--card);
  box-shadow:0 0 0 1px var(--hair), 0 6px 18px rgba(30,23,38,.12);
  color:var(--ink);
  opacity:0;
  will-change:transform;
  transition:opacity 200ms ease;
}
.wave.is-on{ opacity:1; }
.wave__hand{ display:block; width:24px; height:24px; transform-origin:60% 85%; }
.wave.is-on .wave__hand{ animation:wave-hand 1.1s ease-in-out; }
@keyframes wave-hand{
  0%,100%{ transform:rotate(0); }
  15%{ transform:rotate(16deg); }  30%{ transform:rotate(-10deg); }
  45%{ transform:rotate(16deg); }  60%{ transform:rotate(-6deg); }
  75%{ transform:rotate(10deg); }
}
@media (prefers-reduced-motion: reduce){ .wave.is-on .wave__hand{ animation:none; } }

/* ---------- Тъмна карта за кейс ----------
   За цвят без преливане: картите се редуват, едната е бяла, другата е плътно тъмно лилаво,
   същото като последната секция. Текстът е бял (16.53:1) и почти бял (12.92:1). */
.case--dark{
  background:var(--dark);
  color:#FFFFFF;
  /* Косъмът е полупрозрачен и под него прозираше лилавото, затова рамката изглеждаше черна.
     Тук е плътният му светъл цвят, а фонът спира до рамката, не минава под нея. */
  border-color:#E7E7E9;
  background-clip:padding-box;
}
.case--dark .case__art{ border-bottom-color:var(--hair); }
.case--dark .case__h,
.case--dark .scope dd,
.case--dark .stat b{ color:#FFFFFF; }
.case--dark .case__meta,
.case--dark .case__sub,
.case--dark .scope dt,
.case--dark .stat span{ color:var(--on-dark-2); }
.case--dark .stats{ border-top-color:rgba(255,255,255,.18); }
.case--dark .btn--ghost{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.45); }
.case--dark .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#FFFFFF; }
.case--dark :focus-visible{ outline-color:#FFFFFF; }

/* ---------- Лилавото, добавено на 26.10 ----------
   Акцентът #563A8F е 8.25:1 върху основата и 8.76:1 върху бялото, минава AAA. */
.eyebrow{ color:var(--accent); }
.cs-card .cs-step{ color:var(--accent); }   /* .cs-card p го правеше сиво */
.tl time{ color:var(--accent); }
/* Само последната стъпка, пускането, има по-голямо кръгче: там свършва пътят. */
.tl li:last-child::before{ left:-15px; top:-2px; width:28px; height:28px; border-width:3px; }
.case--dark .case__sub{ color:#FFFFFF; }

/* Избраното решение има бледолилава рамка. */
.cs-dec--chosen{ border-color:#CFC3E6; box-shadow:0 0 0 1px #CFC3E6; }

/* Думата „design“ в заглавието: избрана като слой във Figma, с рамка и четири дръжки в ъглите. */
.sel{ position:relative; color:var(--accent); white-space:nowrap; }
.sel::before,
.sel::after{ content:''; position:absolute; pointer-events:none; }
.sel::before{ inset:.06em -.1em -.02em; border:2px solid var(--accent); }
.sel::after{
  inset:calc(.06em - 4px) calc(-.1em - 4px) calc(-.02em - 4px);
  background:
    linear-gradient(#FFFFFF,#FFFFFF) 2px 2px / 6px 6px no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) calc(100% - 2px) 2px / 6px 6px no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) 2px calc(100% - 2px) / 6px 6px no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) calc(100% - 2px) calc(100% - 2px) / 6px 6px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 0 / 10px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0 / 10px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100% / 10px 10px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100% / 10px 10px no-repeat;
}

/* На телефон бутонът „Read the case study“ отива най-долу, под обхвата и числата.
   Колоната с текста се разтваря, за да може бутонът да мине след съседната колона. */
@media (max-width:899px){
  .case__body{ gap:0; }
  .case__col{ display:contents; }
  .case__body > div:not(.case__col){ order:1; margin-top:28px; }
  .case__body > div:not(.case__col) > :last-child{ margin-bottom:0; }
  .case__col .case__links{ order:2; padding-top:28px; }
}

/* Лилавото петно в херото е махнато на 26.10 по негово желание: фонът остава плътен. */
.bloom--b{ display:none; }