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

html,body{
height:100%;
font-family:'Inter',Arial,sans-serif;
background:#07111f;
color:#f5f7f8;
}

body{
overflow:hidden;
}

.video-bg{
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.overlay{
position:fixed;
inset:0;
z-index:1;
background:
linear-gradient(
90deg,
rgba(7,17,31,0.93) 0%,
rgba(7,17,31,0.80) 44%,
rgba(7,17,31,0.52) 100%
),
radial-gradient(
circle at 78% 32%,
rgba(17,54,48,0.16),
transparent 34%
);
}

.container{
position:relative;
z-index:2;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:64px;
padding:7vw;
}

.content{
max-width:900px;
}

.meta{
font-size:12px;
font-weight:500;
letter-spacing:0.18em;
text-transform:uppercase;
color:#b8c0c8;
margin-bottom:26px;
}

h1{
font-size:clamp(84px,10vw,148px);
line-height:0.88;
font-weight:700;
letter-spacing:-0.065em;
margin-bottom:30px;
color:#f5f7f8;
}

.lead{
font-size:clamp(26px,3vw,42px);
line-height:1.14;
font-weight:600;
letter-spacing:-0.03em;
max-width:850px;
margin-bottom:24px;
color:#ffffff;
}

.body{
font-size:18px;
line-height:1.8;
max-width:840px;
color:#d7dde1;
}

.buttons{
margin-top:40px;
}

.linkedin-btn{
display:inline-flex;
align-items:center;
gap:14px;
padding:10px;
border-radius:999px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.14);
text-decoration:none;
color:#ffffff;
transition:all .18s ease;
}

.linkedin-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.12);
}

.linkedin-btn img{
width:34px;
height:34px;
border-radius:8px;
}



.contact{
margin-top:38px;
font-size:15px;
line-height:1.8;
color:#c8d0d4;
}

.contact a{
color:#ffffff;
text-decoration:none;
}

.portrait-wrap{
flex:0 0 auto;
}

.portrait{
width:122px;
height:122px;
object-fit:cover;
border-radius:50%;
border:1px solid rgba(255,255,255,0.24);
filter:grayscale(100%);
opacity:0.94;
box-shadow:
0 30px 80px rgba(0,0,0,0.58),
0 0 0 12px rgba(255,255,255,0.03);
}

@media(max-width:900px){

body{
overflow:auto;
}

.container{
min-height:100%;
height:auto;
flex-direction:column;
align-items:flex-start;
justify-content:center;
padding:42px 28px;
}

.portrait-wrap{
order:-1;
}

.portrait{
width:96px;
height:96px;
}

.body{
font-size:16px;
}

.contact{
font-size:14px;
}

}


.contact-actions{
margin-top:28px;
}

.contact-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 24px;
border-radius:999px;
font-size:13px;
font-weight:600;
text-decoration:none;
background:transparent;
border:1px solid rgba(255,255,255,0.20);
color:#dfe5e8;
transition:all .18s ease;
backdrop-filter:blur(8px);
}

.contact-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.08);
color:#ffffff;
}


.social-row{
display:flex;
align-items:center;
gap:24px;
margin-top:42px;
}

.linkedin-logo{
display:inline-flex;
align-items:center;
justify-content:center;
opacity:0.92;
transition:opacity .18s ease, transform .18s ease;
}

.linkedin-logo:hover{
opacity:1;
transform:translateY(-1px);
}

.linkedin-logo img{
width:36px;
height:36px;
border-radius:8px;
}

.contact-link{
font-size:15px;
font-weight:500;
letter-spacing:-0.01em;
color:#dce3e6;
text-decoration:none;
transition:color .18s ease, opacity .18s ease;
opacity:0.9;
}

.contact-link:hover{
color:#ffffff;
opacity:1;
}