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

body{
font-family:'Poppins',sans-serif;
background:#070b16;
color:white;
}

img,audio{
max-width:100%;
height:auto;
}

.gradient{
position:fixed;
width:700px;
height:700px;
background:radial-gradient(circle,#ffb347,transparent 60%);
top:-250px;
right:-250px;
filter:blur(140px);
z-index:-1;
}

.glass{
background:rgba(255,255,255,0.04);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.08);
border-radius:26px;
}

.hero{
margin:40px;
padding:40px;
}

.nav-wrap{
overflow-x:auto;
}

.nav{
display:flex;
gap:28px;
list-style:none;
margin-bottom:35px;
flex-wrap:wrap;
justify-content:center;
}

.nav a{
text-decoration:none;
color:#aaa;
font-weight:500;
transition:.3s;
}

.nav a:hover{
color:#ffb347;
}

.hero-wrap{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:60px;
}

.hero-img img{
width:260px;
border-radius:22px;
}

figcaption{
text-align:center;
color:#aaa;
margin-top:10px;
}

.tag{
color:#ffb347;
margin-bottom:10px;
}

h1{
font-size:64px;
}

address a{
color:#bbb;
text-decoration:none;
transition:.3s;
}

address a:hover{
color:#ffb347;
}

.audio-box{
margin-top:18px;
width:100%;
display:flex;
justify-content:flex-start;
}

audio{
width:260px;
height:42px;
background:#131a2e;
border-radius:12px;
}

blockquote{
margin-top:20px;
color:#ccc;
max-width:420px;
}

.grid{
margin:40px;
display:grid;
grid-template-columns:1fr 1fr;
gap:32px;
}

.card{
padding:34px;
min-height:420px;
}

.full{
grid-column:1 / -1;
min-height:auto;
}

.table-wrap{
overflow-x:auto;
margin-top:20px;
}

table{
width:100%;
border-collapse:collapse;
}

th,td{
padding:14px;
border-bottom:1px solid rgba(255,255,255,0.07);
text-align:left;
}

.skill{
margin-top:18px;
}

.skill p{
margin-bottom:6px;
color:#ddd;
}

progress{
width:100%;
height:8px;
appearance:none;
}

progress::-webkit-progress-bar{
background:#1a2238;
border-radius:20px;
}

progress::-webkit-progress-value{
background:linear-gradient(to right,#6ee7b7,#3b82f6);
border-radius:20px;
}

.systems{
margin-top:26px;
}

.systems ul{
margin-top:8px;
padding-left:18px;
color:#ccc;
}

ol{
padding-left:20px;
margin-top:16px;
}

li{
margin-bottom:14px;
}

.contact-form{
display:flex;
flex-direction:column;
gap:14px;
margin-top:18px;
max-width:500px;
}

input,textarea{
padding:12px;
border:none;
border-radius:12px;
background:#131a2e;
color:white;
}

button{
padding:14px;
border:none;
border-radius:30px;
background:#ffb347;
font-weight:600;
cursor:pointer;
}

footer{
text-align:center;
padding:40px;
color:#777;
}

@media(max-width:900px){
.grid{
grid-template-columns:1fr;
}
.hero-wrap{
justify-content:center;
text-align:center;
}
h1{
font-size:42px;
}
}

@media(max-width:600px){
.hero{
margin:20px;
padding:22px;
}
.gradient{
width:420px;
height:420px;
top:-180px;
right:-180px;
filter:blur(110px);
}
.nav{
gap:16px;
font-size:14px;
}
.hero-wrap{
gap:28px;
}
.hero-img img{
width:180px;
}
h1{
font-size:32px;
line-height:1.2;
}
blockquote{
font-size:14px;
max-width:100%;
}
.audio-box{
justify-content:center;
}
audio{
width:100%;
}
.grid{
margin:20px;
gap:22px;
}
.card{
padding:22px;
min-height:auto;
}
table{
font-size:14px;
}
th,td{
padding:10px;
}
.contact-form{
max-width:100%;
}
input,textarea{
font-size:14px;
}
button{
padding:12px;
}
footer{
padding:24px;
font-size:13px;
}
}