html { scroll-behavior:smooth; }
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }

body { background:#0b0d12; color:#fff; }

nav {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);
  padding:14px 32px;
  border-radius:40px;
  z-index:999;
}
nav ul { display:flex; gap:28px; list-style:none; }
nav a { color:#fff; text-decoration:none; opacity:.7; }
nav a.active { opacity:1; }

header {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:radial-gradient(circle at top,#1d2671,#0b0d12);
}
.small-header {
  min-height:60vh;
}
header h1 {
  font-size:clamp(42px,6vw,70px);
  background:linear-gradient(135deg,#fff,#b6baff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
header p { margin:20px 0; }

.btn {
  background:linear-gradient(135deg,#6e7bff,#c33764);
  padding:16px 44px;
  border-radius:40px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.center { display:block; margin:40px auto 0; width:fit-content; }

section { padding:120px 20px; max-width:1200px; margin:auto; }
section h2 { text-align:center; margin-bottom:60px; }
.center-text { text-align:center; opacity:.8; }

.services {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}
.service {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  padding:40px;
  border-radius:26px;
  transition:.4s;
}
.service:hover {
  transform:translateY(-12px);
  background:linear-gradient(135deg,#1d2671,#c33764);
}

.portfolio {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.portfolio img { width:100%; border-radius:20px; }

.social-icons {
  display:flex;
  justify-content:center;
  gap:25px;
  margin-top:40px;
}
.social-icons a {
  width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  transition:.3s;
}
.social-icons a:hover {
  background:linear-gradient(135deg,#6e7bff,#c33764);
  transform:translateY(-6px);
}

.cta {
  text-align:center;
  background:radial-gradient(circle at top,#1d2671,#0b0d12);
}

footer {
  text-align:center;
  padding:40px;
  background:#07080c;
  color:#888;
}

/* MODAL */
.modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
}
.modal-content {
  background:#111;
  padding:40px;
  border-radius:26px;
  max-width:480px;
}
.close { cursor:pointer; font-size:22px; float:right; }

/* FLOATING CONTACT PANEL */
.floating-contact {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 9999;
}

.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  transition: all .3s ease;
}

/* Hover effect */
.float-btn:hover {
  transform: scale(1.12);
}

/* Platform colors */
.float-btn.whatsapp { background: #25D366; }
.float-btn.instagram { background: #E1306C; }
.float-btn.email { background: #6e7bff; }
.float-btn.call { background: #4CAF50; }

/* Mobile friendly */
@media(max-width:768px){
  .floating-contact {
    bottom: 20px;
    right: 20px;
  }
}