/* carelution – Coming-Soon-Seite
   Farben: Deep Night #070E1C · Deep Blue #0B1F3A · Cyber-Blue #4FC3F0 · Grau #8A9BB5 */

:root {
  --bg: #070E1C;
  --blue: #0B1F3A;
  --blue-light: #0F2A4F;
  --accent: #4FC3F0;
  --accent-rgb: 79, 195, 240;
  --white: #FFFFFF;
  --text-muted: #B8C4D6;
  --grey: #8A9BB5;
  --font: 'Sora', system-ui, sans-serif;
  /* Icon-Höhe steuert alle Logo-Proportionen (Maße aus dem Original-SVG) */
  --icon: clamp(64px, 9vw, 112px);
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--white); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent); }

/* ---------- Bühne ---------- */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--blue-light) 0%, var(--blue) 45%, var(--bg) 100%);
}

.network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(7,14,28,0) 30%, rgba(7,14,28,.55) 100%);
}

.content {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 140px;
}

/* ---------- Logo ---------- */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--icon) * .24);
}

.logo__icon {
  width: calc(var(--icon) * 1.16); /* viewBox enthält 24px Rand für den Glow */
  height: auto;
  display: block;
  overflow: visible;
}

.logo__loop, .logo__core { fill: var(--white); }
.logo__signal {
  fill: var(--accent);
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .7));
}

.logo__core {
  transform-origin: 148.35px 148.17px;
  transform-box: view-box;
  opacity: 0;
  animation: pop .6s cubic-bezier(.2,.8,.2,1.2) 2.5s forwards;
}

/* Masken zeichnen die Originalformen entlang der Kreisbahn nach */
.draw {
  fill: none;
  stroke: #fff;
  stroke-width: 44;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.draw--loop   { animation: draw 1.6s cubic-bezier(.65,0,.35,1) .4s forwards; }
.draw--signal { animation: draw .7s cubic-bezier(.65,0,.35,1) 2s forwards; }

.logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--icon) * .06);
  opacity: 0;
  animation: rise 1s cubic-bezier(.2,.8,.2,1) 2.8s forwards;
}

.logo__name {
  font-weight: 600;
  font-size: calc(var(--icon) * .62);
  line-height: 1;
  letter-spacing: -0.02em;
}

.logo__descriptor {
  font-weight: 500;
  font-size: calc(var(--icon) * .135);
  letter-spacing: 0.235em;
  text-transform: uppercase;
  padding-left: .1em;
}

/* ---------- Text ---------- */
.message {
  max-width: 560px;
  margin-top: clamp(48px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  animation: rise 1s cubic-bezier(.2,.8,.2,1) 3.4s forwards;
}

.message h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  text-wrap: pretty;
}

.message p {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 26px;
  border: 1px solid rgba(var(--accent-rgb), .5);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .06);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: background .2s ease, border-color .2s ease;
}
.contact:hover {
  color: var(--white);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .14);
}

.contact__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ---------- Footer ---------- */
.footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  opacity: 0;
  animation: rise 1s ease 4s forwards;
}

.footer__nav { display: flex; gap: 24px; }
.footer__nav a { color: var(--grey); }
.footer__nav a:hover { color: var(--accent); }

/* ---------- Animationen ---------- */
@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes pop   { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .draw, .logo__core, .logo__text, .message, .footer { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
}

@media (max-width: 600px) {
  .content { padding: 72px 20px 140px; }
  .footer { justify-content: center; text-align: center; }
}