/* ═══════════════════════════════════════════════════════════
   Sanjay Kumar Shukla — Portfolio Stylesheet
   Author : Sanjay Kumar Shukla
   File   : css/styles.css
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & ROOT ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#080c18;
  --bg2:#0d1225;
  --card:#111827;
  --border:rgba(255,255,255,0.08);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --blue:#60a5fa;
  --purple:#a78bfa;
  --cyan:#22d3ee;
  --green:#4ade80;
  --pink:#f472b6;
  --orange:#fb923c;
  --yellow:#fbbf24;
  --grad1:linear-gradient(135deg,#3b82f6,#8b5cf6);
}
html{scroll-behavior:smooth;}
body{
  font-family:'Outfit',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  cursor:none;
}

/* ── CURSOR ───────────────────────────────────────────────── */
#cursor{
  position:fixed;width:36px;height:36px;
  border:2px solid rgba(96,165,250,0.6);
  border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:transform .15s;
}
#cdot{
  position:fixed;width:7px;height:7px;
  background:#60a5fa;border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
}

/* ── NAVBAR ───────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0 40px;height:68px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(8,12,24,0.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-ic{
  width:38px;height:38px;border-radius:50%;
  background:var(--grad1);display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;
}
.logo-nm{
  font-weight:600;font-size:15px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;
}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  color:var(--muted);text-decoration:none;
  padding:6px 13px;border-radius:8px;font-size:14px;font-weight:500;transition:all .2s;
}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,0.08);}
.nav-res{
  background:var(--grad1)!important;color:#fff!important;
  padding:8px 20px!important;border-radius:10px!important;font-weight:700!important;
}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:none;padding:4px;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:#fff;border-radius:2px;transition:all .3s;
}
.mob-nav{
  display:none;position:fixed;top:68px;left:0;right:0;
  background:rgba(8,12,24,0.98);backdrop-filter:blur(20px);
  padding:16px;flex-direction:column;gap:4px;
  border-bottom:1px solid var(--border);z-index:999;
}
.mob-nav.open{display:flex;}
.mob-nav a{
  color:var(--muted);text-decoration:none;
  padding:10px 14px;border-radius:8px;font-size:15px;font-weight:500;transition:all .2s;
}
.mob-nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}

/* ── LAYOUT UTILITIES ─────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 40px;}
section{padding:100px 0;}
.sec-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border:1px solid var(--border);
  border-radius:50px;font-size:13px;color:var(--muted);
  background:rgba(255,255,255,0.03);
}
.sec-badge::before{content:'✦';color:var(--blue);}
.sec-head{
  font-size:clamp(2rem,4vw,3rem);font-weight:800;
  color:#fff;text-align:center;margin-bottom:16px;
}
.sec-head span{
  background:var(--grad1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sec-sub{color:var(--muted);font-size:15px;text-align:center;margin-bottom:48px;}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary{
  padding:12px 24px;background:var(--grad1);color:#fff;
  border:none;border-radius:12px;font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:all .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.35);}
.btn-outline{
  padding:12px 22px;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.2);border-radius:12px;
  font-size:15px;font-weight:600;text-decoration:none;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.btn-outline:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);transform:translateY(-2px);}
.btn-li{
  padding:12px 22px;background:rgba(10,102,194,.13);color:#fff;
  border:1px solid rgba(10,102,194,.4);border-radius:12px;
  font-size:15px;font-weight:600;text-decoration:none;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;line-height:1;
}
.btn-li svg{flex-shrink:0;}
.btn-li:hover{background:rgba(10,102,194,.25);border-color:#0a66c2;transform:translateY(-2px);}
.btn-gh{
  padding:12px 22px;background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.15);border-radius:12px;
  font-size:15px;font-weight:600;text-decoration:none;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;line-height:1;
}
.btn-gh svg{flex-shrink:0;}
.btn-gh:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4);transform:translateY(-2px);}

/* ── FADE UP ANIMATION ────────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s;}
.fade-up.vis{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ══════════════════════════════════════════════════════════ */
#home{
  min-height:100vh;display:flex;align-items:center;
  padding-top:68px;position:relative;overflow:hidden;
}
#home::before{
  content:'';position:absolute;top:-200px;right:-200px;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%);
  pointer-events:none;
}
#home::after{
  content:'';position:absolute;bottom:-200px;left:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(59,130,246,.10),transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:center;width:100%;}
.avail-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border:1px solid rgba(74,222,128,.3);
  border-radius:50px;font-size:13px;color:var(--green);
  margin-bottom:20px;background:rgba(74,222,128,.05);
}
.avail-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.hero-hey{font-size:22px;margin-bottom:8px;}
.hero-name{
  font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;
  line-height:1.1;margin-bottom:14px;color:#fff;
}
.hero-name span{
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-role{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px;}
.hero-sub{font-size:15px;color:var(--blue);font-weight:500;margin-bottom:16px;}
.hero-desc{font-size:15px;color:var(--muted);line-height:1.75;max-width:520px;margin-bottom:28px;}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px;}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.stat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px 10px;text-align:center;transition:all .2s;
}
.stat-card:hover{border-color:rgba(96,165,250,.3);transform:translateY(-2px);}
.stat-icon{font-size:24px;margin-bottom:6px;}
.stat-num{font-size:22px;font-weight:800;color:#fff;}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:2px;}

/* Hero Photo */
.photo-wrap{position:relative;}
.otw-badge{
  position:absolute;top:-16px;right:20px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,12,24,.9);border:1px solid rgba(74,222,128,.45);
  border-radius:50px;padding:6px 14px;font-size:13px;color:var(--green);
  backdrop-filter:blur(10px);white-space:nowrap;
}
.otw-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite;
}
.photo-card{
  background:var(--card);border:2px solid rgba(255,255,255,.12);
  border-radius:20px;overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 0 0 1px rgba(139,92,246,.2),0 20px 60px rgba(0,0,0,.5);
  position:relative;
}
.photo-card img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.loc-badge{
  position:absolute;bottom:14px;left:14px;right:14px;
  background:rgba(8,12,24,.88);border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:6px;backdrop-filter:blur(10px);
}

/* ══════════════════════════════════════════════════════════
   SECTION 2 — ABOUT
   ══════════════════════════════════════════════════════════ */
#about{background:var(--bg2);}
.about-grid{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start;}
.about-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:24px;text-align:center;position:relative;width:100%;
}
.about-otw{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,12,24,.9);border:1px solid rgba(74,222,128,.45);
  border-radius:50px;padding:6px 14px;font-size:13px;color:var(--green);
  backdrop-filter:blur(10px);white-space:nowrap;
}
.about-avatar{
  width:180px;height:210px;border-radius:14px;
  margin:24px auto 16px;overflow:hidden;background:#1e3a5f;
}
.about-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.about-name{font-size:20px;font-weight:700;color:#fff;}
.about-role-t{font-size:14px;color:var(--blue);margin-top:4px;font-weight:500;}
.about-loc{
  font-size:13px;color:var(--muted);margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.about-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;background:rgba(96,165,250,.1);
  border:1px solid rgba(96,165,250,.2);border-radius:50px;
  font-size:13px;color:var(--blue);margin-top:14px;
}
.about-right h3{font-size:22px;font-weight:700;color:#fff;margin-bottom:14px;}
.about-right p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:14px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.info-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;}
.info-lbl{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:6px;
  display:flex;align-items:center;gap:6px;line-height:1;
}
.info-val{font-size:15px;font-weight:600;color:#fff;}
.social-btns{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}

/* ══════════════════════════════════════════════════════════
   SECTION 3 — EXPERIENCE
   ══════════════════════════════════════════════════════════ */
#experience{background:var(--bg);}
.timeline{position:relative;padding-left:80px;margin-top:40px;}
.timeline::before{
  content:'';position:absolute;left:36px;top:0;bottom:0;
  width:2px;background:linear-gradient(to bottom,#3b82f6,#8b5cf6,#ec4899);
}
.tl-item{position:relative;margin-bottom:32px;}
.tl-dot{
  position:absolute;left:-52px;top:24px;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;z-index:1;
}
.dot-c{background:#0891b2;}
.dot-p{background:#7c3aed;}
.dot-o{background:#d97706;}
.exp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;}
.exp-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.exp-title{font-size:20px;font-weight:700;color:#fff;}
.exp-date{
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:8px;padding:4px 12px;font-size:13px;color:var(--muted);white-space:nowrap;
}
.exp-co-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.exp-co{font-size:15px;font-weight:600;color:var(--blue);text-decoration:none;}
.exp-loc-t{color:var(--muted);font-size:14px;}
.badge-f{
  background:rgba(96,165,250,.15);color:var(--blue);
  border:1px solid rgba(96,165,250,.3);border-radius:50px;
  padding:3px 12px;font-size:12px;font-weight:600;
}
.badge-p{
  background:rgba(251,191,36,.15);color:var(--yellow);
  border:1px solid rgba(251,191,36,.3);border-radius:50px;
  padding:3px 12px;font-size:12px;font-weight:600;
}
.exp-desc{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px;}
.resp-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text);margin-bottom:10px;}
.resp-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.resp-list li{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;line-height:1.5;}
.resp-list li::before{content:'▸';color:var(--blue);flex-shrink:0;margin-top:1px;}
.tech-tags{display:flex;flex-wrap:wrap;gap:8px;}
.tech-tag{
  padding:4px 12px;background:rgba(255,255,255,.05);
  border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);
}

/* ══════════════════════════════════════════════════════════
   SECTION 4 — EDUCATION
   ══════════════════════════════════════════════════════════ */
#education{background:var(--bg2);}
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.edu-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:28px;position:relative;overflow:hidden;
}
.edu-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.edu-blue::before{background:linear-gradient(90deg,#60a5fa,#3b82f6);}
.edu-pink::before{background:linear-gradient(90deg,#f472b6,#ec4899);}
.edu-orange::before{background:linear-gradient(90deg,#fb923c,#f97316);}
.edu-green::before{background:linear-gradient(90deg,#4ade80,#22c55e);}
.edu-yr{font-size:15px;font-weight:700;margin-bottom:10px;}
.edu-blue .edu-yr{color:#60a5fa;}
.edu-pink .edu-yr{color:#f472b6;}
.edu-orange .edu-yr{color:#fb923c;}
.edu-green .edu-yr{color:#4ade80;}
.edu-deg{font-size:17px;font-weight:700;color:#fff;margin-bottom:6px;}
.edu-col{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
.edu-city{font-size:13px;color:var(--muted);margin-bottom:16px;}
.edu-grade{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text);}
.grade-dot{width:8px;height:8px;border-radius:50%;}
.edu-blue .grade-dot{background:#60a5fa;}
.edu-pink .grade-dot{background:#f472b6;}
.edu-orange .grade-dot{background:#fb923c;}
.edu-green .grade-dot{background:#4ade80;}

/* ══════════════════════════════════════════════════════════
   SECTION 5 — SKILLS
   ══════════════════════════════════════════════════════════ */
#skills{background:var(--bg);}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sk-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;position:relative;overflow:hidden;}
.sk-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.sk-front::before{background:linear-gradient(90deg,#60a5fa,#06b6d4);}
.sk-back::before{background:linear-gradient(90deg,#f472b6,#ec4899);}
.sk-devops::before{background:linear-gradient(90deg,#4ade80,#22c55e);}
.sk-ai::before{background:linear-gradient(90deg,#fb923c,#f97316);}
.sk-hd{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.sk-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;}
.si-front{background:linear-gradient(135deg,#1d4ed8,#0891b2);}
.si-back{background:linear-gradient(135deg,#be185d,#7c3aed);}
.si-devops{background:linear-gradient(135deg,#15803d,#0891b2);}
.si-ai{background:linear-gradient(135deg,#b45309,#d97706);}
.sk-title{font-size:18px;font-weight:700;color:#fff;}
.bar-w{margin-bottom:14px;}
.bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.bar-nm{font-size:14px;color:var(--text);}
.bar-pct{font-size:13px;color:var(--muted);}
.bar-bg{height:5px;background:rgba(255,255,255,.08);border-radius:50px;overflow:hidden;}
.bar-fill{height:100%;border-radius:50px;}
.bf-front{background:linear-gradient(90deg,#60a5fa,#22d3ee);}
.bf-back{background:linear-gradient(90deg,#f472b6,#c084fc);}
.bf-devops{background:linear-gradient(90deg,#4ade80,#22d3ee);}
.bf-ai{background:linear-gradient(90deg,#fb923c,#fbbf24);}
.tools-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-top:20px;grid-column:1/-1;}
.tools-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:#fff;margin-bottom:18px;}
.tools-wrap{display:flex;flex-wrap:wrap;gap:10px;}
.tool-tag{
  padding:7px 16px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:50px;font-size:13px;color:var(--text);transition:all .2s;
}
.tool-tag:hover{border-color:rgba(96,165,250,.3);color:var(--blue);}

/* ══════════════════════════════════════════════════════════
   SECTION 6 — PROJECTS
   ══════════════════════════════════════════════════════════ */
#projects{background:var(--bg2);}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.proj-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column;
}
.proj-card:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.3);}
.proj-thumb{position:relative;height:180px;display:flex;align-items:center;justify-content:center;font-size:64px;}
.pt-h{background:linear-gradient(135deg,#be185d,#ef4444);}
.pt-m{background:linear-gradient(135deg,#1d4ed8,#0891b2);}
.pt-ml{background:linear-gradient(135deg,#7c3aed,#4f46e5);}
.proj-badge{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,.6);color:#fff;font-size:12px;
  padding:4px 10px;border-radius:6px;backdrop-filter:blur(8px);
}
.proj-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.proj-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;}
.proj-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px;flex:1;}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.proj-tag{padding:3px 10px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted);}
.proj-more{padding:3px 10px;background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.25);border-radius:6px;font-size:12px;color:var(--blue);}
.proj-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pj-code{
  padding:9px;background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:10px;color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;
}
.pj-code svg{flex-shrink:0;}
.pj-code:hover{background:rgba(255,255,255,.12);transform:translateY(-1px);}
.pj-view{
  padding:9px;border-radius:10px;color:#fff;text-decoration:none;
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;
}
.pj-view svg{flex-shrink:0;}
.pj-view:hover{opacity:.88;transform:translateY(-1px);}
.pv-red{background:linear-gradient(135deg,#f43f5e,#e11d48);}
.pv-ora{background:linear-gradient(135deg,#f97316,#ea580c);}
.pv-pur{background:linear-gradient(135deg,#8b5cf6,#7c3aed);}

/* ══════════════════════════════════════════════════════════
   SECTION 7 — BLOG
   ══════════════════════════════════════════════════════════ */
#blog{background:var(--bg);}
.blog-sub-txt{text-align:center;color:var(--muted);font-size:15px;margin-bottom:40px;}
.blog-sub-txt a{color:var(--blue);text-decoration:none;}
.blog-sub-txt a:hover{text-decoration:underline;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .3s;}
.blog-card:hover{transform:translateY(-4px);}
.blog-thumb{height:180px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;}
.bt-ai{background:linear-gradient(135deg,#0891b2,#06b6d4);}
.bt-q{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.bt-g{background:linear-gradient(135deg,#15803d,#4ade80);}
.blog-cat{
  position:absolute;top:12px;left:12px;
  background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:6px;backdrop-filter:blur(8px);
}
.blog-body{padding:20px;}
.blog-t1{font-size:15px;font-weight:700;color:#22d3ee;line-height:1.5;margin-bottom:14px;}
.blog-t2{font-size:15px;font-weight:700;color:#c084fc;line-height:1.5;margin-bottom:14px;}
.blog-t3{font-size:15px;font-weight:700;color:#4ade80;line-height:1.5;margin-bottom:14px;}
.blog-ft{display:flex;justify-content:space-between;align-items:center;}
.blog-time{font-size:13px;color:var(--muted);}
.blog-more{font-size:13px;color:var(--blue);text-decoration:none;}
.blog-more:hover{text-decoration:underline;}
.blog-cta{text-align:center;margin-top:36px;}
.blog-cta a{
  display:inline-block;padding:14px 32px;background:var(--grad1);
  color:#fff;border-radius:12px;font-size:14px;font-weight:700;
  text-decoration:none;letter-spacing:.05em;transition:all .2s;
}
.blog-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.3);}

/* ══════════════════════════════════════════════════════════
   SECTION 8 — CONTACT
   ══════════════════════════════════════════════════════════ */
#contact{background:var(--bg2);}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:start;}
.c-work{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:14px;}
.c-work h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:10px;}
.c-work p{font-size:14px;color:var(--muted);line-height:1.6;}
.c-link{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:16px;margin-bottom:10px;
  display:flex;align-items:center;gap:14px;text-decoration:none;transition:all .2s;
}
.c-link:hover{border-color:rgba(96,165,250,.35);transform:translateX(2px);}
.ci-ic{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;
}
.ci-gh-bg{background:rgba(255,255,255,.07);}
.ci-li-bg{background:rgba(10,102,194,.14);}
.ci-ma-bg{background:rgba(96,165,250,.1);}
.ci-lo-bg{background:rgba(244,114,182,.1);}
.ci-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:3px;}
.ci-val{font-size:14px;color:#fff;font-weight:500;}
.c-form{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:28px;position:relative;overflow:hidden;
}
.c-form::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6);
}
.form-g{margin-bottom:18px;}
.form-lbl{display:block;font-size:14px;color:var(--text);margin-bottom:8px;font-weight:500;}
.form-inp{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:10px;padding:12px 16px;color:#fff;
  font-family:'Outfit',sans-serif;font-size:14px;transition:border-color .2s;outline:none;
}
.form-inp:focus{border-color:rgba(96,165,250,.5);}
.form-inp::placeholder{color:rgba(148,163,184,.5);}
.form-ta{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:10px;padding:12px 16px;color:#fff;
  font-family:'Outfit',sans-serif;font-size:14px;transition:border-color .2s;
  outline:none;height:120px;resize:vertical;
}
.form-ta:focus{border-color:rgba(96,165,250,.5);}
.form-ta::placeholder{color:rgba(148,163,184,.5);}
.form-btn{
  width:100%;padding:14px;background:var(--grad1);color:#fff;border:none;
  border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;
  font-family:'Outfit',sans-serif;
}
.form-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.3);}
.form-btn.sent{background:linear-gradient(135deg,#15803d,#4ade80);}

/* ══════════════════════════════════════════════════════════
   SECTION 9 — RESUME
   ══════════════════════════════════════════════════════════ */
#resume-section{background:var(--bg);}
.resume-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;position:relative;
}
.resume-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6);
}
.resume-top{
  display:flex;align-items:center;gap:20px;padding:28px;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.res-av{width:70px;height:70px;border-radius:12px;overflow:hidden;flex-shrink:0;}
.res-av img{width:100%;height:100%;object-fit:cover;object-position:top;}
.res-nm{font-size:22px;font-weight:800;color:#fff;}
.res-role{color:var(--blue);font-size:14px;margin-top:2px;}
.res-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.rl{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;text-decoration:none;transition:color .2s;}
.rl:hover{color:var(--blue);}
.rl svg{flex-shrink:0;}
.res-body{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.res-exp-col{padding:24px;border-right:1px solid var(--border);}
.res-sk-col{padding:24px;}
.res-ct{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--blue);margin-bottom:18px;display:flex;align-items:center;gap:8px;
}
.res-ct::before{content:'';flex:1;height:1px;background:var(--blue);opacity:.3;}
.res-ei{margin-bottom:20px;padding-left:16px;border-left:2px solid rgba(96,165,250,.2);position:relative;}
.res-ei::before{content:'';position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--blue);}
.res-et{font-size:15px;font-weight:700;color:#fff;}
.res-ed{font-size:12px;color:var(--muted);float:right;}
.res-ec{font-size:13px;color:var(--blue);}
.res-edesc{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5;}
.res-si{margin-bottom:14px;}
.res-st{display:flex;justify-content:space-between;margin-bottom:4px;}
.res-sn{font-size:14px;color:var(--text);}
.res-sp{font-size:13px;color:var(--muted);}
.res-sb{height:4px;background:rgba(255,255,255,.08);border-radius:50px;overflow:hidden;}
.res-sf{height:100%;background:var(--grad1);border-radius:50px;}
.resume-btns{display:flex;justify-content:center;gap:16px;margin-top:28px;flex-wrap:wrap;}
.res-view{
  padding:12px 28px;background:transparent;border:1px solid rgba(255,255,255,.2);
  border-radius:12px;color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s;line-height:1;
}
.res-view:hover{background:rgba(255,255,255,.07);transform:translateY(-2px);}
.res-dl{
  padding:12px 28px;background:var(--grad1);border-radius:12px;color:#fff;
  font-size:14px;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s;line-height:1;
}
.res-dl:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.3);}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer{
  background:var(--card);border-top:1px solid var(--border);
  padding:24px 40px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.ft-brand{display:flex;align-items:center;gap:10px;}
.ft-nm{font-size:15px;font-weight:700;color:#fff;}
.ft-rl{font-size:13px;color:var(--muted);}
.ft-socials{display:flex;gap:12px;}
.ft-ic{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;text-decoration:none;transition:all .2s;border:1px solid var(--border);
}
.ft-gh{background:rgba(255,255,255,.06);color:#e2e8f0;border-color:rgba(255,255,255,.12);}
.ft-gh:hover{background:rgba(255,255,255,.14);transform:translateY(-3px);border-color:rgba(255,255,255,.3);}
.ft-li{background:rgba(10,102,194,.12);color:#0a66c2;border-color:rgba(10,102,194,.3);}
.ft-li:hover{background:rgba(10,102,194,.25);transform:translateY(-3px);border-color:#0a66c2;}
.ft-copy{font-size:13px;color:var(--muted);}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 5 Breakpoints
   ══════════════════════════════════════════════════════════ */

/* Tablet Landscape (≤1100px) */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr 360px;gap:40px;}
  .skills-grid{grid-template-columns:1fr 1fr;}
  .tools-card{grid-column:1/-1;}
  .proj-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
}

/* Tablet Portrait (≤900px) */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .photo-wrap{max-width:320px;margin:0 auto;}
  .about-grid{grid-template-columns:1fr;}
  .about-card{max-width:300px;margin:0 auto;}
  .proj-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .edu-grid{grid-template-columns:1fr 1fr;}
  .res-body{grid-template-columns:1fr;}
  .res-exp-col{border-right:none;border-bottom:1px solid var(--border);}
}

/* Mobile (≤768px) */
@media(max-width:768px){
  nav{padding:0 18px;height:60px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .mob-nav{top:60px;}
  .container{padding:0 18px;}
  section{padding:64px 0;}
  #home{padding-top:60px;}
  .hero-grid{grid-template-columns:1fr;gap:28px;text-align:center;}
  .photo-wrap{max-width:260px;margin:0 auto;}
  .hero-left{display:flex;flex-direction:column;align-items:center;}
  .hero-desc{text-align:left;max-width:100%;}
  .hero-btns{justify-content:center;gap:10px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .about-grid{grid-template-columns:1fr;gap:32px;}
  .about-card{max-width:280px;margin:0 auto;}
  .info-grid{grid-template-columns:1fr 1fr;}
  .skills-grid{grid-template-columns:1fr;}
  .tools-card{grid-column:auto;}
  .edu-grid{grid-template-columns:1fr;}
  .proj-grid{grid-template-columns:1fr;}
  .proj-btns{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .resume-top{flex-wrap:wrap;gap:14px;}
  .res-body{grid-template-columns:1fr;}
  .res-exp-col{border-right:none;border-bottom:1px solid var(--border);}
  .resume-btns{gap:10px;}
  .timeline{padding-left:46px;}
  .timeline::before{left:18px;}
  .tl-dot{left:-32px;width:34px;height:34px;font-size:10px;}
  .exp-hd{flex-direction:column;gap:8px;}
  .exp-co-row{flex-direction:column;align-items:flex-start;gap:6px;}
  .exp-card{padding:20px;}
  footer{flex-direction:column;text-align:center;align-items:center;padding:20px;gap:14px;}
  .sec-head{font-size:1.8rem;}
}

/* Small Mobile (≤540px) */
@media(max-width:540px){
  nav{padding:0 14px;}
  .logo-nm{font-size:14px;}
  .container{padding:0 14px;}
  section{padding:56px 0;}
  .hero-name{font-size:2rem;}
  .hero-role{font-size:17px;}
  .hero-sub{font-size:13px;}
  .hero-btns{flex-direction:column;align-items:stretch;gap:10px;}
  .btn-primary,.btn-outline,.btn-li,.btn-gh{width:100%;justify-content:center;}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .stat-card{padding:12px 8px;}
  .stat-num{font-size:18px;}
  .info-grid{grid-template-columns:1fr;}
  .social-btns{flex-direction:column;gap:10px;}
  .social-btns .btn-gh,.social-btns .btn-li{width:100%;justify-content:center;}
  .edu-card{padding:20px;}
  .proj-btns{grid-template-columns:1fr;}
  .proj-thumb{height:150px;font-size:48px;}
  .blog-thumb{height:150px;font-size:44px;}
  .c-form{padding:20px;}
  .resume-top{flex-direction:column;text-align:center;align-items:center;}
  .res-links{justify-content:center;flex-direction:column;align-items:center;gap:10px;}
  .resume-btns{flex-direction:column;align-items:center;width:100%;}
  .res-view,.res-dl{width:100%;justify-content:center;}
  .resume-card{border-radius:14px;}
  .tl-dot{left:-28px;width:30px;height:30px;font-size:9px;}
  .timeline{padding-left:40px;}
  .timeline::before{left:14px;}
  footer{padding:14px;}
  .ft-nm{font-size:14px;}
  .sec-head{font-size:1.6rem;}
  .sec-sub{font-size:14px;}
}

/* Tiny (≤380px) */
@media(max-width:380px){
  .hero-name{font-size:1.75rem;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-num{font-size:16px;}
  .stat-icon{font-size:18px;}
  .logo-nm{display:none;}
  nav{padding:0 12px;}
  .container{padding:0 12px;}
}