/* ===========================================================
   Раздел «Кейсы» — Сосницкий Даниил
   Токены и базовая типографика синхронизированы с основным
   сайтом портфолио, чтобы раздел выглядел его частью.
   =========================================================== */

:root{
  --ink:#eef6ff;
  --muted:#92a8bc;
  --navy:#06101c;
  --navy-2:#091827;
  --navy-3:#0a1b2c;
  --line:#84b8e22b;
  --line-strong:#84b8e245;
  --blue:#3da9f5;
  --blue-soft:#82cfff;
  --green:#62d7ad;
  --amber:#e8c26a;
  --radius:14px;
  --radius-lg:18px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:800;letter-spacing:-.015em}
ul,ol{margin:0;padding:0;list-style:none}

a{color:var(--blue-soft);text-decoration:none}
a:hover{color:var(--ink)}

:focus-visible{
  outline:2px solid var(--blue-soft);
  outline-offset:3px;
  border-radius:6px;
}

.section-shell{width:min(1180px,100% - 48px);margin-inline:auto}
.section-pad{padding-top:96px;padding-bottom:96px}
.section-pad-sm{padding-top:64px;padding-bottom:64px}

.eyebrow{
  color:var(--blue-soft);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 20px;
  font-size:12px;
  font-weight:800;
}

.h-xl{font-size:clamp(28px,4.4vw,50px)}
.h-lg{font-size:clamp(24px,3.2vw,36px)}
.h-md{font-size:clamp(19px,2.1vw,24px)}
.h-sm{font-size:17px}

.lead{color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.65;max-width:74ch}
.muted{color:var(--muted)}
.small{font-size:13.5px;line-height:1.6}

/* ---------------- шапка ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:#06101cf2;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex;align-items:center;gap:16px;
  min-height:68px;
}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{
  width:38px;height:38px;flex:none;
  display:inline-grid;place-items:center;
  color:var(--blue-soft);background:#0a2034;
  border:1px solid #82cfff66;border-radius:10px;
  font-size:12px;font-weight:800;letter-spacing:.08em;
}
.brand-copy{display:flex;flex-direction:column;line-height:1.25}
.brand-copy b{font-size:14.5px;font-weight:800}
.brand-copy span{font-size:12px;color:var(--muted)}
.topnav{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topnav a{
  color:var(--muted);font-size:13.5px;font-weight:700;
  padding:8px 12px;border-radius:9px;
  transition:color .18s,background .18s;
}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--ink);background:#0f2237}

/* ---------------- кнопки ---------------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:12px;
  font-size:14px;font-weight:750;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s,background .18s,border-color .18s,color .18s;
}
.button-primary{background:var(--blue);color:#04121e;border-color:var(--blue)}
.button-primary:hover{background:var(--blue-soft);color:#04121e;transform:translateY(-1px)}
.button-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.button-secondary:hover{background:#0f2237;border-color:var(--blue-soft);color:var(--ink);transform:translateY(-1px)}
.button-sm{min-height:42px;padding:0 16px;font-size:13px}

/* ---------------- служебные элементы ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:#0b1c2d;
  color:var(--muted);font-size:12px;font-weight:700;
  letter-spacing:.01em;
}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}

.demo-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  border:1px solid #e8c26a55;background:#1d1806;
  color:var(--amber);font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.demo-badge svg{width:13px;height:13px}

.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--radius);
  border:1px solid #e8c26a3d;background:#15130a;
}
.notice svg{width:20px;height:20px;color:var(--amber);flex:none;margin-top:2px}
.notice p{font-size:14px;color:#e4dcc4}

.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------------- карточки кейсов ---------------- */
.case-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
}
.case-card{
  display:flex;flex-direction:column;
  padding:26px;border-radius:var(--radius-lg);
  border:1px solid var(--line);background:var(--navy-2);
  transition:border-color .2s,transform .2s,background .2s;
}
.case-card:hover{border-color:var(--line-strong);background:var(--navy-3);transform:translateY(-2px)}
.case-card-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.case-num{
  font-size:12px;font-weight:800;color:var(--blue-soft);
  letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.case-card h3{font-size:20px;margin-bottom:8px}
.case-biz{font-size:12.5px;color:var(--blue-soft);font-weight:700;margin-bottom:12px}
.case-card .case-problem{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.case-metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:12px;padding:16px 0;margin:0 0 20px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.case-metric b{display:block;font-size:19px;font-weight:800;color:var(--green);line-height:1.2}
.case-metric span{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.case-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.case-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:750;color:var(--ink)}
.case-link svg{width:16px;height:16px;transition:transform .18s}
.case-card:hover .case-link svg{transform:translateX(3px)}

/* ---------------- детальная страница ---------------- */
.breadcrumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);padding-top:28px}
.breadcrumbs svg{width:14px;height:14px;flex:none}

.case-hero{padding-top:36px;padding-bottom:56px}
.case-hero h1{margin:18px 0 20px}
.case-facts{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.case-fact{background:var(--navy-2);padding:18px 20px}
.case-fact dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:8px}
.case-fact dd{margin:0;font-size:14.5px;font-weight:700;line-height:1.45}

.chapter{padding-top:52px;padding-bottom:52px;border-top:1px solid var(--line)}
.chapter-head{margin-bottom:32px}
.chapter-head .eyebrow{margin-bottom:14px}
.chapter-head p{color:var(--muted);max-width:74ch;margin-top:14px}

.cols-2{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cols-3{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.panel{
  border:1px solid var(--line);background:var(--navy-2);
  border-radius:var(--radius);padding:24px;
}
.panel h3{font-size:17px;margin-bottom:12px}
.panel h4{font-size:14px;margin-bottom:10px;color:var(--blue-soft)}

/* маркированные списки */
.list-check li,.list-dot li,.list-warn li{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;font-size:15px;line-height:1.55;
  border-bottom:1px solid var(--line);
}
.list-check li:last-child,.list-dot li:last-child,.list-warn li:last-child{border-bottom:0}
.list-check svg,.list-dot svg,.list-warn svg{width:17px;height:17px;flex:none;margin-top:4px}
.list-check svg{color:var(--green)}
.list-dot svg{color:var(--blue-soft)}
.list-warn svg{color:var(--amber)}

/* цитата запроса клиента */
.quote{
  border-left:2px solid var(--blue);
  padding:6px 0 6px 22px;
  font-size:clamp(16px,1.9vw,20px);line-height:1.6;
  color:var(--ink);font-style:normal;margin:0;
}
.quote footer{margin-top:14px;font-size:13px;color:var(--muted);font-style:normal}

/* ---------------- шаги логики ---------------- */
.steps{counter-reset:step;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{background:var(--navy-2);padding:20px 22px;display:grid;gap:4px 18px;grid-template-columns:auto 1fr auto}
.step-n{
  grid-row:1 / span 2;
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  background:#0f2338;color:var(--blue-soft);
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.step h4{font-size:15.5px;margin:0}
.step p{grid-column:2;color:var(--muted);font-size:14px;margin:0}
.step-mode{
  grid-row:1;align-self:center;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.step-mode.auto{background:#08251c;color:var(--green);border:1px solid #62d7ad3d}
.step-mode.human{background:#1d1806;color:var(--amber);border:1px solid #e8c26a3d}

/* ---------------- архитектурная схема ---------------- */
.diagram{
  border:1px solid var(--line);background:var(--navy-2);
  border-radius:var(--radius);padding:22px;
}
.diagram-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.diagram-scroll svg{display:block;min-width:640px;width:100%;height:auto}
.diagram-legend{
  display:flex;flex-wrap:wrap;gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.diagram-legend span{display:inline-flex;align-items:center;gap:8px}
.legend-chip{width:12px;height:12px;border-radius:3px;flex:none}
.diagram-hint{font-size:12px;color:var(--muted);margin-top:12px}

/* ---------------- «до и после» ---------------- */
.ba{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ba-col{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--navy-2)}
.ba-col.after{border-color:#62d7ad33;background:#07161a}
.ba-col h3{font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.ba-col.before h3{color:var(--muted)}
.ba-col.after h3{color:var(--green)}
.ba-col h3 svg{width:16px;height:16px}
.ba-step{
  display:flex;gap:12px;padding:9px 0;
  font-size:14px;line-height:1.5;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.ba-step:last-child{border-bottom:0}
.ba-step em{font-style:normal;color:var(--muted);font-size:12px;white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums}
.ba-col.after .ba-step{color:#cfe7dd}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--navy-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
table.tbl th,table.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.tbl th{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:800;background:#0a1c2c;white-space:nowrap;
}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td b{font-weight:700}
.cell-ok{color:var(--green);font-weight:700}
.cell-wait{color:var(--amber);font-weight:700}

/* ---------------- панель показателей ---------------- */
.metrics{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.metric{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--navy-2);padding:22px;
}
.metric-kind{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:12px;
}
.metric b{display:block;font-size:clamp(26px,3.4vw,34px);font-weight:800;color:var(--green);line-height:1.1}
.metric-label{display:block;font-size:14px;margin-top:8px;font-weight:700}
.metric-basis{display:block;font-size:12.5px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--line);line-height:1.55}

.assumptions{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:22px;margin-top:20px;background:#07121e;
}
.assumptions h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.assumptions li{
  display:flex;gap:11px;font-size:13.5px;color:var(--muted);
  padding:7px 0;line-height:1.55;
}
.assumptions li::before{content:"—";color:var(--blue-soft);flex:none}

/* ---------------- стек ---------------- */
.stack-group{padding:18px 0;border-bottom:1px solid var(--line)}
.stack-group:last-child{border-bottom:0}
.stack-group h4{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin-bottom:12px;
}

/* ---------------- скриншот реального workflow ---------------- */
.wf-shot{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#161616;overflow:hidden;margin-bottom:20px;
}
.wf-shot:last-child{margin-bottom:0}
.wf-shot-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:#0a1c2c;
  font-size:13px;font-weight:700;color:var(--ink);
}
.wf-shot-head svg{width:15px;height:15px;color:var(--blue-soft);flex:none}
.wf-shot-canvas{overflow-x:auto;overflow-y:hidden;background:#161616}
.wf-shot-canvas svg{display:block;width:100%;height:auto;min-width:900px}
.wf-shot-foot{
  padding:10px 16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);background:#0a1c2c;
}

/* ---------------- фрагмент workflow ---------------- */
.wf{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#060f19;overflow:hidden;
}
.wf-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--muted);font-weight:700;
}
.wf-head svg{width:15px;height:15px;color:var(--blue-soft)}
.wf-body{
  padding:16px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;color:#b9d4ea;
}
.wf-body pre{margin:0;white-space:pre}
.wf-node{color:var(--blue-soft)}
.wf-cmt{color:#5f7d97}

/* ---------------- финальный CTA ---------------- */
.cta{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--navy-2);padding:clamp(28px,4vw,48px);
  display:grid;gap:24px;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
}
.cta h2{margin-bottom:14px}
.cta p{color:var(--muted);max-width:60ch;margin:0}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------- подвал ---------------- */
.footer{border-top:1px solid var(--line);padding:36px 0}
.footer-inner{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.footer .small{color:var(--muted)}
.footer nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}

/* ---------------- оглавление кейса ---------------- */
.toc{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--navy-2);padding:20px 22px;
}
.toc h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{display:flex;flex-wrap:wrap;gap:8px 10px;counter-reset:toc}
.toc a{
  font-size:13px;font-weight:700;color:var(--muted);
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  display:inline-block;transition:color .18s,border-color .18s,background .18s;
}
.toc a:hover{color:var(--ink);border-color:var(--blue-soft);background:#0f2237}

/* ---------------- адаптив ---------------- */
@media (max-width:900px){
  .section-shell{width:min(100% - 28px,1180px)}
  .section-pad{padding-top:64px;padding-bottom:64px}
  .cta{grid-template-columns:1fr}
  .step{grid-template-columns:auto 1fr}
  .step-mode{grid-row:auto;grid-column:2;justify-self:start;margin-top:8px}
  .step p{grid-column:2}
}
@media (max-width:560px){
  .topbar-inner{min-height:auto;padding:12px 0;flex-wrap:wrap;gap:10px}
  .topnav{margin-left:0;width:100%;gap:4px}
  .topnav a{padding:7px 10px;font-size:13px}
  .button{width:100%}
  .cta-actions .button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .case-card:hover,.button:hover{transform:none}
}

@media print{
  body{background:#fff;color:#111}
  .topbar,.cta,.footer{display:none}
  .panel,.case-card,.diagram{border-color:#ccc;background:#fff}
}