/* ================================================================
   1. VARIABLES & RESET
   ================================================================ */
:root {
    --blue:       #1E90FF;
    --blue-dark:  #0066cc;
    --blue-glow:  rgba(30,144,255,.4);
    --cyan:       #00f5ff;
    --cyan-glow:  rgba(0,245,255,.5);
    --bg:         #000;
    --bg2:        #0a0a0a;
    --card:       #141414;
    --card-hover: #1a1a1a;
    --text:       #fff;
    --muted:      #ababab;
    --radius:     12px;
    --ease:       .4s cubic-bezier(.25,.8,.25,1);
    --mono:       'JetBrains Mono','Courier New',monospace;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    background:var(--bg); color:var(--text);
    font-family:'Poppins',sans-serif; font-size:16px; line-height:1.65;
    overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ================================================================
   2. SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:3px; }

/* ================================================================
   3. UTILITY
   ================================================================ */
.container { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ================================================================
   4. INTRO SCREEN
   ================================================================ */
#intro {
    position:fixed; inset:0; z-index:9999;
    background:#000; display:flex; align-items:center; justify-content:center;
    transition:opacity .8s ease, visibility .8s ease;
}
#intro.out { opacity:0; visibility:hidden; pointer-events:none; }

#introRain {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0; opacity:.1;
}
.intro-scanlines {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,245,255,.012) 2px,rgba(0,245,255,.012) 4px);
}
.intro-center {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* Logo */
.intro-logo {
    width:110px; height:110px; margin-bottom:20px;
    filter:drop-shadow(0 0 18px rgba(0,245,255,.6)) drop-shadow(0 0 36px rgba(30,144,255,.3));
    animation:iPulse 3s ease-in-out infinite;
}
.intro-logo svg { width:100%; height:100%; }
@keyframes iPulse {
    0%,100% { filter:drop-shadow(0 0 18px rgba(0,245,255,.6)) drop-shadow(0 0 36px rgba(30,144,255,.3)); }
    50%     { filter:drop-shadow(0 0 28px rgba(0,245,255,.9)) drop-shadow(0 0 56px rgba(30,144,255,.5)); }
}

/* Name */
.intro-name {
    font-size:40px; font-weight:700; letter-spacing:14px;
    text-shadow:0 0 28px rgba(30,144,255,.5);
    margin-bottom:14px;
    opacity:0; transform:translateY(10px);
    transition:opacity .6s, transform .6s;
}
.intro-name.on { opacity:1; transform:translateY(0); }

/* Status */
.intro-status {
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:10px; letter-spacing:3px;
    color:rgba(0,245,255,.45); text-transform:uppercase;
    margin-bottom:28px;
    opacity:0; transition:opacity .6s;
}
.intro-status.on { opacity:1; }
.intro-dot {
    width:6px; height:6px; border-radius:50%;
    background:#00f5ff; box-shadow:0 0 8px #00f5ff;
    animation:iBlink 1.4s ease-in-out infinite;
}

/* Binary */
.intro-binary {
    font-family:var(--mono); font-size:12px; letter-spacing:2px;
    color:rgba(0,245,255,.35); max-width:540px;
    word-break:break-all; line-height:1.9; min-height:22px;
    margin-bottom:14px; opacity:0; transition:opacity .5s;
}
.intro-binary.on { opacity:1; }

/* Translated message */
.intro-msg {
    font-family:var(--mono); font-size:19px; letter-spacing:2px;
    color:#fff; text-shadow:0 0 18px rgba(0,245,255,.5);
    min-height:28px; margin-bottom:36px;
    opacity:0; transition:opacity .5s;
}
.intro-msg.on { opacity:1; }

/* Caret */
.intro-caret { color:#00f5ff; animation:iBlink .7s step-end infinite; }
@keyframes iBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Enter button */
.intro-enter {
    font-family:var(--mono); font-size:16px; letter-spacing:4px;
    color:#00f5ff; cursor:pointer;
    padding:12px 36px; border:1px solid rgba(0,245,255,.25);
    border-radius:4px; background:rgba(0,245,255,.03);
    transition:all .3s; opacity:0; transform:translateY(10px);
    user-select:none;
}
.intro-enter.on { opacity:1; transform:translateY(0); }
.intro-enter:hover {
    background:rgba(0,245,255,.1); border-color:rgba(0,245,255,.6);
    box-shadow:0 0 24px rgba(0,245,255,.2), inset 0 0 24px rgba(0,245,255,.04);
    transform:translateY(-2px);
}
.intro-ps1 { color:var(--blue); margin-right:8px; }

/* ACCESS GRANTED flash */
.intro-granted {
    font-family:var(--mono); font-size:22px; font-weight:700;
    letter-spacing:6px; text-transform:uppercase;
    color:#00ff88;
    text-shadow:0 0 20px rgba(0,255,136,.7), 0 0 60px rgba(0,255,136,.3);
    opacity:0; transform:scale(.9);
    transition:none; position:absolute;
    pointer-events:none;
}
.intro-granted.on {
    animation:grantedFlash 1.2s ease forwards;
}
@keyframes grantedFlash {
    0%   { opacity:0; transform:scale(.9); }
    10%  { opacity:1; transform:scale(1.05); }
    20%  { opacity:.4; transform:scale(1); }
    30%  { opacity:1; transform:scale(1); }
    45%  { opacity:.3; }
    55%  { opacity:1; }
    80%  { opacity:1; transform:scale(1); }
    100% { opacity:.6; transform:scale(1); }
}

/* Site hidden / reveal */
#site.hidden { opacity:0; pointer-events:none; }
#site.reveal { opacity:1; transition:opacity .7s ease .15s; }

/* ================================================================
   5. NAV
   ================================================================ */
nav {
    padding:18px 0; display:flex; justify-content:space-between;
    align-items:center; position:relative; z-index:100;
}
.logo {
    width:200px; height:auto; flex-shrink:0;
    filter:drop-shadow(0 0 8px rgba(0,245,255,.5)) drop-shadow(0 0 18px rgba(30,144,255,.3));
    transition:filter .3s, transform .3s;
}
.logo:hover {
    filter:drop-shadow(0 0 14px rgba(0,245,255,.9)) drop-shadow(0 0 28px rgba(30,144,255,.5));
    transform:scale(1.04);
}

nav ul { display:flex; align-items:center; gap:6px; list-style:none; }
nav ul li a {
    display:flex; align-items:center; gap:6px;
    color:var(--muted); text-decoration:none;
    font-size:15px; font-weight:500; letter-spacing:.3px;
    padding:10px 20px; border-radius:10px;
    border:1px solid transparent; transition:all .3s;
}
nav ul li a:hover {
    color:#fff; border-color:rgba(30,144,255,.3);
    background:rgba(30,144,255,.08);
    box-shadow:0 0 14px rgba(30,144,255,.15);
}
.nav-num {
    font-size:10px; font-family:var(--mono);
    color:var(--blue); opacity:.7; transition:opacity .3s;
}
nav ul li a:hover .nav-num { opacity:1; }

/* Hamburger */
.nav-toggle {
    display:none; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; width:42px; height:42px;
    background:rgba(30,144,255,.08); border:1px solid rgba(30,144,255,.25);
    border-radius:10px; cursor:pointer; transition:all .3s; padding:0;
}
.nav-toggle:hover { background:rgba(30,144,255,.18); border-color:rgba(30,144,255,.6); box-shadow:0 0 14px rgba(30,144,255,.25); }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--blue); border-radius:2px; transition:all .3s; }
.nav-toggle span:nth-child(2) { width:12px; }

/* Close X */
.sidemenu-close {
    display:none; position:absolute; top:22px; right:22px;
    width:36px; height:36px; cursor:pointer;
    border:1px solid rgba(30,144,255,.3); border-radius:10px;
    background:rgba(30,144,255,.08); transition:all .3s;
}
.sidemenu-close:hover { background:rgba(30,144,255,.2); border-color:var(--blue); box-shadow:0 0 12px rgba(30,144,255,.3); }
.sidemenu-close span { position:absolute; top:50%; left:50%; width:16px; height:2px; background:var(--blue); border-radius:2px; }
.sidemenu-close span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg); }
.sidemenu-close span:nth-child(2) { transform:translate(-50%,-50%) rotate(-45deg); }

/* ================================================================
   6. HERO / HEADER
   ================================================================ */
#header {
    width:100%; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(30,144,255,.07) 0%,transparent 70%),var(--bg);
    position:relative; overflow:hidden;
}
#header::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(30,144,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(30,144,255,.035) 1px,transparent 1px);
    background-size:50px 50px;
}

.hero {
    display:flex; justify-content:space-between; align-items:center;
    gap:40px; padding:40px 0;
}
.hero-text { flex:1; }
.hero-tag {
    font-size:12px; letter-spacing:4px;
    color:var(--blue); text-transform:uppercase;
    margin-bottom:12px; opacity:.8;
}
.hero-text h1 {
    font-size:clamp(38px,5vw,64px);
    font-weight:700; line-height:1.15; letter-spacing:-1px;
}
.hero-text h1 span { color:var(--blue); text-shadow:0 0 28px rgba(30,144,255,.5); }
.hero-text h1::after {
    content:'|'; color:var(--blue);
    animation:blink 1s step-end infinite;
    margin-left:4px; font-weight:300;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-btns { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* Shared button styles */
.btn-fill {
    display:inline-block; padding:12px 34px;
    background:var(--blue); color:#fff;
    border-radius:var(--radius); text-decoration:none;
    font-weight:600; font-size:14px; letter-spacing:.5px;
    border:none; cursor:pointer;
    transition:var(--ease);
    box-shadow:0 4px 18px rgba(30,144,255,.4);
}
.btn-fill:hover { background:#3aa0ff; transform:translateY(-3px); box-shadow:0 8px 28px rgba(30,144,255,.6); }
.btn-fill.small { padding:12px 32px; margin-top:24px; font-size:14px; }

.btn-ghost {
    display:inline-block; padding:12px 34px;
    border:1.5px solid var(--blue); color:var(--text);
    border-radius:var(--radius); text-decoration:none;
    font-weight:500; font-size:14px; transition:var(--ease);
}
.btn-ghost:hover { background:rgba(30,144,255,.12); transform:translateY(-3px); box-shadow:0 4px 18px rgba(30,144,255,.2); }

.btn-outline-block {
    display:block; margin:48px auto 0; width:fit-content;
    border:1.5px solid var(--blue); padding:13px 50px;
    border-radius:var(--radius); text-decoration:none;
    color:var(--text); font-weight:500; font-size:14px;
    letter-spacing:.5px; transition:var(--ease);
    position:relative; overflow:hidden;
}
.btn-outline-block::before {
    content:''; position:absolute; top:0; left:-100%;
    width:100%; height:100%; background:var(--blue);
    transition:left .4s ease; z-index:-1;
}
.btn-outline-block:hover::before { left:0; }
.btn-outline-block:hover { box-shadow:0 4px 18px var(--blue-glow); }

/* ================================================================
   7. HOLOGRAM
   ================================================================ */
.holo {
    position:relative; width:640px; height:640px;
    flex-shrink:0; perspective:900px;
    animation:holoFloat 4s ease-in-out infinite;
}
@keyframes holoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.holo-particles {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none; opacity:.6;
}
.holo-ring {
    position:absolute; border-radius:50%;
    border:1px solid rgba(0,245,255,.2);
    top:50%; left:50%; transform:translate(-50%,-50%);
    box-shadow:0 0 10px rgba(0,245,255,.1);
    animation:ringPulse 3s ease-in-out infinite;
    pointer-events:none; z-index:1;
}
.holo-ring.r1 { width:460px; height:460px; }
.holo-ring.r2 { width:530px; height:530px; animation-delay:.6s; opacity:.5; }
.holo-ring.r3 { width:600px; height:600px; animation-delay:1.2s; opacity:.25; }
@keyframes ringPulse { 0%,100%{opacity:.3} 50%{opacity:.7} }

.holo-arc {
    position:absolute; border-radius:50%;
    top:50%; left:50%; transform:translate(-50%,-50%);
    pointer-events:none; z-index:2;
}
.holo-arc.a1 {
    width:490px; height:490px;
    border:2px solid transparent;
    border-top-color:var(--cyan); border-right-color:var(--cyan);
    box-shadow:0 0 12px rgba(0,245,255,.4);
    animation:arcSpin 5s linear infinite;
}
.holo-arc.a2 {
    width:570px; height:570px;
    border:1.5px solid transparent;
    border-bottom-color:var(--blue); border-left-color:var(--blue);
    opacity:.5; animation:arcSpin 9s linear infinite reverse;
}
@keyframes arcSpin { to{transform:translate(-50%,-50%) rotate(360deg)} }

.holo-ticks {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:2;
    animation:arcSpin 28s linear infinite; opacity:.65;
}

.holo-face {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:10; pointer-events:none;
    filter:drop-shadow(0 0 18px rgba(0,245,255,.6)) drop-shadow(0 0 36px rgba(0,245,255,.3));
    animation:facePulse 4s ease-in-out infinite;
}
@keyframes facePulse {
    0%,100%{filter:drop-shadow(0 0 18px rgba(0,245,255,.6)) drop-shadow(0 0 36px rgba(0,245,255,.3));}
    50%    {filter:drop-shadow(0 0 28px rgba(0,245,255,.9)) drop-shadow(0 0 56px rgba(0,245,255,.5));}
}

.holo-glitch { position:absolute; inset:0; pointer-events:none; z-index:13; opacity:0; }
.holo-glitch.active {
    opacity:1; animation:glitch .15s steps(3) forwards;
    background:repeating-linear-gradient(0deg,transparent,transparent 4px,rgba(0,245,255,.07) 4px,rgba(0,245,255,.07) 5px);
}
@keyframes glitch {
    0%  {clip-path:inset(10% 0 80% 0);transform:translate(-3px,0)}
    33% {clip-path:inset(40% 0 40% 0);transform:translate(3px,0);filter:hue-rotate(90deg)}
    66% {clip-path:inset(70% 0 10% 0);transform:translate(-2px,1px)}
    100%{clip-path:inset(0);transform:translate(0)}
}

.holo-lbl {
    position:absolute; font-family:var(--mono);
    font-size:8px; letter-spacing:1.5px;
    color:rgba(0,245,255,.6); text-transform:uppercase;
    white-space:nowrap; z-index:15; pointer-events:none;
}
.holo-lbl::before { content:'\2022 '; color:#00f5ff; text-shadow:0 0 6px #00f5ff; }
.tl { top:100px; left:16px; }
.tr { top:100px; right:16px; }
.bl { bottom:110px; left:16px; }
.br { bottom:110px; right:16px; }

.holo-base {
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
    width:200px; height:32px;
    background:radial-gradient(ellipse,rgba(0,245,255,.4) 0%,transparent 70%);
    filter:blur(8px); z-index:3; pointer-events:none;
    animation:basePulse 2s ease-in-out infinite;
}
.holo-base-line {
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    width:160px; height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,245,255,.8),transparent);
    z-index:4; pointer-events:none;
}
@keyframes basePulse { 0%,100%{opacity:.6;width:180px} 50%{opacity:1;width:240px} }

.holo-status {
    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:5px; z-index:15; pointer-events:none;
}
.holo-dot {
    width:5px; height:5px; border-radius:50%;
    background:#00f5ff; box-shadow:0 0 6px #00f5ff;
    animation:dotBlink 1.4s ease-in-out infinite;
}
.holo-dot:nth-child(2) { animation-delay:.25s; }
.holo-dot:nth-child(3) { animation-delay:.5s; }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.15} }
.holo-status-txt {
    font-family:var(--mono); font-size:8px;
    letter-spacing:2.5px; color:rgba(0,245,255,.45);
    margin-left:4px; text-transform:uppercase;
}

/* ================================================================
   8. SECTION TITLES
   ================================================================ */
.section-title {
    font-size:clamp(32px,5vw,52px);
    font-weight:700; color:var(--text);
    position:relative; display:inline-block;
    margin-bottom:8px;
}
.section-title::after {
    content:''; display:block;
    width:56px; height:3px;
    background:var(--blue); border-radius:2px;
    margin:10px 0 0;
    box-shadow:0 0 10px var(--blue-glow);
}

/* ================================================================
   9. ABOUT
   ================================================================ */
#about {
    padding:100px 0;
    background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%);
    color:var(--muted);
}
.about-grid { display:flex; gap:48px; align-items:flex-start; flex-wrap:wrap; }
.about-img { flex:0 0 33%; }
.about-img img {
    width:100%; border-radius:16px;
    border:2px solid rgba(30,144,255,.2);
    box-shadow:0 0 36px rgba(30,144,255,.1);
    transition:var(--ease);
}
.about-img img:hover {
    border-color:rgba(30,144,255,.5);
    box-shadow:0 0 56px rgba(30,144,255,.25);
    transform:scale(1.02);
}
.about-body { flex:1; min-width:0; }
.about-body > p { margin-bottom:24px; line-height:1.85; font-size:15px; }

/* Tabs */
.tabs { display:flex; gap:0; margin:24px 0 28px; border-bottom:2px solid rgba(255,255,255,.06); }
.tab {
    padding:8px 20px; font-size:14px; font-weight:500;
    cursor:pointer; color:var(--muted); background:none; border:none;
    position:relative; transition:color .3s; font-family:'Poppins',sans-serif;
}
.tab:hover { color:#fff; }
.tab.active { color:#fff; }
.tab::after {
    content:''; position:absolute; left:0; bottom:-2px;
    width:0; height:2px; background:var(--blue);
    box-shadow:0 0 8px var(--blue-glow); transition:.4s;
}
.tab.active::after { width:100%; }

.tab-panel { display:none; animation:fadeUp .35s ease; }
.tab-panel.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Timeline list */
.timeline { list-style:none; }
.timeline li {
    margin:14px 0; font-size:14px; line-height:1.7;
    padding-left:18px; position:relative;
}
.timeline li::before {
    content:'\25B9'; position:absolute; left:0;
    color:var(--blue); font-size:11px; top:3px;
}
.tl-date { color:var(--blue); font-weight:600; display:block; margin-bottom:2px; font-size:13px; }
.timeline li strong { color:#fff; font-weight:600; }

/* Skills grid */
.skills-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:4px; }
.skill-card {
    background:rgba(30,144,255,.04);
    border:1px solid rgba(30,144,255,.1);
    border-radius:10px; padding:14px 18px;
    transition:var(--ease);
}
.skill-card:hover {
    background:rgba(30,144,255,.08);
    border-color:rgba(30,144,255,.28);
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(30,144,255,.1);
}
.skill-card h3 {
    font-size:12px; font-weight:600;
    color:var(--blue); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:6px;
    display:flex; align-items:center; gap:7px;
}
.skill-card h3 i { font-size:13px; opacity:.8; }
.skill-card p { font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

/* ================================================================
   10. SERVICES
   ================================================================ */
#services { padding:100px 0; background:var(--bg); }
.cards-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px; margin-top:52px;
}
.card {
    background:var(--card); padding:36px 28px;
    border-radius:16px; border:1px solid rgba(255,255,255,.04);
    transition:var(--ease); position:relative; overflow:hidden; cursor:default;
}
.card::after {
    content:''; position:absolute;
    bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,transparent,var(--blue),transparent);
    transform:scaleX(0); transition:transform .4s;
}
.card:hover::after { transform:scaleX(1); }
.card i {
    font-size:40px; color:var(--blue);
    margin-bottom:20px; display:block; transition:var(--ease);
}
.card:hover i { color:#fff; text-shadow:0 0 18px var(--blue-glow); transform:scale(1.1); }
.card h3 { font-size:20px; font-weight:600; margin-bottom:12px; color:#fff; transition:color .3s; }
.card p { font-size:15px; color:var(--muted); line-height:1.75; }
.card:hover {
    background:var(--card-hover); transform:translateY(-6px);
    box-shadow:0 18px 36px rgba(30,144,255,.12);
    border-color:rgba(30,144,255,.18);
}
.card:hover h3 { color:var(--blue); }

/* ================================================================
   11. PORTFOLIO
   ================================================================ */
#portfolio { padding:100px 0; background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); }

/* Animated stats band */
.work-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
    margin-top:48px; padding:28px 24px;
    background:rgba(20,20,20,.6); border:1px solid rgba(30,144,255,.14);
    border-radius:16px; backdrop-filter:blur(6px);
}
.work-stats .stat { text-align:center; position:relative; }
.work-stats .stat:not(:last-child)::after {
    content:''; position:absolute; right:-8px; top:15%; height:70%;
    width:1px; background:rgba(255,255,255,.08);
}
.stat-num {
    display:block; font-family:var(--mono); font-size:34px; font-weight:700;
    color:var(--cyan); text-shadow:0 0 18px var(--cyan-glow); line-height:1.1;
}
.stat-label { display:block; margin-top:6px; font-size:12px; color:var(--muted); letter-spacing:.3px; }

/* Filter bar */
.work-filters { display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }
.filter-btn {
    background:transparent; border:1.5px solid rgba(255,255,255,.12);
    color:var(--muted); padding:9px 22px; border-radius:30px; cursor:pointer;
    font-family:var(--mono); font-size:13px; letter-spacing:.5px;
    transition:var(--ease);
}
.filter-btn:hover { border-color:var(--blue); color:var(--text); }
.filter-btn.active {
    background:var(--blue); border-color:var(--blue); color:#fff;
    box-shadow:0 4px 16px var(--blue-glow);
}

/* Cards */
.work-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px; margin-top:28px;
}
.work-card {
    border-radius:16px; position:relative; overflow:hidden; cursor:pointer;
    border:1px solid rgba(255,255,255,.04); transition:var(--ease);
    animation:cardIn .5s var(--d,0s) both;
}
@keyframes cardIn { from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.work-card.hide { display:none; }
.work-card:hover { box-shadow:0 18px 44px rgba(30,144,255,.22); border-color:rgba(30,144,255,.3); transform:translateY(-4px); }
.work-card img { width:100%; display:block; transition:transform .6s ease; aspect-ratio:16/10; object-fit:cover; }
.work-card:hover img { transform:scale(1.06); }

.work-overlay {
    width:100%; height:0;
    background:linear-gradient(to top,rgba(30,144,255,.95) 0%,rgba(0,0,0,.82) 100%);
    border-radius:16px; position:absolute; left:0; bottom:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    padding:0 28px; text-align:center;
    transition:height .5s cubic-bezier(.25,.8,.25,1);
}
.work-card:hover .work-overlay { height:100%; }
.work-cat {
    font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:var(--cyan); margin-bottom:10px;
}
.work-overlay h3 { font-size:19px; font-weight:600; margin-bottom:8px; }
.work-overlay p { font-size:13px; line-height:1.6; opacity:.92; }
.work-cta {
    margin-top:18px; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:12px; letter-spacing:1px; color:#fff;
    padding:9px 20px; border:1.5px solid rgba(255,255,255,.6); border-radius:30px;
    transition:var(--ease);
}
.work-card:hover .work-cta { border-color:#fff; }
.work-cta i { transition:transform .3s; }
.work-overlay:hover .work-cta i { transform:translateX(4px); }

/* Project detail modal (the slide) */
.pm-overlay {
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    padding:24px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.pm-overlay.open { opacity:1; visibility:visible; }
.pm-modal {
    position:relative; width:min(860px,100%); max-height:90vh; overflow-y:auto;
    background:linear-gradient(180deg,#101319 0%,#0a0c10 100%);
    border:1px solid rgba(30,144,255,.28); border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,245,255,.05);
    transform:translateY(40px) scale(.98); opacity:0;
    transition:transform .4s cubic-bezier(.25,.8,.25,1), opacity .4s ease;
}
.pm-overlay.open .pm-modal { transform:translateY(0) scale(1); opacity:1; }
.pm-close {
    position:absolute; top:16px; right:16px; z-index:3; width:40px; height:40px;
    border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.5);
    cursor:pointer; transition:var(--ease);
}
.pm-close span { position:absolute; top:50%; left:50%; width:16px; height:2px; background:#fff; border-radius:2px; }
.pm-close span:first-child { transform:translate(-50%,-50%) rotate(45deg); }
.pm-close span:last-child { transform:translate(-50%,-50%) rotate(-45deg); }
.pm-close:hover { border-color:var(--blue); background:var(--blue); box-shadow:0 0 16px var(--blue-glow); }
.pm-media { position:relative; }
.pm-media img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; border-radius:18px 18px 0 0; }
.pm-media::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,#101319 0%,transparent 45%); border-radius:18px 18px 0 0; }
.pm-cat {
    position:absolute; top:18px; left:18px; z-index:2;
    font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color:var(--cyan); background:rgba(0,0,0,.55); border:1px solid rgba(0,245,255,.3);
    padding:6px 14px; border-radius:20px;
}
.pm-body { padding:8px 36px 36px; position:relative; z-index:2; }
.pm-title { font-size:30px; font-weight:700; margin-bottom:6px; }
.pm-tagline { color:var(--blue); font-size:15px; font-weight:500; margin-bottom:18px; }
.pm-desc { color:#cfcfcf; font-size:15px; line-height:1.75; margin-bottom:24px; }
.pm-desc em { color:var(--cyan); font-style:italic; }
.pm-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-bottom:26px; }
.pm-metric {
    background:rgba(30,144,255,.07); border:1px solid rgba(30,144,255,.18);
    border-radius:12px; padding:16px 12px; text-align:center;
}
.pm-metric-v { display:block; font-family:var(--mono); font-size:20px; font-weight:700; color:var(--cyan); }
.pm-metric-l { display:block; margin-top:4px; font-size:11px; color:var(--muted); letter-spacing:.3px; }
.pm-stack { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.pm-badge {
    font-family:var(--mono); font-size:12px; color:#dceaff;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
    padding:7px 14px; border-radius:8px; transition:var(--ease);
}
.pm-badge:hover { border-color:var(--blue); color:#fff; }
.pm-actions { display:flex; gap:14px; flex-wrap:wrap; }
.pm-actions a { margin-top:0 !important; display:inline-flex; align-items:center; gap:9px; }
.pm-actions .btn-ghost { padding:14px 30px; }

/* ================================================================
   12. CONTACT
   ================================================================ */
#contact { padding:100px 0 0; background:var(--bg); }
.contact-grid { display:flex; gap:48px; flex-wrap:wrap; }
.contact-info { flex:0 0 36%; }
.contact-line {
    margin-top:18px; font-size:14px; color:var(--muted);
    display:flex; align-items:center; gap:10px;
}
.contact-line i { color:var(--blue); font-size:18px; width:20px; text-align:center; }
.contact-line a { color:var(--muted); text-decoration:none; transition:color .3s; }
.contact-line a:hover { color:var(--blue); }

.socials { margin-top:24px; display:flex; gap:12px; }
.socials a {
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.08);
    color:var(--muted); font-size:17px; text-decoration:none; transition:var(--ease);
}
.socials a:hover {
    border-color:var(--blue); color:var(--blue);
    background:rgba(30,144,255,.1); transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(30,144,255,.2);
}

.contact-form { flex:1; min-width:0; }
.contact-form input,
.contact-form textarea {
    width:100%; border:none; outline:none;
    background:var(--card); padding:14px 18px; margin-bottom:14px;
    color:var(--text); font-size:14px; border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.05);
    transition:border-color .3s, box-shadow .3s;
    font-family:'Poppins',sans-serif;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color:rgba(30,144,255,.5);
    box-shadow:0 0 0 3px rgba(30,144,255,.08);
}
.contact-form textarea { resize:vertical; min-height:130px; }
#msg { color:#4caf82; font-size:14px; margin-top:6px; display:block; }

/* Footer */
.footer {
    width:100%; text-align:center; padding:24px 20px;
    background:var(--card); font-size:14px; font-weight:300;
    color:var(--muted); margin-top:80px;
    border-top:1px solid rgba(255,255,255,.05);
}
.footer i { color:var(--blue); }
.footer-contact {
    display:flex; align-items:center; justify-content:center;
    gap:10px; margin-top:6px; font-size:12px;
}
.footer-contact a { color:var(--muted); text-decoration:none; transition:color .3s; }
.footer-contact a:hover { color:var(--blue); }
.footer-contact .dot { color:rgba(255,255,255,.15); }

/* ================================================================
   13. RESPONSIVE
   ================================================================ */
@media (max-width:900px) {
    .hero { flex-direction:column; text-align:center; padding:20px 0 40px; gap:20px; }
    .hero-btns { justify-content:center; }
    .hero-text { order:1; }
    .holo { order:2; width:400px; height:400px; margin:0 auto; }
    .holo-ring.r1 { width:280px; height:280px; }
    .holo-ring.r2 { width:325px; height:325px; }
    .holo-ring.r3 { width:370px; height:370px; }
    .holo-arc.a1 { width:300px; height:300px; }
    .holo-arc.a2 { width:350px; height:350px; }
    .logo { width:170px; }

    .nav-toggle { display:flex; }
    nav ul {
        display:flex; flex-direction:column; align-items:flex-start; gap:0;
        background:rgba(5,15,35,.97); backdrop-filter:blur(16px);
        position:fixed; top:0; right:-260px;
        width:240px; height:100vh; padding:80px 20px 40px;
        z-index:200; transition:right .4s cubic-bezier(.25,.8,.25,1);
        border-left:1px solid rgba(30,144,255,.2);
        box-shadow:-10px 0 40px rgba(0,0,0,.5);
    }
    nav ul li { display:block; width:100%; }
    nav ul li a { padding:12px 14px; font-size:14px; border-radius:10px; margin-bottom:4px; width:100%; }
    .sidemenu-close { display:flex; align-items:center; justify-content:center; }
}

@media (max-width:600px) {
    #header { min-height:auto; padding-bottom:24px; }
    .hero { padding:10px 0 20px; gap:12px; }
    .hero-text h1 { font-size:26px; line-height:1.2; }
    .hero-tag { font-size:10px; letter-spacing:3px; }
    .hero-btns { gap:10px; }
    .btn-fill, .btn-ghost { padding:10px 20px; font-size:13px; }

    .holo { width:290px; height:290px; }
    .holo-ring.r1 { width:200px; height:200px; }
    .holo-ring.r2 { width:234px; height:234px; }
    .holo-ring.r3 { width:268px; height:268px; }
    .holo-arc.a1 { width:214px; height:214px; }
    .holo-arc.a2 { width:250px; height:250px; }
    .tl,.bl { left:2px; font-size:7px; }
    .tr,.br { right:2px; font-size:7px; }

    .logo { width:130px; }
    .section-title { font-size:28px; }
    .about-img, .about-body { flex:1 1 100%; }
    .about-img { margin-bottom:20px; }
    .contact-info, .contact-form { flex:1 1 100%; }
    .tabs .tab { font-size:13px; padding:8px 10px; }
    .cards-grid { grid-template-columns:1fr; }
    .work-grid { grid-template-columns:1fr; }
    .skills-grid { grid-template-columns:1fr; }
    .work-stats { grid-template-columns:repeat(2,1fr); gap:20px 12px; padding:22px 16px; }
    .work-stats .stat:nth-child(2)::after { display:none; }
    .stat-num { font-size:26px; }
    .pm-body { padding:8px 22px 28px; }
    .pm-title { font-size:24px; }
    .pm-actions { flex-direction:column; }
    .pm-actions a { width:100%; justify-content:center; }
    .footer-contact { flex-direction:column; gap:4px; }

    /* Intro mobile */
    .intro-name { font-size:28px; letter-spacing:8px; }
    .intro-logo { width:80px; height:80px; }
    .intro-binary { font-size:10px; max-width:90vw; }
    .intro-msg { font-size:16px; }
    .intro-enter { font-size:14px; padding:10px 28px; }
    .intro-granted { font-size:16px; letter-spacing:4px; }
}