@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
:root{--bg:#07080c;--panel:#10131a;--panel2:#151923;--line:#262b36;--gold:#f5c451;--gold2:#ffdf82;--text:#f7f7f8;--muted:#9da5b4;--danger:#ef6262}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0%,#20190b 0,transparent 28%),radial-gradient(circle at 90% 10%,#171126 0,transparent 30%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0%,rgba(255,210,90,.025) 50%,transparent 100%);z-index:-1}
header{position:sticky;top:0;z-index:10;padding:17px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(7,8,12,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(245,196,81,.18);box-shadow:0 8px 35px rgba(0,0,0,.25)}
header b{font-size:21px;letter-spacing:1.8px;background:linear-gradient(90deg,var(--gold),#fff0b0,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}
a{color:var(--gold2);text-decoration:none;margin:6px;transition:.2s}
a:hover{color:#fff;text-shadow:0 0 15px rgba(245,196,81,.35)}
main{max-width:1150px;margin:42px auto;padding:0 20px}
main>h1{font-size:38px;margin-bottom:10px;letter-spacing:-1px}
main>h1:first-letter{}
main>h1:after{content:"";display:block;width:58px;height:3px;margin-top:13px;border-radius:9px;background:linear-gradient(90deg,var(--gold),transparent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:28px}
article,.box{background:linear-gradient(145deg,rgba(21,25,35,.96),rgba(10,12,17,.96));border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 16px 45px rgba(0,0,0,.24);transition:transform .25s,border-color .25s,box-shadow .25s}
article:hover{transform:translateY(-5px);border-color:rgba(245,196,81,.48);box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 30px rgba(245,196,81,.06)}
article img,.hero{width:100%;height:220px;object-fit:cover;border-radius:13px;border:1px solid #303541}
article h2{margin:17px 0 8px;font-size:20px}
article p,.box p{color:var(--muted);line-height:1.65}
article strong{display:inline-block;margin:10px 0 14px;font-size:20px;color:var(--gold2)}
.btn,button{display:inline-block;background:linear-gradient(135deg,#dba92d,var(--gold2));color:#16130b;border:0;padding:12px 19px;border-radius:10px;cursor:pointer;font-weight:800;box-shadow:0 8px 24px rgba(245,196,81,.14);transition:.2s}
.btn:hover,button:hover{transform:translateY(-1px);color:#0b0b0b;box-shadow:0 10px 30px rgba(245,196,81,.24)}
input{display:block;width:100%;padding:14px 15px;margin:12px 0;background:#0b0d12;border:1px solid #303641;color:#fff;border-radius:10px;outline:none}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,81,.08)}
.box{max-width:520px;margin:70px auto}
.box h1{font-size:31px;background:linear-gradient(90deg,var(--gold),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.err{background:rgba(126,32,32,.25);border:1px solid rgba(239,98,98,.4);color:#ffb0b0;padding:12px;border-radius:10px;margin:12px 0}
.row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;background:rgba(16,19,26,.75);border:1px solid var(--line);border-radius:12px;margin:10px 0}
.row+ .row{margin-top:10px}
h2{color:#f4f5f7}
p{line-height:1.55}
@media(max-width:650px){header{padding:14px 4%;align-items:flex-start}header b{font-size:17px}nav{font-size:13px}main{margin:28px auto}main>h1{font-size:30px}.grid{grid-template-columns:1fr}.row{align-items:flex-start;flex-direction:column;gap:8px}}