:root{--bg:#09090b;--bg-elevated:#111113;--surface:#ffffff08;--surface-hover:#ffffff12;--border:#ffffff0f;--border-hover:#ffffff26;--text:#e4e4e7;--text-muted:#71717a;--text-subtle:#52525b;--accent-gradient:linear-gradient(135deg,#a1a1aa 0%,#e4e4e7 50%,#a1a1aa 100%);--accent-glow:#a1a1aa26;--gradient-line:linear-gradient(90deg,transparent 0%,var(--text-muted)50%,transparent 100%);--radius:8px;--transition-smooth:.5s cubic-bezier(.23,1,.32,1);--transition-bounce:.6s cubic-bezier(.34,1.56,.64,1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}.noise-overlay{opacity:.04;pointer-events:none;z-index:100;background:url(https://grainy-gradients.vercel.app/noise.svg);position:fixed;inset:0}.brand{letter-spacing:-3px;margin:0;font-size:clamp(3rem,12vw,6rem);font-weight:800;line-height:.9}.brand-gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.accent{-webkit-text-stroke:1.5px var(--text);color:#0000;-webkit-text-fill-color:transparent;background:0 0}.tagline{color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:.7rem;font-weight:500;display:inline-flex;position:relative}.tagline:before{content:"";background:var(--text-muted);width:24px;height:1px;display:inline-block}.header-decorated{padding-bottom:2rem;position:relative}.header-decorated:after{content:"";background:var(--accent-gradient);border-radius:1px;width:60px;height:2px;position:absolute;bottom:0;left:0}.hero{flex-direction:column;justify-content:space-between;height:100dvh;padding:8vh 8vw;display:flex;overflow:hidden}.stagger-1{animation:.8s .1s both fadeSlideUp}.stagger-2{animation:.8s .3s both fadeSlideUp}.stagger-3{animation:.8s .5s both fadeSlideUp}.stagger-4{animation:.8s .7s both fadeSlideUp}@keyframes fadeSlideUp{0%{opacity:0;translate:0 20px}to{opacity:1;translate:0}}.main-nav{flex-direction:column;gap:.25rem;margin:2rem 0;display:flex}.nav-item{color:var(--text);transition:var(--transition-smooth);align-items:center;gap:1rem;padding:.75rem 0;text-decoration:none;display:flex;position:relative}.nav-item:after{content:"";background:var(--gradient-line);width:0;height:1px;transition:width var(--transition-smooth);position:absolute;bottom:0;left:0}.nav-item:hover:after{width:100%}.nav-item:hover{translate:12px}.nav-item:hover .number{color:var(--text)}.nav-item:hover .label{letter-spacing:3px}.nav-item .number{color:var(--text-subtle);letter-spacing:1px;transition:color var(--transition-smooth);min-width:1.5rem;font-family:Inter,monospace;font-size:.65rem;font-weight:400}.nav-item .label{text-transform:uppercase;letter-spacing:2px;transition:letter-spacing var(--transition-smooth);font-size:clamp(1.3rem,5vw,2rem);font-weight:600}footer{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding-top:2rem;display:flex}.social-links{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.social-links a{color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;font-weight:500;text-decoration:none;transition:color .3s;position:relative}.social-links a:hover{color:var(--text)}.social-links a:after{content:"";background:var(--text);width:0;height:1px;transition:width .3s;position:absolute;bottom:-4px;left:0}.social-links a:hover:after{width:100%}.email-link{font-weight:600;color:var(--text)!important}.location{color:var(--text-subtle);letter-spacing:1px;text-transform:uppercase;margin:0;font-size:.75rem}@media (max-width:768px){footer{flex-direction:column;align-items:flex-start}}.subpage-layout{flex-direction:column;min-height:100dvh;padding:6vh 8vw;animation:.6s both fadeSlideUp;display:flex}.back-nav{margin-bottom:3rem}.back-link{color:var(--text-muted);letter-spacing:2px;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;text-decoration:none;transition:color .3s,gap .3s;display:inline-flex}.back-link:hover{color:var(--text);gap:.75rem}.content-body{max-width:800px;margin-top:2rem}.description{color:var(--text-muted);font-size:clamp(1rem,3vw,1.2rem);line-height:1.7}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem;display:grid}.project-card{background:var(--surface);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);transition:var(--transition-smooth);flex-direction:column;gap:.75rem;padding:2rem;text-decoration:none;display:flex;position:relative;overflow:hidden}.project-card:before{content:"";border-radius:var(--radius);-webkit-mask-composite:xor;opacity:0;transition:opacity var(--transition-smooth);pointer-events:none;background:linear-gradient(135deg,#0000 0%,#ffffff1a 50%,#0000 100%);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.project-card:hover{background:var(--surface-hover);border-color:var(--border-hover);translate:0 -4px;box-shadow:0 16px 48px #0000004d}.project-card:hover:before{opacity:1}.project-card h3{letter-spacing:.5px;color:var(--text);margin:0;font-size:1.15rem;font-weight:600}.project-card p{color:var(--text-muted);margin:0;font-size:.85rem;line-height:1.6}.project-card .card-arrow{color:var(--text-subtle);letter-spacing:2px;text-transform:uppercase;transition:var(--transition-smooth);align-items:center;gap:.5rem;margin-top:auto;padding-top:1rem;font-size:.75rem;display:flex}.project-card:hover .card-arrow{color:var(--text);gap:.75rem}.fade-in{animation:.6s both fadeSlideUp}@media (max-width:768px){.hero,.subpage-layout{padding:5vh 6vw}.brand{letter-spacing:-2px}.nav-item .label{letter-spacing:1px}.nav-item:hover .label{letter-spacing:2px}footer{flex-direction:column;align-items:flex-start;gap:1rem}.projects-grid{grid-template-columns:1fr}}