/* Главная-экосистема и ветки (build_hub.py, 23.10.2026). Токены — из landing.css / itogia.css:
   --ink, --ink-2, --primary, --tint, --line, --serif (Freigeist), --ui. */
.hub-sec{padding:clamp(72px,9vw,128px) 0;}
.hub-sec + .hub-sec{padding-top:0;}
.hub-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 22px;}
.hub-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#FFE24A;box-shadow:0 0 0 4px rgba(255,226,74,.25);}
.hub-h{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1.02;letter-spacing:-.018em;color:var(--ink);text-wrap:balance;margin:0;max-width:980px;}
.hub-h .it{font-style:italic;color:var(--primary);}
.hub-sub{font:400 clamp(17px,1.4vw,21px)/1.55 var(--ui);color:var(--ink-2);max-width:720px;margin:22px 0 0;}

/* Направления — карточки-витрины (переделаны 23.10.2026 по замечанию владельца «ужасно, переделать дизайнерски»):
   картинка — во всю ширину карточки в тонкой рамке, номер — таблеткой на картинке, пункты — овалами,
   кнопка «дальше» прижата к низу, у большой CRM и у «Сервисов» картинка во всю высоту справа, текст по центру. */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,4vw,56px);}
.hub-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:10px 10px 20px;background:#fff;border:1px solid #E3EAF2;border-radius:28px;color:var(--ink);text-decoration:none;
  transition:transform .35s var(--ease,ease),box-shadow .35s var(--ease,ease),border-color .35s;}
.hub-card:hover{transform:translateY(-4px);border-color:#C9D8EA;box-shadow:0 22px 50px -24px rgba(40,72,120,.35);}
.hub-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.hub-card > :not(.hub-art){margin-left:16px;margin-right:16px;}
.hub-num{position:absolute;top:22px;left:22px;z-index:2;font:700 12px/1 var(--ui);letter-spacing:.08em;color:var(--ink);background:rgba(255,255,255,.92);padding:8px 11px;border-radius:999px;box-shadow:0 6px 16px -10px rgba(23,24,26,.5);}
.hub-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--primary);margin-top:12px;}
.has-art .hub-ico{display:none;}
.hub-card h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,1.9vw,30px);line-height:1.08;letter-spacing:-.01em;margin:6px 0 0;}
.hub-card p{font:400 15.5px/1.5 var(--ui);color:var(--ink-2);margin:0;}
.hub-card ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
.hub-card li{font:500 13.5px/1.25 var(--ui);color:var(--ink);background:var(--tint);border:1px solid #DCE6F1;border-radius:999px;padding:8px 12px;}
.hub-more{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 15px/1 var(--ui);color:var(--ink);}
.hub-more svg{flex:none;width:40px;height:40px;padding:11px;box-sizing:border-box;border-radius:50%;background:#FFE24A;color:#17181A;transition:transform .25s;}
.hub-card:hover .hub-more svg{transform:translateX(3px);}
/* Большая карточка CRM — тёмная витрина */
.hub-card-big{grid-column:span 2;background:linear-gradient(135deg,#17181A 0%,#22303F 100%);border-color:#17181A;color:#fff;}
.hub-card-big:hover{border-color:#17181A;}
.hub-card-big .hub-ico{background:#FFE24A;color:#17181A;}
.hub-card-big h3{font-size:clamp(32px,2.8vw,44px);color:#fff;}
.hub-card-big p{color:rgba(255,255,255,.78);font-size:17px;max-width:520px;}
.hub-card-big li{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.hub-card-big .hub-more{color:#fff;}
/* Как работает вместе */
.hub-flow{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:hf;}
.hub-flow li{position:relative;counter-increment:hf;background:#fff;border:1px solid #E3EAF2;border-radius:24px;padding:22px 20px;}
.hub-flow li::before{content:counter(hf,decimal-leading-zero);display:block;font:600 12px/1 var(--ui);letter-spacing:.1em;color:var(--primary);margin-bottom:14px;}
.hub-flow li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-11px;width:8px;height:8px;border-top:2px solid #C9D8EA;border-right:2px solid #C9D8EA;transform:translateY(-50%) rotate(45deg);z-index:1;}
.hub-flow b{display:block;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.1;color:var(--ink);margin-bottom:8px;}
.hub-flow span{font:400 15px/1.5 var(--ui);color:var(--ink-2);}

/* Сервисы */
.hub-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3vw,44px);}
.bl-body .hub-tools{grid-template-columns:minmax(0,1fr);margin-top:14px;}
.hub-tool{display:flex;flex-direction:column;gap:10px;padding:24px 24px 22px;background:var(--tint);border:1px solid #D6E2EF;border-radius:24px;color:var(--ink);text-decoration:none;transition:border-color .25s,background .25s;}
.hub-tool:hover{border-color:var(--primary);background:#fff;}
.hub-tool b{font:700 19px/1.25 var(--ui);color:var(--ink);}
.hub-tool span{font:400 15px/1.5 var(--ui);color:var(--ink-2);}
.hub-tool em{margin-top:auto;font:700 15px/1 var(--ui);font-style:normal;color:var(--primary);}
.hub-all{margin:22px 0 0;font:600 16px/1 var(--ui);}
.hub-all a{color:var(--primary);}

/* Вопросы */
.hub-faq{margin-top:32px;display:grid;gap:10px;max-width:920px;}
.hub-faq-i{background:#fff;border:1px solid #E3EAF2;border-radius:20px;padding:0 22px;}
.hub-faq-i summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;position:relative;font:600 18px/1.35 var(--ui);color:var(--ink);}
.hub-faq-i summary::-webkit-details-marker{display:none;}
.hub-faq-i summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 26px/1 var(--ui);color:var(--primary);transition:transform .25s;}
.hub-faq-i[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.hub-faq-i p{margin:0 0 20px;font:400 16px/1.6 var(--ui);color:var(--ink-2);}

/* Ветки на каркасе блога: карточки возможностей */
.hub-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 10px;}
.hub-mini-i{background:#fff;border:1px solid #E3EAF2;border-radius:20px;padding:18px 18px 16px;}
.hub-mini-i b{display:block;font:700 16.5px/1.3 var(--ui);color:var(--ink);margin-bottom:6px;}
.hub-mini-i span{display:block;font:400 15px/1.5 var(--ui);color:#5F6875;}

@media (max-width:1100px){
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hub-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hub-flow li::after{display:none;}
  .hub-tools{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
  .hub-grid{grid-template-columns:minmax(0,1fr);}
  .hub-card-big{grid-column:auto;}
  .hub-card-big ul{grid-template-columns:minmax(0,1fr);}
  .hub-flow{grid-template-columns:minmax(0,1fr);}
  .hub-mini{grid-template-columns:minmax(0,1fr);}
  .hub-card{padding:24px 20px 20px;border-radius:24px;}
}

/* Первый экран главной: «ДЛЯ МАРКЕТИНГА» длиннее прежнего «ДЛЯ РОСТА» — на телефоне строка
   упиралась в правый край. Размер ведём от ширины экрана (ширина строки ≈ 6,1 кегля). */
@media (max-width:560px){
  .page-shell .hero .hero-display .hl.hl-it,
  .page-shell .hero .hero-display .hl.hl-it .line-in{font-size:min(57.792px, calc(16vw - 9px));}
}

/* Окно справа в первом экране главной: вместо макета воронки — вступительный ролик Итогии */
.hero-showcase .hub-video{position:relative;aspect-ratio:16/9;background:#0A0E20;overflow:hidden;}
.hero-showcase .hub-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* Разделы главной — во всю ширину экрана (владелец 23.10), с полями как у первого экрана */
.hub-sec .wrap{max-width:none;padding-left:clamp(20px,4vw,72px);padding-right:clamp(20px,4vw,72px);}
.hub-sec .hub-h{max-width:1100px;}
@media (min-width:1700px){.hub-grid{gap:20px;}.hub-card{padding:34px 32px 30px;}}

/* Картинка карточки (assets/hub/<id>.webp, 3:2) — во всю ширину карточки, в тонкой рамке; у CRM и «Сервисов» справа во всю высоту */
.hub-art{display:block;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:var(--tint);}
.hub-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease,ease);}
.hub-card:hover .hub-art img{transform:scale(1.04);}
.hub-card-wide{grid-column:1 / -1;}
@media (min-width:1101px){
  .hub-card-big.has-art,.hub-card-wide.has-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:center;padding:10px 10px 10px 0;}
  .hub-card-big.has-art > :not(.hub-art),.hub-card-wide.has-art > :not(.hub-art){grid-column:1;margin-left:36px;margin-right:8px;}
  .hub-card-big.has-art .hub-art,.hub-card-wide.has-art .hub-art{grid-column:2;grid-row:1 / span 7;aspect-ratio:auto;height:100%;min-height:380px;}
  .hub-card-big.has-art .hub-num,.hub-card-wide.has-art .hub-num{left:auto;right:22px;}
  .hub-card-big.has-art h3,.hub-card-wide.has-art h3{margin-top:0;}
  .hub-card-big.has-art .hub-more,.hub-card-wide.has-art .hub-more{margin-top:18px;justify-content:flex-start;gap:14px;}
  .hub-card-wide.has-art{padding:10px 10px 10px 0;}
}