:root{--bg:#ffffff;--text:#222;--card:#f7f7f8;--brand:#bfa34b;--brand-dark:#947f35;}
*{box-sizing:border-box;}
body{font-family:Arial, sans-serif;background:var(--bg);color:var(--text);margin:0}
header{background:#111;color:#fff}
header .inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
header h1{font-size:18px;margin:0;color:var(--brand)}
nav a{color:#fff;text-decoration:none;margin-left:16px}
nav a:hover{color:var(--brand)}
.hero{min-height:52vh;display:grid;place-items:center;text-align:center;color:#fff;position:relative;background:#333}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6))}
.hero-inner{position:relative;z-index:1;padding:0 20px}
.hero h2{font-size:34px;margin:0 0 8px}
.hero p{margin:0 0 16px;font-size:18px}
.btn{display:inline-block;background:var(--brand);color:#111;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700;margin-right:10px}
.btn.outline{background:transparent;color:#fff;border:1px solid #fff}
.container{max-width:1100px;margin:36px auto;padding:0 20px}
.card{background:var(--card);border:1px solid #ececf1;border-radius:12px;padding:18px}
.grid{display:grid;gap:12px}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
label{font-weight:600}
input,select{padding:10px;border:1px solid #ddd;border-radius:8px;font-size:15px;width:100%}
.checkbox{display:flex;align-items:center;gap:8px}
button{padding:11px 14px;border:0;border-radius:8px;background:var(--brand);color:#111;font-weight:700;cursor:pointer}
button:hover{background:var(--brand-dark)}
.result{font-weight:700;margin:10px 0 0}
.product-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0 28px}
.product-gallery img{width:100%;height:260px;object-fit:cover;border-radius:10px;border:1px solid #eee;background:#fafafa}
footer{margin-top:40px;background:#111;color:#fff;text-align:center;padding:18px 16px;font-size:14px}
@media (max-width:720px){.row-4{grid-template-columns:1fr}}

/* hero phone */
.hero-inner p strong{letter-spacing:.3px}