*{box-sizing:border-box}
:root{
  --bg:#000;
  --card:#151515;
  --text:#fff;
  --muted:#b9b9b9;
  --primary:#ffffff;
}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:var(--text)}

/* HERO */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:24px}
.hero-phones{position:absolute;inset:0;margin:auto;max-width:min(95vw,1400px);max-height:80vh;opacity:0.95;pointer-events:none;transform:translateY(4vh)}
.hero-inner{text-align:center;position:relative;z-index:1}
.hero h1{font-size:clamp(36px,6vw,72px);line-height:1.05;margin:0 0 28px 0;font-weight:800;letter-spacing:0.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:14px;border:2px solid #fff;background:#fff;color:#000;font-weight:700;text-decoration:none;transition:transform .15s ease,opacity .15s ease}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn-primary{background:#fff;color:#000;border-color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:#fff}

/* LAYOUT */
.container{max-width:980px;margin:0 auto;padding:24px}
.catalog-title{font-size:clamp(28px,6vw,54px);margin:16px 0 8px 0}
.grid{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:40px}
@media (min-width:720px){.grid{grid-template-columns:1fr}}

/* CARD */
.card{display:flex;align-items:center;gap:18px;background:var(--card);border-radius:22px;padding:22px 22px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.product-img{width:112px;height:112px;border-radius:16px;object-fit:cover;flex:0 0 auto;background:#0a0a0a}
.card-body{display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:clamp(18px,3.4vw,28px)}
.price{margin:0;color:var(--muted);font-weight:600}