/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --maroon:#6a1a2f;
  --maroon-2:#8a2745;
  --gold:#C7A648;
  --plum:#4b2b36;
  --ink:#0f1222;
  --text:#222;
  --bg:#fff8fa;
  --surface:#ffffff;
  --muted:#f2e7ed;
  --ring:rgba(106,26,47,.35);
  --shadow:0 10px 30px rgba(16,8,12,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',Arial,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}

.container{width:min(1200px,92%);margin:0 auto}
.section{padding:72px 0}

a{color:var(--maroon);text-decoration:none}
a:hover{opacity:.9}

/* Nav */
.navbar{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--muted); box-shadow:0 2px 12px rgba(0,0,0,.04)}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink)}
.brand img{height:36px}
.menu{display:flex;gap:18px}
.menu a{color:var(--ink);font-weight:600}
.hamb{display:none;border:1px solid var(--muted);padding:8px 10px;border-radius:10px; background:#fff}

@media (max-width:900px){
  .menu{display:none; position:absolute; top:64px; right:4%; background:#fff; box-shadow:var(--shadow); padding:14px; border-radius:12px; flex-direction:column}
  .menu.show{display:flex}
  .hamb{display:block}
}

/* Hero */
.hero{padding:92px 0; background:
  radial-gradient(1200px 400px at 80% 0%, rgba(199,166,72,.12), transparent 60%),
  linear-gradient(180deg,#fff, #fff8fa 60%);}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center}
.hero h1{font-size: clamp(36px, 5vw, 56px); line-height:1.05; margin:0 0 12px; color:var(--ink); font-weight:800;}
.hero .kicker{color:var(--maroon); font-weight:800; letter-spacing:.06em}
.hero p{font-size: clamp(16px, 1.6vw, 20px); color:#3b3b3b}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 28px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(90deg, #ffe7ef, #fff); border:1px solid var(--muted);
  font-weight:700; color:var(--maroon)}
.cta{display:flex; gap:14px; flex-wrap:wrap}
.btn{padding:12px 18px; border-radius:12px; font-weight:800; border:0; cursor:pointer}
.btn-primary{background:linear-gradient(90deg, #ff6b81, #ff9a9e); color:#fff; box-shadow:var(--shadow)}
.btn-ghost{background:#fff; color:var(--maroon); border:1px solid var(--muted)}

.hero-art{border-radius:28px; overflow:hidden; background:#fff; border:1px solid var(--muted); box-shadow:var(--shadow);}
.hero-art img{display:block; width:100%; height:auto}

@media (max-width:900px){ .hero-grid{grid-template-columns:1fr}}

/* Product tiles */
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media(max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .grid-3{grid-template-columns:1fr} }
.tile{background:#fff; border:1px solid var(--muted); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; transition:.25s}
.tile:hover{transform:translateY(-3px);}
.tile img{width:100%;height:230px;object-fit:cover}
.tile .pad{padding:14px}
.kicker{font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; color:var(--maroon-2)}

/* Emphasis band */
.band{background:linear-gradient(90deg, #fff6da, #ffe7ef); border:1px solid #f6e6b0; padding:18px; border-radius:14px}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.gallery img{width:100%; height:260px; object-fit:cover; border-radius:12px; border:1px solid var(--muted); box-shadow:var(--shadow)}
@media(max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery img{height:220px} }
@media(max-width:560px){ .gallery{grid-template-columns:1fr} }

/* Footer */
footer{margin-top:40px; background:#10070b; color:#fff; padding:30px 0}
footer a{color:#ffd1dc}

/* Lists */
ol.check{counter-reset:item; padding-left:18px}
ol.check > li{margin:.5em 0; padding-left:.6em}
ol.check > li::marker{color:var(--maroon); font-weight:800}

/* Contact form basics */
input,textarea{width:100%; padding:12px 14px; border:1px solid var(--muted); border-radius:12px; font-family:inherit}
label{font-weight:700}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:700px){ form .row{grid-template-columns:1fr}}
.form-card{background:#fff; border:1px solid var(--muted); border-radius:16px; padding:16px; box-shadow:var(--shadow)}