*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:tahoma,sans-serif;
background:#07111d;
color:#fff;
overflow-x:hidden;
}
.bg{
position:fixed;inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(0,180,255,.18),transparent 40%),
linear-gradient(135deg,#07111d,#0b1f3d);
z-index:-1;
}
.hero{
display:flex;
min-height:100vh;
align-items:center;
justify-content:space-between;
padding:4vw;
gap:40px;
}
.photo,.content{flex:1}
.photo{text-align:center}
.photo img{
max-height:95vh;
width:auto;
max-width:100%;
object-fit:contain;
filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
animation:slideLeft 1s;
}
.content{animation:slideRight 1s}
h1{font-size:58px;line-height:1.2;margin:10px 0 20px}
h1 span{color:#58b8ff}
p{color:#bfc8d6;margin-bottom:30px}
.item{
margin-bottom:16px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
border-radius:18px;
backdrop-filter:blur(10px);
overflow:hidden;
transition:.3s;
}
.item:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,150,255,.2)}
button{
width:100%;
padding:22px;
background:none;
border:none;
color:#fff;
font-size:22px;
cursor:pointer;
text-align:right;
}
.panel{
max-height:0;
overflow:hidden;
padding:0 22px;
transition:max-height .5s,padding .5s;
color:#d8d8d8;
line-height:2;
}
.item.active .panel{
max-height:250px;
padding:0 22px 22px;
}
@keyframes slideLeft{
from{opacity:0;transform:translateX(-60px)}
to{opacity:1;transform:none}
}
@keyframes slideRight{
from{opacity:0;transform:translateX(60px)}
to{opacity:1;transform:none}
}
@media(max-width:900px){
.hero{flex-direction:column}
h1{font-size:42px}
.photo img{max-height:60vh}
}