style>
:root{
--accent: #0b79f7;
--accent-dark:#0664c2;
--muted:#6b7280;
--bg:#f6f8fb;
--card:#ffffff;
--radius:16px;
--maxw:1100px;
font-family: Inter, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--bg);
color:#0f1724;
line-height:1.5;
-webkit-font-smoothing:antialiased;
padding:24px;
}
.container{
max-width:var(--maxw);
margin:0 auto;
}
/* Header */
header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}
.logo{
display:flex;
align-items:center;
gap:12px;
font-weight:800;
font-size:26px;
letter-spacing:-0.5px;
color:#0f1724;
}
.logo::before{
content:"";
width:36px;
height:36px;
border-radius:50%;
background:linear-gradient(135deg,#3aa0ff,#0b79f7);
box-shadow:0 4px 12px rgba(11,121,247,0.35);
flex-shrink:0;
}
nav a{
margin-left:20px;
text-decoration:none;
color:#0f1724;
font-weight:600;
}
/* Hero */
.hero{
background:linear-gradient(180deg,#fff,rgba(255,255,255,0.5));
padding:40px;
border-radius:var(--radius);
box-shadow:0 8px 30px rgba(12,20,40,0.08);
margin-bottom:40px;
}
.hero h1{
font-size:34px;
margin-bottom:14px;
}
.hero p{
font-size:18px;
color:var(--muted);
max-width:650px;
margin-bottom:20px;
}
.btn{
display:inline-block;
padding:12px 18px;
border-radius:12px;
font-weight:700;
text-decoration:none;
margin-right:10px;
}
.btn-primary{
background:var(--accent);
color:white;
}
.btn-outline{
border:1px solid var(--accent);
color:var(--accent);
}
/* Projects */
.section-title{
font-size:26px;
font-weight:700;
margin-bottom:20px;
}
.projects{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-bottom:40px;
}
.project-card{
background:var(--card);
padding:20px;
border-radius:var(--radius);
box-shadow:0 6px 20px rgba(12,20,40,0.06);
}
.project-card h3{
margin-bottom:8px;
font-size:20px;
}
.project-card p{
font-size:14px;
color:var(--muted);
margin-bottom:12px;
}
.project-card a{
display:inline-block;
margin-top:8px;
color:var(--accent);
font-weight:700;
text-decoration:none;
}
/* About */
.about{
background:var(--card);
padding:28px;
border-radius:var(--radius);
box-shadow:0 6px 20px rgba(12,20,40,0.06);
margin-bottom:40px;
}
.about p{
color:var(--muted);
max-width:700px;
}
/* Contact */
.contacts{
background:var(--card);
padding:28px;
border-radius:var(--radius);
box-shadow:0 6px 20px rgba(12,20,40,0.06);
margin-bottom:40px;
}
.contacts a{
color:var(--accent);
font-weight:700;
}
/* Footer */
footer{
text-align:center;
color:var(--muted);
font-size:14px;
padding:20px 0;
}
@media(max-width:600px){
.hero h1{font-size:26px}
.hero p{font-size:16px}
}