/* Общий стиль контентных страниц Clarox (/bank-request, /valuation, /scan).
   Токены совпадают с лендингом: правка палитры — в обоих местах. */
:root{
  --bg:#fbfbfd; --bg2:#f5f6fa; --ink:#16183c; --muted:#6b7089; --dim:#9aa0b8;
  --indigo:#2e2ea8; --indigo2:#4b4bd8; --navy:#12143a; --gold:#c9922e; --ok:#1e7e45;
  --line:rgba(22,24,60,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace}

header{position:sticky;top:0;z-index:50;background:rgba(251,251,253,.85);backdrop-filter:blur(14px);
       border-bottom:1px solid rgba(22,24,60,.06)}
.nav{max-width:900px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px;height:56px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;letter-spacing:.14em;color:var(--indigo)}
.logo:hover{text-decoration:none}
.nav nav{margin-left:auto;display:flex;gap:22px;font-size:13.5px;color:var(--muted)}
.nav nav a{color:var(--muted)}
.nav nav a:hover{color:var(--ink);text-decoration:none}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;border-radius:999px;
     font-weight:600;font-size:16px;background:var(--indigo);color:#fff;border:none;cursor:pointer;
     transition:background .2s,transform .2s;font-family:inherit}
.btn:hover{background:var(--indigo2);transform:scale(1.02);text-decoration:none;color:#fff}
.btn.quiet{background:transparent;color:var(--indigo);border:1px solid var(--line)}
.btn.quiet:hover{background:rgba(46,46,168,.06);transform:none;color:var(--indigo)}

main{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);margin-bottom:14px}
h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:16px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);margin-bottom:12px}
h2{font-size:clamp(22px,2.8vw,29px);font-weight:750;letter-spacing:-.02em;margin:44px 0 14px;line-height:1.2}
h3{font-size:19px;font-weight:700;margin:28px 0 8px}
p{margin-bottom:14px}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:8px}
strong{font-weight:650}

.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;
      padding:18px 22px;margin:22px 0;font-size:15.5px}
.note b{color:var(--ink)}
.callout{background:var(--bg2);border-radius:18px;padding:24px 26px;margin:24px 0}
.callout h3{margin-top:0}

table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;font-weight:650;font-size:14px}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:nth-child(even) td{background:#fff}

.steps{counter-reset:s;list-style:none;margin-left:0}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
       background:var(--indigo);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.steps li b{display:block;margin-bottom:3px}

.cta-box{background:linear-gradient(160deg,#eef0ff,#f7f2ff);border-radius:22px;padding:34px 30px;margin:38px 0 8px;text-align:center}
.cta-box p{color:var(--muted);margin-bottom:20px}
.price{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}

form.lead-form{display:grid;gap:14px;margin-top:8px;text-align:left}
form.lead-form label{font-size:14px;font-weight:600}
form.lead-form input,form.lead-form textarea,form.lead-form select{
      width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
      background:#fff;font-size:15.5px;font-family:inherit;color:var(--ink)}
form.lead-form textarea{min-height:110px;resize:vertical}
form.lead-form input:focus,form.lead-form textarea:focus,form.lead-form select:focus{
      outline:none;border-color:var(--indigo2);box-shadow:0 0 0 3px rgba(75,75,216,.15)}

/* демо-проверка адреса (страница /scan) */
.demo{background:var(--navy);border-radius:20px;padding:26px 24px 30px;margin:26px 0;color:#fff}
.demo h3{color:#fff;margin-top:0}
.demo .hint{color:#a9b0d6;font-size:14.5px;margin-bottom:16px}
.demo form{display:flex;gap:10px;flex-wrap:wrap}
.demo select,.demo input{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
      background:rgba(255,255,255,.07);color:#fff;font-size:15px;outline:none;font-family:inherit}
.demo select option{color:#16183c}
.demo input{flex:1;min-width:220px}
.demo input::placeholder{color:#7d84b8}
.demo .btn{background:#fff;color:var(--navy);border-radius:12px}
.demo .btn:hover{background:#e8eaff}
#demo-result{display:none;margin-top:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
      border-radius:14px;padding:20px}
#demo-result.err{border-color:#c86a6a}
.score-row{display:flex;align-items:center;gap:15px;margin-bottom:8px}
.score-num{font-size:40px;font-weight:800;line-height:1}
.score-badge{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.lvl-low{background:rgba(61,220,132,.15);color:#7cf0b2;border:1px solid rgba(61,220,132,.4)}
.lvl-medium{background:rgba(242,201,76,.13);color:#ffe08a;border:1px solid rgba(242,201,76,.4)}
.lvl-high{background:rgba(255,140,70,.13);color:#ffb98a;border:1px solid rgba(255,140,70,.4)}
.lvl-critical{background:rgba(255,80,80,.13);color:#ff9d9d;border:1px solid rgba(255,80,80,.45)}
#demo-result .labels{font-size:14.5px;color:#a9b0d6;line-height:1.7}
#demo-result .fine{font-size:12.5px;color:#7d84b8;margin-top:10px}

footer{background:var(--bg2);border-top:1px solid rgba(22,24,60,.06);padding:34px 24px;text-align:center;
       font-size:13px;color:var(--dim);line-height:1.8}
footer .links{margin-bottom:10px;font-size:13.5px;color:var(--muted)}
footer .links a{color:var(--muted)}
footer .links a:hover{color:var(--ink)}

@media (max-width:760px){
  .nav nav{display:none}
  main{padding:38px 20px 60px}
}