@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --black:#000;--bg:#080b0f;--panel:#0d1219;--panel2:#111822;
  --border:#1a2332;--border2:#243040;
  --yellow:#ffe033;--yellow2:#ffc107;--yellow3:#ffaa00;
  --green:#39ff6e;--blue:#38bdf8;--purple:#a78bfa;
  --teal:#2dd4bf;--red:#f87171;--orange:#fb923c;
  --white:#f1f5f9;--gray:#8896a8;--gray2:#5a6a7a;--text:#c8d8e8;
  --mono:'JetBrains Mono',monospace;--sans:'Inter',sans-serif;
}
body{background:var(--black);color:var(--text);font-family:var(--sans);overflow-x:hidden;min-height:100vh}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,224,51,.006) 3px,rgba(255,224,51,.006) 4px)}

/* ── BOOTSTRAP OVERRIDES — kill white backgrounds globally ── */
.container,.container-fluid,.row,[class*="col-"]{background:transparent!important}

/* ── NAVBAR ── */
nav#topnav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,0.96);border-bottom:none;backdrop-filter:blur(16px);height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;transition:all .3s}
nav#topnav.scrolled{background:rgba(0,0,0,.99);border-bottom:1px solid rgba(255,224,51,.15)}
.nav-logo{font-family:var(--mono);font-size:1.2rem;font-weight:800;color:var(--yellow);text-decoration:none;letter-spacing:1px;text-shadow:0 0 16px rgba(255,224,51,.5)}
.cursor-nav{display:inline-block;width:3px;height:1.1rem;background:var(--yellow);animation:blink .8s step-end infinite;margin-left:1px;vertical-align:middle;box-shadow:0 0 8px var(--yellow)}
.nav-links{display:flex;list-style:none;gap:.1rem;align-items:center}
.nav-links a{font-family:var(--sans);font-size:.84rem;font-weight:500;color:var(--gray);text-decoration:none;padding:7px 14px;border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:5px;position:relative}
.nav-links a:hover{color:var(--yellow);background:rgba(255,224,51,.05)}
.nav-links a.active{color:var(--yellow);text-shadow:0 0 12px rgba(255,224,51,.6)}
.nav-links a.active::after{content:'';position:absolute;bottom:-19px;left:14px;right:14px;height:2px;background:var(--yellow);border-radius:2px;box-shadow:0 0 10px var(--yellow)}

/* ── HAMBURGER ── */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;z-index:1001}
.nav-hamburger span{display:block;width:24px;height:2px;background:var(--yellow);border-radius:2px;transition:all .3s ease;box-shadow:0 0 6px rgba(255,224,51,.4)}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── PAGE ── */
.page-content{padding-top:62px;background:var(--black)}
.page-content > div{background:var(--black)!important}
.page-content > div[style*="background"]{background:var(--black)!important}

/* ── SEC BANNER ── */
.sec-banner{background:var(--black);padding:3.5rem 0 2rem;border-bottom:none;position:relative;overflow:hidden}
.sec-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 100% at 10% 50%,rgba(255,224,51,.03) 0%,transparent 60%)}
.sec-banner .cmd-line{font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--white);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.sec-banner .dollar{color:var(--yellow);text-shadow:0 0 12px rgba(255,224,51,.5)}
.sec-banner .cmd-text{color:var(--yellow2)}
.cursor-blink{display:inline-block;width:3px;height:1.6rem;background:var(--yellow);animation:blink .8s step-end infinite;vertical-align:middle;margin-left:2px;box-shadow:0 0 10px var(--yellow)}
.sec-banner .sub{font-size:.92rem;color:var(--gray);margin-bottom:1rem}
.traffic-dots{display:flex;gap:8px}
.tdot{width:13px;height:13px;border-radius:50%}
.tdot.r{background:#ff5f57}.tdot.y{background:#ffbd2e}.tdot.g{background:#28c840}

/* ── BUTTONS ── */
.btn-yellow{font-family:var(--sans);font-size:.95rem;font-weight:700;background:var(--yellow);color:#000;border:2px solid var(--yellow);padding:12px 30px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 0 24px rgba(255,224,51,.25)}
.btn-yellow:hover{background:transparent;color:var(--yellow);box-shadow:0 0 36px rgba(255,224,51,.45);transform:translateY(-2px)}
.btn-dark{font-family:var(--sans);font-size:.95rem;font-weight:600;background:#111822;color:var(--white);border:2px solid var(--border2);padding:12px 30px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s}
.btn-dark:hover{background:var(--panel2);color:var(--yellow);border-color:rgba(255,224,51,.4);transform:translateY(-2px)}
.btn-green{font-family:var(--sans);font-size:.95rem;font-weight:700;background:var(--yellow);color:#000;border:2px solid var(--yellow);padding:13px 32px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s;box-shadow:0 0 24px rgba(255,224,51,.25)}
.btn-green:hover{background:transparent;color:var(--yellow);box-shadow:0 0 36px rgba(255,224,51,.45);transform:translateY(-2px)}

/* ── SKILL BAR ── */
.skill-bar-bg{background:var(--border2);border-radius:4px;height:4px;overflow:hidden}
.skill-bar-fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--yellow3));border-radius:4px;width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(255,224,51,.5)}

/* ── TIMELINE ── */
.timeline{position:relative;padding-left:2rem}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--yellow),transparent)}
.timeline-item{position:relative;margin-bottom:2rem;padding:1.5rem 1.5rem 1.5rem 2rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;transition:border-color .25s,box-shadow .25s}
.timeline-item:hover{border-color:rgba(255,224,51,.35);box-shadow:0 4px 24px rgba(255,224,51,.06)}
.timeline-item::before{content:'';position:absolute;left:-2.42rem;top:1.5rem;width:13px;height:13px;border:2px solid var(--yellow);background:var(--black);border-radius:50%;box-shadow:0 0 12px rgba(255,224,51,.6)}

/* ── FOOTER ── */
footer{background:var(--black);border-top:1px solid rgba(255,224,51,.08);text-align:center;padding:1.8rem;font-family:var(--mono);font-size:.76rem;color:var(--gray2)}
footer span{color:var(--yellow);text-shadow:0 0 10px rgba(255,224,51,.4)}

/* ── ANIMATIONS ── */
@keyframes blink{50%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes glowPulse{0%,100%{text-shadow:0 0 20px rgba(255,224,51,.4),0 0 40px rgba(255,224,51,.2)}50%{text-shadow:0 0 40px rgba(255,224,51,.8),0 0 80px rgba(255,224,51,.4)}}
@keyframes borderGlow{0%,100%{border-color:var(--border)}50%{border-color:rgba(255,224,51,.4);box-shadow:0 0 20px rgba(255,224,51,.08)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes particleFly{0%{opacity:0;transform:translateY(20px) scale(0) rotate(0deg)}30%{opacity:1}100%{opacity:0;transform:translateY(-80px) scale(1.5) rotate(180deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,224,51,.5)}50%{box-shadow:0 0 0 8px rgba(255,224,51,0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes gridScroll{0%{background-position:0 0}100%{background-position:55px 55px}}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.left{transform:translateX(-32px)}
.reveal.right{transform:translateX(32px)}
.reveal.scale{transform:scale(.94)}
.reveal.visible{opacity:1!important;transform:none!important}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}

/* ── TAGS ── */
.tag{font-size:.72rem;font-weight:600;padding:4px 12px;border-radius:20px;border:1px solid}
.tag-yellow{border-color:var(--yellow);color:var(--yellow);background:rgba(255,224,51,.07)}
.tag-blue{border-color:var(--blue);color:var(--blue);background:rgba(56,189,248,.07)}
.tag-purple{border-color:var(--purple);color:var(--purple);background:rgba(167,139,250,.07)}
.tag-teal{border-color:var(--teal);color:var(--teal);background:rgba(45,212,191,.07)}
.tag-orange{border-color:var(--orange);color:var(--orange);background:rgba(251,146,60,.07)}
.tag-green{border-color:var(--green);color:var(--green);background:rgba(57,255,110,.07)}
.tech-pill{font-size:.7rem;font-family:var(--mono);background:var(--panel2);border:1px solid var(--border2);color:var(--gray);padding:3px 10px;border-radius:4px;transition:all .2s}
.tech-pill:hover{border-color:rgba(255,224,51,.4);color:var(--yellow)}

.section-title-lg{font-family:var(--mono);font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:.5rem;background:linear-gradient(135deg,#ffe033,#ffaa00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-sub{font-size:1rem;color:var(--gray);margin-bottom:3rem}
.card-heading{font-family:var(--mono);color:var(--yellow);font-size:1.05rem;font-weight:700;margin-bottom:1.4rem;text-shadow:0 0 12px rgba(255,224,51,.35)}

/* ── MOBILE ── */
@media(max-width:768px){
  nav#topnav{border-bottom:none!important;padding:0 1.2rem}
  nav#topnav.scrolled{border-bottom:none!important}
  .sec-banner{border-bottom:none!important;padding:2.5rem 0 1.5rem}
  .sec-banner .cmd-line{font-size:1.1rem}
  .nav-hamburger{display:flex}
  .nav-links{
    display:flex!important;
    flex-direction:column;
    position:fixed;
    top:62px;left:0;right:0;
    background:#000;
    border-bottom:1px solid rgba(255,224,51,.12);
    padding:1rem 1.5rem 1.5rem;
    gap:.2rem;
    transform:translateY(-110%);
    transition:transform .3s ease;
    backdrop-filter:blur(16px);
    z-index:999;
  }
  .nav-links.mobile-open{transform:translateY(0)}
  .nav-links a{font-size:.95rem;padding:11px 14px;border-bottom:1px solid rgba(255,224,51,.06);border-radius:0}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a.active::after{display:none}
}