/* =============================================================================
   Hero (Figma 1:331 „Desktop - 3"), четено на живо 2026-07-29.
   Дословна desktop геометрия: 1440×798, фото фон + оранжево-черен overlay
   (стоп 47.9%), декоративни вертикални линии, нав „хапче" горе, заглавие
   долу-ляво (711px) / водещ текст + CTA долу-дясно (565px).
   Mobile: разумен пас — Figma mobile вариант няма (проверено на живо).
   Само var(--…) стойности; активите са от Figma MCP export (static/img/).
   ============================================================================= */
.hero {
  position: relative;
  /* цял екран по указание на Възложителя (Figma рамката е фикс 798px);
     svh не брои браузърния chrome, vh е fallback за стари браузъри */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background-image: var(--gradient-hero-overlay), url("../../img/hero-bg.png");
  background-size: cover, cover;
  background-position: center, center;
}

.hero-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 1.625rem 3.375rem 0; /* дизайн 15:1806: нав хапчето е на y=26 */
}

.hero-logo {
  display: block;
}

.hero-logo img {
  display: block;
  /* активът е прозрачен и с реално съотношение 1.698 — рамката 207×48 в
     дизайна е ограждаща кутия, самото лого се рисува ~82×48 */
  width: auto;
  height: 48px;
}

/* Разметката на хапчето живее в pages/sections/nav.html и се ползва
   и от блога (Figma 15:1806 / 26:3166). */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex: 1;
  width: 100%;
  max-width: none; /* дизайн 15:1806: хапчето е цели 1332px и съдържа логото */
  background: color-mix(in srgb, var(--surface-veil) 40%, transparent);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem 0.625rem 1.375rem; /* 10 / 16 / 10 / 22 */
}

.hero-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem; /* 28px */
  margin: 0;
  line-height: 1.5; /* Body L Medium 17/1.5 = 26px ред */
  padding: 0;
  list-style: none;
}

.hero-nav-links a {
  font-family: var(--font-sans);
  font-size: var(--text-body-l);
  color: var(--color-white);
  font-weight: 500;   /* дизайн: Jost Medium 17px */
  text-decoration: none;
  white-space: nowrap;
}

.hero-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hero-nav-burger {
  display: none; /* само мобилно (mobile.css) */
}

.hero-nav-iconbtn {
  display: grid;
  place-items: center;
  padding: 0.625rem;
  background: color-mix(in srgb, var(--surface-veil) 40%, transparent);
  border-radius: var(--radius-md);
}

.hero-nav-iconbtn img {
  display: block;
}

.hero-body {
  position: relative;
  display: flex;
  align-items: flex-start; /* дизайн 15:1790: двете колони тръгват от y=536 */
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 3.375rem 3.4375rem; /* дизайн: 55px чисти отдолу */
}

.hero-title {
  margin: 0;
  max-width: 40.375rem; /* 646px (редизайн 15:1791) */
  font-family: var(--font-display);
  font-weight: 300;   /* Argent CF Light; placeholder-ът няма 300 — стойността е точната от дизайна */
  font-size: var(--text-5xl);
  line-height: 1.05;
  color: var(--color-white);
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 35.3125rem; /* 565px */
}

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

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 33.0625rem; /* 529px (дизайн 15:1795) */
  gap: 0.375rem;     /* 6px */
}

.hero-cta-main {
  width: 22.5rem; /* 360px (дизайн 15:1796) */
  height: 3rem;   /* 48px */
}

.hero-cta-secondary {
  width: 10.1875rem; /* 163px (дизайн 15:1805) */
  height: 3rem;      /* 48px */
  background: var(--surface-action-dark);
  border: 2px solid transparent; /* дизайн: 2px прозрачен кант, не 1px */
  color: var(--color-white);
}

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

  .hero-nav {
    max-width: none;
    flex-wrap: wrap;
  }

  .hero-nav-links {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .hero-body {
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--space-4);
    padding-top: var(--space-12);
  }

  .hero-title {
    font-size: var(--text-3xl);
  }

  .hero-cta {
    flex-wrap: wrap;
  }
}

/* =============================================================================
   Мобилното меню — Figma 55:893 (390 × 844).
   Цял екран върху градиент #020201 → #0b0b0c; X горе вдясно (същото хапче
   като хамбургера); списъкът е на y=88 при поле 15: разделител, шест реда
   Argent Light 30/1.2 ls .6 със стрелка 24 вдясно и 28px помежду им,
   разделител; 22px по-долу — златният CTA на цяла ширина.
   Редът „Влезте в профила си" от борда е пропуснат СЪЗНАТЕЛНО: без
   клиентски акаунти във Фаза 2 (решение 13.08.2026).
   ============================================================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: linear-gradient(to bottom, #020201, #0b0b0c);
  overflow-y: auto;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu-close {
  position: absolute;
  top: 1.25rem;    /* 20px */
  right: 0.9375rem; /* 331 + 44 = 375 при рамка 390 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  border: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-veil) 40%, transparent);
  cursor: pointer;
}

.mobile-menu-body {
  display: flex;
  flex-direction: column;
  gap: 1.375rem; /* дизайн: 22px списък → CTA блок */
  max-width: 26.25rem;
  margin: 5.5rem auto 2rem; /* списъкът е на y=88 */
  padding-inline: 0.9375rem;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 1.75rem; /* 28px */
  margin: 0;
  padding: 1.75rem 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.875rem; /* mobile H2: 30px */
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-decoration: none;
}

.mobile-menu-links img {
  flex-shrink: 0;
}

.mobile-menu-cta .btn {
  width: 100%;
  height: 2.875rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem;
  letter-spacing: 0.3px;
}

/* на десктоп менюто няма работа дори при отворено състояние в историята */
@media (min-width: 48em) {
  .mobile-menu {
    display: none;
  }
}