:root{--bg:#0d0d0d;--ink:#fff;--muted:#ddd;--card:#121212;--brand:#ff6600}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
.hero{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero .slides{position:absolute;inset:0}
.hero .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero .slides img.active{opacity:1}
.hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero .inner{position:relative;z-index:2;max-width:900px;padding:0 16px}
.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 8px}
.hero p{font-size:clamp(14px,2.2vw,18px);margin:0}
.section{padding:56px 18px}
.center{text-align:center}
.grid{max-width:1200px;margin:0 auto;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border-radius:12px;overflow:hidden;border:1px solid #1a1a1a}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.card h3{margin:12px 12px 4px;font-size:1.05rem}
.card p{margin:0 12px 14px;color:var(--muted)}
.cta{background:var(--brand);color:#000;text-align:center}
.btn{display:inline-block;background:#000;color:#fff;text-decoration:none;padding:12px 28px;border-radius:8px;font-weight:700}
.btn:hover{filter:brightness(1.1)}