/* =============================================================================
   „За нас" — Figma 34:3993 (десктоп, 1440 × 5652) и 34:4445 (мобилно).

   Дословна геометрия на десктопа:
     херо        1440 × 723: заглавие D1 64/1.05 в 907, лийд 733 на +16;
                 текстът тръгва на y=80 под навигацията (нав до y=102 → 166)
     лога        248: ред 16/1.5 центриран + 7 плейсхолдъра по 200 × 56
     мисия       глава 443 | 625, после кадър 1332 × 684 r18 с 4 карти
                 (rgba(60,60,60,.56), p14, r16, икона 32, H5 24/1.2 ls .48)
     начало      ляво 576 (глава + текст + CTA 360), дясно 630 времева линия
                 (релса 3px + точка 12, текст 570: H4 28/1.1 + 18/1.5)
     основател   1440 × 837 върху #070708: снимка 707 × 827 с градиент,
                 дясно 687: био карта (p16 r8) + 3 статистики (p16 r6)
     отличия     глава 443 + CTA; решетка 4 × 321 с 5 карти в шахмат
     финал       колона 768 центрирана: H2 + текст + CTA
   ============================================================================= */

.ab-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-4);
}

/* --- Общи елементи --------------------------------------------------------- */
.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
}

.ab-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl); /* 48px */
  line-height: 1.2;
  color: var(--color-white);
}

.ab-cta-btn {
  width: 22.5rem; /* 360px */
  height: 3rem;
  flex-shrink: 0;
}

/* --- Херо ------------------------------------------------------------------ */
.ab-hero {
  position: relative;
  padding: 4rem 0 15.375rem; /* текстът на y=80; секцията свършва на 723 */
  overflow: clip;
}

.ab-hero-circles {
  position: absolute;
  top: -10rem;
  right: -18rem;
  width: 79.25rem; /* 1268px (дизайн 34:3995) */
  max-width: none;
  opacity: 0.8;
  pointer-events: none;
}

.ab-hero-glow {
  position: absolute;
  top: 28rem;
  right: -8rem;
  width: 39.25rem;  /* 628px (34:4047) */
  height: 26.9375rem;
  background: color-mix(in srgb, var(--color-gold) 33%, transparent);
  filter: blur(150px);
  pointer-events: none;
}

.ab-hero-title {
  position: relative;
  margin: 1rem 0 0; /* заглавието е на y=80 при padding-top 64 */
  max-width: 56.6875rem; /* 907px */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 4rem; /* D1 */
  line-height: 1.05;
  color: var(--color-white);
}

.ab-hero-lead {
  position: relative;
  margin: 1rem 0 0;
  max-width: 45.8125rem; /* 733px */
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

/* --- Лога ------------------------------------------------------------------ */
.ab-logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 4.125rem 0 1.75rem; /* дизайн 34:4075: 248px общо */
  overflow: clip;
}

.ab-logos-lead {
  margin: 0;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}

.ab-logos-row {
  display: flex;
  justify-content: center;
  width: max-content;
  margin-inline: auto;
}

/* Плейсхолдър — и в самия дизайн логата са placeholder възли; реалните
   идват от дизайн екипа */
.ab-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  width: 12.5rem;  /* 200px */
  height: 3.5rem;  /* 56px */
  color: color-mix(in srgb, var(--color-white) 55%, transparent);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
}

/* --- Мисия ----------------------------------------------------------------- */
.ab-mission {
  padding: 2.625rem 0 4rem; /* контейнерът е на y=42, pb-64 */
}

.ab-mission .ab-inner {
  display: flex;
  flex-direction: column;
  gap: 2.625rem; /* 42px до кадъра */
}

.ab-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.ab-split-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px */
  max-width: 27.6875rem; /* 443px */
}

.ab-split-text {
  margin: 0;
  max-width: 39.0625rem; /* 625px */
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

/* Кадърът с четирите карти върху него */
.ab-process {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 42.75rem; /* 684px */
  padding: 2.125rem; /* 34px */
  border-radius: 1.125rem; /* 18px */
  background: url("../../img/about-mission-bg.png") center / cover no-repeat;
}

.ab-process-cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-4); /* 16px */
}

.ab-process-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px икона → текст */
  flex: 1 1 0;
  min-width: 0;
  padding: 0.875rem; /* 14px */
  border-radius: var(--radius-panel);
  background: rgba(60, 60, 60, 0.56); /* дизайн 34:4178: точната стойност */
}

.ab-process-card img {
  display: block;
  width: 2rem;
  height: 2rem;
}

.ab-process-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px */
}

.ab-process-text h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400; /* Argent CF Regular (H5) */
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.ab-process-text p {
  margin: 0;
  font-size: var(--text-body-l); /* 17px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

/* --- Как се роди L2H ------------------------------------------------------- */
.ab-story {
  padding: 4rem 0;
}

.ab-story .ab-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7.875rem; /* 126px между колоните */
}

.ab-story-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 36rem; /* 576px */
  flex-shrink: 0;
}

.ab-story-text {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

.ab-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 39.375rem; /* 630px */
  flex: 1 1 0;
}

.ab-step {
  display: flex;
  gap: var(--space-4); /* релсата е 44 с точка 12 → текстът на x=60 */
}

.ab-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.75rem; /* 44px */
  flex-shrink: 0;
}

.ab-step-rail i {
  width: 3px;
  border-radius: 2px;
  background: var(--color-divider);
}

.ab-step-rail i:first-child {
  height: 2.625rem; /* 42px */
  flex-shrink: 0;
}

.ab-step:first-child .ab-step-rail i:first-child {
  height: 1.5rem; /* първата стъпка: 24px */
}

.ab-step-rail i:last-child {
  flex: 1;
  margin-top: 0.5rem;
}

.ab-step-rail b {
  width: 0.75rem;  /* 12px */
  height: 0.75rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

.ab-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px */
  padding: 2.625rem 0 1rem; /* заглавието застава до точката */
}

.ab-step:first-child .ab-step-body {
  padding-top: 1.6875rem; /* 27px */
}

.ab-step-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-xxl); /* 28px */
  line-height: 1.1;
  color: var(--color-white);
}

.ab-step-body p {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

/* --- Основателят ----------------------------------------------------------- */
.ab-founder {
  position: relative;
  min-height: 52.3125rem; /* 837px */
  background: #070708;    /* дизайн 34:4271 */
}

.ab-founder-photo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44.1875rem; /* 707px */
  background: url("../../img/about-kaloyan.png") left center / cover no-repeat;
}

/* дизайн: снимката потъва в фона надясно */
.ab-founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 59.76%, #070707 96.25%);
}

.ab-founder-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
  width: 42.9375rem; /* 687px */
  margin-left: 44.1875rem; /* започва на x=707 */
  padding: 3.71875rem 0; /* центрирано в 837: (837 − 718) / 2 */
}

.ab-founder-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4); /* 16px */
  border-radius: var(--radius-md); /* 8px */
  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
}

.ab-founder-name {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ab-founder-name h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl); /* 48px */
  line-height: 1.2;
  color: var(--color-white);
}

.ab-founder-role {
  margin: 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-base);
  line-height: normal;
  color: var(--color-gold);
}

.ab-founder-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px */
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

.ab-founder-bio p {
  margin: 0;
}

.ab-founder-stats {
  display: flex;
  align-items: stretch;
  gap: var(--space-4); /* 16px */
}

.ab-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px */
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-4); /* 16px */
  border-radius: 0.375rem; /* 6px */
  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
}

.ab-stat h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-xl); /* 20px */
  line-height: 1.2;
  color: var(--color-white);
}

.ab-stat p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}

/* --- Какво ни отличава ----------------------------------------------------- */
.ab-values {
  padding: 6.625rem 0 4rem; /* 64 + 42 от контейнера */
}

.ab-values .ab-inner {
  display: flex;
  flex-direction: column;
  gap: 2.625rem; /* 42px */
}

.ab-values-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Шахматната решетка: картите заемат точни клетки (дизайн 34:4324) */
.ab-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.ab-value {
  grid-column: var(--col);
  grid-row: var(--row);
  display: flex;
  flex-direction: column;
  min-height: 15.875rem; /* 254px */
  padding: 0.875rem; /* 14px */
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
}

.ab-value h3 {
  margin: 0;
  min-height: 5.125rem; /* заглавната зона: текстът винаги тръгва от y=96 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl); /* 24px */
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.ab-value p {
  margin: 0;
  font-size: var(--text-body-l);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}

/* --- Финален призив -------------------------------------------------------- */
.ab-final {
  padding: 4rem 0 8rem;
}

.ab-final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 48rem; /* 768px */
  margin: 0 auto;
  padding-inline: var(--space-4);
  text-align: center;
}

.ab-final-inner p {
  margin: 0;
  max-width: 44rem; /* 704px */
  font-size: var(--text-body-l);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}