/* ============================================================
   SYSVC.DE – Landing Page  |  CaNS GmbH
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cyan:   #00d4ff;
  --cyan2:  #00a8cc;
  --cyan-d: #006080;
  --black:  #000d12;
  --white:  #e8f8ff;
  --muted:  rgba(0,212,255,.55);
}

html, body {
  height: 100%;
  font-family: 'Rajdhani', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow: hidden;         /* single viewport – no scroll */
}

/* ── Background image ─────────────────────────────────────── */
.bg-image {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  animation: bgPulse 12s ease-in-out infinite;
}
@keyframes bgPulse {
  0%,100% { transform: scale(1.0); opacity: 1; }
  50%      { transform: scale(1.24); opacity: .6; }
}

/* ── Dark overlay ─────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,20,30,.35) 0%, rgba(0,8,15,.80) 100%);
}

/* ── CRT scan line ────────────────────────────────────────── */
.scan-line {
  position: fixed; inset: 0; z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
  pointer-events: none;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 10;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(50vh + 55px);
  text-align: center;
}

/* ── Brand wrap ───────────────────────────────────────────── */
.brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Badge-Wrapper: flex-zentriert, absolut sicher ────────── */
.badge-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

/* ── Animated badge rings ─────────────────────────────────── */
.brand-badge {
  position: relative;
  width: 130px; height: 130px;
}
.badge-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.r1 { width: 130px; height: 130px; animation: spin  8s linear infinite, aura1 3s ease-in-out infinite; opacity: .7; }
.r2 { width: 90px;  height: 90px;  animation: spin 14s linear infinite reverse, aura2 4s ease-in-out infinite; opacity: .8; }
.r3 { width: 55px;  height: 55px;  animation: spin  6s linear infinite, aura1 2.5s ease-in-out infinite; opacity: .9; }

@keyframes aura1 {
  0%,100% { box-shadow: 0 0 6px 1px rgba(0,212,255,.3); }
  50%      { box-shadow: 0 0 18px 5px rgba(0,212,255,.75), 0 0 35px 8px rgba(0,168,204,.35); }
}
@keyframes aura2 {
  0%,100% { box-shadow: 0 0 4px 1px rgba(0,212,255,.25); }
  50%      { box-shadow: 0 0 16px 4px rgba(0,212,255,.7), 0 0 30px 7px rgba(0,168,204,.3); }
}
.badge-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), 0 0 30px var(--cyan);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes dotPulse { 0%,100%{ box-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan); } 50%{ box-shadow: 0 0 20px var(--cyan), 0 0 50px var(--cyan), 0 0 80px var(--cyan2); } }

/* ── Brand name ───────────────────────────────────────────── */
.brand-name {
  font-size: clamp(3.5rem, 12vw, 7rem);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow:
    0 0 20px var(--cyan),
    0 0 60px var(--cyan2),
    0 0 100px rgba(0,164,204,.4);
  animation: nameGlow 4s ease-in-out infinite;
}
@keyframes nameGlow {
  0%,100%{ text-shadow: 0 0 18px var(--cyan), 0 0 55px var(--cyan2), 0 0 90px rgba(0,164,204,.3); }
  50%    { text-shadow: 0 0 30px var(--cyan), 0 0 80px var(--cyan),  0 0 140px var(--cyan2); }
}

/* ── Tagline ──────────────────────────────────────────────── */
.brand-tagline {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(1rem, 3vw, 1.25rem);
  letter-spacing: .18em;
  color: #fff;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 1;
  text-shadow: 0 0 12px var(--cyan), 0 0 30px var(--cyan2);
}

/* ── Separator ────────────────────────────────────────────── */
.brand-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: var(--muted);
}
.brand-sep span:not(.sep-hex) {
  display: block;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-d), transparent);
}
.sep-hex {
  font-size: .85rem;
  color: var(--cyan);
  opacity: .7;
}

/* ── Sub line ─────────────────────────────────────────────── */
.brand-sub {
  font-size: clamp(.85rem, 2vw, 1rem);
  letter-spacing: .06em;
  color: rgba(232,248,255,.65);
}
.brand-sub a {
  color: var(--cyan);
  text-decoration: none;
  transition: opacity .2s;
}
.brand-sub a:hover { opacity: .75; text-decoration: underline; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  color: rgba(0,212,255,.45);
  background: linear-gradient(0deg, rgba(0,8,15,.7) 0%, transparent 100%);
}
.footer-sep { opacity: .4; }
.footer-link {
  color: rgba(0,212,255,.55);
  text-decoration: none;
  transition: color .2s;
}
.footer-link:hover { color: var(--cyan); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .brand-badge { width: 64px; height: 64px; }
  .r1 { width: 64px; height: 64px; }
  .r2 { width: 44px; height: 44px; }
  .r3 { width: 28px; height: 28px; }
  .brand-sep span:not(.sep-hex) { width: 50px; }
}