/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.6;color:#e5e7eb;background:#0f172a;scroll-behavior:smooth;}
a{color:#38bdf8;text-decoration:none;}
a:hover{text-decoration:underline;}

/* Layout */
.container{max-width:1000px;margin:auto;padding:2rem;}
main.container{padding-top:20px;}
.timeline-container{position:relative;padding-left:30px;border-left:2px solid #38bdf8;margin-left:10px;}

/* Header Visibility */
header{transition:opacity .3s ease,transform .3s ease;will-change:opacity, transform;}
header.hidden{opacity:0;transform:translateY(-100%);pointer-events:none;}

/* Hero */
#hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
.hero{background:#020617;position:sticky;top:0;width:100%;z-index:1000;display:flex;justify-content:center;align-items:center;padding:2rem 0;min-height:280px;overflow:hidden;transition:padding .3s,min-height .3s;}
.hero.collapsed{min-height:90px;padding:10px 0;}
.hero-left{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-top:20px;}
.hero-left h1{font-size:2.8rem;color:#fff;letter-spacing:2px;margin-bottom:.3rem;text-align:center;}
.subtitle,.degree,.location{color:#38bdf8;margin:.2rem 0;text-align:center;}
.hero-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem;}

/* Buttons */
.btn{padding:.5rem 1rem;border-radius:6px;border:1px solid #38bdf8;background:#020617;color:#38bdf8;transition:.3s;}
.btn:hover{background:#38bdf8;color:#020617;}

/* Cards Base */
.experience-card,.edu,.talent-card,#summary,.contact-card,#contact{background:#000;border-radius:16px;color:#fff;box-shadow:0 0 15px rgba(0,150,255,.6),0 0 30px rgba(0,150,255,.4);transition:.3s;position:relative;}
.experience-card:hover,.edu:hover,.talent-card:hover,#summary:hover,.contact-card:hover,#contact:hover{transform:scale(1.01);}

/* Summary */
#summary{padding:20px;margin-top:15px;}

/* Timeline Dots */
.experience-card::before,.edu::before,.talent-card::before{content:"";position:absolute;left:-12px;top:10px;width:12px;height:12px;background:#38bdf8;border-radius:50%;border:2px solid #020617;}

/* Talent */
#talent .talent-card{padding:25px;margin-bottom:30px;}
.talent-card h3{font-size:22px;margin-bottom:8px;}
.talent-card ul{margin-left:20px;padding-left:16px;}
.talent-card li{margin-bottom:4px;}

/* Experience / Education */
.business-name,.edu h3{font-size:22px;font-weight:bold;margin-bottom:12px;}
.job-title{font-weight:bold;font-style:italic;margin-bottom:.5rem;}
.edu .degree-year{font-weight:bold;font-style:italic;display:block;margin-bottom:4px;}
.experience-card, .edu{padding:25px;margin-bottom:30px;}
.experience-card ul,.edu .degree-detail{margin-left:20px;padding-left:16px;}
.experience-card li,.edu li{margin-bottom:4px;}

/* Pills */
.pill-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
.pill-grid span{background:#000;border:1px solid #1e293b;padding:.4rem .7rem;border-radius:20px;color:#fff;box-shadow:0 0 10px rgba(0,150,255,.5),0 0 20px rgba(0,150,255,.3);transition:.3s;}
.pill-grid span:hover{background:#38bdf8;color:#020617;transform:scale(1.05);}

/* Contact */
#contact{padding:30px 25px;max-width:600px;margin:0 auto 3rem;}
#contact-form{display:flex;flex-direction:column;}
#contact-form label{margin-top:12px;margin-bottom:4px;}
#contact-form input,#contact-form textarea{padding:12px 14px;border-radius:8px;border:none;background:#111;color:#fff;}
#contact-form input:focus,#contact-form textarea:focus{outline:none;box-shadow:0 0 8px #38bbf8;}
#contact-form button{margin-top:20px;align-self:flex-start;}
.contact-card,#contact{padding:25px;margin-bottom:30px;max-width:100%;}


.cert {
background:#000;
border-radius:16px;
padding:25px;
margin-bottom:30px;
color:#fff;
box-shadow:0 0 15px rgba(0,150,255,.6),0 0 30px rgba(0,150,255,.4);
transition:transform .3s ease;
position:relative;
padding-left:20px;
}

.cert::before{
content:"";
position:absolute;
left:-12px;
top:10px;
width:12px;
height:12px;
background:#38bdf8;
border-radius:50%;
border:2px solid #020617;
z-index:1;
}

.cert:hover{transform:scale(1.01);}

.cert h3{font-size:22px;font-weight:bold;margin-bottom:6px;}

.cert .cert-line{
font-style:italic;
margin-bottom:4px;
display:block;
}




/* Footer */
footer{margin-top:4rem;padding:2rem;text-align:center;border-top:1px solid #1e293b;color:#94a3b8;background:#000;}

/* Sections */
section{margin-top:3rem;opacity:0;transform:translateY(30px);transition:.6s;}
section.visible{opacity:1;transform:none;}
h2{font-size:1.8rem;margin-bottom:1.5rem;color:#38bdf8;border-bottom:2px solid #1e293b;padding-bottom:.3rem;}

/* Responsive */
@media(max-width:768px){
main.container{padding-top:25px;}
.hero-left h1{font-size:22px;}
.subtitle,.degree,.location{font-size:13px;}
.btn{padding:6px 10px;font-size:13px;}
}