/* Neon Gaming Theme - style.css */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; color:#e6eef8; background:#030316; overflow-x:hidden}
.container{width:92%;max-width:1200px;margin:0 auto}

/* Canvas bg */
#bg-canvas{position:fixed;inset:0;z-index:0;}

/* Preloader */
.preloader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000814;z-index:3000}
.preloader .loader{display:flex;flex-direction:column;align-items:center;gap:12px}
.preloader .ring{width:64px;height:64px;border-radius:50%;border:4px solid rgba(14,165,233,0.08);border-left-color:#0ea5e9;border-top-color:#7c3aed;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.preloader.hidden{opacity:0;pointer-events:none;transition:opacity .6s ease}

/* NAV */
.navbar{position:sticky;top:0;z-index:1200;background:linear-gradient(180deg, rgba(3,3,24,0.35), rgba(3,3,24,0.25));backdrop-filter:blur(6px);border-bottom:1px solid rgba(14,165,233,0.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{height:44px;filter:drop-shadow(0 6px 20px rgba(14,165,233,0.12))}
.brand-name{font-weight:700}
.brand-name .muted{display:block;font-weight:500;color:#94a3b8;font-size:12px}
.nav{display:flex;gap:12px;align-items:center}
.nav a{color:#cfefff;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600;transition:all .18s ease}
.nav a:hover{transform:translateY(-3px);color:#fff;background:linear-gradient(90deg, rgba(14,165,233,0.08), rgba(124,58,237,0.06))}
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer}

/* HERO */
.hero{padding:80px 0;position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr 440px;gap:36px;align-items:center}
.eyebrow{display:inline-block;background:rgba(14,165,233,0.06);color:#7ee0ff;padding:6px 10px;border-radius:999px;font-weight:700}
h1{font-size:2.2rem;line-height:1.02;margin:8px 0}
.neon{color:#7c3aed;text-shadow:0 0 8px rgba(124,58,237,0.6), 0 0 18px rgba(14,165,233,0.14)}
.lead{color:#9fb8d9;margin-bottom:16px}
.cta{display:flex;gap:12px;margin-top:12px}
.btn{padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:800;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#0ea5e9,#7c3aed);color:#001322;box-shadow:0 8px 30px rgba(124,58,237,0.12)}
.btn.outline{border:2px solid rgba(255,255,255,0.06);background:transparent;color:#cfefff}
.glow{box-shadow:0 6px 30px rgba(14,165,233,0.12),0 0 28px rgba(124,58,237,0.06)}

/* hero card */
.neon-card{padding:18px;border-radius:14px;background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(14,165,233,0.03));border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center}
.neon-card img{width:100%;height:260px;object-fit:contain}

/* GRID and cards */
.section{padding:64px 0;position:relative;z-index:2}
.alt{background:linear-gradient(180deg, rgba(5,6,20,0.25), rgba(3,3,24,0.12))}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;border:1px solid rgba(124,58,237,0.06);box-shadow:0 8px 30px rgba(2,6,23,0.35)}
.card h3{color:#e6f7ff}

/* skills */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.skill .bar{height:12px;background:rgba(255,255,255,0.04);border-radius:10px;margin:8px 0;overflow:hidden}
.skill .progress{height:100%;background:linear-gradient(90deg,#0ea5e9,#7c3aed);box-shadow:0 6px 20px rgba(14,165,233,0.10);transition:width .9s cubic-bezier(.2,.9,.2,1)}

/* projects */
.project img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chips span{background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:999px;font-weight:700;color:#bfe9ff}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:12px}
.timeline-item{display:flex;gap:16px;align-items:flex-start}
.time{min-width:130px;color:#94a3b8;font-weight:700}
.desc h4{margin-bottom:6px}

/* neon form */
.neon-form{display:flex;flex-direction:column;gap:12px}
.input-wrap{position:relative}
.input-wrap input,.input-wrap textarea{width:100%;padding:14px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.04);color:#e6f7ff;outline:none;transition:box-shadow .18s}
.input-wrap .label{position:absolute;left:12px;top:12px;pointer-events:none;color:#94a3b8;font-weight:700;transform-origin:left top;transition:all .18s}
.input-wrap input:focus, .input-wrap textarea:focus{box-shadow:0 6px 30px rgba(14,165,233,0.08);border-color:rgba(14,165,233,0.5)}
.input-wrap input:focus + .label, .input-wrap textarea:focus + .label, .input-wrap input:not(:placeholder-shown) + .label{transform:translateY(-22px) scale(.9);color:#bfe9ff}

/* buttons */
.form-actions{display:flex;gap:12px;align-items:center}
.neon-glow{box-shadow:0 10px 40px rgba(124,58,237,0.12),0 0 60px rgba(14,165,233,0.06)}

/* footer */
.footer{padding:26px 0;text-align:center;background:linear-gradient(180deg,#020216,#030316);color:#94a3b8}

/* responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .nav{display:none;position:fixed;right:18px;top:72px;background:linear-gradient(180deg,#021125,#041029);padding:12px;border-radius:10px;box-shadow:0 12px 40px rgba(2,6,23,0.6)}
  .nav.open{display:flex;flex-direction:column;gap:8px}
  .nav-toggle{display:inline-block}
}