/* «Комплексный маркетинг» (07.11). Только эта страница: первый экран со смазом движения (референс Алима —
   фото на весь экран, горизонтальный смаз, лицо резкое), строка ссылок на услуги, путь клиента, сильные стороны. */

/* Меню на 20 px ниже — пометка Алима в Agentation */
/* шапка — в services.css (35 px, 08.11) */

/* ── Первый экран ───────────────────────────────────────────── */
.cx-hero{position:relative;min-height:min(900px,calc(100svh - 24px));padding:150px 68px 40px;display:flex;flex-direction:column;
  justify-content:space-between;gap:56px;overflow:hidden;background:#26493a;color:#f4f4f2;isolation:isolate}
.cx-hero__media{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#26493a}
.cx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 35%}
/* картинка Алима (смаз уже в ней): затемнение слева под текст и снизу под строку клиентов, в тон зелёного */
.cx-hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,26,20,.88) 0,rgba(12,26,20,.62) 30%,rgba(12,26,20,.12) 55%,rgba(12,26,20,0) 68%),
             linear-gradient(0deg,rgba(12,26,20,.7) 0,rgba(12,26,20,0) 28%)}
.cx-hero .st-crumbs{position:absolute;top:116px;left:68px;right:68px}
.cx-hero__text{max-width:600px;display:grid;gap:24px;justify-items:start}
.cx-hero__title{margin:0;font:600 clamp(40px,5.2vw,76px)/1.02 Inter,sans-serif;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.cx-hero__lead{margin:0;max-width:470px;font:500 18px/1.5 Inter,sans-serif;color:rgba(244,244,242,.78)}
.cx-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:100px;background:#fff;color:#0b0b0c;
  font:600 15px/1 Inter,sans-serif;text-decoration:none;transition:transform .2s ease,background .2s ease}
.cx-hero a.cx-btn{color:#0b0b0c}
.cx-btn svg{width:16px;height:16px;flex:none}
.cx-btn:hover{background:#e9edf7}
.cx-hero__next svg{width:14px;height:14px;transform:rotate(90deg)}
.cx-btn:active{transform:scale(.97)}
.cx-btn:focus-visible{outline:2px solid var(--st-blue,#2563eb);outline-offset:3px}
.cx-hero__facts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.cx-hero__facts li{display:flex;align-items:center;gap:10px;font:500 14px/1.3 Inter,sans-serif;color:rgba(244,244,242,.82)}
.cx-hero__facts svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.cx-hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cx-hero__foot p{margin:0 0 14px;font:500 13px/1 Inter,sans-serif;color:rgba(244,244,242,.6)}
.cx-hero__foot p b{color:#fff;font-weight:600}
.cx-logos{list-style:none;margin:0;padding:0;display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;align-items:baseline}
.cx-logos{align-items:center}
.cx-logos li{display:flex;align-items:center}
.cx-logos img{height:30px;width:auto;opacity:.88}
/* оптическое выравнивание: у Hyde и NeGorchit мелкая надпись внутри знака */
.cx-logos img[alt="Hyde"],.cx-logos img[alt="NeGorchit"]{height:44px}
.cx-logos img[alt="IVA bistro"]{height:28px}
@media (max-width:760px){.cx-logos img{height:22px}.cx-logos img[alt="Hyde"],.cx-logos img[alt="NeGorchit"]{height:34px}}
.cx-hero__next{font:500 13px/1 Inter,sans-serif;color:rgba(244,244,242,.75);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.cx-hero__next:hover{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .cx-hero__img{animation:cx-zoom 1.4s cubic-bezier(.2,.75,.34,.94) both}
  .cx-hero__text>*{animation:cx-rise .7s cubic-bezier(.2,.75,.34,.94) both}
  .cx-hero__text>:nth-child(2){animation-delay:.08s}.cx-hero__text>:nth-child(3){animation-delay:.16s}
  .cx-hero__text>:nth-child(4){animation-delay:.24s}.cx-hero__text>:nth-child(5){animation-delay:.32s}
}
@keyframes cx-zoom{from{transform:scale(1.06) translateX(2%);opacity:.4}to{transform:none;opacity:1}}
@keyframes cx-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:1180px){.cx-hero{padding:140px 40px 32px}.cx-hero .st-crumbs{left:40px;right:40px;top:108px}}
@media (max-width:760px){
  .cx-hero{min-height:calc(100svh - 16px);padding:120px 20px 24px;justify-content:flex-end}
  .cx-hero .st-crumbs{left:20px;right:20px;top:96px}
  .cx-hero__img{object-position:72% 30%}
  .cx-hero__media::after{background:linear-gradient(0deg,rgba(12,26,20,.95) 0,rgba(12,26,20,.8) 45%,rgba(12,26,20,.15) 78%)}
  .cx-hero__lead{font-size:16px}
  .cx-hero__foot{flex-direction:column;align-items:flex-start}
}

/* ── Строка ссылок «что входит» ─────────────────────────────── */
.st-sec.cx-inline{padding:48px 68px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.cx-inline .st-mono{margin:0;flex:none}
.cx-inline nav{display:flex;flex-wrap:wrap;gap:4px 0;align-items:baseline}
.cx-inline a{font:600 clamp(20px,2.2vw,30px)/1.3 Inter,sans-serif;letter-spacing:-.02em;color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s ease,color .2s ease}
.cx-inline a:hover{color:var(--st-blue,#2563eb);background-size:100% 2px}
.cx-inline a:focus-visible{outline:2px solid var(--st-blue,#2563eb);outline-offset:3px;border-radius:4px}
.cx-inline nav span{margin:0 14px;color:rgba(11,11,12,.25);font:400 24px/1 Inter,sans-serif}
@media (max-width:760px){.st-sec.cx-inline{padding:32px 20px;gap:16px}.cx-inline nav span{margin:0 8px}}

/* ── Путь клиента: что входит ──────────────────────────────── */
.cx-path{margin-top:56px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.cx-path__strat{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-radius:18px;
  border:1px solid rgba(255,255,255,.14);margin-bottom:28px}
.cx-path__strat b{font:600 20px/1.2 Inter,sans-serif}
.cx-path__strat span{font:500 14px/1.4 Inter,sans-serif;color:rgba(244,244,242,.6);text-align:right}
.cx-step{position:relative;padding:0 20px 0 0;display:grid;gap:14px;align-content:start}
.cx-step__stage{font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;color:rgba(244,244,242,.5)}
.cx-step__dot{position:relative;height:14px}
.cx-step__dot::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--st-blue,#2563eb);box-shadow:0 0 0 6px rgba(37,99,235,.18)}
.cx-step__dot::after{content:"";position:absolute;left:22px;right:-2px;top:11px;height:2px;background:linear-gradient(90deg,rgba(37,99,235,.7),rgba(255,255,255,.14))}
.cx-step:last-child .cx-step__dot::after{display:none}
.cx-step:last-child .cx-step__dot::before{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.cx-step h3{margin:6px 0 0;font:600 22px/1.15 Inter,sans-serif;letter-spacing:-.02em}
.cx-step p{margin:0;font:500 14px/1.5 Inter,sans-serif;color:rgba(244,244,242,.68)}
.cx-step a{font:500 13px/1 Inter,sans-serif;color:#8fb0ff;text-decoration:none}
.cx-step a:hover{text-decoration:underline}
@media (prefers-reduced-motion:no-preference){
  .cx-path.is-in .cx-step{animation:cx-rise .6s cubic-bezier(.2,.75,.34,.94) both}
  .cx-path.is-in .cx-step:nth-child(3){animation-delay:.08s}.cx-path.is-in .cx-step:nth-child(4){animation-delay:.16s}
  .cx-path.is-in .cx-step:nth-child(5){animation-delay:.24s}.cx-path.is-in .cx-step:nth-child(6){animation-delay:.32s}
}
@media (max-width:1180px){.cx-path{grid-template-columns:1fr;gap:28px}.cx-path__strat{margin-bottom:4px}
  .cx-step{grid-template-columns:110px 14px 1fr;column-gap:16px;padding:0}.cx-step__stage{padding-top:5px}
  .cx-step__dot{grid-row:1/span 4;grid-column:2;height:auto}.cx-step__dot::after{left:6px;right:auto;top:26px;bottom:-30px;width:2px;height:auto}
  .cx-step>h3,.cx-step>p,.cx-step>a{grid-column:3}.cx-step>h3{margin:0}}
@media (max-width:760px){.cx-step{grid-template-columns:14px 1fr}.cx-step__stage{grid-column:2;padding:0}.cx-step__dot{grid-column:1}.cx-step>h3,.cx-step>p,.cx-step>a{grid-column:2}
  .cx-path__strat{flex-direction:column;align-items:flex-start}.cx-path__strat span{text-align:left}}

/* ── Сильные стороны: PALS, автоматизация, команда ─────────── */
.cx-edge{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cx-edge article{padding:28px;border-radius:22px;background:#0b0b0c;color:#f4f4f2;display:grid;gap:14px;align-content:start;min-height:240px}
.cx-edge article:first-child{background:var(--st-blue,#2563eb)}
.cx-edge .st-mono{margin:0;color:rgba(244,244,242,.6)}
.cx-edge article:first-child .st-mono{color:rgba(255,255,255,.75)}
.cx-edge h3{margin:0;font:600 26px/1.1 Inter,sans-serif;letter-spacing:-.02em}
.cx-edge p{margin:0;font:500 15px/1.5 Inter,sans-serif;color:rgba(244,244,242,.78)}
.cx-edge article:first-child p{color:rgba(255,255,255,.9)}
.cx-edge a{margin-top:auto;font:600 14px/1 Inter,sans-serif;color:#fff;text-decoration:none}
.cx-edge a:hover{text-decoration:underline}
@media (max-width:1180px){.cx-edge{grid-template-columns:1fr}.cx-edge article{min-height:0}}

/* ── unslop 08.11 ── */
/* колонка текста не вылезает за экран на телефоне */
.cx-hero__text{grid-template-columns:minmax(0,1fr)}
.cx-hero__text>*{max-width:100%}
/* h1 для поиска — скрыт и на телефоне: видимый заголовок один */
.cx-hero .st-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
/* путь: точки без свечения, линия — ровная тонкая */
.cx-step__dot::before{box-shadow:none;width:12px;height:12px;top:6px}
.cx-step__dot::after{background:rgba(255,255,255,.16);height:1px;top:12px}
.cx-step:last-child .cx-step__dot::before{box-shadow:none}
.cx-step h3 a{color:inherit;text-decoration:none;font:inherit}
.cx-step h3 a:hover{color:#8fb0ff}
.cx-step h3 a:focus-visible{outline:2px solid var(--st-blue,#2563eb);outline-offset:3px;border-radius:4px}
@media (max-width:1180px){.cx-step__dot::after{width:1px;height:auto;left:6px}}
@media (max-width:760px){.cx-hero__title{font-size:min(32px,8.4vw);letter-spacing:-.025em}}
/* сильные стороны: главная карточка шире, без надписей капсом */
.cx-edge{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.cx-edge article{border-radius:20px;min-height:220px}
@media (max-width:1180px){.cx-edge{grid-template-columns:1fr}}