:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 5%;
  --card-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 85%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 65%;
  --accent: 170 15% 45%;
  --accent-foreground: 0 0% 100%;
  --border: 0 0% 20%;
  --input: 0 0% 18%;
  --ring: 0 0% 40%;
  --hero-subtitle: 210 17% 95%;
}

html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Barlow', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.font-heading,
.font-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
}
.font-body {
  font-family: 'Barlow', sans-serif;
}

/* Liquid Glass Effect */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Heavier-blur primary-CTA variant */
.liquid-glass-strong {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Tailwind-like utility shortcuts that read the HSL vars */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-background { color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-hero-subtitle { color: hsl(var(--hero-subtitle)); }
.border-border { border-color: hsl(var(--border)); }
.border-foreground\/60 { border-color: hsla(var(--foreground), 0.6); }
.border-background { border-color: hsl(var(--background)); }
.bg-background\/45 { background-color: hsla(var(--background), 0.45); }
.border-border\/30 { border-color: hsla(var(--border), 0.3); }

.hover-foreground:hover { color: hsl(var(--foreground)); transition: color .2s ease; }

/* Avatar placeholder gradients (monochrome only) */
.avatar-1 { background: linear-gradient(135deg, #2a2a2a 0%, #555 100%); }
.avatar-2 { background: linear-gradient(135deg, #444 0%, #888 100%); }
.avatar-3 { background: linear-gradient(135deg, #1d1d1d 0%, #666 100%); }

/* Concentric circles logo helper */
.concentric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid hsla(0, 0%, 100%, 0.6);
}
.concentric > .inner {
  border-radius: 9999px;
  border: 1px solid hsla(0, 0%, 100%, 0.6);
}

/* Tracking helpers (Tailwind-incompatible custom values) */
.tracking-tight-2 { letter-spacing: -2px; }
.tracking-tight-1 { letter-spacing: -1px; }
.tracking-wide-3 { letter-spacing: 3px; }

/* Mobile-only nav toggle (Gegenstück zu .hidden-md) */
.show-md { display: none; }
@media (max-width: 900px) {
  .show-md { display: inline-flex !important; }
}

/* Hide scrollbars on body when video plays full-bleed */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* Placeholder icon tile for platform cards */
.icon-tile {
  width: 200px;
  height: 200px;
  border-radius: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #050505 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 60px -30px rgba(0,0,0,0.8);
  overflow: hidden;
}
.icon-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.icon-mark {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 90px;
  line-height: 1;
  color: hsla(0,0%,100%,0.92);
  letter-spacing: -2px;
}
.icon-sub {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: hsla(0,0%,100%,0.35);
  text-transform: uppercase;
}

/* Email input reset */
.email-input {
  background: transparent;
  border: none;
  outline: none;
  color: hsl(var(--foreground));
  width: 100%;
  font-size: 15px;
  padding-left: 18px;
}
.email-input::placeholder { color: hsla(0,0%,100%,0.4); }

/* Section dividers ultra subtle */
.divider-top { border-top: 1px solid hsla(0, 0%, 100%, 0.08); }

/* Mission word reveal */
.mission-word {
  display: inline-block;
  margin-right: 0.22em;
  transition: opacity 0.2s ease;
}

/* Avatar ring */
.avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 2px solid hsl(var(--background));
  position: relative;
  overflow: hidden;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Slow Ken Burns zoom for hero backgrounds */
@keyframes kenBurns {
  0%   { transform: scale(1.08) translate(0, 0); }
  50%  { transform: scale(1.14) translate(-0.5%, -0.5%); }
  100% { transform: scale(1.08) translate(0, 0); }
}
.ken-burns {
  animation: kenBurns 30s ease-in-out infinite;
  will-change: transform;
}

/* Square image card with hover lift */
.img-card {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;
  transition: transform .4s ease;
}
.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease, filter .4s ease;
  filter: saturate(0.85) brightness(0.92);
}
.img-card:hover img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}

/* IG corner badge */
.ig-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: hsla(0,0%,100%,0.85);
  text-transform: uppercase;
  pointer-events: none;
}

/* Image strip placeholder for the Beratung spotlight */
.spotlight-frame {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.8), inset 0 0 0 1px hsla(0,0%,100%,0.06);
}

/* Subtle noise overlay for atmosphere */
.noise::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay;
}