:root{
--bg:#0a0a0a;
--panel:#141414;
--text:#f2f2f2;
--muted:#9b9b9b;
--line:rgba(255,255,255,.08);
--accent:#d63a43;
}

html{
scroll-behavior:smooth;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:Inter,system-ui,sans-serif;
background:#0a0a0a;
color:var(--text);
line-height:1.6;
}

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

.header,.hero,.links,.section,.footer{
width:min(1080px,calc(100% - 32px));
margin:0 auto;
}

.header{
margin-top:20px;
padding:1rem;
display:flex;
justify-content:space-between;
align-items:center;
border:1px solid var(--line);
border-radius:18px;
background:#101010;
position:sticky;
top:16px;
transition:background 0.3s ease, border-color 0.3s ease;
z-index:1000;
}

.header.scrolled{
background:#0a0a0a;
backdrop-filter:blur(10px);
border-color:rgba(255,255,255,.12);
box-shadow:0 4px 12px rgba(0,0,0,.5);
}

.brand{
display:flex;
align-items:center;
gap:.8rem;
font-weight:700;
}

.brand-home{
display:flex;
align-items:center;
gap:.8rem;
}

.location{
font-size:.75rem;
font-weight:500;
color:var(--muted);
}

.phone{
font-size:.75rem;
font-weight:500;
color:var(--muted);
}

.brand-box{
width:34px;
height:34px;
display:grid;
place-items:center;
background:var(--accent);
border-radius:10px;
}

.nav{
display:flex;
gap:1.2rem;
color:var(--muted);
align-items:center;
}

.cv-link{
padding:.6rem .9rem;
border:1px solid var(--line);
border-radius:12px;
color:var(--text);
}

.cv-link.primary{
background:var(--accent);
color:var(--text);
border:none;
font-weight:600;
}

.hero{
padding:5rem 0;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:2rem;
align-items:center;
}

.eyebrow{
color:var(--accent);
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.16em;
font-weight:700;
margin-bottom:1rem;
}

h1{
font-size:clamp(3rem,6vw,5.5rem);
line-height:.95;
letter-spacing:0;
margin:0 0 1.2rem;
}

h2{
font-size:clamp(2rem,4vw,3.5rem);
letter-spacing:0;
margin:0 0 1.5rem;
}

.intro{
color:var(--muted);
max-width:620px;
}

.actions{
display:flex;
gap:.8rem;
margin-top:2rem;
}

.btn{
padding:.85rem 1rem;
border-radius:12px;
font-weight:600;
}

.primary{
background:var(--accent);
}

.secondary{
border:1px solid var(--line);
background:#131313;
}

.hero-card,.card,.timeline article,.links a{
background:#131313;
border:1px solid var(--line);
}

.hero-card{
padding:1.5rem;
border-radius:28px;
}

.circle{
width:220px;
height:220px;
margin:0 auto;
border-radius:50%;
background:radial-gradient(circle,#d84b53 0 40%,#b62f37 41% 70%,transparent 71%);
display:grid;
place-items:center;
}

.initials{
width:170px;
height:170px;
border-radius:50%;
background:#0d0d0d;
border:3px solid rgba(255,255,255,.85);
display:grid;
place-items:center;
font-size:4rem;
font-weight:800;
color:var(--accent);
overflow:hidden;
}

.initials img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.meta{
display:grid;
gap:1rem;
margin-top:1.5rem;
}

.meta div{
padding-top:1rem;
border-top:1px solid var(--line);
}

.meta span{
display:block;
color:var(--muted);
font-size:.9rem;
}

.links{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1rem;
margin-bottom:2rem;
}

.links a{
padding:1rem;
border-radius:16px;
}

.links span{
display:block;
color:var(--muted);
font-size:.9rem;
}

.section{
padding:4rem 0;
}

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

.card{
padding:1.3rem;
border-radius:20px;
}

.card p,.timeline p{
color:var(--muted);
}

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

.skills article{
padding:1.3rem;
border:1px solid var(--line);
border-radius:20px;
background:#131313;
}

.skills h3{
margin-top:0;
}

.skills p{
color:var(--muted);
margin-bottom:0;
}

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

.timeline article{
padding:1.4rem;
border-radius:18px;
}

.timeline span{
color:var(--accent);
font-size:.82rem;
font-weight:700;
}

.footer{
padding:2rem 0 3rem;
display:flex;
justify-content:space-between;
color:var(--muted);
border-top:1px solid var(--line);
}

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

@keyframes fadeInLeft{
from{
opacity:0;
transform:translateX(-30px);
}
to{
opacity:1;
transform:translateX(0);
}
}

@keyframes fadeInRight{
from{
opacity:0;
transform:translateX(30px);
}
to{
opacity:1;
transform:translateX(0);
}
}

.fade-in{
animation:fadeInUp .8s ease-out forwards;
}

.fade-in-left{
animation:fadeInLeft .8s ease-out forwards;
}

.fade-in-right{
animation:fadeInRight .8s ease-out forwards;
}

.section,.links,.card,.timeline article,.hero{
opacity:0;
}

.section.fade-in,.links.fade-in,.card.fade-in,.timeline article.fade-in,.hero.fade-in{
opacity:1;
}

@media(max-width:900px){
.hero,.grid,.links,.skills{
grid-template-columns:1fr;
}

.header{
padding:.6rem;
flex-wrap:wrap;
}

.brand{
flex-wrap:wrap;
gap:.4rem;
width:100%;
font-size:.9rem;
}

.brand-home{
width:100%;
}

.brand > span:not(.brand-box),.brand > a:not(.brand-home){
display:block;
width:100%;
}

.location{
font-size:.65rem;
}

.phone{
font-size:.65rem;
display:block;
width:100%;
}

.nav{
display:flex;
flex-wrap:wrap;
gap:.4rem;
width:100%;
}

.nav a{
font-size:.8rem;
padding:.4rem .6rem;
}

.cv-link{
padding:.4rem .6rem;
font-size:.8rem;
}

.footer{
flex-wrap:wrap;
gap:.8rem;
justify-content:center;
align-items:center;
text-align:center;
}

.footer span,.footer a{
width:100%;
}
}