/* Reset & global */
* { box-sizing:border-box; margin:0; padding:0; font-family:'Montserrat',sans-serif; }
body, html { width:100%; height:100%; overflow-x:hidden; position:relative; }
body { background:#fdfaf6; text-align:center; scroll-behavior:smooth; color:#333; }

/* Canvas for mist & spark */
#bg-canvas {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

/* Sections */
.section { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2rem 1rem; position:relative; }

/* Logo */
.logo { width:120px; height:auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); transition: transform 0.3s; z-index:1; }
.logo:hover { transform: scale(1.05); }

/* Headers & text */
h1 { font-family:'Playfair Display', serif; font-size:2.5rem; color:#2b2b2b; z-index:1; }
h2 { font-size:2rem; margin-bottom:1.5rem; color:#444; z-index:1; }
h3 { font-size:1.2rem; margin:0.5rem 0; color:#555; }
p { font-size:1rem; max-width:500px; color:#555; margin-bottom:1.5rem; z-index:1; }

/* Brand button */
.brand-btn { font-size:1.1rem; color:#fff; background:#a07c59; padding:0.8rem 1.5rem; border-radius:8px; text-decoration:none; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; }
.brand-btn:hover { background:#8c664a; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(160,124,89,0.4); }

/* Scroll cue */
.scroll-cue { margin-top:2rem; font-size:0.9rem; color:#444; animation:bounce 1.5s infinite; z-index:1; }
@keyframes bounce { 0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(6px);}60%{transform:translateY(3px);} }

/* Product grid */
.product-grid { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; z-index:1; margin-top:2rem; }
.product-card { background:rgba(255,255,255,0.8); border-radius:12px; padding:1rem; width:220px; box-shadow:0 4px 12px rgba(0,0,0,0.08); text-align:center; transition: transform 0.3s, box-shadow 0.3s; }
.product-card:hover { transform: translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }

/* Scroll fade-in */
.scroll-animate { opacity:0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }
.scroll-animate.visible { opacity:1; transform: translateY(0); }

/* Footer */
footer { font-size:0.9rem; color:#444; padding:2rem 0; z-index:1; }
.contact a { font-weight:600; color:#a07c59; text-decoration:none; transition: color 0.3s; }
.contact a:hover { color:#8c664a; }

/* Responsive */
@media screen and (max-width:768px){ .product-grid{flex-direction:column;align-items:center;} }
@media screen and (max-width:480px){ h1{font-size:2rem;} h2{font-size:1.5rem;} p{font-size:0.9rem;} .logo{width:100px;} .brand-btn{font-size:1rem;padding:0.6rem 1rem;} }