:root{--bg:#0b0b0b;--gold:#d4af37;--card:#111;--muted:#bcbcbc}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:#fff;font-family:Inter,Arial,Segoe UI,sans-serif}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:18px}
.brand{font-weight:900;font-size:24px;background:linear-gradient(90deg,#f5e7a3,var(--gold));-webkit-background-clip:text;color:transparent}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #222}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #2a2a2a;border-radius:12px;background:linear-gradient(180deg,#1a1a1a,#0f0f0f);color:#fff;cursor:pointer}
.btn.gold{background:linear-gradient(180deg,#2a2618,#141006);border-color:#3a2f13;color:#ffe39c}
.hero{position:relative;border:1px solid #3a2f13;border-radius:22px;margin:18px 0;padding: clamp(18px,3vw,28px);}
.hero-banner{min-height: clamp(340px, 72vh, 760px); background-image:linear-gradient(90deg,rgba(11,11,11,.75) 0%,rgba(11,11,11,.45) 38%,rgba(11,11,11,.35) 55%,rgba(11,11,11,.70) 100%), var(--hero); background-size:cover;background-position:center;display:grid;align-items:center}
.hero h1{margin:0 0 8px;font-size: clamp(26px,4.2vw,40px)}
.hero p{color:#eee1bf;max-width:52ch}
.hero-content{max-width:560px;z-index:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #222;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.card img{width:100%;height:clamp(140px, 34vw, 200px);object-fit:cover;display:block}
.card-body{padding:12px}
.price{font-weight:800;color:#ffe39c}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #222;text-align:left}
.input{width:100%;padding:11px;border:1px solid #222;border-radius:10px;background:#0e0e0e;color:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.footer{margin-top:28px;padding-top:18px;border-top:1px solid #222;color:var(--muted)}
.badge{display:inline-block;border:1px solid rgba(212,175,55,.5);color:#ffe39c;padding:4px 10px;border-radius:999px;background:rgba(212,175,55,.12);font-weight:700}
@media(max-width:900px){.row{grid-template-columns:1fr}.hero-content{max-width:none}}