:root {
  --primary: #202020;
  --primary-dark: #27004E;
  --text: #030303;
  --light: #fff;
 
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:var(--light);
  color:var(--text);
}

/* HEADER WITH PARALLAX */
.site-header{
  background:linear-gradient(to right,var(--primary),var(--primary-dark));
  padding:5rem 1.5rem;
  text-align:center;
  color:#fff;
  position:relative;
}

.site-header::before{
  content:"";
  position:absolute;
  opacity:0.25;
  background-attachment:fixed;
  z-index:-1;
}

/* TEXT FADE-IN (KEYFRAME ANIMATION) */
.headline{
  font-size:2.6rem;
  opacity:0;
  animation:fadeIn 2s forwards;
}

.tagline{
  opacity:0;
  animation:fadeIn 2s forwards .5s;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* CTA BUTTON HOVER */
.cta{
  display:inline-block;
  margin-top:1rem;
  padding:.7rem 1.2rem;
  color:#fff;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:6px;
  text-decoration:none;
  transition:transform .3s, box-shadow .3s;
}

.cta:hover{
  transform:scale(1.08);
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}


.product-section{
  max-width:1100px;
  margin:3rem auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:1rem;
  animation:slideIn 1.5s ease;
}

/* SLIDE-IN ANIMATION */
@keyframes slideIn{
  from{opacity:0;transform:translateX(-60px)}
  to{opacity:1;transform:translateX(0)}
}

.product-media{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
  transition:transform .4s;
}

.product-media:hover{
  transform:scale(1.05);
}

.product-media img{
  width:100%;
  display:block;
}

.product-info{
  background:#fff;
  padding:1.5rem;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.features{
  padding-left:1.2rem;
}

.actions{
  display:flex;
  gap:.7rem;
  margin-top:1rem;
}

.btn{
  padding:.7rem 1.2rem;
  border-radius:6px;
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}

.btn.primary{
  background:var(--primary);
  color:#fff;
  border:none;
}

.btn.primary:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(108,99,255,0.5);
}

.btn.ghost{
  border:1px solid #ccc;
  background:transparent;
}

.btn.ghost:hover{
  transform:translateY(-3px);
}

/* INFINITE LOADER SPINNER */
.loader-container{
  display:flex;
  justify-content:center;
  padding:2.5rem 0;
}

.loader{
  width:50px;
  height:50px;
  border:6px solid #a3a3a3;
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

.site-footer{
  text-align:center;
  padding:2rem;
  color:#666;
  font-size:.9rem;
}


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