:root{
  --blue:#2563eb;
  --cyan:#22d3ee;
  --grad:linear-gradient(135deg,#2563eb,#22d3ee);
  --dark:#020617;
  --light:#f8fafc;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Poppins,sans-serif;
  background:#fff;
  color:#334155;
  scroll-behavior:smooth;
}

/* NAVBAR */
header{
  position:fixed;
  top:0;width:100%;
  z-index:1000;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.nav{
  max-width:1200px;
  margin:auto;
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  font-size:1.5rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:12px;
}
.brand i{color:var(--blue)}
.toggle{
  font-size:1.8rem;
  cursor:pointer;
}
.menu{
  position:absolute;
  top:78px;
  right:22px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);
  border-radius:22px;
  box-shadow:0 40px 80px rgba(0,0,0,.25);
  overflow:hidden;
  display:none;
}
.menu a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 26px;
  color:var(--dark);
  text-decoration:none;
  font-weight:500;
  transition:.35s;
}
.menu a:hover{
  background:var(--grad);
  color:#fff;
}
.menu.show{display:block;animation:drop .4s ease}
@keyframes drop{
  from{opacity:0;transform:translateY(-25px)}
  to{opacity:1;transform:translateY(0)}
}

/* HERO */
.hero{
  height:100vh;
  background:
  linear-gradient(rgba(2,6,23,.7),rgba(2,6,23,.7)),
  url('https://images.unsplash.com/photo-1498050108023-c5249f4df085');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding-top:90px;
}
.hero h1{
  font-size:4rem;
  animation:fadeUp 1s;
}
.hero p{
  max-width:760px;
  margin:28px auto;
  font-size:1.25rem;
  opacity:.9;
}
.cta{
  display:inline-block;
  padding:16px 46px;
  border-radius:70px;
  background:var(--grad);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 30px 70px rgba(37,99,235,.45);
  transition:.45s;
}
.cta:hover{
  transform:translateY(-7px) scale(1.08);
  box-shadow:0 45px 90px rgba(34,211,238,.55);
}

/* SECTIONS */
section{padding:120px 20px}
.container{max-width:1200px;margin:auto}
.title{text-align:center;margin-bottom:80px}
.title h2{
  font-size:3rem;
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
}

/* SERVICES */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:45px;
  justify-items:center;
}
.service{
  background:#fff;
  width:100%;
  max-width:340px;
  border-radius:28px;
  padding:50px 40px;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
  text-align:center;
  transition:.45s;
}
.service::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--grad);
  opacity:0;
  transition:.45s;
}
.service:hover::before{opacity:.08}
.service:hover{
  transform:translateY(-22px) scale(1.03);
}
.service i{
  font-size:3.4rem;
  color:var(--blue);
  margin-bottom:24px;
}

/* REVIEWS */
.reviews{
  background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
}
.review-track{
  display:flex;
  gap:45px;
  animation:scroll 30s linear infinite;
}
.review{
  min-width:340px;
  background:#fff;
  padding:40px;
  border-radius:30px;
  box-shadow:0 25px 50px rgba(0,0,0,.15);
  text-align:center;
}
.review p{
  font-size:1.05rem;
  margin-top:15px;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* CONTACT */
form{
  max-width:620px;
  margin:auto;
  background:#fff;
  padding:50px;
  border-radius:35px;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}
input,textarea{
  width:100%;
  padding:16px;
  margin-bottom:22px;
  border-radius:12px;
  border:1px solid #cbd5e1;
}
button{
  width:100%;
  padding:16px;
  border:none;
  border-radius:70px;
  background:var(--grad);
  color:#fff;
  font-weight:600;
  font-size:1.1rem;
  cursor:pointer;
  transition:.4s;
}
button:hover{
  transform:translateY(-4px);
  box-shadow:0 25px 60px rgba(37,99,235,.45);
}

/* WHATSAPP */
.whatsapp{
  position:fixed;
  bottom:30px;
  right:30px;
  width:68px;
  height:68px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  box-shadow:0 25px 60px rgba(0,0,0,.4);
}

/* FOOTER */
footer{
  background:var(--dark);
  color:#fff;
  text-align:center;
  padding:40px;
}

/* ANIMATIONS */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(50px)}
  to{opacity:1;transform:translateY(0)}
}