/* Публичный сайт OriginBridge. Один файл, без сборки, тема по системной. */
:root { --bg:#fff; --fg:#17202a; --muted:#66707a; --line:#e4e8ec; --alt:#f5f7f9; --accent:#1a5fb4; --accent-fg:#fff; --ok:#2f855a; --err:#c53030; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1419; --fg:#e6eaf0; --muted:#8b96a5; --line:#2a3441; --alt:#161c24; --accent:#3b82f6; } }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font: 16px/1.55 -apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif; }
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.top { display:flex; align-items:center; gap:24px; padding:14px 6vw; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; }
.brand { font-weight:800; font-size:20px; color:var(--fg); letter-spacing:-.01em; }
.brand span { color: var(--accent); }
.top nav { display:flex; gap:18px; flex:1; }
.top nav a { color: var(--muted); font-weight:500; }
.top nav a:hover { color: var(--fg); }
.right { display:flex; align-items:center; gap:14px; }
.langs a { color:var(--muted); margin-left:8px; font-size:14px; }
.langs a.on { color:var(--fg); font-weight:600; }
.btn { display:inline-block; padding:9px 16px; border-radius:8px; background:var(--accent); color:var(--accent-fg); font-weight:600; border:1px solid var(--accent); cursor:pointer; font-size:15px; }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.hero { padding: 9vh 6vw 6vh; max-width: 900px; }
.hero h1 { font-size: clamp(28px, 4.2vw, 46px); line-height:1.15; margin:0 0 18px; letter-spacing:-.02em; }
.hero p { font-size: 18px; color: var(--muted); max-width: 760px; }
.hero .cta { margin-top: 26px; display:flex; gap:10px; flex-wrap:wrap; }
.block { padding: 6vh 6vw; }
.block.alt { background: var(--alt); }
.block h2 { font-size: 26px; margin: 0 0 18px; letter-spacing:-.01em; }
.lead { max-width: 820px; font-size: 17px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card { border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--bg); }
.card h3 { margin:0 0 8px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.steps { list-style:none; counter-reset: s; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.steps li { counter-increment: s; border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; }
.steps li b { display:block; font-size:16px; margin-bottom:4px; }
.steps li b::before { content: counter(s) ". "; color: var(--accent); }
.steps li span { color: var(--muted); font-size:15px; }
.points { columns: 2; max-width: 820px; padding-left: 20px; }
.points li { margin: 4px 0; break-inside: avoid; }
.form { max-width: 640px; display:flex; flex-direction:column; gap:10px; }
.form .row { display:flex; gap:10px; }
.form input, .form textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font: inherit; }
.form .hp { position:absolute; left:-9999px; }
.ok { color: var(--ok); font-weight: 600; }
.err { color: var(--err); }
footer { padding: 24px 6vw 40px; border-top:1px solid var(--line); font-size:14px; }
@media (max-width: 720px) { .top nav { display:none; } .points { columns:1; } .form .row { flex-direction:column; } }