:root{
--navy:#07131f;
--navy2:#0a1929;
--blue:#1A4B84;
--green:#00A676;
--gold:#FFD966;
--text:#142437;
--muted:#657487;
--soft:#f4f6f8;
--border:rgba(15,45,80,.12)
}

html{scroll-behavior:smooth}

body{
margin:0!important;
padding:0!important
}

.ak-site,
.ak-site *{box-sizing:border-box}

.ak-site{
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:var(--text);
line-height:1.65
}

.ak-container{
width:min(1180px,calc(100% - 40px));
margin:auto
}

.ak-section{padding:90px 0}
.soft{background:var(--soft)}

.ak-hero{
min-height:92vh;
display:flex;
align-items:center;
text-align:center;
color:#fff;
background:
radial-gradient(circle at 10% 15%,rgba(255,217,102,.12),transparent 28%),
linear-gradient(135deg,#07131f,#0f2d50 55%,#096354);
padding:70px 20px
}

.ak-hero .ak-container{max-width:950px}

.ak-eyebrow,
.ak-label{
font-size:11px;
font-weight:800;
letter-spacing:1.5px
}

.ak-eyebrow{color:var(--gold)}
.ak-label{color:var(--blue)}

.ak-hero h1{
font-size:clamp(3.4rem,8vw,5.8rem);
letter-spacing:-3px;
line-height:.98;
margin:15px 0
}

.ak-hero h2{
font-size:clamp(1.2rem,3vw,1.6rem);
font-weight:600;
margin:0 0 20px
}

.ak-lead{
max-width:800px;
margin:auto;
font-size:17px;
color:rgba(255,255,255,.8)
}

.ak-status{
font-size:14px;
font-weight:650
}

.ak-meta{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px 30px;
margin:28px 0;
font-size:12px;
color:rgba(255,255,255,.62)
}

.ak-buttons{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap
}

.ak-buttons a{
padding:12px 22px;
border:1px solid rgba(255,255,255,.27);
border-radius:40px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:750
}

.ak-buttons .primary{
background:var(--gold);
border-color:var(--gold);
color:var(--navy)
}

.ak-title{
font-size:clamp(2.2rem,5vw,3.4rem);
line-height:1.08;
letter-spacing:-1.7px;
max-width:800px;
margin:10px 0 48px
}

.ak-about{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:70px
}

.ak-about p{
color:var(--muted);
font-size:15px
}

.ak-about .large{
font-size:19px;
font-weight:600;
color:var(--text)
}

.ak-stats{
border-top:1px solid var(--border)
}

.ak-stats div{
display:grid;
grid-template-columns:140px 1fr;
gap:18px;
padding:20px 0;
border-bottom:1px solid var(--border)
}

.ak-stats strong{
font-size:21px;
color:var(--blue)
}

.ak-stats span{
font-size:12px;
color:var(--muted)
}

.ak-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.ak-grid article{
padding:28px;
background:#fff;
border:1px solid var(--border);
border-radius:16px
}

.ak-grid h3{color:var(--navy2)}

.ak-grid p{
font-size:13px;
color:var(--muted)
}

.tags{
display:flex;
flex-wrap:wrap;
gap:6px
}

.tags span{
font-size:10px;
font-weight:700;
padding:5px 9px;
background:#f0f3f5;
border-radius:6px
}

.experience{
border-top:1px solid var(--border)
}

.experience article{
display:grid;
grid-template-columns:180px 1fr;
gap:40px;
padding:38px 0;
border-bottom:1px solid var(--border)
}

.date{
font-size:11px;
font-weight:800;
color:var(--green)
}

.experience h3{
font-size:23px;
margin:0
}

.experience h4{
color:var(--blue);
margin:3px 0
}

.experience p,
.experience li{
font-size:13px;
color:var(--muted)
}

.ak-projects{
padding:90px 0;
background:linear-gradient(135deg,#07131f,#0a1929);
color:white
}

.light{color:#fff}

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

.project-grid article{
min-height:270px;
display:flex;
flex-direction:column;
padding:27px;
border:1px solid rgba(255,255,255,.1);
border-radius:16px;
background:rgba(255,255,255,.035)
}

.project-grid small{
color:var(--gold);
font-size:9px;
font-weight:800
}

.project-grid h3{font-size:20px}

.project-grid p{
font-size:13px;
color:rgba(255,255,255,.65);
flex:1
}

.project-grid a{
color:white;
font-size:11px;
font-weight:750;
margin-right:14px
}

.education{
display:grid;
grid-template-columns:1.4fr .8fr .8fr;
gap:18px
}

.education article{
background:#fff;
padding:28px;
border:1px solid var(--border);
border-radius:16px
}

.education small{
color:var(--green);
font-weight:800
}

.education h3{font-size:18px}

.education p{
font-size:12px;
color:var(--muted)
}

.ak-contact{
padding:90px 0;
background:linear-gradient(135deg,#07131f,#12395f);
color:#fff
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px
}

.ak-contact h2{
font-size:clamp(2.2rem,5vw,3.5rem);
line-height:1.05
}

.ak-contact p{
color:rgba(255,255,255,.68)
}

.contact-list{
border-top:1px solid rgba(255,255,255,.15)
}

.contact-list a{
display:grid;
grid-template-columns:100px 1fr;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.15);
text-decoration:none
}

.contact-list span{
font-size:10px;
color:rgba(255,255,255,.45)
}

.contact-list strong{
font-size:13px;
color:#fff
}

@media(max-width:1000px){
.ak-grid,
.project-grid{
grid-template-columns:repeat(2,1fr)
}

.education{grid-template-columns:1fr}
}

@media(max-width:800px){
.ak-about,
.contact-grid{
grid-template-columns:1fr
}
}

@media(max-width:650px){

.ak-container{
width:calc(100% - 28px)
}

.ak-section,
.ak-projects,
.ak-contact{
padding:65px 0
}

.ak-hero{
min-height:100vh
}

.ak-hero h1{
font-size:2.9rem;
letter-spacing:-1.7px
}

.ak-grid,
.project-grid{
grid-template-columns:1fr
}

.experience article{
grid-template-columns:1fr;
gap:10px
}

.ak-buttons{
flex-direction:column
}

.ak-buttons a{width:100%}

.contact-list a{
grid-template-columns:1fr
}
}

/* PROFILE PHOTO */

.ak-profile-photo{
width:150px;
height:150px;
margin:0 auto 28px;
padding:5px;
border-radius:50%;
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.05);
box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.ak-profile-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center 20%;
border-radius:50%;
}

@media(max-width:650px){
.ak-profile-photo{
width:125px;
height:125px;
margin-bottom:22px;
}
}