*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
--bg:#f9f9f7;
--bg2:#f2f2ef;
--text:#0d0d0d;
--muted:#888;
--border:rgba(0,0,0,.09);
--border2:rgba(0,0,0,.15);
--nav-bg:rgba(249,249,247,.85);
--f:'DM Sans',sans-serif;
--ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
--bg:#0d0d0d;
--bg2:#141414;
--text:#f0f0ee;
--muted:#5a5a5a;
--border:rgba(255,255,255,.07);
--border2:rgba(255,255,255,.13);
--nav-bg:rgba(13,13,13,.85);
}

html{scroll-behavior:smooth;height:100%}

body{
background:var(--bg);
color:var(--text);
font-family:var(--f);
font-weight:300;
line-height:1.6;
-webkit-font-smoothing:antialiased;
transition:background .3s var(--ease), color .3s var(--ease);
overflow-x:hidden;
}

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

nav{
position:fixed;
top:0;left:0;right:0;
z-index:100;
background:var(--nav-bg);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav-inner{
max-width:1200px;
margin:0 auto;
padding:0 2.5rem;
height:60px;
display:flex;
align-items:center;
justify-content:space-between;
}
.nav-logo{
font-size:.92rem;
font-weight:500;
letter-spacing:-.01em;
}
.nav-right{
display:flex;
align-items:center;
gap:.25rem;
}
.nav-links{
display:flex;
gap:.25rem;
list-style:none;
margin-right:.75rem;
}
.nav-links a{
font-size:.8rem;
color:var(--muted);
padding:.4rem .75rem;
border-radius:6px;
transition:color .15s, background .15s;
letter-spacing:.01em;
}
.nav-links a:hover{color:var(--text);background:var(--border);}

.ctrl-btn{
width:34px;height:34px;
border:1px solid var(--border2);
border-radius:6px;
background:none;
cursor:pointer;
font-family:var(--f);
font-size:.72rem;
font-weight:500;
color:var(--muted);
display:flex;align-items:center;justify-content:center;
transition:all .15s;
}
.ctrl-btn:hover{color:var(--text);border-color:var(--text);}

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
max-width:1200px;
margin:0 auto;
padding:7rem 2.5rem 4rem;
position:relative;
}

.hero-available{
display:inline-flex;
align-items:center;
gap:.6rem;
font-size:.75rem;
color:var(--muted);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:3rem;
opacity:0;
transform:translateY(12px);
animation:fadeUp .6s var(--ease) .1s forwards;
}
.dot-live{
width:7px;height:7px;
border-radius:50%;
background:#22c55e;
position:relative;
}
.dot-live::after{
content:'';
position:absolute;
inset:-3px;
border-radius:50%;
border:1px solid #22c55e;
animation:ping 1.8s ease infinite;
}
@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}

.hero-title{
font-size:clamp(3.5rem,9vw,8.5rem);
font-weight:300;
letter-spacing:-.04em;
line-height:.95;
margin-bottom:2.5rem;
}
.hero-title .line{
display:block;
overflow:hidden;
}
.hero-title .line span{
display:block;
opacity:0;
transform:translateY(100%);
animation:slideUp .75s var(--ease) forwards;
}
.hero-title .l1 span{animation-delay:.2s}
.hero-title .l2 span{animation-delay:.32s}
.hero-title .l3 span{animation-delay:.44s}
.hero-title em{font-style:italic;color:var(--muted);}

@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.hero-bottom{
display:flex;
align-items:flex-end;
justify-content:space-between;
flex-wrap:wrap;
gap:2rem;
opacity:0;
transform:translateY(16px);
animation:fadeUp .7s var(--ease) .7s forwards;
}
.hero-desc{
font-size:1rem;
color:var(--muted);
line-height:1.85;
max-width:400px;
}
.hero-stats{
display:flex;
gap:3rem;
}
.stat-n{
font-size:2rem;
font-weight:300;
letter-spacing:-.04em;
line-height:1;
}
.stat-l{
font-size:.72rem;
color:var(--muted);
letter-spacing:.05em;
text-transform:uppercase;
margin-top:.3rem;
}

.divider{
height:1px;
background:var(--border);
max-width:1200px;
margin:0 auto;
}

.section{
max-width:1200px;
margin:0 auto;
padding:6rem 2.5rem;
}

.section-head{
display:flex;
align-items:baseline;
justify-content:space-between;
margin-bottom:4rem;
}
.section-label{
font-size:.72rem;
color:var(--muted);
letter-spacing:.1em;
text-transform:uppercase;
}
.section-num{
font-size:.72rem;
color:var(--border2);
letter-spacing:.06em;
}

.skills-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px;
background:var(--border);
border:1px solid var(--border);
}

.skill-card{
background:var(--bg);
padding:2.5rem;
transition:background .2s var(--ease);
position:relative;
overflow:hidden;
}
.skill-card:hover{background:var(--bg2);}

.skill-card-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:1.5rem;
}
.skill-card-name{
font-size:1.1rem;
font-weight:400;
letter-spacing:-.02em;
}
.skill-card-num{
font-size:.72rem;
color:var(--muted);
letter-spacing:.06em;
}
.skill-card-desc{
font-size:.85rem;
color:var(--muted);
line-height:1.85;
margin-bottom:1.75rem;
}
.skill-tags{
display:flex;
flex-wrap:wrap;
gap:.4rem;
}
.tag{
padding:.25rem .65rem;
border:1px solid var(--border2);
border-radius:3rem;
font-size:.72rem;
color:var(--muted);
letter-spacing:.02em;
transition:all .15s;
}
.skill-card:hover .tag{border-color:var(--border2);}

.about-grid{
display:grid;
grid-template-columns:1fr 1.8fr;
gap:6rem;
align-items:start;
}
.about-left{}
.about-role{
font-size:3rem;
font-weight:300;
letter-spacing:-.04em;
line-height:1.1;
margin-bottom:2rem;
}
.about-role em{font-style:italic;color:var(--muted);}
.about-since{
font-size:.78rem;
color:var(--muted);
letter-spacing:.06em;
text-transform:uppercase;
}
.about-text{
font-size:.95rem;
color:var(--muted);
line-height:2;
margin-bottom:2.5rem;
}
.about-text strong{color:var(--text);font-weight:400;}

.stack-row{
display:flex;
flex-wrap:wrap;
gap:.5rem;
}
.stack-chip{
padding:.3rem .8rem;
border:1px solid var(--border2);
border-radius:3rem;
font-size:.75rem;
color:var(--muted);
transition:all .2s;
cursor:default;
}
.stack-chip:hover{color:var(--text);border-color:var(--text);}

.contact-wrap{
min-height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
}
.contact-big{
font-size:clamp(2.5rem,6vw,5.5rem);
font-weight:300;
letter-spacing:-.04em;
line-height:1.05;
margin-bottom:2rem;
}
.contact-big em{font-style:italic;color:var(--muted);}
.contact-sub{
font-size:.9rem;
color:var(--muted);
line-height:1.85;
max-width:420px;
margin-bottom:3rem;
}
.contact-links{
display:flex;
gap:.75rem;
flex-wrap:wrap;
}
.c-link{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:.7rem 1.4rem;
border:1px solid var(--border2);
border-radius:6px;
font-size:.82rem;
color:var(--muted);
transition:all .2s var(--ease);
}
.c-link:hover{color:var(--text);border-color:var(--text);transform:translateY(-2px);}
.c-link .arr{font-size:.65rem;opacity:.5;transition:transform .2s;}
.c-link:hover .arr{transform:translate(2px,-2px);opacity:1;}

footer{
border-top:1px solid var(--border);
}
.footer-inner{
max-width:1200px;
margin:0 auto;
padding:1.75rem 2.5rem;
display:flex;
align-items:center;
justify-content:space-between;
}
.footer-copy{font-size:.75rem;color:var(--muted);}
.footer-top{
font-size:.75rem;
color:var(--muted);
transition:color .15s;
cursor:pointer;
}
.footer-top:hover{color:var(--text);}

.reveal{
opacity:0;
transform:translateY(28px);
transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

@media(max-width:768px){
.nav-inner{padding:0 1.25rem;}
.nav-links{display:none;}
.hero,.section{padding-left:1.25rem;padding-right:1.25rem;}
.skills-grid{grid-template-columns:1fr;}
.about-grid{grid-template-columns:1fr;gap:3rem;}
.hero-stats{gap:2rem;}
.footer-inner{padding:1.5rem 1.25rem;}
}