/* ============================================================
   Главная (CZ + RU) — светлый редизайн 10.2026.
   Цвета только через custom properties из DS_TOKENS (корень DSPage).
   ============================================================ */

.h-wrap { max-width: 1280px; margin: 0 auto; }

/* --- типографика --- */
.h-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.h-mono-sm { font-size: 11px; }
.h-h1 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -.03em;
  margin: 22px 0 0; color: var(--text);
}
.h-h2 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(32px, 3.9vw, 54px); line-height: 1.05; letter-spacing: -.025em;
  margin: 14px 0 0; color: var(--text);
}
.h-h3 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; letter-spacing: -.02em; margin: 0;
}
.h-h3 a { color: inherit; }
.h-lead {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55; color: var(--text-body); margin: 22px 0 0; max-width: 620px;
}
.h-lead-sm { font-size: clamp(16px, 1.2vw, 18px); margin-top: 16px; }
.h-body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  color: var(--text-body); margin: 0;
}
.h-body-lg { font-size: clamp(16px, 1.25vw, 18px); margin-top: 18px; }

/* --- HERO --- */
.h-hero { padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(48px, 6vw, 96px); background: var(--bg); }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.h-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.h-stats {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px clamp(28px, 3.5vw, 48px);
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-soft);
}
.h-stat-big { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; color: var(--text); }
.h-stat-small { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* веер рилсов справа */
.h-fan { position: relative; height: 500px; max-width: 520px; margin-left: auto; }
.h-fan-bg { display: none; }
.h-fan-card { position: absolute; top: 50%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--surface-muted); box-shadow: var(--shadow-float); display: block; }
.h-fan-card img, .h-fan-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.h-fan-l { width: 34%; left: 6%; transform: translateY(-46%) rotate(-7deg); }
.h-fan-r { width: 34%; right: 4%; transform: translateY(-46%) rotate(7deg); }
.h-fan-c { width: 42%; left: 50%; transform: translate(-48%, -52%); z-index: 2; box-shadow: var(--shadow-device); border: 4px solid var(--bg); }
.h-fan-l, .h-fan-r { transition: transform .35s ease; }
.h-fan-l:hover { transform: translateY(-48%) rotate(-9deg); }
.h-fan-r:hover { transform: translateY(-48%) rotate(9deg); }
.h-fan .h-reel-views { z-index: 3; }
.h-fan .h-channels { z-index: 4; }
.h-gad-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg); color: var(--text-muted); font-size: 12px; }
.h-gad-search span { color: var(--text); }
.h-gad-label { font-size: 10.5px; color: var(--text-muted); margin-top: 10px; }
.h-gad-label b { color: var(--text); font-weight: 600; }
.h-gad-title { font-size: 13px; font-weight: 600; color: var(--google-link); line-height: 1.3; margin-top: 4px; }
.h-channels {
  position: absolute; right: 0; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 11px 18px;
  font: 600 12.5px 'IBM Plex Sans', system-ui, sans-serif;
}
.h-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-soft); flex: none; }

/* --- полоса принципов --- */
.h-strip { background: var(--ink); color: #fff; overflow: hidden; padding: 16px 0; }
.h-strip-track { display: flex; align-items: center; width: max-content; animation: h-strip 38s linear infinite; }
.h-strip-item { font: 500 14px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 0 clamp(28px, 4vw, 56px); }
.h-strip-sep { color: var(--accent-soft); font-size: 14px; }
@keyframes h-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h-strip-track { animation: none; } }

/* --- заголовок секции + якоря --- */
.h-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.h-anchors { display: flex; gap: 8px; flex-wrap: wrap; }
.h-anchor {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--border-card); background: var(--bg); color: var(--text);
  font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; white-space: nowrap; transition: border-color .2s;
}
.h-anchor:hover { border-color: var(--ink); }

/* --- карточки услуг --- */
.h-card { background: var(--bg); border: 1.5px solid var(--border-card); border-radius: 28px; box-shadow: var(--shadow-card); }
.h-svc-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.h-svc-cell { flex: 1 1 calc(50% - 10px); min-width: 0; display: flex; }
.h-svc { width: 100%; padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; scroll-margin-top: 96px; }
.h-svc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.h-num { font: 500 13px 'IBM Plex Mono', ui-monospace, monospace; color: var(--text-muted); letter-spacing: .04em; }
.h-tag { font: 500 13px 'IBM Plex Sans', system-ui, sans-serif; color: var(--accent-strong); background: var(--surface-accent); border-radius: 999px; padding: 6px 12px; }
.h-svc-lead { font: 500 18px/1.4 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); margin: 10px 0 14px; }
.h-deliv { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.h-deliv span { font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; background: var(--surface-muted); color: var(--text); border-radius: 10px; padding: 8px 12px; }
.h-deliv-plain { margin-top: 24px; }
.h-svc-media { margin-top: 20px; }
.h-svc-foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 400 14px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text-muted);
}
.h-svc > .h-svc-media + .h-svc-foot, .h-svc > .h-deliv + .h-svc-foot { margin-top: 28px; }
.h-svc-price b { font-size: 18px; font-weight: 700; color: var(--text); }
.h-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); }
.h-more:hover { color: var(--accent); }

/* залетевшие рилсы на карточке SMM */
.h-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h-reel { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--surface-muted); }
.h-reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.h-reels:hover .h-reel img { transform: scale(1.03); }
.h-reel-views {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--ink); color: var(--text-on-dark); border-radius: 999px; padding: 5px 9px;
  font: 600 12px 'IBM Plex Sans', system-ui, sans-serif;
}
.h-svc-media + .h-deliv { margin-top: 14px; }

/* мини-превью Meta */
.h-mini-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-mini-ad { background: var(--surface-muted); border-radius: 14px; padding: 10px; }
.h-mini-ad-head { font: 400 11px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text-muted); margin-bottom: 8px; }
.h-mini-ad-head b { color: var(--text); font-weight: 600; }
.h-mini-ad img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
/* мини-выдача Google */
.h-serp { background: var(--surface-muted); border-radius: 18px; padding: 16px; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.h-serp .h-gad-title { font-size: 16px; margin-top: 6px; }
.h-serp-desc { font-size: 13px; color: var(--text-body); margin-top: 8px; line-height: 1.5; }
/* миниатюры лендингов */
.h-lands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h-lands figure { margin: 0; }
.h-lands-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--surface-muted); aspect-ratio: 4 / 3; }
.h-lands-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.h-lands figcaption { font: 400 12px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text-muted); margin-top: 6px; }

/* лавандовый баннер */
.h-banner {
  margin-top: 20px; background: var(--surface-accent); border-radius: 28px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.h-banner-t { font: 700 clamp(22px, 2vw, 28px)/1.2 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: -.02em; color: var(--text); }
.h-banner .h-body { margin-top: 8px; max-width: 620px; }

/* --- шаги --- */
.h-steps { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.h-step { border-top: 2px solid var(--ink); padding-top: 18px; }
.h-step-n { font: 500 14px 'IBM Plex Mono', ui-monospace, monospace; color: var(--accent); }
.h-step-t { font: 700 clamp(19px, 1.5vw, 21px)/1.25 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: -.01em; margin: 10px 0 8px; color: var(--text); }

/* --- Reporting --- */
.h-rep-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.h-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.h-tile { background: var(--bg); border: 1.5px solid var(--border-card); border-radius: 18px; padding: 18px; height: 100%; }
.h-tile-t { font: 700 17px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); }
.h-tile-b { font: 400 14px/1.45 'IBM Plex Sans', system-ui, sans-serif; color: var(--text-body); margin-top: 6px; }
.h-window { margin: 0; background: var(--bg); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-float); border: 1.5px solid var(--border-card); }
.h-window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.h-window-bar span { width: 9px; height: 9px; border-radius: 999px; background: var(--border-card); }
.h-window-bar em { font: 400 12px 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; color: var(--text-muted); margin-left: 8px; }
.h-window img { width: 100%; }

/* --- основатель --- */
.h-founder { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.h-portrait { aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--surface-muted); }
.h-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.h-quote {
  margin: 26px 0 0; padding: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; color: var(--text);
}

/* --- адаптив --- */
@media (max-width: 1080px) {
  .h-hero-grid { grid-template-columns: 1fr; }
  .h-fan { margin: 8px auto 0; }
}
@media (max-width: 900px) {
  .h-steps { grid-template-columns: 1fr 1fr; }
  .h-rep-grid, .h-founder { grid-template-columns: 1fr; }
  .h-portrait { max-width: 420px; }
}
@media (max-width: 768px) {
  .h-svc-cell { flex-basis: 100%; }
  .h-stats { grid-template-columns: 1fr 1fr; }
  .h-stats .h-stat:last-child { grid-column: 1 / -1; }
  .h-anchors { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
  .h-anchors::-webkit-scrollbar { display: none; }
  .h-sec-head > div:last-child { width: 100%; }
  .h-banner .ds-btn { width: 100%; }
  /* веер на телефоне: ~400px */
  .h-fan { height: 410px; max-width: 360px; margin: 0 auto; }
  .h-channels { bottom: 6px; padding: 10px 14px; font-size: 12px; }
  .h-steps { grid-template-columns: 1fr; gap: 0; }
  .h-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 16px 0 18px; border-top-width: 1.5px; }
  .h-step-n { grid-row: 1 / span 2; padding-top: 3px; }
  .h-step-t { margin-top: 0; }
  .h-tiles { gap: 10px; }
  .h-tile { padding: 14px; }
  .h-strip-item { font-size: 12px; }
}
@media (max-width: 420px) {
  .h-mini-ads { grid-template-columns: 1fr 1fr; gap: 8px; }
  .h-lands { gap: 6px; }
}

/* RU-заголовок длиннее чешского: на десктопе держим его в 3 строки (замер 20.10.2026: ≤64px при колонке 717px) */
html[lang="ru"] .h-h1 { font-size: clamp(36px, 4.3vw, 62px); }


/* ============================================================
   v2 — объём (20.10.2026)
   ============================================================ */
.h-hero { padding-top: clamp(44px, 5.5vw, 80px); }
.h-mono { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-soft); }
.h-h1 { line-height: .98; letter-spacing: -.035em; }
.h-hero-ctas .ds-btn { box-shadow: var(--shadow-float); }
.h-hero-ctas .ds-btn-ghost { background: var(--panel); border-color: var(--panel); }
.h-stats { border-top: none; padding-top: 0; margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.h-stat { background: var(--panel); border-radius: 20px; box-shadow: var(--shadow-soft); padding: 14px 18px; min-width: 150px; }
.h-stat-apricot { background: var(--apricot); }
.h-stat-apricot .h-stat-small { color: var(--on-apricot); }
/* веер поверх 3D */
.h-fan-card { z-index: 2; }
.h-fan-c { z-index: 3; }
.h3d-torus { width: 540px; right: -150px; top: 6%; z-index: 0; }
.h3d-sph-a { width: 96px; left: -6%; top: 22%; z-index: 4; }
.h3d-sph-v { width: 54px; right: 30%; top: -2%; z-index: 0; }
.h3d-capsule { width: 190px; right: -40px; bottom: 2%; z-index: 4; }
.h-fan .h-channels { z-index: 5; }
/* полоса принципов — тёмная пилюля */
.ds-section-strip { width: calc(100% - 2 * var(--panel-gap)); max-width: 1360px; margin: 16px auto 0; border-radius: 999px; }
.h-strip-sep { color: var(--apricot); }
/* карточки услуг — без рамок */
.h-card { background: var(--fill); border: none; border-radius: var(--r-card); box-shadow: none; }
.h-tag { background: var(--panel); }
.h-deliv span { background: var(--panel); }
.h-mini-ad { background: var(--panel); }
.h-serp { background: var(--panel); }
.h-svc-foot { border-top-color: rgba(11,11,12,.08); }
.h-anchor { border-color: transparent; background: var(--fill); }
.h-banner { background: var(--apricot); }
.h-banner .h-body { color: var(--on-apricot); }
/* шаги — плитки, последняя лавандовая */
.h-step { background: var(--fill); border-top: none; border-radius: var(--r-tile); padding: 20px; }
.h-step:last-child { background: var(--fill-accent); }
/* Reporting: тёмная + белая панели */
.h-rep-sec .h-rep-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: stretch; }
.h-rep-sec .ds-panel { margin: 0; max-width: none; }
.h-rep-dark { background: var(--ink); color: var(--text-on-dark); }
.h-rep-dark > * { position: relative; z-index: 1; }
.h-rep-white { background: var(--panel); display: flex; align-items: center; }
.h-rep-white > div { width: 100%; }
.h-on-dark { color: var(--text-on-dark); }
.h-on-dark-muted { color: var(--text-on-dark-muted); }
.h-rep-dark .h-tile { background: var(--ink-2); border: none; }
.h-rep-dark .h-tile-t { color: var(--text-on-dark); }
.h-rep-dark .h-tile-b { color: var(--text-on-dark-muted); }
.h-rep-dark .h-tile-apricot { background: var(--apricot); }
.h-rep-dark .h-tile-apricot .h-tile-t { color: var(--ink); }
.h-rep-dark .h-tile-apricot .h-tile-b { color: var(--on-apricot); }
.h-rep-capsule { width: 200px; right: -50px; top: -30px; z-index: 0 !important; opacity: .9; }
.h-window { border: none; box-shadow: var(--shadow-float); border-radius: 22px; }
/* основатель */
.h-portrait { background: var(--fill-accent); padding: 14px; border-radius: var(--r-card); }
.h-portrait img { border-radius: 22px; }
.h-quote { background: var(--fill); border-radius: var(--r-tile); padding: 22px 26px; }
@media (max-width: 900px) {
  .h-rep-sec .h-rep-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .h-stats { flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 4px 20px 8px; scrollbar-width: none; }
  .h-stats::-webkit-scrollbar { display: none; }
  .h-stat { flex: none; }
  .h3d-torus { width: 260px; right: -80px; top: 0; }
  .h3d-capsule { width: 110px; right: -10px; }
  .h3d-sph-a { width: 56px; left: 0; }
  .h3d-sph-v { display: none; }
  .ds-section-strip { margin-top: 10px; }
}