/* SafePool: оформление MVP по дизайн-системе лендинга (токены, шрифты, знак). Светлая тема. */
:root {
  --bg: #EDF1F7; --bg2: #E4EAF3; --bg3: #DBE3EF; --surface: #F6F8FC;
  --text: #14213D; --muted: #51607D; --hair: rgba(20,33,61,.14); --hair-s: rgba(20,33,61,.28);
  --acc: #2C5CC5; --acc-h: #2450AE; --acc-soft: #DCE6F8;
  --navy: #16264A; --navy2: #1E3260; --on-navy: #E8EDF7; --on-navy-m: #B3C0DB;
  --ok: #1C9A6B; --ok-bg: rgba(28,154,107,.09);
  --mid: #4D8B2F;
  --warn: #A9701A; --warn-bg: rgba(169,112,26,.09);
  --bad: #B42318; --bad-bg: rgba(180,35,24,.08);
  --unk: #51607D; --unk-bg: rgba(20,33,61,.06);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gut: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(16px, .3vw + 14.8px, 18px)/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--acc); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.page { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--acc); color: #fff; padding: 10px 16px; z-index: 50; font-weight: 600; }
.skip:focus { left: 8px; }

/* шапка */
.top { position: sticky; top: 0; z-index: 30; background: rgba(237,241,247,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: clamp(60px, 5vw, 76px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; font: 600 clamp(20px, 1vw + 12px, 25px)/1 var(--serif); letter-spacing: .01em; }
.brand svg { width: clamp(30px, 2vw + 14px, 40px); height: clamp(30px, 2vw + 14px, 40px); flex: none; color: var(--navy); }
.brand b { font-weight: 600; color: var(--acc); }
nav { display: flex; gap: clamp(18px, 2.2vw, 40px); align-items: center; }
nav a.link { color: var(--muted); text-decoration: none; font-size: .88em; letter-spacing: .04em; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
nav a.link:hover, nav a.link[aria-current] { color: var(--text); border-color: var(--acc); }
@media (max-width: 720px) { nav a.link { display: none; } }

/* кнопки */
button, .btn { display: inline-block; padding: .95em 1.8em; font: 600 .82em/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #fff; background: var(--acc); border: 0; border-radius: 3px; cursor: pointer; transition: background .25s, box-shadow .25s; }
button:hover, .btn:hover { background: var(--acc-h); box-shadow: 0 12px 26px -12px rgba(44,92,197,.7); }
.top .btn { padding: .8em 1.3em; font-size: .72em; white-space: nowrap; }
.btn.line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--hair-s); }
.btn.line:hover { background: rgba(44,92,197,.08); box-shadow: inset 0 0 0 1px var(--acc); }

/* типографика */
.kicker { display: flex; align-items: center; gap: 14px; font: 600 .72em/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); margin: 0 0 1.5em; }
.kicker::before { content: ""; width: 44px; height: 1px; background: var(--acc); }
h1 { font: 600 clamp(32px, 3.4vw + 12px, 64px)/1.08 var(--serif); letter-spacing: -.012em; margin: 0 0 .45em; color: var(--navy); }
h1 em { font-style: normal; color: var(--acc); }
.hero h1 { font-size: clamp(32px, 2.4vw + 14px, 54px); }
h2 { font: 600 clamp(22px, 1.2vw + 14px, 32px)/1.2 var(--serif); letter-spacing: -.005em; margin: 1.6em 0 .6em; color: var(--navy); }
h3 { font: 600 1.1em/1.3 var(--serif); margin: 1em 0 .4em; color: var(--navy); }
.lead { font-size: clamp(17px, .5vw + 13px, 21px); color: var(--muted); max-width: 36em; margin: 0 0 1.6em; }
.muted { color: var(--muted); } .small { font-size: .88em; }
.crumb { margin: 0 0 1em; font-size: .88em; }
.sub { margin: 0 0 14px; font-size: 1.1em; }

/* первый экран */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 5.5vw, 96px) 0 clamp(48px, 6vw, 104px); background: radial-gradient(50% 70% at 80% 38%, rgba(130,165,230,.4), transparent 70%), radial-gradient(40% 50% at 0% 0%, rgba(255,255,255,.7), transparent 70%), linear-gradient(180deg, #F1F4F9, #E4EAF3); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(20,33,61,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.12) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(75% 85% at 72% 45%, #000, transparent 80%); mask-image: radial-gradient(75% 85% at 72% 45%, #000, transparent 80%); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.page-hero { padding: clamp(40px, 4.5vw, 80px) 0 clamp(32px, 3.6vw, 64px); background: linear-gradient(180deg, #F1F4F9, #E4EAF3); border-bottom: 1px solid var(--hair); }
.page-hero h1 { max-width: 18em; }
.page-hero .lead { margin-bottom: 0; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; gap: 64px; } }

/* поиск */
.search { display: flex; max-width: 680px; margin: 0 0 6px; border: 1px solid var(--hair-s); background: var(--surface); box-shadow: 0 24px 50px -30px rgba(20,33,61,.45); }
.search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(44,92,197,.2); }
.search input { flex: 1; min-width: 0; font: 400 clamp(16px, .5vw + 13px, 20px)/1.3 var(--sans); padding: 1.1em 1.25em; border: 0; background: transparent; color: var(--text); outline: none; }
.search input::placeholder { color: #7A88A3; }
.search button { border-radius: 0; padding: 0 clamp(20px, 2vw, 36px); flex: none; }
.hint { margin: 14px 0 0; font-size: .88em; color: var(--muted); }
@media (max-width: 520px) { .search { flex-direction: column; } .search button { padding: 1em; } }

/* статусы и сообщения */
.err, .ok, .note { margin: 14px 0; padding: 12px 16px; border-left: 3px solid; font-size: .94em; }
.err { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }
.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); }
.note { color: var(--muted); background: var(--unk-bg); border-color: var(--hair-s); }
.note.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font: 600 .68em/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .75em 1em; border: 1px solid; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); border-color: rgba(28,154,107,.5); background: var(--ok-bg); border-left-width: 1px; padding: .75em 1em; margin: 0; }
.chip { display: inline-block; padding: .25em .8em; font: 600 .75em/1.3 var(--sans); letter-spacing: .06em; background: var(--unk-bg); border: 1px solid var(--hair); color: var(--muted); }
.chip.lvl-high { color: var(--ok); border-color: rgba(28,154,107,.45); background: var(--ok-bg); }
.chip.lvl-medium { color: var(--mid); border-color: rgba(77,139,47,.45); background: rgba(77,139,47,.08); }
.chip.lvl-low { color: var(--warn); border-color: rgba(169,112,26,.45); background: var(--warn-bg); }
.chip.lvl-very_low { color: var(--bad); border-color: rgba(180,35,24,.4); background: var(--bad-bg); }

/* карточка-пример на главной */
.cert-wrap { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.cert { position: relative; font-size: clamp(14px, .4vw + 11.5px, 17px); background: var(--surface); border: 1px solid var(--hair-s); padding: 1.8em 1.8em 1.4em; box-shadow: 0 44px 80px -36px rgba(20,33,61,.55), inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--hair); }
.cert .hd { display: flex; align-items: center; gap: 1em; padding-bottom: 1.1em; border-bottom: 1px solid var(--hair); }
.cert .hd svg { width: 2.7em; height: 2.7em; color: var(--navy); flex: none; }
.cert .tt { font: 600 1.2em/1.2 var(--serif); color: var(--navy); white-space: nowrap; }
.cert .st { font-size: .85em; color: var(--muted); letter-spacing: .04em; }
.cert .hd .pill { margin-left: auto; letter-spacing: .1em; padding: .7em .85em; }
.cert dl { margin: 0; padding: .2em 0; }
.cert .r { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .85em 0; border-bottom: 1px solid var(--hair); }
.cert dt { color: var(--muted); }
.cert dd { margin: 0; display: flex; align-items: center; gap: .55em; font-weight: 500; text-align: right; }
.cert dd svg { width: 1em; height: 1em; stroke: var(--ok); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cert .ft { display: flex; align-items: baseline; gap: .8em; padding: 1.1em 5.4em 0 0; font-size: .88em; color: var(--muted); }
.cert .ft strong { font: 600 1.7em/1 var(--serif); color: var(--navy); }
.seal { position: absolute; right: -1.4em; bottom: -2.2em; width: 8em; height: 8em; filter: drop-shadow(0 16px 22px rgba(20,33,61,.4)); }
.cap { margin: 3.2em 0 0; max-width: 62%; text-align: left; font-size: .78em; color: var(--muted); letter-spacing: .06em; }
.hexbg { position: absolute; inset: -14% -18%; width: 136%; height: 128%; pointer-events: none; }
@media (max-width: 520px) { .cert { padding: 1.4em 1.1em 1.1em; } .seal { width: 5.6em; height: 5.6em; right: -.3em; bottom: -1.8em; } .cert .hd .pill { display: none; } .cert .ft { padding-right: 4.6em; } }

/* карточки */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0 0 clamp(24px, 3vw, 44px); }
.card { position: relative; background: var(--surface); border: 1px solid var(--hair); padding: clamp(20px, 2vw, 32px); }
.card h2 { margin: 0 0 .5em; font-size: 1.3em; }
.card.accent { background: linear-gradient(135deg, var(--navy), var(--navy2)); border-color: var(--navy); color: var(--on-navy-m); }
.card.accent h2, .card.accent h3, .card.accent .price { color: #fff; }
.card.accent a:not(.btn) { color: #fff; }
.card .btn { padding: .95em 1.3em; letter-spacing: .06em; }
.card.accent .btn { background: #fff; color: var(--navy); }
.card.accent .btn:hover { background: var(--acc-soft); box-shadow: none; }
.plain { padding-left: 1.2em; margin: .6em 0; } .plain li { margin: .35em 0; }
.plain li::marker { color: var(--acc); }
.price { font: 600 1.7em/1.2 var(--serif); color: var(--navy); margin: .2em 0 .5em; }
.band { margin-top: clamp(32px, 4vw, 56px); }
.recent { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: .75em 0; border-top: 1px solid var(--hair); }
.recent a { font-weight: 600; color: var(--navy); text-decoration: none; word-break: break-all; }
.recent a:hover { color: var(--acc); }

/* отчёт */
.meter { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); background: var(--surface); border: 1px solid var(--hair); border-left-width: 6px; padding: clamp(16px, 2vw, 26px) clamp(18px, 2.4vw, 32px); margin: 22px 0 14px; box-shadow: 0 24px 46px -34px rgba(20,33,61,.5); }
.meter .pct { font: 600 clamp(42px, 3vw + 24px, 68px)/1 var(--serif); min-width: 2.2em; letter-spacing: -.02em; }
.meter-text { display: flex; flex-direction: column; gap: 2px; } .meter-text strong { font: 600 1.15em/1.3 var(--serif); color: var(--navy); }
.lvl-high { border-left-color: var(--ok); } .lvl-high .pct { color: var(--ok); }
.lvl-medium { border-left-color: var(--mid); } .lvl-medium .pct { color: var(--mid); }
.lvl-low { border-left-color: var(--warn); } .lvl-low .pct { color: var(--warn); }
.lvl-very_low { border-left-color: var(--bad); } .lvl-very_low .pct { color: var(--bad); }
.lvl-insufficient { border-left-color: var(--unk); } .lvl-insufficient .pct { color: var(--unk); }
.chip.lvl-insufficient { border-left-width: 1px; }
.grp { margin-top: clamp(24px, 3vw, 40px); } .grp h2 { margin-top: 0; }
.grp ~ .cols { margin-top: clamp(32px, 4vw, 56px); }
.checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); background: var(--surface); }
.chk { display: flex; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--hair); }
.chk:first-child { border-top: 0; }
.ic { flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 15px/1 var(--sans); }
.st-pass .ic { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px rgba(28,154,107,.45); }
.st-fail .ic { color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px rgba(180,35,24,.4); }
.st-unknown .ic, .st-info .ic { color: var(--unk); background: var(--unk-bg); box-shadow: inset 0 0 0 1px var(--hair-s); }
.ttl { font-weight: 600; color: var(--navy); } .det { margin-top: 2px; } .evd { margin-top: 4px; font-size: .88em; color: var(--muted); word-break: break-word; }

/* страницы и формы */
.two { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 8px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } .meter { flex-direction: column; align-items: flex-start; gap: 6px; } }
.two > * { min-width: 0; }
.steps { padding-left: 1.3em; } .steps li { margin: .7em 0; } .steps li::marker { color: var(--acc); font-weight: 600; }
.form { background: var(--surface); border: 1px solid var(--hair); padding: clamp(20px, 2vw, 32px); display: grid; gap: 14px; box-shadow: 0 24px 46px -34px rgba(20,33,61,.45); }
.form h2 { margin: 0; font-size: 1.4em; }
.form label { display: grid; gap: 5px; font-size: .88em; color: var(--muted); }
.form .chk-consent { display: flex; gap: 10px; align-items: flex-start; }
.form .chk-consent input { margin-top: 4px; width: auto; }
input[type=text], textarea, select { width: 100%; padding: .75em .9em; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--hair-s); border-radius: 2px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(44,92,197,.2); }
.hp { position: absolute; left: -9999px; }
.code { max-width: 100%; background: var(--navy); color: var(--on-navy); padding: 14px 16px; overflow-x: auto; font-size: .85em; margin: .6em 0; }
.crit { border-top: 1px solid var(--hair); padding: .6em 0; } .crit h3 { margin-top: .4em; } .crit p { margin: .3em 0; }
.prose { max-width: 46em; overflow-wrap: anywhere; } .prose h2 { font-size: 1.35em; }
.tbl { width: 100%; border-collapse: collapse; font-size: .88em; background: var(--surface); }
.tbl th, .tbl td { border: 1px solid var(--hair); padding: 7px 10px; text-align: left; vertical-align: top; }
.tbl th { background: var(--bg2); color: var(--navy); }
.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .inline select { width: auto; padding: 6px; } .inline button { padding: 7px 12px; font-size: .74em; }
.plainpre { margin: 0; white-space: pre-wrap; font: inherit; }

/* подвал */
.foot { background: var(--navy); color: var(--on-navy-m); font-size: .85em; padding: clamp(26px, 3vw, 48px) 0 clamp(32px, 3.4vw, 56px); }
.foot .wrap { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot p { margin: 0 0 .7em; max-width: 52em; line-height: 1.55; }
.foot a { color: var(--on-navy-m); text-decoration: none; } .foot a:hover { color: #fff; }
.foot .fb { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 600 1.25em/1 var(--serif); margin-bottom: 1em; }
.foot .fb svg { width: 30px; height: 30px; color: #DCE8FF; }
.foot .fl { display: flex; flex-direction: column; gap: .5em; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }