:root{
  --bg:#0b0e16;
  --panel:#0f1424cc;
  --text:#e6e8ee;
  --muted:#aab1c6;
  --brand: #7c9cff;
  --brand-2:#9b7cff;
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  z-index:60;
}

.bg{position:fixed; inset:0; overflow:hidden; z-index:-2;}
.blob{
  position:absolute; filter:blur(60px); opacity:.45; mix-blend-mode:screen;
  width:42vw; height:42vw; border-radius:50%;
  background: radial-gradient(closest-side at 40% 40%, var(--brand), transparent 60%);
  animation: float 22s ease-in-out infinite;
}
.blob-1{ top:-10vh; left:-10vw; }
.blob-2{ bottom:-20vh; right:-15vw; transform:scale(1.1); background: radial-gradient(closest-side at 60% 60%, var(--brand-2), transparent 60%); animation-duration: 26s;}
@keyframes float{
  0%,100%{ transform: translate(0,0) }
  50%{ transform: translate(3vw, -2vh) }
}
.grid-overlay{
  position:absolute; inset:0; background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px; 
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 70%, transparent);
}
.noise{
  position:absolute; inset:0; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}


.site-header{
  position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  background: linear-gradient(180deg, rgba(11,14,22,.85), rgba(11,14,22,.35) 90%, transparent);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 0 12px var(--brand)}
.brand-text{font-weight:800; letter-spacing:.5px}
.nav{display:flex; gap:18px; align-items:center}
.nav-link{
  color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px;
  transition: all .2s ease;
}
.nav-link:hover,.nav-link.active{color:var(--text); background:rgba(255,255,255,0.06)}
.btn{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#0b0e16; font-weight:800; border:0; padding:10px 16px; border-radius:999px; text-decoration:none; display:inline-block; box-shadow:var(--shadow);
}
.btn.ghost{
  background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none;
}
.btn-sm{padding:8px 12px; font-size:.92rem}
.tiny{padding:8px 12px; font-size:.85rem}


.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:#dfe6ff; margin:5px 0}

@media (max-width: 900px){
  .nav{position:fixed; top:64px; right:18px; left:18px; background:var(--panel); border:1px solid var(--border); padding:14px; border-radius:16px; display:none; flex-direction:column}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}

.section{padding: 100px 22px}
.container{max-width:1100px; margin:0 auto}
.section-head{text-align:center; margin-bottom:24px}
.section-title{font-size:2rem; margin:0}
.section-subtitle{color:var(--muted); margin:8px 0 0}

.hero{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center;
}
.eyebrow{color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.headline{font-size:clamp(2.4rem, 5vw, 4.2rem); margin:8px 0}
.grad-text{background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.subtitle{font-size:clamp(1rem, 2.6vw, 1.4rem); color:var(--muted); display:flex; align-items:center; gap:10px}
.cursor{opacity:.75; animation: blink 1s steps(2, start) infinite}
@keyframes blink{50%{opacity:.2}}
.hero-desc{color:#c9cfe6; max-width:56ch}
.hero-cta{display:flex; gap:12px; margin:18px 0 8px}
.hero-stats{list-style:none; display:flex; gap:26px; padding:0; margin:18px 0 0; color:var(--muted)}
.stat{font-weight:900; font-size:1.2rem; color:var(--text)}

.hero-card .card{max-width:520px}
.card.glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-top{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.dots span{display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff6b6b; margin-right:6px}
.dots span:nth-child(2){background:#ffd166}
.dots span:nth-child(3){background:#06d6a0}
.mini-badge{font-size:.8rem; color:#bcd}
.card-body{padding:18px 16px}
.tech-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tech-chips span{padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:#cfe; font-weight:600; background:rgba(255,255,255,0.03)}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero-card{order:-1}
}
.about-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px;
}
.about-card{padding:18px}
.about-card h4{margin:6px 0 8px}
.list{padding-left:18px; margin:8px 0 0; color:#cdd3e9}
@media (max-width: 950px){
  .about-grid{grid-template-columns:1fr}
}
.skills .chip-cloud{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px}
.chip{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:#e9edff;
  padding:10px 14px; border-radius:999px; font-weight:700; letter-spacing:.2px;
  transition: transform .2s ease, background .2s ease;
}
.chip:hover{transform: translateY(-2px); background:rgba(255,255,255,0.06)}

/* Projects */
.project-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.project-card{padding:18px; position:relative; overflow:hidden}
.project-card::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); opacity:.7; transform:scaleX(0); transform-origin:left; transition: transform .35s ease;
}
.project-card:hover::after{transform:scaleX(1)}
.project-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.badge{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid var(--border); font-size:.85rem; color:#cfe}
.project-tags{display:flex; gap:8px; list-style:none; padding:0; margin:10px 0 0; color:#cfe}
.project-actions{display:flex; gap:8px; margin-top:12px}
@media (max-width: 1100px){
  .project-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 600px){
  .project-grid{grid-template-columns: 1fr}
}
.timeline{position:relative; padding-left:18px; margin-top:10px}
.timeline .line{position:absolute; left:9px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--brand),transparent)}
.tl-item{position:relative; margin:16px 0}
.tl-item .dot{position:absolute; left:-1px; top:10px; width:20px; height:20px; border-radius:50%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 0 0 4px rgba(124,156,255,0.2)}
.tl-card{padding:16px 16px 18px}
.contact-form{padding:18px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block; font-weight:700; font-size:.95rem; color:#dbe3ff}
input, textarea{
  width:100%; margin-top:8px; background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; color:var(--text); outline:none;
}
input:focus, textarea:focus{border-color:#c7d2fe; box-shadow:0 0 0 4px rgba(124,156,255,0.12)}
.form-actions{display:flex; align-items:center; gap:12px; margin-top:12px}
.form-note{color:var(--muted); font-size:.9rem}
.site-footer{border-top:1px solid var(--border); padding:26px 22px; color:#c9cfe6}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:10px}
.footer-links a{color:#c9cfe6; text-decoration:none; margin-left:12px}
.footer-links a:hover{color:#fff}
.reveal-up{opacity:0; transform: translateY(12px); transition: all .6s cubic-bezier(.2,.65,.2,1)}
.reveal-up.visible{opacity:1; transform: translateY(0)}
.reveal-pop{opacity:0; transform: scale(.96); transition: all .5s cubic-bezier(.2,.65,.2,1)}
.reveal-pop.visible{opacity:1; transform: scale(1)}