/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root{
  /* Primary palette */
  --p:#3b82f6;
  --p-dark:#2563eb;
  --p-glow:rgba(59,130,246,.12);
  --accent:#22d3ee;
  --accent-glow:rgba(34,211,238,.08);

  /* Backgrounds (dark theme) */
  --bg:#0a0f1a;
  --bg2:#111827;
  --bg3:#1a2236;

  /* Text hierarchy */
  --text:#cbd5e1;
  --muted:#64748b;
  --bright:#f1f5f9;

  /* Borders */
  --border:rgba(148,163,184,.12);
  --border-h:rgba(148,163,184,.25);

  /* Shared values */
  --r:10px;
  --t:.25s ease;
  --glass:rgba(17,24,39,.6);
}

/* ===== BASE ===== */
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
.container{max-width:1080px;margin:0 auto;padding:0 24px}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--p),var(--accent));z-index:200;width:0;transition:none}

/* ===== CURSOR GLOW (desktop only) ===== */
.cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:opacity .3s}

/* ===== BACK TO TOP ===== */
.back-to-top{position:fixed;bottom:28px;right:28px;width:44px;height:44px;border-radius:50%;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;opacity:0;transform:translateY(20px);transition:all .3s ease;text-decoration:none;color:var(--bright)}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{border-color:var(--p);background:var(--p-glow)}
.back-to-top svg{width:18px;height:18px}
.btt-ring{position:absolute;inset:-2px;border-radius:50%;width:48px;height:48px}
.btt-ring circle{fill:none;stroke:var(--p);stroke-width:2;stroke-dasharray:138;stroke-dashoffset:138;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .1s}

/* ===== NAVIGATION ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,15,26,.7);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:var(--t)}
.navbar.scrolled{border-bottom-color:var(--border);background:rgba(10,15,26,.9)}
.nav-container{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-logo{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:500;color:var(--bright);transition:var(--t)}
.nav-logo:hover{color:var(--p)}
.logo-bracket{color:var(--p)}
.nav-links{display:flex;list-style:none;gap:24px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;transition:var(--t);position:relative}
.nav-links a:not(.nav-cta):hover{color:var(--bright)}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--p);transition:width .3s ease}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-links a.active{color:var(--bright)}
.nav-links a.active::after{width:100%}
.nav-cta{background:var(--p)!important;color:#fff!important;padding:6px 16px;border-radius:6px;transition:all .25s ease!important}
.nav-cta:hover{background:var(--p-dark)!important;transform:translateY(-1px);box-shadow:0 4px 16px var(--p-glow)}

/* Hamburger toggle */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;width:28px;height:24px;position:relative}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--bright);position:absolute;left:3px;transition:all .3s ease}
.nav-toggle span:nth-child(1){top:4px}
.nav-toggle span:nth-child(2){top:11px}
.nav-toggle span:nth-child(3){top:18px}
.nav-toggle.active span:nth-child(1){top:11px;transform:rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:translateX(-10px)}
.nav-toggle.active span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:100px 24px 60px;overflow:hidden}
#particleCanvas{position:absolute;inset:0;z-index:0}
.hero-content{position:relative;z-index:1;max-width:720px;margin:0 auto}
.hero-badge{display:inline-block;font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-glow);border:1px solid rgba(34,211,238,.2);padding:4px 14px;border-radius:20px;margin-bottom:20px;letter-spacing:.5px;text-transform:uppercase}
.hero-name{font-size:clamp(2.8rem,7vw,4.5rem);font-weight:800;color:var(--bright);line-height:1.05;letter-spacing:-.02em;margin-bottom:12px}
.hero-role{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--muted);margin-bottom:4px;font-weight:400}
.hero-typing{font-family:'JetBrains Mono',monospace;font-size:clamp(.95rem,2vw,1.15rem);color:var(--muted);margin-bottom:8px;min-height:1.8em}
.typing-prefix{color:var(--muted)}
.typing-text{color:var(--accent)}
.typing-cursor{color:var(--accent);animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-desc{color:var(--muted);font-size:1.05rem;margin-bottom:36px;max-width:540px}

/* Hero metrics */
.hero-metrics{display:flex;align-items:center;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.hm{text-align:left}
.hm-num{font-size:1.8rem;font-weight:700;color:var(--bright);display:inline}
.hm-plus{font-size:1.8rem;font-weight:700;color:var(--p)}
.hm-label{display:block;font-size:.72rem;color:var(--muted);margin-top:1px;text-transform:uppercase;letter-spacing:.5px}
.hm-divider{width:1px;height:36px;background:var(--border)}

/* Hero actions */
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.btn{display:inline-block;padding:10px 22px;border-radius:8px;font-size:.88rem;font-weight:500;text-decoration:none;transition:var(--t);cursor:pointer;border:none}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:hover{background:var(--p-dark);transform:translateY(-1px);box-shadow:0 8px 24px var(--p-glow)}
.btn-ghost{color:var(--muted);border:1px solid var(--border);background:transparent}
.btn-ghost:hover{color:var(--bright);border-color:var(--border-h)}

/* Hero social */
.hero-social{display:flex;gap:12px}
.hero-social a{color:var(--muted);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);transition:var(--t);text-decoration:none}
.hero-social a:hover{color:var(--bright);border-color:var(--p);background:var(--p-glow)}

/* ===== SECTIONS (shared) ===== */
.section{padding:96px 0}
.section-alt{background:var(--bg2)}
.section-header{margin-bottom:48px}
.section-tag{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--p);display:block;margin-bottom:8px;letter-spacing:1px}
.section-title{font-size:2rem;font-weight:700;color:var(--bright)}
.section-desc{color:var(--muted);margin-top:8px;max-width:560px}

/* ===== ABOUT ===== */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about-lead{font-size:1.15rem;color:var(--bright);margin-bottom:16px;line-height:1.6}
.about-text p{margin-bottom:14px;color:var(--muted);font-size:.92rem}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-card{padding:18px;border:1px solid var(--border);border-radius:var(--r);transition:all .35s ease;background:var(--bg2);backdrop-filter:blur(8px);position:relative;overflow:hidden}
.about-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p),var(--accent));opacity:0;transition:opacity .35s}
.about-card:hover{border-color:var(--p);transform:translateY(-4px);box-shadow:0 0 0 1px var(--p),0 0 15px rgba(59,130,246,.1),0 12px 32px rgba(0,0,0,.3)}
.about-card:hover::before{opacity:1}
.ac-icon{font-size:1.4rem;margin-bottom:8px;color:var(--p)}
.about-card h3{font-size:.88rem;color:var(--bright);margin-bottom:4px}
.about-card p{font-size:.78rem;color:var(--muted);line-height:1.5}

/* ===== PROJECTS ===== */
.projects-list{display:flex;flex-direction:column;gap:32px}
.project{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;background:var(--bg2);backdrop-filter:blur(8px)}
.project:hover{border-color:var(--p);transform:translateY(-3px);box-shadow:0 0 0 1px var(--p),0 0 20px rgba(59,130,246,.15),0 20px 60px rgba(0,0,0,.3)}
/* Mouse leave: transitions handle the smooth 400ms reset */

.project-header{display:flex;align-items:center;gap:20px;padding:24px 28px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.01)}
.project-num{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;color:var(--p);opacity:.5}
.project-meta h3{font-size:1.1rem;color:var(--bright);margin-bottom:2px}
.project-type{font-size:.75rem;color:var(--accent);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.project-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:0}
.project-col{padding:24px 28px;border-right:1px solid var(--border)}
.project-col:last-child{border-right:none}
.project-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px}
.project-col p{font-size:.85rem;color:var(--text);line-height:1.6}
.impact-list{list-style:none}
.impact-list li{position:relative;padding-left:14px;margin-bottom:6px;font-size:.85rem;color:var(--text)}
.impact-list li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.project-tags{display:flex;flex-wrap:wrap;gap:6px;padding:16px 28px;border-top:1px solid var(--border);background:rgba(255,255,255,.01)}
.project-tags span{font-size:.7rem;color:var(--p);background:var(--p-glow);padding:3px 10px;border-radius:4px;font-weight:500}

/* ===== JOURNEY ===== */
.journey{position:relative;padding-left:28px}
.journey-track{position:absolute;left:5px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--p),var(--border) 80%)}
.journey-item{position:relative;margin-bottom:32px}
.journey-dot{position:absolute;left:-28px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--p);z-index:1;transition:var(--t)}
.journey-item:hover .journey-dot{background:var(--p);box-shadow:0 0 12px var(--p-glow)}
.journey-card{background:var(--bg2);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;transition:all .35s ease}
.journey-card:hover{border-color:var(--p);transform:translateX(6px);box-shadow:0 0 0 1px var(--p),0 0 12px rgba(59,130,246,.08),0 8px 24px rgba(0,0,0,.2)}
.jc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.jc-date{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted)}
.jc-badge{font-size:.65rem;background:var(--accent-glow);color:var(--accent);padding:2px 8px;border-radius:4px;font-weight:600;text-transform:uppercase}
.journey-card h3{font-size:1rem;color:var(--bright);margin-bottom:2px}
.jc-company{font-size:.85rem;color:var(--p);font-weight:500;display:block;margin-bottom:8px}
.journey-card p{font-size:.83rem;color:var(--muted);line-height:1.6}

/* ===== SKILLS & CERTIFICATIONS ===== */
.skills-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.skill-group{margin-bottom:24px}
.skill-group h3{font-size:.85rem;color:var(--bright);margin-bottom:10px;font-weight:600}
.skill-pills{display:flex;flex-wrap:wrap;gap:6px}
.skill-pills span{font-size:.75rem;color:var(--text);background:var(--bg3);padding:5px 12px;border-radius:6px;border:1px solid var(--border);transition:all .25s ease;cursor:default}
.skill-pills span:hover{border-color:var(--p);color:var(--bright);background:var(--p-glow);transform:translateY(-2px);box-shadow:0 4px 12px var(--p-glow)}
.certs-col h3{font-size:.85rem;color:var(--bright);margin-bottom:16px;font-weight:600}
.cert-list{display:flex;flex-direction:column;gap:12px}
.cert{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);transition:all .3s ease;background:var(--bg2);backdrop-filter:blur(8px)}
.cert:hover{border-color:var(--p);transform:translateX(4px);box-shadow:0 0 0 1px var(--p),0 0 10px rgba(59,130,246,.08),0 4px 16px rgba(0,0,0,.2)}
.cert-icon{font-size:1.3rem;display:flex;align-items:center}
.cert-icon img{border-radius:4px}
.cert strong{font-size:.85rem;color:var(--bright);display:block}
.cert span{font-size:.75rem;color:var(--muted)}
.cert-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.cert-note h3{font-size:.85rem;color:var(--bright);margin-bottom:6px;font-weight:600}
.cert-note p{font-size:.88rem;color:var(--text)}
.cert-note span{font-size:.78rem;color:var(--muted)}

/* ===== TECHNICAL WRITING / DOCS ===== */
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.doc-category{padding:24px;border:1px solid var(--border);border-radius:var(--r);transition:all .35s ease;background:var(--bg2);backdrop-filter:blur(8px)}
.doc-category:hover{border-color:var(--p);transform:translateY(-3px);box-shadow:0 0 0 1px var(--p),0 0 12px rgba(59,130,246,.08),0 8px 24px rgba(0,0,0,.2)}
.doc-category h3{font-size:.95rem;color:var(--bright);margin-bottom:14px}
.doc-category ul{list-style:none}
.doc-category li{position:relative;padding-left:14px;margin-bottom:8px;font-size:.82rem;color:var(--muted);line-height:1.5}
.doc-category li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ===== CONTACT ===== */
.contact-wrap{max-width:600px}
.contact-text{color:var(--muted);margin-bottom:32px;font-size:1rem}
.contact-links{display:flex;flex-direction:column;gap:14px}
.contact-link{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--r);text-decoration:none;transition:all .3s ease;background:var(--bg2);backdrop-filter:blur(8px)}
.contact-link:hover{border-color:var(--p);background:var(--p-glow);transform:translateX(6px);box-shadow:0 0 0 1px var(--p),0 0 12px rgba(59,130,246,.08),0 8px 24px rgba(0,0,0,.2)}
.contact-link span:first-child{font-size:1.3rem}
.contact-link svg{flex-shrink:0;color:var(--p)}
.contact-link strong{font-size:.9rem;color:var(--bright);display:block}
.contact-link div span{font-size:.82rem;color:var(--muted)}

/* ===== FOOTER ===== */
.footer{padding:28px 0;border-top:1px solid var(--border);text-align:center}
.footer p{color:var(--muted);font-size:.8rem}

/* ===== GRADIENT TEXT UTILITY ===== */
.gradient-text{background:linear-gradient(135deg,var(--p),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== ANIMATION CLASSES ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* ===== TILT EFFECT ===== */
.tilt-card{transition:transform .4s ease}

/* ===== RESPONSIVE: TABLET (768px) ===== */
@media(max-width:768px){
  /* Nav: hamburger menu */
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;padding:16px 24px;gap:14px}
  .nav-links.active{display:flex}
  .nav-toggle{display:block}

  /* About: single column */
  .about-layout{grid-template-columns:1fr}
  .about-cards{grid-template-columns:1fr 1fr}

  /* Projects: stacked columns with border separators */
  .project-body{grid-template-columns:1fr}
  .project-col{border-right:none;border-bottom:1px solid var(--border)}
  .project-col:last-child{border-bottom:none}

  /* Skills: single column */
  .skills-layout{grid-template-columns:1fr}

  /* Docs: single column */
  .docs-grid{grid-template-columns:1fr}

  /* Hero metrics: tighter, no dividers */
  .hero-metrics{gap:16px}
  .hm-divider{display:none}

  /* Sections: less padding */
  .section{padding:64px 0}
}

/* ===== RESPONSIVE: MOBILE (480px) ===== */
@media(max-width:480px){
  /* Hero metrics: vertical stack */
  .hero-metrics{flex-direction:column;align-items:flex-start;gap:12px}

  /* About cards: single column */
  .about-cards{grid-template-columns:1fr}

  /* Hero actions: full-width buttons */
  .hero-actions{flex-direction:column}
  .btn{text-align:center;width:100%}
}