:root {--bg:#050505;--text-main:#f5f5f5;--text-muted:#999999;--orange:#F7931A;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background-color:var(--bg);color:var(--text-main);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
.orange-text{color:var(--orange)!important;}
.white-text{color:#ffffff!important;}
#webgl-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;background:radial-gradient(circle at center,#0a0a0a 0%,#000000 100%);}

#dev-hud {position:fixed;bottom:20px;left:20px;z-index:9999;font-family:monospace;font-size:10px;color:var(--orange);pointer-events:none;opacity:0.5;line-height:1.4;text-shadow:0 0 5px rgba(247,147,26,0.3);background:rgba(0,0,0,0.8);padding:10px;border-radius:4px;border-left:2px solid var(--orange);}

.site-header{position:fixed;top:0;left:0;right:0;padding:40px;display:flex;justify-content:flex-end;align-items:center;z-index:90;pointer-events:none;}
.site-header *{pointer-events:auto;}
.logo-text{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;font-size:1.2rem;letter-spacing:2px;}
.logo-text::first-letter{color:var(--orange);}
.contact-btn{text-decoration:none;color:var(--text-main);font-size:0.8rem;letter-spacing:2px;border:1px solid rgba(255,255,255,0.2);padding:10px 20px;border-radius:30px;transition:all 0.4s ease;}
.contact-btn:hover{border-color:var(--orange);color:var(--orange);background:rgba(247,147,26,0.1);}

.section{padding:0 10vw;position:relative;display:flex;flex-direction:column;justify-content:center;}
.scrolling-logo-container{margin-top:150px;display:flex;justify-content:center;align-items:center;min-height:150px;position:relative; transition: opacity 0.3s;}

.project-logo-img {height:120px;width:auto;object-fit:contain;z-index:2;position:relative;}
.project-logo-img[src=""] { display: none; }

#spaceship-wrapper {
    position: fixed; top: 0; left: 0; width: 60px; height: 60px;
    margin-left: -30px; margin-top: -30px; z-index: 9999;
    pointer-events: none; display: none; filter: invert(1);
}
#spaceship-img { width: 100%; height: 100%; object-fit: contain; }
#thruster {
    position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
    width: 10px; height: 20px; background: var(--orange);
    border-radius: 50% 50% 0 0; box-shadow: 0 0 15px var(--orange);
    opacity: 0; transition: opacity 0.1s;
}
.game-active #spaceship-wrapper { display: block; }
.game-active .scrolling-logo-container { opacity: 0 !important; }

.hero{min-height:90vh;padding-top:20px;}
.subtitle{font-size:0.8rem;letter-spacing:4px;margin-bottom:0;text-transform:uppercase;font-weight:400;}
.title{font-size:clamp(3.5rem,8vw,6.5rem);font-weight:300;line-height:1.05;letter-spacing:-2px;margin:0;}
.description{font-size:1.1rem;color:var(--text-muted);line-height:1.6;max-width:600px;font-weight:300;margin-top:0;}

.stats-clients{padding-top:50px;padding-bottom:80px;}
.stats-row{display:flex;gap:120px;margin-bottom:20px;}
.stat-block .num{font-size:clamp(5rem,10vw,8rem);font-weight:300;line-height:1;margin-bottom:15px;letter-spacing:-3px;}
.stat-block .label{font-size:0.8rem;letter-spacing:2px;color:#aaa;text-transform:uppercase;line-height:1.5;font-weight:400;}

/* Marquee Styling for Hero Section */
.marquee{width:100%;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);}
.marquee-hero { margin: 30px 0; border: none; padding: 0; }
.marquee-inner{display:flex;width:max-content;animation:marquee 40s linear infinite;}
.marquee-inner.reverse{animation:marquee-reverse 40s linear infinite;}
.marquee-inner img{height:45px;margin:0 4vw;filter:brightness(0) invert(1) opacity(0.3);transition:all 0.3s;}
.marquee-inner img:hover{filter:brightness(0) invert(1) opacity(1);}

@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes marquee-reverse{0%{transform:translateX(-50%);}100%{transform:translateX(0);}}

.payment-section{padding-top:12vh;padding-bottom:15vh;}
.pay-btn{background:transparent;border:1px solid rgba(255,255,255,0.2);color:white;padding:8px 20px;border-radius:30px;font-family:inherit;font-size:0.7rem;margin-bottom:25px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;letter-spacing:1px;}
.thin-heading{font-size:clamp(2rem,5vw,3.5rem);font-weight:300;line-height:1.2;letter-spacing:-1px;}

.featured-project{padding-top:10vh;padding-bottom:15vh;text-align:center;}
.project-logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px;min-height:80px;position:relative;}

.large-heading{margin-bottom:20px;}
.project-desc{margin:0 auto;}
.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;margin-top:40px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);}
.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.footer{padding-bottom:80px;padding-top:50px;align-items:flex-start;}
.impressum-container{max-width:800px;}
.impressum-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,0.3);border-radius:30px;padding:8px 20px;font-size:0.75rem;letter-spacing:1px;margin-bottom:40px;}
.impressum-text p{color:#cccccc;line-height:1.8;font-size:0.95rem;font-weight:300;margin-bottom:25px;}
.blue-link{color:#3b82f6;text-decoration:none;transition:opacity 0.3s;}
.blue-link:hover{opacity:0.7;}
.white-link{color:#cccccc;text-decoration:none;}
.white-link:hover{text-decoration:underline;}

@media (max-width:768px){
    .site-header{padding:20px;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
    .logo-text{position:static;transform:none;}
    .contact-btn{margin-right:0;}
    .stats-row{flex-direction:column;gap:60px;}
    .scrolling-logo-container{margin-top:100px;}
    .marquee-inner img{height:35px;margin:0 6vw;}
    .payment-section{padding-top:10vh;padding-bottom:20vh;}
    .featured-project{padding-top:10vh;padding-bottom:20vh;}
    #dev-hud { display: none !important; }
}
