:root{
  --bg:#ffffff; --bg-soft:#f4f6f8; --bg-sunk:#eaeef2;
  --fg:#16202b; --fg-soft:#54636f; --line:#d8dfe6;
  --accent:#0f5d8c; --accent-fg:#ffffff; --amber:#b26a00;
  --radius:10px; --wrap:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e151c; --bg-soft:#151f29; --bg-sunk:#1c2833;
    --fg:#e6edf3; --fg-soft:#9bacba; --line:#28353f;
    --accent:#4aa3d8; --accent-fg:#08131c; --amber:#e0a33a;
  }
}
:root[data-theme="dark"]{
  --bg:#0e151c; --bg-soft:#151f29; --bg-sunk:#1c2833;
  --fg:#e6edf3; --fg-soft:#9bacba; --line:#28353f;
  --accent:#4aa3d8; --accent-fg:#08131c; --amber:#e0a33a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
a{color:var(--accent)}
h1{font-size:clamp(1.7rem,3.6vw,2.3rem); letter-spacing:-.02em; margin:0 0 12px}
mark.todo{background:var(--amber); color:#fff; padding:0 .3em; border-radius:3px; font-size:.85em}

header.site{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5}
header.site .wrap{display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem;
       color:var(--fg); text-decoration:none; letter-spacing:-.01em}
.brand svg{flex:0 0 auto}
nav.site{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.site a{color:var(--fg-soft); text-decoration:none; padding:7px 11px; border-radius:7px; font-size:.93rem}
nav.site a:hover{background:var(--bg-soft); color:var(--fg)}
nav.site a.cta{background:var(--accent); color:var(--accent-fg); font-weight:600}
nav.site a.cta:hover{opacity:.9; background:var(--accent); color:var(--accent-fg)}

.hero{padding:64px 0 56px; border-bottom:1px solid var(--line);
      background:linear-gradient(180deg,var(--bg-soft),var(--bg))}
.hero h1{font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.12; margin:0 0 14px; letter-spacing:-.025em}
.hero p.lead{font-size:1.14rem; color:var(--fg-soft); max-width:60ch; margin:0 0 26px}
.btnrow{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:11px 20px; border-radius:8px; text-decoration:none;
     font-weight:600; font-size:.97rem}
.btn.primary{background:var(--accent); color:var(--accent-fg)}
.btn.ghost{border:1px solid var(--line); color:var(--fg)}

main{padding:52px 0 68px}
section{margin:0 0 52px}
h2{font-size:1.5rem; margin:0 0 8px; letter-spacing:-.015em}
h3{font-size:1.06rem; margin:26px 0 6px}
p{margin:0 0 14px}
.sub{color:var(--fg-soft); margin:0 0 22px; max-width:66ch}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card h3{margin:0 0 6px; font-size:1.02rem}
.card p{margin:0; color:var(--fg-soft); font-size:.95rem}
ol.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:14px}
ol.steps li{counter-increment:s; padding-left:44px; position:relative; color:var(--fg-soft)}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:-1px; width:30px; height:30px;
  border-radius:50%; background:var(--accent); color:var(--accent-fg);
  display:grid; place-items:center; font-weight:700; font-size:.88rem}
ol.steps li b{color:var(--fg)}

.legal{max-width:74ch}
.legal h2{margin-top:34px; font-size:1.18rem}
.legal ul{padding-left:22px; margin:0 0 14px}
.legal li{margin:0 0 7px}
.meta{color:var(--fg-soft); font-size:.9rem; border-left:3px solid var(--line);
      padding-left:14px; margin:0 0 28px}

.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:.95rem}
th,td{text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--bg-sunk); font-weight:650}

.paybox{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
        padding:30px; display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start}
.paybox img{width:250px; max-width:100%; border-radius:10px; background:#fff; padding:12px; display:block}
.paybox .info{flex:1 1 260px; min-width:240px}
.vpa{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1.06rem;
     background:var(--bg-sunk); border:1px solid var(--line); border-radius:8px;
     padding:11px 14px; display:block; word-break:break-all; margin:0 0 14px}
.note{font-size:.9rem; color:var(--fg-soft)}

dl.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 22px; margin:0}
dl.kv dt{color:var(--fg-soft); font-size:.93rem}
dl.kv dd{margin:0}
@media (max-width:520px){ dl.kv{grid-template-columns:1fr; gap:2px 0} dl.kv dd{margin:0 0 12px} }

footer.site{border-top:1px solid var(--line); background:var(--bg-soft); padding:34px 0; font-size:.92rem}
footer.site .cols{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
footer.site h4{margin:0 0 9px; font-size:.83rem; text-transform:uppercase;
               letter-spacing:.07em; color:var(--fg-soft)}
footer.site a{color:var(--fg); text-decoration:none; display:block; padding:2px 0}
footer.site a:hover{text-decoration:underline}
footer.site address{font-style:normal; color:var(--fg-soft); line-height:1.7}
.copy{border-top:1px solid var(--line); margin-top:28px; padding-top:18px; color:var(--fg-soft)}