:root{
  --bg-center:#0a0f1f;
  --bg-edge:#000000;
  --accent:#00eaff; /* neon cyan accent from provided example */
  --muted:#7ddfff;
  --text:#e6f8ff;
  --card:#071018;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Orbitron", "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(circle at center, var(--bg-center), var(--bg-edge));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hero-root{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:32px;
  text-align:center;
}
.hero-logo{width:260px;max-width:44vw;height:auto;margin-bottom:18px}
.hero-title{font-size:3.2rem;letter-spacing:6px;margin:6px 0;color:var(--accent);text-shadow:0 0 8px rgba(0,234,255,0.12)}
.hero-sub{color:var(--muted);margin:8px 0 18px;max-width:780px}

.glow-line{width:60%;height:2px;background:linear-gradient(90deg, transparent, var(--accent), transparent);margin:5px 0;opacity:0.45;animation:pulse 3s infinite}
@keyframes pulse{0%{opacity:0.25}50%{opacity:0.6}100%{opacity:0.25}}

.projects-brief{margin-top:12px;margin-bottom:40px}
.project-card{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(0,0,0,0.5)}
.project-logo{height:44px;width:auto}
.project-info{display:flex;flex-direction:column;align-items:flex-start}
.project-status{color:var(--muted);font-size:0.9rem}

.contact{color:var(--muted)}
.contact a{color:var(--accent);text-decoration:none}
.contact a:hover{text-decoration:underline}

.hero-footer{color:var(--muted);font-size:0.9rem}

@media (max-width:760px){
  .hero-title{font-size:2rem}
  .hero-logo{width:180px}
  .glow-line{width:90%}
  .project-card{width:100%;justify-content:center}
}

/* imprint / language buttons */
.lang-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.lang-btn:hover{border-color:rgba(0,234,255,0.12);color:var(--text)}
.lang-btn.active{background:var(--accent);color:#00110b;border-color:transparent;box-shadow:0 6px 20px rgba(0,234,255,0.12)}

.back-link{display:inline-block;margin-bottom:14px;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.back-link:hover{color:var(--text);border-color:rgba(0,234,255,0.08)}