
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Segoe UI,sans-serif;scroll-behavior:smooth}
body{background:#060912;color:#fff;line-height:1.6;position:relative}
.bg-grid{position:fixed;inset:0;background-image:radial-gradient(rgba(0,245,212,.08) 1px,transparent 1px);background-size:28px 28px;z-index:-1;animation:gridmove 25s linear infinite}
@keyframes gridmove{from{transform:translateY(0)}to{transform:translateY(28px)}}
.navbar{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:20px 60px;background:rgba(6,9,18,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo{font-size:28px;font-weight:700;color:#00f5d4;text-shadow:0 0 8px rgba(0,245,212,.3)}
.logo span{color:#fff}
.navbar ul{display:flex;gap:24px;list-style:none;align-items:center}
.navbar a,#contactBtn{color:#fff;text-decoration:none;background:none;border:none;cursor:pointer;font-size:14px;transition:.3s}
.navbar a:hover,#contactBtn:hover{color:#00f5d4}
.section{padding:100px 80px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero{text-align:center}
.hero-terminal{max-width:720px;margin:0 auto 30px auto;background:rgba(8,16,24,.9);border:1px solid rgba(0,245,212,.15);border-radius:14px;padding:20px;color:#00f5d4;font-family:Consolas,monospace;text-align:left;box-shadow:0 0 20px rgba(0,245,212,.05)}
.hero-terminal p{margin:6px 0}
#typing{font-size:56px;color:#fff;margin-bottom:20px;min-height:70px}
.hero-sub{max-width:900px;margin:0 auto;font-size:20px;color:#cbd5e1}
.hero-icons i{font-size:70px;margin:30px 15px;transition:.3s}
.hero-icons i:hover{transform:translateY(-5px) scale(1.05)}
.resume-cta{margin-top:35px}
.resume-btn{display:inline-block;padding:14px 28px;background:rgba(0,245,212,.12);border:1px solid rgba(0,245,212,.35);border-radius:14px;color:#00f5d4;text-decoration:none;font-weight:600;transition:.3s}
.resume-btn:hover{transform:translateY(-3px);box-shadow:0 0 18px rgba(0,245,212,.15)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.kpi{background:rgba(15,20,30,.92);padding:25px;border:1px solid rgba(255,255,255,.05);border-radius:18px}
.kpi h2{font-size:40px;color:#00f5d4}
.kpi span{color:#94a3b8}
h2{font-size:42px;margin-bottom:40px;color:#00f5d4}
.timeline{display:grid;gap:25px}
.timeline-card,.skill-card,.award-card,.cert-card{background:rgba(15,20,30,.92);padding:28px;border-radius:18px;border:1px solid rgba(255,255,255,.05);transition:.35s}
.timeline-card:hover,.skill-card:hover,.award-card:hover,.cert-card:hover{transform:translateY(-8px);box-shadow:0 0 25px rgba(0,245,212,.08)}
.skills-grid,.award-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.skill-card,.award-card{text-align:center}
.skill-card i,.award-card i{font-size:48px;color:#00f5d4;margin-bottom:14px}
.cert-list{display:grid;gap:20px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);justify-content:center;align-items:center;z-index:9999}
.modal-box{background:#0b1220;padding:40px;border-radius:18px;min-width:360px;border:1px solid rgba(255,255,255,.08);text-align:center}
.modal-box a,.modal-box div{display:block;color:#fff;margin:16px 0;text-decoration:none}
.close{float:right;font-size:28px;cursor:pointer;color:#00f5d4}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}#typing{font-size:38px}.section{padding:80px 25px}.navbar{padding:20px 20px;flex-direction:column;gap:15px}.navbar ul{flex-wrap:wrap;justify-content:center}}
