
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#64748b;
  --acc:#dc2626;          /* red-600 */
  --acc-dark:#b91c1c;     /* red-700 */
  --ring:#e5e7eb;
  --text:#111827;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);scroll-behavior:smooth}
a{color:var(--acc);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--ring);z-index:50}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{font-weight:800;letter-spacing:.5px}
.brand span{color:var(--acc)}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:#111827;opacity:.85}
.nav a:hover{opacity:1}
.nav .cta{padding:.5rem .9rem;border:1px solid var(--ring);border-radius:999px}
.hamburger{display:none;background:transparent;border:0;color:#111827;font-size:1.5rem}
@media(max-width:860px){
  .hamburger{display:block}
  .nav{position:absolute;top:64px;right:0;background:#ffffff;flex-direction:column;align-items:flex-start;padding:16px 20px;border-left:1px solid var(--ring);border-bottom:1px solid var(--ring);display:none}
  .nav.open{display:flex}
}

/* Hero */
.hero{position:relative;min-height:78vh;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;background:url('assets/hero.jpg') center/cover no-repeat;opacity:.25;filter:grayscale(0%) brightness(1)}
.hero-inner{position:relative;padding:80px 0}
h1{font-size:clamp(28px,5vw,54px);line-height:1.05;margin:0 0 10px 0}
.subtitle{font-weight:600;opacity:.9;margin:4px 0 12px 0}
.lead{max-width:900px;opacity:.9}
.btn-primary{display:inline-block;margin-top:18px;background:var(--acc);color:#ffffff;font-weight:700;padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent}
.btn-primary:hover{background:var(--acc-dark)}

/* Sections */
.section{padding:80px 0;border-top:1px solid var(--ring);background:transparent}
.section.alt{background:linear-gradient(180deg,#ffffff, #f9fafb)}
.grid.two{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
@media(max-width:900px){.grid.two{grid-template-columns:1fr}}
h2{font-size:clamp(24px,3.5vw,40px);margin:0 0 14px}
h3{margin:16px 0 8px}
.checklist{list-style:none;padding:0;margin:10px 0 0}
.checklist li{position:relative;margin:10px 0;padding-left:28px}
.checklist li:before{content:"✔";position:absolute;left:0;top:0;color:var(--acc)}

.image-card{background:var(--card);border:1px solid var(--ring);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.image-card img{display:block;width:100%;height:auto}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:18px;min-height:150px;box-shadow:0 4px 14px rgba(17,24,39,.05)}
.card h3{color:#111827;border-left:4px solid var(--acc);padding-left:10px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}

/* Products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.product-card{display:flex;flex-direction:column}
.product-media{border:1px dashed var(--ring);border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);aspect-ratio:4/3}
.product-media img{display:block;width:100%;height:100%;object-fit:cover}
.product-card p{margin:8px 0;color:#111827}
@media(max-width:1000px){.products{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.products{grid-template-columns:1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery figure{margin:0;background:var(--card);border:1px solid var(--ring);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(17,24,39,.05)}
.gallery img{width:100%;display:block}
.gallery figcaption{padding:10px 12px;color:var(--muted);font-size:.9rem}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}

/* Contact */
.contact .contact-list{list-style:none;padding:0;margin:16px 0 0}
.contact .contact-list li{margin:10px 0;color:#111827}
.site-footer{border-top:1px solid var(--ring);padding:24px 0;text-align:center;color:var(--muted);background:#fff}
