:root{--bg-color: #050505;--bg-card: #111111;--text-main: #ffffff;--text-muted: #888888;--accent-color: #ffffff;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 2rem;--ease-out: cubic-bezier(.215, .61, .355, 1)}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}.hidden{display:none!important}#app{width:100%;max-width:1200px;margin:0 auto;min-height:100vh;padding:var(--spacing-md) var(--spacing-sm);display:flex;flex-direction:column}.site-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) 0;margin-bottom:var(--spacing-md);border-bottom:1px solid #1a1a1a;width:100%}.logo{font-weight:600;font-size:1.5rem;letter-spacing:-.04em;text-decoration:none;color:var(--text-main);margin-bottom:var(--spacing-xs);transition:all .3s ease}.logo:hover{text-shadow:0 0 12px rgba(255,255,255,.5);opacity:.9}@keyframes flicker{0%,to{opacity:1;text-shadow:0 0 4px rgba(255,255,255,.3)}5%{opacity:.95;text-shadow:0 0 2px rgba(255,255,255,.2)}10%{opacity:.9;text-shadow:none}15%{opacity:1;text-shadow:0 0 4px rgba(255,255,255,.3)}20%{opacity:.95;text-shadow:0 0 2px rgba(255,255,255,.2)}25%{opacity:1;text-shadow:0 0 4px rgba(255,255,255,.3)}30%{opacity:.85;text-shadow:none}35%{opacity:1;text-shadow:0 0 4px rgba(255,255,255,.3)}40%{opacity:.95;text-shadow:0 0 2px rgba(255,255,255,.2)}60%{opacity:1;text-shadow:0 0 4px rgba(255,255,255,.3)}70%{opacity:.9;text-shadow:0 0 2px rgba(255,255,255,.2)}80%{opacity:1;text-shadow:0 0 4px rgba(255,255,255,.3)}}.nav-links{display:flex;gap:20px;align-items:center}.status-banner{background:#acb346;color:#000;overflow:hidden;padding:8px 0;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.5px;position:relative;width:100%;white-space:nowrap;display:flex;align-items:center}.banner-icon{padding:0 15px;background:#acb346;border-right:1px solid rgba(0,0,0,.2);z-index:10;height:100%;display:flex;align-items:center}.marquee-track{display:flex;gap:5px;animation:scroll 20s linear infinite;padding-left:20px}.status-banner:hover .marquee-track{animation-play-state:paused}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.status-banner a{color:#000;text-decoration:none;text-transform:uppercase}.lang-toggle{display:flex;gap:5px;margin-left:20px;font-family:Space Grotesk,sans-serif;font-size:.9rem;color:var(--text-muted);-webkit-user-select:none;user-select:none}.lang-opt{cursor:pointer;transition:all .2s ease;position:relative;padding:2px 0}.lang-opt:hover,.lang-opt.active{color:var(--text-main);text-shadow:0 0 8px rgba(255,255,255,.4)}.lang-opt:after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background-color:var(--text-main);transition:width .3s ease}.lang-opt:hover:after,.lang-opt.active:after{width:100%}.nav-link{color:var(--text-muted);text-decoration:none;font-size:.85rem;text-transform:lowercase;letter-spacing:.05em;transition:all .2s ease;position:relative;padding:4px 0}.nav-link:hover,.nav-link.active{color:var(--text-main);text-shadow:0 0 8px rgba(255,255,255,.4)}.nav-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background-color:var(--text-main);transition:width .3s ease}.nav-link:hover:after,.nav-link.active:after{width:100%}.about-section{margin-bottom:var(--spacing-lg);display:flex;justify-content:center}.about-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);max-width:800px;text-align:center}@media(min-width:768px){.about-container{flex-direction:row;text-align:left;align-items:flex-start}}.about-photo{width:150px;height:150px;object-fit:cover}.about-photo:hover{filter:grayscale(0%)}.about-text p{color:var(--text-muted);font-size:.95rem;line-height:1.6;max-width:500px;margin-bottom:var(--spacing-sm)}.filters{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);flex-wrap:wrap}.filter-btn{background:transparent;border:none;color:var(--text-muted);padding:8px 0;font-family:var(--font-sans);font-size:.85rem;text-transform:lowercase;letter-spacing:.05em;cursor:pointer;transition:all .2s ease;position:relative}.filter-btn:hover,.filter-btn.active{color:var(--text-main);text-shadow:0 0 8px rgba(255,255,255,.4)}.filter-btn:after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background-color:var(--text-main);transition:width .3s ease}.filter-btn:hover:after,.filter-btn.active:after{width:100%}.fade-section{opacity:1;transition:opacity .3s ease}.fade-section.fading-out{opacity:0}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:#222;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#444}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);transition:opacity .2s ease}.portfolio-item{position:relative;aspect-ratio:16 / 9;background-color:var(--bg-card);border-radius:4px;overflow:hidden;cursor:pointer;transition:opacity .3s ease;display:block;text-decoration:none;color:inherit}.portfolio-item:hover{transform:none;box-shadow:none;opacity:.9}.media-container{width:100%;height:100%;position:relative}.video-indicator{position:absolute;top:10px;left:10px;width:24px;height:24px;background:#0009;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.project-thumb{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);opacity:.8}.portfolio-item:hover .project-thumb{transform:scale(1.05);opacity:.3;filter:blur(5px)}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;opacity:0;transition:opacity .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-xs)}.portfolio-item:hover .overlay{opacity:1}.about-text h2{font-size:1.5rem;margin-top:0;margin-bottom:var(--spacing-sm);color:var(--text-main)}.project-title{font-weight:600;font-size:1.25rem;color:var(--text-main);margin:0;text-align:center}.project-category{font-size:.9rem;color:#ffffffe6;font-weight:500;text-transform:uppercase;letter-spacing:.05em;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5)}.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);width:60px;height:60px;background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s var(--ease-out)}.play-icon:after{content:"";display:block;width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}.portfolio-item:hover .play-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.site-footer{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-md);border-top:1px solid #1a1a1a;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.social-links a{color:var(--text-muted);text-decoration:none;margin:0 var(--spacing-sm);transition:all .2s ease;position:relative;padding-bottom:2px}.social-links a:hover{color:var(--text-main);text-shadow:0 0 8px rgba(255,255,255,.4)}.social-links a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background-color:var(--text-main);transition:width .3s ease}.social-links a:hover:after{width:100%}@media(max-width:768px){#app{padding:var(--spacing-sm)}.site-header{padding:var(--spacing-md) 0;margin-bottom:var(--spacing-sm)}.nav-links{gap:15px;flex-wrap:wrap;justify-content:center}.lang-toggle{margin-left:0;margin-top:5px;width:100%;justify-content:center}.about-container{gap:var(--spacing-sm)}.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px}}@media(max-width:480px){.logo{font-size:1.25rem}.nav-link{font-size:.75rem}.status-banner{font-size:.75rem;padding:6px 0}.banner-icon{padding:0 10px}.banner-icon svg{width:16px;height:16px}.about-photo{width:120px;height:120px}.about-text h2{font-size:1.25rem}.about-text p{font-size:.85rem}.filters{gap:12px}.filter-btn{font-size:.75rem}.portfolio-grid{grid-template-columns:1fr}.project-title{font-size:1.1rem}.project-category{font-size:.75rem}}
