* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; color:#fff; font-family:'Segoe UI',sans-serif; overflow-x:hidden; }

/* Intro (Home Page) */
.intro {
    position:fixed; top:0; left:0; width:100%; height:100%; background:#000;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    z-index:9999; transition:opacity 0.8s;
}
.intro h1 { font-size:5.5rem; background:linear-gradient(90deg,#00f5ff,#00ff9d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
#typing { color:#00f5ff; }
.intro p { font-size:1.8rem; margin-top:20px; }

/* Main */
.main { opacity:0; transition:opacity 1s; }

/* Header - All Pages */
header { position:fixed; top:0; width:100%; padding:20px 5%; background:rgba(0,0,0,0.8); backdrop-filter:blur(10px); z-index:1000; }
nav { display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; }
.logo { font-size:2rem; font-weight:bold; background:linear-gradient(90deg,#00f5ff,#00ff9d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:35px; }
.nav-links a { color:#fff; text-decoration:none; font-weight:500; padding:10px 20px; border-radius:12px; transition:0.3s; }
.nav-links a:hover, .nav-links a.active { background:rgba(0,245,255,0.2); color:#00f5ff; }
.hamburger { display:none; font-size:2.2rem; color:#00f5ff; cursor:pointer; }

/* Hero - Home Page */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px 5% 80px; position:relative; text-align:center; }
.hero-text { max-width:800px; width:100%; z-index:2; }
.my-photo { width:300px; height:300px; border-radius:50%; object-fit:cover; border:8px solid #00f5ff; box-shadow:0 0 60px rgba(0,245,255,0.6); margin:40px auto; animation:pulseGlow 4s infinite; display:block; }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 60px rgba(0,245,255,0.6); } 50% { box-shadow:0 0 90px rgba(0,245,255,0.9); } }
.subtitle { font-size:1.9rem; margin:30px 0; opacity:0.9; }
.social a { color:#fff; font-size:2.3rem; margin:0 20px; transition:0.3s; }
.social a:hover { color:#00f5ff; transform:translateY(-10px); }
.buttons { margin-top:60px; display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.btn { padding:22px 70px; border-radius:50px; font-size:1.4rem; font-weight:bold; text-decoration:none; transition:all 0.4s; display:flex; align-items:center; justify-content:center; gap:12px; min-width:280px; border:4px solid #00f5ff; background:transparent; color:#00f5ff; box-shadow:0 10px 30px rgba(0,245,255,0.3); }
.btn:hover { background:#00f5ff; color:#000; transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,245,255,0.6); }

/* Code Box - Desktop right, Mobile center below hero-text */
.code-box { position:absolute; top:12%; right:5%; width:500px; max-width:90%; background:rgba(15,15,35,0.95); backdrop-filter:blur(15px); border-radius:20px; border:1px solid rgba(0,245,255,0.4); box-shadow:0 25px 70px rgba(0,245,255,0.3); padding:25px; animation:floatIn 2s ease-out forwards; z-index:1; }
@keyframes floatIn { from{opacity:0;transform:translateX(80px)} to{opacity:1;transform:translateX(0)} }
.code-header { display:flex; gap:10px; margin-bottom:20px; }
.dot { width:14px; height:14px; border-radius:50%; }
.dot.red {background:#ff5f56} .dot.yellow {background:#ffbd2e} .dot.green {background:#27c93f}
#code-lines { font-family:'Fira Code',monospace; color:#00f5ff; font-size:16px; line-height:1.9; white-space:pre-wrap; word-wrap:break-word; }

/* WhatsApp */
.wa-float { position:fixed; bottom:40px; left:40px; width:70px; height:70px; background:#25D366; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:38px; box-shadow:0 10px 30px rgba(37,211,102,0.6); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,0.7)} 70%{box-shadow:0 0 0 20px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }

/* Mobile View */
@media (max-width: 768px) {
    .hamburger { display:block; }
    .nav-links { display:none; }
    .hero { padding-top:120px; flex-direction:column; }
    .hero-text { order:1; }
    .code-box { position:relative; top:auto; right:auto; left:auto; order:2; width:90%; margin:60px auto 0; animation:floatInMobile 2s ease-out forwards; }
    @keyframes floatInMobile { from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)} }
    .my-photo { width:220px; height:220px; border-width:6px; margin:20px auto 30px; }
    .subtitle { font-size:1.6rem; }
    .buttons { gap:25px; flex-direction:column; align-items:center; }
    .btn { width:90%; max-width:380px; padding:26px 40px; font-size:1.6rem; }
    .social a { font-size:2rem; }
    .wa-float { width:60px; height:60px; font-size:32px; bottom:20px; left:20px; }
}

/* Mobile Menu - Full Black + No Overlap + Big Buttons */
.mobile-menu {
    position:fixed; top:0; left:0; width:100%; height:100vh; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:100px; gap:30px; z-index:9999; transition:opacity 0.4s ease; opacity:0; visibility:hidden;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a {
    width:85%; max-width:380px; padding:26px 40px; font-size:1.6rem; border-radius:50px; background:transparent; color:#00f5ff; border:4px solid #00f5ff; text-align:center; box-shadow:0 0 30px rgba(0,245,255,0.8); transition:all 0.4s ease;
}
.mobile-menu a:hover, .mobile-menu a.active { background:#00f5ff; color:#000; transform:scale(1.05); box-shadow:0 0 40px rgba(0,245,255,1); }
.close-menu { position:absolute; top:30px; right:30px; font-size:2.5rem; color:#00f5ff; cursor:pointer; }

/* About Page */
.about-page { padding:140px 5% 80px; max-width:1300px; margin:0 auto; text-align:center; }
.about-page h1 { font-size:3.5rem; margin-bottom:60px; background:linear-gradient(90deg,#00f5ff,#00ff9d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.about-wrapper { display:flex; align-items:center; gap:80px; flex-wrap:wrap; justify-content:center; }
.about-photo { width:320px; height:320px; border-radius:50%; object-fit:cover; border:6px solid #00f5ff; box-shadow:0 0 40px rgba(0,245,255,0.4); }
.about-details { max-width:600px; text-align:left; }
.about-details p { font-size:1.2rem; margin-bottom:20px; line-height:1.8; }
.skills-list { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.skills-list span { background:rgba(0,245,255,0.1); padding:10px 20px; border-radius:30px; border:1px solid #00f5ff; font-size:1rem; }

/* Services Page */
.services-page { padding:140px 5% 80px; text-align:center; }
.services-page h1 { font-size:3.5rem; margin-bottom:60px; background:linear-gradient(90deg,#00f5ff,#00ff9d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.service-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:40px; }
.service-card { background:rgba(255,255,255,0.03); padding:40px; border-radius:20px; width:350px; border:1px solid rgba(0,245,255,0.2); transition:all 0.4s; }
.service-card:hover { transform:translateY(-20px); box-shadow:0 20px 50px rgba(0,245,255,0.3); border-color:#00f5ff; }
.service-card h3 { font-size:1.8rem; margin-bottom:15px; color:#00f5ff; }
.service-card p { margin-bottom:25px; opacity:0.9; }
.service-btn { display:inline-block; background:#00f5ff; color:#000; padding:12px 30px; border-radius:50px; text-decoration:none; font-weight:bold; transition:0.3s; }
.service-btn:hover { background:#00ccdd; transform:scale(1.05); }

/* Contact Page */
.contact-page { padding:140px 5% 100px; max-width:1000px; margin:0 auto; text-align:center; }
.contact-page h1 { font-size:3.5rem; margin-bottom:60px; background:linear-gradient(90deg,#00f5ff,#00ff9d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.contact-container { display:flex; flex-wrap:wrap; justify-content:center; gap:60px; margin-top:40px; }
.contact-info { background:rgba(255,255,255,0.03); padding:40px; border-radius:20px; border:1px solid rgba(0,245,255,0.3); min-width:320px; }
.contact-info p { font-size:1.3rem; margin:25px 0; display:flex; align-items:center; justify-content:center; gap:15px; }
.contact-info i { color:#00f5ff; font-size:1.5rem; }
.wa-big { display:inline-block; background:#25D366; color:white; padding:16px 40px; border-radius:50px; text-decoration:none; font-size:1.3rem; margin-top:30px; box-shadow:0 10px 30px rgba(37,211,102,0.4); }
.wa-big:hover { background:#128C7E; transform:translateY(-5px); }
.contact-form { background:rgba(255,255,255,0.03); padding:40px; border-radius:20px; border:1px solid rgba(0,245,255,0.3); min-width:400px; }
.contact-form input, .contact-form textarea { width:100%; padding:15px; margin:12px 0; background:rgba(255,255,255,0.05); border:1px solid #00f5ff; border-radius:10px; color:white; font-size:1.1rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:rgba(255,255,255,0.6); }
.contact-form button { background:#00f5ff; color:#000; padding:16px 50px; border:none; border-radius:50px; font-size:1.2rem; font-weight:bold; cursor:pointer; margin-top:20px; transition:0.3s; }
.contact-form button:hover { background:#00ccdd; transform:translateY(-5px); }

/* Resume Page */
.resume-full { padding:140px 5% 100px; text-align:center; background:#000; }
.resume-full h1 { font-size:4rem; background:linear-gradient(90deg,#00f5ff,#00ff9d); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:20px; }
.resume-actions { margin:40px 0; display:flex; gap:30px; justify-content:center; flex-wrap:wrap; }
.btn-view { background:transparent; color:#00f5ff; border:3px solid #00f5ff; padding:18px 50px; border-radius:50px; font-size:1.3rem; font-weight:bold; transition:all 0.4s; display:inline-flex; align-items:center; gap:12px; }
.btn-download { background:#00f5ff; color:#000; padding:18px 50px; border-radius:50px; font-size:1.3rem; font-weight:bold; text-decoration:none; transition:all 0.4s; display:inline-flex; align-items:center; gap:12px; }
.btn-view:hover { background:#00f5ff; color:#000; transform:translateY(-8px); }
.btn-download:hover { background:#00ccdd; transform:translateY(-8px); }
.pdf-box { width:100%; height:1000px; border:4px solid #00f5ff; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,245,255,0.3); background:white; }