:root{
  --bg:#050708;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.10);

  /* Default glow colors (fallback) */
  --glowTop: rgba(255,255,255,.12);
  --glowBottom: rgba(34,197,94,.55); /* green default */
  --heroImage: none; /* default: no hero image */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* ===== Optional hero image (only if --heroImage is set) ===== */
body.has-hero::before{
  content:"";
  position:fixed;
  inset:0;
  height:100vh;
  background-image: var(--heroImage);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-3;
}



/* ===== Top Glow (xAI-like) ===== */
/* Default "Vignette" / dunkler Verlauf (für alle Seiten ok) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  /* oben fast transparent -> Topbar wird "glasig" statt schwarz */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,.25) 120px,
    rgba(0,0,0,.88) 100%
  );

  z-index:-2;
}


/* TOP GLOW – nur auf Unterseiten */


/* ===== Scrollender Top Glow ===== */
body.page .content::before{
  content:"";
  display:block;

  /* 🔑 das ist der Fix */
  margin-top:-72px;
  height:calc(55vh + 72px);

  background:
    radial-gradient(1200px 650px at 50% 0%, var(--glowTop), transparent 62%),
    radial-gradient(900px 520px at 20% 0%, color-mix(in srgb, var(--glowTop) 55%, transparent), transparent 70%),
    radial-gradient(900px 520px at 80% 0%, color-mix(in srgb, var(--glowTop) 55%, transparent), transparent 70%);

  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 35%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 35%, transparent 78%);
}



/* ===== Topbar ===== */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;

  /* echtes Glas: KEIN eigener Farb-Layer */
  background: rgba(255,255,255,0.02);

  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);

  border-bottom: 1px solid rgba(255,255,255,.08);

  z-index: 10;
}

.nav{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
}
.brand{
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
}
.brand .ligno{color:#22c55e}
.brand .rest{color:var(--text)}

.links{display:flex; gap:10px; align-items:center}
.links a{
  text-decoration:none;
  color:var(--muted);
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.links a:hover{color:var(--text); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08);}
.links a.active{color:var(--text); border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.10);}
.links a.cta{border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.14); color:var(--text)}

/* ===== Page Intro Titel (nur Unterseiten) ===== */
body.page .page-intro{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;

  /* kein extra Platz erzeugen */
  padding:0;

  position:relative;
  z-index:2; /* über Glow & Vignette */
}

body.page .page-intro .eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.60);
  margin: 0 0 18px;
}

body.page .page-intro h1{
  margin:0;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.03;
  font-size: clamp(2.9rem, 6.2vw, 5.4rem);

  opacity: var(--pageTitleOpacity, 1);
}

body.page .page-intro h1 .muted{
  display:block;
  color: rgba(255,255,255, var(--pageTitleMutedAlpha, .28));
}

body.page .page-intro p{
  margin: 18px 0 0;
  max-width: 72ch;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  opacity: var(--pageSubtitleOpacity, 1);
}

/* ===== HERO SECTION (only used on Home) ===== */
.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding-top:72px;
}
.hero-inner{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
  padding:80px 0 70px;
  max-width: 900px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.22);
  background:rgba(34,197,94,.10);
  color:var(--muted);
  margin-bottom:18px;
}
.dot{
  width:8px; height:8px;
  border-radius:99px;
  background:#22c55e;
  box-shadow:0 0 18px rgba(34,197,94,.45);
}
.hero h1{
  margin:0 0 14px;
  font-size:clamp(2.6rem, 5vw, 4rem);
  line-height:1.05;
}
.hero p{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.65;
  font-size:1.05rem;
  max-width: 70ch;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block;
  text-decoration:none;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.18);
}
.btn.ghost{background:transparent}

.scrollhint{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:22px;
  color:rgba(255,255,255,.55);
  font-size:.95rem;
}

body.contact .btn.primary:hover {
  background: #2563eb;      /* dunkleres Blau */
  border-color: #2563eb;
}

/* ===== Content layer ===== */
.content{
  position:relative;
  z-index:1;
  background: var(--bg);
  box-shadow: 0 -40px 80px rgba(0,0,0,.8);
}
/* Unterseiten: oben etwas transparent, damit Top-Glow sichtbar bleibt */
body.page .content{
  background: transparent;
  box-shadow: none;
}
/* Page Intro höher positionieren (zieht Text in den Glow) */
body.page .page-intro{
  margin-top: -120px;
}

/* Standard Sections: wie bisher */
body.page .section{
  background: rgba(5,7,8,.88);
}

/* ABER: die erste Section soll oben transparent starten, damit der Glow sichtbar bleibt */
body.page .content > .section:first-of-type{
  background:
    linear-gradient(to bottom,
      rgba(5,7,8,0) 0px,
      rgba(5,7,8,.70) 90px,
      rgba(5,7,8,.88) 160px,
      rgba(5,7,8,.88) 100%
    );
  border-top: none; /* optional, sieht meist cleaner aus */
}



.section{
  padding:0px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.wrap{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
}
h2{margin:0 0 10px; font-size:1.5rem}
.sub{margin:0 0 22px; color:var(--muted); line-height:1.6}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:40px;
}
.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  padding:32px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.card:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.card h3{margin:0 0 10px; font-size:1.1rem; font-weight: 600;}
.card p{margin:0; color:var(--muted); line-height:1.6}

/* ===== About photo styling (smaller, not huge) ===== */
.portrait{
  width:min(360px, 70%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  display:block;
}

/* ===== Bottom glow (per-page via --glowBottom) ===== */
.glow-end{
  height:55vh;
  background:
    radial-gradient(1100px 420px at 50% 90%, var(--glowBottom), transparent 65%),
    radial-gradient(900px 380px at 20% 100%, color-mix(in srgb, var(--glowBottom) 45%, transparent), transparent 70%),
    radial-gradient(900px 380px at 80% 100%, color-mix(in srgb, var(--glowBottom) 45%, transparent), transparent 70%);
}

/* Footer */
.footer{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
  padding:20px 0 34px;
  color:rgba(255,255,255,.55);
}

@media (max-width: 900px){
  .grid{grid-template-columns: 1fr;}
  .links{gap:6px}
  .links a{padding:8px 10px}
}
/* Founder section – FINAL */
.founder-profile {
  display: flex;
  align-items: center;
  gap: 28px;
}

.founder-img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,0.45);
  box-shadow: 0 0 28px rgba(34,197,94,0.25);
  flex-shrink: 0;
}

.founder-text {
  max-width: 600px;
}

.founder-text h3 {
  margin: 0 0 12px;
}

.founder-text p {
  margin: 0 0 10px;
}

/* Mobile */
@media (max-width: 768px) {
  .founder-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .founder-img {
    width: 180px;
    height: 180px;
  }
}