@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@300;400;600;700;800&family=Space+Mono:wght@400;700&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#04060f;
  --teal:#00d4ff;--bio:#7affde;--coral:#ff6b6b;--gold:#ffd166;
  --pink:#ff6eb4;--purple:#b57bff;--green:#39ff9a;--orange:#ff9f43;
  --foam:#e2f4ff;--muted:rgba(226,244,255,.5);
  --border:rgba(0,212,255,.22);--bh:rgba(0,212,255,.5);
  --card:rgba(8,18,44,.65);
  --fd:'Bebas Neue',cursive;--fb:'Syne',sans-serif;--fm:'Space Mono',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--foam);font-family:var(--fb);overflow-x:hidden;cursor:none;}
.cursor{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--teal);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;transition:width .2s,height .2s;}
.cursor-ring{position:fixed;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(0,212,255,.55);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .12s ease-out,top .12s ease-out,width .25s,height .25s;}
#bgcanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* NAV */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;background:rgba(4,6,15,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);}
.nav-brand{font-family:var(--fm);font-size:13px;letter-spacing:3px;color:var(--teal);text-decoration:none;}
.nav-brand span{color:var(--muted);font-weight:400;}
.nav-links{display:flex;gap:6px;}
.nav-link{padding:7px 16px;border-radius:30px;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border:1px solid transparent;background:transparent;text-decoration:none;transition:all .3s;cursor:none;}
.nav-link:hover,.nav-link.active{color:var(--teal);border-color:var(--bh);background:rgba(0,212,255,.07);}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-status{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:9px;color:var(--bio);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--bio);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px var(--bio)}50%{opacity:.3}}
.cv-btn{padding:8px 20px;border-radius:30px;font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,var(--pink),var(--purple),var(--teal));color:#000;border:none;cursor:none;transition:opacity .3s,transform .2s;text-decoration:none;display:inline-flex;align-items:center;}
.cv-btn:hover{opacity:.85;transform:scale(1.04);}

/* TICKER */
.ticker-bar{position:fixed;top:64px;left:0;right:0;z-index:999;height:28px;overflow:hidden;background:linear-gradient(90deg,rgba(181,123,255,.08),rgba(0,212,255,.06),rgba(255,110,180,.08));border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;}
.ticker-track{display:flex;animation:ticker 24s linear infinite;white-space:nowrap;}
.ticker-item{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:0 18px;color:rgba(200,200,255,.5);}
.ticker-sep{color:var(--pink);opacity:.6;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* PAGE */
.page-content{padding-top:96px;position:relative;z-index:1;min-height:100vh;}

/* SECTIONS */
.section{padding:60px 40px;max-width:1100px;margin:0 auto;position:relative;z-index:1;}
.sec-eyebrow{font-family:var(--fm);font-size:9px;letter-spacing:5px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.sec-eyebrow::before{content:'';width:22px;height:1px;}
.eyebrow-teal{color:var(--teal);}
.eyebrow-teal::before{background:var(--teal);}
.eyebrow-pink{color:var(--pink);}
.eyebrow-pink::before{background:var(--pink);}
.eyebrow-gold{color:var(--gold);}
.eyebrow-gold::before{background:var(--gold);}
.eyebrow-purple{color:var(--purple);}
.eyebrow-purple::before{background:var(--purple);}
.eyebrow-green{color:var(--green);}
.eyebrow-green::before{background:var(--green);}
.sec-h{font-family:var(--fd);font-size:clamp(44px,5.5vw,72px);letter-spacing:6px;line-height:1;margin-bottom:32px;}
.sec-h .a{color:var(--teal);}

/* GLASS CARD */
.glass{background:var(--card);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:all .3s var(--ease);}
.glass:hover{border-color:var(--bh);transform:translateY(-3px);box-shadow:0 0 28px rgba(0,212,255,.14);}
.glass-top{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--bio),transparent);opacity:0;transition:.3s;}
.glass:hover .glass-top{opacity:1;}

/* TAGS */
.tag{display:inline-flex;padding:4px 12px;border-radius:20px;font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.t-t{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.4);color:var(--teal);}
.t-b{background:rgba(122,255,222,.12);border:1px solid rgba(122,255,222,.4);color:var(--bio);}
.t-c{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4);color:var(--coral);}
.t-g{background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.4);color:var(--gold);}
.t-p{background:rgba(181,123,255,.12);border:1px solid rgba(181,123,255,.4);color:var(--purple);}
.t-gr{background:rgba(57,255,154,.12);border:1px solid rgba(57,255,154,.4);color:var(--green);}
.t-o{background:rgba(255,159,67,.12);border:1px solid rgba(255,159,67,.4);color:var(--orange);}
.t-pk{background:rgba(255,110,180,.12);border:1px solid rgba(255,110,180,.4);color:var(--pink);}

/* BTNS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:30px;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:1px solid;cursor:none;background:transparent;transition:all .3s;text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--purple),var(--teal));color:#000;border:none;font-weight:800;}
.btn-primary:hover{opacity:.88;transform:scale(1.04);}
.btn-teal{border-color:var(--teal);color:var(--teal);}
.btn-teal:hover{background:rgba(0,212,255,.12);box-shadow:0 0 20px rgba(0,212,255,.3);}
.btn-bio{border-color:var(--bio);color:var(--bio);}
.btn-bio:hover{background:rgba(122,255,222,.1);}
.btn-gold{border-color:var(--gold);color:var(--gold);}
.btn-gold:hover{background:rgba(255,209,102,.1);}
.btn-pink{border-color:var(--pink);color:var(--pink);}
.btn-pink:hover{background:rgba(255,110,180,.1);}
.btn-purple{border-color:var(--purple);color:var(--purple);}
.btn-purple:hover{background:rgba(181,123,255,.1);}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal-l.visible{opacity:1;transform:translateX(0);}

/* SKILL BAR */
.skill-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.skill-lbl{width:130px;flex-shrink:0;font-family:var(--fm);font-size:9px;letter-spacing:1px;color:var(--muted);}
.skill-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.skill-fill{height:100%;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease);}
.skill-fill.on{transform:scaleX(1);}
.skill-pct{width:36px;text-align:right;font-family:var(--fm);font-size:9px;}

/* FOOTER */
.site-footer{position:relative;z-index:1;text-align:center;padding:28px 40px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(135deg,rgba(0,212,255,.04),rgba(181,123,255,.04));font-family:var(--fm);font-size:9px;letter-spacing:2px;color:rgba(226,244,255,.28);}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--teal),var(--purple));border-radius:2px;}

/* RESPONSIVE */
@media(max-width:900px){
  .navbar{padding:0 20px;}
  .section{padding:40px 20px;}
  .sec-h{font-size:38px;}
  .nav-status{display:none;}
}