/* HORSE GOLD TRADING — website (stage 8.4). Same palette as the app. */
:root { --bg:#0f1115; --card:#181b22; --line:#2a2f3a; --text:#eef0f4; --muted:#9aa3b2; --gold:#d4a73a; --ok:#3fb27f; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
a { color:var(--gold); }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }
.watermark { position:fixed; inset:0; margin:auto; width:min(42vw,300px); height:min(84vw,600px,80vh); background:url(logo.png) center/contain no-repeat; opacity:.06; pointer-events:none; z-index:0; }
main, header, footer { position:relative; z-index:1; }
header.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,var(--gold),transparent) 1; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--gold); font-weight:800; letter-spacing:1px; }
.brand img { width:22px; height:44px; }
.langs button { background:none; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer; }
.langs button.on { color:var(--gold); border-color:var(--gold); }
.hero { text-align:center; padding:56px 0 32px; }
.hero img { width:56px; height:112px; filter:drop-shadow(0 4px 14px rgba(212,167,58,.35)); }
.hero h1 { font-size:clamp(28px,6vw,44px); margin:14px 0 6px; color:var(--gold); letter-spacing:1px; }
.hero p { color:var(--muted); font-size:18px; max-width:620px; margin:0 auto 22px; }
.motto { color:var(--gold); font-size:12px; letter-spacing:3px; text-transform:uppercase; opacity:.85; }
.btn { display:inline-block; background:var(--gold); color:#1a1405; font-weight:800; text-decoration:none; border-radius:12px; padding:14px 28px; border:0; font:inherit; font-size:17px; cursor:pointer; }
.btn.ghost { background:none; color:var(--gold); border:1px solid var(--gold); }
section { padding:26px 0; }
h2 { font-size:22px; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.card { background:rgba(24,27,34,.85); border:1px solid var(--line); border-radius:14px; padding:16px; }
.card b { display:block; color:var(--gold); margin-bottom:4px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
ol.steps { padding-inline-start:20px; margin:0; }
ol.steps li { margin:8px 0; }
.price { text-align:center; }
.price .num { font-size:46px; font-weight:800; color:var(--gold); }
.price .per { color:var(--muted); }
.note { color:var(--muted); font-size:13px; }
footer { border-top:1px solid var(--line); margin-top:30px; padding:22px 0 40px; color:var(--muted); font-size:13px; }
footer nav { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.doc { max-width:760px; }
.doc h1 { color:var(--gold); font-size:28px; }
.doc h2 { font-size:18px; margin-top:24px; }
.doc p, .doc li { color:#d6dae2; }
.fill { background:#3a2a12; color:#f3cf86; padding:0 4px; border-radius:4px; }
.center { text-align:center; }
@media (max-width:520px) { .hero { padding:36px 0 20px; } .btn { width:100%; text-align:center; } }