/* ===== Sazi AI — хромовый слой для страниц на v2 (кейсы, портфолио, документы) =====
   Подключается вместо glass.css и переводит страницы на язык главной:
   светлый фон, белые карточки, чёрные панели, хром на заголовках, цифрах
   и кнопках. Разметка страниц не меняется — только оформление. */

:root{
  --ink:#0E0E11;
  --ink-2:#4E4E56;
  --ink-3:#7D7D86;
  --ink-4:#A4A4AC;
  --paper:#F1F1F3;
  --white:#FFFFFF;
  --black:#0D0D10;
  --line:rgba(14,14,17,.09);
  --line-2:rgba(14,14,17,.2);
  --line-dark:rgba(255,255,255,.14);
  --maxw:1180px;           /* колонка той же ширины, что на главной */

  --chrome-d:linear-gradient(180deg,#9c9ca4 0%,#2d2d32 30%,#0b0b0e 46%,#bdbdc4 53%,#3a3a40 72%,#83838b 100%);
  --chrome-l:linear-gradient(180deg,#ffffff 0%,#dedee3 28%,#8d8d96 46%,#fbfbfc 54%,#babac1 78%,#ffffff 100%);
  --chrome-btn:linear-gradient(180deg,#ffffff 0%,#e6e6ea 36%,#a6a6ae 51%,#d6d6db 63%,#f7f7f8 100%);
  --silver-pill:linear-gradient(180deg,#ffffff,#e9e9ed);

  --r:clamp(16px,1.6vw,22px);
  --r-lg:clamp(20px,2.2vw,30px);
  --card-sh:0 20px 44px -30px rgba(14,14,20,.45);
}

/* --- фон как на главной --- */
html{background:#EDEDEF}
body{background:transparent}
body::before{
  content:"";position:fixed;inset:-14vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 34% at 12% 6%,rgba(255,255,255,.95),transparent 66%),
    radial-gradient(36% 30% at 90% 16%,rgba(255,255,255,.8),transparent 66%),
    radial-gradient(52% 42% at 30% 94%,rgba(196,196,203,.45),transparent 70%),
    linear-gradient(176deg,#F5F5F7,#E2E2E6);
}
/* объекты по краям не должны давать прокрутку вбок (см. v3.css) */
html,body{overflow-x:hidden;overflow-x:clip}

/* --- хромовый текст ---
   Градиент повторяется на каждой строке (1lh), иначе у многострочного
   заголовка средняя строка целиком уходит в тёмную полосу. Размер задан
   отдельным свойством: если браузер не знает lh, отпадёт только он. */
.case-hero h1,.pf-head h1,.doc h1,.metric .num,.big,.box .num,.pf-metric{
  background-image:var(--chrome-d);background-size:100% 1lh;background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.case-hero h1,.pf-head h1,.doc h1{font-weight:500;padding-bottom:.06em}
.metric .num small,.big small,.box .num small{-webkit-text-fill-color:var(--ink-3)}

/* ==========================================================================
   Шапка
   ========================================================================== */
.nav.is-stuck{background:rgba(242,242,244,.8);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line);box-shadow:none}
.nav-mark{font-weight:800}
.nav.is-stuck .nav-mark{color:var(--ink)}
.nav.is-stuck .nav-link{color:var(--ink-2)}
.nav.is-stuck .nav-link:hover{color:var(--ink);opacity:1}

/* ==========================================================================
   Кнопки: на светлом — чёрная, на чёрном — хромовая
   ========================================================================== */
.btn{height:50px;padding:0 24px;font-size:.96rem;font-weight:600;
  transition:transform .3s cubic-bezier(.2,.65,.3,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn--solid,.nav.is-stuck .btn--solid,.pf-open{background:var(--black);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 26px -14px rgba(0,0,0,.6)}
.btn--solid:hover,.pf-open:hover{background:#000}
.btn--ghost{background:rgba(255,255,255,.6);color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.cta .btn--solid{background:var(--chrome-btn);color:var(--ink);border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.22),0 12px 26px -12px rgba(0,0,0,.65)}
.cta .btn--solid:hover{background:var(--chrome-btn)}
.cta .btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.34)}
.cta .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:560px){.btn{height:46px;padding:0 20px;font-size:.92rem}}

/* ==========================================================================
   Метки и таблетки
   ========================================================================== */
.case-hero .eyebrow,.pf-head .eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--silver-pill);box-shadow:inset 0 1px 0 #fff;
  color:var(--ink-2);font-weight:600;font-size:.78rem;letter-spacing:.01em}
.tags span,.pf-tags span,.pf-badge,.chips span{border:1px solid var(--line-2);background:var(--silver-pill);
  box-shadow:inset 0 1px 0 #fff;color:var(--ink-2)}
.pf-badge{color:var(--ink)}
.back-link{padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--silver-pill);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -10px rgba(0,0,0,.4);color:var(--ink-2)}
.back-link:hover{color:var(--ink);background:#fff}

/* номер раздела кейса — хромовая плашка, как номера этапов на главной */
.sec-no{display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 8px;border-radius:8px;
  background:var(--chrome-btn);color:var(--ink);border:1px solid rgba(14,14,17,.14);
  box-shadow:inset 0 1px 0 #fff,0 3px 8px -4px rgba(0,0,0,.4);
  font-size:.76rem;font-weight:800;letter-spacing:0;margin-bottom:14px}

/* ==========================================================================
   Белые карточки
   ========================================================================== */
.metrics,.defs,.bigstat,.box,.col.after,.node,.pull{background:var(--white);
  border:1px solid rgba(14,14,17,.06);box-shadow:var(--card-sh)}
.col{background:var(--paper);border:1px solid rgba(14,14,17,.06)}

.metrics{border-radius:var(--r);padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,32px)}
.defs{border-radius:var(--r);padding:4px clamp(20px,2.8vw,32px)}
.def{border-bottom-color:var(--line)}
.defs .def:last-child{border-bottom:0}
.bigstat{border-radius:var(--r)}
.col,.box{border-radius:var(--r)}
.node{border-radius:16px}
.conn{color:var(--ink-3)}
.pull{position:relative;border-left:0;border-radius:var(--r);padding:clamp(20px,2.6vw,30px) clamp(24px,3vw,34px)}
.pull::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--black)}

body>.wrap>section{border-top-color:var(--line)}

.shot img{border-color:rgba(14,14,17,.08);background:var(--white);box-shadow:var(--card-sh)}
.shot img:hover{box-shadow:0 30px 56px -30px rgba(14,14,20,.55)}
.livelink{border-bottom-color:var(--line-2)}
.livelink:hover{border-bottom-color:var(--ink)}

/* ==========================================================================
   Призыв в конце кейса — чёрная панель
   ========================================================================== */
.cta{background:var(--black);border-radius:var(--r-lg);box-shadow:0 30px 60px -34px rgba(12,14,22,.9)}
.cta .eyebrow{display:inline-block;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;padding-bottom:.06em;
  background:var(--chrome-l);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   Подвал — чёрная панель в колонке, как на главной, с хромовым SAZI
   ========================================================================== */
.foot{width:calc(min(100%, var(--maxw)) - 2 * var(--gut));margin:clamp(24px,3vw,44px) auto clamp(14px,1.8vw,26px);
  padding:clamp(28px,3.6vw,52px) 0 clamp(20px,2.4vw,30px);border-radius:var(--r-lg);background:var(--black)}
.foot>.shell{max-width:none;padding:0 clamp(20px,3vw,48px)}
.foot-word{display:block;width:min(100%,880px);height:auto;margin:clamp(30px,4vw,56px) auto 0}
.foot-bottom{border-top-color:var(--line-dark)}

/* ==========================================================================
   Портфолио
   ========================================================================== */
.pf-head{position:relative}
.pf-cat:hover{background:rgba(255,255,255,.6)}
.pf-cat.is-active{background:var(--white);border:1px solid rgba(14,14,17,.06);border-radius:18px;box-shadow:var(--card-sh)}
.pf-kicker{color:var(--ink-3)}
/* Свечение под кейсом цветное под бренд, и цвет скрипт пишет прямо в style.
   В хроме оно просто светлое; !important — единственный способ перебить
   inline-стиль, не трогая данные кейсов (цвета остаются в portfolio.data.js). */
.pf-stage .pf-glow{background:radial-gradient(60% 55% at 50% 45%,rgba(255,255,255,.95),transparent 72%)!important}
/* скриншоты прямоугольные — им хватает обычной box-shadow, её браузеры не обрезают */
.pf-shot img,.pf-shot video{filter:none;box-shadow:0 24px 40px -18px rgba(14,14,20,.4)}
.pf-arrow{background:var(--chrome-btn);border:1px solid var(--line-2);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(0,0,0,.45)}
.pf-arrow:hover:not(:disabled){background:var(--chrome-btn);border-color:var(--line-2)}
.pf-dot{background:rgba(14,14,17,.2)}
.pf-dot.is-active{background:var(--ink)}
@media(max-width:900px){
  .pf-cat{background:rgba(255,255,255,.55);border-color:var(--line)}
  .pf-cat.is-active{border-color:var(--ink);box-shadow:none}
}

/* хромовая папка справа от заголовка портфолио — только где есть место */
.pf-deco{position:absolute;right:clamp(0px,3vw,48px);top:calc(50% - 84px);width:250px;height:222px;transform:rotate(-7deg);
  background:url(../img/chrome/folder.webp) center/contain no-repeat;pointer-events:none;
  /* место под тень внутри элемента — иначе Safari режет её по рамке (см. .deco в v3.css) */
  box-sizing:content-box;padding:24px 44px 76px;margin:-24px -44px -76px;background-origin:content-box;
  transform-origin:50% calc(50% - 26px);
  filter:drop-shadow(0 26px 34px rgba(20,20,26,.24))}
@media(max-width:1100px){.pf-deco{display:none}}

/* ==========================================================================
   Юридические страницы — текст на белом листе
   ========================================================================== */
/* верхний отступ листа — под фиксированную шапку, как у заголовка кейса */
.doc{max-width:900px;margin:calc(clamp(64px,8vw,120px) + 34px) 0 clamp(40px,6vw,80px);
  padding:clamp(30px,4vw,58px);border-radius:var(--r-lg);background:var(--white);
  border:1px solid rgba(14,14,17,.06);box-shadow:var(--card-sh)}
.doc h2{letter-spacing:-.025em}
.doc a{text-decoration-color:var(--line-2)}
.doc a:hover{text-decoration-color:var(--ink)}
.table,.table th,.table td{border-color:var(--line)}
.rule{background:var(--line)}
@media(max-width:700px){
  /* строки таблиц на телефоне — серые карточки внутри белого листа */
  .table-cols tr{background:var(--paper);border-color:rgba(14,14,17,.06);border-radius:16px}
}
@media(max-width:600px){.doc{padding:26px 20px;border-radius:22px}}

/* ==========================================================================
   Просмотр скриншотов
   ========================================================================== */
.lightbox{background:rgba(10,10,13,.86)}

@media(prefers-reduced-motion:reduce){.btn,.back-link{transition:none}}