/* =============================================
   DESIGN TOKENS — DARK MODE (default)
   ============================================= */
:root,
[data-theme="dark"] {
  --bg:             #07080f;
  --bg-2:           #0d0f1c;
  --bg-3:           #111420;
  --surface:        rgba(255,255,255,0.04);
  --surface-2:      rgba(255,255,255,0.07);
  --border:         rgba(255,255,255,0.08);
  --border-hover:   rgba(255,255,255,0.18);

  --cyan:           #00d9f5;
  --magenta:        #e800a8;
  --cyan-dim:       rgba(0,217,245,0.12);
  --magenta-dim:    rgba(232,0,168,0.12);

  --text:           #eceff8;
  --text-muted:     #7b82a0;
  --text-faint:     #3a3f58;

  --grad:           linear-gradient(135deg, var(--cyan), var(--magenta));
  --grad-90:        linear-gradient(90deg, var(--cyan), var(--magenta));
  --grad-subtle:    linear-gradient(135deg, rgba(0,217,245,0.07), rgba(232,0,168,0.07));

  --shadow-glow:    0 0 40px rgba(0,217,245,0.15);
  --shadow-card:    0 8px 40px rgba(0,0,0,0.55);
  --shadow-modal:   0 24px 80px rgba(0,0,0,0.8);

  /* Canvas particle colours */
  --particle-color: "0,217,245";
  --particle-line:  "0,217,245";

  /* Toggle icon */
  --toggle-icon:    "\f186"; /* moon */
}

/* =============================================
   LIGHT MODE
   ============================================= */
[data-theme="light"] {
  --bg:             #f4f5ff;
  --bg-2:           #eaecfb;
  --bg-3:           #ffffff;
  --surface:        rgba(0,0,0,0.03);
  --surface-2:      rgba(0,0,0,0.06);
  --border:         rgba(0,0,0,0.09);
  --border-hover:   rgba(0,0,0,0.22);

  --cyan:           #007ac8;
  --magenta:        #c4006e;
  --cyan-dim:       rgba(0,122,200,0.1);
  --magenta-dim:    rgba(196,0,110,0.1);

  --text:           #0a0c1c;
  --text-muted:     #525878;
  --text-faint:     #adb3cc;

  --grad:           linear-gradient(135deg, #007ac8, #c4006e);
  --grad-90:        linear-gradient(90deg, #007ac8, #c4006e);
  --grad-subtle:    linear-gradient(135deg, rgba(0,122,200,0.06), rgba(196,0,110,0.06));

  --shadow-glow:    0 0 40px rgba(0,122,200,0.1);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.1);
  --shadow-modal:   0 24px 80px rgba(0,0,0,0.25);
}

/* =============================================
   RESET & BASE
   ============================================= */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; text-decoration:none; list-style:none; }

html { scroll-behavior:smooth; scroll-padding-top:80px; }

body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
  cursor:none;
  transition:background 0.4s ease, color 0.4s ease;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--grad); border-radius:99px; }

/* =============================================
   SCROLL PROGRESS
   ============================================= */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--grad); z-index:9999;
  box-shadow:0 0 8px var(--cyan);
  transition:width 0.08s linear;
}

/* =============================================
   CUSTOM CURSOR (desktop only)
   ============================================= */
.cursor,.cursor-follower { pointer-events:none; position:fixed; z-index:9998; transform:translate(-50%,-50%); border-radius:50%; transition:opacity .3s; }
.cursor { width:8px; height:8px; background:var(--cyan); }
.cursor-follower { width:32px; height:32px; border:1.5px solid rgba(0,217,245,.5); transition:left .12s ease,top .12s ease,width .25s,height .25s,border-color .25s; }
.cursor.hover { width:14px; height:14px; background:var(--magenta); }
.cursor-follower.hover { width:50px; height:50px; border-color:rgba(232,0,168,.4); }
@media(max-width:900px){ .cursor,.cursor-follower { display:none; } body { cursor:auto; } }

/* =============================================
   UTILITY
   ============================================= */
.fira { font-family:'Fira Code',monospace; }
.comment-sym { color:var(--text-faint); }
.skip-link {
  position:absolute;
  top:-48px;
  left:1rem;
  z-index:10001;
  padding:.75rem 1rem;
  border-radius:.75rem;
  background:var(--bg-3);
  color:var(--text);
  border:1px solid var(--border-hover);
  transition:top .2s ease;
}
.skip-link:focus {
  top:1rem;
}

/* =============================================
   REVEAL ANIMATIONS
   ============================================= */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* =============================================
   SECTION HEADER
   ============================================= */
.section-header { text-align:center; margin-bottom:4rem; }
.section-tag { display:inline-block; font-family:'Fira Code',monospace; font-size:.78rem; letter-spacing:.18em; color:var(--cyan); text-transform:uppercase; margin-bottom:.75rem; opacity:.85; }
.section-title {
  font-family:'Syne',sans-serif; font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:800; line-height:1.1; letter-spacing:-.03em;
  background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:.65rem;
}
.section-sub { color:var(--text-muted); font-size:1rem; font-weight:300; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.8rem; border-radius:99px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.92rem; font-weight:600; cursor:pointer; border:none; transition:all .28s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 4px 20px rgba(0,217,245,.18); }
.btn-primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 30px rgba(0,217,245,.32); }
.btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border-hover); }
.btn-outline:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); box-shadow:0 4px 20px var(--cyan-dim); }

/* =============================================
   HEADER
   ============================================= */
.header {
  position:fixed; top:1.1rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:2.5rem;
  background:rgba(7,8,15,.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); color:var(--text);
  padding:.6rem 1.6rem; border-radius:99px; z-index:1000; transition:background .3s,box-shadow .3s;
  max-width:calc(100% - 2rem);
}
[data-theme="light"] .header { background:rgba(244,245,255,.85); }
.header.scrolled { background:rgba(7,8,15,.96); box-shadow:0 4px 30px rgba(0,0,0,.4); }
[data-theme="light"] .header.scrolled { background:rgba(244,245,255,.98); box-shadow:0 4px 24px rgba(0,0,0,.12); }

.logo { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:800; color:var(--text); letter-spacing:-.02em; white-space:nowrap; transition:opacity .2s; }
.logo span { background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo:hover { opacity:.8; }

.nav-links { display:flex; gap:1.8rem; }
.nav-links li a { position:relative; color:var(--text-muted); font-size:.88rem; font-weight:500; transition:color .25s; }
.nav-links li a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1.5px; background:var(--grad); border-radius:99px; transition:width .28s ease; }
.nav-links li a:hover,
.nav-links li a.active { color:var(--text); }
.nav-links li a:hover::after,
.nav-links li a.active::after { width:100%; }

/* Header actions group */
.header-actions { display:flex; align-items:center; gap:.9rem; }

/* Theme Toggle */
.theme-toggle { background:none; border:none; cursor:pointer; padding:.3rem; display:flex; align-items:center; }
.toggle-track {
  width:46px; height:24px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--border-hover); display:flex; align-items:center;
  padding:2px; transition:background .35s; position:relative;
}
.toggle-thumb {
  width:20px; height:20px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; color:#fff; transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
[data-theme="light"] .toggle-thumb { transform:translateX(22px); }

.visit-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem 1.2rem; border-radius:99px; border:1.5px solid var(--border-hover);
  background:transparent; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;
  font-size:.82rem; color:var(--text); cursor:pointer; white-space:nowrap; transition:all .25s;
}
.visit-btn:hover { background:var(--grad); border-color:transparent; color:#fff; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav backdrop */
.nav-backdrop { display:none; position:fixed; inset:0; z-index:998; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); }
.nav-backdrop.active { display:block; }

/* =============================================
   ABOUT / HERO
   ============================================= */
.about {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:7rem 7% 5rem; position:relative; overflow:hidden;
}

/* Canvas particle background */
#heroCanvas {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.7;
}

/* Ambient glows */
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(90px); }
.orb-1 { width:480px; height:480px; background:var(--cyan); top:-160px; left:-160px; opacity:.18; animation:orbFloat 14s ease-in-out infinite; }
.orb-2 { width:380px; height:380px; background:var(--magenta); bottom:-120px; right:-120px; opacity:.15; animation:orbFloat 11s ease-in-out infinite reverse; }
.orb-3 { width:280px; height:280px; background:var(--cyan); top:40%; right:18%; opacity:.09; animation:orbFloat 17s ease-in-out infinite 4s; }
.grid-overlay {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
}

@keyframes orbFloat {
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(28px,-28px) scale(1.04); }
  66%{ transform:translate(-18px,18px) scale(.96); }
}

.about-container {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  gap:5rem; max-width:1200px; width:100%;
}

/* Info box */
.info-box {
  flex:1; display:flex; flex-direction:column; gap:1.8rem;
  animation:heroEntry .85s cubic-bezier(.4,0,.2,1) both;
}
@keyframes heroEntry { from{opacity:0;transform:translateY(36px);} to{opacity:1;transform:translateY(0);} }

.text .pre-heading { font-size:.82rem; color:var(--text-muted); margin-bottom:.5rem; letter-spacing:.04em; }
.text h1 { font-family:'Syne',sans-serif; font-size:clamp(2.6rem,6vw,5rem); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--text); }
.name-accent { background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text h3 { font-family:'Syne',sans-serif; font-size:clamp(1.1rem,2.5vw,1.55rem); font-weight:500; color:var(--text-muted); margin-top:.4rem; }
.text h3 .multiple-text { background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
.bio { font-size:.96rem; color:var(--text-muted); max-width:480px; line-height:1.8; font-weight:300; }
.bio strong { color:var(--text); font-weight:600; }

/* Stats */
.stats-row { display:flex; align-items:center; gap:2rem; }
.stat-item { text-align:center; }
.stat-number { font-family:'Syne',sans-serif; font-size:1.75rem; font-weight:800; background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.stat-label { font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.12em; margin-top:.3rem; }
.stat-divider { width:1px; height:38px; background:var(--border); }

/* Socials */
.socials { display:flex; gap:1rem; }
.socials a { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); color:var(--text-muted); font-size:1.1rem; transition:all .25s; }
.socials a:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); transform:translateY(-3px); }

/* Profile wrap */
.profile-wrap { position:relative; flex-shrink:0; animation:heroEntry .85s cubic-bezier(.4,0,.2,1) .18s both; }
.profile-ring { position:relative; width:320px; height:320px; }
.profile-ring::before {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:var(--grad); z-index:0; animation:spinGrad 8s linear infinite;
}
.profile-ring::after {
  content:''; position:absolute; inset:-24px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,217,245,.12),transparent 70%);
  z-index:-1; animation:orbFloat 7s ease-in-out infinite;
}
@keyframes spinGrad { from{filter:hue-rotate(0deg);} to{filter:hue-rotate(360deg);} }

.profile-spin { position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; z-index:1; }
.profile-img { position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:cover; border-radius:50%; border:3px solid var(--bg); backface-visibility:hidden; transition:opacity .6s ease,transform .8s cubic-bezier(.4,0,.2,1); }
.profile-img.active-img { opacity:1; transform:rotateY(0deg); }
.profile-img:not(.active-img) { opacity:0; transform:rotateY(180deg); }
.profile-spin.spin .profile-img.active-img { opacity:0; transform:rotateY(180deg); }
.profile-spin.spin .profile-img:not(.active-img) { opacity:1; transform:rotateY(0deg); }

/* Floating badges */
.float-badge {
  position:absolute; display:flex; align-items:center; gap:.4rem;
  padding:.4rem .9rem; border-radius:99px;
  background:var(--bg-3); border:1px solid var(--border-hover);
  backdrop-filter:blur(12px); font-size:.76rem; font-weight:600; color:var(--text);
  white-space:nowrap; z-index:10; box-shadow:var(--shadow-card);
}
.float-badge i { color:var(--cyan); font-size:.85rem; }
.badge-node { top:8%; right:-55px; animation:badgeFloat 4s ease-in-out infinite; }
.badge-react { bottom:22%; right:-65px; animation:badgeFloat 5s ease-in-out infinite 1.2s; }
.badge-db { bottom:6%; left:-25px; animation:badgeFloat 4.5s ease-in-out infinite .6s; }
@keyframes badgeFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

/* Scroll indicator */
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:1; }
.scroll-indicator span { font-size:.68rem; color:var(--text-faint); letter-spacing:.22em; text-transform:uppercase; }
.scroll-line { width:1px; height:38px; background:linear-gradient(to bottom,var(--cyan),transparent); animation:scrollDrop 2s ease-in-out infinite; }
@keyframes scrollDrop { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* =============================================
   SKILLS
   ============================================= */
.skills { min-height:100vh; padding:7rem 7%; background:var(--bg-2); position:relative; }
.skills::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(to right,transparent,var(--cyan),var(--magenta),transparent); opacity:.25; }

.skills-content { display:flex; align-items:center; gap:4rem; max-width:1200px; margin:0 auto; }
.skills-grid { flex:1; display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }

.skill-card {
  padding:1.8rem; background:var(--surface); border:1px solid var(--border);
  border-radius:1.4rem; display:flex; flex-direction:column; gap:.85rem;
  cursor:default; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
}
.skill-card::before { content:''; position:absolute; inset:0; background:var(--grad-subtle); opacity:0; transition:opacity .3s; border-radius:1.4rem; }
.skill-card:hover { border-color:var(--border-hover); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.skill-card:hover::before { opacity:1; }

.skill-icon-wrap { width:42px; height:42px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; position:relative; z-index:1; }
.backend-icon { background:var(--cyan-dim); color:var(--cyan); }
.frontend-icon { background:var(--magenta-dim); color:var(--magenta); }
.db-icon { background:var(--cyan-dim); color:var(--cyan); }
.tools-icon { background:var(--magenta-dim); color:var(--magenta); }

.skill-card h3 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--text); position:relative; z-index:1; }
.skill-card p { font-size:.84rem; color:var(--text-muted); line-height:1.65; font-weight:300; position:relative; z-index:1; }

.tech-pills { display:flex; flex-wrap:wrap; gap:.4rem; position:relative; z-index:1; margin-top:auto; }
.tech-pills span { padding:.18rem .65rem; border-radius:99px; font-family:'Fira Code',monospace; font-size:.68rem; color:var(--text-muted); border:1px solid var(--border); background:rgba(255,255,255,.02); transition:all .25s; }
.skill-card:hover .tech-pills span { border-color:rgba(0,217,245,.3); color:var(--cyan); }
[data-theme="light"] .skill-card:hover .tech-pills span { color:var(--cyan); border-color:rgba(0,122,200,.3); }

.skills-visual { flex-shrink:0; width:260px; }
.skills-img-wrap { position:relative; border-radius:1.4rem; overflow:visible; }
.skills-img-wrap img { width:100%; border-radius:1.4rem; border:1px solid var(--border); display:block; transition:all .35s; }
.skills-img-wrap:hover img { transform:scale(1.02); border-color:var(--border-hover); }
.img-glow { position:absolute; inset:-20px; background:radial-gradient(circle,var(--cyan-dim),transparent 70%); z-index:-1; border-radius:50%; }

/* =============================================
   PROJECTS
   ============================================= */
.projects { min-height:100vh; padding:7rem 7%; background:var(--bg); position:relative; }
.projects::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(to right,transparent,var(--magenta),var(--cyan),transparent); opacity:.25; }

.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; max-width:1200px; margin:0 auto; }
.project-card { background:var(--surface); border:1px solid var(--border); border-radius:1.4rem; overflow:hidden; transition:all .32s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.project-card:hover { border-color:var(--border-hover); transform:translateY(-6px); box-shadow:var(--shadow-card); }

.project-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg-2); }
.project-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.project-card:hover .project-img-wrap img { transform:scale(1.06); }

.placeholder-visual { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; background:var(--grad-subtle); }
.placeholder-visual i { font-size:2.8rem; background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; animation:spinGrad 10s linear infinite; }
.placeholder-visual span { font-family:'Fira Code',monospace; font-size:.72rem; color:var(--text-muted); letter-spacing:.12em; text-transform:uppercase; }

.project-overlay { position:absolute; inset:0; background:rgba(7,8,15,.88); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
[data-theme="light"] .project-overlay { background:rgba(244,245,255,.88); }
.project-card:hover .project-overlay { opacity:1; }
.overlay-links { display:flex; gap:.7rem; }
.overlay-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1.1rem; border-radius:99px; border:1.5px solid var(--border-hover); color:var(--text); font-size:.8rem; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; transition:all .25s; }
.overlay-btn:hover { background:var(--grad); border-color:transparent; color:#fff; }

.project-info { padding:1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.project-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.project-tags span { font-family:'Fira Code',monospace; font-size:.66rem; padding:.15rem .6rem; border-radius:99px; background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,217,245,.2); }
.project-placeholder .project-tags span { background:var(--magenta-dim); color:var(--magenta); border-color:rgba(232,0,168,.2); }
.project-info h3 { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); }
.project-info p { font-size:.83rem; color:var(--text-muted); line-height:1.65; font-weight:300; }

.projects-cta { text-align:center; margin-top:3rem; }

/* =============================================
   BLOG
   ============================================= */
.blog { min-height:80vh; padding:7rem 7%; background:var(--bg-2); position:relative; }
.blog::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(to right,transparent,var(--cyan),var(--magenta),transparent); opacity:.25; }

.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; max-width:1200px; margin:0 auto; }

.blog-card {
  background:var(--surface); border:1px solid var(--border); border-radius:1.4rem;
  overflow:hidden; display:flex; flex-direction:column;
  transition:all .32s cubic-bezier(.4,0,.2,1); position:relative;
}
.blog-card:hover,
.blog-card:focus-within { border-color:var(--border-hover); transform:translateY(-6px); box-shadow:var(--shadow-card); }
.blog-card-link {
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
}
.blog-card-link:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.blog-img-wrap { position:relative; }
.blog-cover {
  height:160px; display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; position:relative; overflow:hidden;
}
.blog-cover::after { content:''; position:absolute; inset:0; background:inherit; opacity:.15; }
.cover-1 { background:linear-gradient(135deg,#003d7a,#006494); color:#00d9f5; }
.cover-2 { background:linear-gradient(135deg,#3d0050,#6e0080); color:#e800a8; }
.cover-3 { background:linear-gradient(135deg,#003b30,#005c4b); color:#00d9f5; }
.blog-cover i { position:relative; z-index:1; filter:drop-shadow(0 0 20px currentColor); }

.blog-category {
  position:absolute; top:.85rem; left:.85rem;
  font-family:'Fira Code',monospace; font-size:.67rem; font-weight:500;
  padding:.22rem .7rem; border-radius:99px; background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px); color:#fff; letter-spacing:.08em; z-index:2;
}

.blog-content { padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.blog-meta { display:flex; gap:1rem; }
.blog-date,.blog-read { font-size:.74rem; color:var(--text-muted); display:flex; align-items:center; gap:.35rem; }
.blog-content h2,
.blog-content h3 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.4; transition:color .25s; }
.blog-card:hover .blog-content h2,
.blog-card:hover .blog-content h3,
.blog-card:focus-within .blog-content h2,
.blog-card:focus-within .blog-content h3 { color:var(--cyan); }
.blog-content p { font-size:.82rem; color:var(--text-muted); line-height:1.65; font-weight:300; }
.blog-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.6rem; }
.blog-tags { display:flex; gap:.35rem; }
.blog-tags span { font-family:'Fira Code',monospace; font-size:.65rem; padding:.15rem .55rem; border-radius:99px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.blog-arrow { width:30px; height:30px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--text-muted); transition:all .25s; }
.blog-card:hover .blog-arrow,
.blog-card:focus-within .blog-arrow { background:var(--grad); border-color:transparent; color:#fff; transform:translateX(3px); }

/* =============================================
   CONTACT
   ============================================= */
.contact { min-height:100vh; padding:7rem 7%; background:var(--bg); position:relative; }
.contact::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(to right,transparent,var(--cyan),var(--magenta),transparent); opacity:.25; }

.contact-container { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; max-width:1100px; margin:0 auto; align-items:start; }

.contact-info { display:flex; flex-direction:column; gap:1.8rem; }
.contact-intro { font-size:.95rem; color:var(--text-muted); line-height:1.82; font-weight:300; }
.contact-items { display:flex; flex-direction:column; gap:.9rem; }

.contact-item {
  display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:1.1rem; transition:all .28s;
}
.contact-item:hover { border-color:var(--cyan); background:var(--cyan-dim); transform:translateX(4px); }
.contact-icon { width:40px; height:40px; border-radius:.7rem; background:var(--cyan-dim); border:1px solid rgba(0,217,245,.2); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--cyan); flex-shrink:0; }
.wa-icon { background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.25); color:#25d366; }
.contact-detail { display:flex; flex-direction:column; gap:.12rem; }
.contact-label { font-family:'Fira Code',monospace; font-size:.67rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.12em; }
.contact-detail a { color:var(--text); font-size:.88rem; font-weight:500; transition:color .25s; }
.contact-item:hover .contact-detail a { color:var(--cyan); }

.contact-socials { display:flex; gap:.8rem; }
.contact-socials a { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); color:var(--text-muted); font-size:1.05rem; transition:all .25s; }
.contact-socials a:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); transform:translateY(-3px); }

.form-container { background:var(--surface); border:1px solid var(--border); border-radius:1.8rem; padding:2.4rem; }
.form-container h2 { font-family:'Syne',sans-serif; font-size:1.45rem; font-weight:700; background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:1.8rem; }

#contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.38rem; }
.form-group label { font-family:'Fira Code',monospace; font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }

.form-group input,.form-group textarea {
  padding:.82rem 1rem; background:var(--surface-2); border:1px solid var(--border);
  border-radius:.85rem; color:var(--text); font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.9rem; outline:none; resize:vertical; transition:all .28s;
}
.form-group input:focus,.form-group textarea:focus { border-color:var(--cyan); background:var(--cyan-dim); box-shadow:0 0 0 3px rgba(0,217,245,.08); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-faint); }

.submit-btn { width:100%; padding:.88rem; font-size:.92rem; }

.form-status { text-align:center; padding:.85rem; border-radius:.75rem; font-size:.86rem; font-weight:500; margin-top:.5rem; display:none; }
.form-status.success { display:block; background:rgba(0,220,100,.08); color:#00dc64; border:1px solid rgba(0,220,100,.2); }
.form-status.error { display:block; background:rgba(255,80,80,.08); color:#ff7070; border:1px solid rgba(255,80,80,.2); }

/* =============================================
   CV PASSWORD MODAL
   ============================================= */
.modal-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.active { opacity:1; pointer-events:all; }

.modal-box {
  background:var(--bg-3); border:1px solid var(--border-hover);
  border-radius:2rem; padding:2.8rem 2.4rem; max-width:420px; width:100%;
  box-shadow:var(--shadow-modal); position:relative;
  transform:translateY(24px) scale(.97);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
}
.modal-overlay.active .modal-box { transform:translateY(0) scale(1); }

.modal-close {
  position:absolute; top:1.1rem; right:1.1rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:50%;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); cursor:pointer; font-size:.9rem; transition:all .2s;
}
.modal-close:hover { background:var(--surface); color:var(--text); }

.modal-icon { font-size:2.6rem; background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.3rem; }
.modal-box h3 { font-family:'Syne',sans-serif; font-size:1.35rem; font-weight:800; color:var(--text); }
.modal-box p { font-size:.88rem; color:var(--text-muted); font-weight:300; line-height:1.6; max-width:300px; }

.modal-input-wrap { position:relative; width:100%; margin-top:.3rem; }
.modal-input-wrap input {
  width:100%; padding:.85rem 3.2rem .85rem 1.1rem;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:.9rem; color:var(--text); font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.95rem; outline:none; transition:all .25s;
}
.modal-input-wrap input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,217,245,.08); }
.modal-input-wrap input::placeholder { color:var(--text-faint); }
.pw-eye {
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.9rem;
  padding:.3rem; transition:color .2s;
}
.pw-eye:hover { color:var(--cyan); }

.modal-error { font-size:.82rem; color:#ff7070; min-height:1.1rem; font-weight:500; }
.modal-submit { width:100%; padding:.85rem; font-size:.95rem; }

/* =============================================
   FOOTER
   ============================================= */
footer { background:var(--bg-2); border-top:1px solid var(--border); padding:2.8rem 7%; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:1.4rem; max-width:1200px; margin:0 auto; }
.footer-logo { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.dot-accent { background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-nav { display:flex; gap:2.2rem; flex-wrap:wrap; justify-content:center; }
.footer-nav li a { color:var(--text-muted); font-size:.85rem; transition:color .22s; }
.footer-nav li a:hover { color:var(--text); }
.social-icons { display:flex; gap:.8rem; }
.social-icons a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); color:var(--text-muted); font-size:.95rem; transition:all .22s; }
.social-icons a:hover { border-color:var(--cyan); color:var(--cyan); }
.copyright { font-size:.76rem; color:var(--text-faint); font-family:'Fira Code',monospace; }

/* =============================================
   RESPONSIVE — ≤ 1100px
   ============================================= */
@media(max-width:1100px){
  .about-container { gap:3rem; }
  .profile-ring { width:280px; height:280px; }
  .badge-node { right:-30px; }
  .badge-react { right:-40px; }
  .skills-content { gap:3rem; }
  .skills-visual { width:220px; }
  .contact-container { gap:2.5rem; }
}

/* =============================================
   RESPONSIVE — ≤ 900px (tablets)
   ============================================= */
@media(max-width:900px){
  .about-container { flex-direction:column-reverse; gap:3rem; text-align:center; }
  .info-box { align-items:center; }
  .bio { max-width:100%; }
  .stats-row { justify-content:center; }
  .btn-group { justify-content:center; flex-wrap:wrap; }
  .socials { justify-content:center; }
  .profile-ring { width:260px; height:260px; }
  .badge-node { top:5%; right:-15px; }
  .badge-react { bottom:15%; right:-25px; }
  .badge-db { display:none; }

  .skills-content { flex-direction:column; align-items:stretch; }
  .skills-visual { width:100%; max-width:260px; margin:0 auto; }

  .contact-container { grid-template-columns:1fr; }

  /* Show hamburger, hide desktop nav */
  .nav-links {
    position:fixed; top:0; right:-100%; width:min(280px,85vw); height:100vh;
    flex-direction:column; background:var(--bg-3); border-left:1px solid var(--border);
    padding:5rem 2rem 2rem; gap:0; z-index:999; transition:right .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .nav-links.active { right:0; }
  .nav-links li { padding:.9rem 0; border-bottom:1px solid var(--border); }
  .nav-links li:last-child { border-bottom:none; }
  .nav-links li a { font-size:1.05rem; }
  .hamburger { display:flex; }
  .visit-btn { display:none; }
  .header { gap:1.2rem; }
}

/* =============================================
   RESPONSIVE — ≤ 640px (phones)
   ============================================= */
@media(max-width:640px){
  .about,.skills,.projects,.blog,.contact { padding:6rem 5% 4rem; }
  .profile-ring { width:220px; height:220px; }
  .float-badge { display:none; }
  .skills-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .section-title { font-size:2rem; }
  .contact-container { gap:2rem; }
  .scroll-indicator { display:none; }
}

/* =============================================
   RESPONSIVE — ≤ 480px (small phones)
   ============================================= */
@media(max-width:480px){
  .header { padding:.55rem 1rem; gap:.8rem; width:calc(100% - 1.5rem); top:.75rem; }
  .logo { font-size:1rem; }
  .header-actions { gap:.6rem; }
  .profile-ring { width:190px; height:190px; }
  .text h1 { font-size:2.2rem; }
  .stats-row { gap:1.2rem; }
  .stat-number { font-size:1.5rem; }
  .btn-group { flex-direction:column; width:100%; }
  .btn-group .btn,.btn-group a { width:100%; }
  .form-container { padding:1.6rem; }
  .modal-box { padding:2rem 1.6rem; border-radius:1.5rem; }
}

/* =============================================
   RESPONSIVE — ≤ 380px (tiny phones)
   ============================================= */
@media(max-width:380px){
  .text h1 { font-size:1.9rem; }
  .stats-row { gap:.8rem; }
  .stat-divider { height:28px; }
  .header { padding:.5rem .9rem; }
}