/* Hero главной страницы (задача 2, редизайн по макету «cst начальная»).
   Разметка конструктора (inline-стили + кастомные теги sc-raw и x-dc) переписана в чистые
   классы под скоуп .home-hero: адаптив, hover без runtime, акцент приведён к брендовому #11AE88.
   Шрифт Manrope подключается в base.html (Google Fonts). */

.home-hero{
    --hh-green:#11AE88; --hh-green-d:#0E9476; --hh-green-dd:#0b7a5b;
    --hh-ink:#16241f; --hh-soft:#5b6b64; --hh-soft2:#3d4f48; --hh-mut:#8b9a93;
    --hh-line:#e3ebe7; --hh-line2:#eef4f1; --hh-bg-soft:#f7faf9;
    font-family:'Manrope','Segoe UI',system-ui,sans-serif;
    color:var(--hh-ink);
    position:relative; z-index:0;
    -webkit-font-smoothing:antialiased;
}
/* Фон вынесен на ::before и поднят на высоту хедер-спейсера (body{padding-top:86px},
   константа на всех брейкпоинтах), чтобы зелёный градиент доходил до самого верха
   страницы и просвечивал сквозь стеклянный хедер-«остров», а не обрывался белой
   полосой под ним. Абсолютный слой (z-index:-1 внутри стек-контекста .home-hero,
   z-index:0) не участвует в потоке — контент и Django-сообщения не сдвигаются. */
.home-hero::before{
    content:''; position:absolute; left:0; right:0; top:-86px; bottom:0;
    z-index:-1; pointer-events:none;
    background:radial-gradient(1100px 560px at 88% 2%, rgba(17,174,136,.13), rgba(255,255,255,0) 62%),
               linear-gradient(180deg,#f4f9f6,#ffffff 78%);
}
.home-hero *{ box-sizing:border-box; }

.hh-wrap{
    max-width:1180px; margin:0 auto; padding:64px 0 0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:56px; align-items:center;
}

/* ── левая колонка: текст + CTA ── */
.hh-left{ display:flex; flex-direction:column; align-items:flex-start; }
.hh-badge{
    display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--hh-line);
    color:var(--hh-green-dd); font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:20px; margin-bottom:22px;
}
.hh-badge i{ width:7px; height:7px; border-radius:50%; background:var(--hh-green); animation:hhPulse 2s infinite; }
@keyframes hhPulse{ 0%{box-shadow:0 0 0 0 rgba(17,174,136,.45)} 70%{box-shadow:0 0 0 8px rgba(17,174,136,0)} 100%{box-shadow:0 0 0 0 rgba(17,174,136,0)} }

.hh-title{ font-size:46px; line-height:1.08; font-weight:800; letter-spacing:-.03em; margin:0 0 18px; }
.hh-title em{ font-style:normal; color:var(--hh-green-d); }
.hh-lead{ font-size:17px; line-height:1.55; color:var(--hh-soft); max-width:440px; margin:0 0 28px; }

.hh-cta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:34px; }
.hh-btn{ display:inline-flex; align-items:center; gap:10px; border-radius:12px; font-weight:700; font-size:15.5px;
    padding:16px 30px; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.hh-btn--primary{ background:var(--hh-green); color:#fff; box-shadow:0 10px 24px -10px rgba(17,174,136,.75); }
.hh-btn--primary:hover{ background:var(--hh-green-d); color:#fff; }
.hh-btn--primary svg{ width:16px; height:16px; }
.hh-btn--ghost{ background:#fff; color:var(--hh-ink); padding:16px 28px; border:1.5px solid #d7e5df;
    flex-direction:column; align-items:flex-start; gap:1px; }
.hh-btn--ghost:hover{ border-color:var(--hh-green); color:var(--hh-green-dd); }
.hh-btn--ghost small{ font-size:11.5px; font-weight:600; color:var(--hh-mut); }

.hh-bullets{ display:flex; flex-wrap:wrap; gap:10px 22px; border-top:1px solid var(--hh-line); padding-top:20px; width:100%; max-width:490px; }
.hh-bullet{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--hh-soft2); font-weight:600; }
.hh-bullet svg{ width:15px; height:15px; flex-shrink:0; }

/* ── правая колонка: карточки-визуал ── */
.hh-right{ display:flex; flex-direction:column; gap:16px; }
.hh-card{ background:#fff; border:1px solid var(--hh-line); border-radius:16px;
    box-shadow:0 24px 60px -34px rgba(11,80,60,.4); overflow:hidden; }
.hh-card-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--hh-line2); }
.hh-card-head b{ font-size:15px; font-weight:700; display:block; }
.hh-card-head span{ font-size:12px; color:var(--hh-soft); }
.hh-card-head .hh-pill{ font-size:11px; font-weight:700; color:var(--hh-green-dd); background:#eaf6f1; padding:5px 10px; border-radius:7px; }

/* .home-hero-префикс + сбросы: глобальные table/th/td/tr в style.css задают зелёную шапку
   (th{background:#11AE88}), рамки, padding:15px 20px, margin-top:100px, tr:last-child фон —
   всё это затекает в мок-таблицу, если не переопределить. */
.home-hero .hh-table{ width:100%; border-collapse:collapse; font-size:13px; margin:0; box-shadow:none; border:0; border-radius:0; overflow:visible; }
.home-hero .hh-table th, .home-hero .hh-table td{ background:transparent; border:0; width:auto; }
.home-hero .hh-table tr:nth-child(even), .home-hero .hh-table tr:last-child{ background:transparent; }
.home-hero .hh-table th{ padding:9px 8px; border-bottom:1px solid var(--hh-line2); font-weight:600; color:inherit; text-align:center; }
.home-hero .hh-table td{ text-align:center; padding:9px 8px; border-bottom:1px solid #f2f7f5; }
.home-hero .hh-table th.hh-rowlabel, .home-hero .hh-table td.hh-rowlabel{ text-align:left; font-size:11.5px; font-weight:600; color:var(--hh-soft); padding:9px 18px; }
.home-hero .hh-table tr:last-child td{ border-bottom:0; }
.hh-sup{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.hh-sup i{ width:28px; height:28px; border-radius:8px; background:var(--hh-line); color:var(--hh-soft);
    font-size:11px; font-weight:700; font-style:normal; display:flex; align-items:center; justify-content:center; }
.hh-sup span{ font-size:12px; font-weight:600; color:var(--hh-soft); }

.hh-stat{ margin:0 36px; background:#fff; border:1px solid var(--hh-line); border-radius:14px;
    box-shadow:0 18px 40px -22px rgba(11,80,60,.35); padding:14px 18px; display:flex; flex-direction:column; gap:11px; }
.hh-stat-head{ display:flex; align-items:baseline; justify-content:space-between; }
.hh-stat-head b{ font-size:13.5px; font-weight:700; }
.hh-stat-head span{ font-family:ui-monospace,monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--hh-mut); }
.hh-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hh-stat-cell{ background:var(--hh-bg-soft); border:1px solid var(--hh-line2); border-radius:9px; padding:9px 8px;
    display:flex; flex-direction:column; gap:3px; align-items:center; }
.hh-stat-cell b{ font-size:17px; font-weight:800; line-height:1; }
.hh-stat-cell b.g{ color:var(--hh-green-d); } .hh-stat-cell b.o{ color:#f59f00; }
.hh-stat-cell span{ font-size:10.5px; color:var(--hh-soft); text-align:center; line-height:1.2; }

.hh-mini{ margin:0 36px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hh-mini-card{ background:#fff; border:1px solid var(--hh-line); border-radius:14px;
    box-shadow:0 18px 40px -22px rgba(11,80,60,.35); padding:13px 15px; display:flex; align-items:center; gap:11px; }
.hh-mini-ic{ width:32px; height:32px; border-radius:9px; background:#eaf6f1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hh-mini-ic svg{ width:17px; height:17px; }
.hh-mini-card b{ font-size:13px; font-weight:700; display:block; }
.hh-mini-card span{ font-size:11.5px; color:var(--hh-soft); line-height:1.3; }

/* ── лента отраслей ── */
.hh-industries{ margin-top:52px; border-top:1px solid var(--hh-line); background:rgba(255,255,255,.7); }
.hh-industries-inner{ max-width:1180px; margin:0 auto; padding:18px 0; display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; }
.hh-industries-inner > b{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--hh-mut); white-space:nowrap; font-weight:600; }
.hh-tags{ display:flex; gap:8px; flex:1; min-width:0; flex-wrap:wrap; }
.hh-tags span{ font-size:12.5px; font-weight:600; color:var(--hh-soft2); background:#fff; border:1px solid var(--hh-line);
    padding:6px 11px; border-radius:20px; white-space:nowrap; }
.hh-tags span.hh-more{ color:var(--hh-mut); border-style:dashed; border-color:#d7e5df; }

/* ── адаптив ── */
/* боковые отступы синхронизированы с .container проекта (0 / 20 / 10 по брейкам),
   чтобы Hero был выровнен с хедером и остальными секциями главной, а не сдвинут внутрь на 56px */
@media (max-width:1250px){
    .hh-wrap{ padding-left:20px; padding-right:20px; }
    .hh-industries-inner{ padding-left:20px; padding-right:20px; }
}
@media (max-width:960px){
    .hh-wrap{ grid-template-columns:1fr; gap:36px; padding-top:48px; }
    .hh-right{ max-width:560px; }
    .hh-title{ font-size:38px; }
    .hh-industries-inner{ padding-top:16px; padding-bottom:16px; }
}
@media (max-width:600px){
    .hh-wrap{ padding-top:36px; }
    .hh-title{ font-size:30px; }
    .hh-lead{ font-size:15.5px; }
    .hh-cta{ width:100%; }
    .hh-btn{ flex:1; justify-content:center; }
    .hh-btn--ghost{ align-items:center; }
    .hh-stat, .hh-mini{ margin:0; }
    .hh-mini{ grid-template-columns:1fr; }
    .hh-table{ font-size:12px; }
    .hh-table th.hh-rowlabel, .hh-table td.hh-rowlabel{ padding:9px 10px; }
    .hh-table th, .hh-table td{ padding:9px 5px; }
    /* лента отраслей: на мобиле метку кладём НАД тегами (в строку теги жались в узкую
       колонку справа), align-items:stretch — теги на всю ширину и аккуратно переносятся */
    .hh-industries-inner{ flex-direction:column; align-items:stretch; gap:10px; padding-top:14px; padding-bottom:14px; }
}
@media (max-width:475px){
    .hh-wrap{ padding-left:10px; padding-right:10px; }
    .hh-industries-inner{ padding-left:10px; padding-right:10px; }
}