/* ===== Konsistente Viewport-Breite =====
   Reserviert den Scrollbar-Platz IMMER an html (scrollbar-gutter:stable),
   auch wenn keine Scrollbar gerendert wird. Damit ist die Inhaltsbreite
   konstant ueber alle Seiten – egal ob Lenis-Smooth-Scroll die native
   Body-Scrollbar verbirgt. Sichtbare Scrollbar wird NICHT erzwungen –
   Browser zeigt sie nur, wenn der Inhalt das Viewport überschreitet. */
html{scrollbar-gutter:stable}

/* ===== Standardisierte Navigation (Tracker-Seiten als Referenz) ===== */

/* Skip-Link (a11y) – muss vor .nav stehen, damit Header nicht verschoben wird */
.skip-link{position:absolute;top:-100px;left:0;background:#f59e0b;color:#0b0f1a;padding:.8rem 1.4rem;z-index:10000;font-weight:700;text-decoration:none;border-radius:0 0 10px 0;transition:top .2s;font-family:'DM Sans',system-ui,sans-serif}
.skip-link:focus{top:0}

.nav{position:sticky;top:0;left:0;right:0;z-index:50;padding:1rem 1.5rem;background:rgba(5,9,20,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line,rgba(255,255,255,.08));transition:all .3s cubic-bezier(.16,1,.3,1)}
.nav.scrolled{padding:.7rem 1.5rem}
.nav-inner{max-width:1360px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}
@media(max-width:480px){.nav{padding:.85rem .9rem}.nav-inner{gap:.6rem}.nav-cta{padding:.55rem .85rem;font-size:.82rem}}

.logo{display:flex;align-items:center;gap:.65rem;color:var(--ink,#f5f7fb);text-decoration:none;flex-shrink:0;min-width:0}
.logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,#f59e0b 0%,#fbbf24 50%,#ff7a1a 100%);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(245,158,11,.55);flex-shrink:0}
.logo-mark::after{content:'';width:12px;height:12px;border-radius:50%;background:#0b0f1a;box-shadow:0 0 0 3px #fbbf24}
.logo-text{font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:1.05rem;line-height:1.55;letter-spacing:-.02em;color:var(--ink,#f5f7fb);white-space:nowrap}
.logo-text span{color:#f59e0b}

.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink-2,#cfd6e4);font-size:.87rem;font-weight:500;padding:.55rem .9rem;border-radius:8px;transition:all .3s;text-decoration:none}
.nav-links a:hover{color:var(--ink,#f5f7fb);background:rgba(255,255,255,.04)}
.nav-active{color:#f59e0b !important;background:rgba(245,158,11,.08)}

.nav-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;background:#f59e0b;color:#0b0f1a !important;font-weight:700 !important;border-radius:8px;font-size:.87rem;transition:all .25s;box-shadow:0 8px 24px -6px rgba(245,158,11,.45);text-decoration:none}
.nav-cta:hover{background:#fbbf24;transform:translateY(-1px)}

.nav-phone{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border-radius:8px;font-size:.87rem;font-weight:600;color:var(--ink-2,#cfd6e4);transition:all .25s;border:1px solid transparent;text-decoration:none}
.nav-phone:hover{color:#fcd34d;background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.25)}
.nav-phone svg{color:#f59e0b}
@media(max-width:1100px){.nav-phone span{display:none}}
@media(max-width:900px){.nav-phone{display:none}}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink,#f5f7fb);padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink,#f5f7fb);position:relative;transition:all .3s}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:100%;height:2px;background:var(--ink,#f5f7fb);transition:all .3s}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}

@media(max-width:900px){
  .nav-links:not(.nav-cta-wrap){display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links:not(.nav-cta-wrap){display:flex;position:absolute;top:100%;left:0;right:0;background:rgba(5,9,20,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;padding:1rem;gap:.25rem;border-bottom:1px solid var(--line,rgba(255,255,255,.08));list-style:none;margin:0}
  .nav.open .nav-links:not(.nav-cta-wrap) a{padding:.9rem 1rem;font-size:1rem;display:block}
  .nav.open .nav-toggle span{background:transparent}
  .nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
  .nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
}

/* ===== ATMOSPHERE LAYER (global, auf allen Seiten) =====
   Lockert den sehr dunklen --bg (#050914) durch zwei dezente
   radial-gradients auf (warmer Goldschimmer oben, kalter Blau-
   hauch seitlich). Als fixed-Overlay mit mix-blend-mode:screen
   – hellt nur auf, dunkelt nicht ab. Sitzt ueber allen Section-
   Hintergruenden (sonst nicht sichtbar). pointer-events:none
   sorgt dafuer, dass keine Klicks blockiert werden. */
/* 1) Basis: Body-Hintergrund wird mit vertikalem Gradient
      heller in der Mitte (sichtbar in allen Bereichen wo
      Section-Hintergruende transparent sind). */
body{
  background:
    linear-gradient(180deg,#050914 0%,#0a1426 50%,#050914 100%) !important;
  background-attachment:fixed !important;
}
/* 2) Overlay: fixed radial-Gradients ueber allem, damit
      der Effekt auch dort sichtbar ist, wo Sections eigene
      opake Hintergruende haben (.usecases-section etc.).
      z-index:1 = ueber Sections, unter sticky-nav (z:50).
      pointer-events:none = Klicks gehen durch. */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(245,158,11,.10),transparent 65%),
    radial-gradient(ellipse 55% 70% at 100% 50%,rgba(96,165,250,.015),transparent 65%),
    radial-gradient(ellipse 55% 60% at 0% 90%,rgba(96,165,250,.01),transparent 65%);
}