/* Design System */
:root {
  --background: hsl(220, 23%, 4%);
  --foreground: hsl(120, 25%, 95%);

  --card: hsl(220, 20%, 6%);
  --card-foreground: hsl(120, 15%, 88%);

  --popover: hsl(220, 20%, 6%);
  --popover-foreground: hsl(120, 15%, 88%);

  --primary: hsl(142, 76%, 45%);
  --primary-foreground: hsl(220, 23%, 4%);
  --primary-glow: hsl(142, 76%, 65%);

  --secondary: hsl(160, 30%, 25%);
  --secondary-foreground: hsl(120, 25%, 95%);

  --muted: hsl(220, 15%, 12%);
  --muted-foreground: hsl(120, 10%, 65%);

  --accent: hsl(165, 55%, 35%);
  --accent-foreground: hsl(120, 25%, 95%);

  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);

  --border: hsl(220, 15%, 15%);
  --input: hsl(220, 15%, 15%);
  --ring: hsl(142, 76%, 45%);

  --gradient-radial: radial-gradient(circle at center, hsla(142, 76%, 45%, 0.15) 0%, hsla(165, 55%, 35%, 0.1) 25%, transparent 70%);
  --gradient-background: linear-gradient(135deg, hsl(220, 23%, 4%) 0%, hsl(220, 25%, 6%) 50%, hsl(220, 20%, 8%) 100%);
  --glow-green: 0 0 60px hsla(142, 76%, 45%, 0.3);
  --glow-teal: 0 0 40px hsla(165, 55%, 35%, 0.2);

  --radius: 0.75rem;

  --sidebar-background: hsl(0, 0%, 98%);
  --sidebar-foreground: hsl(240, 5.3%, 26.1%);
  --sidebar-primary: hsl(240, 5.9%, 10%);
  --sidebar-primary-foreground: hsl(0, 0%, 98%);
  --sidebar-accent: hsl(240, 4.8%, 95.9%);
  --sidebar-accent-foreground: hsl(240, 5.9%, 10%);
  --sidebar-border: hsl(220, 13%, 91%);
  --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
}

/* Reset / Base */
* {
  box-sizing: border-box;
  border-color: var(--border);
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  background: var(--gradient-background);
  color: var(--foreground);
  min-height: 100vh;
  overflow: hidden;
}

.bintelligy-text {
  font-size: 4rem; 
  font-weight: 700;
  background: linear-gradient(to right, var(--primary), var(--primary-glow), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* wichtig für Chrome/Safari */
  background-clip: text; /* fallback für andere Browser */
  color: transparent; /* fallback */
  text-shadow: var(--glow-green);
}

.bintelligy-underline {
  width: 6rem; /* entspricht w-24 */
  height: 0.25rem; /* entspricht h-1 */
  background: linear-gradient(to right, var(--primary), var(--accent));
  margin-left: auto;
  margin-right: auto;
  border-radius: 9999px; /* rounded-full */
}



/* Animations */
@keyframes pulse-glow {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Utility classes */
.blur-radial { background: var(--gradient-radial); filter: blur(1px); }
.glow-text { text-shadow: var(--glow-green); }
.animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-pulse { animation: pulse-glow 4s ease-in-out infinite alternate; }

/* Maintenance Container */
.maintenance-container {
  position: relative;
  min-height: 100vh;
  background: var(--gradient-background);
}

.maintenance-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 120vh;
  background: var(--gradient-radial);
  transform: translate(-50%, -50%);
  animation: pulse-glow 4s ease-in-out infinite alternate;
  z-index: 1;
}

.content-overlay {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.text-center { text-align: center; }
.max-w-4xl { max-width: 64rem; margin-left: auto; margin-right: auto; }

.mb-8 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.w-24 { width: 6rem; }
.h-1 { height: 0.25rem; }
.rounded-full { border-radius: 9999px; }

.space-y-6 > * + * { margin-top: 1.5rem; }

.text-6xl { font-size: 3.75rem; }
.md\:text-8xl { font-size: 6rem; }
.text-2xl { font-size: 1.5rem; }
.md\:text-4xl { font-size: 2.25rem; }
.text-lg { font-size: 1.125rem; }
.md\:text-xl { font-size: 1.25rem; }
.text-sm { font-size: 0.875rem; }
.md\:text-base { font-size: 1rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.leading-tight { line-height: 1.2; }
.leading-relaxed { line-height: 1.625; }

.text-foreground\/80 { color: rgba(120,25%,95%,0.8); } /* approximate */
.text-foreground\/90 { color: rgba(120,25%,95%,0.9); }
.text-muted-foreground { color: var(--muted-foreground); }

.bg-card\/80 { background-color: rgba(220,20%,6%,0.8); }
.border { border-width: 1px; }
.border-primary\/20 { border-color: rgba(142,76%,45%,0.2); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }

.bg-gradient-to-r { background-image: linear-gradient(to right, var(--primary), var(--primary-glow), var(--accent)); }