:root{
--bg:#2B2D2D;
--panel:#1F2020;
--panel2:#242626;
--text:#E8E6DE;
--muted:#C5C1B8;
--green:#3B82F6;
--green2:#60A5FA;
--line:rgba(255,255,255,.08);
--shadow:0 18px 45px rgba(0,0,0,.22)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
background:#2B2D2D;
color:var(--text)
}

a{color:inherit}

.site-header{
height:74px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 7vw;
border-bottom:1px solid var(--line);
background:#1B1D1D;
position:sticky;
top:0;
z-index:20
}

.brand{
text-decoration:none;
font-size:1.35rem;
font-weight:800;
letter-spacing:-.04em
}

.brand span{color:var(--green2)}

.topnav{
display:flex;
align-items:center;
gap:1.7rem
}

.topnav a{
text-decoration:none;
color:var(--muted);
font-weight:700;
font-size:.92rem
}

.topnav a:hover{color:var(--text)}

.resume-link{
border:1px solid rgba(96,165,250,.45);
padding:.65rem .9rem;
border-radius:10px;
color:var(--green2)!important
}

.hero{
min-height:calc(100vh - 74px);
padding:5vw 7vw 4vw;
position:relative;
overflow:hidden
}

.hero::before{
content:"";
position:absolute;
width:420px;
height:420px;
background:radial-gradient(circle, rgba(96,165,250,.20), transparent 70%);
top:-120px;
right:-120px;
border-radius:50%;
animation:floatGlow 8s ease-in-out infinite;
z-index:0
}

.hero::after{
content:"";
position:absolute;
width:320px;
height:320px;
background:radial-gradient(circle, rgba(59,130,246,.12), transparent 70%);
bottom:40px;
left:-100px;
border-radius:50%;
animation:floatGlowTwo 10s ease-in-out infinite;
z-index:0
}

.hero-grid{
display:grid;
grid-template-columns:170px minmax(420px,620px) 1fr;
gap:4vw;
align-items:center;
position:relative;
z-index:1;
animation:fadeUp .9s ease forwards
}

.profile-card{
text-align:center;
animation:fadeUp 1s ease forwards
}

.profile-card img{
width:150px;
height:150px;
border-radius:50%;
border:2px solid rgba(96,165,250,.5);
transition:transform .3s ease, box-shadow .3s ease
}

.profile-card img:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:0 14px 35px rgba(0,0,0,.25)
}

.social-row{
display:flex;
flex-wrap:wrap;
gap:.6rem;
justify-content:center;
margin-top:1.4rem
}

.social-row a{
font-size:.78rem;
text-decoration:none;
background:#1F2020;
padding:.55rem .7rem;
border-radius:999px;
color:var(--muted);
border:1px solid var(--line);
transition:transform .25s ease, border-color .25s ease, color .25s ease
}

.social-row a:hover{
transform:translateY(-3px);
border-color:rgba(96,165,250,.45);
color:var(--text)
}

.eyebrow{
text-transform:uppercase;
letter-spacing:.18em;
color:var(--green2);
font-size:.78rem;
font-weight:900
}

.hero h1,
.page-hero h1{
font-size:clamp(3rem,5vw,4.8rem);
line-height:1;
margin:.6rem 0;
letter-spacing:-.06em
}

.hero h2{
font-size:clamp(1.25rem,2.2vw,2rem);
margin:.35rem 0 1.2rem;
color:var(--green2)
}

.lead{
font-size:1.15rem;
line-height:1.75;
color:var(--muted);
max-width:700px
}

.button-row{
display:flex;
gap:1rem;
flex-wrap:wrap;
margin-top:2rem
}

.btn{
display:inline-flex;
text-decoration:none;
border:1px solid var(--line);
padding:.9rem 1.3rem;
border-radius:12px;
font-weight:850;
background:#1F2020;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,.18);
border-color:rgba(96,165,250,.45)
}

.btn.primary{
background:var(--green);
color:#fff;
border:none
}

.tech-orb{display:none}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1rem;
margin-top:4rem;
position:relative;
z-index:1
}

.stats div,
.card,
.project-card,
.cert-card,
.contact-card,
.timeline article{
background:#1F2020;
border:1px solid var(--line);
border-radius:18px;
box-shadow:var(--shadow)
}

.stats div{
padding:1.4rem;
transition:transform .25s ease, border-color .25s ease
}

.stats div:hover{
transform:translateY(-4px);
border-color:rgba(96,165,250,.35)
}

.stats strong{
display:block;
font-size:1.15rem
}

.stats span{
display:block;
margin-top:.45rem;
color:var(--muted);
font-size:.9rem;
line-height:1.4
}

main{min-height:calc(100vh - 140px)}

.page-hero{
padding:4rem 7vw 2rem
}

.page-hero h1{max-width:900px}

.split,
.project-grid,
.education-grid,
.contact-grid,
.timeline,
.cert-section,
.resume-section{
margin:0 7vw 5vw
}

.split{
display:grid;
grid-template-columns:1.35fr .85fr;
gap:2rem
}

.split p,.resume-section p{
color:var(--muted);
line-height:1.8;
font-size:1.05rem
}

.card{padding:2rem}

.card h3,.card h2{margin-top:0}

.card li{
margin:.8rem 0;
color:var(--muted)
}

.timeline{
display:grid;
gap:1.2rem
}

.timeline article{
padding:1.8rem;
border-left:3px solid var(--green)
}

.timeline span{
color:var(--green2);
font-weight:800
}

.timeline h2{margin:.5rem 0 .1rem}

.timeline h3{
margin:0 0 1rem;
color:var(--muted)
}

.timeline p{
color:var(--muted);
line-height:1.7
}

.project-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.2rem
}

.project-card{padding:1.8rem}

.project-card .icon{
color:var(--green2);
font-size:1.8rem
}

.project-card p{
color:var(--muted);
line-height:1.7
}

.cert-section h2{
font-size:2rem;
margin:2.2rem 0 1rem;
border-bottom:1px solid var(--line);
padding-bottom:.8rem
}

.cert-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.2rem
}

.cert-card{
padding:1.3rem;
display:flex;
flex-direction:column;
min-height:320px
}

.cert-card img{
width:100%;
height:190px;
object-fit:contain;
background:#fff;
border-radius:14px;
padding:1rem
}

.cert-card h3{
font-size:1.25rem;
margin:1rem 0 .2rem
}

.cert-card p{
color:var(--muted);
line-height:1.45;
min-height:45px
}

.cert-card a{
margin-top:auto;
color:var(--green2);
text-decoration:none;
font-weight:850
}

.education-grid,.contact-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1.2rem
}

.contact-grid{
grid-template-columns:repeat(3,1fr)
}

.contact-card{
padding:1.8rem;
text-decoration:none
}

.contact-card strong{
display:block;
font-size:1.2rem
}

.contact-card span{
display:block;
margin-top:.5rem;
color:var(--muted)
}

.resume-section{max-width:920px}

.resume-section h2{margin-top:2rem}

footer{
border-top:1px solid var(--line);
padding:2rem 7vw;
color:var(--muted)
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(18px)
}
to{
opacity:1;
transform:translateY(0)
}
}

@keyframes floatGlow{
0%{
transform:translate(0,0) scale(1)
}
50%{
transform:translate(-25px,30px) scale(1.08)
}
100%{
transform:translate(0,0) scale(1)
}
}

@keyframes floatGlowTwo{
0%{
transform:translate(0,0) scale(1)
}
50%{
transform:translate(30px,-20px) scale(1.06)
}
100%{
transform:translate(0,0) scale(1)
}
}

@media(max-width:980px){

.site-header{
height:auto;
align-items:flex-start;
gap:1rem;
padding:1rem 5vw;
flex-direction:column
}

.topnav{
gap:.9rem;
flex-wrap:wrap
}

.hero,.page-hero{
padding:3rem 5vw
}

.hero-card{
grid-template-columns:1fr;
padding:2rem;
gap:2rem
}

.hero-photo{
height:430px;
max-width:340px
}

.tech-orb{
display:none
}

.stats,
.project-grid,
.cert-grid,
.contact-grid,
.education-grid,
.split{
grid-template-columns:1fr
}

.stats div{
border-right:none;
border-bottom:1px solid var(--line)
}

.stats div:last-child{
border-bottom:none
}

.hero h1,
.page-hero h1{
font-size:3.2rem
}

.profile-card{
text-align:left
}

.social-row{
justify-content:flex-start
}

}

@media print{
.site-header,footer,.button-row{display:none}
body{background:#fff;color:#111}
.page-hero,.resume-section{padding:0;margin:0}
.lead,.resume-section p{color:#111}
}