/* ════════════════════════════════════════════════════════
   IBR — стили внутренних страниц (услуги · кейсы · статьи · медиакит)
   Расширяет site.css. Тот же тёплый минимализм: линии, радиус 4px,
   Manrope display · Inter UI, малиновый акцент #FF1861.
   ════════════════════════════════════════════════════════ */

.pg{ font-family:var(--font-ui); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
.pg *{ box-sizing:border-box; }
.pg img{ max-width:100%; }

/* ──────────── ШАПКА (sticky, светлая) ──────────── */
.pg-head{ position:sticky; top:0; z-index:50; height:clamp(64px,9vh,80px);
  background:rgba(247,246,242,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-faint); display:flex; align-items:center; }
.pg-head-inner{ width:100%; max-width:var(--container); margin:0 auto; display:flex; align-items:center;
  gap:clamp(20px,3vw,48px); padding:0 clamp(28px,5vw,64px); }
.pg-logo{ display:flex; align-items:center; text-decoration:none; }
.pg-logo img{ height:clamp(28px,3.4vw,34px); display:block; }
.pg-nav{ display:flex; gap:clamp(16px,2vw,30px); margin-left:auto; }
.pg-nav a{ font-size:clamp(12px,1.1vw,14px); font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .15s; }
.pg-nav a:hover{ color:var(--ink); }
.pg-nav a.act{ color:var(--ink); font-weight:600; }
.pg-head-btn{ font-size:clamp(11px,1vw,13px); font-weight:600; color:#fff; background:var(--ink);
  border:1px solid var(--ink); border-radius:var(--r); padding:11px 20px; text-decoration:none; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s; }
.pg-head-btn:hover{ background:var(--surface); color:var(--ink); border-color:var(--hairline); }

/* ──────────── ХЛЕБНЫЕ КРОШКИ ──────────── */
.pg-crumb{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); margin-bottom:22px; flex-wrap:wrap; }
.pg-crumb .cur, .pg-crumb a{ white-space:nowrap; }
.pg-crumb a{ color:var(--muted); text-decoration:none; transition:color .15s; }
.pg-crumb a:hover{ color:var(--ink); }
.pg-crumb .sep{ opacity:.5; }
.pg-crumb .cur{ color:var(--ink-soft); }

/* ──────────── ХИРО ВНУТРЕННЕЙ СТРАНИЦЫ (светлый) ──────────── */
.pg-hero{ border-bottom:1px solid var(--hairline-faint); padding:clamp(48px,6vw,76px) 0 clamp(56px,7vw,84px); position:relative; overflow:hidden; }
.pg-hero-glow{ position:absolute; top:-10%; right:-6%; width:min(540px,46vw); height:min(540px,46vw);
  border-radius:50%; background:radial-gradient(circle, rgba(255,24,97,.08) 0%, transparent 66%); pointer-events:none; }
.pg-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) clamp(380px,40vw,500px); gap:clamp(36px,5vw,72px); align-items:center; position:relative; }
.pg-hero.solo .pg-hero-grid{ grid-template-columns:1fr; max-width:880px; }

/* центрированный хиро (Статьи · Кейсы) — без свечения и без разделителя */
.pg-hero.centered{ border-bottom:none; padding:clamp(44px,5.5vw,72px) 0 clamp(18px,2.4vw,30px); }
.pg-hero.centered + .s-section{ border-top:none; padding-top:clamp(24px,3vw,40px); }
.pg-hero.centered .pg-hero-grid{ grid-template-columns:1fr; max-width:800px; margin:0 auto; justify-items:center; text-align:center; }
.pg-hero.centered .pg-badge{ justify-content:center; }
.pg-hero.centered .pg-lead{ margin-left:auto; margin-right:auto; }
.pg-hero.centered .pg-hero-stats{ justify-content:center; }
.pg-hero h1{ margin:0; font-family:var(--font-display); font-size:clamp(34px,4.2vw,56px); font-weight:300;
  letter-spacing:-1.8px; line-height:1.08; }
.pg-hero h1 .pk{ font-weight:700; color:var(--pink); }
.pg-hero h1 b{ font-weight:700; }
.pg-lead{ margin:clamp(18px,2.4vw,24px) 0 0; font-size:clamp(15px,1.25vw,18px); line-height:1.6; color:var(--ink-soft); max-width:540px; text-wrap:pretty; }
.pg-lead b{ color:var(--ink); font-weight:700; }
.pg-hero-ctas{ display:flex; gap:12px; margin-top:clamp(22px,3vw,32px); align-items:center; flex-wrap:wrap; }
.pg-hero-stats{ display:flex; gap:clamp(26px,3vw,48px); margin-top:clamp(26px,3.6vw,40px); padding-top:clamp(20px,2.6vw,28px); border-top:1px solid var(--hairline); flex-wrap:wrap; }
.pg-stat{ white-space:nowrap; }
.pg-stat .v{ font-family:var(--font-display); font-size:clamp(26px,2.5vw,34px); font-weight:700; letter-spacing:-1px; font-variant-numeric:tabular-nums; line-height:1; }
.pg-stat .v i{ font-style:normal; color:var(--pink); }
.pg-stat .l{ font-size:clamp(11px,.9vw,13px); color:var(--muted); margin-top:8px; line-height:1.4; }

/* бейдж услуги в хиро */
.pg-badge{ display:inline-flex; align-items:center; gap:9px; font-size:11px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:1.8px; margin:0 0 18px; }
.pg-badge::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--pink); }

/* ──────────── МОКАП-КАРТА (правый столбец хиро) ──────────── */
.mk{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-float); }
.mk-bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--hairline-faint); background:var(--bg); }
.mk-bar .dot{ width:9px; height:9px; border-radius:999px; }
.mk-bar .ttl{ font-size:11.5px; font-weight:600; color:var(--muted); margin-left:8px; }
.mk-body{ padding:18px; }
/* kanban */
.mk-stages{ display:flex; gap:9px; margin-bottom:12px; }
.mk-stage{ flex:1; background:var(--bg); border:1px solid var(--hairline-faint); border-radius:var(--r); padding:10px; }
.mk-stage .sl{ font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:8px; }
.mk-deal{ background:var(--surface); border:1px solid var(--hairline-faint); border-radius:var(--r); padding:8px 9px; margin-bottom:6px; }
.mk-deal:last-child{ margin-bottom:0; }
.mk-deal .nm{ font-size:10.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.mk-deal .vl{ font-size:10.5px; color:var(--muted); }
.mk-deal .vl.pk{ color:var(--pink); font-weight:700; }
.mk-mini{ display:flex; gap:9px; }
.mk-mini > div{ flex:1; background:var(--bg); border:1px solid var(--hairline-faint); border-radius:var(--r); padding:11px 12px; }
.mk-mini .num{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.5px; color:var(--ink); }
.mk-mini .lbl{ font-size:9.5px; color:var(--muted); margin-top:2px; }
/* chat */
.mk-chat{ display:flex; flex-direction:column; gap:11px; }
.mk-msg{ max-width:84%; }
.mk-msg .bub{ font-size:12.5px; line-height:1.5; padding:10px 13px; border-radius:var(--r); }
.mk-msg.user{ align-self:flex-end; text-align:right; }
.mk-msg.user .bub{ background:var(--ink); color:#fff; border-bottom-right-radius:1px; }
.mk-msg.bot .bub{ background:var(--bg); border:1px solid var(--hairline-faint); color:var(--ink-soft); border-bottom-left-radius:1px; }
.mk-msg .meta{ font-size:9.5px; color:var(--muted); margin-top:4px; }
.mk-msg .tag{ display:inline-flex; align-items:center; gap:6px; margin-top:7px; font-size:10px; font-weight:600; color:var(--mint); }
.mk-msg .tag::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--mint); }
.mk-sync{ display:flex; align-items:center; gap:8px; margin-top:13px; padding:10px 12px; background:rgba(47,110,74,.07);
  border:1px solid rgba(47,110,74,.18); border-radius:var(--r); font-size:11px; color:var(--mint); font-weight:600; }
/* dashboard */
.mk-dash .dl{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-bottom:14px; }
.mk-bigrow{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.mk-big{ font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:-1.5px; line-height:1; }
.mk-big i{ font-style:normal; color:var(--mint); font-size:22px; }
.mk-bigsub b{ display:block; font-size:12px; color:var(--mint); font-weight:700; }
.mk-bigsub span{ font-size:12px; color:var(--muted); }
.mk-bars{ display:flex; flex-direction:column; gap:11px; padding-top:16px; border-top:1px solid var(--hairline-faint); }
.mk-brow{ }
.mk-brow .top{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-soft); margin-bottom:5px; }
.mk-track{ height:7px; background:var(--bg); border:1px solid var(--hairline-faint); border-radius:999px; overflow:hidden; }
.mk-fill{ height:100%; background:var(--pink); border-radius:999px; }
.mk-tags{ display:flex; gap:7px; margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline-faint); flex-wrap:wrap; }
.mk-tags span{ font-size:10.5px; font-weight:600; color:var(--mint); border:1px solid rgba(47,110,74,.25); border-radius:999px; padding:4px 10px; }

/* ──────────── ПАНЕЛЬ «ДЛЯ КОГО» (4 карточки болей) ──────────── */
.pg-pains{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px; }
.pg-pain{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:30px 28px; display:flex; flex-direction:column; gap:11px; }
.pg-pain .n{ font-size:11px; font-weight:700; letter-spacing:.6px; color:var(--pink); font-variant-numeric:tabular-nums; }
.pg-pain h3{ margin:0; font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.4px; line-height:1.25; }
.pg-pain p{ margin:0; font-size:14px; line-height:1.65; color:var(--ink-soft); text-wrap:pretty; }

/* ──────────── ПЛАТФОРМЫ (amoCRM / Битрикс24) ──────────── */
.pg-plat{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.pg-platc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:34px 32px; display:flex; flex-direction:column; gap:18px; position:relative; }
.pg-platc.featured{ border-color:var(--ink); }
.pg-platc .chip{ position:absolute; top:-11px; left:30px; background:var(--ink); color:#fff; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; padding:5px 11px; border-radius:var(--r); }
.pg-platc .logo{ width:54px; height:54px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:-.5px; }
.pg-platc .logo.amo{ background:rgba(0,122,255,.10); color:#007AFF; }
.pg-platc .logo.b24{ background:var(--pink-tint); color:var(--pink); }
.pg-platc h3{ margin:0; font-family:var(--font-display); font-size:23px; font-weight:700; letter-spacing:-.6px; }
.pg-platc .ft{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
.pg-platc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pg-platc ul li{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); padding:10px 0 10px 18px; border-top:1px solid var(--hairline-faint); position:relative; }
.pg-platc ul li::before{ content:""; position:absolute; left:0; top:17px; width:5px; height:5px; border-radius:999px; background:var(--mint); }
.pg-platc .tag{ align-self:flex-start; font-size:11px; font-weight:600; color:var(--pink); background:var(--pink-tint); border:1px solid rgba(255,24,97,.2); border-radius:999px; padding:5px 13px; }
.pg-platc .note{ font-size:13px; color:var(--ink-soft); line-height:1.55; padding:12px 14px; background:var(--bg); border:1px solid var(--hairline-faint); border-radius:var(--r); }

/* ──────────── СОСТАВ УСЛУГИ (карточки-иконки) ──────────── */
.pg-inc{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.pg-inc.two{ grid-template-columns:repeat(2,1fr); }
.pg-incc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:30px 28px; display:flex; flex-direction:column; gap:14px; }
.pg-incc .ic{ width:44px; height:44px; border:1px solid var(--hairline); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--pink); }
.pg-incc .ic svg{ width:20px; height:20px; stroke:currentColor; }
.pg-incc h3{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.4px; line-height:1.25; }
.pg-incc > p{ margin:0; font-size:14px; line-height:1.65; color:var(--ink-soft); flex:0; text-wrap:pretty; }
.pg-incc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pg-incc ul li{ font-size:13px; line-height:1.5; color:var(--ink-soft); padding:9px 0 9px 17px; border-top:1px solid var(--hairline-faint); position:relative; }
.pg-incc ul li::before{ content:""; position:absolute; left:0; top:16px; width:5px; height:5px; border-radius:999px; background:var(--pink); }

/* ──────────── ИНТЕГРАЦИИ (тёмная) ──────────── */
.pg-int{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; border:1px solid var(--d-hairline); border-radius:var(--r); overflow:hidden; }
.pg-intc{ padding:22px 18px; border-right:1px solid var(--d-hairline-faint); border-bottom:1px solid var(--d-hairline-faint);
  display:flex; flex-direction:column; gap:5px; background:var(--d-card); }
.pg-intc .nm{ font-size:14px; font-weight:600; color:var(--d-text); }
.pg-intc .ty{ font-size:11px; color:var(--d-muted); }
.pg-intc.more{ color:var(--d-muted); justify-content:center; }
.pg-intc.more b{ color:var(--pink); font-weight:700; }

/* ──────────── ТАЙМЛАЙН (вертикальный, светлый/тёмный) ──────────── */
.pg-timeline{ margin-top:44px; display:flex; flex-direction:column; }
.pg-tstep{ display:grid; grid-template-columns:54px 1fr 130px; gap:24px; padding:26px 0; border-top:1px solid var(--hairline-faint); align-items:baseline; }
.pg-tstep:first-child{ border-top:1px solid var(--hairline); }
.pg-tstep .num{ font-family:var(--font-display); font-size:15px; font-weight:700; color:#fff; background:var(--ink); width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.pg-tstep h3{ margin:0 0 7px; font-size:18px; font-weight:600; letter-spacing:-.4px; }
.pg-tstep p{ margin:0; font-size:14px; line-height:1.65; color:var(--ink-soft); max-width:620px; text-wrap:pretty; }
.pg-tstep .dur{ font-size:12px; color:var(--muted); text-align:right; text-transform:uppercase; letter-spacing:1.2px; font-weight:500; white-space:nowrap; }
.s-dark .pg-tstep{ border-top-color:var(--d-hairline-faint); }
.s-dark .pg-tstep:first-child{ border-top-color:var(--d-hairline); }
.s-dark .pg-tstep .num{ background:var(--pink); }
.s-dark .pg-tstep h3{ color:var(--d-text); }
.s-dark .pg-tstep p{ color:var(--d-soft); }
.s-dark .pg-tstep .dur{ color:var(--d-muted); }
.pg-tresult{ margin-top:34px; font-size:16.5px; color:var(--ink-soft); display:flex; align-items:center; gap:12px; }
.pg-tresult::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--pink); flex:none; }
.pg-tresult b{ color:var(--ink); font-weight:700; }
.s-dark .pg-tresult{ color:var(--d-soft); } .s-dark .pg-tresult b{ color:var(--d-text); }

/* ──────────── РЕЗУЛЬТАТЫ (карточки с цитатой) ──────────── */
.pg-res{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.pg-resc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:28px 26px; display:flex; flex-direction:column; gap:14px; }
.pg-resc .ind{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color:var(--muted); display:inline-flex; align-items:center; gap:9px; }
.pg-resc .ind::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--pink); }
.pg-resc h3{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.3px; line-height:1.35; text-wrap:pretty; }
.pg-resc .metric{ border-top:1px solid var(--hairline-faint); border-bottom:1px solid var(--hairline-faint); padding:16px 0; }
.pg-resc .metric .mv{ font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-1px; color:var(--pink); line-height:1; }
.pg-resc .metric .ml{ font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
.pg-resc > p{ margin:0; font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.pg-resc .quote{ margin-top:auto; font-size:13.5px; line-height:1.6; color:var(--ink); font-style:italic; padding-left:14px; border-left:2px solid var(--pink); }

/* ──────────── 4 ИНСТРУМЕНТА ИИ (тёмная) ──────────── */
.pg-tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:44px; border:1px solid var(--d-hairline); border-radius:var(--r); overflow:hidden; }
.pg-toolc{ padding:34px 36px 38px; border-right:1px solid var(--d-hairline-faint); border-bottom:1px solid var(--d-hairline-faint); background:var(--d-card); display:flex; flex-direction:column; gap:13px; }
.pg-toolc .top{ display:flex; align-items:center; gap:12px; }
.pg-toolc .ic{ width:40px; height:40px; border:1px solid var(--d-hairline); border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--pink); }
.pg-toolc .ic svg{ width:19px; height:19px; stroke:currentColor; }
.pg-toolc .lbl{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--d-muted); }
.pg-toolc h3{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.4px; line-height:1.25; color:var(--d-text); }
.pg-toolc > p{ margin:0; font-size:14px; line-height:1.65; color:var(--d-soft); text-wrap:pretty; }
.pg-toolc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pg-toolc ul li{ font-size:13px; line-height:1.5; color:var(--d-soft); padding:8px 0 8px 17px; border-top:1px solid var(--d-hairline-faint); position:relative; }
.pg-toolc ul li::before{ content:""; position:absolute; left:0; top:15px; width:5px; height:5px; border-radius:999px; background:var(--pink); }
.pg-toolc .out{ display:inline-flex; align-items:center; gap:9px; margin-top:6px; font-size:13px; font-weight:600; color:var(--d-text); padding:11px 14px; background:rgba(255,24,97,.07); border:1px solid rgba(255,24,97,.2); border-radius:var(--r); }

/* ──────────── CTA-БАННЕР (внутри светлых секций) ──────────── */
.pg-banner{ margin-top:48px; border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface);
  padding:clamp(28px,3.4vw,40px) clamp(28px,3.4vw,44px); display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.pg-banner h3{ margin:0; font-family:var(--font-display); font-size:clamp(19px,1.8vw,24px); font-weight:600; letter-spacing:-.6px; line-height:1.3; max-width:640px; text-wrap:pretty; }
.pg-banner p{ margin:10px 0 0; font-size:14.5px; color:var(--ink-soft); }

/* ──────────── ФИНАЛЬНЫЙ CTA (тёмный, по центру) ──────────── */
.pg-cta-inner{ text-align:center; max-width:680px; margin:0 auto; }
.pg-cta-inner .s-tag{ justify-content:center; }
.pg-cta-inner .s-h2{ color:var(--d-text); }
.pg-cta-inner .s-sub{ margin:16px auto 0; }
.pg-cta-btns{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:32px; flex-wrap:wrap; }
.pg-cta-tg{ font-size:14px; font-weight:600; color:var(--d-soft); text-decoration:none; }
.pg-cta-tg:hover{ color:var(--pink); }

/* ──────────── КЕЙСЫ — ФИЛЬТРЫ + СЕТКА ──────────── */
.pg-filters{ display:flex; gap:9px; flex-wrap:wrap; margin-top:40px; }
.pg-fbtn{ font-family:inherit; font-size:13px; font-weight:500; color:var(--ink-soft); background:var(--surface); white-space:nowrap;
  border:1px solid var(--hairline); border-radius:999px; padding:8px 17px; cursor:pointer; transition:all .15s; }
.pg-fbtn:hover{ border-color:var(--ink); }
.pg-fbtn.act{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pg-casegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.pg-casec{ position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  transition:background .4s cubic-bezier(.2,.7,.2,1), border-color .4s, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.pg-casec:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-5px); box-shadow:0 24px 54px rgba(21,24,31,.26); }

/* иллюстрация-баннер */
.cc-illus{ position:relative; height:142px; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--hairline-faint);
  display:flex; align-items:center; justify-content:center; transition:background .4s, border-color .4s; }
.pg-casec:hover .cc-illus{ background:#0C0E13; border-bottom-color:var(--d-hairline-faint); }
.cc-illus .grid-bg{ position:absolute; inset:0; background-image:linear-gradient(var(--hairline-faint) 1px,transparent 1px),linear-gradient(90deg,var(--hairline-faint) 1px,transparent 1px); background-size:26px 26px; opacity:.7; transition:opacity .4s; }
.pg-casec:hover .cc-illus .grid-bg{ opacity:.12; }
.cc-illus svg{ position:relative; z-index:1; color:var(--pink); width:auto; height:96px; }
.cc-illus .pill{ position:absolute; top:14px; left:16px; z-index:2; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--pink); background:var(--pink-tint); border:1px solid rgba(255,24,97,.22); padding:4px 10px; border-radius:999px; transition:background .4s, color .4s, border-color .4s; }
.pg-casec:hover .cc-illus .pill{ background:rgba(255,24,97,.16); border-color:rgba(255,24,97,.4); color:#fff; }

.cc-body{ padding:20px 24px 0; flex:1; display:flex; flex-direction:column; }
.cc-body .cl{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); transition:color .4s; }
.pg-casec:hover .cc-body .cl{ color:var(--d-muted); }
.cc-body h3{ margin:9px 0 16px; font-size:16.5px; font-weight:600; letter-spacing:-.3px; line-height:1.32; color:var(--ink); text-wrap:pretty; transition:color .4s; }
.pg-casec:hover .cc-body h3{ color:#fff; }
.cc-body .bd{ display:flex; flex-direction:column; gap:13px; padding-top:16px; border-top:1px solid var(--hairline-faint); flex:1; transition:border-color .4s; }
.pg-casec:hover .cc-body .bd{ border-top-color:var(--d-hairline-faint); }
.cc-body .row .rl{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:5px; transition:color .4s; }
.pg-casec:hover .cc-body .row .rl{ color:var(--pink); }
.cc-body .row .rt{ font-size:13px; color:var(--ink-soft); line-height:1.6; transition:color .4s; }
.pg-casec:hover .cc-body .row .rt{ color:var(--d-soft); }
.pg-casec .result{ margin:18px 24px; padding:14px 16px; background:rgba(47,110,74,.07); border:1px solid rgba(47,110,74,.18); border-radius:var(--r); transition:background .4s, border-color .4s; }
.pg-casec:hover .result{ background:rgba(123,211,160,.12); border-color:rgba(123,211,160,.3); }
.pg-casec .result .rv{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--mint); letter-spacing:-.3px; line-height:1.15; transition:color .4s; }
.pg-casec:hover .result .rv{ color:#86DBAB; }
.pg-casec .result .rd{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; line-height:1.45; transition:color .4s; }
.pg-casec:hover .result .rd{ color:var(--d-soft); }
.pg-casec .foot{ padding:0 24px 22px; margin-top:auto; }
.pg-casec .foot a{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; transition:color .4s, gap .25s; }
.pg-casec:hover .foot a{ color:#fff; gap:11px; }
.pg-casec .foot a .ar{ color:var(--pink); display:inline-flex; }

/* ──────────── КЕЙС-ДЕТАЛЬ ──────────── */
.cd-hero-grid{ display:grid; grid-template-columns:1fr 360px; gap:clamp(36px,5vw,64px); align-items:start; position:relative; }
.cd-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.cd-tag{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--pink); background:var(--pink-tint); border:1px solid rgba(255,24,97,.2); padding:5px 12px; border-radius:999px; }
.cd-tag.neutral{ color:var(--muted); background:var(--surface); border-color:var(--hairline); }
.cd-side{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:8px 26px; }
.cd-srow{ display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px solid var(--hairline-faint); }
.cd-srow:last-child{ border-bottom:none; }
.cd-srow .l{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.cd-srow .v{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.cd-sec{ padding:clamp(56px,7vw,80px) 0; border-top:1px solid var(--hairline-faint); }
.cd-h2{ margin:0 0 28px; font-family:var(--font-display); font-size:clamp(26px,2.8vw,36px); font-weight:600; letter-spacing:-1px; line-height:1.15; }
.cd-prob{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.cd-prob .text{ font-size:15.5px; color:var(--ink-soft); line-height:1.75; }
.cd-prob .text p{ margin:0 0 16px; } .cd-prob .text p:last-child{ margin:0; }
.cd-painbox{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:30px 32px; }
.cd-painbox .h{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin-bottom:18px; }
.cd-painbox ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.cd-painbox li{ display:flex; align-items:flex-start; gap:13px; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.cd-painbox .x{ width:26px; height:26px; flex:none; border-radius:999px; background:var(--pink-tint); color:var(--pink); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.cd-steps{ display:flex; flex-direction:column; position:relative; }
.cd-step{ display:grid; grid-template-columns:44px 1fr; gap:22px; padding:14px 0; position:relative; }
.cd-step .num{ width:38px; height:38px; border-radius:999px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:14px; font-weight:700; z-index:1; }
.cd-step .ttl{ font-size:16.5px; font-weight:600; color:var(--ink); margin:8px 0 6px; letter-spacing:-.2px; }
.cd-step .ds{ font-size:14px; color:var(--ink-soft); line-height:1.65; max-width:640px; text-wrap:pretty; }
.cd-steps::before{ content:""; position:absolute; left:18px; top:36px; bottom:36px; width:1px; background:var(--hairline); }
.cd-flow{ margin-top:40px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:30px 32px; }
.cd-flow .h{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin-bottom:22px; }
.cd-flowrow{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.cd-node{ background:var(--bg); border:1px solid var(--hairline); border-radius:var(--r); padding:12px 15px; text-align:center; min-width:120px; }
.cd-node.pk{ background:var(--pink-tint); border-color:rgba(255,24,97,.25); }
.cd-node .nt{ font-size:12.5px; font-weight:600; color:var(--ink); }
.cd-node.pk .nt{ color:var(--pink); }
.cd-node .ns{ font-size:10.5px; color:var(--muted); margin-top:3px; }
.cd-arr{ color:var(--muted); padding:0 4px; }
.cd-resgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px; }
.cd-resc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:26px 24px; }
.cd-resc .rn{ font-family:var(--font-display); font-size:36px; font-weight:800; color:var(--pink); letter-spacing:-1.5px; line-height:1; margin-bottom:8px; }
.cd-resc .rl{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.cd-check{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.cd-check li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.cd-check .ck{ width:20px; height:20px; flex:none; border-radius:999px; background:rgba(47,110,74,.12); color:var(--mint); display:flex; align-items:center; justify-content:center; margin-top:1px; }

/* ──────────── СТАТЬИ — СЕТКА + ТЕЛО СТАТЬИ ──────────── */
.pg-artgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.pg-artc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:border-color .2s, transform .2s; }
.pg-artc:hover{ border-color:var(--ink); transform:translateY(-3px); }
.pg-artc .thumb{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--hairline-faint); position:relative; overflow:hidden; }
.pg-artc .thumb .stripes{ position:absolute; inset:0; opacity:.5; }
.pg-artc .thumb svg.ico{ position:relative; color:var(--pink); opacity:.7; }
.pg-artc .bd{ padding:24px; display:flex; flex-direction:column; flex:1; }
.pg-artc .meta{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.pg-artc .tag{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--pink); background:var(--pink-tint); border:1px solid rgba(255,24,97,.2); padding:3px 9px; border-radius:999px; }
.pg-artc .date{ font-size:12px; color:var(--muted); }
.pg-artc h3{ margin:0 0 10px; font-size:17px; font-weight:600; letter-spacing:-.3px; line-height:1.35; color:var(--ink); text-wrap:pretty; }
.pg-artc .exc{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; flex:1; }
.pg-artc .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--hairline-faint); }
.pg-artc .rt{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.pg-artc .rl{ font-size:13px; font-weight:600; color:var(--pink); }

/* тело статьи (prose) */
.pg-prose{ max-width:720px; margin:0 auto; }

/* ──────────── СТАТЬЯ — МАГАЗИННЫЙ 2-КОЛОНОЧНЫЙ МАКЕТ ──────────── */
.art-head{ max-width:920px; }
.art-head h1{ font-family:var(--font-display); font-size:clamp(30px,3.6vw,48px); font-weight:300; letter-spacing:-1.8px; line-height:1.1; margin:20px 0 0; }
.art-head h1 b{ font-weight:700; }
.art-head h1 .pk{ font-weight:700; color:var(--pink); }
.art-layout{ display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:clamp(40px,5vw,72px); align-items:start; }
.art-layout .pg-prose{ max-width:none; margin:0; }
.art-aside{ position:sticky; top:104px; display:flex; flex-direction:column; gap:18px; }
.art-toc{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:22px 22px; }
.art-toc .th{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin-bottom:16px; }
.art-toc a{ display:block; font-size:13.5px; line-height:1.45; color:var(--ink-soft); text-decoration:none; padding:9px 0 9px 16px; border-left:2px solid var(--hairline); transition:color .15s, border-color .15s; }
.art-toc a:hover{ color:var(--pink); border-left-color:var(--pink); }
.art-cta{ background:var(--ink); color:#fff; border-radius:var(--r); padding:24px 22px; }
.art-cta .ch{ font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-.4px; line-height:1.3; }
.art-cta p{ margin:9px 0 16px; font-size:13px; line-height:1.6; color:var(--d-soft); }
.art-cta button{ width:100%; }
.art-share{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); padding:0 4px; }
.art-share a{ color:var(--muted); display:inline-flex; transition:color .15s; }
.art-share a:hover{ color:var(--pink); }
.pg-prose .lead{ font-size:19px; line-height:1.6; color:var(--ink); font-weight:400; margin:0 0 8px; text-wrap:pretty; }
.pg-prose h2{ font-family:var(--font-display); font-size:clamp(24px,2.4vw,30px); font-weight:600; letter-spacing:-.8px; line-height:1.2; margin:48px 0 18px; }
.pg-prose h3{ font-size:20px; font-weight:700; letter-spacing:-.3px; margin:34px 0 12px; }
.pg-prose p{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 18px; text-wrap:pretty; }
.pg-prose p b, .pg-prose li b{ color:var(--ink); font-weight:700; }
.pg-prose ul, .pg-prose ol{ margin:0 0 18px; padding-left:4px; list-style:none; display:flex; flex-direction:column; gap:11px; }
.pg-prose ul li{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); padding-left:24px; position:relative; }
.pg-prose ul li::before{ content:""; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:999px; background:var(--pink); }
.pg-prose ol{ counter-reset:s; }
.pg-prose ol li{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); padding-left:38px; position:relative; counter-increment:s; }
.pg-prose ol li::before{ content:counter(s); position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:999px; background:var(--ink); color:#fff; font-family:var(--font-display); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pg-prose blockquote{ margin:28px 0; padding:4px 0 4px 24px; border-left:3px solid var(--pink); font-family:var(--font-display); font-size:21px; font-weight:500; line-height:1.4; letter-spacing:-.3px; color:var(--ink); }
.pg-callout{ margin:28px 0; padding:24px 26px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); }
.pg-callout .ct{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--pink); margin-bottom:10px; display:flex; align-items:center; gap:9px; }
.pg-callout .ct::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--pink); }
.pg-callout p{ margin:0; font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.pg-artmeta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; padding-top:22px; border-top:1px solid var(--hairline); font-size:13.5px; color:var(--muted); }
.pg-artmeta .tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--pink); background:var(--pink-tint); border:1px solid rgba(255,24,97,.2); padding:4px 11px; border-radius:999px; }
.pg-prose .signnum{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color:var(--pink); margin:40px 0 10px; }
.pg-prose .signnum::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--pink); }
.pg-prose hr{ border:none; border-top:1px solid var(--hairline); margin:40px 0; }

/* ──────────── ПОЛОСА-ЗАГЛУШКА (placeholder) ──────────── */
.ph-stripes{ background-image:repeating-linear-gradient(135deg, var(--hairline-faint) 0 1px, transparent 1px 11px); }

/* ──────────── Адаптив ──────────── */
@media (max-width:1000px){
  .pg-hero-grid, .cd-hero-grid{ grid-template-columns:1fr; }
  .art-layout{ grid-template-columns:1fr; }
  .art-aside{ position:static; flex-direction:row; flex-wrap:wrap; }
  .art-toc{ flex:1; min-width:280px; }
  .art-cta{ flex:1; min-width:280px; }
  .pg-plat, .pg-inc, .pg-inc.two, .pg-res, .pg-tools, .pg-int, .cd-prob, .cd-resgrid, .pg-casegrid, .pg-artgrid{ grid-template-columns:1fr; }
  .pg-int{ grid-template-columns:repeat(2,1fr); }
  .pg-casegrid, .pg-artgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .pg-nav{ display:none; }
  .pg-pains{ grid-template-columns:1fr; }
  .pg-tools{ grid-template-columns:1fr; }
  .pg-casegrid, .pg-artgrid{ grid-template-columns:1fr; }
  .cd-check{ grid-template-columns:1fr; }
  .pg-tstep{ grid-template-columns:44px 1fr; }
  .pg-tstep .dur{ grid-column:2; text-align:left; padding-top:4px; }
  .pg-int{ grid-template-columns:1fr; }
}