/* 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:#e0f7fa; text-align:center; scroll-behavior:smooth; }

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

.hero { position: relative; overflow: hidden; }
#hero-bg-canvas {
  position: absolute;
  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:140px; height:auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)); transition: transform 0.3s, filter 0.3s; z-index:1; }
.logo:hover { transform: scale(1.05); filter: drop-shadow(0 6px 15px rgba(0,0,0,0.25)); }

/* Headers & text */
h1,h2 { color:#222; z-index:1; }
h1 { font-size:2.7rem; }
h2 { font-size:2rem; margin-bottom:1.5rem; }
p { font-size:1.15rem; max-width:600px; color:#333; margin-bottom:1.5rem; z-index:1; }

/* Brand buttons */
.brands, .product-grid { display:flex; flex-direction:column; gap:1rem; z-index:1; }
.brand-btn { font-size:1.2rem; color:#222; background:linear-gradient(90deg, #a0e9ff, #f7bfff); padding:0.8rem 1.5rem; border-radius:25px; text-decoration:none; transition: background 0.3s, transform 0.3s; }
.brand-btn:hover { transform: translateY(-3px) scale(1.05); }

/* Scroll cue */
.scroll-cue { margin-top:2rem; font-size:0.9rem; color:#00796b; 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);} }

/* Diagonal fade-in animations */
.fade-diagonal { opacity:0; transform: translate(30px,-30px); animation: fadeDiagonal 0.8s forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }
@keyframes fadeDiagonal { to { opacity:1; transform:translate(0,0); } }

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

/* Product grid */
.product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; width:100%; max-width:900px; margin-top:2rem; }
.product-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border-radius:16px; padding:1.5rem; transition: transform 0.4s, box-shadow 0.4s; position:relative; overflow:hidden; cursor:pointer; border: 1px solid rgba(255,255,255,0.25); }
.product-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 10px 30px rgba(0,150,180,0.5); }

/* Crystal hover glow effect inside product cards */
.product-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(0,150,180,0) 70%);
    transform: rotate(45deg);
    pointer-events: none;
    transition: opacity 0.4s;
    opacity:0;
}
.product-card:hover::before { opacity:1; }

/* Footer */
footer { font-size:0.9rem; color:#004d40; padding:2rem 0; z-index:1; }

/* Responsive */
@media screen and (max-width:600px){
    h1{font-size:2rem;} h2{font-size:1.5rem;} p{font-size:1rem;} .logo{width:100px;} .brand-btn{font-size:1rem; padding:0.6rem 1rem;}
    .product-grid { gap:1rem; }
}