/* =============================================================================
   Секция „Какво получаваш" + proof карти (Figma 1:709 + 1:719), четено на
   живо 2026-07-29. Ляв стълб 439px (голяма карта 428px + градиентен CTA),
   десен стълб: две широки карти 238px. Мокъпите са ИЛЮСТРАТИВНИ (по
   подразбиране, до друго решение): gauge и „L2H Score" са export
   изображения, фалшивият score панел и бар-чартът са прост DOM с
   aria-hidden. Копи корекции „ти": „Бизнесът Ви получава"→„Бизнесът ти
   получава", „какво да направите"→„какво да направиш". Невидимият „0"
   span хак от дизайна е пропуснат (рендерира се просто „0").
   Компромиси: разделителните линии са с --color-line (асетът-линия няма
   четим цвят); CTA градиентът е с общия ъгъл 156° (в дизайна тук е
   159.88° — ЧЕТВЪРТИ ъгъл, докладван). Mobile: разумен пас.
   ============================================================================= */
.proof {
  padding: 0; /* дизайн 15:2172/15:2182: отстъпите са в децата */
}

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

.proof-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* дизайн: 24px */
  padding-top: var(--space-16);   /* дизайн: pt-[64px] */
  padding-bottom: var(--space-8); /* дизайн: pb-[32px] */
  max-width: 47.3125rem; /* 757px */
}

.proof-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.4; /* caption-XL → ред 20px */
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
}

.proof-heading {
  margin: 0;
  max-width: 36.4375rem; /* 583px */
  font-family: var(--font-display);
  font-weight: 300;   /* Argent CF Light; placeholder-ът няма 300 — стойността е точната от дизайна */
  font-size: var(--text-4xl);
  line-height: 1.2;
  color: var(--color-white);
}

.proof-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);          /* дизайн: 24px */
  padding-bottom: var(--space-16); /* дизайн: pb-[64px] */
}

.proof-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* дизайн: 32px */
  width: 27.4375rem; /* 439px */
  flex-shrink: 0;
}

.proof-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1 1 0;
  min-width: 0;
}

.proof-card {
  position: relative;
  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
  border-radius: var(--radius-panel);
  overflow: clip;
}

.proof-card-score {
  height: 30.75rem; /* 492px (дизайн 15:2184) */
}

.proof-card-wide {
  height: 16.875rem; /* 270px (дизайн 15:2194/15:2195) */
}

.proof-blur {
  position: absolute;
  background: var(--color-accent-orange);
  filter: blur(150px);
  pointer-events: none;
}

.proof-blur-score {
  width: 28.625rem;
  height: 12.8125rem;
  left: -0.625rem;
  top: 26.6875rem; /* избликва изпод долния ръб, както в дизайна */
}

.proof-blur-brake {
  width: 28.625rem;
  height: 12.8125rem;
  left: 27.875rem;
  top: 1rem;
}

.proof-blur-plan {
  width: 29.6875rem;
  height: 13rem;
  left: -6.875rem;
  top: 4.5625rem;
}

.proof-card-text {
  position: absolute;
  top: 1.5rem;  /* дизайн 15:2390: 24px */
  left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem; /* дизайн: 11px */
  max-width: 24.4375rem; /* 391px */
  max-width: 23.375rem; /* 374px */
}

.proof-card-text-brake {
  top: 2rem;    /* широките карти са на y=32 */
  left: 1.5rem; /* дизайн: 24px */
  max-width: 22.5rem; /* 360px */
  height: 12.875rem;  /* 206px */
  justify-content: space-between;
  gap: 0;
}

.proof-card-text-brake .proof-card-desc {
  max-width: 21.375rem; /* 342px */
}

.proof-card-text-plan {
  top: 2rem;
  left: auto;
  right: 1.375rem;
  max-width: 21.6875rem; /* 347px */
  height: 12.875rem;  /* 206px */
  justify-content: space-between;
  gap: 0;
}

.proof-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300; /* Argent CF Light */
  font-size: var(--text-xxl); /* дизайн: 28px */
  line-height: 1.1;
  color: var(--color-white);
}

.proof-card-desc {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400; /* Jost Regular */
  line-height: 1.5;
  color: var(--color-white);
}

.proof-gauge {
  position: absolute;
  left: 1.125rem;
  top: 13.6875rem;
  width: 24.9375rem;
  height: auto;
}

.proof-wordmark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.0625rem;
  height: 1.4375rem;
  width: auto;
}

.proof-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

/* --- Мокъп score панелът (илюстрация, aria-hidden) ------------------------ */
.proof-mock-panel {
  position: absolute;
  left: 28.75rem; /* 460px */
  top: 0.9375rem;
  width: 23.9375rem; /* 383px */
  height: 13.0625rem; /* 209px */
  background: color-mix(in srgb, var(--color-mock-gray) 40%, transparent);
  border-radius: var(--radius-md);
  overflow: clip;
}

.proof-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.75rem 0.5rem 0.875rem;
  border-bottom: 1px solid var(--color-line);
}

.proof-mock-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-white);
}

.proof-mock-rows {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem; /* дизайн: 13px */
  padding: 0.6875rem 0.875rem 0;
}

.proof-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-white);
}

.proof-mock-row-main {
  background: color-mix(in srgb, var(--color-white) 18%, transparent);
  border-radius: var(--radius-md);
  padding: 0.45rem;
}

.proof-mock-meter {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.proof-mock-pill {
  position: relative;
  display: block;
  width: 5.4rem; /* 86.5px */
  height: 1.35rem;
  background: color-mix(in srgb, var(--color-mock-gray) 59%, transparent);
  border-radius: 999px;
  overflow: clip;
}

.proof-mock-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3.5rem; /* 56px — мокъп стойността „52" */
  background: color-mix(in srgb, var(--color-gold-bright) 72%, transparent);
  border-radius: 999px;
}

/* --- Мокъп бар-чартът (илюстрация, aria-hidden) --------------------------- */
.proof-mock-chart {
  position: absolute;
  left: 1.4375rem; /* 23px */
  top: 7.4375rem; /* 119px */
  width: 26.3125rem; /* 421px */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}

.proof-mock-bar {
  position: relative;
  display: flex;
  flex-direction: column;
}

.proof-mock-col {
  width: 2.625rem; /* 42px */
  height: 2.9375rem; /* 47px */
  background: var(--text-faint);
  border-radius: var(--radius) var(--radius) 0 0;
}

.proof-mock-label {
  position: absolute;
  top: 3.875rem; /* под базовата линия, дизайн: y181 при линия y167 */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-white);
  white-space: nowrap;
}

/* --- Mobile (разумен пас, без Figma вариант) ------------------------------ */
@media (max-width: 64em) {
  .proof-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .proof-left {
    width: 100%;
  }

  .proof-card-score,
  .proof-card-wide {
    height: auto;
    min-height: 14rem;
    padding-bottom: 1.5rem;
  }

  .proof-card-text,
  .proof-card-text-plan {
    position: static;
    padding: 1.5rem 1.5rem 0;
    max-width: none;
  }

  .proof-gauge,
  .proof-wordmark {
    position: static;
    transform: none;
    display: block;
    margin: 1rem auto 0;
    max-width: 90%;
  }

  .proof-mock-panel {
    position: static;
    margin: 1rem 1.5rem 0;
    width: auto;
    height: auto;
    padding-bottom: 0.875rem;
  }

  .proof-mock-chart {
    position: static;
    margin: 1.5rem 1.5rem 2.5rem;
    width: auto;
  }

  .proof-heading {
    font-size: var(--text-3xl);
  }
}