:root{
  --bg:#000000;
  --red:#ff1f2f; /* fire red */
  --blue:#4dd2ff; /* light blue accent */
  --muted: #9aa3ad;
}
*{box-sizing:border-box}
html,body,#scene-wrap{height:100%;}
body{margin:0;font-family:Inter, system-ui, Arial, sans-serif;background:var(--bg);color:#e6eef6;overflow-x:hidden}

#bg-canvas{position:fixed;inset:0;z-index:0;display:block}
.overlay{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 32px}
.logo{font-weight:800;letter-spacing:2px;color:var(--red);font-size:18px}
.nav a{color:#9fb6c6;margin-left:18px;text-decoration:none;font-weight:600}

.hero{display:flex;align-items:center;justify-content:center;padding:80px 20px 40px 20px;min-height:60vh}
.hero-content{text-align:center;backdrop-filter:blur(6px);padding:18px 28px;border-radius:14px}
.name{font-size:44px;margin:0;line-height:1.02;font-weight:900;letter-spacing:-0.02em;color:#fff;text-shadow:0 8px 30px rgba(255,31,47,0.08)}
.age{font-weight:700;color:var(--muted);font-size:18px;margin-left:12px}
.tag{color:rgba(255,255,255,0.75);margin-top:14px;font-size:16px;max-width:820px}

.cta-row{margin-top:22px;display:flex;gap:14px;justify-content:center}
.cta{padding:10px 18px;border-radius:10px;background:linear-gradient(90deg,rgba(255,31,47,0.12),rgba(77,210,255,0.06));border:1px solid rgba(255,255,255,0.04);color:#fff;text-decoration:none;font-weight:700;transition:all .22s ease}
.cta:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,31,47,0.08),0 0 18px rgba(77,210,255,0.03)}
.cta.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}

.card{max-width:980px;margin:28px auto;padding:22px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.about p{color:rgba(255,255,255,0.8);line-height:1.7}

.contact .contacts{display:flex;gap:18px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.contact-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,0.55);text-decoration:none;color:#e6f6ff;transition:all .18s ease;border:1px solid rgba(255,255,255,0.02)}
.contact-item .icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,0.03);color:var(--blue);transition:all .18s ease;box-shadow:0 4px 18px rgba(0,0,0,0.6)}
.contact-item .label{font-weight:600;color:rgba(255,255,255,0.92);font-size:14px}
.contact-item:hover{transform:translateY(-6px)}
.contact-item:hover .icon{box-shadow:0 0 18px rgba(255,31,47,0.12),0 0 28px rgba(77,210,255,0.08);color:var(--red);border-color:rgba(255,31,47,0.22)}

.foot{padding:26px;text-align:center;color:rgba(255,255,255,0.35);margin-top:auto}

/* Neon & responsive tweaks */
@media (max-width:800px){
  .name{font-size:30px}
  .hero{padding-top:40px}
  .contact .contacts{justify-content:center}
}

/* subtle glowing accent lines */
.overlay::before{content:"";position:fixed;left:0;top:30%;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0.07}
}