*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
font-family:'Inter',sans-serif;
background:
radial-gradient(900px 600px at 20% 0%, rgba(30,144,255,0.14) 0%, rgba(10,12,18,0) 55%),
radial-gradient(800px 520px at 90% 10%, rgba(99,102,241,0.12) 0%, rgba(10,12,18,0) 60%),
linear-gradient(180deg, #070a14 0%, #06081a 45%, #050716 100%);
color:#fff;
line-height:1.6;
min-height:100vh;
}

:root{
--accent:#1e90ff;
--bg-0:#050716;
--bg-1:#070a14;
--surface:rgba(255,255,255,0.03);
--surface-2:rgba(255,255,255,0.04);
--stroke:rgba(255,255,255,0.08);
}

/* HEADER */

header{
position:fixed;
width:100%;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(6,8,22,0.72);
backdrop-filter:blur(16px);
z-index:1000;
transition:0.3s;
}

.logo{
display:inline-flex;
align-items:center;
text-decoration:none;
line-height:1;
}

.logo img{
display:block;
height:34px;
width:auto;
}

nav{
display:flex;
align-items:center;
}

nav a{
margin-left:30px;
text-decoration:none;
color:rgba(255,255,255,0.5);
font-size:14px;
transition:0.3s;
}

nav a:hover{color:#fff}

.menu-toggle{
display:none;
cursor:pointer;
width:44px;
height:44px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:transparent;
color:#fff;
padding:0;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
transition:transform 0.2s ease, border-color 0.25s ease;
position:relative;
isolation:isolate;
}

.menu-toggle:hover{
border-color:rgba(255,255,255,0.12);
transform:translateY(-1px);
}

.menu-toggle:active{
transform:translateY(0) scale(0.98);
}

.menu-toggle:focus-visible{
outline:none;
box-shadow:none;
}

.menu-toggle__bar{
display:block;
width:18px;
height:2px;
background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.65));
border-radius:999px;
transition:transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.18s ease, width 0.32s cubic-bezier(0.22,1,0.36,1);
will-change:transform, opacity, width;
}

.menu-toggle__bar:nth-child(1){width:20px}
.menu-toggle__bar:nth-child(2){width:16px}
.menu-toggle__bar:nth-child(3){width:12px}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1){
transform:translateY(7px) rotate(45deg);
width:20px;
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(2){
opacity:0;
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
width:20px;
}

.nav-overlay{
position:fixed;
inset:0;
background:
radial-gradient(120% 120% at 20% 10%, rgba(2,6,20,0.50) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.74) 100%);
z-index:999;
opacity:0;
transition:opacity 0.25s ease;
}

.nav-overlay.is-active{
opacity:1;
}

/* SECTIONS */

section{
padding:80px 8%;
}

.section-title{
font-size:36px;
margin-bottom:40px;
}

/* HERO */

.hero{
min-height:auto;
padding:130px 6% 70px;
background:transparent;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.hero-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:60px;
flex:1;
}

.hero-left{
flex:1;
}

.hero-left h1{
font-family:'DM Serif Display',serif;
font-size:clamp(48px,7vw,96px);
font-weight:400;
line-height:1.05;
letter-spacing:-1px;
margin-bottom:0;
color:#fff;
}

.hero-left h1 em{
font-style:italic;
color:rgba(255,255,255,0.35);
}

.hero-right{
max-width:380px;
padding-top:20px;
}

.hero-right p{
color:rgba(255,255,255,0.55);
font-size:15px;
line-height:1.75;
margin-bottom:28px;
}

.btn-outline{
display:inline-flex;
align-items:center;
gap:8px;
padding:14px 30px;
border-radius:30px;
border:1px solid rgba(255,255,255,0.2);
color:#fff;
text-decoration:none;
font-size:14px;
font-weight:500;
transition:0.3s;
}

.btn-outline:hover{
background:rgba(255,255,255,0.08);
border-color:rgba(255,255,255,0.4);
transform:translateY(-2px);
}

.hero-bottom{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-top:60px;
}

.hero-socials{
display:flex;
gap:12px;
}

.hero-socials a{
width:44px;height:44px;
border-radius:50%;
background:rgba(255,255,255,0.08);
display:flex;
align-items:center;
justify-content:center;
color:rgba(255,255,255,0.7);
text-decoration:none;
font-size:16px;
transition:0.3s;
}

.hero-socials a:hover{
background:rgba(255,255,255,0.18);
color:#fff;
transform:translateY(-3px);
}

.hero-stats{
display:flex;
gap:40px;
margin-top:34px;
flex-wrap:wrap;
}

.hero-stat .stat-num{
font-size:clamp(40px,5vw,72px);
font-weight:800;
line-height:1;
margin-bottom:8px;
}

.hero-stat .stat-desc{
font-size:11px;
font-weight:600;
letter-spacing:1.5px;
text-transform:uppercase;
color:rgba(255,255,255,0.4);
max-width:180px;
line-height:1.4;
}

.btn{
padding:12px 28px;
border-radius:30px;
background:var(--accent);
color:#fff;
text-decoration:none;
font-weight:600;
transition:0.3s;
display:inline-block;
}

.btn:hover{
transform:translateY(-4px);
}

/* ABOUT */

#about{
padding:80px 6%;
}

.about-inner{
display:flex;
align-items:center;
gap:60px;
background:rgba(255,255,255,0.025);
border:1px solid rgba(255,255,255,0.07);
border-radius:24px;
padding:52px 56px;
width:100%;
backdrop-filter:blur(8px);
}

.about-statement{
flex:1;
min-width:0;
}

.about-statement p{
font-size:clamp(20px, 2.6vw, 32px);
font-weight:700;
line-height:1.45;
letter-spacing:-0.3px;
color:rgba(255,255,255,0.4);
}

.about-statement p strong{
color:rgba(255,255,255,0.95);
font-weight:800;
}

.tech-col{
display:flex;
flex-direction:column;
gap:16px;
}

.tech-col-row{
display:flex;
gap:16px;
}

.tech-circle{
width:90px;height:90px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.08);
background:rgba(255,255,255,0.03);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
cursor:default;
backdrop-filter:blur(6px);
}

.tech-circle i{
font-size:28px;
color:rgba(255,255,255,0.35);
transition:0.4s;
}

.tech-circle span{
font-size:9px;
font-weight:700;
letter-spacing:0.5px;
text-transform:uppercase;
color:rgba(255,255,255,0.25);
transition:0.4s;
}

.tech-circle:hover{
border-color:rgba(255,255,255,0.2);
background:rgba(255,255,255,0.06);
transform:translateY(-5px) scale(1.05);
box-shadow:0 14px 40px rgba(0,0,0,0.4);
}

.tech-circle:hover i{
color:#fff;
}

.tech-circle:hover span{
color:rgba(255,255,255,0.8);
}

/* PROJECTS */

.projects-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px 60px;
}

.project-item{
border-top:1px solid rgba(255,255,255,0.06);
padding-top:25px;
}

.project-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.project-text h3{
font-size:18px;
font-weight:600;
margin-bottom:6px;
}

.project-text span{
font-size:11px;
color:rgba(255,255,255,0.35);
letter-spacing:1px;
text-transform:uppercase;
}

.arrow-btn{
width:72px;
height:40px;
border-radius:40px;
border:1.5px solid rgba(255,255,255,0.15);
background:transparent;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
text-decoration:none;
color:rgba(255,255,255,0.6);
font-size:15px;
}

.arrow-btn i{
transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}

.arrow-btn:hover{
background:rgba(255,255,255,0.06);
border-color:rgba(255,255,255,0.3);
color:#fff;
}

.arrow-btn:hover i{
transform:translateX(3px);
}

.project-stack{
display:flex;
gap:10px;
margin-top:14px;
flex-wrap:wrap;
}

.project-stack img{
width:28px;
height:28px;
object-fit:contain;
filter:grayscale(1) brightness(0.7);
transition:all 0.3s ease;
}

.project-stack img:hover{
filter:grayscale(0) brightness(1);
transform:scale(1.15);
}

.project-image{
border-radius:12px;
overflow:hidden;
background:rgba(255,255,255,0.02);
display:flex;
align-items:center;
justify-content:center;
padding:6px;
max-height:260px;
}

.project-image img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
transition:0.5s;
}

.project-image a{
display:block;
width:100%;
}

.project-image:hover img{
transform:scale(1.05);
}

/* SKILLS */

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.skill-box{
background:rgba(255,255,255,0.025);
border:1px solid rgba(255,255,255,0.07);
padding:30px;
border-radius:16px;
text-align:center;
transition:0.3s;
backdrop-filter:blur(6px);
}

.skill-box:hover{
background:rgba(255,255,255,0.06);
transform:translateY(-6px);
}

.skill-box i{
font-size:30px;
margin-bottom:20px;
color:var(--accent);
}

/* CONTACT */

.contact-box{
background:rgba(255,255,255,0.025);
border:1px solid rgba(255,255,255,0.07);
padding:60px;
border-radius:20px;
text-align:center;
backdrop-filter:blur(8px);
}

.contact-box .section-title{
margin-bottom:20px;
}

.contact-links{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin-top:40px;
}

.contact-link{
display:flex;
align-items:center;
gap:12px;
background:rgba(255,255,255,0.035);
border:1px solid rgba(255,255,255,0.09);
padding:16px 28px;
border-radius:14px;
text-decoration:none;
color:rgba(255,255,255,0.7);
font-size:14px;
transition:0.3s;
}

.contact-link:hover{
background:rgba(30,144,255,0.1);
border-color:var(--accent);
color:#fff;
transform:translateY(-4px);
}

.contact-link i{
font-size:20px;
color:var(--accent);
width:24px;
text-align:center;
}

.contact-socials{
display:flex;
justify-content:center;
gap:16px;
margin-top:36px;
}

.social-icon{
width:50px;
height:50px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.08);
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:rgba(255,255,255,0.5);
font-size:20px;
transition:0.3s;
}

.social-icon:hover{
background:var(--accent);
border-color:var(--accent);
color:#fff;
transform:translateY(-4px);
}

/* FOOTER */

footer{
text-align:center;
padding:40px;
color:rgba(255,255,255,0.2);
border-top:1px solid rgba(255,255,255,0.04);
}

/* RESPONSIVE */

@media(max-width:1024px){
.projects-grid{
grid-template-columns:1fr;
gap:60px;
}
}

@media(max-width:900px){
.about-inner{
flex-direction:column;
padding:40px 28px;
gap:40px;
}
.about-statement p{
text-align:center;
}
.tech-col{
align-items:center;
}
}

@media(max-width:768px){
section{padding:70px 6%}
.hero-left h1{font-size:clamp(36px,10vw,48px)}
.hero-top{
flex-direction:column;
gap:30px;
}
.hero-right{
max-width:100%;
}
.hero-bottom{
flex-direction:column;
gap:30px;
align-items:flex-start;
}
.hero-stats{
gap:40px;
}
nav{
position:fixed;
top:0;
right:-100%;
height:100vh;
width:min(320px, 86vw);
background:rgba(5,8,24,0.92);
backdrop-filter:blur(18px);
flex-direction:column;
padding:86px 22px 28px;
transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
transform:translateX(100%);
border-left:1px solid rgba(255,255,255,0.08);
box-shadow:-24px 0 80px rgba(0,0,0,0.55);
z-index:1001;
}
nav.active{
right:0;
transform:translateX(0);
}
nav a{
margin:0;
padding:14px 14px;
border-radius:14px;
font-size:15px;
font-weight:600;
letter-spacing:0.2px;
color:rgba(255,255,255,0.72);
transition:0.2s;
}
nav a:hover{
background:rgba(255,255,255,0.06);
color:#fff;
}
nav a:active{
transform:scale(0.99);
}
.menu-toggle{display:flex}

.nav-close{
position:absolute;
top:20px;
right:18px;
width:40px;
height:40px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.04);
padding:0;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-close:hover{
border-color:rgba(255,255,255,0.22);
background:rgba(255,255,255,0.08);
box-shadow:0 10px 30px rgba(0,0,0,0.35), 0 0 0 4px rgba(30,144,255,0.08);
transform:translateY(-1px);
}

.nav-close:active{
transform:translateY(0) scale(0.98);
}

.nav-close:focus-visible{
outline:none;
box-shadow:0 10px 30px rgba(0,0,0,0.35), 0 0 0 4px rgba(30,144,255,0.22);
}

.nav-close__bar{
position:absolute;
width:18px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.65));
}

.nav-close__bar:nth-child(1){transform:rotate(45deg)}
.nav-close__bar:nth-child(2){transform:rotate(-45deg)}
}