* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; background:#050505; color:#f5f5f5; line-height:1.45; }
a { color:#d4af37; text-decoration:none; }
.container{max-width:1100px;margin:0 auto;padding:0 16px;}
header{position:sticky;top:0;background:#0a0a0af0;border-bottom:1px solid #222;backdrop-filter:blur(6px);}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap}
.brand{font-weight:700;color:#fff}
.badge{border:1px solid #7e6a22;padding:2px 8px;border-radius:6px;color:#d4af37;margin-right:8px}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:8px 10px;border-radius:20px;color:#aaa}
nav a:hover{background:#121212;color:#d4af37}
.btn{display:inline-block;padding:10px 18px;border-radius:999px;border:1px solid #7e6a22;color:#d4af37}
.btn.gold{background:#d4af37;color:#111;border-color:#d4af37}
.hero{padding:56px 0;border-bottom:1px solid #1c1c1c}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px;max-width:850px}
.muted{color:#9e9e9e}
.section{padding:48px 0;border-bottom:1px solid #1c1c1c}
.card{background:#0f0f0f;border:1px solid #222;border-radius:16px;padding:16px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.chip{display:inline-block;border:1px solid #6d5b1e;color:#d4af37;border-radius:999px;padding:4px 10px;font-size:12px}
.price{font-weight:700;color:#d4af37}
.cover{height:120px;border-radius:12px;background:linear-gradient(145deg,#2c2c2c,#111)}
.vehicle-thumb{width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid #2a2a2a;display:block}
.split{display:grid;gap:16px;grid-template-columns:1.2fr .8fr}
.social-box{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center}
footer{padding:36px 0}
.form{max-width:460px;margin:34px auto;background:#101010;border:1px solid #2a2a2a;border-radius:18px;padding:22px}
label{display:block;margin-bottom:6px;color:#ddd}
input{width:100%;padding:10px 12px;border:1px solid #333;border-radius:10px;background:#0b0b0b;color:#fff}
.row{display:flex;gap:8px;flex-wrap:wrap}
.notice{padding:10px 12px;border-radius:10px;font-size:13px}
.ok{background:#0e2a1b;border:1px solid #1d6f46}
.err{background:#3a1010;border:1px solid #922}
.no-copy-demo{user-select:none;-webkit-user-select:none}
.watermark{position:fixed;inset:0;pointer-events:none;background-image:repeating-linear-gradient(-30deg,transparent 0,transparent 220px,rgba(212,175,55,.06) 220px,rgba(212,175,55,.06) 260px);}
.owner{padding:10px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#d4af37;background:#000000b3;border-top:1px solid #534213}

.demo-layout{display:grid;gap:24px;grid-template-columns:1fr 360px;align-items:start}
.phone{border:1px solid #333;background:#000;border-radius:36px;padding:10px;box-shadow:0 0 20px rgba(212,175,55,.2);position:relative;z-index:2}
.phone-inner{background:#0f0f0f;border:1px solid #6d5b1e;border-radius:28px;overflow:hidden}
.phone-top{height:6px;width:70px;background:#353535;border-radius:99px;margin:10px auto}
.phone-head{padding:14px}
.phone-title{margin:0;font-size:18px}
.phone-body{padding:14px;min-height:360px}
.phone-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;border-top:1px solid #252525}
.tab-btn{border:0;background:transparent;color:#a9a9a9;padding:8px;border-radius:8px;cursor:pointer;font-size:11px}
.tab-btn.active{background:#d4af37;color:#111;font-weight:700}
.kpi{background:#101010;border:1px solid #2a2a2a;border-radius:12px;padding:10px}
.kpi b{color:#d4af37}
.demo-card{background:#111;border:1px solid #2b2b2b;border-radius:12px;padding:10px;margin-bottom:8px}
.demo-mini{display:flex;gap:10px;align-items:center}
.demo-mini img{width:56px;height:42px;object-fit:cover;border-radius:8px;border:1px solid #333}

@media (max-width: 900px){
  .split,.demo-layout{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .phone{max-width:360px;margin:0 auto}
}