@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}
body{font-family:Poppins,sans-serif;background:#08090d;color:#eee;line-height:1.7}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:28px 28px}
header{position:fixed;top:0;width:100%;z-index:10;background:rgba(8,9,13,.88);backdrop-filter:blur(12px);border-bottom:1px solid #272936}
.navbar{max-width:1100px;margin:auto;padding:18px 25px;display:flex;justify-content:space-between;align-items:center}
.logo{font-family:Orbitron,sans-serif;font-weight:800;letter-spacing:2px;color:#f4c400}
nav ul{display:flex;gap:25px;list-style:none}
nav a{color:#ddd;text-decoration:none;font-size:14px}
nav a:hover{color:#f4c400}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:110px 8%}
.hero:after{content:"";position:absolute;width:600px;height:600px;right:-250px;bottom:-250px;border:2px solid #2b2d38;border-radius:50%;box-shadow:0 0 0 80px #11131a,0 0 0 82px #2b2d38;opacity:.4}
.hero-content{max-width:1100px;margin:auto;display:grid;grid-template-columns:300px 1fr;gap:70px;align-items:center;z-index:1}
.photo-box{height:300px;border:2px dashed #555866;background:#11131a;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}
.photo-box img{width:100%;height:100%;object-fit:cover}
.photo-box span{font-family:Orbitron,sans-serif;color:#777;font-size:17px;text-align:center;letter-spacing:3px;position:absolute}
.photo-box.large{height:360px}
.subtitle,.section-label{font-family:Orbitron,sans-serif;color:#f4c400;letter-spacing:4px;font-size:13px}
h1,h2,h3{font-family:Orbitron,sans-serif}
h1{font-size:clamp(38px,6vw,76px);line-height:1.05;margin:15px 0}
h1 span{color:#f4c400}
.description{max-width:650px;color:#aaa;margin-bottom:28px}
.btn{display:inline-block;padding:12px 25px;background:#f4c400;color:#08090d;text-decoration:none;font-weight:700;letter-spacing:1px}
.bat-symbol{position:absolute;right:10%;top:27%;font-size:130px;opacity:.08;filter:grayscale(1)}
.section{max-width:1100px;margin:auto;padding:110px 25px}
h2{font-size:40px;margin:8px 0 40px}
.profile-grid{display:grid;grid-template-columns:360px 1fr;gap:60px;align-items:center}
.card{border:1px solid #292b36;padding:35px;background:#0e1016}
.card h3{color:#f4c400;margin-bottom:15px}
.card p{color:#aaa}
.info{margin-top:25px;border-top:1px solid #292b36;padding-top:18px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gallery-item{height:260px}
.contact{text-align:center}
.contact-text{color:#aaa;margin-bottom:25px}
.socials{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.socials a{border:1px solid #343640;padding:12px 22px;color:#eee;text-decoration:none}
.socials a:hover{border-color:#f4c400;color:#f4c400}
footer{text-align:center;border-top:1px solid #242631;padding:25px;color:#777;font-size:13px}
@media(max-width:750px){
 nav ul{gap:10px}nav a{font-size:11px}
 .hero-content,.profile-grid{grid-template-columns:1fr;gap:30px}
 .hero{padding:120px 25px 70px}
 .hero .photo-box{width:230px;height:230px}
 .profile-grid .photo-box{width:100%}
 .gallery{grid-template-columns:1fr}
 h2{font-size:30px}
}