:root{
  --bg:#f4f4f4;--surface:#fff;--ink:#141414;--muted:#666;--accent:#f15a24;--line:#dedede;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:#111;color:#fff;box-shadow:0 2px 14px #0003}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.brand strong,.brand small{display:block}
.brand small{color:#ccc}
.install,.quote-button,.icon-button{border:0;cursor:pointer}
.install{background:#fff;color:#111;padding:10px 14px;border-radius:10px;font-weight:700}
main{max-width:1180px;margin:auto}
.hero{margin:24px 4vw 10px;padding:clamp(28px,7vw,72px);border-radius:24px;background:linear-gradient(135deg,#111,#2b2b2b);color:#fff;overflow:hidden}
.hero h1{font-size:clamp(34px,8vw,78px);line-height:.95;max-width:850px;margin:12px 0 18px}
.hero p{max-width:680px;color:#ddd;font-size:18px;line-height:1.55}
.eyebrow{font-weight:800;letter-spacing:.14em;font-size:12px;color:var(--accent)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border:0;border-radius:12px;padding:14px 18px;font-weight:800;cursor:pointer}
.primary{background:var(--accent);color:#fff}
.secondary{background:#fff;color:#111}
.full{width:100%;margin-top:14px}
.controls{display:grid;grid-template-columns:1fr 240px;gap:12px;padding:24px 4vw 10px}
input,select,textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;padding:20px 4vw 10px}
.section-head h2{font-size:32px;margin:5px 0}
.quote-button{background:#111;color:#fff;border-radius:12px;padding:12px 16px;font-weight:800}
.quote-button span{background:var(--accent);border-radius:999px;padding:3px 8px;margin-left:6px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:10px 4vw 50px}
.card{background:var(--surface);border-radius:18px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.product-art{min-height:170px;background:linear-gradient(135deg,#252525,#101010);display:grid;place-items:center;color:#fff;padding:24px}
.product-art strong{font-size:32px;letter-spacing:.06em}
.card-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:12px;background:#f0f0f0;border-radius:999px;padding:6px 9px}
.card h3{margin:0;font-size:20px;line-height:1.2}
.card p{margin:0;color:var(--muted);line-height:1.45}
.features{margin:0;padding-left:18px;color:#444;font-size:14px}
.card-actions{margin-top:auto;display:flex;gap:10px}
.add{flex:1;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:12px;font-weight:800;cursor:pointer}
.details{background:#111;color:#fff;border:0;border-radius:10px;padding:12px;font-weight:800}
dialog{border:0;border-radius:20px;padding:22px;width:min(620px,92vw);box-shadow:0 20px 80px #0005}
dialog::backdrop{background:#0008}
.dialog-head{display:flex;justify-content:space-between;align-items:start}
.icon-button{background:#eee;border-radius:10px;padding:10px}
.quote-row{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
dialog label{display:block;margin-top:16px;font-weight:700}
footer{display:flex;flex-direction:column;gap:5px;background:#111;color:#fff;padding:28px 5vw}
footer span,footer small{color:#bbb}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.controls{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.hero{margin:16px}.section-head{align-items:center}.brand strong{font-size:14px}}