/* =============================================
   INAM KHAN PORTFOLIO — ADVANCED STYLESHEET
   ============================================= */

/* ---------- TOKENS ---------- */
:root {
  --bg:       #080312;
  --bg2:      #120821;
  --bg3:      #1b0f33;
  --glass:    rgba(255,255,255,0.04);
  --glass-b:  rgba(255,255,255,0.085);
  --border:   rgba(255,255,255,0.10);
  --border-h: rgba(249,115,22,0.58);

  --p:        #f59e0b;
  --p-l:      #f97316;
  --pk:       #22d3ee;
  --teal:     #a78bfa;

  --g-main:   linear-gradient(135deg,#f59e0b 0%,#f97316 35%,#22d3ee 70%,#a78bfa 100%);
  --g-12:     linear-gradient(135deg,#f59e0b,#f97316);
  --g-23:     linear-gradient(135deg,#22d3ee,#a78bfa);

  --text:     #f0f4ff;
  --muted:    #a7afc3;
  --dim:      #667089;

  --radius:   18px;
  --r-sm:     10px;
  --r-pill:   100px;

  --glow:     0 0 42px rgba(249,115,22,0.24);
  --shadow:   0 24px 64px rgba(0,0,0,0.5);

  --ff:       'Inter', sans-serif;
  --mono:     'Fira Code', monospace;
}

/* ---------- BASE ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
}
body.modal-open { overflow: hidden; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--p); border-radius:3px; }

/* ---------- NOISE ---------- */
.noise {
  position: fixed; inset:0; z-index: 9999; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35; mix-blend-mode: overlay;
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background: var(--g-main); z-index:9000; transition:width .05s;
}

/* ---------- CURSOR ---------- */
#cursorDot {
  width:7px; height:7px; background:var(--p); border-radius:50%;
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:transform .08s;
}
#cursorRing {
  width:38px; height:38px; border:1.5px solid rgba(0,212,255,.5);
  border-radius:50%; position:fixed; top:0; left:0; pointer-events:none;
  z-index:9997; transform:translate(-50%,-50%);
  transition:width .3s, height .3s, border-color .3s;
}
#cursorRing.expand { width:60px; height:60px; border-color:var(--p); }
@media(hover:none) { #cursorDot,#cursorRing { display:none; } }

/* ---------- PRELOADER ---------- */
.preloader {
  position:fixed; inset:0; background:var(--bg);
  z-index:10000; display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s;
}
.preloader.out { opacity:0; visibility:hidden; }
.pre-content { text-align:center; }
.pre-logo { width:100px; height:100px; margin-bottom:2rem; }
.pre-circle {
  fill:none; stroke:url(#pg); stroke-width:3;
  stroke-dasharray:283; stroke-dashoffset:283;
  animation: circleAnim 1.8s ease forwards;
}
@keyframes circleAnim { to { stroke-dashoffset:0; } }
.pre-text {
  font-family:var(--ff); font-size:28px; font-weight:900;
  fill:url(#pg2);
}
.pre-bar {
  width:220px; height:2px; background:var(--border);
  border-radius:2px; overflow:hidden; margin:0 auto 1rem;
}
.pre-bar-fill {
  height:100%; background:var(--g-main);
  border-radius:2px; width:0; transition:width .05s;
}
.pre-percent { font-size:.8rem; color:var(--muted); font-family:var(--mono); }

/* ---------- BG CANVAS ---------- */
#bg-canvas {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:.35;
}

/* ---------- NAV ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:.9rem 0; transition:all .35s ease;
}
.nav.glassy {
  background:rgba(4,6,15,0.82);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 30px rgba(0,0,0,.35);
  padding:.7rem 0;
}
.nav-wrap {
  max-width:1240px; margin:0 auto; padding:0 1.75rem;
  display:flex; align-items:center; gap:1.5rem;
}
.nav-logo {
  font-size:1.45rem; font-weight:900; letter-spacing:-1px;
  white-space:nowrap; flex-shrink:0;
}
.bracket { color:var(--p); }
.nav-center {
  display:flex; gap:.2rem; margin:0 auto;
}
.nl {
  padding:.45rem .85rem; border-radius:8px;
  font-size:.875rem; font-weight:500; color:var(--muted);
  transition:all .2s; white-space:nowrap;
}
.nl:hover, .nl.on { color:var(--text); background:rgba(255,255,255,.06); }
.nav-hire {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.2rem; border-radius:var(--r-pill);
  background:var(--g-12); color:#fff; font-size:.85rem;
  font-weight:700; white-space:nowrap; flex-shrink:0;
  box-shadow:0 4px 18px rgba(0,212,255,.35);
  transition:all .3s;
}
.nav-hire:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,212,255,.5); }
.burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:.25rem; flex-shrink:0;
}
.burger span {
  width:22px; height:2px; background:var(--text);
  border-radius:2px; transition:all .3s;
}

/* ---------- HERO ---------- */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; position:relative; overflow:hidden; padding-top:5rem;
}
.hero-grid-overlay {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 40%, black 30%, transparent 70%);
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none; z-index:0;
}
.orb-1 {
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(0,212,255,.18) 0%, transparent 70%);
  top:-15%; right:-10%; animation:drift1 12s ease-in-out infinite;
}
.orb-2 {
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(0,255,157,.13) 0%, transparent 70%);
  bottom:-10%; left:-10%; animation:drift2 15s ease-in-out infinite;
}
.orb-3 {
  width:350px; height:350px;
  background:radial-gradient(circle, rgba(124,58,237,.10) 0%, transparent 70%);
  top:45%; left:40%; animation:drift3 10s ease-in-out infinite;
}
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.05)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-25px) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,20px) scale(.95)} }

.hero-wrap {
  max-width:1240px; margin:0 auto; padding:0 1.75rem;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  align-items:center; gap:3rem; position:relative; z-index:1; width:100%;
}
.hero-left { display:flex; flex-direction:column; }

/* slide-up entrance */
.slide-up { opacity:0; transform:translateY(30px); animation:slideUp .7s ease forwards; animation-delay:var(--d,0s); }
@keyframes slideUp { to { opacity:1; transform:none; } }

.avail-badge {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.38rem .95rem; border-radius:var(--r-pill);
  background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.3);
  font-size:.78rem; color:var(--teal); font-weight:600;
  letter-spacing:.3px; width:fit-content; margin-bottom:1.6rem;
}
.avail-dot {
  width:8px; height:8px; background:var(--teal); border-radius:50%;
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.5)} 50%{box-shadow:0 0 0 6px rgba(124,58,237,0)} }

.hero-hi {
  display:block; font-size:1.1rem; color:var(--muted);
  font-weight:500; margin-bottom:.3rem;
}
.hero-name {
  font-size:clamp(3rem,5.5vw,5.5rem); font-weight:900;
  line-height:1.05; letter-spacing:-3px; margin-bottom:1.25rem;
  display:flex; flex-wrap:wrap; gap:.25rem; align-items:baseline;
}
.accent-name {
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  display:inline; filter:drop-shadow(0 0 30px rgba(0,212,255,.4));
}
.typewriter-wrap {
  font-size:clamp(1.1rem,2vw,1.5rem); color:var(--muted);
  font-weight:500; margin-bottom:1.5rem; min-height:2.2rem;
}
.tw-prefix { color:var(--muted); }
.tw-word { color:var(--p-l); font-weight:600; }
.tw-cursor { color:var(--p); animation:cur .7s step-end infinite; }
@keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-sub {
  font-size:1.05rem; color:var(--muted); line-height:1.85;
  max-width:530px; margin-bottom:2.25rem;
}
.hero-btns { display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.hero-pills { display:flex; gap:.6rem; flex-wrap:wrap; }
.pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .95rem; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--border);
  font-size:.8rem; font-weight:500; color:var(--muted);
  backdrop-filter:blur(6px); transition:all .25s;
}
.pill:hover { border-color:var(--p); color:var(--p); background:rgba(0,212,255,.07); }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.82rem 1.9rem; border-radius:var(--r-pill);
  background:var(--g-12); color:#fff; font-weight:700; font-size:.95rem;
  border:none; transition:all .3s;
  box-shadow:0 4px 22px rgba(0,212,255,.35);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 35px rgba(0,212,255,.55); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.82rem 1.9rem; border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.12); color:var(--text);
  font-weight:600; font-size:.95rem; background:transparent;
  backdrop-filter:blur(6px); transition:all .3s;
}
.btn-ghost:hover { border-color:var(--p); background:rgba(0,212,255,.08); transform:translateY(-3px); }

/* Avatar */
.hero-right { display:flex; align-items:center; justify-content:center; }
.avatar-shell {
  position:relative; width:760px; height:760px;
  display:flex; align-items:center; justify-content:center;
}
.av-ring {
  position:absolute; border-radius:50%;
  border:1px dashed;
}
.r1 { width:720px; height:720px; border-color:rgba(0,212,255,.25); animation:spin 25s linear infinite; }
.r2 { width:580px; height:580px; border-color:rgba(0,255,157,.2); animation:spin 18s linear infinite reverse; }
.r3 { width:460px; height:460px; border-color:rgba(124,58,237,.18); animation:spin 12s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.av-glow {
  position:absolute; width:320px; height:320px;
  background:radial-gradient(circle, rgba(0,212,255,.35) 0%, transparent 70%);
  border-radius:50%; filter:blur(20px);
  animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
.av-circle {
  width:340px; height:340px;
  border-radius:50%; overflow:hidden;
  position:relative; z-index:1;
  border:3px solid transparent;
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    var(--g-main) border-box;
  box-shadow:0 0 60px rgba(0,212,255,.35), 0 0 0 6px rgba(0,212,255,.08);
}
.av-circle img {
  width:100%; height:100%; object-fit:cover; object-position:top;
  border-radius:50%; display:block;
}
.chip {
  position:absolute; display:flex; align-items:center; gap:.35rem;
  padding:.4rem .9rem; border-radius:var(--r-pill);
  background:rgba(4,6,15,.88); border:1px solid var(--border);
  font-size:.76rem; font-weight:700; backdrop-filter:blur(12px);
  white-space:nowrap; z-index:2;
}
.c1 { top:30px;  right:10px;  color:#f59e0b; border-color:rgba(245,158,11,.3); animation:chipFloat 3s ease-in-out infinite; }
.c2 { top:160px; right:-30px; color:#3b82f6; border-color:rgba(59,130,246,.3);  animation:chipFloat 3.5s ease-in-out infinite .5s; }
.c3 { bottom:140px; right:-20px; color:#f59e0b; border-color:rgba(245,158,11,.2); animation:chipFloat 4s ease-in-out infinite 1s; }
.c4 { top:100px; left:0px;  color:#00ff9d; border-color:rgba(0,255,157,.3);   animation:chipFloat 2.8s ease-in-out infinite 1.5s; }
.c5 { bottom:100px; left:20px; color:#ef4444; border-color:rgba(239,68,68,.3);   animation:chipFloat 3.2s ease-in-out infinite 0.8s; }
@keyframes chipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.hero-scroll {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  color:var(--dim); font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
  z-index:1;
}
.mouse-icon {
  width:22px; height:36px; border:1.5px solid var(--dim);
  border-radius:11px; display:flex; justify-content:center; padding-top:6px;
}
.mouse-dot {
  width:2px; height:8px; background:var(--p);
  border-radius:2px; animation:mdrop 2s ease infinite;
}
@keyframes mdrop { 0%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(12px)} }

/* ---------- MARQUEE ---------- */
.marquee-strip {
  overflow:hidden; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(0,212,255,.04); padding:.85rem 0;
  position:relative; z-index:1;
}
.marquee-track {
  display:flex; gap:2.5rem; width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-track span {
  font-size:.82rem; font-weight:600; color:var(--muted);
  font-family:var(--mono); white-space:nowrap;
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- SECTIONS ---------- */
.section { padding:6.5rem 0; position:relative; z-index:1; }
.container { max-width:1240px; margin:0 auto; padding:0 1.75rem; }
.sec-tag {
  font-family:var(--mono); font-size:.72rem; color:var(--p);
  letter-spacing:4px; text-transform:uppercase; margin-bottom:.6rem;
  opacity:.8;
}
.sec-title {
  font-size:clamp(2rem,3.8vw,3.2rem); font-weight:900;
  letter-spacing:-1.5px; margin-bottom:3.5rem; line-height:1.1;
}
.g-text {
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

/* Glass surface */
.glass {
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.glass:hover { border-color:var(--border-h); box-shadow:var(--glow); }

/* Reveal */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- ABOUT ---------- */
.about { background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
.about-layout { display:grid; gap:1.75rem; }

/* Bio */
.about-bio { padding:2.5rem; }
.bio-header { display:flex; align-items:center; gap:1.25rem; margin-bottom:1.75rem; }
.bio-avatar {
  width:58px; height:58px; border-radius:14px;
  background:var(--g-12); display:flex; align-items:center;
  justify-content:center; font-size:1.5rem; color:#fff; flex-shrink:0;
}
.bio-header h3 { font-size:1.4rem; font-weight:800; margin-bottom:.2rem; }
.bio-role { font-size:.85rem; color:var(--muted); font-family:var(--mono); }
.about-bio p { color:var(--muted); font-size:1rem; line-height:1.85; margin-bottom:1rem; }
.about-bio strong { color:var(--text); font-weight:600; }
.bio-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.bio-tags span {
  padding:.35rem .85rem; background:rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.2); border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600; color:var(--p-l);
}

/* Stats */
.stats-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat-card {
  background:var(--glass); border:1px solid var(--border); border-radius:var(--radius);
  padding:2rem 1.2rem; text-align:center; position:relative; overflow:hidden;
  transition:all .3s;
}
.stat-card::after {
  content:''; position:absolute; inset:0;
  background:var(--g-main); opacity:0; transition:opacity .3s;
}
.stat-card:hover { transform:translateY(-7px); border-color:var(--border-h); box-shadow:var(--glow); }
.stat-card:hover::after { opacity:.04; }
.sc-icon {
  width:40px; height:40px; border-radius:10px; margin:0 auto .75rem;
  background:var(--g-12); display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:#fff; position:relative; z-index:1;
}
.sc-num {
  font-size:2.8rem; font-weight:900; display:inline;
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; position:relative; z-index:1;
}
.sc-suffix { display:inline; font-size:1.5rem; font-weight:700; color:var(--p); position:relative; z-index:1; }
.sc-label { font-size:.82rem; color:var(--muted); margin-top:.5rem; font-weight:500; position:relative; z-index:1; }

/* Services */
.services { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.service-card {
  padding:1.75rem 1.5rem; position:relative; overflow:hidden;
}
.service-card:hover { transform:translateY(-6px); }
.svc-num {
  font-family:var(--mono); font-size:2.5rem; font-weight:700;
  color:rgba(0,212,255,.1); position:absolute; top:.75rem; right:1rem;
  line-height:1;
}
.svc-icon {
  width:46px; height:46px; border-radius:12px; background:var(--g-12);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:#fff; margin-bottom:1.1rem;
}
.service-card h4 { font-size:1rem; font-weight:700; margin-bottom:.5rem; }
.service-card p { font-size:.86rem; color:var(--muted); line-height:1.65; }

/* ---------- SKILLS ---------- */
.skills { background:var(--bg2); }
.skills-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.75rem;
}
.skill-panel { padding:2rem; }
.sp-head {
  display:flex; align-items:center; gap:.5rem;
  font-size:.88rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:1.5rem;
}
.sp-head i { color:var(--p); font-size:1rem; }
.bar-list { display:flex; flex-direction:column; gap:1.15rem; }
.br-meta {
  display:flex; justify-content:space-between;
  font-size:.87rem; font-weight:500; margin-bottom:.4rem;
}
.br-pct { color:var(--muted); font-family:var(--mono); font-size:.8rem; }
.br-track {
  height:5px; background:rgba(255,255,255,.05);
  border-radius:3px; overflow:hidden;
}
.br-fill {
  height:100%; width:0%; border-radius:3px;
  background:var(--bar-color, var(--p));
  transition:width 1.3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px var(--bar-color, var(--p));
}
.sp-divider { height:1px; background:var(--border); margin:1.5rem 0; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:.6rem; }
.tag {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem 1rem; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:600; transition:all .2s; cursor:default;
}
.t-blue  { background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.25); color:#60a5fa; }
.t-green { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); color:#34d399; }
.t-orange{ background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.25); color:#fb923c; }
.t-purple{ background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25); color:#a78bfa; }
.t-teal  { background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.25); color:#2dd4bf; }
.t-red   { background:rgba(239,68,68,.08);  border:1px solid rgba(239,68,68,.25);  color:#f87171; }
.t-soft  { background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.22); color:var(--p-l); }
.t-leetcode { background:rgba(255,161,22,.08); border:1px solid rgba(255,161,22,.25); color:#ffa116; }
.t-hackerrank { background:rgba(46,200,102,.08); border:1px solid rgba(46,200,102,.25); color:#2ec866; }
.t-codeforces { background:rgba(31,138,203,.08); border:1px solid rgba(31,138,203,.25); color:#1f8acb; }
.t-gfg { background:rgba(47,141,70,.08); border:1px solid rgba(47,141,70,.25); color:#2f8d46; }
.tag:hover { transform:scale(1.06); filter:brightness(1.2); }

/* ---------- PROJECTS ---------- */
.projects { background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%); }
.proj-img {
  width: 100%;
  height: 180px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  background: var(--bg3);
}
.proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.proj-card:hover .proj-img img {
  transform: scale(1.08);
}
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-bottom:3rem; }
.proj-card {
  padding:2rem; display:flex; flex-direction:column; gap:.9rem;
  position:relative; overflow:hidden; transition:all .35s;
}
.proj-card::before {
  content:''; position:absolute; inset:-1px; border-radius:var(--radius);
  background:var(--g-main); opacity:0; z-index:-1; transition:opacity .35s;
}
.proj-card:hover { transform:translateY(-10px) scale(1.01); border-color:transparent; }
.proj-card:hover::before { opacity:.12; }
.featured { border-color:rgba(0,212,255,.35); }
.feat-ribbon {
  position:absolute; top:1.1rem; right:1.1rem;
  background:var(--g-12); color:#fff; font-size:.7rem;
  font-weight:800; padding:.28rem .75rem; border-radius:var(--r-pill);
  letter-spacing:.5px;
}
.proj-top { display:flex; justify-content:space-between; align-items:center; }
.proj-icon {
  width:50px; height:50px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff;
}
.pi-1 { background:linear-gradient(135deg,#f97316,#ef4444); }
.pi-2 { background:linear-gradient(135deg,#00d4ff,#38e8ff); }
.pi-3 { background:linear-gradient(135deg,#00ff9d,#00d4ff); }
.proj-link-btn {
  width:72px; height:72px; background:var(--glass-b);
  border:1px solid var(--border); border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; transition:all .3s cubic-bezier(.4, 0, .2, 1);
}
.proj-link-btn:hover { transform: translateY(-5px); }
.btn-github { color: #fff; border-color: rgba(255,255,255,0.2); }
.btn-github:hover { border-color: #fff; background: rgba(255,255,255,0.15); box-shadow: 0 5px 20px rgba(255,255,255,0.15); }
.btn-live { color: var(--p); border-color: rgba(0,212,255,0.2); }
.btn-live:hover { border-color: var(--p); background: rgba(0,212,255,0.15); box-shadow: 0 5px 20px rgba(0,212,255,0.25); }
.proj-tag-date { font-family:var(--mono); font-size:.73rem; color:var(--teal); font-weight:500; }
.proj-title { font-size:1.18rem; font-weight:800; line-height:1.3; }
.proj-desc { font-size:.88rem; color:var(--muted); line-height:1.7; }
.proj-feats { display:flex; flex-direction:column; gap:.4rem; flex:1; }
.proj-feats li {
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:.83rem; color:var(--muted); line-height:1.5;
}
.proj-feats li i { color:var(--p); margin-top:.15rem; font-size:.75rem; flex-shrink:0; }
.proj-stack { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.proj-stack span {
  padding:.28rem .7rem; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:6px;
  font-size:.74rem; font-weight:600; color:var(--muted);
  font-family:var(--mono);
}
.proj-cta { text-align:center; }

/* ---------- EDUCATION ---------- */
.education { background:var(--bg2); }
.edu-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; }
.sub-h { font-size:1.1rem; font-weight:800; margin-bottom:1.5rem; }

/* ---------- EXPERIENCE ---------- */
.experience { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
.exp-timeline { position: relative; padding-left: 2rem; border-left: 2px solid var(--border); margin-left: 1rem; }
.exp-item { padding: 2rem; position: relative; margin-bottom: 2rem; }
.exp-dot {
  position: absolute; left: -2.35rem; top: 2.5rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--p); box-shadow: 0 0 15px var(--p);
  border: 3px solid var(--bg);
}
.exp-header { margin-bottom: 1.5rem; }
.exp-role { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; }
.exp-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--muted); }
.exp-meta i { color: var(--p); margin-right: 0.4rem; }
.exp-body p { color: var(--muted); margin-bottom: 1.5rem; }
.exp-projects { display: flex; flex-direction: column; gap: 1.5rem; }
.exp-projects li { position: relative; padding-left: 1.5rem; }
.exp-projects li::before {
  content: '→'; position: absolute; left: 0; color: var(--p); font-weight: bold;
}
.exp-projects strong { color: var(--text); display: block; margin-bottom: 0.2rem; }
.exp-projects a { color: var(--p-l); font-size: 0.85rem; font-weight: 600; }
.exp-projects a:hover { text-decoration: underline; }
.exp-projects p { font-size: 0.85rem; margin-top: 0.4rem; margin-bottom: 0; }
.badge-status {
  font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
  background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.3);
  color: var(--teal); font-weight: 700; margin-left: 0.5rem; vertical-align: middle;
}

/* ---------- RESUME SECTION ---------- */
.resume-sec { background: var(--bg2); padding-bottom: 6rem; }
.resume-card {
  display: flex; align-items: center; gap: 2.5rem;
  padding: 3rem; max-width: 800px; margin: 0 auto;
}
.rc-icon {
  font-size: 4rem; color: var(--p);
  filter: drop-shadow(0 0 20px rgba(0,212,255,0.3));
}
.rc-info h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.rc-info p { color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; }
@media(max-width: 640px) {
  .resume-card { flex-direction: column; text-align: center; padding: 2rem; }
}

/* ---------- CERTIFICATIONS ---------- */
.certifications { background: var(--bg); }
.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media(max-width: 1024px) {
  .certs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 640px) {
  .certs-grid { grid-template-columns: 1fr; }
}

/* Timeline */
.tl { position:relative; padding-left:2.25rem; }
.tl-line {
  position:absolute; left:.3rem; top:.5rem; bottom:.5rem; width:2px;
  background:linear-gradient(180deg,var(--p),var(--pk),transparent);
  border-radius:2px;
}
.tl-entry { position:relative; margin-bottom:1.75rem; }
.tl-node {
  position:absolute; left:-2.1rem; top:.6rem;
  width:13px; height:13px; border-radius:50%;
  background:var(--bg2); border:2px solid var(--dim);
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.active-entry .tl-node {
  background:var(--p); border-color:var(--p);
  box-shadow:0 0 12px rgba(0,212,255,.5);
}
.tl-body { padding:1.5rem 1.75rem; }
.tl-period { font-family:var(--mono); font-size:.72rem; color:var(--p); font-weight:500; }
.tl-body h4 { font-size:1.05rem; font-weight:700; margin:.35rem 0 .25rem; }
.tl-place { font-size:.85rem; color:var(--teal); display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; }
.tl-grade-pill {
  display:inline-block; padding:.25rem .75rem;
  background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.25);
  border-radius:var(--r-pill); font-size:.78rem; font-weight:700; color:var(--p-l);
}

/* Certs */
.cert-cards { display:flex; flex-direction:column; gap:.75rem; }
.cert-card {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem;
}
.cc-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:#fff;
}
.bg-blue    { background:linear-gradient(135deg,#3b82f6,#00d4ff); }
.bg-green   { background:linear-gradient(135deg,#00ff9d,#00d4ff); }
.bg-orange  { background:linear-gradient(135deg,#f97316,#f59e0b); }
.bg-pink    { background:linear-gradient(135deg,#00ff9d,#f43f5e); }
.bg-purple  { background:linear-gradient(135deg,#8b5cf6,#00d4ff); }
.bg-gold    { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.bg-linkedin{ background:linear-gradient(135deg,#0ea5e9,#3b82f6); }
.bg-dark    { background:linear-gradient(135deg,#374151,#111827); }
.cc-info { flex:1; min-width:0; }
.cc-info h4 { font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-info span { font-size:.76rem; color:var(--muted); font-family:var(--mono); }
.cc-badge {
  padding:.2rem .55rem; background:rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.2); border-radius:5px;
  font-size:.7rem; font-weight:700; color:var(--p-l);
  flex-shrink:0; font-family:var(--mono);
}
.cc-proof {
  flex-shrink: 0;
  display: inline-flex;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all .25s;
}
.cc-proof:hover {
  border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(0,212,255,.12);
  transform: translateY(-1px);
}
.cc-cert-img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.cert-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(2,8,16,.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cert-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.cert-modal-image {
  max-width: min(92vw, 980px);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg3);
  box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.12);
}
.cert-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(4,6,15,.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 700;
  transition: all .2s;
}
.cert-modal-close:hover {
  border-color: var(--p);
  color: var(--p);
  transform: scale(1.06);
}
.ach-list { display:flex; flex-direction:column; gap:.75rem; }
.ach-item {
  display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.25rem 1.5rem;
}
.ach-emoji { font-size:1.8rem; line-height:1; flex-shrink:0; }
.ach-item h4 { font-size:.95rem; font-weight:700; margin-bottom:.4rem; }
.ach-item p { font-size:.84rem; color:var(--muted); line-height:1.65; }
.ach-item strong { color:var(--text); }

/* ---------- CONTACT ---------- */
.contact { background:linear-gradient(180deg,var(--bg) 0%,var(--bg3) 100%); }
.contact-lead {
  text-align:center; color:var(--muted); font-size:1.05rem;
  line-height:1.8; max-width:520px; margin:0 auto 3.5rem;
}
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:2.5rem; align-items:start; }
.contact-links { display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.5rem; }
.cl-item {
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem; color:var(--text);
}
.cl-item:hover { transform:translateX(7px); }
.cl-icon {
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:#fff;
}
.cl-text { flex:1; min-width:0; }
.cl-text h4 { font-size:.9rem; font-weight:700; margin-bottom:.1rem; }
.cl-text span { font-size:.8rem; color:var(--muted); }
.cl-arrow { color:var(--dim); transition:all .3s; font-size:.85rem; }
.cl-item:hover .cl-arrow { color:var(--p); transform:translateX(4px); }
.contact-status {
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.4rem;
}
.cs-dot {
  width:10px; height:10px; background:var(--teal); border-radius:50%; flex-shrink:0;
  animation:blink 2s infinite;
}
.cs-title { font-size:.9rem; font-weight:700; }
.cs-sub { font-size:.8rem; color:var(--muted); margin-top:.1rem; }

/* Form */
.cf { padding:2.5rem; }
.cf h3 { font-size:1.25rem; font-weight:800; margin-bottom:2rem; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cf-field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.25rem; }
.cf-field label {
  font-size:.8rem; font-weight:600; color:var(--muted);
  letter-spacing:.4px; text-transform:uppercase;
}
.cf-field label span { color:var(--pk); }
.cf-input-wrap {
  position:relative; display:flex; align-items:stretch;
}
.cf-input-wrap > i {
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--dim); font-size:.85rem; pointer-events:none;
}
.cf-input-wrap.ta > i { top:1rem; transform:none; }
.cf-input-wrap input,
.cf-input-wrap textarea {
  width:100%; padding:.82rem .9rem .82rem 2.5rem;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:inherit;
  font-size:.9rem; transition:all .3s; outline:none; resize:none;
}
.cf-input-wrap input::placeholder, .cf-input-wrap textarea::placeholder { color:var(--dim); }
.cf-input-wrap input:focus, .cf-input-wrap textarea:focus {
  border-color:var(--p); background:rgba(0,212,255,.05);
  box-shadow:0 0 0 3px rgba(0,212,255,.12);
}
.cf-submit { width:100%; justify-content:center; padding:1rem; font-size:.98rem; margin-top:.25rem; }
.cf-status {
  margin-top:1rem; padding:.7rem 1rem; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:600; display:none;
}
.cf-status.ok  { display:block; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#10b981; }
.cf-status.err { display:block; background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3);  color:#ef4444; }

/* ---------- FOOTER ---------- */
.footer {
  background:var(--bg3); border-top:1px solid var(--border);
  padding:2.25rem 0; position:relative; z-index:1;
}
.footer-wrap {
  max-width:1240px; margin:0 auto; padding:0 1.75rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.ft-logo { font-size:1.3rem; font-weight:900; letter-spacing:-1px; }
.ft-copy { font-size:.83rem; color:var(--muted); }
.heart { color:var(--pk); }
.ft-social { display:flex; gap:.7rem; }
.ft-social a {
  width:36px; height:36px; border-radius:9px;
  background:var(--glass); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.9rem; transition:all .3s;
}
.ft-social a:hover { border-color:var(--p); color:var(--p); transform:translateY(-3px); }

/* ---------- BACK-TOP ---------- */
.back-top {
  position:fixed; bottom:2rem; right:2rem; width:46px; height:46px;
  background:var(--g-12); color:#fff; border:none; border-radius:12px;
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  z-index:900; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:all .3s; box-shadow:0 5px 22px rgba(0,212,255,.35);
}
.back-top.show { opacity:1; pointer-events:auto; transform:none; }
.back-top:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,212,255,.5); }

/* ---------- MAGNETIC ---------- */
.magnetic { transition:transform .3s ease; }

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .services { grid-template-columns:repeat(2,1fr); }
  .skills-grid { grid-template-columns:1fr; }
  .proj-grid { grid-template-columns:repeat(2,1fr); }
  .edu-layout { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
}
@media(max-width:900px){
  .stats-wrap { grid-template-columns:repeat(2,1fr); }
  .hero-wrap { grid-template-columns:1fr; text-align:center; }
  .hero-right { display:none; }
  .hero-btns,.hero-pills { justify-content:center; }
  .hero-sub { margin:0 auto 2rem; }
  .avail-badge { margin:0 auto 1.6rem; }
  .hero-name-wrap { align-items:center; }
}
@media(max-width:768px){
  .burger { display:flex; }
  .nav-center {
    position:fixed; top:0; right:-100%; width:72%; max-width:300px;
    height:100vh; background:rgba(4,6,15,.96); backdrop-filter:blur(24px);
    flex-direction:column; padding:5.5rem 2rem 2rem;
    border-left:1px solid var(--border); transition:right .35s ease; z-index:999;
  }
  .nav-center.open { right:0; }
  .nl { padding:.7rem 1rem; font-size:1rem; }
  .nav-hire { display:none; }
  .proj-grid { grid-template-columns:1fr; }
  .services { grid-template-columns:1fr 1fr; }
  .cf-row { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .stats-wrap { grid-template-columns:repeat(2,1fr); }
  .footer-wrap { flex-direction:column; text-align:center; }
  .services { grid-template-columns:1fr; }
}