/* vinzvit.com.ua — тёмная тема, один акцент, моно для чисел, контраст масштабов */
:root {
  --n950:#0a0c10; --n900:#0f1218; --n850:#141922; --n800:#1a2030; --n700:#273044; --n600:#3a4459;
  --n400:#7c879b; --n300:#a7b0c0; --n200:#d3d8e2; --n100:#eef1f5; --n50:#f8f9fb;
  --accent:#f5a524; --accent-ink:#1a1200; --signal:#ff5a3c; --ok:#4cc38a; --warn:#f5a524; --bad:#ff5a3c;
  --text:var(--n100); --muted:var(--n400); --bg:var(--n950);
  --hair:rgb(255 255 255 / .08); --hair-strong:rgb(255 255 255 / .16);
  --ease:cubic-bezier(.16,1,.3,1); --r:14px; --r-s:8px;
  --shadow-lift:0 24px 60px -20px rgb(0 0 0 / .55);
  --font:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
.wrap { width:min(1180px, 100% - 40px); margin-inline:auto; }
.wrap.narrow { max-width:720px; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 14px; }
.eyebrow.light { color:var(--accent); }
h1 { font-size:clamp(2.6rem, 6vw, 5rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 20px; font-weight:800; }
h2 { font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.08; letter-spacing:-.025em; margin:0 0 18px; font-weight:800; }
h3 { font-size:1.15rem; margin:0 0 8px; letter-spacing:-.01em; }
.lead { font-size:1.15rem; color:var(--n300); max-width:56ch; margin:0 0 28px; }
.lead.light { color:var(--n200); }

/* фото — одна гамма */
.ph { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(150deg,var(--n700),var(--n800) 45%,var(--n900)); }
.ph img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) contrast(1.06) brightness(.9); transition:transform 1.1s var(--ease); }
.ph::after { content:''; position:absolute; inset:0; z-index:1; background:var(--accent); opacity:.10; mix-blend-mode:soft-light; pointer-events:none; }

/* шапка */
.top { position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); background:rgb(10 12 16 / .72); border-bottom:1px solid var(--hair); }
.top .wrap { display:flex; align-items:center; gap:28px; height:64px; }
.brand { font-weight:800; font-size:1.25rem; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:baseline; gap:2px; }
.brand-mark { color:var(--accent); }
.brand-tag { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:12px; padding-left:12px; border-left:1px solid var(--hair-strong); }
.nav { display:flex; gap:22px; margin-left:auto; }
.nav a { text-decoration:none; color:var(--n300); font-weight:600; font-size:.95rem; }
.nav a:hover { color:#fff; }
.langs { display:flex; gap:2px; }
.langs a { text-decoration:none; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); padding:6px 9px; border-radius:var(--r-s); }
.langs a.on { background:rgb(255 255 255 / .08); color:#fff; }
@media (max-width:760px) { .nav, .brand-tag { display:none; } }

/* кнопки, форма */
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:var(--r-s); font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; font:inherit; font-weight:700; transition:transform .5s var(--ease), background .3s; }
.btn .arrow { transition:transform .5s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }
.btn-accent { background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover { background:#ffb63a; }
.btn-ghost { border-color:var(--hair-strong); color:var(--text); background:transparent; }
.btn-ghost:hover { background:rgb(255 255 255 / .06); }
.btn-ghost.light { color:#fff; }
.btn[disabled] { opacity:.6; pointer-events:none; }
.vin-form { max-width:680px; }
.vin-row { display:flex; gap:10px; }
.vin-input { flex:1; min-width:0; font:600 1.25rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:16px 18px; border-radius:var(--r-s); border:1px solid var(--hair-strong); background:rgb(10 12 16 / .6); color:#fff; backdrop-filter:blur(8px); }
.vin-input::placeholder { color:var(--n400); text-transform:none; letter-spacing:0; font-family:var(--font); font-weight:500; }
.vin-input:focus { outline:2px solid var(--accent); border-color:transparent; }
.vin-hint { font-size:.85rem; color:var(--n300); margin:12px 0 0; }
.form-err { color:var(--signal); font-weight:600; margin:12px 0 0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:560px) { .vin-row { flex-direction:column; } .btn-accent { justify-content:center; } }

/* hero */
.hero { position:relative; min-height:min(88vh, 860px); display:flex; flex-direction:column; justify-content:center; padding:110px 0 40px; overflow:hidden; }
.hero-ph { position:absolute; inset:0; z-index:0; }
.hero-ph::before { content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgb(10 12 16 / .96) 0%, rgb(10 12 16 / .78) 45%, rgb(10 12 16 / .35) 100%), linear-gradient(0deg, var(--n950) 0%, transparent 40%); }
.hero-in { position:relative; z-index:2; max-width:760px; margin-left:max(20px, (100% - 1180px) / 2); }
.hero-sub { font-size:1.2rem; color:var(--n200); max-width:56ch; margin:0 0 34px; }
.stats { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3, auto); gap:48px; margin-top:96px; padding-top:28px; border-top:1px solid var(--hair); justify-content:start; }
.stats b { display:block; font-size:2.4rem; font-weight:600; line-height:1; }
.stats span { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width:640px) { .stats { grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; } .hero { min-height:auto; padding-top:80px; } }

/* секции: разный ритм */
.section { padding:clamp(80px, 9vw, 132px) 0; position:relative; }
.section:nth-of-type(even) { padding:clamp(96px, 11vw, 168px) 0; }
.how { background:var(--n900); border-top:1px solid var(--hair); }
.how::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(to right, rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(100% 70% at 50% 0%, #000 10%, transparent 75%); }
.how .wrap { position:relative; }
.how-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:48px; }
.how-card { grid-column:span 2; padding:28px; border:1px solid var(--hair); border-radius:var(--r); background:rgb(255 255 255 / .025); transition:transform .6s var(--ease), border-color .3s; }
.how-card:nth-child(-n+2) { grid-column:span 3; padding:36px; }
.how-card:nth-child(-n+2) h3 { font-size:1.5rem; }
.how-card:hover { transform:translateY(-4px); border-color:var(--hair-strong); }
.how-card p { color:var(--n300); margin:0; font-size:.98rem; }
.how-n { font-family:var(--mono); color:var(--accent); font-size:12px; letter-spacing:.14em; margin-bottom:18px; }
@media (max-width:900px) { .how-grid { grid-template-columns:1fr 1fr; } .how-card, .how-card:nth-child(-n+2) { grid-column:span 1; padding:24px; } }
@media (max-width:560px) { .how-grid { grid-template-columns:1fr; } }

/* пример отчёта */
.sample-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.sample-card { border:1px solid var(--hair); border-radius:var(--r); background:var(--n900); box-shadow:var(--shadow-lift); overflow:hidden; }
.sample-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 24px 16px; }
.sample-veh { font-size:1.35rem; font-weight:800; letter-spacing:-.02em; }
.risk-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:84px; padding:8px 12px; border-radius:var(--r-s); color:#fff; }
.risk-badge span { font-size:1.9rem; font-weight:600; line-height:1; }
.risk-badge small { font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin-top:4px; }
.risk-badge.big { min-width:120px; padding:14px 18px; } .risk-badge.big span { font-size:3rem; }
.risk-low { background:#1f6b46; } .risk-medium { background:#8a5a00; } .risk-high { background:#8c2a1c; }
.flags { list-style:none; margin:0; padding:0 24px; }
.fl { padding:10px 0 10px 14px; border-left:3px solid var(--n600); font-size:.92rem; color:var(--n200); }
.fl + .fl { border-top:1px solid var(--hair); }
.fl-critical, .fl-high { border-left-color:var(--signal); } .fl-medium { border-left-color:var(--accent); } .fl-info { border-left-color:var(--n600); }
.sample-photos { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:20px 24px 24px; }
.sample-photos .ph { aspect-ratio:4/3; border-radius:6px; }
@media (max-width:860px) { .sample-grid { grid-template-columns:1fr; gap:36px; } }

/* партнёры — тёмная фото-полоса */
.partners { overflow:hidden; color:#fff; }
.partners-ph { position:absolute; inset:0; z-index:0; }
.partners-ph::before { content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, var(--n950) 0%, rgb(10 12 16 / .82) 30%, rgb(10 12 16 / .82) 70%, var(--n950) 100%); }
.partners .wrap { position:relative; z-index:2; }
.partner-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; }
.partner { display:block; padding:30px; border-radius:var(--r); text-decoration:none; background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .14); backdrop-filter:blur(10px); transition:transform .6s var(--ease), background .3s; }
.partner:hover { transform:translateY(-4px); background:rgb(255 255 255 / .1); }
.partner b { font-size:1.4rem; letter-spacing:-.02em; display:block; margin-bottom:8px; }
.partner p { color:var(--n200); margin:0 0 16px; }
.partner .link { color:var(--accent); font-weight:700; font-size:.95rem; }
@media (max-width:640px) { .partner-grid { grid-template-columns:1fr; } }

/* FAQ */
.faq-wrap { display:grid; grid-template-columns:1fr 1.6fr; gap:60px; }
.faq-item { border-top:1px solid var(--hair); padding:6px 0; }
.faq-item:last-child { border-bottom:1px solid var(--hair); }
.faq-item summary { cursor:pointer; font-weight:700; font-size:1.1rem; padding:16px 36px 16px 0; list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:0; top:14px; font-family:var(--mono); color:var(--accent); font-size:1.3rem; transition:transform .5s var(--ease); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { color:var(--n300); margin:0 0 18px; max-width:60ch; }
@media (max-width:860px) { .faq-wrap { grid-template-columns:1fr; gap:24px; } }

/* подвал */
.foot { border-top:1px solid var(--hair); padding:56px 0 32px; }
.foot-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.foot-note, .foot-src { color:var(--muted); font-size:.88rem; max-width:52ch; }
.foot-copy { color:var(--n600); font-size:.8rem; margin-top:36px; font-family:var(--mono); }
@media (max-width:760px) { .foot-grid { grid-template-columns:1fr; } }

/* прогресс */
.card { border:1px solid var(--hair); border-radius:var(--r); background:var(--n900); padding:26px; }
.bar { height:3px; background:var(--n700); border-radius:3px; overflow:hidden; margin-bottom:22px; }
.bar i { display:block; height:100%; width:8%; background:var(--accent); transition:width .8s var(--ease); }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--hair); }
.steps li:first-child { border-top:0; }
.pill { font:600 12px/1 var(--mono); padding:6px 10px; border-radius:20px; background:rgb(255 255 255 / .06); color:var(--muted); white-space:nowrap; }
.pill.running { color:var(--accent); background:rgb(245 165 36 / .12); }
.pill.found { color:var(--ok); background:rgb(76 195 138 / .12); }
.pill.error { color:var(--bad); background:rgb(255 90 60 / .12); }
[data-open] { margin-top:22px; }

/* страница отчёта */
.report-head { position:relative; padding:56px 0 36px; background:linear-gradient(180deg, var(--n900), var(--n950)); border-bottom:1px solid var(--hair); }
.report-top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.report-top h1 { font-size:clamp(2rem, 4.5vw, 3.6rem); margin-bottom:10px; }
.vin-big { font-size:1.1rem; letter-spacing:.12em; color:var(--n300); }
.report-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.report-wrap { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:40px; align-items:start; }
.report-side { position:sticky; top:84px; display:grid; gap:16px; min-width:0; }
.side-card .vin-form { max-width:none; }
.side-card .vin-row { flex-direction:column; }
.side-card .vin-input { width:100%; font-size:1.05rem; }
.side-card .vin-row .btn { justify-content:center; margin-top:0; }
.side-card .btn { width:100%; justify-content:center; margin-top:10px; }
.side-card h3 { font-size:1.25rem; }
.side-card p { color:var(--n300); font-size:.95rem; }
.notice { padding:16px 20px; border:1px solid var(--hair-strong); border-left:3px solid var(--accent); border-radius:var(--r-s); color:var(--n200); grid-column:1 / -1; }
@media (max-width:960px) { .report-wrap { grid-template-columns:1fr; } .report-side { position:static; } }
.section.report-body { padding:36px 0 96px; }
/* содержимое отчёта (из report.build_body) в тёмной теме */
.report h2 { font-size:1.5rem; margin:44px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--hair-strong); }
.report h3 { font-size:1.05rem; margin:18px 0 8px; }
.report table { width:100%; border-collapse:collapse; font-size:.95rem; }
.report td, .report th { text-align:left; vertical-align:top; padding:8px 8px; border-bottom:1px solid var(--hair); }
.report th { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.report .kv td:first-child { color:var(--muted); width:38%; }
.report .cols { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.report .flag { border-left:3px solid; padding:10px 14px; margin:6px 0; background:rgb(255 255 255 / .03); border-radius:0 6px 6px 0; }
.report .lot { border:1px solid var(--hair); border-radius:var(--r); padding:18px 20px; margin:14px 0; background:rgb(255 255 255 / .02); }
.report .photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:6px; margin-top:14px; }
.report .photos img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; filter:saturate(.85); }
.report .ai { background:rgb(245 165 36 / .07); border:1px solid rgb(245 165 36 / .25); border-radius:var(--r); padding:18px 22px; white-space:pre-wrap; font-size:1.02rem; }
.report .badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; background:rgb(255 255 255 / .08); vertical-align:middle; }
.report .ok { color:var(--ok); } .report .bad { color:var(--bad); } .report .warn { color:var(--warn); }
.report .small { font-size:.85rem; } .report .muted { color:var(--muted); } .report .orig { color:var(--n600); font-size:.78rem; }
.report a { color:var(--accent); text-decoration:none; }
.report .vin { font-family:var(--mono); }
@media (max-width:640px) { .report .cols { grid-template-columns:1fr; } .report .photos { grid-template-columns:repeat(2, 1fr); } }

/* появление */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1; transform:none; transition:none; } .btn, .how-card, .partner, .ph img { transition:none; } }