/* ZH Marketing, home-shell.css
   Началната страница в новата обвивка (13.10.2026): тъмен фон с линии, полупрозрачни заоблени карти.
   Общите части (хедър, бутони, .zh-card, последна секция, подвал) са в shell.css; картите на услугите в uslugi.css;
   картата за статия в home.css. Тук е само това, което е на началната. Зарежда се след тях. */

.h-sec { padding-block: clamp(44px, 5.6vw, 84px); color: var(--paper); }
.home-v3 .h-h2 { font-size: clamp(44px, 6.4vw, 96px); max-width: 14em; }
.h-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.h-sec .s-cards, .h-how, .p-blog .p-cards { margin-top: clamp(24px, 3vw, 40px); }
.h-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Първи панел: трите реда влизат един след друг ---------- */
.home-v3 .h-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.home-v3 .h-hero h1 { font-size: clamp(40px, 11.4vw, 88px); line-height: 0.98; text-wrap: wrap; }
.h-hero h1 span { display: block; white-space: nowrap; }
.h-hero h1 .sig { color: var(--signal); }
@media (min-width: 900px) { .home-v3 .h-hero h1 { font-size: clamp(72px, 8vw, 118px); line-height: 0.94; } }
@media (prefers-reduced-motion: no-preference) {
  .home-v3 .h-hero h1 { animation: none; }
  .h-hero h1 span { animation: zh-line-in 760ms var(--ease-out) calc(var(--l) * 90ms) both; }
  .h-hero .zh-hero-lead { animation-delay: 320ms; }
  .h-hero .h-btns { animation: zh-fade-in 600ms var(--ease-out) 420ms both; }
  /* Блоковете с data-rise в един ред влизат един след друг */
  .js .home-v3 [data-rise]:not(.is-in) { transition-delay: 0ms; }
  .js .home-v3 [data-rise] { transition-delay: calc(var(--d, 0) * 110ms); }
}

/* ---------- Резултат на клиент: кратък текст до екрана в стъклен прозорец ---------- */
.h-result-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .h-result-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.h-result-copy { display: grid; justify-items: start; gap: 18px; }
.h-tag { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--glass-line); background: rgba(12, 12, 12, 0.4); font-size: 14px; font-weight: 600; line-height: 1; }
.h-tag::before { content: ''; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--signal); }
.h-who { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--paper-72); }
.h-who strong { color: var(--paper); font-weight: 700; }
.h-who img { width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }
.h-result h2 { display: grid; gap: 10px; }
.h-result h2 .n { font-size: clamp(96px, 12vw, 176px); font-variant-numeric: lining-nums; white-space: nowrap; }
.h-result h2 .n small { font-size: 0.42em; font-weight: 800; color: var(--signal); }
.h-result h2 .t { font-family: var(--font); font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--paper-72); }
.h-result-copy .zh-btn { margin-top: 10px; }

.h-window { display: block; padding: 6px; color: var(--paper); text-decoration: none; cursor: zoom-in; box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.85); }
.h-window-bar { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 10px 6px 10px; font-size: 13px; font-weight: 600; color: var(--paper-72); }
.h-window-dots { display: flex; gap: 6px; }
.h-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(247, 247, 247, 0.22); }
.h-window-dots i:first-child { background: var(--signal); }
.h-window-open { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.h-window-open svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.h-window img { display: block; width: 100%; height: auto; background: #fff; border-radius: max(0px, calc(var(--r-card) - 6px)); }
@media (max-width: 599px) { .h-window-title { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .js .home-v3 .h-window.is-in { transition: opacity 700ms var(--ease-brand), transform var(--dur-base) var(--ease-out); transition-delay: 0ms; }
  .h-window:hover { transform: translateY(-4px); }
  .h-window:hover .h-window-open svg { transform: translateX(4px); }
}
.h-window:active { transform: scale(0.99); }

/* ---------- Как работим: един панел, разделен с тънки линии ---------- */
.h-how { display: grid; counter-reset: none; }
.h-how li { display: grid; grid-template-columns: auto minmax(0, 1fr) clamp(84px, 24vw, 120px); align-items: center; gap: 16px; max-width: none; padding: 16px 18px; }
.h-how li + li { border-top: 1px solid var(--glass-line); }
.h-how .num { font-size: clamp(44px, 12vw, 60px); color: var(--signal); min-width: 1.1em; }
.h-how h3 { order: 1; font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 6.4vw, 32px); line-height: 0.95; letter-spacing: 0; text-wrap: balance; }
.h-how .how-obj { order: 2; width: 100%; max-width: none; height: auto; overflow: visible; }
@media (min-width: 900px) {
  .h-how { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-how li { grid-template-columns: none; grid-template-rows: auto 1fr auto; align-items: start; gap: 0; padding: 22px 24px 26px; }
  .h-how li + li { border-top: 0; border-left: 1px solid var(--glass-line); }
  .h-how .num { font-size: clamp(52px, 5vw, 72px); }
  .h-how .how-obj { order: 0; align-self: center; padding: 26px 6% 30px; }
  .h-how h3 { order: 0; font-size: clamp(24px, 2.3vw, 34px); }
}
/* Илюстрациите са рисувани за светло поле (site.css); тук същите форми са в светло върху тъмно */
.home-v3 .how-obj { --ink: #F7F7F7; --ink-72: rgba(247, 247, 247, 0.6); --mist: rgba(247, 247, 247, 0.22); }
.home-v3 .obj-ads .c2 .t { fill: #0C0C0C; }

/* ---------- Кой стои зад ZH ---------- */
.h-founder { display: grid; overflow: hidden; }
.h-founder figure { background: var(--ink); }
.h-founder img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.15); }
.h-founder-body { display: grid; align-content: center; justify-items: start; gap: 20px; padding: clamp(22px, 4.4vw, 56px); }
.h-founder h2 { font-size: clamp(40px, 5.4vw, 84px); }
.h-founder p { max-width: 32em; font-size: 18px; line-height: 1.6; color: var(--paper-72); }
.h-founder .name { font-size: 15px; }
.h-founder .name strong { color: var(--paper); }
@media (min-width: 900px) {
  .h-founder { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .h-founder img { max-height: 620px; }
}
@media (max-width: 599px) { .h-founder .h-btns .zh-btn, .h-hero .h-btns .zh-btn { flex: 1 1 100%; } }

/* Диалогът с целия екран */
.zh-shell .dialog-inner img { border-radius: var(--r-cap); }
.zh-shell .dialog-close { border-radius: var(--r-pill); }

@media (prefers-reduced-motion: reduce) {
  .h-window, .h-window:hover, .h-window:active, .h-window-open svg { transform: none; transition: none; }
}