:root{
--bg:#0c1424;
--panel:#111315;
--panel2:#171A1D;
--text:#F2F2EE;
--muted:#C8C5BD;
--green:#2563EB;
--green2:#60A5FA;
--line:rgba(255,255,255,.10);
--shadow:0 18px 45px rgba(0,0,0,.30)
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

html,
body{
min-height:100%;
background:#0c1424;
color-scheme:dark;
}

body{
margin:0;
font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
background:
radial-gradient(circle at 75% 22%, rgba(59,130,246,.16), transparent 34%),
radial-gradient(circle at 20% 90%, rgba(99,102,241,.10), transparent 38%),
#0c1424;
color:var(--text)
}

a{
color:inherit;
text-decoration:none
}

a:hover,
a:focus,
a:visited{
text-decoration:none
}

/* HEADER */

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

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

.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{
display:inline-flex;
align-items:center;
gap:.55rem;
border:1px solid rgba(96,165,250,.55);
padding:.65rem .9rem;
border-radius:10px;
color:var(--text)!important
}

.resume-link i{
    margin-right:.5rem;
}

.nav-resume-icon{
color:var(--green2);
font-size:1rem
}

/* HOME PAGE HERO */

.hero{
min-height:calc(100vh - 74px);
padding:2.5rem 7vw 3rem;
background:
radial-gradient(circle at 73% 34%, rgba(96,165,250,.20), transparent 31%),
radial-gradient(circle at 78% 56%, rgba(15,23,42,.95), transparent 36%),
#080A0D;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow:hidden
}

.hero-card{
width:100%;
max-width:1320px;
display:grid;
grid-template-columns:1fr 540px;
align-items:center;
gap:5rem;
background:transparent;
border:none;
box-shadow:none;
padding:0
}

.hero-text{
max-width:660px
}

.hero-tag{
display:inline-block;
color:var(--green2);
border:1px solid rgba(96,165,250,.65);
border-radius:10px;
padding:.75rem 1.05rem;
font-size:.78rem;
font-weight:900;
letter-spacing:.22em;
text-transform:uppercase;
margin:0 0 2rem
}

.hero h1{
font-size:clamp(4.7rem,7vw,7.2rem);
line-height:.95;
margin:0;
letter-spacing:-.07em
}

.hero h1 span{
color:var(--green2)
}

.hero-line{
width:72px;
height:3px;
background:var(--green2);
margin:2rem 0 1.7rem
}

.lead{
font-size:1.35rem;
line-height:1.62;
color:var(--muted);
max-width:650px;
margin:0
}

.hero-photo-wrap{
position:relative;
display:flex;
justify-content:center;
align-items:flex-end;
min-height:560px
}

.hero-photo-wrap::before{
content:"";
position:absolute;
width:760px;
height:620px;
border-radius:28px;

background:
radial-gradient(circle at 50% 45%,
rgba(37,99,235,.32) 0%,
rgba(37,99,235,.18) 34%,
rgba(37,99,235,.08) 58%,
rgba(37,99,235,0) 78%
);

filter:blur(38px);

top:50%;
left:50%;
transform:translate(-50%,-50%);

z-index:0;
pointer-events:none;
}

.hero-photo-wrap::after{
display:none;
}

.hero-photo{
position:relative;
z-index:1;
width:100%;
max-width:620px;
height:auto;
object-fit:contain;
object-position:center bottom;
filter:drop-shadow(0 25px 80px rgba(0,0,0,.55));
}

.button-row{
display:flex;
gap:1.4rem;
flex-wrap:wrap;
margin-top:2.4rem
}

.btn,
.btn:hover,
.btn:focus,
.btn:visited{
text-decoration:none!important
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.85rem;
min-width:220px;
border:1px solid rgba(96,165,250,.65);
padding:1rem 1.6rem;
border-radius:8px;
font-weight:850;
font-size:1rem;
background:rgba(17,19,21,.85);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease
}

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

.btn.primary{
background:linear-gradient(135deg, #2f8cff, #2563eb);
color:#fff;
border-color:#2f8cff
}

.btn-icon{
font-size:1.1rem;
line-height:1
}

.linkedin-btn{
color:#fff
}

.linkedin-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
background:#2f8cff;
color:#06111f;
border-radius:3px;
font-weight:900;
font-family:Arial,sans-serif;
font-size:.95rem;
line-height:1
}

.stats{
width:100%;
max-width:1300px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin:3rem auto 0;
background:rgba(17,19,21,.70);
border:1px solid rgba(255,255,255,.16);
border-radius:14px;
box-shadow:var(--shadow);
backdrop-filter:blur(14px)
}

.stats div{
padding:2rem 1.7rem;
text-align:center;
background:transparent;
border:none;
border-right:1px solid rgba(255,255,255,.16);
border-radius:0;
box-shadow:none
}

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

.stat-icon{
display:block;
font-size:2.25rem;
color:var(--green2);
margin-bottom:1rem;
line-height:1;
font-weight:900
}

.stats strong{
display:block;
font-size:2.45rem;
line-height:1;
color:#fff
}

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

.hero-lower-text{
text-align:center;
max-width:780px;
margin:2.1rem auto 0
}

.hero-kicker{
color:var(--green2);
text-transform:uppercase;
letter-spacing:.28em;
font-size:.82rem;
font-weight:900;
margin:0 0 .9rem
}

.hero-lower-text h2{
font-size:2rem;
line-height:1.2;
margin:0;
color:#fff;
letter-spacing:-.03em
}

.lower-line{
width:70px;
height:3px;
background:var(--green2);
margin:.85rem auto 1rem
}

.hero-lower-text p{
color:var(--muted);
font-size:1.08rem;
line-height:1.6;
margin:0
}

/* GENERAL PAGE LAYOUT */

main{
min-height:calc(100vh - 140px);
background:
radial-gradient(circle at 85% 15%, rgba(59,130,246,.10), transparent 32%),
#0c1424;
}

body:not(:has(.hero)) main{
background:
radial-gradient(circle at 88% 12%, rgba(59,130,246,.10), transparent 34%),
radial-gradient(circle at 10% 90%, rgba(99,102,241,.07), transparent 38%),
#0c1424;
}

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

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

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

.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
}

/* CARDS AND BOXES */

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

.card{
padding:2rem
}

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

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

/* EXPERIENCE */

.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
}

/* PROJECTS */

.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
}

/* CERTIFICATIONS */

.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:transparent;
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 AND CONTACT */

.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{
position:relative;
padding:2rem;
padding-right:120px;
}

.contact-card i{
position:absolute;
right:35px;
top:50%;
transform:translateY(-50%);

font-size:3.5rem;

color:#4f7cff;
opacity:.9;

filter:drop-shadow(0 0 12px rgba(79,124,255,.45));

transition:all .3s ease;
}

.contact-card:hover i{
transform:translateY(-50%) scale(1.15);
color:#6b8dff;
filter:drop-shadow(0 0 18px rgba(79,124,255,.75));
}

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

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

.education-card{
position:relative;
overflow:hidden;
background:var(--panel);
border:1px solid var(--line);
border-radius:18px;
box-shadow:var(--shadow);
padding:2rem;
min-height:190px;
}

.education-content{
position:relative;
z-index:2;
max-width:70%;
}

.school-logo{
position:absolute;
right:35px;
top:50%;
transform:translateY(-50%);

width:95px;
height:95px;
object-fit:contain;

filter:
grayscale(20%)
drop-shadow(0 0 10px rgba(59,130,246,.10));

transition:
opacity .3s ease,
transform .3s ease,
filter .3s ease;
}

.education-card:hover .school-logo{
opacity:.95;
transform:translateY(-50%) scale(1.08);

filter:
grayscale(0%)
drop-shadow(0 0 18px rgba(59,130,246,.45));
}

/* RESUME */

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

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

/* RESUME CARDS */

.resume-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(350px,1fr));
    gap:40px;
}

.resume-card{
    background:rgba(8,12,24,.65);
    border:1px solid rgba(120,130,255,.25);
    border-radius:24px;
    padding:30px;
    backdrop-filter:blur(12px);
    transition:.3s ease;
}

.resume-card:hover{
    transform:translateY(-5px);
    border-color:#6d7cff;
    box-shadow:0 10px 30px rgba(109,124,255,.15);
}

.card-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:rgba(109,124,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    font-size:28px;
    color:#ffffff;
}

.resume-card h3{
    font-size:2rem;
    margin-bottom:18px;
    color:#fff;
}

.resume-card p{
    color:#d4d8e6;
    line-height:1.8;
    font-size:1.05rem;
}

@media (max-width: 992px){
    .resume-cards{
        grid-template-columns:1fr;
    }
}

/* FOOTER */

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

/* MOBILE */

@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:0;
gap:2rem
}

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

.hero-photo-wrap{
justify-content:flex-start;
min-height:auto
}

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

.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-lower-text{
margin-top:2rem
}

}

/* PRINT */

@media print{
.site-header,
footer,
.button-row{
display:none
}

body{
background:
radial-gradient(circle at top right,
rgba(59,130,246,.15),
transparent 30%),

#0f172a;

color:#fff;
}

.page-hero,
.resume-section{
padding:0;
margin:0
}

.lead,
.resume-section p{
color:#111
}
}

/* SITE-WIDE DARK BLUE/PURPLE BACKGROUND FIX */
html,
body,
main{
background-color:#0c1424;
}

.page-hero,
.split,
.project-grid,
.education-grid,
.contact-grid,
.timeline,
.cert-section,
.resume-section{
background:transparent;
}

.card,
.project-card,
.cert-card,
.contact-card,
.education-card,
.timeline article{
background:#111315;
color:#F2F2EE;
}

.page-hero h1,
.timeline h2,
.timeline h3,
.card h2,
.card h3,
.project-card h3,
.cert-card h3,
.education-card h3,
.contact-card strong{
color:#F2F2EE;
}

.page-hero .lead,
.timeline p,
.card p,
.project-card p,
.cert-card p,
.education-card p,
.contact-card span{
color:#C8C5BD;
}

@keyframes pulseResume {
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }
}

.resume-link{
    animation:pulseResume 2.5s ease-in-out infinite;
}