/* Страницы кейсов. Токены совпадают с главной, набор компонентов минимальный. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
src:url(fonts/montserrat-cyrillic-600-normal.woff2) format('woff2');
unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;
src:url(fonts/montserrat-cyrillic-900-normal.woff2) format('woff2');
unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;
src:url(fonts/montserrat-latin-900-normal.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}

:root{
  --bg:#1d2025; --bg-deep:#15181c; --bg-raised:#23272d; --bg-hi:#2a2f36;
  --line:#343941; --line-soft:#282d34;
  --ink:#f2f3f5; --ink-dim:#a8acb4; --muted:#767b85;
  --accent:#7fd9d1; --accent-deep:#4fc4bb; --accent-soft:rgba(127,217,209,.16);
  --radius:16px; --maxw:860px;
  --display:"Montserrat",-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; overflow-x:clip; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.47; letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.wrap{width:min(100% - 40px, var(--maxw)); margin-inline:auto}

header{border-bottom:1px solid var(--line-soft); background:var(--bg-deep)}
.nav{display:flex; align-items:center; gap:14px; height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo b{font-family:var(--display); font-weight:900; font-size:15px; letter-spacing:.02em}
.logo span{color:var(--muted); font-size:14px}
.back{margin-left:auto; color:var(--ink-dim); text-decoration:none; font-size:15px}
.back:hover{color:var(--accent)}

main{padding:clamp(40px,7vw,76px) 0 clamp(56px,8vw,96px)}
.crumbs{font-size:14px; color:var(--muted); margin-bottom:22px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent)}

.tagline{
  display:inline-block; font-size:14px; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(127,217,209,.24);
  border-radius:9999px; padding:5px 13px; margin-bottom:18px;
}
h1{
  font-family:var(--display); font-weight:900; margin:0 0 16px;
  font-size:clamp(30px,4.6vw,46px); line-height:1.05; letter-spacing:-.035em;
}
.lead{font-size:clamp(17px,1.5vw,20px); color:var(--ink-dim); margin:0 0 30px; max-width:56ch}

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  padding:22px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  margin-bottom:clamp(32px,5vw,52px);
}
.fact b{display:block; font-family:var(--display); font-weight:900; font-size:20px; letter-spacing:-.03em}
.fact i{display:block; font-style:normal; font-size:14px; color:var(--muted); margin-top:5px}
.fact.acc b{color:var(--accent)}

h2{
  font-family:var(--display); font-weight:900; margin:clamp(34px,5vw,54px) 0 14px;
  font-size:clamp(21px,2.4vw,28px); line-height:1.15; letter-spacing:-.032em;
}
p{margin:0 0 16px; color:var(--ink-dim); max-width:62ch}
p strong{color:var(--ink); font-weight:600}

/* иллюстрация выходит за текстовую колонку: скриншот нужно рассматривать */
.shot{
  margin:30px 0; position:relative; left:50%; transform:translateX(-50%);
  /* третье ограничение — высота окна: на невысоком экране картинка не должна
     занимать его целиком, поэтому ширина считается ещё и от vh */
  width:min(calc(100vw - 40px), 1040px, 112vh);
}
.shot .frame{
  border:1px solid var(--line); border-radius:13px; overflow:hidden;
  background:var(--bg-deep); box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.shot .bar{display:flex; align-items:center; gap:6px; height:34px; padding:0 13px; background:var(--bg-hi); border-bottom:1px solid var(--line)}
.shot .bar i{width:7px; height:7px; border-radius:50%; background:#3d434c}
.shot .bar span{margin-left:11px; font-size:12.5px; color:var(--muted)}
figcaption{font-size:14px; color:var(--muted); margin-top:13px; text-align:center}

ul{margin:0 0 18px; padding:0; list-style:none; max-width:62ch}
li{position:relative; padding-left:24px; margin-bottom:11px; color:var(--ink-dim)}
li::before{
  content:""; position:absolute; left:0; top:9px; width:10px; height:6px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 20px}
.chip{
  font-size:13.5px; color:var(--ink-dim); background:var(--bg-raised);
  border:1px solid var(--line); border-radius:9999px; padding:6px 13px;
}

.cta{
  margin-top:clamp(40px,6vw,64px); padding:clamp(26px,4vw,38px);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised);
}
.cta h2{margin-top:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:13px 28px; border-radius:9999px; text-decoration:none;
  background:var(--accent); color:#10211f; font-weight:500; font-size:17px;
  border:1px solid var(--accent); transition:background .25s var(--ease);
}
.btn:hover{background:var(--accent-deep)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent); background:var(--bg-hi)}
.btns{display:flex; flex-wrap:wrap; gap:11px; margin-top:8px}

footer{border-top:1px solid var(--line-soft); padding:30px 0; color:var(--muted); font-size:14px}
footer p{color:var(--muted); margin:0 0 6px}
footer a{color:var(--muted)}