:root{
  --blue:#0c63e7; 
  --deep:#0a3fa3;
  --aqua:#00c6c2;
  --bg:#f4f8ff; 
  --text:#1b263b; 
  --dark:#111;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body {
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Hero */
.hero{
  padding:150px 50px 100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  background:linear-gradient(120deg,var(--deep),var(--blue),var(--aqua));
  color:white;
  position:relative;
  overflow:hidden;
  border-radius:0 0 50px 50px;
  animation:gradientMove 15s ease infinite;
}
@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.hero::after{
  content:"";
  position:absolute;
  bottom:-120px;
  left:-120px;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(255,255,255,0.15),transparent 70%);
  animation:glowRotate 25s linear infinite;
}
@keyframes glowRotate{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
.hero .text{
  max-width:600px;
  z-index:2;
  animation:fadeUp 1.2s ease forwards;
}
.hero h1{
  font-size:48px;
  font-weight:800;
  margin-bottom:20px;
  line-height:1.1;
}
.hero p{
  font-size:18px;
  line-height:1.7;
  opacity:0.95;
}
.hero-visual{
  width:350px;
  height:350px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 40px 100px rgba(0,0,0,0.25);
  z-index:2;
  animation:float 6s ease-in-out infinite;
}
.hero-visual i{
  font-size:120px;
  color:white;
  opacity:0.95;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}
@keyframes fadeUp{
  0%{opacity:0;transform:translateY(30px);}
  100%{opacity:1;transform:translateY(0);}
}

/* Section */
.section{
  padding:80px 50px;
  max-width:1200px;
  margin:0 auto;
}
.section-title{
  text-align:center;
  font-size:36px;
  font-weight:800;
  color:var(--deep);
  margin-bottom:40px;
}

/* Products Section Top Controls */
.products-controls{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:flex-start;
  margin-bottom:30px;
}
.products-controls input[type="text"]{
  flex:1;
  min-width:200px;
  padding:10px 15px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:14px;
}
.products-controls button{
  padding:10px 20px;
  background:var(--blue);
  color:white;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:.3s;
  font-weight:600;
}
.products-controls button:hover{
  background:var(--deep);
}

/* Product Cards */
.products-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.product-card{
  background:white;
  padding:20px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,0.05);
  transition:.3s;
  position:relative;
  overflow:hidden;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  height:100%;
}
.product-card img{
  width:100%;
  height:220px;
  object-fit:contain;
  border-radius:16px;
  margin-bottom:15px;
}
.product-card h4{
  font-size:20px;
  color:var(--deep);
  margin-bottom:8px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:48px;
}
.product-card p{
  font-size:14px;
  color:#555;
  margin-bottom:5px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product-card .price{
  font-weight:700;
  color:var(--blue);
  margin-bottom:10px;
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 25px 60px rgba(0,0,0,0.1);
}
.badge{
  position:absolute;
  top:15px;
  left:15px;
  background:var(--aqua);
  color:white;
  padding:5px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
}

/* Pagination */
.pagination{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:40px;
}
.pagination button{
  padding:10px 15px;
  border:none;
  background:var(--blue);
  color:white;
  border-radius:8px;
  cursor:pointer;
  transition:.3s;
}
.pagination button:hover{
  background:var(--deep);
}



/* Responsive */
@media(max-width:1100px){
  .hero{flex-direction:column;text-align:center;padding:120px 30px;}
  .hero-visual{width:250px;height:250px;}
  .hero-visual i{font-size:100px;}
  .products-grid{grid-template-columns:1fr 1fr;}
  .section{padding:60px 20px;}
  .products-controls{flex-direction:column;}
}
@media(max-width:600px){
  .products-grid{grid-template-columns:1fr;}
  .hero-visual{width:200px;height:200px;}
  .hero h1{font-size:36px;}
  .hero p{font-size:16px;}
}