/* Premium minimal aesthetic */
:root{
  --bg:#0b1020; --surface:#0f1730; --text:#e6e9f3; --muted:#a7b0c3;
  --brand-a:#5eead4; --brand-b:#6366f1; --card:rgba(255,255,255,.04); --stroke:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Arial,Helvetica,sans-serif; color:var(--text);
  background: radial-gradient(1200px 1200px at 80% -10%, rgba(99,102,241,.25), transparent 70%),
              radial-gradient(1000px 600px at 0% 110%, rgba(94,234,212,.18), transparent 70%),
              var(--bg);
  line-height:1.6; overflow-x: hidden;
}
a{color:var(--text); text-decoration:none}
.wrap{width:min(1120px, calc(100% - 2rem)); margin-inline:auto}
.skip{position:absolute; left:-999rem; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:1rem; top:1rem; width:auto; height:auto; background:var(--surface); color:var(--text); padding:.5rem 1rem; border-radius:.75rem}

.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:linear-gradient(180deg, rgba(11,16,32,.85), rgba(11,16,32,.5), transparent); border-bottom:1px solid var(--stroke)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.brand img{border-radius:50%}
.nav button{display:none}
.nav ul{display:flex; list-style:none; gap:1.1rem; margin:0; padding:0; align-items:center}
.nav .resume a{padding:.5rem .9rem; border-radius:.9rem; border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow)}

.progress{height:3px; position:absolute; inset:auto 0 0; background:transparent}
.progress span{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--brand-a), var(--brand-b))}

.hero{position:relative; padding:8rem 0 6rem}
.hero #stars{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.pill{display:inline-block; padding:.35rem .7rem; border-radius:999px; background:linear-gradient(90deg, rgba(94,234,212,.2), rgba(99,102,241,.2)); border:1px solid var(--stroke); margin-bottom:1rem}
.hero h1{font-size:clamp(2rem, 1.7rem + 3vw, 4rem); line-height:1.08; letter-spacing:-.02em; margin:.5rem 0}
.hero h1 em{font-style:normal; font-weight:700; background:linear-gradient(90deg, var(--brand-a), var(--brand-b)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{max-width:60ch; color:var(--muted)}
.cta{display:flex; gap:.75rem; margin:1.25rem 0 1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1rem; border-radius:1rem; border:1px solid var(--stroke); cursor:pointer; box-shadow:var(--shadow); transition:transform .2s ease}
.btn.primary{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04))}
.btn.ghost{background:transparent}
.btn:active{transform:scale(.98)}

.contacts{display:flex; gap:1.25rem; flex-wrap:wrap; padding:0; list-style:none; color:var(--muted)}
.contacts i{width:18px; height:18px; vertical-align:-3px; margin-right:.35rem}

.scroll-cue{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); opacity:.6; font-size:.88rem}

.panel{padding:6rem 0}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:start}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:1.25rem; padding:1.25rem; box-shadow:var(--shadow)}
.card:hover{transform: translateY(-1px)}

.timeline{display:grid; gap:1rem}
.timeline .job header{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.timeline .job h3{margin:.25rem 0}
.timeline .job time{color:var(--muted)}

.skill-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.skill{padding:1rem; border-radius:1rem; background:var(--card); border:1px solid var(--stroke)}
.skill .level{float:right; color:var(--muted)}
.bar{height:10px; border-radius:999px; background:rgba(255,255,255,.08); margin-top:.75rem; overflow:hidden; position:relative}
.bar::after{content:""; position:absolute; inset:0; width:var(--w,0%); background:linear-gradient(90deg, var(--brand-a), var(--brand-b))}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.project h3{margin-top:0}
.tags{display:flex; gap:.5rem; list-style:none; padding:0; margin:.5rem 0 0}
.tags li{font-size:.8rem; padding:.25rem .5rem; border-radius:.7rem; background:rgba(255,255,255,.06); border:1px solid var(--stroke)}

.edu{line-height:1.9}

.contact-form{display:grid; gap:1rem; margin-top:1rem}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.contact-form .row.end{justify-content:end; grid-template-columns:auto auto}
.contact-form input, .contact-form textarea{
  width:100%; padding:.9rem 1rem; border-radius:.9rem; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:var(--text); outline:none
}
.contact-form button{border:none}

.site-footer{padding:2rem 0; border-top:1px solid var(--stroke); background:linear-gradient(180deg, transparent, rgba(255,255,255,.04))}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .nav button{display:inline-flex; align-items:center; padding:.5rem .75rem; border-radius:.75rem; border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--text)}
  .nav ul{display:none; position:absolute; right:1rem; top:3.5rem; flex-direction:column; padding:1rem; background:var(--surface); border-radius:1rem; border:1px solid var(--stroke)}
  .nav ul.open{display:flex}
}
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}


/* Preloader */
#preloader{position:fixed; inset:0; display:grid; place-items:center; background:#0b1020; z-index:1000; transition:opacity .6s ease, visibility .6s}
#preloader.done{opacity:0; visibility:hidden}
.spinner{display:flex; gap:.6rem}
.spinner span{width:.7rem; height:.7rem; border-radius:50%; background:linear-gradient(90deg,var(--brand-a),var(--brand-b)); animation: b 1s infinite ease-in-out}
.spinner span:nth-child(2){animation-delay:.15s}
.spinner span:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{transform:scale(.6); opacity:.6}40%{transform:scale(1); opacity:1}}

/* Parallax decorative layers */
.parallax{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.parallax .layer{position:absolute; border-radius:50%; filter: blur(60px); opacity:.25}
.parallax .l1{width:38vmax; height:38vmax; left:-10vmax; top:-8vmax; background:radial-gradient(circle at 30% 30%, var(--brand-b), transparent 60%)}
.parallax .l2{width:32vmax; height:32vmax; right:-12vmax; bottom:-10vmax; background:radial-gradient(circle at 60% 60%, var(--brand-a), transparent 60%)}

/* Section separators */
.separator{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); opacity:.4}

/* 3D tilt cards */
.tilt3d{transform-style:preserve-3d; will-change:transform; transition: transform .2s ease, box-shadow .3s ease}
.tilt3d .gloss{position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.08), transparent); pointer-events:none; mix-blend:overlay; opacity:.4}

/* Lightbox */
#lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.6); backdrop-filter: blur(6px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; z-index:900}
#lightbox.open{opacity:1; visibility:visible}
#lightbox .content{max-width:min(90vw,1000px); max-height:80vh}
#lightbox img{width:100%; height:auto; border-radius:1rem; border:1px solid var(--stroke); box-shadow:var(--shadow)}
#lightbox .close{position:absolute; top:2rem; right:2rem; background:rgba(255,255,255,.1); border:1px solid var(--stroke); color:var(--text); border-radius:.7rem; padding:.4rem .6rem; cursor:pointer}

/* Fancy headings underline */
.panel h2{position:relative; display:inline-block}
.panel h2::after{content:""; position:absolute; left:0; right:0; bottom:-.2rem; height:2px; background:linear-gradient(90deg,var(--brand-a),var(--brand-b)); transform-origin:left; transform:scaleX(0)}

/* Animated scroll cue */
.scroll-cue span{display:inline-block; animation: floatY 2s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Better focus */
:focus-visible{outline:2px solid var(--brand-a); outline-offset:2px}

/* Sticky header shadow on scroll */
.scrolled .site-header{box-shadow: 0 10px 30px rgba(0,0,0,.35)}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce){
  .parallax .layer{display:none}
  .scroll-cue span{animation:none}
}