:root{
  --primary:#1e2a38;
  --accent:#c9a14a;
  --light:#f5f5f5;
}

*{box-sizing:border-box;font-family:'Cairo',sans-serif}

body{margin:0;background:#fff;color:#222;scroll-behavior:smooth}

header{
  height:100vh;
  background:linear-gradient(120deg,var(--primary),#000);
  position:relative;
  color:#fff;
  overflow:hidden;
}

.overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at top,rgba(255,255,255,.1),transparent);
  animation:move 10s infinite alternate;
}
@keyframes move{to{transform:translateY(40px)}}

.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px;position:relative;z-index:2;
}
.logo{height:60px}
.nav-links a{
  margin:0 10px;color:#fff;text-decoration:none;font-weight:600;
}

.hero{text-align:center;position:relative;z-index:2;margin-top:80px}
.hero h1{font-size:3rem}
.hero-buttons{margin-top:30px}

.btn{
  padding:12px 25px;border-radius:30px;text-decoration:none;
  margin:5px;display:inline-block;font-weight:600
}
.whatsapp{background:#25d366;color:#fff}
.call{background:var(--accent);color:#000}

section{padding:80px 20px;text-align:center}
#about{background:var(--light)}

.products-grid{
  display:grid;gap:25px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.product{
  border:1px solid #eee;padding:15px;border-radius:15px;
  transition:.3s;background:#fff
}
.product:hover{transform:translateY(-5px)}
.product img{width:100%;border-radius:10px}
.order-btn{
  display:block;margin-top:10px;
  background:var(--primary);color:#fff;
  padding:10px;border-radius:20px;text-decoration:none
}

footer{
  background:var(--primary);color:#fff;
  padding:30px;text-align:center
}
.footer-links a{color:#fff;margin:0 10px;text-decoration:none}

.floating{
  position:fixed;left:15px;bottom:15px;z-index:999;
  display:flex;flex-direction:column;gap:10px
}
.float{
  width:55px;height:55px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;
  animation:pulse 2s infinite
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.4)}
  70%{box-shadow:0 0 0 15px transparent}
}
