/* ═══════════════════════════════════════════
   ESAC86 — CYBERPUNK STYLESHEET  ✦ NEON EDITION
   ═══════════════════════════════════════════ */

:root {
    --bg:       #0d0b1a;
    --bg2:      #110f22;
    --bg-card:  #17133a;
    --bg-card2: #1e1848;

    --purple:   #c044ff;
    --purple-d: #8b00ff;
    --purple-l: #dd88ff;
    --cyan:     #00f5ff;
    --cyan-d:   #00ccdd;
    --magenta:  #ff00cc;
    --magenta-l:#ff77ee;
    --pink:     #ff2d78;

    --white:    #f5f0ff;
    --light:    #cfc0f0;
    --muted:    #9080b8;

    --line:     rgba(192,68,255,0.35);
    --line-c:   rgba(0,245,255,0.28);

    --twitch:   #bf7fff;
    --youtube:  #ff4444;
    --discord:  #7b8dff;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family:'Rajdhani',sans-serif;
    background:var(--bg);
    color:var(--white);
    overflow-x:hidden;
    cursor:crosshair;
    background-image:
        radial-gradient(ellipse 70% 60% at 15% 15%, rgba(192,68,255,0.22) 0%, transparent 65%),
        radial-gradient(ellipse 60% 70% at 85% 70%, rgba(0,245,255,0.16) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 50% 100%, rgba(255,0,204,0.14) 0%, transparent 60%);
    background-attachment:fixed;
}

/* ── SCANLINES — very light ── */
.scanlines {
    pointer-events:none; position:fixed; inset:0; z-index:9998;
    background:repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,0.035) 3px, rgba(0,0,0,0.035) 4px
    );
}

/* ── VIGNETTE — soft ── */
.vignette {
    pointer-events:none; position:fixed; inset:0; z-index:9997;
    background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.5) 100%);
}

#particles { position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ══════════════════ BOOT ══════════════════ */
.boot-screen {
    position:fixed; inset:0; z-index:9999;
    background:#050311;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .6s ease,visibility .6s;
}
.boot-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.boot-inner { width:500px; max-width:90vw; }
.boot-logo {
    font-family:'Orbitron',sans-serif; font-size:2.5rem; font-weight:900;
    color:var(--cyan); letter-spacing:8px; margin-bottom:2rem;
    text-shadow:0 0 20px var(--cyan),0 0 60px var(--cyan),0 0 120px var(--cyan);
    animation:flickerIn .5s ease;
}
.boot-log {
    font-family:'Share Tech Mono',monospace; font-size:0.84rem;
    color:#00ff88; line-height:1.9; min-height:120px; margin-bottom:1.5rem;
    text-shadow:0 0 8px #00ff88;
}
.boot-bar-wrap { width:100%; height:4px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.boot-bar {
    height:100%; width:0%;
    background:linear-gradient(90deg,var(--purple),var(--cyan));
    box-shadow:0 0 16px var(--cyan),0 0 30px rgba(0,245,255,0.5);
    transition:width .05s linear;
}
@keyframes flickerIn { 0%,20%,40%,60%{opacity:0} 100%{opacity:1} }

/* ══════════════════ NAV ══════════════════ */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 2.5rem;
    background:rgba(13,11,26,0.9); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 40px rgba(192,68,255,0.2);
    opacity:0; transform:translateY(-20px);
    transition:opacity .6s ease,transform .6s ease;
}
.nav.visible { opacity:1; transform:translateY(0); }

.nav-left { display:flex; align-items:center; gap:1.5rem; }
.nav-logo {
    font-family:'Orbitron',monospace; font-weight:900; font-size:1.2rem;
    letter-spacing:4px; color:var(--cyan); text-decoration:none;
    text-shadow:0 0 16px var(--cyan),0 0 32px rgba(0,245,255,0.5);
}

/* ── GLITCH ── */
[data-glitch] { position:relative; }
[data-glitch]::before,[data-glitch]::after { content:attr(data-glitch); position:absolute; inset:0; opacity:0; }
[data-glitch]::before {
    color:var(--cyan); clip-path:polygon(0 0,100% 0,100% 40%,0 40%);
    animation:glitchTop 4s infinite;
}
[data-glitch]::after {
    color:var(--magenta); clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);
    animation:glitchBot 4s infinite;
}
@keyframes glitchTop {
    0%,90%,100%{opacity:0;transform:translate(0)}
    91%{opacity:1;transform:translate(-3px,-1px)}
    93%{opacity:1;transform:translate(3px,1px)}
    95%{opacity:0}
}
@keyframes glitchBot {
    0%,88%,100%{opacity:0;transform:translate(0)}
    89%{opacity:1;transform:translate(3px,2px)}
    91%{opacity:1;transform:translate(-3px,-2px)}
    93%{opacity:0}
}

.nav-status {
    font-family:'Share Tech Mono',monospace; font-size:.7rem; color:#00ff88;
    display:flex; align-items:center; gap:.4rem; letter-spacing:2px;
    text-shadow:0 0 8px #00ff88;
}
.status-dot {
    width:7px; height:7px; border-radius:50%;
    background:#00ff88; box-shadow:0 0 12px #00ff88;
    animation:blink 1.5s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-link {
    font-family:'Share Tech Mono',monospace; font-size:.8rem;
    color:var(--light); text-decoration:none; letter-spacing:2px;
    transition:color .3s,text-shadow .3s;
}
.nav-link:hover { color:var(--cyan); text-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,245,255,.4); }

/* ══════════════════ HERO ══════════════════ */
.hero {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; z-index:2; padding:7rem 2rem 4rem; overflow:hidden;
}

.hero-bg-grid {
    position:absolute; inset:0; z-index:0;
    background-image:
        linear-gradient(rgba(192,68,255,0.14) 1px,transparent 1px),
        linear-gradient(90deg,rgba(192,68,255,0.14) 1px,transparent 1px);
    background-size:50px 50px;
    animation:gridPulse 5s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.hero-glows { position:absolute; inset:0; z-index:0; pointer-events:none; }
.glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.6; animation:glowFloat 8s ease-in-out infinite; }
.glow-1 { width:550px; height:550px; background:var(--purple);  top:-200px; left:-120px; animation-delay:0s; }
.glow-2 { width:420px; height:420px; background:var(--cyan);    top:25%;    right:-100px; animation-delay:-3s; }
.glow-3 { width:380px; height:380px; background:var(--magenta); bottom:-120px; left:28%; animation-delay:-5s; }
@keyframes glowFloat {
    0%,100%{transform:translate(0,0) scale(1)}
    33%    {transform:translate(20px,-15px) scale(1.06)}
    66%    {transform:translate(-15px,10px) scale(.96)}
}

.hero-inner {
    display:grid; grid-template-columns:1fr 1fr; gap:4rem;
    max-width:1200px; width:100%;
    position:relative; z-index:1; align-items:center;
}

/* SYS TAG */
.sys-tag {
    font-family:'Share Tech Mono',monospace; font-size:.74rem; color:var(--cyan);
    letter-spacing:2px; margin-bottom:1.2rem;
    display:flex; align-items:center; gap:.3rem;
    opacity:0; animation:fadeUp .8s ease 1.5s forwards;
    text-shadow:0 0 12px var(--cyan);
}
.sys-blink { animation:blink .8s infinite; }
.sys-bracket { color:var(--purple-l); text-shadow:0 0 10px var(--purple); }

/* NAME */
.hero-name {
    font-family:'Orbitron',sans-serif; font-weight:900;
    font-size:clamp(4rem,7vw,6.5rem); line-height:.9;
    letter-spacing:-2px; margin-bottom:1.2rem;
    opacity:0; animation:fadeUp .8s ease 1.7s forwards;
}
.name-line {
    background:linear-gradient(135deg,#ffffff 0%,var(--purple-l) 55%,var(--cyan) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    display:block; filter:drop-shadow(0 0 14px rgba(192,68,255,.7));
}
.name-accent {
    background:linear-gradient(135deg,var(--cyan) 0%,var(--magenta) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    display:block;
    filter:drop-shadow(0 0 22px rgba(0,245,255,.9)) drop-shadow(0 0 44px rgba(255,0,204,.6));
}

/* ROLES */
.hero-roles {
    display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem;
    opacity:0; animation:fadeUp .8s ease 1.9s forwards;
}
.role-chip {
    font-family:'Share Tech Mono',monospace; font-size:.72rem;
    padding:.35rem .9rem; border-radius:2px; letter-spacing:2px; font-weight:700;
    transition:transform .3s,box-shadow .3s;
}
.role-chip:hover { transform:translateY(-3px); }
.role-dev {
    border:1px solid var(--purple); color:var(--purple-l);
    background:rgba(192,68,255,.18);
    box-shadow:0 0 15px rgba(192,68,255,.5),inset 0 0 15px rgba(192,68,255,.1);
    text-shadow:0 0 12px var(--purple);
}
.role-ops {
    border:1px solid var(--magenta); color:var(--magenta-l);
    background:rgba(255,0,204,.14);
    box-shadow:0 0 15px rgba(255,0,204,.5),inset 0 0 15px rgba(255,0,204,.1);
    text-shadow:0 0 12px var(--magenta);
}
.role-vt {
    border:1px solid var(--cyan); color:var(--cyan);
    background:rgba(0,245,255,.12);
    box-shadow:0 0 15px rgba(0,245,255,.5),inset 0 0 15px rgba(0,245,255,.1);
    text-shadow:0 0 12px var(--cyan);
}

/* BIO */
.hero-bio {
    font-size:1.1rem; font-weight:400; line-height:1.75; color:var(--light);
    margin-bottom:1.5rem; max-width:480px;
    opacity:0; animation:fadeUp .8s ease 2.1s forwards;
}
.hero-bio em { color:var(--cyan); font-style:normal; font-weight:600; text-shadow:0 0 10px rgba(0,245,255,.6); }
.bio-highlight {
    display:block; margin-top:.5rem; color:var(--purple-l); font-weight:700; letter-spacing:1px;
    text-shadow:0 0 14px var(--purple);
}

/* STACK */
.stack-display {
    display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:2rem;
    opacity:0; animation:fadeUp .8s ease 2.2s forwards;
}
.stack-label { font-family:'Share Tech Mono',monospace; font-size:.72rem; color:var(--muted); }
.stack-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.stag {
    font-family:'Share Tech Mono',monospace; font-size:.7rem;
    padding:.25rem .65rem; border-radius:2px;
    background:rgba(192,68,255,.14); border:1px solid rgba(192,68,255,.4);
    color:var(--purple-l); transition:all .25s; cursor:default;
    text-shadow:0 0 8px rgba(192,68,255,.6);
    box-shadow:0 0 8px rgba(192,68,255,.15);
}
.stag:hover {
    color:var(--white); border-color:var(--cyan);
    background:rgba(0,245,255,.14);
    box-shadow:0 0 18px rgba(0,245,255,.5);
    text-shadow:0 0 12px var(--cyan); transform:translateY(-3px);
}

/* CTAs */
.hero-ctas {
    display:flex; gap:1rem; flex-wrap:wrap;
    opacity:0; animation:fadeUp .8s ease 2.3s forwards;
}
.cta-primary,.cta-ghost {
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:'Orbitron',monospace; font-size:.74rem; font-weight:700;
    letter-spacing:2px; padding:.9rem 1.8rem; border-radius:3px;
    text-decoration:none; transition:all .3s;
    position:relative; overflow:hidden; cursor:pointer;
}
.cta-primary {
    background:linear-gradient(135deg,var(--purple-d),var(--purple));
    color:#fff; border:1px solid var(--purple-l);
    box-shadow:0 0 24px rgba(192,68,255,.6),0 0 48px rgba(192,68,255,.25);
    text-shadow:0 0 10px rgba(255,255,255,.5);
}
.cta-bg { display:none; }
.cta-primary:hover {
    background:transparent; color:var(--purple-l);
    box-shadow:0 0 36px rgba(192,68,255,.8),inset 0 0 30px rgba(192,68,255,.2);
    transform:translateY(-3px);
}
.cta-ghost {
    background:transparent; color:var(--cyan);
    border:1px solid var(--cyan);
    box-shadow:0 0 18px rgba(0,245,255,.35); text-shadow:0 0 10px var(--cyan);
}
.cta-ghost:hover {
    background:rgba(0,245,255,.12);
    box-shadow:0 0 34px rgba(0,245,255,.65),inset 0 0 20px rgba(0,245,255,.1);
    transform:translateY(-3px);
}

/* ── AVATAR ── */
.hero-right {
    display:flex; flex-direction:column; align-items:center; gap:2rem;
    opacity:0; animation:fadeLeft .8s ease 1.6s forwards;
}
@keyframes fadeLeft { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

.avatar-frame {
    position:relative; width:280px; height:280px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.avatar-hex-ring {
    position:absolute; inset:-12px; border-radius:50%;
    background:conic-gradient(var(--purple) 0deg,var(--cyan) 90deg,var(--magenta) 180deg,var(--purple) 270deg,var(--cyan) 360deg);
    animation:spin 5s linear infinite; z-index:0; filter:blur(1px);
    box-shadow:0 0 30px rgba(192,68,255,.5);
}
.avatar-hex-ring::after { content:''; position:absolute; inset:5px; border-radius:50%; background:var(--bg); }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.avatar-scan {
    position:absolute; width:100%; height:3px;
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    opacity:.85; z-index:3; animation:scan 3s ease-in-out infinite;
    box-shadow:0 0 18px var(--cyan),0 0 36px rgba(0,245,255,.5);
}
@keyframes scan { 0%{top:10%;opacity:0} 10%{opacity:.9} 90%{opacity:.9} 100%{top:90%;opacity:0} }

.avatar-img {
    width:260px; height:260px; border-radius:50%; object-fit:cover;
    position:relative; z-index:1;
    filter:saturate(1.4) contrast(1.1) brightness(1.08);
    transition:filter .3s;
    box-shadow:
        0 0 35px rgba(192,68,255,.65),
        0 0 70px rgba(0,245,255,.35),
        0 0 110px rgba(255,0,204,.2);
}
.avatar-frame:hover .avatar-img {
    filter:saturate(1.8) contrast(1.2) hue-rotate(10deg) brightness(1.12);
}

.avatar-glitch-overlay {
    position:absolute; inset:0; z-index:2; border-radius:50%;
    pointer-events:none; opacity:0; mix-blend-mode:screen;
    background:linear-gradient(45deg,transparent 40%,rgba(0,245,255,.25) 50%,transparent 60%);
}
.avatar-frame:hover .avatar-glitch-overlay { animation:avatarGlitch .3s steps(2) infinite; }
@keyframes avatarGlitch {
    0%{opacity:1;transform:translate(-3px,0) skewX(-2deg)}
    33%{transform:translate(3px,0) skewX(2deg)}
    66%{transform:translate(-1px,2px)}
    100%{opacity:0;transform:translate(0)}
}

.avatar-corner { position:absolute; width:20px; height:20px; z-index:4; border-color:var(--cyan); border-style:solid; box-shadow:0 0 10px var(--cyan); }
.avatar-corner.c1 { top:8px;    left:8px;   border-width:2px 0 0 2px; }
.avatar-corner.c2 { top:8px;    right:8px;  border-width:2px 2px 0 0; }
.avatar-corner.c3 { bottom:8px; left:8px;   border-width:0 0 2px 2px; }
.avatar-corner.c4 { bottom:8px; right:8px;  border-width:0 2px 2px 0; }

.avatar-data {
    position:absolute; right:-90px; top:50%; transform:translateY(-50%);
    font-family:'Share Tech Mono',monospace; font-size:.6rem; color:var(--cyan);
    letter-spacing:1px; display:flex; flex-direction:column; gap:.3rem;
    text-shadow:0 0 8px var(--cyan);
}
.avatar-data span::before { content:'> '; color:var(--purple-l); }

/* TERMINAL */
.terminal-box {
    width:100%; max-width:360px;
    background:rgba(5,3,20,.95); border:1px solid rgba(0,245,255,.45);
    border-radius:6px; overflow:hidden;
    box-shadow:0 0 30px rgba(0,245,255,.22),0 0 60px rgba(192,68,255,.12),inset 0 0 20px rgba(0,245,255,.03);
}
.term-header {
    display:flex; align-items:center; gap:.4rem; padding:.5rem .8rem;
    background:rgba(255,255,255,.05); border-bottom:1px solid rgba(0,245,255,.15);
}
.term-dot { width:10px; height:10px; border-radius:50%; }
.term-dot.r { background:#ff5f57; box-shadow:0 0 6px #ff5f57; }
.term-dot.y { background:#febc2e; box-shadow:0 0 6px #febc2e; }
.term-dot.g { background:#28c840; box-shadow:0 0 6px #28c840; }
.term-title { font-family:'Share Tech Mono',monospace; font-size:.68rem; color:var(--muted); margin-left:.5rem; }
.term-body { padding:.9rem; min-height:80px; font-family:'Share Tech Mono',monospace; font-size:.74rem; }
.term-prompt { color:var(--cyan); margin-right:.4rem; text-shadow:0 0 10px var(--cyan); }
.term-cmd    { color:#00ff88; text-shadow:0 0 10px #00ff88; }
.term-cursor { color:#00ff88; animation:blink .7s infinite; text-shadow:0 0 10px #00ff88; }
.term-output { margin-top:.3rem; }
.term-output div { line-height:1.85; color:var(--light); }
.term-output .ok  { color:#00ff88; text-shadow:0 0 6px #00ff88; }
.term-output .err { color:var(--pink); text-shadow:0 0 6px var(--pink); }
.term-output .inf { color:var(--cyan); text-shadow:0 0 6px rgba(0,245,255,.7); }

/* SCROLL HINT */
.scroll-hint {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
    font-family:'Share Tech Mono',monospace; font-size:.62rem;
    color:var(--cyan); letter-spacing:3px; text-shadow:0 0 10px var(--cyan);
    animation:floatFade 2s ease-in-out 3s infinite;
}
@keyframes floatFade {
    0%,100%{opacity:.4;transform:translateX(-50%) translateY(0)}
    50%    {opacity:1;  transform:translateX(-50%) translateY(6px)}
}
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--cyan),transparent); box-shadow:0 0 8px var(--cyan); }

/* ══════════════════ MARQUEE ══════════════════ */
.marquee-band {
    position:relative; z-index:2; overflow:hidden;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:rgba(192,68,255,.08); padding:.9rem 0;
    box-shadow:0 0 25px rgba(192,68,255,.12);
}
.marquee-track { display:flex; gap:3rem; white-space:nowrap; animation:marquee 20s linear infinite; }
.m-item {
    font-family:'Share Tech Mono',monospace; font-size:.76rem; color:var(--light);
    letter-spacing:2px; text-transform:uppercase; flex-shrink:0;
    display:flex; align-items:center; gap:.5rem;
}
.m-sym { color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════ SECTIONS ══════════════════ */
.section { position:relative; z-index:2; }
.section-dark {
    background:var(--bg2);
    box-shadow:inset 0 0 80px rgba(0,245,255,.05);
}
.section-inner { max-width:1100px; margin:0 auto; padding:6rem 2rem; }

.section-header { display:flex; align-items:flex-start; gap:2rem; margin-bottom:3.5rem; }
.sec-num {
    font-family:'Orbitron',monospace; font-size:5rem; font-weight:900;
    color:rgba(192,68,255,.25); line-height:1; flex-shrink:0; letter-spacing:-2px;
    text-shadow:0 0 40px rgba(192,68,255,.4);
}
.sec-num.c { color:rgba(0,245,255,.25); text-shadow:0 0 40px rgba(0,245,255,.4); }
.sec-label {
    font-family:'Share Tech Mono',monospace; font-size:.76rem;
    color:var(--purple-l); letter-spacing:3px; margin-bottom:.5rem;
    text-shadow:0 0 12px var(--purple);
}
.sec-label.c { color:var(--cyan); text-shadow:0 0 12px var(--cyan); }
.sec-title {
    font-family:'Orbitron',monospace; font-weight:900;
    font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:2px;
    background:linear-gradient(135deg,#ffffff 0%,var(--purple-l) 50%,var(--cyan) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    filter:drop-shadow(0 0 18px rgba(192,68,255,.6));
}
.sec-title.c {
    background:linear-gradient(135deg,#ffffff 0%,var(--cyan) 50%,var(--magenta) 100%);
    -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 0 18px rgba(0,245,255,.6));
}

.reveal {
    opacity:0; transform:translateY(30px);
    transition:opacity .7s ease,transform .7s ease;
    transition-delay:var(--delay,0s);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══════════════════ PROJECT CARDS ══════════════════ */
.projects-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:1.5rem; margin-bottom:4rem;
}
.project-card {
    background:var(--bg-card);
    border:1px solid rgba(192,68,255,.35);
    border-radius:6px; padding:1.8rem;
    position:relative; overflow:hidden;
    text-decoration:none; color:inherit;
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
    display:block; cursor:pointer;
    box-shadow:0 0 20px rgba(192,68,255,.1),inset 0 0 20px rgba(192,68,255,.04);
}
.pc-scan-line {
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    opacity:0; top:0;
}
.project-card:hover .pc-scan-line { animation:cardScan 1s ease forwards; }
@keyframes cardScan { 0%{top:0;opacity:0} 10%{opacity:.9} 90%{opacity:.9} 100%{top:100%;opacity:0} }
.project-card:hover {
    border-color:var(--purple); transform:translateY(-8px);
    background:var(--bg-card2);
    box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 50px rgba(192,68,255,.35),inset 0 0 30px rgba(192,68,255,.06);
}

.pc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.pc-icon { font-size:2rem; line-height:1; }
.pc-status {
    font-family:'Share Tech Mono',monospace; font-size:.64rem; letter-spacing:2px;
    color:#00ff88; display:flex; align-items:center; gap:.4rem; text-shadow:0 0 8px #00ff88;
}
.pc-status.wip { color:#ffbb00; text-shadow:0 0 8px #ffbb00; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#00ff88; box-shadow:0 0 10px #00ff88; animation:blink 1.5s infinite; }
.wip-dot  { width:6px; height:6px; border-radius:50%; background:#ffbb00; box-shadow:0 0 10px #ffbb00; animation:blink 2s infinite; }
.pc-name {
    font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:700;
    margin-bottom:.5rem; letter-spacing:1px; color:var(--white);
    text-shadow:0 0 15px rgba(192,68,255,.5);
}
.pc-desc { color:var(--light); font-size:.92rem; line-height:1.65; margin-bottom:1.2rem; }
.pc-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.ptag {
    font-family:'Share Tech Mono',monospace; font-size:.64rem; letter-spacing:1px;
    padding:.22rem .6rem; border-radius:2px;
    background:rgba(192,68,255,.18); border:1px solid rgba(192,68,255,.5); color:var(--purple-l);
    text-shadow:0 0 8px var(--purple); box-shadow:0 0 6px rgba(192,68,255,.2);
}
.ptag.c {
    background:rgba(0,245,255,.12); border-color:rgba(0,245,255,.45); color:var(--cyan);
    text-shadow:0 0 8px var(--cyan); box-shadow:0 0 6px rgba(0,245,255,.2);
}
.ptag.p {
    background:rgba(255,0,204,.12); border-color:rgba(255,0,204,.45); color:var(--magenta-l);
    text-shadow:0 0 8px var(--magenta); box-shadow:0 0 6px rgba(255,0,204,.2);
}
.pc-arrow { position:absolute; bottom:1.5rem; right:1.5rem; font-size:1.2rem; color:var(--muted); transition:all .3s; }
.project-card:hover .pc-arrow { color:var(--cyan); transform:translate(3px,-3px); text-shadow:0 0 12px var(--cyan); }

/* CORNERS */
.pc-corner,.plat-corner {
    position:absolute; width:14px; height:14px;
    border-style:solid; opacity:0; transition:opacity .3s;
}
.pc-corner   { border-color:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.plat-corner { border-color:var(--purple); box-shadow:0 0 8px var(--purple); }
.project-card:hover .pc-corner,
.platform-card:hover .plat-corner { opacity:1; }
.pc-corner.tl,.plat-corner.tl { top:6px;    left:6px;   border-width:1px 0 0 1px; }
.pc-corner.tr,.plat-corner.tr { top:6px;    right:6px;  border-width:1px 1px 0 0; }
.pc-corner.bl,.plat-corner.bl { bottom:6px; left:6px;   border-width:0 0 1px 1px; }
.pc-corner.br,.plat-corner.br { bottom:6px; right:6px;  border-width:0 1px 1px 0; }

/* SKILLS */
.skills-section { margin-top:1rem; }
.skills-label { font-family:'Share Tech Mono',monospace; font-size:.74rem; color:var(--muted); letter-spacing:3px; margin-bottom:1.5rem; }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.skill-block {
    background:var(--bg-card); border:1px solid rgba(192,68,255,.28);
    border-radius:4px; padding:1.3rem;
    transition:border-color .3s,box-shadow .3s,background .3s;
    box-shadow:0 0 10px rgba(192,68,255,.06);
}
.skill-block:hover { border-color:var(--purple); background:var(--bg-card2); box-shadow:0 0 30px rgba(192,68,255,.25); }
.sk-cat {
    font-family:'Share Tech Mono',monospace; font-size:.72rem; color:var(--cyan);
    letter-spacing:2px; margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem;
    text-shadow:0 0 12px var(--cyan);
}
.sk-sym { color:var(--purple-l); }
.sk-items { display:flex; flex-wrap:wrap; gap:.4rem; }
.sk-item {
    font-size:.82rem; font-weight:500; padding:.22rem .6rem;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
    border-radius:2px; color:var(--light); transition:all .25s;
}
.sk-item:hover {
    color:var(--white); border-color:var(--cyan);
    background:rgba(0,245,255,.14); box-shadow:0 0 12px rgba(0,245,255,.4);
    text-shadow:0 0 8px var(--cyan);
}

/* ══════════════════ DIVIDER ══════════════════ */
.cyber-divider { position:relative; z-index:2; display:flex; align-items:center; padding:0 2rem; }
.cd-line {
    flex:1; height:1px;
    background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
    box-shadow:0 0 8px rgba(192,68,255,.5);
}
.cd-diamond {
    width:14px; height:14px; background:var(--cyan); transform:rotate(45deg);
    flex-shrink:0; margin:0 1rem;
    box-shadow:0 0 25px var(--cyan),0 0 50px rgba(0,245,255,.5);
    animation:diamondPulse 2s ease-in-out infinite;
}
@keyframes diamondPulse {
    0%,100%{box-shadow:0 0 15px var(--cyan)}
    50%    {box-shadow:0 0 40px var(--cyan),0 0 80px rgba(0,245,255,.5)}
}

/* ══════════════════ PLATFORMS ══════════════════ */
.platforms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.platform-card {
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.12);
    border-radius:6px; padding:2rem 1.6rem;
    text-decoration:none; color:inherit;
    display:flex; flex-direction:column; gap:.8rem;
    position:relative; overflow:hidden;
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow:inset 0 0 20px rgba(0,0,0,.2);
}
.plat-glitch-bar { position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity .3s; }
.twitch  .plat-glitch-bar { background:linear-gradient(90deg,transparent,var(--twitch),transparent); box-shadow:0 0 12px var(--twitch); }
.youtube .plat-glitch-bar { background:linear-gradient(90deg,transparent,var(--youtube),transparent); box-shadow:0 0 12px var(--youtube); }
.discord .plat-glitch-bar { background:linear-gradient(90deg,transparent,var(--discord),transparent); box-shadow:0 0 12px var(--discord); }
.platform-card:hover .plat-glitch-bar { opacity:1; }

.platform-card.twitch:hover  { border-color:var(--twitch);  background:var(--bg-card2); box-shadow:0 20px 50px rgba(145,70,255,.2),0 0 50px rgba(191,127,255,.3); transform:translateY(-8px); }
.platform-card.youtube:hover { border-color:var(--youtube); background:var(--bg-card2); box-shadow:0 20px 50px rgba(255,0,0,.15),0 0 50px rgba(255,68,68,.25);    transform:translateY(-8px); }
.platform-card.discord:hover { border-color:var(--discord); background:var(--bg-card2); box-shadow:0 20px 50px rgba(88,101,242,.2),0 0 50px rgba(123,141,255,.3);  transform:translateY(-8px); }

.plat-icon { width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.plat-icon svg { width:26px; height:26px; }
.twitch-col  { background:rgba(191,127,255,.2); border:1px solid rgba(191,127,255,.45); color:var(--twitch);  box-shadow:0 0 18px rgba(191,127,255,.35); }
.youtube-col { background:rgba(255,68,68,.15);  border:1px solid rgba(255,68,68,.45);   color:var(--youtube); box-shadow:0 0 18px rgba(255,68,68,.3); }
.discord-col { background:rgba(123,141,255,.15);border:1px solid rgba(123,141,255,.45); color:var(--discord); box-shadow:0 0 18px rgba(123,141,255,.3); }

.plat-name   { font-family:'Orbitron',monospace; font-size:1.2rem; font-weight:700; letter-spacing:2px; color:var(--white); }
.plat-handle { font-family:'Share Tech Mono',monospace; font-size:.72rem; color:var(--muted); letter-spacing:1px; }
.plat-desc   { color:var(--light); font-size:.92rem; line-height:1.65; flex:1; }
.plat-cta    { font-family:'Orbitron',monospace; font-size:.7rem; letter-spacing:2px; font-weight:700; background:none!important; border:none!important; }
.plat-cta.twitch-col  { color:var(--twitch);  text-shadow:0 0 12px var(--twitch);  box-shadow:none; }
.plat-cta.youtube-col { color:var(--youtube); text-shadow:0 0 12px var(--youtube); box-shadow:none; }
.plat-cta.discord-col { color:var(--discord); text-shadow:0 0 12px var(--discord); box-shadow:none; }

/* ══════════════════ FOOTER ══════════════════ */
.footer {
    position:relative; z-index:2; padding:2rem 2.5rem 1.5rem;
    background:var(--bg2);
    border-top:1px solid var(--line);
    box-shadow:0 -1px 40px rgba(192,68,255,.15);
}
.footer-line { height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin-bottom:1.5rem; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
.foot-left { display:flex; flex-direction:column; gap:.3rem; }
.foot-logo {
    font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:900;
    letter-spacing:4px; color:var(--cyan);
    text-shadow:0 0 20px var(--cyan),0 0 45px rgba(0,245,255,.5);
}
.foot-sub  { font-family:'Share Tech Mono',monospace; font-size:.7rem; color:var(--muted); letter-spacing:2px; }
.foot-right { display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.foot-status {
    font-family:'Share Tech Mono',monospace; font-size:.72rem; color:#00ff88;
    display:flex; align-items:center; gap:.4rem; letter-spacing:2px; text-shadow:0 0 8px #00ff88;
}
.foot-built { font-family:'Share Tech Mono',monospace; font-size:.7rem; color:var(--muted); letter-spacing:1px; }

/* ══════════════════ KEYFRAMES ══════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:900px){
    .hero-inner { grid-template-columns:1fr; gap:3rem; }
    .hero-right { order:-1; }
    .hero-name  { font-size:clamp(3rem,10vw,5rem); }
    .platforms-grid { grid-template-columns:1fr; }
    .avatar-data { display:none; }
    .nav-links { gap:1.2rem; }
}
@media(max-width:600px){
    nav { padding:1rem; }
    .nav-links { display:none; }
    .section-inner { padding:4rem 1.2rem; }
    .projects-grid { grid-template-columns:1fr; }
    .skills-grid { grid-template-columns:1fr 1fr; }
    .footer-inner { flex-direction:column; gap:1rem; text-align:center; }
    .foot-right { align-items:center; }
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}