@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root { --black:#05050a; --ink:#090a13; --white:#e9edf7; --muted:#8990a8; --line:rgba(95,115,180,.26); --blue:#4d83ff; --cyan:#50e5ff; --purple:#a55cff; --display:'Barlow Condensed', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { margin:0; background:var(--black); color:var(--white); font-family:var(--display); overflow-x:hidden; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.12; background:repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px, transparent 5px); mix-blend-mode:overlay; }
.matrix-bg { position:fixed; inset:0; z-index:-1; background-color:#05050a; background-image:linear-gradient(rgba(76,105,185,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(76,105,185,.14) 1px,transparent 1px),linear-gradient(rgba(105,55,190,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(105,55,190,.08) 1px,transparent 1px); background-size:64px 64px,64px 64px,16px 16px,16px 16px; mask-image:linear-gradient(to bottom,black,rgba(0,0,0,.45) 80%,transparent); }
.matrix-bg:after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 10%,rgba(66,95,255,.15) 10.1%,transparent 10.3% 37%,rgba(155,73,255,.1) 37.1%,transparent 37.3% 68%,rgba(66,210,255,.08) 68.1%,transparent 68.3%); }
.cursor-glow { position:fixed; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(67,100,255,.12),transparent 70%); transform:translate(-50%,-50%); pointer-events:none; z-index:0; }
.project-focus-mode:before { content:''; position:fixed; inset:0; z-index:4; background:rgba(2,3,10,.62); backdrop-filter:blur(9px); pointer-events:none; }
.project-focus-mode .matrix-bg { filter:blur(11px) brightness(.55); transform:scale(1.04); transition:filter .45s,transform .45s; }
.project-focus-mode .site-header,.project-focus-mode main > section:not(.projects),.project-focus-mode .site-footer { filter:blur(5px); opacity:.3; transition:filter .45s,opacity .45s; }
.project-focus-mode .project-card:not(.is-focused) { filter:blur(6px); opacity:.12; transition:filter .45s,opacity .45s; }
.project-card { cursor:pointer; }
.project-card:focus-visible { outline:1px solid var(--cyan); outline-offset:5px; }
.project-close { display:none; }
.project-gallery-controls { display:none; }
.project-gallery-controls[hidden] { display:none; }
.about-grid,.skills-heading,.skill-panel,.projects-heading,.project-card { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
.is-visible { opacity:1; transform:translateY(0); }
.skill-panel:nth-child(2),.project-card:nth-child(2) { transition-delay:.12s; }
.skill-panel:nth-child(3),.project-card:nth-child(3) { transition-delay:.24s; }
.mono { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.site-header { height:78px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:3; }
.brand { font:700 24px var(--display); color:var(--white); letter-spacing:.08em; text-decoration:none; }.brand-mark { color:var(--cyan); font:500 15px var(--mono); margin-right:8px; }.brand-dot { color:var(--cyan); }.nav-links { display:flex; gap:42px; }.nav-links a,.header-contact { color:var(--muted); font:500 10px var(--mono); letter-spacing:.12em; text-decoration:none; transition:color .2s; }.nav-links a:hover,.header-contact:hover,.text-link:hover,.project-actions a:hover { color:var(--cyan); }.header-contact { color:var(--white); }.status-dot { display:inline-block; width:6px; height:6px; background:var(--cyan); border-radius:50%; box-shadow:0 0 12px var(--cyan); margin-right:8px; }
.section-wrap { width:min(1320px,90vw); margin:0 auto; }.hero { min-height:calc(100vh - 78px); padding-top:10vh; position:relative; display:flex; flex-direction:column; }.hero-kicker { display:flex; align-items:center; gap:13px; color:var(--cyan); }.crosshair { font-size:20px; font-weight:500; }.kicker-line { width:100px; height:1px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }.hero-title-wrap { position:relative; margin:auto 0 0; }.hero-side { position:absolute; left:0; top:24%; line-height:1.7; color:#5d688b; }.hero h1 { font:800 clamp(70px,12vw,188px)/.79 var(--display); letter-spacing:.01em; text-align:center; margin:7vh 0 10vh; text-shadow:0 0 24px rgba(81,116,255,.2); }.hero h1 em,.skills-heading em,.projects-heading em { color:transparent; -webkit-text-stroke:1px var(--cyan); font-style:normal; text-shadow:0 0 18px rgba(80,229,255,.25); }.title-mark { display:inline-block; color:var(--purple); font:400 .35em var(--mono); vertical-align:top; padding-top:.1em; margin-left:.2em; text-shadow:0 0 14px var(--purple); }.hero-orbit { position:absolute; right:6%; top:5%; width:180px; height:180px; border:1px solid rgba(165,92,255,.45); transform:rotate(34deg); box-shadow:0 0 25px rgba(165,92,255,.12); }.hero-orbit:before,.hero-orbit:after { content:''; position:absolute; inset:17px; border:1px solid rgba(80,229,255,.3); }.hero-orbit:after { inset:45px; border-color:var(--cyan); }.hero-orbit span { position:absolute; width:5px; height:5px; background:var(--cyan); box-shadow:0 0 12px 3px var(--cyan); }.hero-orbit span:nth-child(1){top:-3px;left:50%}.hero-orbit span:nth-child(2){bottom:25px;right:4px;background:var(--purple);box-shadow:0 0 12px 3px var(--purple)}.hero-orbit span:nth-child(3){bottom:27px;left:11px}.hero-foot { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; padding-bottom:56px; border-top:1px solid var(--line); padding-top:20px; }.hero-intro { font-size:18px; letter-spacing:.06em; margin:0; }.hero-intro span { color:var(--cyan); padding:0 5px; }.hero-description { margin:0; line-height:1.6; color:#a1a9c0; }.scroll-cue { justify-self:end; color:var(--white); text-decoration:none; font-size:10px; }.scroll-arrow { color:var(--cyan); font-size:18px; margin-right:12px; }.hero-index { position:absolute; right:0; bottom:56px; transform:translateY(100%); color:var(--cyan); }.hero-index span { color:var(--muted); padding:0 6px; }
.section-heading { display:flex; align-items:center; gap:14px; color:var(--muted); padding-bottom:24px; }.section-number { color:var(--cyan); }.section-rule { width:44px; height:1px; background:var(--purple); box-shadow:0 0 8px var(--purple); }.about,.skills,.projects { padding-top:150px; }.about-grid { border-top:1px solid var(--line); padding-top:45px; display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; }.portrait-frame { aspect-ratio:1/.96; position:relative; border:1px solid rgba(80,229,255,.5); padding:11px; background:rgba(9,10,19,.5); }.portrait-frame img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(.7) sepia(.2) hue-rotate(180deg); display:block; }.portrait-frame:after { content:''; position:absolute; inset:11px; background:linear-gradient(120deg,rgba(80,229,255,.1),transparent 45%,rgba(165,92,255,.16)); pointer-events:none; }.portrait-label { position:absolute; z-index:1; top:-24px; left:0; color:var(--cyan); }.portrait-scan { position:absolute; left:11px; right:11px; top:42%; height:1px; background:var(--cyan); box-shadow:0 0 12px 2px var(--cyan); opacity:.8; }.frame-corner { position:absolute; z-index:2; width:24px; height:24px; }.corner-tl { left:-1px; top:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }.corner-br { right:-1px; bottom:-1px; border-right:2px solid var(--purple); border-bottom:2px solid var(--purple); }.about-copy h2,.skills-heading h2,.projects-heading h2 { font:700 clamp(54px,8vw,120px)/.8 var(--display); letter-spacing:.02em; margin:0 0 35px; }.about-copy h2 span { color:var(--purple); text-shadow:0 0 25px rgba(165,92,255,.3); }.lead-copy { max-width:480px; font:16px/1.7 var(--mono); color:#abb2ca; }.about-meta { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:44px; padding:18px 0; display:grid; grid-template-columns:80px 1fr; gap:12px; }.about-meta strong { color:var(--white); font:500 10px var(--mono); }.text-link { display:inline-block; margin-top:35px; color:var(--cyan); text-decoration:none; font-size:11px; }.text-link span { margin-left:16px; font-size:17px; }
.skills { background:linear-gradient(90deg,transparent,rgba(18,22,48,.25),transparent); }.skills-heading,.projects-heading { display:flex; justify-content:space-between; align-items:end; border-top:1px solid var(--line); padding-top:42px; }.skills-heading p,.projects-heading p { line-height:1.6; text-align:right; }.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:55px; }.skill-panel { min-height:350px; border:1px solid rgba(80,229,255,.42); background:rgba(9,13,28,.7); padding:22px; position:relative; }.skill-panel:before { content:''; position:absolute; inset:5px; border:1px solid rgba(80,229,255,.1); pointer-events:none; }.skill-panel.violet { border-color:rgba(165,92,255,.5); }.skill-panel.cyan { border-color:rgba(80,229,255,.75); }.panel-top { display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--line); padding-bottom:18px; }.panel-index { color:var(--cyan); }.panel-top h3 { font-size:19px; letter-spacing:.08em; margin:0; }.panel-symbol { color:var(--purple); margin-left:auto; font-size:22px; }.skill-list { padding-top:39px; }.skill-list>div:not(.meter) { display:flex; justify-content:space-between; font:500 11px var(--mono); margin-top:21px; }.skill-list b { color:var(--cyan); font-weight:400; }.meter { height:2px; background:#20263e; margin-top:9px; }.meter i { display:block; height:100%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }.violet .meter i { background:var(--purple); box-shadow:0 0 10px var(--purple); }.violet .skill-list b { color:var(--purple); }.badge-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }.badge-cloud span { border:1px solid rgba(80,229,255,.5); padding:9px 12px; color:var(--cyan); font:500 10px var(--mono); }.badge-cloud span:nth-child(even){border-color:rgba(165,92,255,.5);color:#c49bff}.panel-note { position:absolute; bottom:25px; line-height:1.7; color:#606b8c; }
.projects-heading { padding-bottom:55px; }.project-grid { display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:auto auto; gap:18px; }.project-card { border:1px solid var(--line); background:rgba(8,10,20,.82); position:relative; transition:transform .35s,border-color .35s; }.project-card:hover { transform:translateY(-5px); border-color:var(--cyan); }.project-wide { grid-row:span 2; }.project-thumb { height:320px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }.project-wide .project-thumb { height:475px; }.project-thumb img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.65) saturate(1.25) contrast(1.2) brightness(.52); transition:transform .8s,filter .5s; }.project-card:hover img { transform:scale(1.05); filter:grayscale(.2) saturate(1.5) contrast(1.1) brightness(.65); }.project-thumb:after { content:''; position:absolute; inset:0; background:linear-gradient(140deg,rgba(48,74,221,.36),transparent 52%,rgba(165,92,255,.25)); }.thumb-id { position:absolute; z-index:1; top:16px; left:17px; color:var(--cyan); }.thumb-plus { position:absolute; z-index:1; right:17px; top:7px; font:400 27px var(--mono); color:var(--cyan); }.project-info { padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }.project-type { color:var(--purple); margin:0 0 9px; }.project-info h3 { margin:0; font-size:42px; letter-spacing:.04em; }.project-desc { color:var(--muted); line-height:1.55; margin:0; }.project-actions { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; display:flex; gap:24px; }.project-actions a { color:var(--white); text-decoration:none; font-size:10px; }.project-small .project-thumb { height:240px; }.site-footer { margin-top:160px; padding-bottom:35px; }.footer-line { height:1px; background:linear-gradient(90deg,var(--cyan),var(--purple),transparent); margin-bottom:24px; }.site-footer { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; }.site-footer p { margin:0; }.footer-email { justify-self:center; color:var(--white); font:500 16px var(--mono); text-decoration:none; }.footer-email span { color:var(--cyan); }
.project-card.is-focused { position:fixed; z-index:5; inset:50% auto auto 50%; width:min(1080px,88vw); min-height:min(620px,78vh); display:grid; grid-template-columns:1.12fr .88fr; grid-template-rows:1fr; overflow:hidden; border-color:var(--cyan); background:#080b18; box-shadow:0 0 0 1px rgba(80,229,255,.18),0 0 75px rgba(57,93,255,.32); transform:translate(-50%,-50%) scale(1); animation:project-arrival .45s cubic-bezier(.2,.8,.2,1) both; cursor:default; }
.project-card.is-focused:hover { transform:translate(-50%,-50%) scale(1); }
.project-card.is-focused .project-close { display:block; position:absolute; z-index:3; top:15px; right:18px; padding:0; border:0; background:transparent; color:var(--cyan); font:400 28px var(--mono); cursor:pointer; }
.project-card.is-focused .project-gallery-controls { position:absolute; z-index:2; left:17px; right:17px; bottom:17px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.project-gallery-controls button { width:42px; height:38px; border:1px solid rgba(80,229,255,.7); background:rgba(5,5,10,.72); color:var(--cyan); font:400 24px var(--mono); cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.project-gallery-controls button:hover,.project-gallery-controls button:focus-visible { background:var(--cyan); color:var(--black); box-shadow:0 0 18px rgba(80,229,255,.35); outline:none; }
.project-gallery-count { color:var(--white); background:rgba(5,5,10,.72); padding:10px 12px; }
.project-card.is-focused .project-thumb { height:100%; min-height:0; border-bottom:0; border-right:1px solid var(--line); }
.project-card.is-focused .project-thumb img { filter:grayscale(.18) saturate(1.45) contrast(1.12) brightness(.65); transform:scale(1.04); }
.project-card.is-focused .project-info { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:24px; padding:clamp(30px,5vw,70px); transform:translateX(14px); }
.project-card.is-focused .project-info h3 { font-size:clamp(48px,7vw,92px); }
.project-card.is-focused .project-desc { font-size:12px; }
.project-card.is-focused .project-actions { width:100%; display:flex; flex-wrap:wrap; gap:10px; border-top:0; padding-top:0; }
.project-card.is-focused .project-actions a { min-width:155px; padding:14px 15px; border:1px solid rgba(80,229,255,.55); color:var(--cyan); letter-spacing:.08em; display:flex; align-items:center; gap:9px; transition:background .2s,color .2s,box-shadow .2s; }
.project-card.is-focused .project-actions a:hover { background:var(--cyan); color:#05050a; box-shadow:0 0 22px rgba(80,229,255,.35); }
.project-card.is-focused .action-github { border-color:rgba(165,92,255,.7); color:#d1b3ff; }
.github-logo { display:grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; font-size:8px; letter-spacing:0; }
@keyframes project-arrival { from { opacity:0; transform:translate(-50%,-47%) scale(.92); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (max-width:800px) { .site-header { height:68px; padding:0 5vw; }.nav-links { display:none; }.header-contact { font-size:8px; }.hero { min-height:calc(100svh - 68px); padding-top:8vh; overflow:clip; }.hero h1 { font-size:clamp(58px,16vw,120px); text-align:left; margin:12vh 0 16vh; }.hero-side { display:none; }.hero-orbit { width:110px; height:110px; right:28px; top:0; transform:rotate(34deg) scale(.78); }.hero-foot { grid-template-columns:1fr; gap:24px; padding-bottom:35px; }.scroll-cue { justify-self:start; }.hero-index { bottom:35px; transform:none; }.about,.skills,.projects { padding-top:100px; }.about-grid { grid-template-columns:1fr; gap:65px; }.portrait-frame { width:90%; }.skills-heading,.projects-heading { align-items:start; flex-direction:column; gap:22px; }.skills-heading p,.projects-heading p { text-align:left; }.skills-grid { grid-template-columns:1fr; margin-top:35px; }.skill-panel { min-height:310px; }.project-grid { grid-template-columns:1fr; }.project-wide { grid-row:auto; }.project-wide .project-thumb,.project-thumb { height:280px; }.project-info { grid-template-columns:1fr; }.project-actions { grid-column:auto; }.site-footer { grid-template-columns:1fr; padding-bottom:25px; }.footer-email { justify-self:start; }.site-footer p:last-child { text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.project-card,.project-thumb img { transition:none; } }