:root{--color-bg: #0a0a0a;--color-bg-alt: #111111;--color-surface: #1a1a1a;--color-text: #fafafa;--color-text-muted: #888888;--color-text-dim: #555555;--color-accent: #ffaa33;--color-cursor: #ffaa33;--color-border: rgba(255, 255, 255, .1);--color-border-hover: rgba(255, 255, 255, .2);--color-particle: rgba(255, 255, 255, .15);--color-particle-accent: rgba(255, 255, 255, .3);--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .375vw, 1rem);--text-base: clamp(1rem, .9rem + .5vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .625vw, 1.375rem);--text-xl: clamp(1.25rem, 1.1rem + .75vw, 1.75rem);--text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);--text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);--text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);--text-5xl: clamp(3rem, 2rem + 5vw, 7rem);--text-hero: clamp(3.5rem, 2.5rem + 6vw, 9rem);--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem;--space-4xl: 8rem;--space-5xl: 12rem;--section-padding: clamp(4rem, 8vw, 10rem);--section-padding-sm: clamp(3rem, 5vw, 6rem);--max-width: 1400px;--max-width-content: 1000px;--max-width-text: 720px;--nav-height: 72px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--z-base: 0;--z-elevated: 10;--z-nav: 100;--z-modal: 1000}[data-theme=light]{--color-bg: #fafafa;--color-bg-alt: #f0f0f0;--color-surface: #ffffff;--color-text: #0a0a0a;--color-text-muted: #666666;--color-text-dim: #999999;--color-accent: #ffaa33;--color-border: rgba(0, 0, 0, .1);--color-border-hover: rgba(0, 0, 0, .2);--color-particle: rgba(0, 0, 0, .08);--color-particle-accent: rgba(0, 0, 0, .15);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .16)}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--color-bg: #fafafa;--color-bg-alt: #f0f0f0;--color-surface: #ffffff;--color-text: #0a0a0a;--color-text-muted: #666666;--color-text-dim: #999999;--color-accent: #ffaa33;--color-border: rgba(0, 0, 0, .1);--color-border-hover: rgba(0, 0, 0, .2);--color-particle: rgba(0, 0, 0, .08);--color-particle-accent: rgba(0, 0, 0, .15);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .16)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.reveal{opacity:0;transform:translateY(30px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.reveal.revealed{opacity:1;transform:translateY(0)}.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.reveal-stagger.revealed>*:nth-child(1){transition-delay:0ms}.reveal-stagger.revealed>*:nth-child(2){transition-delay:.1s}.reveal-stagger.revealed>*:nth-child(3){transition-delay:.2s}.reveal-stagger.revealed>*:nth-child(4){transition-delay:.3s}.reveal-stagger.revealed>*:nth-child(5){transition-delay:.4s}.reveal-stagger.revealed>*:nth-child(6){transition-delay:.5s}.reveal-stagger.revealed>*:nth-child(7){transition-delay:.6s}.reveal-stagger.revealed>*:nth-child(8){transition-delay:.7s}.reveal-stagger.revealed>*{opacity:1;transform:translateY(0)}.reveal-left{opacity:0;transform:translate(-30px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.reveal-left.revealed{opacity:1;transform:translate(0)}.reveal-right{opacity:0;transform:translate(30px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.reveal-right.revealed{opacity:1;transform:translate(0)}.reveal-scale{opacity:0;transform:scale(.95);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.reveal-scale.revealed{opacity:1;transform:scale(1)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-stagger>*{opacity:1;transform:none;transition:none}}.section{position:relative;padding:var(--section-padding) var(--space-lg);overflow:hidden}.section--dark{background:var(--color-bg);color:var(--color-text)}.section--light{background:var(--color-bg-alt);color:var(--color-text)}.section--surface{background:var(--color-surface);color:var(--color-text)}.section__inner{max-width:var(--max-width);margin:0 auto;position:relative;z-index:1}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:var(--nav-height);position:relative}.hero__canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.hero__content{position:relative;z-index:1;max-width:var(--max-width-content);padding:0 var(--space-lg)}.hero__title{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,7.5rem);font-weight:var(--weight-bold);line-height:1.1;letter-spacing:-.04em;margin-bottom:var(--space-4xl);max-width:1000px;margin-left:auto;margin-right:auto}.hero__title .accent{color:var(--color-accent)}.hero__title .accent-blue{color:#3b82f6}.hero__subtitle{font-size:clamp(1.125rem,1.5vw,1.5rem);color:var(--color-text-muted);max-width:50ch;margin:var(--space-3xl) auto var(--space-3xl);line-height:1.6;text-wrap:balance}.typewriter{display:inline}.typewriter__cursor{display:inline-block;width:.08em;height:.9em;background:var(--color-cursor);margin-left:.05em;animation:blink 1s step-end infinite;vertical-align:baseline;position:relative;top:.05em}.work__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--space-lg);margin-top:var(--space-2xl)}.work__header{text-align:center;margin-bottom:var(--space-xl)}.project-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out);text-decoration:none;color:inherit;display:block}.project-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-lg)}.project-card__image{position:relative;aspect-ratio:16 / 10;background:var(--color-bg);overflow:hidden}.project-card__image picture{display:block;width:100%;height:100%}.project-card__image img{width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity var(--duration-normal) var(--ease-out)}.project-card__image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity var(--duration-normal) var(--ease-out);pointer-events:none}.project-card__image-overlay img{width:100%;height:100%;object-fit:cover}.project-card:hover .project-card__image-overlay{opacity:1;transform:none}.project-card:has(.project-card__image-overlay):hover .project-card__image img:not(.project-card__image-overlay img){transform:none;opacity:.3}.project-card__image--logo{display:flex;align-items:center;justify-content:center;background:var(--color-surface)}.project-card__image--logo img{width:auto;height:auto;max-width:180px;max-height:80px;object-fit:contain}.project-card__content{padding:var(--space-md)}.project-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-xs)}.project-card__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);letter-spacing:-.02em}.project-card__badge{font-size:var(--text-xs);font-weight:var(--weight-semibold);padding:.25rem .75rem;border-radius:var(--radius-full);background:var(--color-bg);border:1px solid var(--color-border);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.project-card__badge--live{background:#22c55e1a;border-color:#22c55e4d;color:#22c55e}.project-card__badge--active{background:#3b82f61a;border-color:#3b82f64d;color:#3b82f6}.project-card__description{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6;margin-bottom:var(--space-sm)}.project-card__meta{font-size:var(--text-xs);color:var(--color-text-dim);font-weight:var(--weight-medium)}.browser-mockup{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}.browser-mockup__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--color-bg-alt);border-bottom:1px solid var(--color-border)}.browser-mockup__dots{display:flex;gap:6px}.browser-mockup__dot{width:12px;height:12px;border-radius:50%;background:var(--color-border)}.browser-mockup__dot:first-child{background:#ff5f57}.browser-mockup__dot:nth-child(2){background:#ffbd2e}.browser-mockup__dot:nth-child(3){background:#28ca41}.browser-mockup__content{aspect-ratio:16 / 10;overflow:hidden}.browser-mockup__content img{width:100%;height:100%;object-fit:cover}.skills-strip{text-align:center;color:var(--color-text-muted);font-size:var(--text-lg);letter-spacing:.05em;padding:var(--space-md) 0}.about__content{max-width:var(--max-width-text);margin:0 auto}.about__statement{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-medium);line-height:1.3;letter-spacing:-.02em;margin-bottom:var(--space-xl)}.about__bio{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.7}.contact{text-align:center}.contact__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-bold);letter-spacing:-.03em;margin-bottom:var(--space-md)}.contact__subtitle{font-size:var(--text-lg);color:var(--color-text-muted);max-width:var(--max-width-text);margin:0 auto var(--space-2xl)}.contact__links{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.contact__link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text);text-decoration:none;font-weight:var(--weight-medium);transition:background var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.contact__link:hover{background:var(--color-surface);border-color:var(--color-border-hover);transform:translateY(-2px)}.contact__link svg{width:20px;height:20px}.footer{padding:var(--space-3xl) var(--space-lg);text-align:center;border-top:1px solid var(--color-border)}.footer__logo{width:48px;height:48px;margin:0 auto var(--space-sm)}.footer__logo svg{width:100%;height:100%}.footer-logo .logo-circle{opacity:0;transform:translate(-100%)}.footer-logo .logo-square{opacity:0;transform:translate(100%)}.footer-logo.animated .logo-circle{animation:slideInFromLeft .6s ease-out forwards}.footer-logo.animated .logo-square{animation:slideInFromRight .6s ease-out .1s forwards}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.footer-logo .logo-circle,.footer-logo .logo-square{opacity:1;transform:none;animation:none}}[data-theme=light] .footer-logo{filter:invert(1)}@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .footer-logo{filter:invert(1)}}.footer__copyright{font-size:var(--text-sm);color:var(--color-text-dim)}@media(max-width:768px){.section{padding:var(--section-padding-sm) var(--space-md)}.hero{min-height:100svh;padding-bottom:var(--nav-height)}.hero__content{padding:0 var(--space-md)}.hero__cta{flex-direction:column;align-items:center}.work__grid{grid-template-columns:1fr;gap:var(--space-md)}.skill-item__icon{width:56px;height:56px}.skill-item__icon img,.skill-item__icon svg{width:28px;height:28px}.contact__links{flex-direction:column;align-items:center}.footer__logo{font-size:var(--text-4xl)}}@media(min-width:1024px){.work__grid--featured{grid-template-columns:repeat(2,1fr)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{background:none;border:none;cursor:pointer}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:1.2;letter-spacing:-.02em}.section-title{font-size:var(--text-4xl);font-weight:var(--weight-bold);letter-spacing:-.03em;text-align:center;margin-bottom:var(--space-lg)}.section-subtitle{font-size:var(--text-lg);color:var(--color-text-muted);text-align:center;max-width:var(--max-width-text);margin:0 auto var(--space-2xl)}.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-lg);background:#0a0a0acc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border);z-index:var(--z-nav);transition:background var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out)}[data-theme=light] .nav,:root:not([data-theme=dark]) .nav{background:#fafafacc}@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .nav{background:#fafafacc}}.nav__logo{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text);transition:color var(--duration-fast) var(--ease-out)}.nav__logo:hover{color:var(--color-text-muted)}.nav__links{display:flex;align-items:center;gap:var(--space-lg)}.nav__link{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);transition:color var(--duration-fast) var(--ease-out)}.nav__link:hover{color:var(--color-text)}.theme-toggle{display:flex;align-items:center;justify-content:center;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.theme-toggle:hover{background:var(--color-surface);border-color:var(--color-border-hover)}@media(max-width:768px){.nav{padding:0 var(--space-md)}.nav__links{gap:var(--space-md)}.nav__link{font-size:var(--text-xs)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);font-size:var(--text-base);font-weight:var(--weight-semibold);border-radius:var(--radius-full);transition:all var(--duration-normal) var(--ease-out);white-space:nowrap}.btn--primary{background:var(--color-text);color:var(--color-bg)}.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn--secondary{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}.btn--secondary:hover{background:var(--color-surface);border-color:var(--color-border-hover);transform:translateY(-2px)}.btn--large{padding:var(--space-md) var(--space-xl);font-size:var(--text-lg)}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}::selection{background:var(--color-text);color:var(--color-bg)}:focus-visible{outline:2px solid var(--color-text);outline-offset:4px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}#access-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#050505;z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .8s cubic-bezier(.4,0,.2,1)}#access-overlay.fade-out{opacity:0}.access-card{text-align:center;max-width:320px;width:90%}.access-card h2{font-family:var(--font-display);font-size:var(--text-2xl);margin-bottom:.5rem;letter-spacing:-.02em}.access-card p{font-family:var(--font-mono);font-size:10px;color:var(--color-text-dim);letter-spacing:.3em;text-transform:uppercase;margin-bottom:3rem}.access-card.unlocked .passcode-wrapper{border-color:var(--color-cursor);background:#ffaa331a}.access-card.unlocked #passcode-input{color:var(--color-cursor)}.passcode-wrapper{padding:2px;background:#ffffff0d;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 1px #ffffff0d;transition:border-color .3s ease,background .3s ease}#passcode-input{width:100%;height:48px;background:#0a0a0a;border:none;border-radius:var(--radius-full);padding:0 1.5rem;font-family:var(--font-mono);font-size:14px;letter-spacing:.2em;color:#ffffffe6;text-align:center;outline:none;box-shadow:inset 0 2px 4px #00000080;transition:color .3s ease}#passcode-input::placeholder{font-family:var(--font-mono);font-size:9px;letter-spacing:.4em;color:#ffffff4d;text-transform:uppercase}#passcode-input:focus{box-shadow:inset 0 2px 4px #00000080,0 0 0 1px #ffaa334d}#passcode-input.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-6px)}20%,40%,60%,80%{transform:translate(6px)}}