/* ===== Sazi AI — дизайн v3 =====
   Белый, чёрный и хром. Светлый фон, чёрные панели со скруглением,
   хромовые объекты по краям и хромовая арка вокруг первого экрана.
   Файл самодостаточный: страница на v3 не подключает v2 и glass. */

:root{
  --ink:#0E0E11;
  --ink-2:#4E4E56;
  --ink-3:#7D7D86;
  --ink-4:#A4A4AC;

  --bg:#EDEDEF;            /* фон страницы */
  --plate:#FFFFFF;         /* светлая карточка */
  --plate-2:#F1F1F3;       /* карточка внутри карточки */
  --black:#0D0D10;         /* панели */

  --line:rgba(14,14,17,.09);
  --line-2:rgba(14,14,17,.2);

  /* хром: тёмный — для крупного текста на светлом, светлый — на чёрном */
  --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%);

  --col:1180px;            /* ширина рабочей колонки */
  --gut:clamp(14px,3.4vw,36px);
  --r:clamp(16px,1.6vw,22px);      /* скругление карточек */
  --r-lg:clamp(20px,2.2vw,30px);   /* скругление панелей */
  --sec:clamp(56px,7vw,110px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
/* Объекты по краям выглядывают из-за колонки и уходят за экран — обрезаем их,
   иначе появляется прокрутка вбок. Нужно на обоих: clip на html не даёт браузеру
   перенести overflow body на окно (там clip не работает), а clip на body режет
   само содержимое. hidden — запасной вариант для старых браузеров. */
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;color:var(--ink);background:transparent;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

/* --- светлый фон под всем: без цветных оттенков, только свет и тень --- */
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);
}

/* --- хромовый текст --- */
.chrome{background:var(--chrome-d);-webkit-background-clip:text;background-clip:text;color:transparent}
.chrome-l{background:var(--chrome-l);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- 3D-объекты по краям колонки ---
   Картинки подключаются только когда у <body> есть класс has-chrome:
   без него браузер не ходит за файлами и в консоли нет 404. */
.deco{position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat;
  background-size:contain;background-position:center;
  /* Safari обрезает drop-shadow по рамке повёрнутого элемента — тень кончалась
     резким серым краем. Даём ей место внутри: картинка рисуется в content-box,
     поля под тень добавлены паддингом и тут же сняты отрицательными марджинами,
     так что размер и место фигурки не меняются. */
  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 28px 36px rgba(20,20,26,.22))}
.has-chrome .deco--splash{background-image:url(../img/chrome/splash.webp)}
.has-chrome .deco--laptop{background-image:url(../img/chrome/laptop.webp)}
.has-chrome .deco--code{background-image:url(../img/chrome/code.webp)}
.has-chrome .deco--badge{background-image:url(../img/chrome/badge.webp)}
.has-chrome .deco--handshake{background-image:url(../img/chrome/handshake.webp)}
.has-chrome .deco--folder{background-image:url(../img/chrome/folder.webp)}
.has-chrome .deco--doc{background-image:url(../img/chrome/doc.webp)}
.has-chrome .deco--hand{background-image:url(../img/chrome/hand.webp)}

/* --- рабочая колонка --- */
.page{position:relative;max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;z-index:1;padding:var(--sec) 0}
.sec--tight{padding:clamp(34px,4.4vw,64px) 0}

/* --- типографика --- */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:500;letter-spacing:-.04em}
h2{font-size:clamp(1.5rem,3vw,2.5rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.2}
p{margin:0}

/* хромовый строчный заголовок раздела */
.hd{display:inline-block;font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;padding-bottom:.06em;margin-bottom:clamp(14px,1.8vw,24px);
  background:var(--chrome-d);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd--white{background:var(--chrome-l);-webkit-background-clip:text;background-clip:text}
.lead{font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.6;color:var(--ink-2);max-width:62ch}
.small{font-size:.86rem;line-height:1.55;color:var(--ink-3)}
/* подсветка фразы — хромовая плашка */
.mark{background:linear-gradient(180deg,#ffffff,#dfdfe4);border:1px solid rgba(14,14,17,.1);
  border-radius:8px;padding:1px 8px;box-shadow:inset 0 1px 0 #fff;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* --- кнопки --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;
  border-radius:999px;border:1px solid transparent;text-decoration:none;font-size:.96rem;font-weight:600;
  cursor:pointer;transition:transform .3s cubic-bezier(.2,.65,.3,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}
/* основная на светлом — чёрная */
.btn--main{background:var(--black);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 26px -14px rgba(0,0,0,.6)}
.btn--main:hover{background:#000}
/* основная на чёрном — хромовая */
.btn--chrome{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)}
.btn--chrome:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.22),0 16px 34px -12px rgba(0,0,0,.75)}
.btn--line{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.6)}
.btn--line:hover{background:#fff;border-color:var(--ink)}
.on-black .btn--line{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.07)}
.on-black .btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:560px){.btn{height:46px;padding:0 20px;font-size:.92rem}}

/* ==========================================================================
   Панели и карточки
   ========================================================================== */
.panel{position:relative;z-index:1;border-radius:var(--r-lg);background:var(--black);color:#fff;overflow:hidden}
.plate{position:relative;border-radius:var(--r);background:var(--plate);
  border:1px solid rgba(14,14,17,.06);box-shadow:0 20px 44px -30px rgba(14,14,20,.45)}
.plate--in{background:var(--plate-2)}

/* номер этапа — хромовая плашка */
.num{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;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:.78rem;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}

/* ==========================================================================
   Шапка — над аркой, на светлом фоне
   ========================================================================== */
.top{padding-top:clamp(6px,1vw,12px)}
.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(10px,1.2vw,16px) 2px clamp(12px,1.4vw,20px)}
.nav-mark{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav-link{font-size:.9rem;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .3s}
.nav-link:hover{color:var(--ink)}
.nav-cta{height:40px;padding:0 18px;font-size:.88rem}
@media(max-width:720px){.nav-links .nav-link{display:none}}

/* ==========================================================================
   Первый экран: чёрная панель в хромовой арке
   ========================================================================== */
/* Арка собрана из четырёх кусков одной картинки обычными фонами:
   верх (балка, капители, изгибы) и базы масштабируются во всю ширину,
   а стволы колонн растягиваются по высоте экрана.
   Раньше это был border-image на пустом элементе — Safari его рисовал только
   пока на элементе висел filter, а без фильтра арка пропадала.
   Ширина колонны --s подобрана так, чтобы пропорции совпадали с исходником:
   ширина рамки ≈ 6.24 × --s, верх = 1.257 × --s, базы = 0.422 × --s. */
.portal{position:relative;container-type:inline-size;--s:calc(100cqw / 6.24)}
.portal-frame{position:absolute;inset:0;z-index:4;pointer-events:none;
  /* стволы начинаются под верхом и кончаются над базами; ±1px — чтобы на
     округлении пикселей между кусками не проступила щель */
  background:
    url(../img/chrome/arch-top.webp) center top/100% auto no-repeat,
    url(../img/chrome/arch-base.webp) center bottom/100% auto no-repeat,
    url(../img/chrome/arch-shaft-l.webp) left 0 top calc(var(--s) * 1.257 - 1px)/var(--s) calc(100% - var(--s) * 1.679 + 2px) no-repeat,
    url(../img/chrome/arch-shaft-r.webp) right 0 top calc(var(--s) * 1.257 - 1px)/var(--s) calc(100% - var(--s) * 1.679 + 2px) no-repeat}
/* тень под базами колонн — отдельными пятнами: drop-shadow на рамке Safari
   обрезал бы по её краю так же, как у фигурок */
.portal::after{content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none;
  bottom:calc(var(--s) * -.16);height:calc(var(--s) * .36);
  background:
    radial-gradient(closest-side,rgba(14,14,20,.26),transparent) left calc(var(--s) * .04) center/calc(var(--s) * .98) 100% no-repeat,
    radial-gradient(closest-side,rgba(14,14,20,.26),transparent) right calc(var(--s) * .04) center/calc(var(--s) * .98) 100% no-repeat}

.hero{display:flex;flex-direction:column;min-height:clamp(520px,76svh,760px);
  /* край панели прячется за середину ствола колонны и за балку */
  margin:calc(var(--s) * .26) calc(var(--s) * .552) calc(var(--s) * .2)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;opacity:0;transition:opacity .5s ease}
.hero-video.is-playing{opacity:1}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,6,9,.9) 0%,rgba(6,6,9,.7) 38%,rgba(6,6,9,.25) 70%,rgba(6,6,9,.4) 100%)}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;
  /* текст начинается правее внутреннего края колонны */
  padding:calc(var(--s) * .9) calc(var(--s) * .26 + 30px) calc(var(--s) * .24 + 14px)}

.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 0 18px}
.hero h1{max-width:15ch;color:#fff}
/* градиент вешаем на строку, а не на весь блок: с clone каждая строка получает
   свой блик, иначе средняя строка целиком попадает в тёмную полосу */
.hero h1 span{padding-bottom:.08em;background:var(--chrome-l);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lead{margin-top:clamp(14px,1.8vw,22px);max-width:46ch;color:rgba(255,255,255,.74)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,34px)}
.hero-cue{display:inline-flex;flex-direction:column;align-items:center;gap:5px;align-self:center;
  font-size:.78rem;letter-spacing:.14em;text-transform:lowercase;color:rgba(255,255,255,.55);
  text-decoration:none;transition:color .3s}
.hero-cue:hover{color:#fff}
.hero-cue span{font-size:1rem;line-height:1;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* На телефоне арки нет. Рамкой колонны съели бы полэкрана, а фронтоном над
   панелью она смотрелась прилепленной — базы налезали на скруглённые углы.
   Скрытый элемент браузер не рисует и картинки арки не грузит. */
@media(max-width:760px){
  .portal::after,.portal-frame{display:none}
  .hero{margin:0;min-height:0}
  .hero-in{padding:clamp(28px,8vw,40px) 20px 22px}
  .hero-mid{padding:0 0 22px}
}

/* цифры под первым экраном */
.facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin-top:clamp(12px,1.6vw,20px);background:var(--line);border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(14,14,17,.06);box-shadow:0 20px 44px -30px rgba(14,14,20,.45)}
.fact{background:var(--plate);padding:clamp(16px,2vw,26px)}
.fact b{display:block;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.fact b small{font-size:.44em;font-weight:500;color:var(--ink-3);letter-spacing:-.005em}
.fact span{display:block;margin-top:7px;font-size:.8rem;line-height:1.4;color:var(--ink-3)}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   Вводный абзац с подсветкой
   ========================================================================== */
.intro{padding:clamp(22px,3vw,40px) clamp(20px,3vw,44px);font-size:clamp(1rem,1.45vw,1.3rem);
  line-height:1.55;letter-spacing:-.02em;color:var(--ink)}

/* ==========================================================================
   Заголовок раздела: метка слева, пояснение справа
   ========================================================================== */
.sec-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,3vw,50px);
  align-items:end;margin-bottom:clamp(22px,3vw,40px)}
.sec-top h2{letter-spacing:-.035em;max-width:18ch}
@media(max-width:860px){.sec-top{grid-template-columns:1fr;align-items:start;gap:12px}}

/* ==========================================================================
   Карусель услуг
   ========================================================================== */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);
  gap:clamp(12px,1.6vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
@media(min-width:1000px){.rail{grid-auto-columns:calc((100% - 2 * clamp(12px,1.6vw,18px)) / 3)}}
/* на телефоне видно по одной карточке — тянуть их до высоты самой длинной незачем */
@media(max-width:760px){.rail{align-items:start}}
.svc{scroll-snap-align:start;display:flex;flex-direction:column;padding:clamp(18px,2.2vw,28px)}
.svc h3{letter-spacing:-.03em}
.svc p{margin-top:11px;color:var(--ink-2);font-size:.88rem;line-height:1.55}
.svc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.svc-price{font-size:1.04rem;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.svc-term{font-size:.78rem;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips span{font-size:.76rem;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;
  padding:5px 11px;background:linear-gradient(180deg,#fff,#ececef)}
.rail-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:clamp(12px,1.6vw,18px)}
.rail-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--chrome-btn);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(0,0,0,.45);
  transition:transform .3s,box-shadow .3s,opacity .3s}
.rail-btn:hover:not(:disabled){transform:translateY(-2px)}
.rail-btn:disabled{opacity:.35;cursor:default}

/* ==========================================================================
   Почему мы
   ========================================================================== */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.6vw,18px)}
.point{padding:clamp(18px,2.2vw,28px)}
.point p{margin-top:9px;color:var(--ink-2);font-size:.88rem;line-height:1.55}

/* ==========================================================================
   Этапы — карточки с номером
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
@media(max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{padding:clamp(16px,2vw,24px)}
/* седьмой этап занимает всю ширину — сетка из семи карточек иначе висит */
.step--wide{grid-column:1/-1}
.step-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.step-head h3{font-size:1.02rem}
.step-body{padding:clamp(13px,1.6vw,18px);border-radius:calc(var(--r) - 6px);background:var(--plate-2)}
.step-body p{color:var(--ink-2);font-size:.86rem;line-height:1.55}
.step--dark .step-body{background:var(--black)}
.step--dark .step-body p{color:rgba(255,255,255,.76)}

/* ==========================================================================
   Чёрный блок консультации
   ========================================================================== */
.pitch{padding:clamp(26px,3.6vw,52px) clamp(20px,3vw,48px)}
.pitch .lead{color:rgba(255,255,255,.72)}
.pitch h2{color:#fff}
.pitch-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(16px,2.4vw,36px);margin:clamp(22px,3vw,36px) 0 clamp(20px,2.6vw,30px);
  padding-top:clamp(18px,2.4vw,26px);border-top:1px solid rgba(255,255,255,.16)}
.pitch-facts b{display:block;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;letter-spacing:-.035em;line-height:1;
  background:var(--chrome-l);-webkit-background-clip:text;background-clip:text;color:transparent}
.pitch-facts b small{font-size:.44em;font-weight:500}
.pitch-facts span{display:block;margin-top:7px;font-size:.8rem;line-height:1.4;color:rgba(255,255,255,.58)}

/* ==========================================================================
   Контакт
   ========================================================================== */
.contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.6vw,36px);padding:clamp(22px,3.2vw,44px)}
.contact-label{display:block;font-size:.8rem;color:var(--ink-3);margin-bottom:8px}
.contact-handle{display:inline-block;font-size:clamp(1.8rem,4.2vw,3.1rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.05;padding-bottom:.06em;text-decoration:none;
  background:var(--chrome-d);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .3s}
.contact-handle:hover{opacity:.8}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:700px){
  .contact{flex-direction:column;align-items:flex-start}
  .contact-actions{width:100%}
  .contact-actions .btn{flex:1 1 auto}
}

/* ==========================================================================
   Подвал
   ========================================================================== */
.foot{margin-bottom:clamp(14px,1.8vw,26px);padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,48px) clamp(20px,2.4vw,30px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,2.6vw,40px)}
.foot h3{font-size:1.05rem;margin-bottom:12px}
.foot-title{font-size:.76rem;color:rgba(255,255,255,.46);margin-bottom:12px}
.foot a{color:rgba(255,255,255,.76);text-decoration:none;display:block;padding:5px 0;transition:color .3s}
.foot a:hover{color:#fff}
.foot-text{color:rgba(255,255,255,.56);font-size:.85rem;line-height:1.65}
/* хромовое SAZI внизу — как подпись */
.foot-word{display:block;width:min(100%,880px);height:auto;margin:clamp(30px,4vw,56px) auto 0}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;
  margin-top:clamp(22px,3vw,36px);padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.78rem;color:rgba(255,255,255,.46)}
.foot-bottom a{display:inline;padding:0}

/* ==========================================================================
   Разное
   ========================================================================== */
/* хромовые объекты прячем на узких экранах — там им негде лежать */
@media(max-width:1100px){.deco{display:none}}

@media(prefers-reduced-motion:reduce){
  .hero-cue span{animation:none}
  .btn,.rail-btn{transition:none}
  .btn:hover,.rail-btn:hover{transform:none}
}