/* ─────────────────────────────────────────────
   «Плакат» — чёрное на бумаге, один красный.
   Правило: красный = действие и цифра. Чёрный = слово.
   Фото всегда чёрно-белое, цвет даёт только плашка.
   ───────────────────────────────────────────── */
:root{
  --paper:#F2F1ED;
  --white:#FFFFFF;
  --ink:#0B0B0C;
  --ink-2:#1A1A1C;
  --grey:#6C6C70;     /* текст: проходит 4.62 на бумаге */
  --grey-2:#8E8E92;   /* ТОЛЬКО декор и точки: как текст даёт 2.89 */
  --line:#DCDAD3;
  --line-2:#C9C6BD;
  --red:#E51E29;      /* заливки, плашки, крупный текст */
  --red-deep:#BE1620; /* ТОЛЬКО мелкий красный текст: #E51E29 даёт 4.08 на бумаге */
  --shadow:0 20px 44px -30px rgba(11,11,12,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Onest","Manrope",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red); outline-offset:2px}
.shell{width:min(1180px,calc(100% - 40px)); margin-inline:auto}

/* ── типографика ─────────────────────────── */
.poster{font-family:"Oswald","Onest",Impact,sans-serif; font-weight:700;
  text-transform:uppercase; line-height:.84; letter-spacing:-.012em; margin:0}
h1.poster{font-size:clamp(52px,12.5vw,148px)}
h2.poster{font-size:clamp(32px,5.6vw,68px); line-height:.9}
h3{font-family:"Oswald","Onest",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.005em; line-height:1; margin:0; font-size:22px}
p{margin:0}
.red{color:var(--red)}
.label{font-size:10.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--grey)}
.label-ink{color:var(--ink)}
.lead{font-size:clamp(15px,1.35vw,17px); color:var(--grey); line-height:1.68; max-width:46ch}

/* ── шапка ───────────────────────────────── */
.bar{position:sticky; top:0; z-index:60; background:rgba(242,241,237,.93);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:22px; min-height:70px}
.logo{font-family:"Oswald",sans-serif; font-weight:700; font-size:27px; letter-spacing:-.02em;
  text-decoration:none; margin-right:auto; line-height:1}
.logo i{color:var(--red); font-style:normal}
.bar nav{display:flex; gap:30px}
.bar nav a{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); transition:color .16s}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--red-deep)}

.btn{display:inline-flex; align-items:center; gap:12px; padding:15px 24px; border:2px solid transparent;
  font-family:"Onest",sans-serif; font-size:12px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--ink)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--red)}
.btn-line{border-color:var(--ink); color:var(--ink)}
.btn-line:hover{background:var(--ink); color:#fff}
.btn-sm{padding:12px 18px; font-size:11px}

/* круглая кнопка со стрелкой */
.round{width:56px; height:56px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-size:20px; flex:none; text-decoration:none;
  transition:transform .22s, background .22s}
.round:hover{transform:rotate(45deg); background:var(--ink)}

/* ── герой ───────────────────────────────── */
.hero{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr);
  gap:clamp(24px,3vw,44px); align-items:end; padding:clamp(28px,4vw,54px) 0 0}
.hero h1{position:relative}
.aster{color:var(--red); font-family:"Oswald",sans-serif; font-size:.42em; vertical-align:super;
  line-height:1; display:inline-block; animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-sub{margin-top:26px; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(17px,2.1vw,26px); line-height:1.16; letter-spacing:.002em}
.hero-sub span{display:block; color:var(--red)}
.hero-lead{margin-top:18px}
.hero-go{display:flex; align-items:center; gap:15px; margin-top:26px; text-decoration:none}
.hero-go b{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase}

/* портрет на красной плашке */
/* Высота задаётся блоку, а не картинке: иначе img со своей
   пропорцией 960×1706 растягивает герой почти до 1000px. */
.shot{position:relative; height:clamp(350px,42vw,528px)}
.shot .block{position:absolute; right:0; top:0; height:82%; width:58%; background:var(--red)}
/* Картинка уже блока и прижата влево — иначе тёмная
   иллюстрация закрывает красную плашку целиком. */
.shot img{position:absolute; z-index:1; left:0; bottom:0; width:84%; height:94%;
  object-fit:cover; object-position:50% 14%; filter:grayscale(1) contrast(1.14)}
.shot .tag{position:absolute; z-index:2; top:18px; right:20px; text-align:right; color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.5}

/* круглая печать «свободен» */
.seal{position:absolute; z-index:3; right:2%; bottom:-6%; width:124px; height:124px;
  background:var(--white); border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow)}
.seal svg{position:absolute; inset:0; width:100%; height:100%; animation:spin 16s linear infinite}
.seal text{font-size:9.4px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; fill:var(--ink)}
.seal b{position:relative; text-align:center; font-family:"Oswald",sans-serif; font-weight:700;
  text-transform:uppercase; font-size:13px; line-height:1.05}
.seal b i{display:block; color:var(--red); font-style:normal}

/* ── чёрная полоса с цифрами ─────────────── */
.figures{background:var(--ink); color:#fff; margin-top:clamp(26px,3.4vw,46px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.figures div{padding:26px 24px; border-right:1px solid rgba(255,255,255,.13)}
.figures div:last-child{border-right:none}
.figures b{display:block; font-family:"Oswald",sans-serif; font-weight:700; color:var(--red);
  font-size:clamp(30px,3.6vw,42px); line-height:1; letter-spacing:-.01em}
.figures span{display:block; margin-top:9px; font-size:10.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#B9B9BC; line-height:1.5}

/* ── заголовок секции ────────────────────── */
.sec{padding:clamp(48px,6.5vw,92px) 0}
.sec-top{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(22px,3vw,38px)}
.more{display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid var(--red);
  padding-bottom:4px}
.more:hover{color:var(--red-deep)}

/* ── работы ──────────────────────────────── */
.work{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{position:relative; min-height:330px; background:var(--ink); overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:26px;
  text-decoration:none; color:#fff; transition:transform .25s}
.card:hover{transform:translateY(-6px)}
.card.light{background:var(--white); color:var(--ink)}
.card .shotbg{position:absolute; inset:0; z-index:0}
.card .shotbg::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg,transparent 30%,rgba(11,11,12,.72))}
.card.light .shotbg::after{background:linear-gradient(200deg,transparent 34%,rgba(255,255,255,.7))}
.card .shotbg img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08)}
.card > *{position:relative; z-index:1}
.card .redblock{position:absolute; z-index:0; right:0; top:0; width:44%; height:38%; background:var(--red)}
.card h3{font-size:clamp(28px,3.2vw,42px); line-height:.9}
.card .meta{display:flex; justify-content:space-between; gap:14px; font-size:10px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; opacity:.82}

/* ── услуги ──────────────────────────────── */
.svc{display:grid; grid-template-columns:minmax(240px,.86fr) minmax(0,2fr); gap:0; border:1px solid var(--line)}
.svc-head{background:var(--red); color:#fff; padding:clamp(28px,3.4vw,44px);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px}
.svc-head h2{color:#fff}
.svc-head .arrow{font-size:34px; line-height:1; align-self:flex-end}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); background:var(--white)}
.svc-cell{padding:26px 24px; border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px; transition:background .2s}
.svc-cell:hover{background:var(--paper)}
.ico{width:42px; height:42px; border:1.6px solid var(--red); border-radius:50%;
  display:grid; place-items:center; color:var(--red); font-size:17px; flex:none}
.svc-cell h3{font-size:16px}
.svc-cell p{font-size:14px; color:var(--grey); line-height:1.55}
.svc-cell .price{margin-top:auto; padding-top:8px; font-family:"Oswald",sans-serif; font-weight:700;
  font-size:19px; color:var(--red)}

/* ── обо мне и шкалы ─────────────────────── */
.about{display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,.62fr) minmax(0,1.05fr);
  gap:clamp(22px,3vw,40px); align-items:start}
.about h2{margin-top:14px}
.about .lead{margin-top:16px}
.sign{margin-top:20px; font-family:"Oswald",sans-serif; font-size:26px; font-style:italic;
  transform:skewX(-9deg); color:var(--ink)}
.about-shot{position:relative; min-height:290px}
.about-shot .block{position:absolute; inset:14% 0 8% 12%; background:var(--red)}
.about-shot img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1); mix-blend-mode:multiply}
.bars{display:flex; flex-direction:column; gap:17px}
.bar-row b{display:flex; justify-content:space-between; font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px}
.bar-row b i{font-style:normal; color:var(--red-deep)}
.bar-row .track{height:5px; background:var(--line)}
.bar-row .fill{height:100%; background:var(--red); width:0; transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.in .bar-row .fill{width:var(--w)}

/* ── доверие ─────────────────────────────── */
.trust-row{display:flex; align-items:center; gap:clamp(20px,3.4vw,46px); flex-wrap:wrap;
  padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trust-row .cap{font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--red-deep)}
.trust-row a{font-family:"Oswald",sans-serif; font-weight:700; font-size:19px; text-transform:uppercase;
  letter-spacing:.02em; text-decoration:none; color:var(--ink-2); opacity:.62; transition:opacity .18s, color .18s}
.trust-row a:hover{opacity:1; color:var(--red-deep)}

/* ── призыв ──────────────────────────────── */
.final{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:0;
  margin-top:clamp(34px,4vw,56px)}
.final-red{background:var(--red); color:#fff; padding:clamp(30px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:24px}
.final-red h2{color:#fff; max-width:13ch}
.final-red .round{background:#fff; color:var(--red); width:74px; height:74px; font-size:26px}
.final-red .round:hover{background:var(--ink); color:#fff}
.final-info{background:var(--white); padding:clamp(26px,3vw,44px); display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:22px; align-content:center}
.final-info .cap{font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-deep); margin-bottom:10px}
.final-info a,.final-info span{display:block; font-size:14px; color:var(--grey); text-decoration:none; line-height:1.85}
.final-info a:hover{color:var(--red-deep)}

.foot{display:flex; gap:18px; flex-wrap:wrap; align-items:center; padding:24px 0 44px;
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--grey)}
.foot a{text-decoration:none} .foot a:hover{color:var(--red-deep)}
.foot .sp{margin-left:auto}

/* ── лента обновлений (разметку строит app.js) ── */
.updates{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.update-card{background:var(--white); border:1px solid var(--line); padding:22px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
  border-top:4px solid var(--red); transition:transform .22s}
.update-card:hover{transform:translateY(-4px)}
.update-card header{display:flex; align-items:center; gap:11px; justify-content:space-between}
.project-badge{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep)}
.update-card time{font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--grey)}
.update-card h3{font-size:17px; line-height:1.15}
.update-card p{font-size:13.5px; color:var(--grey); line-height:1.55}
.update-card-media{margin:-22px -22px 2px; overflow:hidden}
.update-card-media img{width:100%; aspect-ratio:16/9; object-fit:cover; filter:grayscale(1)}
.loading{color:var(--grey); font-size:14px}

/* живые статусы — точками в полосе цифр */
.status-dot{width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--grey-2)}
.status-dot.online{background:#2FBF5B} .status-dot.offline{background:var(--red)}
.status-dot.checking{background:var(--grey-2); animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── движение ────────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(20px)}
[data-reveal].in{opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms)}
.no-motion [data-reveal],.no-motion [data-reveal].in{opacity:1!important; transform:none!important; transition:none!important}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .bar nav{display:none}
  .svc{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about-shot{min-height:250px; max-width:400px}
  .final{grid-template-columns:1fr}
}
@media (max-width:560px){
  .seal{width:100px; height:100px; left:-10px}
  .figures div{border-right:none; border-bottom:1px solid rgba(255,255,255,.13)}
  .final-red{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1!important; transform:none!important; transition:none!important}
  .aster,.seal svg,.dot.checking{animation:none}
  .bar-row .fill{transition:none}
}

/* ═════════════════════════════════════════════
   Страницы услуг: тарифы, шаги, вопросы, кейсы.
   ═════════════════════════════════════════════ */
.crumbs{padding:20px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--grey)}
.crumbs a{color:var(--grey); text-decoration:none}
.crumbs a:hover{color:var(--red-deep)}

.s-hero{display:grid; grid-template-columns:minmax(0,1.24fr) minmax(280px,.76fr);
  gap:clamp(24px,3.4vw,48px); align-items:end; padding:clamp(26px,3.6vw,50px) 0 clamp(30px,4vw,54px)}
.s-hero h1{font-size:clamp(44px,9vw,108px)}
.s-hero .hero-sub{margin-top:22px}
.s-hero .lead{margin-top:16px}
.s-hero .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

.pricecard{background:var(--ink); color:#fff; padding:28px; border-top:6px solid var(--red)}
.pricecard .cap{font-size:10px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:#B9B9BC}
.pricecard .big{font-family:"Oswald",sans-serif; font-weight:700; color:var(--red);
  font-size:clamp(34px,4.4vw,50px); line-height:1; margin:12px 0 18px}
.pricecard ul{list-style:none; margin:0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; gap:11px}
.pricecard li{display:flex; gap:11px; font-size:14px; color:#D6D6D8; line-height:1.5}
.pricecard li::before{content:"→"; color:var(--red); font-weight:800; flex:none}

/* тарифы */
.tiers{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(266px,1fr)); border:1px solid var(--line)}
.tier{position:relative; background:var(--white); padding:32px 26px 28px;
  border-left:1px solid var(--line); display:flex; flex-direction:column; gap:16px; transition:background .2s}
.tier:first-child{border-left:none}
.tier:hover{background:var(--paper)}
.tier.featured{background:var(--ink); color:#fff}
.tier.featured:hover{background:var(--ink-2)}
.tier-badge{position:absolute; top:0; left:0; background:var(--red); color:#fff; font-size:9.5px;
  font-weight:800; letter-spacing:.15em; text-transform:uppercase; padding:6px 12px}
.tier-name{font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:19px; letter-spacing:.01em}
.tier-price{font-family:"Oswald",sans-serif; font-weight:700; font-size:34px; line-height:1; color:var(--red)}
.tier-term{font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--grey)}
.tier.featured .tier-term{color:#B9B9BC}
.tier ul{list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px}
.tier.featured ul{border-top-color:rgba(255,255,255,.16)}
.tier li{display:flex; gap:11px; font-size:14px; color:var(--grey); line-height:1.5}
.tier.featured li{color:#D6D6D8}
.tier li::before{content:"+"; color:var(--red); font-weight:800; flex:none}
.tier .btn{margin-top:auto}
.tier.featured .btn-line{border-color:#fff; color:#fff}
.tier.featured .btn-line:hover{background:#fff; color:var(--ink)}

/* шаги */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); border-top:2px solid var(--ink)}
.step{padding:26px 22px 30px 0; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px}
.step-n{font-family:"Oswald",sans-serif; font-weight:700; font-size:15px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red-deep)}
.step h3{font-size:19px}
.step p{font-size:14px; color:var(--grey); line-height:1.58}

/* кейсы-доказательства */
.proof-grid{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(244px,1fr))}
.proof{background:var(--white); border:1px solid var(--line); border-top:4px solid var(--red);
  padding:24px; display:flex; flex-direction:column; gap:10px; transition:transform .22s}
.proof:hover{transform:translateY(-4px)}
.proof-kicker{font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep)}
.proof h3{font-size:20px}
.proof p{font-size:13.5px; color:var(--grey); line-height:1.55}
.proof a{margin-top:auto; padding-top:9px; font-size:11px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--ink)}
.proof a:hover{color:var(--red-deep)}

/* вопросы */
.faq{display:flex; flex-direction:column; max-width:920px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); background:transparent}
.faq summary{cursor:pointer; padding:20px 0; list-style:none; display:flex; gap:20px;
  align-items:center; justify-content:space-between;
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; font-size:18px; line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:"Oswald",sans-serif; color:var(--red); font-size:24px;
  line-height:1; flex:none}
.faq details[open] summary{color:var(--red-deep)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0; padding:0 0 22px; color:var(--grey); font-size:15px; line-height:1.68; max-width:64ch}

.cross{display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(24px,3.4vw,42px)}
.cross a{display:inline-flex; align-items:center; gap:10px; padding:15px 22px; background:var(--white);
  border:1px solid var(--line); font-size:11px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; transition:border-color .18s, transform .18s}
.cross a:hover{border-color:var(--ink); transform:translateY(-2px)}

@media (max-width:960px){
  .s-hero{grid-template-columns:1fr}
  .tier{border-left:none; border-top:1px solid var(--line)}
  .tier:first-child{border-top:none}
}
@media (max-width:560px){ .step{padding-right:0} }