/* style.css */
:root{
  --bg:#0f1020;
  --card:#15162b;
  --text:#e6e6f0;
  --muted:#aeb0c2;
  --accent1:#8a5cf6;
  --accent2:#07d9ff;
  --accent3:#ff6b6b;
  --ring: conic-gradient(from 180deg at 50% 50%, var(--accent1), var(--accent2), var(--accent3), var(--accent1));
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 800px at 10% 10%, #1a1b35 0%, #0c0d1a 50%, #060712 100%), var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none }
.container{ max-width:1200px; margin:0 auto; padding:0 20px }

/* Header */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(10,10,18,.35);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px }
.brand{ font-weight:700; letter-spacing:.5px; font-size:1.2rem }
.brand .dot{
  background:linear-gradient(90deg,var(--accent2),var(--accent1));
  width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:6px;
  box-shadow:0 0 18px var(--accent2)
}
nav ul{ list-style:none; display:flex; gap:20px; padding:0; margin:0 }
nav a{ opacity:.85 }
nav a:hover{ opacity:1 }

/* Hero */
.hero{ position:relative; padding:80px 0 40px }
.grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center }
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  border-radius:999px; font-size:.85rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)
}
.badge .ping{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent2); box-shadow:0 0 18px var(--accent2)
}
h1{
  font-size:clamp(2rem, 2.5vw + 1.5rem, 3.5rem);
  line-height:1.1; margin:14px 0; letter-spacing:.4px
}
.gradient-text{
  background:linear-gradient(90deg, var(--accent2), var(--accent1), var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.lead{ color:var(--muted); font-size:1.05rem; max-width:680px }
.cta{ display:flex; gap:14px; margin:26px 0 6px }
.btn{
  padding:12px 18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.1); background:#101129;
  cursor:pointer; font-weight:600
}
.btn.primary{ background:linear-gradient(90deg, var(--accent2), var(--accent1)); border:none }

/* Right image block */
.profile-wrap{ position:relative; display:grid; place-items:center }
.ring{
  position:absolute; inset:auto; width:320px; height:320px; border-radius:50%;
  padding:4px; background:var(--ring); filter:saturate(1.2);
}
.profile{
  position:relative; width:300px; height:300px; border-radius:50%;
  overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.5)
}
.profile img{ width:100%; height:100%; object-fit:cover; display:block }

.blob{ position:absolute; filter:blur(40px); opacity:.55; z-index:-1 }
.blob.b1{
  width:280px; height:280px;
  background:radial-gradient(circle at 30% 30%, var(--accent1), transparent 60%);
  top:-20px; left:-60px
}
.blob.b2{
  width:320px; height:320px;
  background:radial-gradient(circle at 70% 50%, var(--accent2), transparent 60%);
  bottom:-40px; right:-80px
}

/* Sections */
section{ padding:70px 0 }
.section-title{ font-size:1.8rem; margin:0 0 18px }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:20px
}

/* Skills */
.skills{ display:flex; flex-wrap:wrap; gap:12px }
.chip{
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-weight:600
}

/* Projects grid */
.projects{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px }
.project{
  padding:18px; border-radius:18px;
  background:linear-gradient(160deg, rgba(138,92,246,.15), rgba(7,217,255,.12) 60%, rgba(255,107,107,.18));
  border:1px solid rgba(255,255,255,.12);
  transition:transform .25s ease
}
.project:hover{ transform:translateY(-6px) }
.project h4{ margin:0 0 6px }

/* Footer */
footer{ padding:40px 0; color:#cfd1e6; opacity:.85 }

/* Custom cursor circle (pura page par kaam karega) */
#cursor{
  position:fixed; left:0; top:0; z-index:1000; pointer-events:none;
  width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 18px rgba(7,217,255,.35), inset 0 0 10px rgba(138,92,246,.25);
  transform:translate(-50%, -50%);
  mix-blend-mode:normal;
  transition: opacity .2s ease, transform .15s ease;
}
#cursor.is-hidden{ opacity:0 }
#cursor.is-click{ transform:translate(-50%, -50%) scale(0.85) }

/* Responsive */
@media (max-width: 920px){
  .grid{ grid-template-columns:1fr; gap:24px }
  .profile-wrap{ order:-1 }
  .hero{ padding-top:40px }
  .projects{ grid-template-columns:1fr 1fr }
}
@media (max-width: 560px){
  nav ul{ display:none }
  .projects{ grid-template-columns:1fr }
  .profile, .ring{ width:240px; height:240px }
}