/* Страница-кейс: приёмы volrix.ru (нумерованные подписи, курсивный акцент в заголовках,
   карточки с индексом, крупные показатели), на базе style.css. */


:root { --crit: #ef5a5a; --high: #f0a04b; --med: #e2c84a; --low: #5aa9e6; --info: #8a94a3; }


/* hero кейса */
.case-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background:
  radial-gradient(60% 70% at 12% 0%, rgba(108,99,255,0.14), transparent 62%),
  radial-gradient(50% 60% at 92% 100%, rgba(51,194,147,0.12), transparent 64%),
  radial-gradient(circle, rgba(232,236,241,0.07) 1px, transparent 1.6px) 0 0 / 28px 28px; }
.case-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(108,99,255,0.45), rgba(51,194,147,0.4), transparent); }
.case-hero .wrap { padding-top: 72px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: end; }
.case-hero h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; max-width: 16ch; }
.case-hero .lead { font-size: 18px; color: var(--ink-2); max-width: 600px; margin-top: 22px; }
.case-hero .eyebrow { margin-bottom: 22px; }
.nda { border: 1px solid var(--line-strong); background: rgba(16,22,30,0.72); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.nda .mono { color: var(--accent); }
.nda p { font-size: 15px; color: var(--ink-2); }
.nda dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 6px 0 0; font-size: 14.5px; }
.nda dt { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.nda dd { margin: 0; color: var(--ink); }

/* показатели */
.kpis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kpi { background: var(--bg); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; position: relative; grid-column: span 3; transition: background .3s var(--ease); }
.kpi:hover { background: var(--bg-3); }
.kpi.wide { grid-column: span 6; }
.kpi .head { display: flex; justify-content: space-between; align-items: center; }
.kpi .idx { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .08em; }
.kpi .n { font-size: clamp(38px, 4vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .n small { font-size: .42em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.kpi .l { color: var(--ink-2); font-size: 15px; }
.kpi .sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kpi .sub span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; border: 1px solid var(--line); padding: 4px 8px; color: var(--ink-2); }
.kpi .sub span b { font-weight: 600; margin-right: 5px; }
.kpi .sub .c b { color: var(--crit); } .kpi .sub .h b { color: var(--high); } .kpi .sub .m b { color: var(--med); } .kpi .sub .lo b { color: var(--low); } .kpi .sub .i b { color: var(--info); }

/* полоса критичности */
.sevbar { display: flex; height: 8px; width: 100%; background: var(--bg-3); overflow: hidden; margin-top: 8px; }
.sevbar i { display: block; height: 100%; width: 0; transition: width 1.1s var(--ease); }
.sevbar .c { background: var(--crit); } .sevbar .h { background: var(--high); } .sevbar .m { background: var(--med); } .sevbar .lo { background: var(--low); } .sevbar .i { background: var(--info); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; display: inline-block; }
.legend .c { background: var(--crit); } .legend .h { background: var(--high); } .legend .m { background: var(--med); } .legend .lo { background: var(--low); } .legend .i { background: var(--info); }

/* начать отсюда: критичные находки */
.start { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.start .section-head { margin-bottom: 0; position: sticky; top: 100px; }
.findings { display: flex; flex-direction: column; border: 1px solid var(--line); }
.finding { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; background: var(--bg); transition: background .3s var(--ease); }
.finding + .finding { border-top: 1px solid var(--line); }
.finding:hover { background: var(--bg-3); }
.finding .no { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.finding .t { font-size: 16px; color: var(--ink); line-height: 1.4; }
.finding .d { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.sev { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border: 1px solid; white-space: nowrap; }
.sev.c { color: var(--crit); border-color: rgba(239,90,90,.45); background: rgba(239,90,90,.08); }
.sev.h { color: var(--high); border-color: rgba(240,160,75,.45); background: rgba(240,160,75,.08); }
.findings-foot { padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* блокеры */
.blockers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
.blocker { background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.blocker .n { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.blocker .n.acc { color: var(--accent); }
.blocker .l { font-size: 15px; color: var(--ink-2); }

/* матрица доменов */
.matrix { border: 1px solid var(--line); background: var(--bg); }
.mrow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 72px; gap: 20px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: 0; }
.mrow.head { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.mrow .name { font-size: 15.5px; color: var(--ink); }
.mrow .name small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-top: 2px; text-transform: uppercase; }
.mrow .bar { display: flex; height: 14px; background: var(--bg-3); overflow: hidden; }
.mrow .bar i { display: block; height: 100%; width: 0; transition: width 1s var(--ease); }
.mrow .bar .c { background: var(--crit); } .mrow .bar .h { background: var(--high); } .mrow .bar .m { background: var(--med); } .mrow .bar .lo { background: var(--low); } .mrow .bar .i { background: var(--info); }
.mrow .tot { font-family: var(--mono); font-size: 14px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.mrow .nums { display: none; }
.matrix-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* честность: не проверено */
.honest { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.honest .section-head { margin-bottom: 0; }
.nv { border: 1px solid var(--line); }
.nv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg); }
.nv-row:first-child { border-top: 0; }
.nv-row .w { font-size: 15.5px; color: var(--ink); }
.nv-row .why { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; }
.tag.ok { color: var(--accent); border-color: rgba(51,194,147,.45); background: var(--accent-soft); }
.tag.no { color: var(--high); border-color: rgba(240,160,75,.45); background: rgba(240,160,75,.08); }

/* разделы портала */
.portal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pcard { background: var(--bg); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; position: relative; transition: background .3s var(--ease); }
.pcard:hover { background: var(--bg-3); }
.pcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.pcard:hover::before { transform: scaleX(1); }
.pcard .head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pcard h3 { font-size: 18px; margin-top: 4px; }
.pcard p { font-size: 14.5px; color: var(--ink-2); }

/* живой портал */
.live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.live > div { background: var(--bg); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.live .mono { display: block; }
.live h3 { font-size: 22px; }
.live p { color: var(--ink-2); font-size: 15.5px; }
.live .delta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.live .delta span { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line-strong); padding: 7px 11px; color: var(--ink); }
.live .delta span b { color: var(--accent); font-weight: 600; }
.live .warn { border-left: 2px solid var(--crit); padding-left: 14px; color: var(--ink); font-size: 15px; }

/* CTA */
.cta { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; border: 1px solid var(--line-strong); padding: 40px 44px; background:
  radial-gradient(50% 120% at 0% 50%, rgba(51,194,147,0.14), transparent 60%),
  radial-gradient(40% 120% at 100% 50%, rgba(108,99,255,0.14), transparent 60%), var(--bg-2); }
.cta h2 { font-size: clamp(26px, 3vw, 36px); }
.cta p { color: var(--ink-2); font-size: 17px; margin-top: 10px; max-width: 620px; }

@media (max-width: 1024px) {
  .case-hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .kpi { grid-column: span 6; }
  .kpi.wide { grid-column: span 12; }
  .start, .honest { grid-template-columns: 1fr; gap: 32px; }
  .start .section-head { position: static; }
  .portal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; padding: 32px 28px; }
}
@media (max-width: 720px) {
  .case-hero .wrap { padding-top: 44px; padding-bottom: 44px; }
  .case-hero h1 { font-size: 34px; max-width: none; }
  .kpi { grid-column: span 12; padding: 22px 20px; }
  .blockers { grid-template-columns: 1fr; }
  .finding { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 18px; }
  .finding .sev { grid-column: 2; justify-self: start; }
  .mrow { grid-template-columns: minmax(0, 1fr) 56px; gap: 8px 14px; padding: 14px 18px; }
  .mrow .bar { grid-column: 1 / -1; }
  .mrow .tot { grid-row: 1; grid-column: 2; }
  .mrow.head .bar-h { display: none; }
  .portal { grid-template-columns: 1fr; }
  .nv-row { grid-template-columns: 1fr; gap: 8px; }
  .nv-row .tag { justify-self: start; }
  .nda dl { grid-template-columns: 1fr; gap: 2px 0; }
  .nda dd { margin-bottom: 6px; }
}