/* === RESET & BASE === */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', sans-serif; background:#F8FAFC; color:#1E3A8A; line-height:1.7; }
h1,h2,h3 { font-weight:600; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* === NAV === */
.navbar {
  position:fixed; top:0; width:100%; background:#1E3A8A; color:white; padding:1rem 5%; display:flex; justify-content:space-between; align-items:center; z-index:1000; transition:0.3s;
}
.navbar.scrolled { background:rgba(30,58,138,0.95); backdrop-filter:blur(10px); }
.logo { font-size:1.9rem; font-weight:700; }
.logo span { color:#10B981; }
.nav-links { display:flex; gap:2.2rem; }
.nav-links a { color:white; font-weight:500; font-size:0.95rem; transition:0.3s; }
.nav-links a:hover { color:#10B981; }
.hamburger { display:none; font-size:1.8rem; cursor:pointer; color:white; }

/* === HERO === */
.hero {
  min-height:100vh; background:linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%); color:white; display:flex; align-items:center; justify-content:space-between; padding:0 5%; position:relative; overflow:hidden;
}
.hero-content { max-width:520px; z-index:2; }
.hero h1 { font-size:3.8rem; margin-bottom:1rem; line-height:1.1; }
.hero p { font-size:1.22rem; margin-bottom:2rem; opacity:0.92; }
.cta-btn {
  background:#10B981; color:white; padding:1.1rem 2.4rem; border-radius:8px; font-weight:600; font-size:1.05rem; box-shadow:0 8px 25px rgba(16,185,129,0.35); transition:0.3s;
}
.cta-btn:hover { transform:translateY(-4px); box-shadow:0 14px 35px rgba(16,185,129,0.45); }

/* NETWORK ANIMATION */
.network-animation { position:relative; width:400px; height:400px; }
.node { position:absolute; width:20px; height:20px; background:#10B981; border-radius:50%; animation:pulse 2s infinite; }
.node:nth-child(1) { top:20%; left:20%; animation-delay:0s; }
.node:nth-child(2) { top:40%; right:20%; animation-delay:0.5s; }
.node:nth-child(3) { bottom:20%; left:30%; animation-delay:1s; }
.node:nth-child(4) { bottom:40%; right:30%; animation-delay:1.5s; }
.node:nth-child(5) { top:50%; left:50%; animation-delay:0.25s; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.5); opacity:0.5; } }

/* === SECTIONS === */
section { padding:6rem 5%; }
h2 { font-size:2.6rem; text-align:center; margin-bottom:3rem; color:#1E3A8A; }

/* CARDS */
.services { background:white; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; }
.card {
  background:white; border-radius:12px; padding:2.5rem; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.05); transition:0.4s;
}
.card i { font-size:3rem; color:#10B981; margin-bottom:1rem; }
.card:hover { transform:translateY(-8px); box-shadow:0 12px 40px rgba(16,185,129,0.15); }
.card h3 { margin-bottom:1rem; color:#1E3A8A; }
.card p { color:#64748B; }

/* PORTFOLIO */
.gallery { background:#F1F5F9; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.5rem; }
.project { position:relative; height:250px; border-radius:12px; overflow:hidden; cursor:pointer; transition:0.3s; }
.project img { height:100%; object-fit:cover; }
.overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,0.8)); color:white; padding:2rem; transform:translateY(100%); transition:0.3s; }
.project:hover .overlay { transform:translateY(0); }
.overlay h4 { margin-bottom:0.5rem; }

/* TESTIMONIALS */
.testimonials { text-align:center; background:white; }
.carousel { max-width:700px; margin:0 auto; overflow:hidden; position:relative; }
.slide { display:none; padding:2rem; font-style:italic; }
.slide.active { display:block; animation:fade 0.6s; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.stars { color:#FBBF24; margin-top:0.8rem; font-size:1.2rem; }
.dots { margin-top:1.5rem; }
.dot { width:12px; height:12px; background:#D1D5DB; border-radius:50%; display:inline-block; margin:0 6px; cursor:pointer; transition:0.3s; }
.dot.active { background:#10B981; transform:scale(1.2); }

/* CONTACT */
.contact { background:#1E3A8A; color:white; text-align:center; }
.contact h2 { color:white; }
#contact-form {
  max-width:600px; margin:2rem auto; display:grid; gap:1rem;
}
#contact-form input, #contact-form textarea {
  padding:1rem; border-radius:8px; border:none; font-family:inherit; font-size:1rem; background:#F8FAFC; color:#1E3A8A;
}
#contact-form textarea { resize:vertical; }
.submit-btn {
  background:#10B981; color:white; border:none; padding:1rem; border-radius:8px; font-weight:600; cursor:pointer; transition:0.3s;
}
.submit-btn:hover { background:#059669; }
.contact-info { margin-top:2rem; font-size:1.1rem; }
.contact-info a { color:#10B981; }

/* FOOTER */
footer { background:#0F172A; color:#94A3B8; text-align:center; padding:2rem; font-size:0.9rem; }
.social a { font-size:1.4rem; margin:0 0.8rem; color:#10B981; transition:0.3s; }
.social a:hover { color:#FBBF24; }

/* === MOBILE === */
@media (max-width: 992px) {
  .hero { flex-direction:column; text-align:center; padding-top:120px; }
  .hero h1 { font-size:2.8rem; }
  .network-animation { width:300px; height:300px; margin-top:2rem; }
}
@media (max-width: 768px) {
  .nav-links { position:fixed; top:70px; left:0; width:100%; background:#1E3A8A; flex-direction:column; padding:1.5rem 0; display:none; }
  .nav-links.active { display:flex; }
  .hamburger { display:block; }
  .hero h1 { font-size:2.4rem; }
}