/* Reset + Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#0a0a0a; color:#e0e0e0; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.container { max-width:1200px; margin:auto; padding:0 2rem; }
section { padding:6rem 0; scroll-margin-top:90px; }

/* Navbar */
.navbar { position:fixed; top:0; width:100%; background:rgba(10,10,10,.85); backdrop-filter:blur(15px); z-index:1000; }
.nav-container { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; }
.brand { font-size:1.5rem; font-weight:700; margin-left:.5rem; background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-link { position:relative; color:#b0b0b0; transition:.3s; }
.nav-link:hover { color:#fff; text-shadow:0 0 8px #667eea; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-5px; width:0%; height:2px; background:linear-gradient(135deg,#667eea,#764ba2); transition:.3s; }
.nav-link:hover::after { width:100%; }

/* Mobile Navbar */
.nav-toggle { display:none; flex-direction:column; cursor:pointer; gap:5px; z-index:1100; margin-right:.5rem; }
.nav-toggle span { width:25px; height:3px; background:#fff; border-radius:2px; transition:0.3s; }

@media(max-width: 768px) {
  .nav-links {
    position:absolute;
    top:100%;
    right:1rem;
    background:rgba(17,17,17,0.95);
    backdrop-filter:blur(10px);
    border-radius:8px;
    flex-direction:column;
    width:220px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease, opacity 0.3s ease;
    opacity:0;
    box-shadow:0 8px 20px rgba(0,0,0,0.5);
  }
  .nav-links.active { max-height:400px; opacity:1; }
  .nav-links li { text-align:right; padding:1rem 1.2rem; }
  .nav-links a { display:inline-block; width:100%; color:#e0e0e0; transition:color 0.3s, transform 0.2s; }
  .nav-links a:hover { color:#fff; transform:translateX(-5px); text-shadow:0 0 6px #667eea; }
  .nav-toggle { display:flex; }
}

/* Hamburger animation */
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* Hero */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-content { position:relative; z-index:2; }
.hero h1 { font-size:3rem; margin-bottom:1rem; }
.hero .gradient { background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:1.2rem; margin-bottom:2rem; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; }

/* Hero background gradient wave */
.hero-bg-wave { position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(270deg,#667eea,#764ba2,#667eea); background-size:600% 600%; animation:gradientShift 15s ease infinite; opacity:0.15; z-index:1; }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Particle canvas */
#particles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }

/* Buttons */
.btn { padding:0.8rem 1.5rem; border-radius:8px; font-weight:600; cursor:pointer; transition:.3s; }
.btn-primary { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.btn-primary:hover { opacity:.9; }
.btn-secondary { border:2px solid #667eea; color:#fff; }
.btn-secondary:hover { background:#667eea; }

/* About */
.about { background:#1a1a1a; text-align:center; }
.about p { max-width:700px; margin:auto; }

/* Services */
.services { background:#0a0a0a; text-align:center; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem; }
.card { background:#1a1a1a; padding:2rem; border-radius:12px; transition:.3s; }
.card:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.4); }
.card i { font-size:2rem; margin-bottom:1rem; color:#667eea; }

/* Contact */
.contact { background:#1a1a1a; text-align:center; }
.contact-form { display:flex; flex-direction:column; gap:1rem; max-width:500px; margin:auto; }
.contact-form input, .contact-form textarea { padding:1rem; border:none; border-radius:8px; background:#0a0a0a; color:#fff; }
.contact-form button { align-self:center; }

/* CTA Section */
.cta { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; text-align: center; padding: 4rem 2rem; }
.cta-content h2 { font-size: 2rem; margin-bottom: 1rem; }
.cta-content p { font-size: 1.1rem; }

/* Footer */
.footer { background:#0a0a0a; padding:4rem 2rem 2rem; color:#e0e0e0; }
.footer-content { display:grid; grid-template-columns:1fr 2fr; gap:3rem; margin-bottom:2rem; }
.footer-brand h3 { font-size:1.8rem; background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem; }
.footer-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2rem; }
.footer-column h4 { margin-bottom:1rem; font-weight:600; }
.footer-column a { display:block; margin:0.3rem 0; color:#b0b0b0; transition:.3s; }
.footer-column a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #333; padding-top:1.5rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.footer-social a { margin:0 0.5rem; color:#b0b0b0; transition:.3s; }
.footer-social a:hover { color:#fff; }

@media(max-width:768px){
  .footer-content { grid-template-columns:1fr; gap:2rem; text-align:center; }
}