:root {
  --bg: #05070b;
  --bg-2: #080d14;
  --panel: rgba(11, 17, 26, 0.78);
  --panel-solid: #0b111a;
  --line: rgba(109, 220, 255, 0.15);
  --cyan: #58dcff;
  --cyan-2: #a7efff;
  --red: #ff3a45;
  --gold: #e9c46a;
  --text: #eef7fb;
  --muted: #8ea1ad;
  --soft: #c4d4dc;
  --max: 1240px;
  --footer-h: 54px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}


.verified-name{display:inline-flex;align-items:flex-start;gap:8px;position:relative;}
.verified-badge{width:26px;height:26px;object-fit:contain;margin-top:-9px;flex-shrink:0;}


h1, h1.glitch, h1.hero-line {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
}

h2, h2.glitch, h2.hero-line {
  font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
}

h3, h3.glitch, h3.hero-line {
  font-size: clamp(0.82rem, 1.1vw, 1rem) !important;
}

h4, h4.glitch, h4.hero-line {
  font-size: clamp(0.72rem, 0.9vw, 0.88rem) !important;
}

h5, h5.glitch, h5.hero-line {
  font-size: clamp(0.62rem, 0.8vw, 0.76rem) !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media(max-width:700px){
  .update-info{
    width:90vw;
    left:50%;
    transform:translateX(-50%);
    font-size:.85rem;
  }
}

body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 15% 12%, rgba(88, 220, 255, 0.07), transparent 28%), radial-gradient(circle at 84% 6%, rgba(255, 58, 69, 0.08), transparent 24%), var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  padding-bottom: calc(var(--footer-h) + 14px);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(88,220,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(88,220,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 80%);
  z-index: -2;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  background: var(--cyan);
  color: #021017;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 800;
  z-index: 9999;
}

.skip-link:focus {
  transform: translateY(0);
}

.noise {
  position: fixed;
  inset: 0;
  opacity: .025;
  pointer-events: none;
  z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,220,255,.10), transparent 67%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: opacity .2s ease;
}

.shell {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--line);

  background:
    linear-gradient(
      115deg,
      rgba(5, 7, 11, 0.88) 6%,
      rgba(5, 7, 11, 0.40) 40%,
      rgba(5, 7, 11, 0.45) 100%
    );
}





/* ============================================================
   HERO CYBER IMAGE // RAHMEN + BILD
   ============================================================ */

.hero-cyber-image {
  position: absolute;                       /* Positioniert den kompletten Bildrahmen frei im Hero */
  top: 50%;                                /* Setzt den Rahmen vertikal auf die Mitte */
  right: clamp(24px, 3vw, 60px);           /* Abstand des Rahmens vom rechten Seitenrand */
  transform: translateY(-50%);             /* Zentriert den Rahmen exakt vertikal */

  width: min(42vw, 760px);                 /* HIER Größe von Rahmen + Bild einstellen */

  z-index: 1;                              /* Position innerhalb der Hero-Ebene */
  border-radius: 26px;                     /* Rundung des äußeren Rahmens */
  padding: 2px;                            /* Dicke des sichtbaren Goldrahmens */

  background: #05070b;                     /* Dunkler Hintergrund direkt hinter dem Bild */
  opacity: 0.25;                           /* Transparenz des gesamten Bildbereichs */

  box-shadow:
    0 0 8px rgba(233, 196, 106, 0.40),    /* Starker Goldschein direkt am Rahmen */
    0 0 22px rgba(233, 196, 106, 0.20),   /* Mittlerer Goldschein */
    0 0 55px rgba(233, 196, 106, 0.08);   /* Weicher äußerer Goldschein */

  overflow: hidden;                        /* Schneidet Animationen sauber am Rahmen ab */
  isolation: isolate;                      /* Eigene Ebene für ::before und ::after */
}



/* ============================================================
   HERO CYBER IMAGE // RAHMEN + BILD + DROPDOWN
   ============================================================ */

.hero-cyber-image{
  position:absolute;
  top:50%;
  right:clamp(24px,3vw,60px);
  transform:translateY(-50%);

  width:min(42vw,760px);

  z-index:1;
  padding:2px;
  border-radius:26px;

  background:rgba(5,7,11,.25);

  box-shadow:
    0 0 8px rgba(233,196,106,.10),
    0 0 22px rgba(233,196,106,.05),
    0 0 55px rgba(233,196,106,.02);

  overflow:hidden;
  isolation:isolate;
}


/* ============================================================
   HERO CYBER IMAGE // BILD
   ============================================================ */

.hero-cyber-image > img{
  position:relative;
  z-index:2;

  display:block;
  width:100%;
  height:auto;

  border-radius:24px;
  object-fit:contain;

  opacity:.25;
}


/* ============================================================
   HERO CYBER IMAGE // ROTIERENDE GOLDKANTE
   ============================================================ */

.hero-cyber-image::before{
  content:"";

  position:absolute;
  width:180%;
  height:180%;

  top:-40%;
  left:-40%;

  z-index:0;
  opacity:.25;

  background:
    conic-gradient(
      from 0deg,

      transparent 0deg,
      transparent 35deg,

      rgba(233,196,106,.05) 45deg,
      rgba(233,196,106,.35) 55deg,
      rgba(255,210,90,.80) 64deg,
      rgba(255,240,175,1) 70deg,
      #ffffff 74deg,
      rgba(255,220,110,1) 78deg,
      rgba(233,196,106,.45) 88deg,

      transparent 102deg,
      transparent 360deg
    );

  animation:heroGoldBorderRotate 3.8s linear infinite;
  transform-origin:center;
}


/* ============================================================
   HERO CYBER IMAGE // INNERE GOLDKANTE
   ============================================================ */

.hero-cyber-image::after{
  content:"";

  position:absolute;
  inset:2px;

  z-index:3;
  pointer-events:none;

  border:1px solid rgba(255,222,125,.32);
  border-radius:24px;

  background:
    linear-gradient(
      115deg,
      rgba(5,7,11,.05) 0%,
      rgba(5,7,11,.20) 45%,
      rgba(5,7,11,.10) 100%
    );

  box-shadow:
    inset 0 0 12px rgba(255,220,110,.08),
    inset 0 0 30px rgba(233,196,106,.035);

  opacity:.25;

  animation:heroGoldBorderPulse 2.4s ease-in-out infinite;
}


/* ============================================================
   HERO CYBER IMAGE // GOLD ROTATION
   ============================================================ */

@keyframes heroGoldBorderRotate{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}


/* ============================================================
   HERO CYBER IMAGE // GOLD PULSE
   ============================================================ */

@keyframes heroGoldBorderPulse{
  0%,
  100%{
    border-color:rgba(233,196,106,.25);

    box-shadow:
      inset 0 0 10px rgba(233,196,106,.05),
      0 0 4px rgba(233,196,106,.12);
  }

  50%{
    border-color:rgba(255,225,135,.75);

    box-shadow:
      inset 0 0 18px rgba(255,220,110,.10),
      0 0 10px rgba(255,215,100,.35);
  }
}


/* ============================================================
   HERO MESSAGE // DROPDOWN WIDTH
   ============================================================ */

.hero-message-dropdown{
  position:absolute;
  top:0;
  right:0;
  z-index:10;

  width:85%;
  max-width:none;

  margin:0;
  font-family:Consolas,"Liberation Mono",monospace;
}


/* ============================================================
   HERO MESSAGE // STRUCTURE
   ============================================================ */

.hero-message-block{
  margin:0 0 16px;
  padding:0 0 14px;
  border-bottom:1px solid rgba(88,220,255,.10);
}

.hero-message-block small,
.hero-message-conclusion small{
  display:block;
  margin-bottom:6px;
  color:#58dcff;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.12em;
}

.hero-message-block p{
  margin:0;
  line-height:1.65;
}

.hero-message-conclusion{
  margin-top:18px;
  padding:14px;
  border-left:2px solid #e9c46a;
  background:rgba(233,196,106,.035);
}

.hero-message-conclusion strong{
  display:block;
  padding:0;
  border:0;
  line-height:1.7;
}
/* ============================================================
   HERO MESSAGE // SINGLE SCROLLBAR
   ============================================================ */

.hero-message-dropdown{
  overflow:visible;
}

.hero-message-dropdown[open]{
  overflow:visible;
}

.hero-message-content{
  max-height:650px;
  overflow-y:auto;
  overflow-x:hidden;

  scrollbar-width:thin;
  scrollbar-color:rgba(88,220,255,.55) rgba(88,220,255,.05);
}

/* Alle Elemente innerhalb des Textbereichs selbst nicht scrollbar */
.hero-message-content > *,
.hero-message-block,
.hero-message-conclusion{
  overflow:visible;
  max-height:none;
}
/* ============================================================
   HERO MESSAGE // SMOOTH OPEN ANIMATION
   ============================================================ */



@keyframes heroMessageSmoothOpen{
  0%{
    opacity:0;
    transform:translateY(-12px) scaleY(.96);
  }

  40%{
    opacity:.65;
  }

  100%{
    opacity:1;
    transform:translateY(0) scaleY(1);
  }
}










/* ============================================================
   HERO MESSAGE // SMOOTH OPEN ANIMATION
   ============================================================ */


/* Chrome / Edge / Opera */
.hero-message-content::-webkit-scrollbar{
  width:7px;
}

.hero-message-content::-webkit-scrollbar-track{
  background:rgba(88,220,255,.05);
}

.hero-message-content::-webkit-scrollbar-thumb{
  background:rgba(88,220,255,.50);
  border-radius:10px;
}

.hero-message-content::-webkit-scrollbar-thumb:hover{
  background:rgba(88,220,255,.80);
}

/* ============================================================
   HERO MESSAGE // BUTTON
   ============================================================ */

.hero-message-dropdown summary{
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;
  min-height:42px;

  padding:0 14px;

  list-style:none;
  cursor:pointer;

  border:1px solid rgba(233,196,106,.45);
  border-top:none;
  border-right:none;

  border-radius:0 22px 0 8px;

  background:rgba(5,7,11,.92);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  color:#e9c46a;

  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;

  box-shadow:
    inset 0 0 16px rgba(233,196,106,.04),
    0 8px 24px rgba(0,0,0,.35);

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.hero-message-dropdown summary::-webkit-details-marker{
  display:none;
}

.hero-message-dropdown summary::after{
  content:"+";

  margin-left:14px;

  color:#58dcff;

  font-size:1rem;
  font-weight:900;
  line-height:1;
}

.hero-message-dropdown[open] summary::after{
  content:"−";
}

.hero-message-dropdown summary:hover{
  color:#ffe49a;

  border-color:rgba(233,196,106,.80);

  background:rgba(5,7,11,.97);

  box-shadow:
    inset 0 0 18px rgba(233,196,106,.07),
    0 0 16px rgba(233,196,106,.16);
}


/* ============================================================
   HERO MESSAGE // CONTENT
   ============================================================ */

.hero-message-content{
  position:relative;

  width:100%;

  margin:0;
  padding:17px;

  border-left:1px solid rgba(88,220,255,.18);
  border-bottom:1px solid rgba(88,220,255,.18);

  border-radius:0 0 0 8px;

  background:rgba(5,7,11,.96);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  box-shadow:
    inset 0 0 22px rgba(88,220,255,.025),
    0 14px 34px rgba(0,0,0,.45);
}


/* ============================================================
   HERO MESSAGE // LABEL
   ============================================================ */

.hero-message-content > span{
  display:block;

  margin-bottom:12px;

  color:#58dcff;

  font-size:.56rem;
  font-weight:900;
  letter-spacing:.12em;
}


/* ============================================================
   HERO MESSAGE // TEXT
   ============================================================ */

.hero-message-content p{
  margin:0 0 12px;

  color:#b9cad3;

  font-size:.75rem;
  font-weight:500;
  line-height:1.7;
}


/* ============================================================
   HERO MESSAGE // FINAL STATEMENT
   ============================================================ */

.hero-message-content strong{
  display:block;

  padding-top:12px;

  border-top:1px solid rgba(233,196,106,.16);

  color:#e9c46a;

  font-size:.74rem;
  line-height:1.65;
}




/* ============================================================
   HERO MESSAGE // STABLE ANIMATION BASE
   ============================================================ */

.hero-message-content{
  transform:none;
}


@media(max-width:1050px){
  .hero-message-dropdown{
    width:320px;
    max-width:88%;
  }
}

@media(max-width:700px){
  .hero-message-dropdown{
    width:270px;
    max-width:92%;
  }

  .hero-message-dropdown summary{
    min-height:38px;
    padding:0 11px;
    font-size:.58rem;
  }

  .hero-message-content{
    padding:14px;
  }

  .hero-message-content p{
    font-size:.68rem;
  }

  .hero-message-content strong{
    font-size:.68rem;
  }
}

/* ============================================================
   HERO CYBER IMAGE // KORREKTUR
   ============================================================ */

/* Container selbst nicht zusätzlich transparent machen */
.hero-cyber-image{
  opacity:1 !important;
}

/* Bild behält die bisherige Transparenz */
.hero-cyber-image > img{
  opacity:.25 !important;
}

/* Radar / rotierende Goldanimation komplett entfernen */
.hero-cyber-image::before{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* Innere Rahmenkante bleibt erhalten, aber ohne Animation */
.hero-cyber-image::after{
  animation:none !important;
  opacity:.25;
}

.hero-message-subline{
  display:block;
  margin:0 0 10px;
  padding:0;
  color:#58dcff;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.50rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.12em;
  opacity:.72;
}

/* ============================================================
   BILD
   ============================================================ */

.hero-cyber-image img {
  display: block;                          /* Entfernt den Standard-Abstand unter Bildern */

  width: 100%;                             /* IMMER 100% lassen – Bild folgt automatisch dem Rahmen */
  height: auto;                            /* Höhe wird proportional berechnet */

  border-radius: 24px;                     /* Rundung des Bildes passend zum Außenrahmen */
  object-fit: contain;                     /* Zeigt das komplette Bild ohne Abschneiden */

  position: relative;                      /* Ermöglicht kontrolliertes z-index */
  z-index: 2;                              /* Bild liegt über der rotierenden Goldanimation */
}


/* ============================================================
   ROTIERENDE GOLDKANTE
   ============================================================ */

.hero-cyber-image::before {
  content: "";                             /* Erstellt die animierte Ebene */
  position: absolute;                      /* Liegt innerhalb des Bildrahmens */

  width: 180%;                             /* Vergrößert die Animation über den Rahmen hinaus */
  height: 180%;                            /* Vergrößert die Animation über den Rahmen hinaus */

  top: -40%;                               /* Zentriert die große Animation vertikal */
  left: -40%;                              /* Zentriert die große Animation horizontal */

  z-index: 0;                              /* Animation liegt hinter dem eigentlichen Bild */

  background:
    conic-gradient(
      from 0deg,                           /* Startwinkel der Goldanimation */

      transparent 0deg,                    /* Unsichtbarer Bereich */
      transparent 35deg,                   /* Unsichtbarer Bereich */

      rgba(233, 196, 106, 0.05) 45deg,    /* Beginn des Goldscheins */
      rgba(233, 196, 106, 0.35) 55deg,    /* Gold wird stärker */
      rgba(255, 210, 90, 0.80) 64deg,     /* Heller Goldbereich */
      rgba(255, 240, 175, 1) 70deg,       /* Sehr heller Goldbereich */
      #ffffff 74deg,                       /* Weißer Lichtkern */
      rgba(255, 220, 110, 1) 78deg,       /* Gold nach dem Lichtkern */
      rgba(233, 196, 106, 0.45) 88deg,    /* Gold läuft weich aus */

      transparent 102deg,                  /* Ende des sichtbaren Lichtstrahls */
      transparent 360deg                   /* Rest bleibt transparent */
    );

  animation: heroGoldBorderRotate 3.8s linear infinite; /* Geschwindigkeit der Rotation */
  transform-origin: center;                /* Rotation erfolgt um die Mitte */
}


/* ============================================================
   INNERE GOLDKANTE
   ============================================================ */

.hero-cyber-image::after {
  content: "";                             /* Erstellt die innere Rahmenebene */
  position: absolute;                      /* Liegt direkt über dem Bild */

  inset: 2px;                              /* Abstand zum äußeren Rand – passend zu padding: 2px */

  z-index: 3;                              /* Liegt über dem Bild */
  border-radius: 24px;                     /* Rundung passend zum Bild */
  pointer-events: none;                    /* Blockiert keine Mausinteraktionen */

  background:
    linear-gradient(
      115deg,
      rgba(5, 7, 11, 0.05) 0%,            /* Sehr leichte Abdunklung links */
      rgba(5, 7, 11, 0.20) 45%,           /* Dunklere Mitte */
      rgba(5, 7, 11, 0.10) 100%           /* Leichter Verlauf nach rechts */
    );

  border: 1px solid rgba(255, 222, 125, 0.32); /* Sichtbare innere Goldkante */

  box-shadow:
    inset 0 0 12px rgba(255, 220, 110, 0.08), /* Innerer Goldschein */
    inset 0 0 30px rgba(233, 196, 106, 0.035); /* Weicher innerer Tiefeneffekt */

  animation: heroGoldBorderPulse 2.4s ease-in-out infinite; /* Pulsieren der Goldkante */
}


/* ============================================================
   ROTATION
   ============================================================ */

@keyframes heroGoldBorderRotate {
  from {
    transform: rotate(0deg);               /* Start der Rotation */
  }

  to {
    transform: rotate(360deg);             /* Eine vollständige Drehung */
  }
}


/* ============================================================
   GOLD PULSE
   ============================================================ */

@keyframes heroGoldBorderPulse {
  0%,
  100% {
    border-color: rgba(233, 196, 106, 0.25); /* Ruhiger Ausgangszustand */

    box-shadow:
      inset 0 0 10px rgba(233, 196, 106, 0.05), /* Dezenter innerer Schein */
      0 0 4px rgba(233, 196, 106, 0.12);        /* Dezenter äußerer Schein */
  }

  50% {
    border-color: rgba(255, 225, 135, 0.75); /* Heller Zustand während des Pulses */

    box-shadow:
      inset 0 0 18px rgba(255, 220, 110, 0.10), /* Stärkerer innerer Goldschein */
      0 0 10px rgba(255, 215, 100, 0.35);       /* Stärkerer äußerer Goldschein */
  }
}




@keyframes heroGoldBorderRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes heroGoldBorderPulse {

  0%,
  100% {
    border-color: rgba(233, 196, 106, 0.25);

    box-shadow:
      inset 0 0 10px rgba(233, 196, 106, 0.05),
      0 0 4px rgba(233, 196, 106, 0.12);
  }

  50% {
    border-color: rgba(255, 225, 135, 0.75);

    box-shadow:
      inset 0 0 18px rgba(255, 220, 110, 0.10),
      0 0 10px rgba(255, 215, 100, 0.35);
  }
}



#networkCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .54;
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.018) 4px);
  mix-blend-mode: overlay;
}

.topbar {
  width: min(var(--max), calc(100% - 40px));
  margin: 18px auto 0;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 1px solid rgba(88,220,255,.16);
  border-radius: 16px;
  background: rgba(5, 9, 14, .72);
  backdrop-filter: blur(18px);
  position: relative;
  z-index: 20;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  letter-spacing: .12em;
  font-size: .82rem;
  font-weight: 900;
}

.brand-mark {
  width: 260px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88,220,255,.4);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(88,220,255,.18), rgba(255,58,69,.08));
  color: var(--cyan);
  box-shadow: inset 0 0 26px rgba(88,220,255,.08), 0 0 24px rgba(88,220,255,.08);
}

.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: #b9cad3;
  font-size: .86rem;
  font-weight: 700;
  transition: .25s ease;
}

.nav-links a:hover {
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(88,220,255,.45);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  align-items: center;
  gap: 70px;
  padding: 80px 0 110px;
  position: relative;
  z-index: 4;
}

.eyebrow, .kicker, .mini-label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--cyan);
  text-transform: uppercase;
}

.live-dot, .status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 0 0 rgba(114,255,157,.5);
  animation: pulse 1.8s infinite;
  margin-right: 8px;
}

.glitch {
  margin: 18px 0 12px;
  font-size: clamp(3.2rem, 8vw, 7.7rem);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 950;
  position: relative;
  max-width: 900px;
  text-wrap: balance;
  text-shadow: 0 0 42px rgba(88,220,255,.10);
}

.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch:hover::before {
  color: var(--cyan);
  transform: translate(2px,-1px);
  clip-path: inset(8% 0 70% 0);
  opacity: .6;
}

.glitch:hover::after {
  color: var(--red);
  transform: translate(-2px,1px);
  clip-path: inset(68% 0 8% 0);
  opacity: .5;
}

.hero-line {
  color: #d6e5ec;
  font-size: clamp(.94rem, 1.5vw, 1.12rem);
  font-weight: 800;
  line-height: 1.8;
  max-width: 940px;
}

.hero-line span {
  color: rgba(88,220,255,.45);
  margin: 0 2px;
}

.role-console {
  margin: 22px 0 18px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid rgba(88,220,255,.18);
  background: rgba(1, 7, 11, .74);
  border-radius: 10px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: #dff8ff;
  box-shadow: inset 0 0 22px rgba(88,220,255,.04);
}

.console-prefix {
  color: #67dfff;
  font-size: .79rem;
}

#typedRole {
  font-weight: 800;
}

.caret {
  color: var(--cyan);
  animation: caret 1s steps(1) infinite;
}

.identity-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin: 6px 0 24px;
  max-width: 900px;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: marquee 28s linear infinite;
}

.marquee-track span {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
  padding: 7px 12px;
  color: #bdd0d9;
  font-size: .76rem;
  white-space: nowrap;
}

.hero-intro {
  max-width: 800px;
  color: var(--muted);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
  font-size: .86rem;
  letter-spacing: .02em;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #03131a;
  background: linear-gradient(135deg, #82e9ff, #45c9eb);
  box-shadow: 0 12px 34px rgba(88,220,255,.18);
}

.btn-primary:hover {
  box-shadow: 0 18px 44px rgba(88,220,255,.28);
}

.btn-ghost {
  color: #dceaf0;
  border-color: rgba(88,220,255,.22);
  background: rgba(255,255,255,.025);
}

.btn-ghost:hover {
  border-color: rgba(88,220,255,.5);
}

.hero-stats {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero-stats div {
  padding: 10px 14px;
  border-left: 2px solid rgba(88,220,255,.42);
  background: linear-gradient(90deg, rgba(88,220,255,.05), transparent);
}

.hero-stats strong {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
}

.hero-stats span {
  display: block;
  color: var(--muted);
  font-size: .73rem;
  margin-top: 2px;
}

.hero-visual {
  position: relative;
  min-height: 530px;
  display: grid;
  place-items: center;
}

.portrait-frame {
  width: min(390px, 83vw);
  aspect-ratio: 1/1;
  border-radius: 28px;
  position: relative;
  padding: 10px;
  background: linear-gradient(145deg, rgba(88,220,255,.28), rgba(255,58,69,.18));
  box-shadow: 0 42px 100px rgba(0,0,0,.52), 0 0 70px rgba(88,220,255,.08);
  z-index: 4;
}

.portrait-frame::before {
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:21px;
  z-index:2;
  pointer-events:none;
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  filter: contrast(1.04) saturate(.92);
}

.portrait-frame figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(2,8,12,.78);
  border: 1px solid rgba(88,220,255,.18);
  backdrop-filter: blur(9px);
  font-family: Consolas, monospace;
  font-size: .66rem;
  letter-spacing: .08em;
}

.portrait-orbit {
  position:absolute;
  width: 460px;
  height:460px;
  max-width: 92vw;
  max-height:92vw;
}

.orbit {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(88,220,255,.12);
}

.orbit-a {
  animation: spin 14s linear infinite;
  border-top-color: rgba(88,220,255,.75);
}

.orbit-b {
  inset:32px;
  animation: spinReverse 11s linear infinite;
  border-right-color: rgba(255,58,69,.6);
}

.orbit-c {
  inset:70px;
  animation: spin 8s linear infinite;
  border-bottom-color: rgba(233,196,106,.45);
}

.floating-code {
  position:absolute;
  z-index:5;
  font-family:Consolas,monospace;
  font-size:.67rem;
  color:#9eeeff;
  background:rgba(3,9,13,.86);
  border:1px solid rgba(88,220,255,.17);
  padding:7px 9px;
  border-radius:7px;
  box-shadow:var(--shadow);
}

.code-a {
  top: 14%;
  right: -4%;
  animation: float 4.6s ease-in-out infinite;
}

.code-b {
  left: -5%;
  top: 62%;
  animation: float 5.2s ease-in-out infinite .3s;
}

.code-c {
  right: 3%;
  bottom: 8%;
  animation: float 4.8s ease-in-out infinite .7s;
}

.scroll-cue {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  color:#75909d;
  text-decoration:none;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.2em;
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:center;
}

.scroll-cue span {
  width:1px;
  height:30px;
  background:linear-gradient(var(--cyan),transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}

.section {
  padding: 115px 0;
  position: relative;
}

.section-dark {
  background: linear-gradient(180deg, rgba(10,16,24,.88), rgba(5,7,11,.96));
  border-block:1px solid rgba(88,220,255,.08);
}

.section-heading {
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:42px;
}

.section-index {
  color:rgba(88,220,255,.36);
  font-family:Consolas,monospace;
  font-size:.78rem;
  padding-top:9px;
}

.section-heading h2 {
  margin:0;
  font-size:clamp(2.3rem,5vw,4.8rem);
  line-height:.96;
  letter-spacing:-.045em;
}

.section-heading .kicker {
  margin:0 0 9px;
}

.about-grid {
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:22px;
}

.panel {
  border:1px solid rgba(88,220,255,.12);
  background:var(--panel);
  border-radius:20px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.profile-card, .manifesto-card, .values-copy, .terminal-card {
  padding:28px;
}

.manifesto-card p {
    color: var(--muted);
    margin: 0;
    line-height: 1.75;
}

.manifesto-card p + p {
    margin-top: 18px;
}

.manifesto-card .mini-label {
    margin-bottom: 8px;
}

.manifesto-card h3 {
    margin: 6px 0 18px;
}

.manifesto-card .signature-line {
    margin-top: 28px;
    padding-top: 20px;
}

.profile-top {
  display:grid;
  grid-template-columns:148px 1fr;
  gap:22px;
  align-items:center;
}

/* =========================================
   Values Card
   ========================================= */

.values-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  height: 540px;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 28px;
  padding-right: 20px;

  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  scrollbar-width: thin;
  scrollbar-color: var(--cyan) rgba(255, 255, 255, 0.04);
}

/* Ãœberschrift */

.values-copy h3 {
  margin: 0 0 20px;

  line-height: 1.35;
}

/* Text */

.values-copy p {
  margin: 0;

  color: var(--muted);

  line-height: 1.8;
}

.values-copy p + p {
  margin-top: 18px;
}

/* Signatur */

.values-signature {
  margin-top: 28px;
  padding-top: 20px;
  padding-bottom: 4px;

  border-top: 1px solid rgba(88, 220, 255, 0.14);

  color: var(--cyan-2);

  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}

/* =========================================
   Cyberpunk Scrollbar
   ========================================= */

.values-copy::-webkit-scrollbar {
  width: 7px;
}

.values-copy::-webkit-scrollbar-track {
  margin: 12px 0;

  background: rgba(255, 255, 255, 0.025);

  border-radius: 10px;
}

.values-copy::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--cyan),
    rgba(88, 220, 255, 0.42),
    rgba(88, 220, 255, 0.18)
  );

  border-radius: 10px;

  box-shadow:
    0 0 8px rgba(88, 220, 255, 0.30),
    0 0 16px rgba(88, 220, 255, 0.12);
}

.values-copy::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--cyan-2),
    var(--cyan)
  );

  box-shadow:
    0 0 10px rgba(88, 220, 255, 0.55),
    0 0 24px rgba(88, 220, 255, 0.22);
}

.profile-top img {
  width:148px;
  height:148px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(88,220,255,.2);
}

.profile-top h3, .manifesto-card h3, .values-copy h3 {
  margin:6px 0 8px;
  font-size:1.6rem;
}

.profile-top p, .manifesto-card p, .values-copy p {
  color:var(--muted);
  margin:0;
}

.data-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}

.data-grid div {
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.022);
  padding:12px 13px;
  border-radius:10px;
}

.data-grid span {
  display:block;
  color:#6f8793;
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.data-grid strong {
  display:block;
  margin-top:3px;
  font-size:.9rem;
}

.manifesto-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    max-height: 540px;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 28px;
    padding-right: 20px;

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--cyan) rgba(255, 255, 255, 0.04);
}
.manifesto-card::-webkit-scrollbar {
    width: 7px;
}

.manifesto-card::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.manifesto-card::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--cyan),
        rgba(88, 220, 255, 0.35)
    );

    border-radius: 10px;
}

.manifesto-card::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-2);
}


.manifesto-card p + p {
  margin-top:16px;
}

.signature-line {
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(88,220,255,.12);
  color:var(--cyan-2);
  font-weight:900;
  letter-spacing:.02em;
}

.expertise-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.expert-card {
  position:relative;
  overflow:hidden;
  min-height:290px;
  padding:24px;
  border:1px solid rgba(88,220,255,.10);
  border-radius:17px;
  background:linear-gradient(155deg, rgba(17,26,38,.88), rgba(7,11,17,.92));
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.expert-card::after {
  content:"";
  position:absolute;
  inset:auto -30% -55% 10%;
  height:190px;
  background:radial-gradient(circle,rgba(88,220,255,.08),transparent 65%);
  transform:rotate(-10deg);
}

.expert-card:hover {
  transform:translateY(-6px);
  border-color:rgba(88,220,255,.3);
  box-shadow:0 26px 60px rgba(0,0,0,.32);
}

.expert-card .icon {
  font-size:2rem;
}

.expert-card h3 {
  margin:16px 0 8px;
  font-size:1.25rem;
}

.expert-card p {
  color:var(--muted);
  font-size:.92rem;
}

.expert-card > span {
  position:absolute;
  left:24px;
  bottom:20px;
  color:#66828f;
  font:700 .64rem/1 Consolas,monospace;
  letter-spacing:.08em;
}

.books-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.book-card {
  overflow:hidden;
  border:1px solid rgba(88,220,255,.12);
  border-radius:21px;
  background:linear-gradient(150deg,rgba(14,21,31,.94),rgba(7,10,16,.96));
  display:grid;
  grid-template-columns:205px 1fr;
  min-height:430px;
  box-shadow:var(--shadow);
}

.book-cover-wrap, .upcoming-visual {
  position:relative;
  min-height:100%;
  overflow:hidden;
  background:#08111c;
}

.book-cover-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.book-cover-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(5,7,11,.55));
}

.book-status {
  position:absolute;
  z-index:3;
  top:16px;
  left:14px;
  border-radius:999px;
  padding:6px 9px;
  font:900 .6rem/1.2 Consolas,monospace;
  letter-spacing:.08em;
}

.published {
  background:#73ff9c;
  color:#06240f;
}

.development {
  background:rgba(88,220,255,.14);
  color:#b7f4ff;
  border:1px solid rgba(88,220,255,.32);
}

.book-content {
  padding:28px;
  display:flex;
  flex-direction:column;
}

.book-content h3 {
  margin:5px 0 0;
  font-size:2rem;
  line-height:1.05;
}

.book-subtitle {
  color:#c6d5dc;
  margin:8px 0 14px;
  font-weight:700;
}

.book-content > p:not(.mini-label):not(.book-subtitle) {
  color:var(--muted);
  font-size:.91rem;
}

.book-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:16px;
}

.book-meta span {
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  padding:6px 9px;
  border-radius:7px;
  color:#9bb0ba;
  font-size:.68rem;
}

.book-actions {
  display:flex;
  gap:9px;
  margin-top:18px;
  flex-wrap:wrap;
}

.upcoming-visual {
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(88,220,255,.14),transparent 32%),linear-gradient(155deg,#08111a,#05070b);
}

.upcoming-visual::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(88,220,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(88,220,255,.05) 1px,transparent 1px);
  background-size:22px 22px;
  transform:perspective(400px) rotateX(45deg) scale(1.5);
  opacity:.45;
}

.future-title {
  z-index:2;
  text-align:center;
  font-weight:950;
  font-size:2.1rem;
  line-height:.83;
  letter-spacing:-.06em;
  color:#e8faff;
  text-shadow:0 0 30px rgba(88,220,255,.3);
}

.link-categories {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.category-head {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.category-head span {
  font:800 .66rem/1 Consolas,monospace;
  color:#4c6b78;
}

.category-head h3 {
  margin:0;
  font-size:.92rem;
  color:#c9d9e0;
}

.link-stack {
  display:grid;
  gap:9px;
}

.link-card {
  min-height:92px;
  display:grid;
  grid-template-columns:52px 1fr 28px;
  gap:14px;
  align-items:center;
  padding:14px;
  text-decoration:none;
  border:1px solid rgba(88,220,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}

.link-card:hover {
  transform:translateX(5px);
  border-color:rgba(88,220,255,.32);
  background:rgba(88,220,255,.045);
}

.link-icon {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(88,220,255,.10),rgba(255,58,69,.05));
  font-size:1.4rem;
}

.link-card strong {
  display:block;
  font-size:.98rem;
}

.link-card small {
  display:block;
  color:#78909b;
  margin-top:3px;
  font-size:.74rem;
}

.arrow {
  color:var(--cyan);
  font-size:1.1rem;
}

.values-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.values-copy p + p {
  margin-top:16px;
}

.terminal-card {
  padding:0;
  overflow:hidden;
  background:#020609;
}

.terminal-head {
  height:43px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:#0a0f15;
}

.terminal-head span {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff5f57;
}

.terminal-head span:nth-child(2) {
  background:#febc2e
}

.terminal-head span:nth-child(3) {
  background:#28c840
}

.terminal-head b {
  margin-left:8px;
  color:#748a95;
  font:600 .68rem/1 Consolas,monospace;
}

.terminal-body {
  padding:24px;
  font:500 .79rem/1.75 Consolas,"Liberation Mono",monospace;
}

.terminal-body p {
  margin:0 0 7px;
}

.prompt {
  color:#73ff9c;
  margin-right:7px;
}

.output {
  color:#76939f;
  padding-left:19px;
}

.output.strong {
  color:#a8f2ff;
  font-weight:800;
}

.blink-text {
  animation:softBlink 2s ease-in-out infinite;
}

.fixed-footer {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: var(--footer-h);
  display:grid;
  grid-template-columns:auto 1fr 42px;
  align-items:center;
  gap:14px;
  padding:0 10px 0 14px;
  border:1px solid rgba(88,220,255,.22);
  border-radius:13px;
  background:rgba(2,7,11,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 -14px 45px rgba(0,0,0,.32),0 0 35px rgba(88,220,255,.05);
  z-index:1000;
  overflow:hidden;
}

.fixed-footer::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(88,220,255,.10),transparent);
  transform:translateX(-100%);
  animation:footerSweep 5.2s ease-in-out infinite;
}

.footer-status {
  white-space:nowrap;
  font-size:.67rem;
  letter-spacing:.08em;
  color:#8096a0;
  position:relative;
  z-index:2;
}

.footer-status strong {
  color:#d8e8ee;
}

.footer-ticker {
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.footer-track {
  width:max-content;
  white-space:nowrap;
  color:#5e7782;
  font:800 .62rem/1 Consolas,monospace;
  letter-spacing:.12em;
  animation:footerMarquee 34s linear infinite;
}

.footer-top {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(88,220,255,.18);
  text-decoration:none;
  color:var(--cyan);
  background:rgba(88,220,255,.04);
  position:relative;
  z-index:3;
}

.reveal {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.7,.2,1),transform .8s cubic-bezier(.22,.7,.2,1);
}

.reveal.visible {
  opacity:1;
  transform:none;
}

.delay-1 {
  transition-delay:.12s;
}

.delay-2 {
  transition-delay:.22s;
}

@keyframes pulse {
  0% {
    box-shadow:0 0 0 0 rgba(114,255,157,.45)
  }
  70% {
    box-shadow:0 0 0 8px rgba(114,255,157,0)
  }
  100% {
    box-shadow:0 0 0 0 rgba(114,255,157,0)
  }
}

@keyframes caret {
  50% {
    opacity:0
  }
}

@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}

@keyframes footerMarquee {
  to {
    transform:translateX(-50%)
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes spinReverse {
  to {
    transform:rotate(-360deg)
  }
}

@keyframes float {
  50% {
    transform:translateY(-10px)
  }
}

@keyframes scrollPulse {
  50% {
    opacity:.25;
    transform:scaleY(.7)
  }
}

@keyframes softBlink {
  50% {
    opacity:.45
  }
}

@keyframes footerSweep {
  0%,60% {
    transform:translateX(-100%)
  }
  100% {
    transform:translateX(100%)
  }
}

@media (max-width: 1050px) {
  .hero-grid {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:65px;
  }
  .hero-visual {
    min-height:460px;
  }
  .hero {
    background:linear-gradient(115deg,rgba(5,7,11,.98),rgba(5,7,11,.88));
  }
  .about-grid,.values-grid {
    grid-template-columns:1fr;
  }
  .expertise-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .books-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --footer-h: 50px;
  }
  .shell,.topbar {
    width:min(100% - 24px,var(--max));
  }
  .topbar {
    margin-top:10px;
    height:58px;
    padding:0 12px;
  }
  .brand-text {
    display:none;
  }
  .nav-toggle {
    display:block;
  }
  .nav-links {
    position:absolute;
    top:66px;
    right:0;
    left:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:10px;
    border:1px solid rgba(88,220,255,.14);
    border-radius:12px;
    background:rgba(3,8,12,.96);
  }
  .nav-links.open {
    display:flex;
  }
  .nav-links a {
    padding:9px 10px;
  }
  .hero-grid {
    padding:65px 0 90px;
  }
  .glitch {
    font-size:clamp(3rem,17vw,5rem);
  }
  .hero-line {
    font-size:.92rem;
  }
  .role-console {
    display:flex;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    font-size:.78rem;
  }
  .console-prefix {
    display:none;
  }
  .hero-visual {
    min-height:400px;
  }
  .floating-code {
    display:none;
  }
  .section {
    padding:82px 0;
  }
  .profile-top {
    grid-template-columns:88px 1fr;
  }
  .profile-top img {
    width:88px;
    height:88px;
  }
  .data-grid {
    grid-template-columns:1fr;
  }
  .expertise-grid,.link-categories {
    grid-template-columns:1fr;
  }
  .book-card {
    grid-template-columns:1fr;
  }
  .book-cover-wrap,.upcoming-visual {
    min-height:360px;
  }
  .book-cover-wrap img {
    object-fit:contain;
    background:#07101a;
  }
  .upcoming-visual {
    min-height:280px;
  }
  .fixed-footer {
    left:6px;
    right:6px;
    bottom:5px;
    grid-template-columns:auto 1fr 38px;
    gap:8px;
    padding-left:9px;
  }
  .hide-mobile {
    display:none;
  }
  .footer-status strong {
    font-size:.6rem;
  }
  .footer-track {
    font-size:.56rem;
  }
  .cursor-glow {
    display:none;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .hero-actions .btn {
    width:100%;
  }
  .portrait-frame {
    width:min(330px,86vw);
  }
  .portrait-orbit {
    width:360px;
    height:360px;
  }
  .section-heading {
    gap:10px;
  }
  .section-heading h2 {
    font-size:2.45rem;
  }
  .footer-status {
    display:none;
  }
  .fixed-footer {
    grid-template-columns:1fr 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .reveal {
    opacity:1;
    transform:none;
  }
}

/* ============================================================
   DOWNLOAD CENTER
   ============================================================ */

#downloads {
  scroll-margin-top: 24px;
}

/* ============================================================
   DOWNLOAD SECTION
   ============================================================ */

.download-view {
  position: relative;
  width: 100%;
  padding: 110px 0 130px;
  overflow: hidden;
  border-top: 1px solid rgba(88, 220, 255, 0.10);
  background:
    radial-gradient(circle at 12% 12%, rgba(88, 220, 255, 0.055), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(233, 196, 106, 0.035), transparent 28%),
    linear-gradient(180deg, rgba(8, 13, 20, 0.96), rgba(5, 7, 11, 1));
}

.download-view::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(88, 220, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 220, 255, 0.018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 85%);
}

.download-shell {
  position: relative;
  z-index: 2;
}

/* ============================================================
   DOWNLOAD HEADER
   ============================================================ */

.download-header {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-areas:
    "back copy"
    "status copy";
  column-gap: 42px;
  row-gap: 12px;
  align-items: start;
  margin-bottom: 32px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(88, 220, 255, 0.14);
}

/* ============================================================
   BACK BUTTON
   ============================================================ */

.download-back {
  grid-area: back;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid rgba(88, 220, 255, 0.20);
  border-radius: 10px;
  color: #dceaf0;
  background: rgba(255, 255, 255, 0.025);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.download-back span:first-child {
  color: var(--cyan);
  font-size: 1rem;
}

.download-back:hover {
  transform: translateX(-3px);
  color: var(--cyan);
  border-color: rgba(88, 220, 255, 0.48);
  background: rgba(88, 220, 255, 0.045);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   ARCHIVE STATUS
   ============================================================ */

.download-header-status {
  grid-area: status;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  border: 1px solid rgba(114, 255, 157, 0.11);
  border-radius: 9px;
  color: #739080;
  background: rgba(114, 255, 157, 0.022);
  font: 800 0.59rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.download-header-status .status-dot {
  flex: 0 0 auto;
}

/* ============================================================
   HEADER CONTENT
   ============================================================ */

.download-header-copy {
  grid-area: copy;
  min-width: 0;
  padding: 2px 0 0;
}

.download-header-copy .kicker {
  margin: 0 0 10px;
  color: var(--cyan);
}

.download-header-copy h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.download-intro {
  max-width: 750px;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.72;
}

/* ============================================================
   CATEGORY NAVIGATION
   ============================================================ */

.download-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 44px;
  padding: 0;
}

/* ============================================================
   CATEGORY BUTTON
   ============================================================ */

.download-category {
  position: relative;
  min-width: 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 14px 18px;
  overflow: hidden;
  border: 1px solid rgba(88, 220, 255, 0.10);
  border-radius: 14px;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(15, 23, 34, 0.86), rgba(7, 11, 17, 0.92));
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}

.download-category::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

.download-category::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 170px;
  height: 170px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(88, 220, 255, 0.055), transparent 68%);
}

.download-category:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 220, 255, 0.28);
  background: linear-gradient(145deg, rgba(17, 28, 40, 0.94), rgba(7, 12, 19, 0.96));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.download-category.active {
  border-color: rgba(233, 196, 106, 0.38);
  background: linear-gradient(145deg, rgba(233, 196, 106, 0.075), rgba(13, 20, 29, 0.94));
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.28),
    inset 0 0 35px rgba(233, 196, 106, 0.018);
}

.download-category.active::before {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(233, 196, 106, 0.38);
}

/* ============================================================
   CATEGORY INDEX
   ============================================================ */

.download-category-index {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(88, 220, 255, 0.12);
  border-radius: 10px;
  color: rgba(88, 220, 255, 0.56);
  background: rgba(88, 220, 255, 0.025);
  font: 900 0.65rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.08em;
  transition:
    color 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.download-category.active .download-category-index {
  color: var(--gold);
  border-color: rgba(233, 196, 106, 0.28);
  background: rgba(233, 196, 106, 0.045);
}

.download-category-name {
  min-width: 0;
  position: relative;
  z-index: 2;
  color: #dcebf1;
  font-size: 0.91rem;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.download-category-type {
  position: relative;
  z-index: 2;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 6px;
  color: #68828d;
  background: rgba(255, 255, 255, 0.018);
  font: 800 0.56rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.11em;
}

/* ============================================================
   DOWNLOAD PANELS
   ============================================================ */

.download-panel {
  display: none;
}

.download-panel.active {
  display: block;
}

.download-panel[hidden] {
  display: none !important;
}

/* ============================================================
   PANEL HEADER
   ============================================================ */

.download-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(88, 220, 255, 0.08);
}

.download-panel-head .mini-label {
  display: block;
  margin: 0 0 7px;
}

.download-panel-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem) !important;
  line-height: 1.1;
  font-weight: 900;
}

.download-file-counter {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid rgba(88, 220, 255, 0.11);
  border-radius: 7px;
  color: #718d98;
  background: rgba(255, 255, 255, 0.018);
  font: 800 0.59rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.09em;
}

/* ============================================================
   DOWNLOAD FILE GRID
   ============================================================ */

.download-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* ============================================================
   DOWNLOAD FILE CARD
   ============================================================ */

.download-file {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 17px;
  padding: 21px;
  overflow: hidden;
  border: 1px solid rgba(88, 220, 255, 0.095);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(17, 26, 38, 0.86), rgba(7, 11, 17, 0.94));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.20);
  transition:
    transform 0.26s ease,
    border-color 0.26s ease,
    box-shadow 0.26s ease;
}

.download-file:hover {
  transform: translateY(-4px);
  border-color: rgba(88, 220, 255, 0.26);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.30);
}

.download-file-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88, 220, 255, 0.16);
  border-radius: 11px;
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(88, 220, 255, 0.08), rgba(255, 58, 69, 0.025));
  font: 900 0.68rem/1 Consolas, "Liberation Mono", monospace;
}

.download-file-content {
  min-width: 0;
}

.download-file-type {
  color: #657e89;
  font: 800 0.56rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.12em;
}

.download-file h3 {
  margin: 8px 0 7px;
  color: var(--text);
  font-size: 0.94rem !important;
  line-height: 1.35;
}

.download-file-description {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.81rem;
  line-height: 1.6;
}

/* ============================================================
   META
   ============================================================ */

.download-file-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
}

.download-file-meta span {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 6px;
  color: #758e99;
  background: rgba(255, 255, 255, 0.017);
  font: 800 0.55rem/1 Consolas, "Liberation Mono", monospace;
}

/* ============================================================
   AUDIO PLAYER
   ============================================================ */

.download-audio {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0 0 15px;
}

/* ============================================================
   ACTIONS
   ============================================================ */

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.download-actions .btn {
  min-height: 39px;
  padding: 0 13px;
  font-size: 0.72rem;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.download-empty {
  grid-column: 1 / -1;
  min-height: 170px;
  display: grid;
  place-items: center;
  padding: 25px;
  border: 1px dashed rgba(88, 220, 255, 0.14);
  border-radius: 14px;
  color: #66808b;
  background: rgba(255, 255, 255, 0.012);
  font-size: 0.8rem;
  text-align: center;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {
  .download-header {
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 26px;
  }

  .download-file-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {
  .download-view {
    padding: 82px 0 105px;
  }

  .download-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "back"
      "status";
    gap: 12px;
    margin-bottom: 26px;
    padding-bottom: 28px;
  }

  .download-header-copy {
    margin-bottom: 10px;
  }

  .download-back,
  .download-header-status {
    width: 100%;
  }

  .download-navigation {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 34px;
  }

  .download-category {
    min-height: 72px;
  }

  .download-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .download-view {
    padding: 70px 0 95px;
  }

  .download-category {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 12px 14px;
  }

  .download-category-index {
    width: 42px;
    height: 42px;
  }

  .download-category-type {
    display: none;
  }

  .download-file {
    grid-template-columns: 1fr;
    padding: 17px;
  }

  .download-file-icon {
    width: 48px;
    height: 48px;
  }

  .download-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .download-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   AUDIO PLAYER DESIGN ERGÄNZUNG
   ============================================================ */

.download-audio {
  border: 1px solid rgba(88, 220, 255, 0.20);
  border-radius: 10px;
  background: #071018;
  box-shadow: inset 0 0 20px rgba(88, 220, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  outline: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.download-audio:hover {
  border-color: rgba(88, 220, 255, 0.42);
  box-shadow: inset 0 0 22px rgba(88, 220, 255, 0.06), 0 10px 28px rgba(0, 0, 0, 0.30), 0 0 18px rgba(88, 220, 255, 0.07);
}

.download-audio:focus {
  border-color: rgba(88, 220, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(88, 220, 255, 0.08), 0 0 24px rgba(88, 220, 255, 0.10);
}

.download-audio::-webkit-media-controls-enclosure {
  border-radius: 9px;
  background: linear-gradient(135deg, #0b151f, #071018);
}

.download-audio::-webkit-media-controls-panel {
  background: linear-gradient(135deg, #0b151f, #071018);
}

.download-audio::-webkit-media-controls-play-button,
.download-audio::-webkit-media-controls-mute-button {
  filter: invert(85%) sepia(31%) saturate(968%) hue-rotate(163deg) brightness(105%) contrast(101%);
}

.download-audio::-webkit-media-controls-current-time-display,
.download-audio::-webkit-media-controls-time-remaining-display {
  color: #a7efff;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 11px;
}

.download-audio::-webkit-media-controls-timeline,
.download-audio::-webkit-media-controls-volume-slider {
  filter: saturate(1.35) brightness(1.08);
}

/* ============================================================
   DOWNLOAD BUTTON ANIMATION
   ============================================================ */

a.btn.btn-ghost[href="#downloads"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: downloadFloat 2.0s ease-in-out infinite;
}

a.btn.btn-ghost[href="#downloads"]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg 315deg, rgba(233, 196, 106, 0.15) 320deg, #e9c46a 334deg, #fff0b0 340deg, #e9c46a 346deg, transparent 354deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: downloadGoldOrbit 5s linear infinite;
  filter: drop-shadow(0 0 4px rgba(233, 196, 106, 0.45));
}

@keyframes downloadFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes downloadGoldOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  a.btn.btn-ghost[href="#downloads"],
  a.btn.btn-ghost[href="#downloads"]::before {
    animation: none;
  }
}

/* ============================================================
   DOWNLOAD FILE GRID
   ============================================================ */

.download-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  align-items: stretch;
}


/* ============================================================
   DOWNLOAD FILE CARD
   ============================================================ */

.download-file {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
}


/* ============================================================
   DOWNLOAD FILE CONTENT
   ============================================================ */

.download-file-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}


/* ============================================================
   AUDIO PLAYER
   ============================================================ */

.download-audio {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
}


/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */

.download-file-content .download-button {
  margin-top: 18px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 800px) {

  .download-file-grid {
    grid-template-columns: 1fr;
  }
}

.footer-update-status {
  color: #ff2d2d;
  font-weight: 600;
}

.update-list .update-separator {
  margin-top: 8px !important;
}

/* ============================================================
   UPDATE CENTER // BUG FIX ANIMATION
   ============================================================ */

.update-list .update-bugfix {
  position: relative;
  color: #d7b4b4;
  animation: bugFixPulse 2.4s ease-in-out infinite;
}

@keyframes bugFixPulse {
  0%, 100% {
    color: #c7a5a5;
    text-shadow: 0 0 0 rgba(255, 90, 90, 0);
  }

  50% {
    color: #ff8f8f;
    text-shadow:
      0 0 7px rgba(255, 90, 90, 0.28),
      0 0 14px rgba(255, 90, 90, 0.10);
  }
}

.update-list .update-bugfix::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 7px rgba(255, 90, 90, 0.45);
  vertical-align: middle;
  animation: bugFixDot 1.8s ease-in-out infinite;
}

@keyframes bugFixDot {
  0%, 100% {
    opacity: .45;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255, 90, 90, 0.7);
  }
}

/* ============================================================
   GITHUB // PINNED REPOSITORIES
   ============================================================ */

.github-projects-section {
  position: relative;
  overflow: hidden;
}

.github-projects-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(88, 220, 255, 0.045), transparent 38%);
}

.github-projects-section .shell {
  position: relative;
  z-index: 2;
}

/* ============================================================
   GITHUB CONTRIBUTION SNAKE
   ============================================================ */

.github-snake {
  display: block;
  width: 100%;
  margin: -8px 0 42px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid rgba(88, 220, 255, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.github-snake:hover {
  border-color: rgba(88, 220, 255, 0.28);
  background: rgba(88, 220, 255, 0.025);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);
}

.github-snake img {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin: 0 auto;
}

/* ============================================================
   REPOSITORY GRID
   ============================================================ */

.github-repo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* ============================================================
   PINNED REPOSITORY CARD
   ============================================================ */

.github-repo-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(88, 220, 255, 0.12);
  border-radius: 16px;
  color: inherit;
  background: linear-gradient(155deg, rgba(13, 20, 30, 0.94), rgba(7, 11, 17, 0.97));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20);
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.github-repo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.github-repo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(233, 196, 106, 0.42);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.32), 0 0 24px rgba(233, 196, 106, 0.045);
}

/* ============================================================
   THUMBNAIL
   ============================================================ */

.github-repo-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-bottom: 1px solid rgba(88, 220, 255, 0.09);
  background: #05070b;
}

.github-repo-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, rgba(5, 7, 11, 0.38));
}

.github-repo-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.github-repo-card:hover .github-repo-thumbnail img {
  transform: scale(1.025);
  filter: brightness(1.05);
}

/* ============================================================
   CONTENT
   ============================================================ */

.github-repo-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.github-repo-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.github-repo-icon {
  width: 18px;
  height: 18px;
  color: var(--cyan);
}

.github-repo-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.github-repo-head h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--cyan-2);
  font-size: 0.94rem !important;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.github-public {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #7f97a1;
  font: 700 0.56rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
}

.github-repo-content > p {
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.65;
}

/* ============================================================
   REPOSITORY META
   ============================================================ */

.github-repo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  color: #728995;
  font: 700 0.64rem/1 Consolas, "Liberation Mono", monospace;
}

.github-repo-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.github-language-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(88, 220, 255, 0.35);
}

.github-repo-meta .github-open {
  margin-left: auto;
  color: var(--gold);
  transition: transform 0.2s ease, color 0.2s ease;
}

.github-repo-card:hover .github-open {
  transform: translateX(3px);
  color: #ffe3a0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .github-repo-grid {
    grid-template-columns: 1fr;
  }

  .github-snake {
    margin-bottom: 32px;
  }
}

@media (max-width: 560px) {
  .github-snake {
    padding: 14px 10px;
    border-radius: 12px;
  }

  .github-repo-thumbnail {
    aspect-ratio: 16 / 8;
  }

  .github-repo-content {
    padding: 17px;
  }

  .github-repo-head {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .github-public {
    grid-column: 2;
    justify-self: start;
  }

  .github-repo-head h3 {
    white-space: normal;
  }

  .github-repo-meta {
    gap: 10px;
  }

  .github-repo-meta .github-open {
    width: 100%;
    margin-left: 0;
    padding-top: 5px;
  }
}

/* ============================================================
   GITHUB REPOSITORIES // CINEMATIC FLY-IN ANIMATION
   ============================================================ */

/* ------------------------------------------------------------
   GRUNDEINSTELLUNG
   ------------------------------------------------------------ */

.github-repo-card.reveal {
  --fly-x: 0px;
  --fly-y: 160px;
  --fly-rotate: 0deg;
  opacity: 0;
  transform: translate3d(var(--fly-x), var(--fly-y), 0) scale(0.78) rotate(var(--fly-rotate));
  filter: blur(10px) brightness(1.35);
  transition: none;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-origin: center;
}

/* ------------------------------------------------------------
   JEDE KARTE KOMMT AUS EINER ANDEREN RICHTUNG
   ------------------------------------------------------------ */

.github-repo-card:nth-child(1) {
  --fly-x: -180px;
  --fly-y: 90px;
  --fly-rotate: -7deg;
}

.github-repo-card:nth-child(2) {
  --fly-x: 180px;
  --fly-y: 90px;
  --fly-rotate: 7deg;
}

.github-repo-card:nth-child(3) {
  --fly-x: -220px;
  --fly-y: 30px;
  --fly-rotate: -5deg;
}

.github-repo-card:nth-child(4) {
  --fly-x: 220px;
  --fly-y: 30px;
  --fly-rotate: 5deg;
}

.github-repo-card:nth-child(5) {
  --fly-x: -160px;
  --fly-y: 150px;
  --fly-rotate: -8deg;
}

.github-repo-card:nth-child(6) {
  --fly-x: 160px;
  --fly-y: 150px;
  --fly-rotate: 8deg;
}

/* ------------------------------------------------------------
   SICHTBAR // ANIMATION STARTET
   ------------------------------------------------------------ */

.github-repo-card.reveal.visible {
  opacity: 1;
  animation: githubRepoImpact 1.35s cubic-bezier(0.16, 0.85, 0.22, 1) forwards;
}

/* ------------------------------------------------------------
   ZEITLICH VERSETZTES HEREINFLIEGEN
   ------------------------------------------------------------ */

.github-repo-card:nth-child(1).reveal.visible {
  animation-delay: 0s;
}

.github-repo-card:nth-child(2).reveal.visible {
  animation-delay: 0.10s;
}

.github-repo-card:nth-child(3).reveal.visible {
  animation-delay: 0.20s;
}

.github-repo-card:nth-child(4).reveal.visible {
  animation-delay: 0.30s;
}

.github-repo-card:nth-child(5).reveal.visible {
  animation-delay: 0.40s;
}

.github-repo-card:nth-child(6).reveal.visible {
  animation-delay: 0.50s;
}

/* ============================================================
   FLY-IN + IMPACT + WACKELN + FIXIEREN
   ============================================================ */

@keyframes githubRepoImpact {
  0% {
    opacity: 0;
    transform: translate3d(var(--fly-x), var(--fly-y), 0) scale(0.72) rotate(var(--fly-rotate));
    filter: blur(12px) brightness(1.5);
    box-shadow: 0 0 0 rgba(88, 220, 255, 0);
  }

  38% {
    opacity: 1;
    transform: translate3d(
      calc(var(--fly-x) * -0.05),
      calc(var(--fly-y) * -0.05),
      0
    ) scale(1.045) rotate(-1.8deg);
    filter: blur(0) brightness(1.18);
    box-shadow:
      0 35px 80px rgba(0, 0, 0, 0.42),
      0 0 38px rgba(88, 220, 255, 0.16);
  }

  52% {
    transform: translate3d(7px, -5px, 0) scale(1.025) rotate(1.5deg);
  }

  61% {
    transform: translate3d(-6px, 4px, 0) scale(1.015) rotate(-1.15deg);
  }

  69% {
    transform: translate3d(4px, -3px, 0) scale(1.01) rotate(0.8deg);
  }

  77% {
    transform: translate3d(-3px, 2px, 0) scale(1.005) rotate(-0.5deg);
  }

  85% {
    transform: translate3d(2px, -1px, 0) scale(1.002) rotate(0.25deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0) brightness(1);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  }
}

/* ============================================================
   LICHTIMPULS BEIM EINRASTEN
   ============================================================ */

.github-repo-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -70%;
  z-index: 5;
  width: 38%;
  height: 180%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(88, 220, 255, 0.05),
    rgba(167, 239, 255, 0.42),
    rgba(233, 196, 106, 0.22),
    transparent
  );
  transform: skewX(-20deg);
}

.github-repo-card.reveal.visible::after {
  animation: githubRepoLightSweep 0.85s ease-out forwards;
  animation-delay: 0.42s;
}

.github-repo-card:nth-child(2).reveal.visible::after {
  animation-delay: 0.52s;
}

.github-repo-card:nth-child(3).reveal.visible::after {
  animation-delay: 0.62s;
}

.github-repo-card:nth-child(4).reveal.visible::after {
  animation-delay: 0.72s;
}

.github-repo-card:nth-child(5).reveal.visible::after {
  animation-delay: 0.82s;
}

.github-repo-card:nth-child(6).reveal.visible::after {
  animation-delay: 0.92s;
}

@keyframes githubRepoLightSweep {
  0% {
    left: -70%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  75% {
    opacity: 0.65;
  }

  100% {
    left: 135%;
    opacity: 0;
  }
}

/* ============================================================
   KURZER BORDER IMPACT
   ============================================================ */

.github-repo-card.reveal.visible {
  border-color: rgba(88, 220, 255, 0.12);
}

.github-repo-card.reveal.visible:hover {
  transform: translateY(-6px);
  border-color: rgba(233, 196, 106, 0.44);
  box-shadow:
    0 30px 65px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(233, 196, 106, 0.055);
}

/* ============================================================
   MOBILE // BEWEGUNG ETWAS REDUZIEREN
   ============================================================ */

@media (max-width: 700px) {
  .github-repo-card:nth-child(1),
  .github-repo-card:nth-child(3),
  .github-repo-card:nth-child(5) {
    --fly-x: -90px;
    --fly-y: 90px;
  }

  .github-repo-card:nth-child(2),
  .github-repo-card:nth-child(4),
  .github-repo-card:nth-child(6) {
    --fly-x: 90px;
    --fly-y: 90px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .github-repo-card.reveal,
  .github-repo-card.reveal.visible {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .github-repo-card.reveal.visible::after {
    display: none;
    animation: none;
  }
}

/* ============================================================
   BRAND BADGE // NO WAY BACK
   ============================================================ */

.brand-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 12px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(233, 196, 106, 0.34);
  border-radius: 999px;
  color: #f6df9c;
  background: linear-gradient(135deg, rgba(233, 196, 106, 0.08), rgba(88, 220, 255, 0.035), rgba(5, 7, 11, 0.92));
  box-shadow: inset 0 0 14px rgba(233, 196, 106, 0.035), 0 0 14px rgba(233, 196, 106, 0.07);
  font: 900 0.61rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  animation: brandBadgePulse 3.2s ease-in-out infinite;
}

/* Leuchtender Statuspunkt */

.brand-text::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 5px rgba(233, 196, 106, 0.9), 0 0 12px rgba(233, 196, 106, 0.55);
  animation: brandBadgeDot 1.6s ease-in-out infinite;
}

/* Lichtstreifen */

.brand-text::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -45%;
  width: 24%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 190, 0.5), transparent);
  transform: skewX(-20deg);
  animation: brandBadgeSweep 4.5s ease-in-out infinite;
}

/* Hover */

.brand:hover .brand-text {
  border-color: rgba(233, 196, 106, 0.72);
  color: #fff0b0;
  box-shadow:
    inset 0 0 18px rgba(233, 196, 106, 0.06),
    0 0 10px rgba(233, 196, 106, 0.20),
    0 0 24px rgba(88, 220, 255, 0.06);
}

/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes brandBadgePulse {
  0%, 100% {
    border-color: rgba(233, 196, 106, 0.28);
    box-shadow: inset 0 0 14px rgba(233, 196, 106, 0.03), 0 0 10px rgba(233, 196, 106, 0.05);
  }

  50% {
    border-color: rgba(233, 196, 106, 0.52);
    box-shadow: inset 0 0 18px rgba(233, 196, 106, 0.055), 0 0 18px rgba(233, 196, 106, 0.13);
  }
}

@keyframes brandBadgeDot {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes brandBadgeSweep {
  0%, 62% {
    left: -45%;
    opacity: 0;
  }

  68% {
    opacity: 1;
  }

  82% {
    left: 125%;
    opacity: 0.7;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .brand-text,
  .brand-text::before,
  .brand-text::after {
    animation: none;
  }
}

/* ============================================================
   NAVIGATION BANNER DROPDOWN // 0110.png
   DIREKT UNTER DEN NAVIGATIONSLINKS
   ============================================================ */

.nav-links {
  position: relative;
  overflow: visible;
}

/* Unsichtbare Hover-Brücke zwischen Links und Banner */

.nav-links::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 18px;
  pointer-events: auto;
}

/* ============================================================
   BANNER
   ============================================================ */

.nav-links::after {
  content: "";
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  width: 1200px;
  max-width: 70vw;
  aspect-ratio: 1325 / 500;
  z-index: 100;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  border: 1px solid rgba(88, 220, 255, 0.25);
  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      rgba(5, 7, 11, 0.02),
      rgba(5, 7, 11, 0.16)
    ),
    url("assets/0110.png") center / contain no-repeat,
    #05070b;

  box-shadow:
    0 32px 85px rgba(0, 0, 0, 0.68),
    0 0 25px rgba(88, 220, 255, 0.14),
    0 0 55px rgba(233, 196, 106, 0.06),
    inset 0 0 28px rgba(88, 220, 255, 0.035);

  transform-origin: top center;

  transform:
    perspective(1000px)
    rotateX(-55deg)
    translateY(-18px)
    scaleY(0.55);

  clip-path: inset(0 0 100% 0 round 15px);

  filter: blur(6px) brightness(0.8);

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BEIM HOVER ÜBER DIE NAVIGATION ÖFFNEN
   ============================================================ */

.nav-links:hover::after {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;

  clip-path: inset(0 0 0 0 round 15px);

  animation:
    navBannerDrop 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    navBannerGlow 2.8s ease-in-out 0.8s infinite;
}

/* ============================================================
   3D AUFKLAPPEN + KURZES EINRASTEN
   ============================================================ */

@keyframes navBannerDrop {
  0% {
    opacity: 0;
    transform:
      perspective(1000px)
      rotateX(-55deg)
      translateY(-20px)
      scaleY(0.5);
    filter: blur(7px) brightness(0.7);
  }

  48% {
    opacity: 1;
    transform:
      perspective(1000px)
      rotateX(5deg)
      translateY(5px)
      scaleY(1.035);
    filter: blur(0) brightness(1.12);
  }

  65% {
    transform:
      perspective(1000px)
      rotateX(-3deg)
      translateY(-3px)
      scaleY(0.99);
  }

  78% {
    transform:
      perspective(1000px)
      rotateX(1.5deg)
      translateY(2px)
      scaleY(1.008);
  }

  90% {
    transform:
      perspective(1000px)
      rotateX(-0.5deg)
      translateY(0)
      scaleY(0.998);
  }

  100% {
    opacity: 1;
    transform:
      perspective(1000px)
      rotateX(0deg)
      translateY(0)
      scaleY(1);
    filter: blur(0) brightness(1);
  }
}

/* ============================================================
   LEICHTES CYAN / GOLD GLOW IM GEÖFFNETEN ZUSTAND
   ============================================================ */

@keyframes navBannerGlow {
  0%,
  100% {
    border-color: rgba(88, 220, 255, 0.22);

    box-shadow:
      0 32px 85px rgba(0, 0, 0, 0.68),
      0 0 20px rgba(88, 220, 255, 0.10),
      0 0 40px rgba(233, 196, 106, 0.035);
  }

  50% {
    border-color: rgba(233, 196, 106, 0.42);

    box-shadow:
      0 32px 85px rgba(0, 0, 0, 0.68),
      0 0 30px rgba(88, 220, 255, 0.17),
      0 0 60px rgba(233, 196, 106, 0.08);
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px), (hover: none) {
  .nav-links::before,
  .nav-links::after {
    display: none;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .nav-links:hover::after {
    animation: none;
    transform: none;
    filter: none;
  }
}

/* ============================================================
   SYSTEM UPDATE LOG
   ============================================================ */

.system-updates-section {
  position: relative;
  overflow: hidden;
}

.system-updates-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(88, 220, 255, 0.06),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(255, 58, 69, 0.035),
      transparent 24%
    );
}

.update-log {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.update-entry {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  position: relative;
}

.update-entry + .update-entry {
  margin-top: 18px;
}


/* TIMELINE */

.update-marker {
  position: relative;
  display: flex;
  justify-content: center;
}

.update-dot {
  width: 11px;
  height: 11px;

  margin-top: 28px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 0 5px rgba(88, 220, 255, 0.06),
    0 0 15px rgba(88, 220, 255, 0.65),
    0 0 30px rgba(88, 220, 255, 0.18);

  z-index: 2;
}

.update-line {
  position: absolute;

  top: 39px;
  bottom: -20px;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      rgba(88, 220, 255, 0.42),
      rgba(88, 220, 255, 0.04)
    );
}

.update-entry:last-child .update-line {
  display: none;
}


/* CARD */

.update-card {
  position: relative;

  padding: 24px 26px;

  border: 1px solid rgba(88, 220, 255, 0.13);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 17, 26, 0.88),
      rgba(7, 12, 18, 0.74)
    );

  backdrop-filter: blur(14px);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    inset 0 0 30px rgba(88, 220, 255, 0.015);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.update-card:hover {
  transform: translateY(-3px);

  border-color: rgba(88, 220, 255, 0.34);

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.38),
    0 0 25px rgba(88, 220, 255, 0.06);
}


/* HEADER */

.update-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 14px;
}

.update-version {
  display: block;

  margin-bottom: 5px;

  color: var(--cyan);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.68rem;
  font-weight: 900;

  letter-spacing: 0.13em;
}

.update-head h3 {
  margin: 0;

  color: var(--text);

  font-size: 1rem !important;
  line-height: 1.35;
}


/* STATUS */

.update-status {
  flex-shrink: 0;

  padding: 5px 9px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;

  color: var(--muted);

  background: rgba(255, 255, 255, 0.025);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.58rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}

.update-status.active {
  color: #72ff9d;

  border-color: rgba(114, 255, 157, 0.25);

  background: rgba(114, 255, 157, 0.055);

  box-shadow:
    0 0 18px rgba(114, 255, 157, 0.06);
}


/* TEXT */

.update-card p {
  margin: 0;

  max-width: 760px;

  color: var(--muted);

  font-size: 0.88rem;

  line-height: 1.7;
}


/* META */

.update-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 18px;
}

.update-meta span {
  padding: 5px 8px;

  border: 1px solid rgba(88, 220, 255, 0.10);
  border-radius: 5px;

  color: #8faab6;

  background: rgba(88, 220, 255, 0.025);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.59rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}


/* MOBILE */

@media (max-width: 700px) {

  .update-entry {
    grid-template-columns: 22px 1fr;
    gap: 10px;
  }

  .update-card {
    padding: 20px;
  }

  .update-head {
    flex-direction: column;
    gap: 10px;
  }

  .update-status {
    align-self: flex-start;
  }

}

.project-state.state-stable {
  color: var(--cyan);

  border: 1px solid rgba(88, 220, 255, 0.22);
  background: rgba(88, 220, 255, 0.045);
}

.project-state.state-stable i {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(88, 220, 255, 0.55);
}


.project-state.state-development {
  color: var(--gold);

  border: 1px solid rgba(233, 196, 106, 0.24);
  background: rgba(233, 196, 106, 0.045);
}

.project-state.state-development i {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233, 196, 106, 0.50);
}


.project-state.state-archived {
  color: #87949a;

  border: 1px solid rgba(135, 148, 154, 0.18);
  background: rgba(135, 148, 154, 0.035);
}

.project-state.state-archived i {
  background: #87949a;
}

/* ============================================================
   PROJECT STATUS BOARD
   ============================================================ */

.project-status-board {
  position: relative;

  margin-bottom: 28px;
  padding: 22px;

  border: 1px solid rgba(88, 220, 255, 0.14);
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(8, 15, 23, 0.94),
      rgba(5, 10, 16, 0.82)
    );

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28),
    inset 0 0 28px rgba(88, 220, 255, 0.025);

  overflow: hidden;
}


/* TOP GLOW */

.project-status-board::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan),
      rgba(88, 220, 255, 0.15),
      transparent
    );

  opacity: 0.7;
}


/* HEADER */

.project-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;
  margin-bottom: 18px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.project-status-header h3 {
  margin: 5px 0 0;

  color: var(--text);

  font-size: 1rem !important;
  letter-spacing: 0.02em;
}


/* ONLINE STATUS */

.project-status-live {
  display: flex;
  align-items: center;

  white-space: nowrap;

  color: #72ff9d;

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.62rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}


/* GRID */

.project-status-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
}


/* STATUS ITEM */

.project-status-item {
  position: relative;

  min-width: 0;

  padding: 16px;

  border: 1px solid rgba(88, 220, 255, 0.08);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.project-status-item:hover {
  transform: translateY(-2px);

  border-color: rgba(88, 220, 255, 0.26);

  background:
    linear-gradient(
      145deg,
      rgba(88, 220, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );
}


/* LABEL */

.project-status-label {
  display: block;

  margin-bottom: 8px;

  color: #667f8b;

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.56rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}


/* VALUE */

.project-status-item strong {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;

  color: var(--cyan-2);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.82rem;

  letter-spacing: 0.06em;
}


/* DESCRIPTION */

.project-status-item small {
  display: block;

  margin-top: 6px;

  color: #607681;

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.52rem;

  letter-spacing: 0.06em;
}


/* ONLINE VALUE */

.project-state-online {
  color: #72ff9d !important;

  text-shadow:
    0 0 12px rgba(114, 255, 157, 0.28);
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .project-status-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 600px) {

  .project-status-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-status-grid {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   REPOSITORY PROJECT STATE
   ============================================================ */

.github-project-state {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: auto;
  margin-bottom: 12px;

  padding-top: 14px;

  border-top: 1px solid rgba(255, 255, 255, 0.045);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;
}


/* STATUS */

.project-state {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 5px 8px;

  border-radius: 5px;

  font-size: 0.56rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}


/* STATUS DOT */

.project-state i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}


/* ACTIVE */

.project-state.state-active {
  color: #72ff9d;

  border: 1px solid rgba(114, 255, 157, 0.20);

  background: rgba(114, 255, 157, 0.045);
}

.project-state.state-active i {
  background: #72ff9d;

  box-shadow:
    0 0 8px rgba(114, 255, 157, 0.65);
}


/* VERSION */

.project-version {
  color: #667f8b;

  font-size: 0.56rem;
  font-weight: 800;

  letter-spacing: 0.07em;
}

/* ============================================================
   SECURITY RESEARCH // RESPONSIBLE DISCLOSURE
   ============================================================ */

.security-research-section {
  position: relative;
  overflow: hidden;
}


/* ============================================================
   INTRO
   ============================================================ */

.security-research-intro {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.75fr)
    minmax(0, 1.25fr);

  align-items: center;

  gap: 28px;

  margin-bottom: 28px;
}


.security-research-intro > p {
  margin: 0;

  color: var(--muted);

  font-size: 0.92rem;
  line-height: 1.8;
}


/* TERMINAL */

.security-research-terminal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 9px;

  min-height: 54px;

  padding: 15px 17px;

  border: 1px solid rgba(88, 220, 255, 0.16);
  border-radius: 10px;

  background:
    rgba(1, 7, 11, 0.82);

  box-shadow:
    inset 0 0 24px rgba(88, 220, 255, 0.035);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.69rem;
}


.security-terminal-prompt {
  color: var(--cyan);
}


.security-research-terminal > span:nth-child(2) {
  color: #a9bbc4;
}


.security-research-terminal strong {
  width: 100%;

  padding-top: 4px;

  color: #72ff9d;

  font-size: 0.67rem;

  letter-spacing: 0.08em;
}


/* ============================================================
   POLICY GRID
   ============================================================ */

.security-policy-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}


/* ============================================================
   POLICY CARD
   ============================================================ */

.security-policy-card {
  position: relative;

  min-width: 0;

  padding: 26px;

  overflow: hidden;

  border: 1px solid rgba(88, 220, 255, 0.11);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 17, 26, 0.88),
      rgba(6, 11, 17, 0.82)
    );

  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.28),
    inset 0 0 35px rgba(88, 220, 255, 0.018);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.security-policy-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(88, 220, 255, 0.30);

  box-shadow:
    0 28px 62px rgba(0, 0, 0, 0.36),
    0 0 25px rgba(88, 220, 255, 0.045);
}


/* NUMBER */

.security-policy-index {
  position: absolute;

  top: 18px;
  right: 20px;

  color: rgba(88, 220, 255, 0.18);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 1.8rem;
  font-weight: 900;
}


/* ICON */

.security-policy-icon {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 18px;

  border: 1px solid rgba(88, 220, 255, 0.16);
  border-radius: 9px;

  background:
    rgba(88, 220, 255, 0.035);

  font-size: 1.15rem;
}


/* TITLE */

.security-policy-card h3 {
  margin: 7px 0 12px;

  color: var(--text);

  font-size: 0.98rem !important;
}


/* TEXT */

.security-policy-card p {
  margin: 0;

  color: var(--muted);

  line-height: 1.75;

  font-size: 0.84rem;
}


/* STATUS */

.security-policy-state {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  margin-top: 20px;

  padding: 6px 9px;

  border: 1px solid rgba(114, 255, 157, 0.14);
  border-radius: 5px;

  background:
    rgba(114, 255, 157, 0.025);

  color: #72ff9d;

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.55rem;
  font-weight: 900;

  letter-spacing: 0.09em;
}


.security-policy-state span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #72ff9d;

  box-shadow:
    0 0 8px rgba(114, 255, 157, 0.6);
}


/* ============================================================
   DISCLOSURE PROCESS
   ============================================================ */

.disclosure-process {
  margin-top: 22px;

  padding: 25px;

  border: 1px solid rgba(233, 196, 106, 0.13);
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(11, 17, 26, 0.88),
      rgba(8, 13, 20, 0.75)
    );

  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.25);
}


.disclosure-process-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;
}


.disclosure-process-head h3 {
  margin: 6px 0 0;

  font-size: 1rem !important;
}


.disclosure-status {
  flex-shrink: 0;

  padding: 6px 9px;

  border: 1px solid rgba(233, 196, 106, 0.22);
  border-radius: 5px;

  color: var(--gold);

  background:
    rgba(233, 196, 106, 0.035);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.55rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}


/* ============================================================
   WORKFLOW
   ============================================================ */

.disclosure-steps {
  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  align-items: center;

  gap: 14px;
}


.disclosure-step {
  display: flex;

  gap: 12px;

  min-width: 0;
}


.disclosure-number {
  flex-shrink: 0;

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border: 1px solid rgba(88, 220, 255, 0.17);
  border-radius: 7px;

  color: var(--cyan);

  background:
    rgba(88, 220, 255, 0.035);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.59rem;
  font-weight: 900;
}


.disclosure-step strong {
  display: block;

  color: var(--cyan-2);

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.67rem;

  letter-spacing: 0.08em;
}


.disclosure-step p {
  margin: 6px 0 0;

  color: #718691;

  font-size: 0.7rem;

  line-height: 1.55;
}


.disclosure-arrow {
  color: rgba(88, 220, 255, 0.32);

  font-family:
    Consolas,
    monospace;

  font-weight: 900;
}


/* ============================================================
   PRINCIPLE
   ============================================================ */

.security-principle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 18px;

  padding: 16px 18px;

  border-left: 2px solid var(--cyan);

  background:
    linear-gradient(
      90deg,
      rgba(88, 220, 255, 0.05),
      transparent
    );

  font-family:
    Consolas,
    "Liberation Mono",
    monospace;
}


.security-principle-prefix {
  color: var(--cyan);

  font-size: 0.6rem;
  font-weight: 900;

  letter-spacing: 0.1em;
}


.security-principle strong {
  color: #a9bbc4;

  font-size: 0.61rem;

  letter-spacing: 0.08em;

  text-align: right;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

  .security-research-intro {
    grid-template-columns: 1fr;
  }

  .disclosure-steps {
    grid-template-columns: 1fr;
  }

  .disclosure-arrow {
    display: none;
  }

}


@media (max-width: 700px) {

  .security-policy-grid {
    grid-template-columns: 1fr;
  }

  .disclosure-process-head {
    flex-direction: column;
  }

  .security-principle {
    flex-direction: column;
    align-items: flex-start;
  }

  .security-principle strong {
    text-align: left;
  }

}

/* ============================================================
   HAMBURGER NAVIGATION
   ============================================================ */

.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
}


/* ============================================================
   MENU BUTTON
   ============================================================ */

.menu-toggle {
  width: 46px;
  height: 46px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 0;

  border: 1px solid rgba(88, 220, 255, 0.18);
  border-radius: 10px;

  background: rgba(88, 220, 255, 0.035);

  cursor: pointer;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.menu-toggle:hover {
  border-color: rgba(88, 220, 255, 0.5);

  background: rgba(88, 220, 255, 0.07);

  box-shadow:
    0 0 20px rgba(88, 220, 255, 0.08);
}


/* DREI STRICHE */

.menu-toggle span {
  display: block;

  width: 22px;
  height: 2px;

  border-radius: 2px;

  background: var(--cyan);

  box-shadow:
    0 0 8px rgba(88, 220, 255, 0.4);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


/* ============================================================
   X ANIMATION BEI GEÖFFNETEM MENÜ
   ============================================================ */

.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.nav-dropdown {
  position: absolute;

  top: calc(100% + 14px);
  right: 0;

  width: 270px;

  padding: 10px;

  border: 1px solid rgba(88, 220, 255, 0.16);
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 13, 20, 0.98),
      rgba(3, 8, 13, 0.98)
    );

  backdrop-filter: blur(20px);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(88, 220, 255, 0.05);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-10px);

  pointer-events: none;

  z-index: 1000;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}


/* MENÜ OFFEN */

.nav-dropdown.active {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;
}


/* ============================================================
   LINKS
   ============================================================ */

.nav-dropdown a {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 42px;

  padding: 0 13px;

  border-radius: 8px;

  color: #b9cad3;

  text-decoration: none;

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.03em;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    padding-left 0.2s ease;
}


.nav-dropdown a::before {
  content: "";

  width: 5px;
  height: 5px;

  margin-right: 10px;

  border-radius: 50%;

  background: rgba(88, 220, 255, 0.35);

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.nav-dropdown a:hover {
  color: var(--cyan);

  background: rgba(88, 220, 255, 0.055);

  padding-left: 17px;
}


.nav-dropdown a:hover::before {
  background: var(--cyan);

  box-shadow:
    0 0 8px rgba(88, 220, 255, 0.7);
}


/* TRENNLINIEN */

.nav-dropdown a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.035);
}

/* ============================================================
   HORIZONTAL NAVIGATION
   ============================================================ */

.horizontal-nav {
  position: relative;
  margin-left: auto;
  z-index: 9999;
}

.horizontal-nav > summary {
  list-style: none;
}

.horizontal-nav > summary::-webkit-details-marker {
  display: none;
}

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */

.horizontal-nav-toggle {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(88,220,255,.22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(88,220,255,.07), rgba(5,10,16,.92));
  box-shadow: inset 0 0 20px rgba(88,220,255,.03), 0 8px 24px rgba(0,0,0,.28);
  transition: .25s ease;
}

.horizontal-nav-toggle:hover {
  border-color: rgba(88,220,255,.55);
  box-shadow: 0 0 22px rgba(88,220,255,.12), 0 10px 28px rgba(0,0,0,.35);
}

.horizontal-nav-toggle span {
  width: 23px;
  height: 2px;
  display: block;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(88,220,255,.45);
  transition: transform .28s ease, opacity .2s ease;
}

/* ============================================================
   HORIZONTAL NAV // INSTANT LINK RESPONSE
   ============================================================ */

.horizontal-nav[open] .horizontal-nav-panel a {
  transition-delay: 0s !important;
}

.horizontal-nav[open] .horizontal-nav-panel a:hover,
.horizontal-nav[open] .horizontal-nav-panel a:focus-visible {
  transition-delay: 0s !important;
}

/* ============================================================
   HORIZONTAL NAV // SOFT HOVER PULSE
   ============================================================ */

.horizontal-nav[open] .horizontal-nav-panel a {
  transition:
    color .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .18s ease,
    text-shadow .18s ease,
    transform .18s ease;

  transition-delay: 0s !important;
}

.horizontal-nav[open] .horizontal-nav-panel a:hover {
  animation: navLinkSoftPulse 2s ease-in-out infinite;
}

@keyframes navLinkSoftPulse {
  0%, 100% {
    transform: translateY(-1px) scale(1);

    box-shadow:
      0 0 8px rgba(88, 220, 255, 0.08),
      0 0 16px rgba(88, 220, 255, 0.03),
      inset 0 0 12px rgba(88, 220, 255, 0.025);

    text-shadow:
      0 0 5px rgba(88, 220, 255, 0.20);
  }

  50% {
    transform: translateY(-1px) scale(1.012);

    box-shadow:
      0 0 14px rgba(88, 220, 255, 0.18),
      0 0 26px rgba(88, 220, 255, 0.07),
      inset 0 0 18px rgba(88, 220, 255, 0.055);

    text-shadow:
      0 0 8px rgba(88, 220, 255, 0.40),
      0 0 15px rgba(88, 220, 255, 0.12);
  }
}

/* ============================================================
   HAMBURGER → X
   ============================================================ */

.horizontal-nav[open] .horizontal-nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.horizontal-nav[open] .horizontal-nav-toggle span:nth-child(2) {
  opacity: 0;
}

.horizontal-nav[open] .horizontal-nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   HORIZONTAL PANEL
   ============================================================ */

.horizontal-nav-panel {
  position: absolute;
  top: calc(150% + 0px);
  right: 75px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px;
  white-space: nowrap;
  border: 1px solid rgba(88,220,255,.16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(8,14,21,.98), rgba(3,8,13,.98));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 55px rgba(0,0,0,.50), 0 0 30px rgba(88,220,255,.05);
  transform: translateY(-50%) scaleX(.05);
  transform-origin: right center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility .2s ease;
}

.horizontal-nav[open] .horizontal-nav-panel {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   LINKS
   ============================================================ */

.horizontal-nav-panel a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: #b9cad3;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 800;
  transition: .2s ease;
}

.horizontal-nav-panel a:hover {
  color: var(--cyan);
  border-color: rgba(88,220,255,.14);
  background: rgba(88,220,255,.06);
  text-shadow: 0 0 12px rgba(88,220,255,.35);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {
  .horizontal-nav-panel {
    top: 62px;
    right: 0;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    transform: translateY(0) scaleX(.05);
  }

  .horizontal-nav[open] .horizontal-nav-panel {
    transform: translateY(0) scaleX(1);
  }

  .horizontal-nav-panel::-webkit-scrollbar {
    height: 4px;
  }

  .horizontal-nav-panel::-webkit-scrollbar-thumb {
    background: rgba(88,220,255,.35);
    border-radius: 10px;
  }
}

.disclosure-step:hover .disclosure-number {
  border-color: rgba(88,220,255,.65);
  background: rgba(88,220,255,.10);
  color: var(--cyan-2);
  box-shadow: 0 0 12px rgba(88,220,255,.35), inset 0 0 14px rgba(88,220,255,.08);
  transform: scale(1.08);
}

.disclosure-step:nth-child(1) .disclosure-number::before { content: "⌕"; }
.disclosure-step:nth-child(3) .disclosure-number::before { content: "✓"; }
.disclosure-step:nth-child(5) .disclosure-number::before { content: "≡"; }
.disclosure-step:nth-child(7) .disclosure-number::before { content: "↗"; }

.disclosure-number::before {
  display: block;
  color: var(--cyan);
  font-family: Arial, "Segoe UI Symbol", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}








/* ============================================================
   ACTIVE DEVELOPMENT // FEATURE
   ============================================================ */

.active-development-section{
  position:relative;
  overflow:hidden;
}

.active-development-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 25%,rgba(88,220,255,.055),transparent 28%),
    radial-gradient(circle at 86% 70%,rgba(233,196,106,.045),transparent 27%),
    radial-gradient(circle at 65% 20%,rgba(255,58,69,.025),transparent 22%);
}

.development-feature-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr);
  overflow:hidden;
  border:1px solid rgba(88,220,255,.16);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(11,17,26,.96),rgba(5,9,14,.94));
  box-shadow:0 28px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
  isolation:isolate;
}

.development-feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(88,220,255,.025),transparent 32%,transparent 70%,rgba(233,196,106,.025));
}

.development-feature-preview{
  position:relative;
  display:block;
  width:100%;
  height:640px; /* HIER HÖHE EINSTELLEN */
  overflow:hidden;
  border-right:1px solid rgba(88,220,255,.12);
  background:#05070b;
}

.development-feature-preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center;
  transition:transform .45s ease,filter .45s ease;
}

.development-feature-card:hover .development-feature-preview img{
  transform:scale(1.025);
  filter:brightness(1.06);
}

.development-preview-state{
  position:absolute;
  left:18px;
  bottom:120px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(114,255,157,.26);
  border-radius:7px;
  background:rgba(5,9,14,.88);
  color:#72ff9d;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.1em;
  backdrop-filter:blur(10px);
}

.development-preview-state i,
.development-feature-status span i{
  width:7px;
  height:7px;
  display:block;
  flex-shrink:0;
  border-radius:50%;
  background:#72ff9d;
  box-shadow:0 0 10px rgba(114,255,157,.8);
  animation:pulse 1.8s infinite;
}

.development-feature-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px;
}

.development-feature-content h3{
  margin:8px 0 4px;
  color:var(--text);
  font-size:clamp(1.35rem,2vw,1.8rem) !important;
}

.development-feature-subtitle{
  margin:0 0 18px;
  color:var(--gold);
  font-weight:800;
}

.development-feature-content > p:not(.development-feature-subtitle){
  margin:0 0 14px;
  color:var(--soft);
}

.development-feature-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 20px;
}

.development-feature-tags span{
  padding:6px 9px;
  border:1px solid rgba(88,220,255,.14);
  border-radius:6px;
  background:rgba(88,220,255,.035);
  color:#a7efff;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.06em;
}

.development-feature-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:2px;
  padding:12px 14px;
  border:1px solid rgba(88,220,255,.10);
  border-left:2px solid var(--cyan);
  border-radius:8px;
  background:linear-gradient(90deg,rgba(88,220,255,.045),rgba(88,220,255,.01));
  font-family:Consolas,"Liberation Mono",monospace;
}

.development-feature-status span{
  display:flex;
  align-items:center;
  gap:8px;
  color:#72ff9d;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
}

.development-feature-status strong{
  color:#8197a2;
  font-size:.59rem;
  letter-spacing:.08em;
}

.development-feature-actions{
  margin-top:22px;
}

@media(max-width:900px){
  .development-feature-card{grid-template-columns:1fr;}
  .development-feature-preview{min-height:auto;border-right:0;border-bottom:1px solid rgba(88,220,255,.12);}
  .development-feature-preview img{height:auto;aspect-ratio:2/1;object-fit:cover;}
}

@media(max-width:600px){
  .development-feature-content{padding:22px;}
  .development-feature-status{align-items:flex-start;flex-direction:column;}
  .development-feature-preview img{aspect-ratio:16/9;}
}









/* ============================================================
   TECH STACK // SYSTEM MATRIX
   ============================================================ */

.tech-stack-section {
  position: relative;
  overflow: hidden;
}

.tech-stack-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 20%, rgba(88,220,255,.05), transparent 26%), radial-gradient(circle at 88% 80%, rgba(233,196,106,.035), transparent 24%);
}

.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.tech-stack-card {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(88,220,255,.11);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(11,17,26,.88), rgba(6,11,17,.80));
  box-shadow: 0 22px 52px rgba(0,0,0,.28), inset 0 0 30px rgba(88,220,255,.018);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.tech-stack-card:hover {
  transform: translateY(-4px);
  border-color: rgba(88,220,255,.30);
  box-shadow: 0 28px 62px rgba(0,0,0,.36), 0 0 25px rgba(88,220,255,.045);
}

.tech-stack-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.tech-stack-head > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid rgba(88,220,255,.18);
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(88,220,255,.035);
  font: 900 .58rem/1 Consolas, "Liberation Mono", monospace;
}

.tech-stack-head h3 {
  margin: 0;
  color: var(--text);
  font-size: .95rem !important;
  letter-spacing: .02em;
}

.tech-stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-stack-items span {
  padding: 7px 10px;
  border: 1px solid rgba(88,220,255,.11);
  border-radius: 6px;
  color: var(--cyan-2);
  background: rgba(88,220,255,.025);
  font: 800 .62rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .04em;
  transition: .2s ease;
}

.tech-stack-items span:hover {
  color: #fff;
  border-color: rgba(88,220,255,.35);
  background: rgba(88,220,255,.075);
  box-shadow: 0 0 12px rgba(88,220,255,.08);
}

.tech-stack-card p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}

.tech-stack-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding: 15px 18px;
  border: 1px solid rgba(88,220,255,.10);
  border-left: 2px solid var(--cyan);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(88,220,255,.05), rgba(88,220,255,.01));
  font-family: Consolas, "Liberation Mono", monospace;
}

.tech-stack-status span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #72ff9d;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.tech-stack-status span i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 9px rgba(114,255,157,.6);
}

.tech-stack-status strong {
  color: #728995;
  font-size: .57rem;
  letter-spacing: .1em;
}

@media (max-width: 850px) {
  .tech-stack-grid { grid-template-columns: 1fr; }
  .tech-stack-status { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SYSTEM STATUS // CONTROL PANEL
   ============================================================ */

.system-status-section {
  position: relative;
  overflow: hidden;
}

.system-status-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% 25%, rgba(88,220,255,.05), transparent 28%), radial-gradient(circle at 85% 75%, rgba(114,255,157,.025), transparent 25%);
}

.system-status-panel {
  position: relative;
  padding: 22px;
  border: 1px solid rgba(88,220,255,.14);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10,16,24,.92), rgba(5,10,16,.88));
  box-shadow: 0 26px 65px rgba(0,0,0,.35), inset 0 0 30px rgba(88,220,255,.018);
}

.system-status-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .7;
}

/* ============================================================
   HEADER
   ============================================================ */

.system-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 4px 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.system-status-header > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.system-status-kicker {
  color: var(--cyan);
  font: 900 .54rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .13em;
}

.system-status-header strong {
  color: var(--text);
  font: 900 .82rem/1.3 Consolas, "Liberation Mono", monospace;
  letter-spacing: .08em;
}

.system-status-global {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(114,255,157,.18);
  border-radius: 6px;
  color: #72ff9d;
  background: rgba(114,255,157,.035);
  font: 900 .55rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .09em;
}

.system-status-global i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 9px rgba(114,255,157,.65);
}

/* ============================================================
   STATUS GRID
   ============================================================ */

.system-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.system-status-item {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(88,220,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.system-status-item:hover {
  transform: translateY(-2px);
  border-color: rgba(88,220,255,.25);
  background: rgba(88,220,255,.035);
}

/* ============================================================
   ICON
   ============================================================ */

.system-status-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88,220,255,.15);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(88,220,255,.035);
  font: 900 .58rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .04em;
  box-shadow: inset 0 0 14px rgba(88,220,255,.025);
}

/* ============================================================
   INFORMATION
   ============================================================ */

.system-status-info {
  min-width: 0;
}

.system-status-info span {
  display: block;
  margin-bottom: 5px;
  color: #667f8b;
  font: 900 .54rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .10em;
}

.system-status-info strong {
  display: block;
  overflow: hidden;
  color: var(--cyan-2);
  font: 900 .72rem/1.25 Consolas, "Liberation Mono", monospace;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   STATES
   ============================================================ */

.system-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 5px;
  font: 900 .52rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}

.system-state i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
}

.system-state.online {
  color: #72ff9d;
  border: 1px solid rgba(114,255,157,.16);
  background: rgba(114,255,157,.03);
}

.system-state.online i {
  background: #72ff9d;
  box-shadow: 0 0 7px rgba(114,255,157,.6);
}

.system-state.active {
  color: var(--cyan);
  border: 1px solid rgba(88,220,255,.18);
  background: rgba(88,220,255,.035);
}

.system-state.active i {
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(88,220,255,.6);
}

.system-state.development {
  color: var(--gold);
  border: 1px solid rgba(233,196,106,.18);
  background: rgba(233,196,106,.035);
}

.system-state.development i {
  background: var(--gold);
  box-shadow: 0 0 7px rgba(233,196,106,.55);
}

/* ============================================================
   FOOTER
   ============================================================ */

.system-status-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 14px 4px 2px;
  border-top: 1px solid rgba(255,255,255,.045);
  color: #526a76;
  font: 800 .52rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .09em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {
  .system-status-grid { grid-template-columns: 1fr; }
  .system-status-header { flex-direction: column; align-items: flex-start; }
  .system-status-footer { flex-wrap: wrap; justify-content: flex-start; }
}

@media (max-width: 520px) {
  .system-status-item { grid-template-columns: 42px minmax(0,1fr); }
  .system-state { grid-column: 2; justify-self: start; }
}

/* ============================================================
   CONTACT // SECURE CHANNELS
   ============================================================ */

.contact-section {
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 18%, rgba(88,220,255,.05), transparent 27%), radial-gradient(circle at 88% 82%, rgba(255,58,69,.035), transparent 24%);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.contact-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(88,220,255,.11);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(11,17,26,.90), rgba(6,11,17,.82));
  box-shadow: 0 22px 52px rgba(0,0,0,.28), inset 0 0 30px rgba(88,220,255,.018);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(88,220,255,.30);
  box-shadow: 0 28px 62px rgba(0,0,0,.36), 0 0 24px rgba(88,220,255,.045);
}

.contact-card-security {
  border-color: rgba(233,196,106,.16);
}

.contact-card-security:hover {
  border-color: rgba(233,196,106,.38);
  box-shadow: 0 28px 62px rgba(0,0,0,.36), 0 0 24px rgba(233,196,106,.055);
}

/* CARD HEADER */

.contact-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.contact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88,220,255,.17);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(88,220,255,.035);
  font: 900 .58rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .05em;
}

.contact-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(114,255,157,.15);
  border-radius: 5px;
  color: #72ff9d;
  background: rgba(114,255,157,.03);
  font: 900 .51rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}

.contact-state i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 8px rgba(114,255,157,.6);
}

.contact-state.security {
  color: var(--gold);
  border-color: rgba(233,196,106,.18);
  background: rgba(233,196,106,.035);
}

.contact-state.security i {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(233,196,106,.55);
}

/* CONTENT */

.contact-card h3 {
  margin: 7px 0 12px;
  color: var(--text);
  font-size: .98rem !important;
}

.contact-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.75;
}

/* ACTION */

.contact-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(88,220,255,.12);
  border-radius: 8px;
  color: #a9bec8;
  background: rgba(88,220,255,.025);
  text-decoration: none;
  font: 800 .67rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .05em;
  transition: .22s ease;
}

.contact-action strong {
  color: var(--gold);
  font-size: .85rem;
  transition: transform .22s ease;
}

.contact-action:hover {
  color: var(--cyan);
  border-color: rgba(88,220,255,.35);
  background: rgba(88,220,255,.065);
}

.contact-action:hover strong {
  transform: translate(3px,-2px);
}

/* ============================================================
   CONTACT TERMINAL
   ============================================================ */

.contact-terminal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 17px;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid rgba(88,220,255,.12);
  border-radius: 9px;
  background: rgba(1,7,11,.80);
  box-shadow: inset 0 0 22px rgba(88,220,255,.03);
  font: 800 .61rem/1.3 Consolas, "Liberation Mono", monospace;
}

.contact-terminal-prompt { color: var(--cyan); }
.contact-terminal > span:nth-child(2) { color: #8096a1; }
.contact-terminal strong { color: #72ff9d; letter-spacing: .07em; }

.contact-terminal-cursor {
  color: var(--cyan);
  animation: contactCursor 1s steps(1) infinite;
}

@keyframes contactCursor {
  50% { opacity: 0; }
}

/* RESPONSIVE */

@media (max-width: 850px) {
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .contact-card { padding: 20px; }
  .contact-terminal { font-size: .55rem; }
}

/* ============================================================
   FOOTER // CONTROL CENTER
   ============================================================ */

.fixed-footer {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: var(--footer-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  padding: 0 10px 0 14px;
  border: 1px solid rgba(88,220,255,.22);
  border-radius: 13px;
  background: rgba(2,7,11,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -14px 45px rgba(0,0,0,.32), 0 0 35px rgba(88,220,255,.05);
  z-index: 9000;
  overflow: visible;
}

/* dezenter Lichtimpuls */

.fixed-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  clip-path: inset(0 round 13px);
  background: linear-gradient(90deg, transparent, rgba(88,220,255,.09), transparent);
  transform: translateX(-100%);
  animation: footerSweep 6s ease-in-out infinite;
}

@keyframes footerSweep {
  0%, 70% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* ============================================================
   LEFT STATUS
   ============================================================ */

.footer-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  color: #8096a0;
  font-size: .67rem;
  letter-spacing: .08em;
}

.footer-status strong {
  color: #d8e8ee;
  font-size: .67rem;
}

.footer-status .status-dot {
  flex-shrink: 0;
}


/* ============================================================
   LAST UPDATE // DETAILS TRIGGER
   ============================================================ */

.footer-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.footer-control > summary {
  list-style: none;
}

.footer-control > summary::-webkit-details-marker {
  display: none;
}

.footer-update-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #ff3a45;
  font: 800 .64rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .2s ease, text-shadow .2s ease;
}

.footer-update-status::before {
  content: "[";
  margin-right: 3px;
  color: rgba(255,58,69,.45);
}

.footer-update-status::after {
  content: "]";
  margin-left: 3px;
  color: rgba(255,58,69,.45);
}

.footer-update-status:hover {
  color: #ff7279;
  text-shadow: 0 0 12px rgba(255,58,69,.45);
}

.footer-control[open] .footer-update-status {
  color: #ff858b;
  text-shadow: 0 0 14px rgba(255,58,69,.55);
}


/* ============================================================
   CONTROL CENTER PANEL
   ============================================================ */

.footer-control-panel {
  position: fixed;
  left: 18px;
  bottom: calc(var(--footer-h) + 20px);
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: calc(100vw - 36px);
  padding: 8px;
  white-space: nowrap;
  overflow-x: auto;
  border: 1px solid rgba(88,220,255,.22);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(7,13,20,.99), rgba(2,7,11,.99));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 24px 65px rgba(0,0,0,.62), 0 0 30px rgba(88,220,255,.08);
  z-index: 10000;
  transform-origin: left bottom;
  animation: footerControlOpen .25s cubic-bezier(.16,1,.3,1);
}

@keyframes footerControlOpen {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.footer-control-panel::-webkit-scrollbar {
  height: 4px;
}

.footer-control-panel::-webkit-scrollbar-thumb {
  background: rgba(88,220,255,.30);
  border-radius: 10px;
}


/* ============================================================
   CONTROL CENTER LABEL
   ============================================================ */

.footer-control-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border-right: 1px solid rgba(88,220,255,.10);
  color: var(--cyan);
  font: 900 .55rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .12em;
}


/* ============================================================
   CONTROL CENTER LINKS
   ============================================================ */

.footer-control-panel a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  color: #aebfc8;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: 800 .60rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .04em;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.footer-control-panel a:hover {
  color: var(--cyan);
  border-color: rgba(88,220,255,.17);
  background: rgba(88,220,255,.06);
  transform: translateY(-1px);
}


/* ============================================================
   ONLINE STATUS
   ============================================================ */

.footer-control-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  color: #72ff9d;
  font: 900 .54rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .09em;
}

.footer-control-online i {
  width: 6px;
  height: 6px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 8px rgba(114,255,157,.7);
}


/* ============================================================
   FOOTER TICKER
   ============================================================ */

.footer-ticker {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.footer-track {
  width: max-content;
  white-space: nowrap;
  color: #5e7782;
  font: 800 .62rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .12em;
  animation: footerMarquee 34s linear infinite;
}

@keyframes footerMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ============================================================
   BACK TO TOP
   ============================================================ */

.footer-top {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  justify-self: end;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid rgba(88,220,255,.18);
  border-radius: 8px;
  background: rgba(88,220,255,.035);
  font: 900 .85rem/1 Consolas, monospace;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.footer-top:hover {
  color: #fff;
  border-color: rgba(88,220,255,.48);
  background: rgba(88,220,255,.09);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(88,220,255,.12);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {
  .fixed-footer { left: 6px; right: 6px; bottom: 5px; grid-template-columns: auto minmax(0,1fr) 38px; gap: 8px; padding-left: 10px; }
  .footer-status { font-size: .60rem; }
  .footer-status strong { font-size: .60rem; }
  .footer-update-status { font-size: .57rem; }
  .footer-track { font-size: .55rem; }
  .footer-control-panel { left: 12px; max-width: calc(100vw - 24px); }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
  .fixed-footer { grid-template-columns: minmax(0,1fr) 36px; height: 48px; }
  .footer-status { gap: 4px; overflow: hidden; }
  .footer-status strong { display: none; }
  .footer-ticker { display: none; }
  .footer-update-status { overflow: hidden; max-width: calc(100vw - 85px); text-overflow: ellipsis; }
  .footer-control-panel { left: 8px; right: 8px; bottom: 62px; width: auto; max-width: none; }
  .footer-control-label { display: none; }
  .footer-top { width: 32px; height: 32px; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .fixed-footer::before,
  .footer-track,
  .footer-control-panel {
    animation: none;
  }
}

/* ============================================================
   HORIZONTAL NAV // SLIDE REVEAL ANIMATION
   ============================================================ */

.horizontal-nav-panel {
  transform: translateX(45px);
  clip-path: inset(0 0 0 100% round 12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(5px);
  transition:
    clip-path .48s cubic-bezier(.16,1,.3,1),
    transform .48s cubic-bezier(.16,1,.3,1),
    opacity .24s ease,
    filter .38s ease,
    visibility .48s;
}

.horizontal-nav[open] .horizontal-nav-panel {
  transform: translateX(0);
  clip-path: inset(0 0 0 0 round 12px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
}


/* ============================================================
   MENU ITEMS // STAGGERED ENTRANCE
   ============================================================ */

.horizontal-nav-panel a {
  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.16,1,.3,1),
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.horizontal-nav[open] .horizontal-nav-panel a {
  opacity: 1;
  transform: translateX(0);
}

.horizontal-nav[open] .horizontal-nav-panel a:nth-child(1)  { transition-delay: .05s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(2)  { transition-delay: .08s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(3)  { transition-delay: .11s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(4)  { transition-delay: .14s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(5)  { transition-delay: .17s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(6)  { transition-delay: .20s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(7)  { transition-delay: .23s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(8)  { transition-delay: .26s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(9)  { transition-delay: .29s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(10) { transition-delay: .32s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(11) { transition-delay: .35s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(12) { transition-delay: .38s; }


/* ============================================================
   CYBER SCAN LINE
   ============================================================ */

.horizontal-nav-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  pointer-events: none;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(88,220,255,.8), 0 0 20px rgba(88,220,255,.45);
  opacity: 0;
}

.horizontal-nav[open] .horizontal-nav-panel::before {
  animation: navScanLine .55s cubic-bezier(.16,1,.3,1);
}

@keyframes navScanLine {
  0% {
    right: 0;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    right: 100%;
    opacity: 0;
  }
}


/* ============================================================
   HAMBURGER // ACTIVE GLOW
   ============================================================ */

.horizontal-nav[open] .horizontal-nav-toggle {
  border-color: rgba(88,220,255,.55);
  background: rgba(88,220,255,.07);
  box-shadow:
    0 0 18px rgba(88,220,255,.15),
    inset 0 0 18px rgba(88,220,255,.05);
}

/* ============================================================
   HORIZONTAL NAV // SMOOTH OPEN ANIMATION
   ============================================================ */

.horizontal-nav[open] .horizontal-nav-panel {
  animation: horizontalNavOpen .55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes horizontalNavOpen {
  0% {
    opacity: 0;
    transform: translate(35px, -8px) scale(.96);
    filter: blur(6px);
    clip-path: inset(0 0 0 100% round 12px);
  }

  45% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 12px);
  }
}

/* ============================================================
   HORIZONTAL NAV // REPEATABLE SMOOTH OPEN
   ============================================================ */

.horizontal-nav-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(35px, -8px) scale(.96);
  filter: blur(6px);
  clip-path: inset(0 0 0 100% round 12px);
  animation: none;
}

.horizontal-nav[open] .horizontal-nav-panel {
  visibility: visible;
  pointer-events: auto;
  animation: horizontalNavOpen .55s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes horizontalNavOpen {
  0% {
    opacity: 0;
    transform: translate(35px, -8px) scale(.96);
    filter: blur(6px);
    clip-path: inset(0 0 0 100% round 12px);
  }

  45% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 12px);
  }
}


/* ============================================================
   MENU LINKS // REPEATABLE STAGGER
   ============================================================ */

.horizontal-nav-panel a {
  opacity: 0;
  transform: translateX(14px);
  animation: none;
}

.horizontal-nav[open] .horizontal-nav-panel a {
  animation: horizontalNavLinkOpen .38s cubic-bezier(.16, 1, .3, 1) forwards;
}

.horizontal-nav[open] .horizontal-nav-panel a:nth-child(1)  { animation-delay: .08s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(2)  { animation-delay: .10s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(3)  { animation-delay: .12s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(4)  { animation-delay: .14s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(5)  { animation-delay: .16s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(6)  { animation-delay: .18s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(7)  { animation-delay: .20s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(8)  { animation-delay: .22s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(9)  { animation-delay: .24s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(10) { animation-delay: .26s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(11) { animation-delay: .28s; }
.horizontal-nav[open] .horizontal-nav-panel a:nth-child(12) { animation-delay: .30s; }

@keyframes horizontalNavLinkOpen {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   TOPBAR // FIXED SCROLL STATE
   ============================================================ */

.topbar {
  position: fixed;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 40px));
  z-index: 9000;

  opacity: 1;
  background: rgba(5,9,14,.82);
  border-color: rgba(88,220,255,.16);

  transition:
    opacity .4s ease,
    background .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    backdrop-filter .4s ease;
}


/* ============================================================
   SCROLLED // PASSIVE MODE
   ============================================================ */

.topbar.topbar-scrolled {
  opacity: .42;
  background: rgba(5,9,14,.38);
  border-color: rgba(88,220,255,.07);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   MENU OPEN // FULL VISIBILITY
   ============================================================ */

.topbar:has(.horizontal-nav[open]) {
  opacity: 1;
  background: rgba(5,9,14,.88);
  border-color: rgba(88,220,255,.20);
  box-shadow:
    0 14px 42px rgba(0,0,0,.34),
    0 0 22px rgba(88,220,255,.05);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.update-list {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
}

.update-list p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}




/* ============================================================
   UPDATE CENTER // GOLD SYSTEM INTERFACE
   ============================================================ */

.update-center {
  position: fixed;
  top: 0px;
  left: 18px;
  z-index: 9800;
  margin: 0;
  padding: 0;
}


/* ============================================================
   SUMMARY RESET
   ============================================================ */

.update-center > summary {
  list-style: none;
}

.update-center > summary::-webkit-details-marker {
  display: none;
}


/* ============================================================
   UPDATE BUTTON
   ============================================================ */

.update-center-toggle {
  position: relative;
  min-width: 132px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px 0 10px;
  overflow: visible;
  border: 1px solid rgba(233,196,106,.58);
  border-radius: 13px;
  color: #f7dfa0;
  background: linear-gradient(145deg, rgba(28,23,12,.97), rgba(7,10,14,.97));
  box-shadow:
    0 14px 36px rgba(0,0,0,.48),
    0 0 14px rgba(233,196,106,.14),
    inset 0 0 20px rgba(233,196,106,.045);
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}


/* ============================================================
   GOLD LIGHT SWEEP
   ============================================================ */

.update-center-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 35%,
    rgba(255,226,137,.05) 42%,
    rgba(255,226,137,.30) 50%,
    rgba(255,255,220,.55) 53%,
    rgba(255,226,137,.12) 58%,
    transparent 66%,
    transparent 100%
  );
  background-size: 240% 100%;
  animation: updateGoldSweep 3.8s linear infinite;
}

@keyframes updateGoldSweep {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}


/* ============================================================
   GOLD OUTER GLOW
   ============================================================ */

.update-center-toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -2;
  border: 1px solid rgba(233,196,106,.20);
  border-radius: 16px;
  opacity: .65;
  animation: updateGoldBorder 2.2s ease-in-out infinite;
}

@keyframes updateGoldBorder {
  0%, 100% {
    opacity: .30;
    box-shadow: 0 0 5px rgba(233,196,106,.10);
  }

  50% {
    opacity: .90;
    box-shadow: 0 0 16px rgba(233,196,106,.28);
  }
}


/* ============================================================
   INFO ICON
   ============================================================ */

.update-center-icon {
  position: relative;
  z-index: 3;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,218,112,.68);
  border-radius: 50%;
  color: #ffe7a3;
  background: radial-gradient(circle, rgba(233,196,106,.16), rgba(233,196,106,.025) 68%);
  box-shadow:
    0 0 10px rgba(233,196,106,.28),
    inset 0 0 10px rgba(233,196,106,.08);
  font: 900 .86rem/1 Consolas, "Liberation Mono", monospace;
  text-shadow: 0 0 8px rgba(255,225,130,.75);
}


/* ============================================================
   PULSE RING
   ============================================================ */

.update-center-pulse {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255,218,112,.70);
  border-radius: 50%;
  pointer-events: none;
  animation: updateGoldPulse 2s cubic-bezier(.16,1,.3,1) infinite;
}

@keyframes updateGoldPulse {
  0% {
    opacity: .85;
    transform: scale(.85);
  }

  70% {
    opacity: 0;
    transform: scale(1.75);
  }

  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}


/* ============================================================
   UPDATE LABEL
   ============================================================ */

.update-center-label {
  position: static;
  display: block;
  color: #f1d98d;
  font: 900 .59rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .14em;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(233,196,106,.28);
}


/* ============================================================
   BUTTON HOVER
   ============================================================ */

.update-center-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255,221,122,.90);
  background: linear-gradient(145deg, rgba(38,30,13,.98), rgba(8,11,15,.98));
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 24px rgba(233,196,106,.28),
    inset 0 0 22px rgba(233,196,106,.07);
}

.update-center-toggle:hover .update-center-icon {
  color: #fff4c8;
  border-color: #ffe59a;
  box-shadow:
    0 0 14px rgba(255,225,130,.50),
    inset 0 0 12px rgba(233,196,106,.10);
}


/* ============================================================
   UPDATE PANEL
   ============================================================ */

.update-center-panel {
  position: absolute;
  top: 66px;
  left: 0;
  width: min(640px, calc(100vw - 36px));
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(233,196,106,.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(233,196,106,.075), transparent 32%),
    linear-gradient(145deg, rgba(10,15,21,.99), rgba(3,7,11,.99));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 32px 85px rgba(0,0,0,.72),
    0 0 35px rgba(233,196,106,.08),
    inset 0 0 35px rgba(233,196,106,.018);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-26px,-14px) scale(.94);
  transform-origin: top left;
  filter: blur(5px);

  transition:
    opacity .32s ease,
    visibility .45s ease,
    transform .52s cubic-bezier(.16,1,.3,1),
    filter .38s ease;
}


/* ============================================================
   PANEL GOLD TOP LINE
   ============================================================ */

.update-center-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(233,196,106,.30),
    #ffe39a,
    rgba(233,196,106,.30),
    transparent
  );
  box-shadow: 0 0 10px rgba(233,196,106,.35);
}


/* ============================================================
   OPEN STATE
   ============================================================ */

.update-center[open] .update-center-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0,0) scale(1);
  filter: blur(0);
}

.update-center[open] .update-center-toggle {
  border-color: rgba(255,222,125,.90);
  background: linear-gradient(145deg, rgba(40,31,12,.98), rgba(8,11,15,.98));
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 0 28px rgba(233,196,106,.30),
    inset 0 0 24px rgba(233,196,106,.08);
}

.update-center[open] .update-center-label {
  color: #ffe59a;
}

.update-center[open] .update-center-pulse {
  animation: none;
  opacity: 0;
}


/* ============================================================
   PANEL HEADER
   ============================================================ */

.update-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 22px 18px;
  border-bottom: 1px solid rgba(233,196,106,.10);
  background: linear-gradient(90deg, rgba(233,196,106,.055), transparent);
}

.update-center-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font: 900 .55rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .15em;
}

.update-center-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.18rem !important;
  line-height: 1.1;
}


/* ============================================================
   ONLINE STATE
   ============================================================ */

.update-center-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 8px;
  border: 1px solid rgba(114,255,157,.13);
  border-radius: 5px;
  color: #72ff9d;
  background: rgba(114,255,157,.025);
  font: 900 .50rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .09em;
}

.update-center-state i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 8px rgba(114,255,157,.65);
}


/* ============================================================
   STATUS BAR
   ============================================================ */

.update-center-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 22px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  background: rgba(255,255,255,.012);
  font-family: Consolas, "Liberation Mono", monospace;
}

.update-center-status span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #72ff9d;
  font-size: .51rem;
  font-weight: 900;
  letter-spacing: .10em;
}

.update-center-status span i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: #72ff9d;
  box-shadow: 0 0 8px rgba(114,255,157,.65);
}

.update-center-status strong {
  color: #7e7352;
  font-size: .51rem;
  letter-spacing: .09em;
}


/* ============================================================
   CHANGELOG CONTENT
   ============================================================ */

.update-center-content {
  display: grid;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,196,106,.52) rgba(255,255,255,.025);
}

.update-center-content::-webkit-scrollbar {
  width: 6px;
}

.update-center-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,.02);
}

.update-center-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #e9c46a, rgba(233,196,106,.30));
  box-shadow: 0 0 8px rgba(233,196,106,.20);
}


/* ============================================================
   UPDATE ENTRIES
   ============================================================ */

.update-center-content .update-entry {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 12px;
  margin: 0;
}

.update-center-content .update-marker {
  position: relative;
  display: flex;
  justify-content: center;
}

.update-center-content .update-dot {
  position: relative;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin-top: 21px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(233,196,106,.55);
}

.update-center-content .update-line {
  position: absolute;
  top: 31px;
  bottom: -17px;
  width: 1px;
  background: linear-gradient(rgba(233,196,106,.28), rgba(88,220,255,.06));
}

.update-center-content .update-entry:last-child .update-line {
  display: none;
}


/* ============================================================
   UPDATE CARD
   ============================================================ */

.update-center-content .update-card {
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(88,220,255,.09);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(15,21,29,.82), rgba(7,11,17,.88));
  box-shadow: inset 0 0 22px rgba(88,220,255,.015);
  transition: border-color .22s ease, background .22s ease;
}

.update-center-content .update-card:hover {
  border-color: rgba(233,196,106,.22);
  background: linear-gradient(145deg, rgba(20,23,28,.92), rgba(8,11,16,.94));
}


/* ============================================================
   UPDATE HEADER
   ============================================================ */

.update-center-content .update-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.update-center-content .update-version {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font: 900 .52rem/1 Consolas, "Liberation Mono", monospace;
  letter-spacing: .11em;
}

.update-center-content .update-head h3 {
  margin: 0;
  color: var(--cyan-2);
  font-size: .90rem !important;
}


/* ============================================================
   UPDATE STATUS
   ============================================================ */

.update-center-content .update-status {
  flex-shrink: 0;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  color: #687e88;
  font: 900 .48rem/1 Consolas, monospace;
  letter-spacing: .08em;
}

.update-center-content .update-status.active {
  color: #72ff9d;
  border-color: rgba(114,255,157,.18);
  background: rgba(114,255,157,.03);
}


/* ============================================================
   TEXT
   ============================================================ */

.update-center-content .update-card > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.65;
}

.update-center-content .update-list {
  display: grid;
  gap: 5px;
  margin: 14px 0 0;
}

.update-center-content .update-list p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.55;
}


/* ============================================================
   META
   ============================================================ */

.update-center-content .update-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.update-center-content .update-meta span {
  padding: 5px 7px;
  border: 1px solid rgba(88,220,255,.08);
  border-radius: 5px;
  color: #667d88;
  background: rgba(88,220,255,.018);
  font: 800 .48rem/1 Consolas, monospace;
  letter-spacing: .07em;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
  .update-center {
    top: 82px;
    left: 10px;
  }

  .update-center-toggle {
    min-width: 116px;
    height: 46px;
    padding: 0 12px 0 8px;
  }

  .update-center-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .update-center-pulse {
    left: 8px;
    top: 9px;
    width: 28px;
    height: 28px;
  }

  .update-center-panel {
    top: 58px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 150px);
  }

  .update-center-header {
    padding: 18px;
  }

  .update-center-status {
    padding: 10px 18px;
  }

  .update-center-status strong {
    display: none;
  }

  .update-center-content {
    padding: 14px;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .update-center-toggle::before,
  .update-center-toggle::after,
  .update-center-pulse {
    animation: none;
  }
}




/* ============================================================
   SECTION NAVIGATION // NEXT SECTION
   ============================================================ */

.section-next-nav {
  width: 100%;
  margin: 58px auto 0;
  padding: 0;
}

.section-next-button {
  position: relative;
  width: 100%;
  min-height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  padding: 0 6px;

  border: 0;
  background: transparent;
  color: inherit;

  cursor: pointer;
  overflow: hidden;
}


/* ============================================================
   HAUPTLINIE
   ============================================================ */

.section-next-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(233,196,106,.20) 12%,
    rgba(233,196,106,.48) 50%,
    rgba(233,196,106,.20) 88%,
    transparent 100%
  );

  box-shadow:
    0 0 8px rgba(233,196,106,.08);
}


/* ============================================================
   ANIMIERTE GOLDENE LINIE
   ============================================================ */

.section-next-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;

  width: 24%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #e9c46a,
    #fff1bd,
    #e9c46a,
    transparent
  );

  box-shadow:
    0 0 8px rgba(233,196,106,.55),
    0 0 16px rgba(233,196,106,.20);

  opacity: 0;

  transition: opacity .2s ease;
}

.section-next-button:hover::after {
  opacity: 1;
  animation: sectionNextLine 1.1s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes sectionNextLine {
  from {
    left: -30%;
  }

  to {
    left: 110%;
  }
}


/* ============================================================
   LINKER BEREICH
   ============================================================ */

.section-next-copy {
  display: flex;
  align-items: center;
  gap: 15px;

  min-width: 0;
}


/* NUMMER */

.section-next-index {
  min-width: 32px;

  color: rgba(233,196,106,.46);

  font:
    900 .50rem/1 Consolas,
    "Liberation Mono",
    monospace;

  letter-spacing: .12em;

  transition:
    color .25s ease,
    text-shadow .25s ease;
}


/* TEXTBLOCK */

.section-next-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
}


/* NEXT // SECTION */

.section-next-text small {
  color: #60747e;

  font:
    900 .48rem/1 Consolas,
    "Liberation Mono",
    monospace;

  letter-spacing: .14em;

  transition:
    color .25s ease;
}


/* NAME DES NÄCHSTEN ABSCHNITTS */

.section-next-text strong {
  position: relative;

  color: #a7bac2;

  font:
    700 .74rem/1.2 Consolas,
    "Liberation Mono",
    monospace;

  letter-spacing: .035em;

  transition:
    color .25s ease,
    transform .30s cubic-bezier(.16,1,.3,1),
    text-shadow .25s ease;
}


/* TRENNER */

.section-next-text small::after {
  content: "//";
  margin-left: 11px;
  color: rgba(233,196,106,.30);
}


/* ============================================================
   PFEIL
   ============================================================ */

.section-next-arrow {
  position: relative;

  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border: 1px solid rgba(233,196,106,.18);
  border-radius: 50%;

  color: rgba(233,196,106,.76);

  background: rgba(233,196,106,.018);

  font-size: .74rem;

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


/* ============================================================
   HOVER
   ============================================================ */

.section-next-button:hover .section-next-index {
  color: #e9c46a;

  text-shadow:
    0 0 8px rgba(233,196,106,.32);
}

.section-next-button:hover .section-next-text small {
  color: rgba(233,196,106,.72);
}

.section-next-button:hover .section-next-text strong {
  color: #ffffff;

  transform: translateX(5px);

  text-shadow:
    0 0 10px rgba(255,255,255,.08);
}

.section-next-button:hover .section-next-arrow {
  transform: translateY(4px);

  color: #fff2bd;

  border-color: rgba(233,196,106,.62);

  background: rgba(233,196,106,.06);

  box-shadow:
    0 0 10px rgba(233,196,106,.18),
    0 0 22px rgba(233,196,106,.07);
}


/* ============================================================
   KLEINER GOLDPUNKT LINKS
   ============================================================ */

.section-next-copy::before {
  content: "";

  width: 5px;
  height: 5px;

  flex-shrink: 0;

  border-radius: 50%;

  background: rgba(233,196,106,.55);

  box-shadow:
    0 0 6px rgba(233,196,106,.28);

  transition:
    background .25s ease,
    box-shadow .25s ease;
}

.section-next-button:hover .section-next-copy::before {
  background: #fff0b0;

  box-shadow:
    0 0 7px rgba(233,196,106,.75),
    0 0 15px rgba(233,196,106,.28);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .section-next-nav {
    margin-top: 42px;
  }

  .section-next-button {
    min-height: 60px;
  }

  .section-next-index {
    display: none;
  }

  .section-next-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .section-next-text small::after {
    display: none;
  }

  .section-next-text strong {
    font-size: .68rem;
  }

  .section-next-arrow {
    width: 31px;
    height: 31px;
  }
}


/* ============================================================
   PARTICLE NETWORK // BACKGROUND
   ============================================================ */

.particle-network {
  /* ------------------------------------------------------------
     HAUPTEINSTELLUNGEN
     ------------------------------------------------------------ */

  --particle-area-width: 1180px; /* Sichtbare Breite selbst einstellen */
  --particle-area-height: 100vh; /* Sichtbare Höhe */
  --particle-opacity: .25;       /* Gesamte Sichtbarkeit */
  --particle-opacity: .25;       /* Gesamte Sichtbarkeit */
  /* ------------------------------------------------------------
     POSITION
     ------------------------------------------------------------ */

  position: fixed;
  top: 0;
  left: 50%;

  width: var(--particle-area-width);
  max-width: 100vw;
  height: var(--particle-area-height);

  transform: translateX(-50%);

  overflow: hidden;
  pointer-events: none;
  user-select: none;

  opacity: var(--particle-opacity);
  z-index: 0;
}


/* ============================================================
   PARTICLE CANVAS
   ============================================================ */

#particleNetworkCanvas {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  pointer-events: none;

  mix-blend-mode: screen;
}


/* ============================================================
   SEITLICHES FADE
   Die Partikel verschwinden weich am linken und rechten Rand.
   ============================================================ */

.particle-network {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, .20) 4%,
    rgba(0, 0, 0, .75) 10%,
    #000 16%,
    #000 84%,
    rgba(0, 0, 0, .75) 90%,
    rgba(0, 0, 0, .20) 96%,
    transparent 100%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, .20) 4%,
    rgba(0, 0, 0, .75) 10%,
    #000 16%,
    #000 84%,
    rgba(0, 0, 0, .75) 90%,
    rgba(0, 0, 0, .20) 96%,
    transparent 100%
  );
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
  .particle-network {
    --particle-area-width: 100vw;
    --particle-area-height: 100vh;
    --particle-opacity: .48;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .particle-network {
    --particle-opacity: .30;
  }
}








.main-player {
  --player-width: 420px;
  --player-height: 66px;
  --player-opacity: .20;
  --player-blur: 14px;
  --player-move-x: 0px;
  --player-move-y: -2px;
  --volume-width: 72px;

  position: relative;
  width: var(--player-width);
  min-height: var(--player-height);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  margin-right: 18px;
  padding: 9px 11px;
  transform: translate(
    var(--player-move-x),
    var(--player-move-y)
  );

  border: 1px solid rgba(88, 220, 255, .16);
  border-radius: 11px;
  background:
    linear-gradient(
      135deg,
      rgba(8, 13, 18, var(--player-opacity)),
      rgba(3, 7, 11, var(--player-opacity))
    );

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .025);
  backdrop-filter: blur(var(--player-blur));
  -webkit-backdrop-filter: blur(var(--player-blur));
  overflow: hidden;
  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.main-player::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;

  width: 84%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(88, 220, 255, .35),
    rgba(233, 196, 106, .30),
    transparent
  );

  pointer-events: none;
}

.main-player:hover {
  border-color: rgba(88, 220, 255, .30);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .34),
    0 0 18px rgba(88, 220, 255, .035),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.main-player-control {
  width: 24px;
  height: 28px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6f838c;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color .20s ease,
    transform .20s ease;
}

.main-player-control:hover {
  color: #e9c46a;
}

.main-player-prev:hover {
  transform: translateX(-2px);
}

.main-player-next:hover {
  transform: translateX(2px);
}

.main-player-play {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(233, 196, 106, .34);
  border-radius: 50%;
  background: rgba(233, 196, 106, .035);
  color: #e9c46a;
  cursor: pointer;
  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.main-player-play:hover {
  transform: scale(1.05);
  color: #fff0b8;
  border-color: rgba(233, 196, 106, .70);
  background: rgba(233, 196, 106, .07);
  box-shadow:
    0 0 10px rgba(233, 196, 106, .16),
    0 0 22px rgba(233, 196, 106, .06);
}

.main-player-play-icon {
  margin-left: 2px;
  font-size: .68rem;
  line-height: 1;
}

.main-player-info {
  flex: 1 1 auto;
  min-width: 110px;
  display: flex;
  flex-direction: column;
}

.main-player-label {
  margin-bottom: 3px;
  color: rgba(88, 220, 255, .62);
  font:
    800 .41rem/1 Consolas,
    "Liberation Mono",
    monospace;
  letter-spacing: .13em;
  white-space: nowrap;
}

.main-player-info strong {
  overflow: hidden;
  color: #c8d7dd;
  font:
    700 .66rem/1.2 Consolas,
    "Liberation Mono",
    monospace;
  letter-spacing: .035em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.main-player-progress {
  position: relative;
  width: 100%;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
}

.main-player-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #58dcff 0%,
    #e9c46a 100%
  );
  box-shadow:
    0 0 8px rgba(88, 220, 255, .20),
    0 0 8px rgba(233, 196, 106, .12);
  transition: width .08s linear;
}

.main-player-time {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: #52656d;
  font:
    700 .40rem/1 Consolas,
    "Liberation Mono",
    monospace;
  letter-spacing: .04em;
}

.main-player-volume-wrap {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 28px var(--volume-width);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
  min-width: calc(var(--volume-width) + 34px);
}

.main-player-volume {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(88, 220, 255, .12);
  border-radius: 6px;
  background: rgba(88, 220, 255, .025);
  color: #71858e;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease,
    transform .20s ease;
}

.main-player-volume:hover {
  color: #e9c46a;
  border-color: rgba(233, 196, 106, .34);
  background: rgba(233, 196, 106, .04);
  box-shadow:
    0 0 10px rgba(233, 196, 106, .08);
  transform: scale(1.04);
}

.main-player-volume-slider {
  grid-column: 2;
  grid-row: 1;
  width: var(--volume-width);
  height: 12px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.main-player-volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #58dcff,
    #e9c46a
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 0 6px rgba(88, 220, 255, .10);
}

.main-player-volume-slider::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -3.5px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(233, 196, 106, .85);
  border-radius: 50%;
  background: #e9c46a;
  box-shadow:
    0 0 7px rgba(233, 196, 106, .36);
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.main-player-volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow:
    0 0 10px rgba(233, 196, 106, .48);
}

.main-player-volume-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #58dcff,
    #e9c46a
  );
}

.main-player-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(233, 196, 106, .85);
  border-radius: 50%;
  background: #e9c46a;
  box-shadow:
    0 0 7px rgba(233, 196, 106, .36);
}

.main-player-volume-value {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  color: #62767f;
  font:
    700 .40rem/1 Consolas,
    "Liberation Mono",
    monospace;
  letter-spacing: .05em;
  text-align: right;
  white-space: nowrap;
  transition: color .20s ease;
}

.main-player-volume-wrap:hover .main-player-volume-value {
  color: #e9c46a;
}

.main-player.is-playing {
  border-color: rgba(233, 196, 106, .24);
}

.main-player.is-playing .main-player-label {
  color: rgba(233, 196, 106, .78);
}

@media (max-width: 1100px) {
  .main-player {
    --player-width: 360px;
    --volume-width: 55px;
  }
}

@media (max-width: 900px) {
  .main-player {
    display: none;
  }
}



.soundcloud-embed{
  display:block;
  flex:0 0 166px;
  width:100%;
  height:166px;
  min-height:166px;
  margin-top:18px;
  margin-bottom:18px;
  overflow:hidden;
  border:1px solid rgba(88,220,255,.18);
  border-radius:12px;
  background:rgba(5,9,14,.72);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}

.soundcloud-embed iframe{
  display:block;
  width:100%;
  height:166px;
  min-height:166px;
  border:0;
}

.github-image-embed{
  display:block;
  flex:0 0 auto;
  width:100%;
  margin:18px 0;
}

.github-image-embed img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.amazon-embed{
  width:100%;
  height:600px;
  margin:18px 0;
  overflow:hidden;
}

.book-promo-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  width:100%;
  margin:18px 0;
  padding:16px;
  border:1px solid rgba(88,220,255,.18);
  border-radius:12px;
  background:rgba(5,9,14,.72);
}

.book-promo-cover img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

.book-promo-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.book-promo-content h3{
  margin:7px 0 5px;
}

.book-promo-subtitle{
  margin:0;
  color:var(--muted);
}

.book-promo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.book-promo-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(233,196,106,.35);
  border-radius:8px;
  color:var(--gold);
  background:rgba(233,196,106,.05);
  text-decoration:none;
  font-size:.76rem;
  font-weight:900;
  transition:.22s ease;
}

.book-promo-button:hover{
  color:#fff;
  border-color:rgba(233,196,106,.65);
  background:rgba(233,196,106,.10);
  transform:translateY(-2px);
}

.northsaga-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  margin:0 0 14px;
  padding:8px 12px;
  border:1px solid rgba(88,220,255,.28);
  border-radius:999px;
  color:var(--cyan);
  background:rgba(88,220,255,.06);
  font:900 .68rem/1 Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 0 18px rgba(88,220,255,.08);
  animation:northsagaBadgeGlow 2.4s ease-in-out infinite;
  transition:.22s ease;
}

.northsaga-badge:hover{
  color:#fff;
  border-color:rgba(88,220,255,.75);
  background:rgba(88,220,255,.12);
  transform:translateY(-2px);
}

.northsaga-badge-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:northsagaBadgePulse 1.4s ease-in-out infinite;
}

@keyframes northsagaBadgeGlow{
  0%,100%{
    border-color:rgba(88,220,255,.22);
    box-shadow:0 0 12px rgba(88,220,255,.06);
  }

  50%{
    border-color:rgba(88,220,255,.55);
    box-shadow:0 0 24px rgba(88,220,255,.18);
  }
}

@keyframes northsagaBadgePulse{
  0%,100%{
    opacity:.45;
    transform:scale(.8);
  }

  50%{
    opacity:1;
    transform:scale(1.35);
  }
}


.protected-iframe{
  position:relative;
  width:100%;
}

.protected-iframe iframe{
  display:block;
  width:100%;
  height:166px;
  border:0;
}

.iframe-blocker{
  position:absolute;
  inset:0;
  z-index:10;
  background:transparent;
}


/* ============================================================
   DOWNLOAD // FILE INTEGRITY
   ============================================================ */

.download-integrity {
  position:relative;
  width:100%;
  margin:16px 0;
  padding:14px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.14);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(88,220,255,.035),rgba(4,8,13,.40));
  overflow:hidden;
}

.download-integrity::before {
  content:"";
  position:absolute;
  top:0;
  left:14px;
  width:34px;
  height:1px;
  background:#58dcff;
  box-shadow:0 0 10px rgba(88,220,255,.45);
}

.download-integrity-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.download-integrity-head > div {
  display:flex;
  align-items:center;
  gap:10px;
}

.download-integrity-kicker {
  color:#6f8793;
  font:900 .58rem/1 Consolas,monospace;
  letter-spacing:.12em;
}

.download-integrity-head strong {
  color:#eef7fb;
  font:900 .66rem/1 Consolas,monospace;
  letter-spacing:.10em;
}

.download-integrity-state {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#58dcff;
  font:900 .56rem/1 Consolas,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}

.download-integrity-state i {
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#58dcff;
  box-shadow:0 0 10px rgba(88,220,255,.85);
}

.download-hash {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 9px 9px 12px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.055);
  border-radius:7px;
  background:rgba(0,0,0,.28);
}

.download-hash code {
  display:block;
  min-width:0;
  flex:1;
  color:#8fa6b2;
  font:700 .60rem/1.55 Consolas,monospace;
  letter-spacing:.035em;
  overflow-wrap:anywhere;
  word-break:break-all;
  user-select:text;
}

.download-hash-copy {
  flex:0 0 auto;
  min-width:54px;
  height:30px;
  padding:0 9px;
  border:1px solid rgba(88,220,255,.18);
  border-radius:6px;
  background:rgba(88,220,255,.055);
  color:#58dcff;
  font:900 .56rem/1 Consolas,monospace;
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.download-hash-copy:hover {
  border-color:rgba(88,220,255,.45);
  background:rgba(88,220,255,.12);
  color:#eef7fb;
}

.download-hash-copy.copied {
  border-color:#58dcff;
  background:#58dcff;
  color:#05070b;
}


/* ============================================================
   DOWNLOAD // FILE INTEGRITY // RESPONSIVE
   ============================================================ */

@media (max-width:620px) {
  .download-integrity-head {
    align-items:flex-start;
    flex-direction:column;
  }

  .download-hash {
    align-items:stretch;
    flex-direction:column;
  }

  .download-hash-copy {
    width:100%;
  }
}

/* ============================================================
   TOOLS // FIXED TOP RIGHT
   ============================================================ */

.tools-center {
  position:fixed;
  top:18px;
  right:18px;
  left:auto;
  bottom:auto;
  width:auto;
  height:auto;
  z-index:999999;
}

.tools-center-trigger {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:0 12px;
  margin:0;
  border:1px solid rgba(88,220,255,.22);
  border-radius:9px;
  background:rgba(5,9,14,.94);
  color:#8ea1ad;
  cursor:pointer;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 25px rgba(0,0,0,.30);
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}

.tools-center-trigger:hover,
.tools-center-trigger.active {
  border-color:rgba(88,220,255,.55);
  background:rgba(88,220,255,.08);
  color:#eef7fb;
  box-shadow:0 0 22px rgba(88,220,255,.12);
}

.tools-center-trigger-icon {
  color:#58dcff;
  font:900 .8rem/1 Consolas,monospace;
}

.tools-center-trigger-text {
  font:900 .62rem/1 Consolas,monospace;
  letter-spacing:.12em;
}


/* ============================================================
   TOOLS // CARD TOP RIGHT
   ============================================================ */

.tools-center-menu,
.tool-window {
  position:fixed;
  top:70px;
  right:18px;
  left:auto;
  bottom:auto;
  width:390px;
  max-width:calc(100vw - 36px);
  max-height:calc(100vh - 90px);
  padding:17px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.18);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(8,14,20,.99),rgba(4,8,13,.995));
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 35px rgba(88,220,255,.05);
  backdrop-filter:blur(20px);
  overflow:auto;
  z-index:1000000;
}

.tools-center-menu::before,
.tool-window::before {
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,220,255,.70),transparent);
}


/* ============================================================
   BYLICKILABS // TOOLS CENTER
   ============================================================ */

.tools-center {
  position:fixed;
  top:18px;
  right:18px;
  z-index:999999;
  width:auto;
  height:auto;
}

.tools-center [hidden] {
  display:none !important;
}


/* ============================================================
   TOOLS // MAIN TRIGGER
   ============================================================ */

.tools-center-trigger {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:92px;
  height:40px;
  padding:0 13px;
  margin:0;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.22);
  border-radius:9px;
  outline:none;
  background:linear-gradient(180deg,rgba(10,17,24,.96),rgba(5,10,15,.96));
  color:#91a7b3;
  box-shadow:0 8px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.tools-center-trigger::before {
  content:"";
  position:absolute;
  top:-1px;
  left:12px;
  right:12px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,220,255,.75),transparent);
  opacity:.65;
}

.tools-center-trigger:hover {
  transform:translateY(-1px);
  border-color:rgba(88,220,255,.48);
  background:linear-gradient(180deg,rgba(12,23,31,.98),rgba(6,13,19,.98));
  color:#eef7fb;
  box-shadow:0 10px 32px rgba(0,0,0,.40),0 0 20px rgba(88,220,255,.08);
}

.tools-center-trigger.active {
  border-color:rgba(88,220,255,.62);
  background:rgba(88,220,255,.075);
  color:#eef7fb;
  box-shadow:0 0 24px rgba(88,220,255,.12),0 10px 32px rgba(0,0,0,.38);
}

.tools-center-trigger:focus-visible {
  border-color:#58dcff;
  box-shadow:0 0 0 2px rgba(88,220,255,.12),0 0 20px rgba(88,220,255,.12);
}

.tools-center-trigger-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#58dcff;
  font:900 .72rem/1 Consolas,monospace;
  text-shadow:0 0 10px rgba(88,220,255,.45);
}

.tools-center-trigger-text {
  color:inherit;
  font:900 .63rem/1 Consolas,monospace;
  letter-spacing:.13em;
}


/* ============================================================
   TOOLS // MAIN MENU + TOOL WINDOWS
   ============================================================ */

.tools-center-menu,
.tool-window {
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  left:auto;
  width:390px;
  max-width:calc(100vw - 36px);
  max-height:calc(100vh - 90px);
  padding:17px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.17);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(8,14,20,.99),rgba(4,8,13,.995));
  box-shadow:0 26px 75px rgba(0,0,0,.58),0 0 38px rgba(88,220,255,.05),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  overflow-x:hidden;
  overflow-y:auto;
  z-index:1000000;
}

.tools-center-menu::before,
.tool-window::before {
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,220,255,.72),transparent);
}

.tools-center-menu::-webkit-scrollbar,
.tool-window::-webkit-scrollbar {
  width:5px;
}

.tools-center-menu::-webkit-scrollbar-track,
.tool-window::-webkit-scrollbar-track {
  background:transparent;
}

.tools-center-menu::-webkit-scrollbar-thumb,
.tool-window::-webkit-scrollbar-thumb {
  border-radius:5px;
  background:rgba(88,220,255,.18);
}


/* ============================================================
   TOOLS // HEADER
   ============================================================ */

.tools-center-header,
.tool-window-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0 0 13px;
}

.tools-center-header > div,
.tool-window-header > div {
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:5px;
}

.tools-center-kicker,
.tool-window-kicker {
  display:block;
  color:#58dcff;
  font:900 .57rem/1 Consolas,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.tools-center-header strong,
.tool-window-header strong {
  display:block;
  color:#eef7fb;
  font-size:.91rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.025em;
}


/* ============================================================
   TOOLS // CLOSE + BACK BUTTONS
   ============================================================ */

.tools-center-close,
.tool-window-close,
.tool-window-back {
  display:flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  flex:0 0 29px;
  padding:0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  outline:none;
  background:rgba(255,255,255,.025);
  color:#718894;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.tools-center-close,
.tool-window-close {
  font:400 1.15rem/1 Arial,sans-serif;
}

.tool-window-back {
  font:700 1.15rem/1 Arial,sans-serif;
}

.tools-center-close:hover,
.tool-window-close:hover,
.tool-window-back:hover {
  border-color:rgba(88,220,255,.30);
  background:rgba(88,220,255,.055);
  color:#58dcff;
}

.tools-center-close:focus-visible,
.tool-window-close:focus-visible,
.tool-window-back:focus-visible {
  border-color:#58dcff;
}


/* ============================================================
   TOOLS // STATUS BAR
   ============================================================ */

.tools-center-status,
.tool-window-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0 0 13px;
  padding:9px 10px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.045);
  border-radius:7px;
  background:rgba(255,255,255,.018);
}

.tools-center-status span,
.tool-window-status span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#859aa5;
  font:800 .53rem/1 Consolas,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}

.tools-center-status strong,
.tool-window-status strong {
  color:#58dcff;
  font:900 .53rem/1 Consolas,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}

.tools-center-status i,
.tool-window-status i {
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#58dcff;
  box-shadow:0 0 10px rgba(88,220,255,.80);
}


/* ============================================================
   TOOLS // TOOL SELECTION
   ============================================================ */

.tools-center-grid {
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}

.tools-center-item {
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 18px;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:60px;
  padding:10px 11px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.055);
  border-radius:9px;
  outline:none;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.012));
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.tools-center-item::before {
  content:"";
  position:absolute;
  top:0;
  left:12px;
  width:24px;
  height:1px;
  background:#58dcff;
  opacity:.55;
}

.tools-center-item:hover {
  transform:translateX(2px);
  border-color:rgba(88,220,255,.25);
  background:rgba(88,220,255,.04);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.tools-center-item:focus-visible {
  border-color:#58dcff;
}

.tools-center-item-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.15);
  border-radius:7px;
  background:rgba(88,220,255,.035);
  color:#58dcff;
  font:900 .92rem/1 Consolas,monospace;
  text-shadow:0 0 9px rgba(88,220,255,.25);
}

.tools-center-item-copy {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
}

.tools-center-item-copy strong {
  display:block;
  color:#e9f3f7;
  font-size:.75rem;
  font-weight:800;
  line-height:1.2;
}

.tools-center-item-copy small {
  display:block;
  color:#6f8793;
  font:800 .51rem/1.3 Consolas,monospace;
  letter-spacing:.06em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tools-center-item-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#58dcff;
  font-size:1.2rem;
  line-height:1;
  transition:transform .2s ease;
}

.tools-center-item:hover .tools-center-item-arrow {
  transform:translateX(2px);
}


/* ============================================================
   TOOLS // FOOTER
   ============================================================ */

.tools-center-footer,
.tool-window-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-top:13px;
  padding-top:11px;
  box-sizing:border-box;
  border-top:1px solid rgba(255,255,255,.045);
}

.tools-center-footer span,
.tool-window-footer span {
  color:#526671;
  font:800 .49rem/1 Consolas,monospace;
  letter-spacing:.07em;
  white-space:nowrap;
}


/* ============================================================
   HASH TOOL // FILE INPUT
   ============================================================ */

.hash-tool-input {
  display:none;
}


/* ============================================================
   HASH TOOL // DROP AREA
   ============================================================ */

.hash-tool-drop {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  width:100%;
  min-height:108px;
  padding:15px;
  box-sizing:border-box;
  border:1px dashed rgba(88,220,255,.23);
  border-radius:9px;
  outline:none;
  background:linear-gradient(180deg,rgba(88,220,255,.025),rgba(88,220,255,.012));
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.hash-tool-drop:hover,
.hash-tool-drop.dragover {
  border-color:rgba(88,220,255,.58);
  background:rgba(88,220,255,.055);
  box-shadow:inset 0 0 24px rgba(88,220,255,.025);
}

.hash-tool-drop:focus-visible {
  border-color:#58dcff;
}

.hash-tool-drop-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin-bottom:2px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.19);
  border-radius:50%;
  background:rgba(88,220,255,.03);
  color:#58dcff;
  font-size:1.05rem;
  line-height:1;
}

.hash-tool-drop strong {
  color:#edf7fa;
  font-size:.76rem;
  font-weight:800;
  line-height:1.2;
}

.hash-tool-drop small {
  color:#6f8793;
  font:700 .56rem/1.4 Consolas,monospace;
  letter-spacing:.035em;
}


/* ============================================================
   HASH TOOL // FILE INFORMATION
   ============================================================ */

.hash-tool-file {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  width:100%;
  margin-top:12px;
  padding:10px 11px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.hash-tool-file > div {
  min-width:0;
}

.hash-tool-file span {
  display:block;
  margin-bottom:5px;
  color:#6f8793;
  font:900 .51rem/1 Consolas,monospace;
  letter-spacing:.10em;
}

.hash-tool-file strong {
  display:block;
  max-width:255px;
  color:#d9e5ea;
  font:700 .61rem/1.35 Consolas,monospace;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ============================================================
   HASH TOOL // PROCESSING
   ============================================================ */

.hash-tool-processing {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:12px;
  padding:10px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.10);
  border-radius:7px;
  background:rgba(88,220,255,.018);
  color:#8399a4;
  font:800 .56rem/1 Consolas,monospace;
  letter-spacing:.07em;
}

.hash-tool-processing-dot {
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#58dcff;
  box-shadow:0 0 10px rgba(88,220,255,.82);
  animation:hashToolPulse 1s ease-in-out infinite;
}

@keyframes hashToolPulse {
  0%,
  100% {
    opacity:.35;
  }

  50% {
    opacity:1;
  }
}


/* ============================================================
   HASH TOOL // RESULT
   ============================================================ */

.hash-tool-result {
  width:100%;
  margin-top:12px;
  padding:12px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.13);
  border-radius:9px;
  background:rgba(88,220,255,.022);
}

.hash-tool-result-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}

.hash-tool-result-head > div {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.hash-tool-result-head span {
  color:#6f8793;
  font:900 .52rem/1 Consolas,monospace;
  letter-spacing:.09em;
}

.hash-tool-result-head strong {
  color:#edf7fa;
  font:900 .58rem/1 Consolas,monospace;
  letter-spacing:.06em;
}

.hash-tool-verified {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#58dcff !important;
  white-space:nowrap;
}

.hash-tool-verified i {
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#58dcff;
  box-shadow:0 0 9px rgba(88,220,255,.82);
}


/* ============================================================
   HASH TOOL // HASH VALUE
   ============================================================ */

.hash-tool-hash {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px 8px 8px 10px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.05);
  border-radius:7px;
  background:rgba(0,0,0,.30);
}

.hash-tool-hash code {
  display:block;
  min-width:0;
  flex:1;
  color:#91a8b4;
  font:700 .56rem/1.45 Consolas,monospace;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:break-all;
  user-select:text;
}


/* ============================================================
   HASH TOOL // COPY BUTTON
   ============================================================ */

.hash-tool-copy {
  flex:0 0 auto;
  min-width:52px;
  height:29px;
  padding:0 9px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.18);
  border-radius:6px;
  outline:none;
  background:rgba(88,220,255,.05);
  color:#58dcff;
  font:900 .53rem/1 Consolas,monospace;
  letter-spacing:.07em;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.hash-tool-copy:hover {
  border-color:rgba(88,220,255,.45);
  background:rgba(88,220,255,.10);
  color:#eef7fb;
}

.hash-tool-copy.copied {
  border-color:#58dcff;
  background:#58dcff;
  color:#05070b;
}

.hash-tool-copy:focus-visible {
  border-color:#58dcff;
}


/* ============================================================
   HASH TOOL // RESET BUTTON
   ============================================================ */

.hash-tool-reset {
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:#718590;
  font:900 .52rem/1 Consolas,monospace;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .2s ease;
}

.hash-tool-reset:hover {
  color:#58dcff;
}

.hash-tool-reset:focus-visible {
  color:#58dcff;
}


/* ============================================================
   TOOLS // TABLET
   ============================================================ */

@media (max-width:900px) {
  .tools-center {
    top:14px;
    right:14px;
  }

  .tools-center-menu,
  .tool-window {
    width:370px;
    max-width:calc(100vw - 28px);
  }
}


/* ============================================================
   TOOLS // MOBILE
   ============================================================ */

@media (max-width:620px) {
  .tools-center {
    top:12px;
    right:12px;
  }

  .tools-center-trigger {
    min-width:40px;
    width:40px;
    height:40px;
    padding:0;
  }

  .tools-center-trigger-text {
    display:none;
  }

  .tools-center-menu,
  .tool-window {
    position:fixed;
    top:64px;
    right:12px;
    left:12px;
    width:auto;
    max-width:none;
    max-height:calc(100vh - 76px);
    padding:15px;
  }

  .hash-tool-file {
    grid-template-columns:1fr;
  }

  .hash-tool-file strong {
    max-width:100%;
  }

  .hash-tool-result-head {
    align-items:flex-start;
    flex-direction:column;
  }

  .hash-tool-hash {
    align-items:stretch;
    flex-direction:column;
  }

  .hash-tool-copy {
    width:100%;
  }
}


/* ============================================================
   TOOLS // VERY SMALL DEVICES
   ============================================================ */

@media (max-width:400px) {
  .tools-center-menu,
  .tool-window {
    top:62px;
    right:8px;
    left:8px;
    max-height:calc(100vh - 70px);
    padding:13px;
  }

  .tools-center {
    top:10px;
    right:10px;
  }

  .tools-center-status,
  .tool-window-status {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
}

/* ============================================================
   BASE64 // MODE
   ============================================================ */

.base64-mode {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:13px;
  padding:4px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.base64-mode-button {
  height:32px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:6px;
  outline:none;
  background:transparent;
  color:#718590;
  font:900 .55rem/1 Consolas,monospace;
  letter-spacing:.10em;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.base64-mode-button:hover {
  color:#eef7fb;
}

.base64-mode-button.active {
  border-color:rgba(88,220,255,.22);
  background:rgba(88,220,255,.08);
  color:#58dcff;
}


/* ============================================================
   BASE64 // FIELDS
   ============================================================ */

.base64-field {
  width:100%;
  margin-bottom:11px;
}

.base64-field-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}

.base64-field-head span {
  color:#6f8793;
  font:900 .52rem/1 Consolas,monospace;
  letter-spacing:.10em;
}

.base64-small-button {
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:#6f8793;
  font:900 .50rem/1 Consolas,monospace;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .2s ease;
}

.base64-small-button:hover {
  color:#58dcff;
}

.base64-textarea {
  display:block;
  width:100%;
  min-height:100px;
  resize:vertical;
  padding:11px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.055);
  border-radius:8px;
  outline:none;
  background:rgba(0,0,0,.26);
  color:#dce8ed;
  font:700 .61rem/1.5 Consolas,monospace;
  transition:border-color .2s ease,background .2s ease;
}

.base64-textarea:focus {
  border-color:rgba(88,220,255,.35);
  background:rgba(0,0,0,.34);
}

.base64-output {
  min-height:115px;
  color:#8fa8b4;
}


/* ============================================================
   BASE64 // ACTIONS
   ============================================================ */

.base64-actions {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-bottom:12px;
}

.base64-action-button,
.base64-file-button {
  height:34px;
  padding:0 13px;
  box-sizing:border-box;
  border:1px solid rgba(88,220,255,.18);
  border-radius:7px;
  outline:none;
  background:rgba(88,220,255,.05);
  color:#58dcff;
  font:900 .55rem/1 Consolas,monospace;
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}

.base64-action-button:hover,
.base64-file-button:hover {
  border-color:rgba(88,220,255,.45);
  background:rgba(88,220,255,.10);
  color:#eef7fb;
}

.base64-action-button {
  background:#58dcff;
  color:#05070b;
}

.base64-action-button:hover {
  background:#7be4ff;
  color:#05070b;
}


/* ============================================================
   BASE64 // FILE INFORMATION
   ============================================================ */

.base64-file-info {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  margin-bottom:12px;
  padding:10px 11px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.base64-file-info > div {
  min-width:0;
}

.base64-file-info span {
  display:block;
  margin-bottom:5px;
  color:#6f8793;
  font:900 .50rem/1 Consolas,monospace;
  letter-spacing:.10em;
}

.base64-file-info strong {
  display:block;
  max-width:250px;
  color:#d8e5ea;
  font:700 .60rem/1.35 Consolas,monospace;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ============================================================
   BASE64 // META STATUS
   ============================================================ */

.base64-meta {
  display:flex;
  align-items:center;
  min-height:29px;
  padding:0 9px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.04);
  border-radius:6px;
  background:rgba(255,255,255,.015);
}

.base64-meta span {
  color:#607580;
  font:800 .50rem/1 Consolas,monospace;
  letter-spacing:.07em;
}

.base64-meta.success span {
  color:#58dcff;
}

.base64-meta.error span {
  color:#ff6b6b;
}


/* ============================================================
   BASE64 // MOBILE
   ============================================================ */

@media (max-width:620px) {
  .base64-file-info {
    grid-template-columns:1fr;
  }

  .base64-file-info strong {
    max-width:100%;
  }
}



/* ============================================================
   PETITION // CARD DESIGN
   ============================================================ */

.petition-card {
  position: relative;
  padding: 38px;
  overflow: hidden;
  border: 1px solid rgba(88, 220, 255, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(10, 16, 28, 0.98), rgba(4, 9, 17, 0.98)),
    rgba(5, 7, 11, 0.98);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.petition-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #58dcff, transparent);
  box-shadow: 0 0 24px rgba(88, 220, 255, 0.5);
}

.petition-card::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(88, 220, 255, 0.05);
  filter: blur(60px);
  pointer-events: none;
}

.petition-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(88, 220, 255, 0.12);
}

.petition-identity {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.petition-icon {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
  border: 1px solid rgba(88, 220, 255, 0.28);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(88, 220, 255, 0.11), rgba(88, 220, 255, 0.03));
  box-shadow: inset 0 0 20px rgba(88, 220, 255, 0.05);
  font-size: 1.6rem;
}

.petition-identity .mini-label {
  color: #58dcff;
  font-family: Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.petition-identity h3 {
  max-width: 860px;
  margin: 8px 0 0;
  color: #f4f8fb;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.25;
  font-weight: 700;
}

.petition-status {
  min-width: 190px;
  text-align: right;
  font-family: Consolas, monospace;
}

.petition-status span {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: #58dcff;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
}

.petition-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #58dcff;
  box-shadow: 0 0 14px rgba(88, 220, 255, 0.9);
}

.petition-status strong {
  display: block;
  margin-top: 8px;
  color: #8d9baa;
  font-size: 0.78rem;
}

.petition-content {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  padding: 30px 0;
}

.petition-content p {
  margin: 0 0 18px;
  color: #aeb9c5;
  font-size: 0.98rem;
  line-height: 1.85;
}

.petition-content p:first-child {
  color: #d8e1e8;
  font-size: 1.02rem;
}

.petition-content p:last-child {
  margin-bottom: 0;
}

.petition-content strong {
  color: #58dcff;
  font-weight: 600;
}

.petition-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(88, 220, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
}

.petition-meta div {
  padding: 22px;
  border-right: 1px solid rgba(88, 220, 255, 0.1);
}

.petition-meta div:last-child {
  border-right: 0;
}

.petition-meta span {
  display: block;
  margin-bottom: 8px;
  color: #58dcff;
  font-family: Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.petition-meta strong {
  display: block;
  color: #d9e1e8;
  font-size: 0.88rem;
  line-height: 1.45;
}

.petition-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding-top: 28px;
}

.petition-footer-status {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 760px;
  color: #8795a4;
  font-size: 0.84rem;
  line-height: 1.6;
}

.petition-footer-status .status-dot {
  flex: 0 0 auto;
}

.petition-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(88, 220, 255, 0.24);
  border-radius: 12px;
  color: #7d8a97;
  background: rgba(88, 220, 255, 0.035);
  font-family: Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.petition-action-disabled {
  cursor: default;
  opacity: 0.78;
}

@media (max-width: 900px) {
  .petition-card-head,
  .petition-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .petition-status {
    min-width: 0;
    text-align: left;
  }

  .petition-status span {
    justify-content: flex-start;
  }

  .petition-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .petition-meta div:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 600px) {
  .petition-card {
    padding: 24px;
    border-radius: 18px;
  }

  .petition-identity {
    flex-direction: column;
  }

  .petition-meta {
    grid-template-columns: 1fr;
  }

  .petition-meta div {
    border-right: 0;
    border-bottom: 1px solid rgba(88, 220, 255, 0.1);
  }

  .petition-meta div:last-child {
    border-bottom: 0;
  }

  .petition-action {
    width: 100%;
  }
}

/* ============================================================
   PETITION // TYPOGRAPHY & COLOR HIERARCHY
   ============================================================ */

.petition-section .section-heading .kicker {
  color: #58dcff;
  text-shadow: 0 0 18px rgba(88, 220, 255, 0.2);
}

.petition-section .section-heading h2 {
  color: #eef8fc;
}

/* Haupttitel der Petition */
.petition-identity h3 {
  color: #eef8fc;
  background: linear-gradient(90deg, #ffffff 0%, #bceeff 55%, #58dcff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Kategorie oberhalb des Titels */
.petition-identity .mini-label {
  color: #58dcff;
  text-shadow: 0 0 14px rgba(88, 220, 255, 0.22);
}

/* Fließtext allgemein */
.petition-content p {
  color: #9fb0c2;
}

/* Erster Absatz etwas stärker */
.petition-content p:first-child {
  color: #d4e1ea;
}

/* Zweiter Absatz bewusst bläulicher */
.petition-content p:nth-child(2) {
  color: #a8c4d4;
}

/* Hervorgehobene Wörter innerhalb der Beschreibung */
.petition-content strong {
  color: #58dcff;
  font-weight: 600;
}

/* Status oben */
.petition-status span {
  color: #58dcff;
}

.petition-status strong {
  color: #e9c46a;
}

/* Metadaten Labels */
.petition-meta span {
  color: #58dcff;
}

/* Metadaten Werte */
.petition-meta strong {
  color: #cbd8e3;
}

/* Institution etwas heller */
.petition-meta div:nth-child(1) strong {
  color: #eef6fa;
}

/* Status der Petition in Gold */
.petition-meta div:nth-child(2) strong {
  color: #e9c46a;
}

/* Einreichungsdatum */
.petition-meta div:nth-child(3) strong {
  color: #8dddf5;
}

/* Thema */
.petition-meta div:nth-child(4) strong {
  color: #b9eaff;
}

/* Hinweis im unteren Bereich */
.petition-footer-status {
  color: #8699aa;
}

.petition-footer-status span:last-child {
  color: #9eb2c2;
}

/* Noch nicht verfügbare Mitzeichnung */
.petition-action-disabled {
  color: #d4b85f;
  border-color: rgba(233, 196, 106, 0.24);
  background: rgba(233, 196, 106, 0.045);
}

/* Statuspunkt passend zum Goldton */
.petition-action-disabled::before {
  content: "●";
  margin-right: 9px;
  color: #e9c46a;
  font-size: 0.55rem;
  text-shadow: 0 0 10px rgba(233, 196, 106, 0.55);
}

/* ============================================================
   PETITION // TEXT HIGHLIGHTS
   ============================================================ */

.petition-content p {
  color: #9cabb9;
  font-size: 0.98rem;
  line-height: 1.85;
}

.petition-content p:first-child {
  color: #bdc9d3;
}

.petition-content p:nth-child(2) {
  color: #a8b5c1;
}

.petition-content strong {
  font-weight: 600;
}

.petition-date {
  color: #e9c46a;
}

.petition-institution {
  color: #f0f5f8;
}

.petition-security {
  color: #58dcff;
  text-shadow: 0 0 12px rgba(88, 220, 255, 0.16);
}

.petition-zero {
  color: #7de4ff;
}

.petition-state {
  color: #c7d7e3;
}

.petition-law {
  color: #e9c46a;
}

.petition-knowledge {
  color: #9de8ff;
}



/* ============================================================
   FOOTER // ACTIONS
   ============================================================ */

.footer-actions{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  right:200px;
  z-index:3;
}

/* ============================================================
   FOOTER // SECURITY LINK ANIMATION
   ============================================================ */

.footer-security{
  animation:securityPulse 2.4s ease-in-out infinite;
}

.footer-link-icon{
  display:inline-block;
  margin-left:6px;
  font-size:.8rem;
  transition:transform .2s ease;
}

.footer-security:hover{
  animation-play-state:paused;
}

.footer-security:hover .footer-link-icon{
  transform:translate(3px,-3px);
}

@keyframes securityPulse{
  0%,100%{
    transform:translateY(0);
    border-color:rgba(255,58,69,.28);
    box-shadow:0 0 0 rgba(255,58,69,0);
  }

  50%{
    transform:translateY(-2px);
    border-color:rgba(255,58,69,.62);
    box-shadow:0 0 18px rgba(255,58,69,.18);
  }
}

.footer-security::before{
  animation:securityDotPulse 1.4s ease-in-out infinite;
}

@keyframes securityDotPulse{
  0%,100%{
    opacity:.65;
    transform:scale(.9);
    box-shadow:0 0 6px rgba(255,58,69,.45);
  }

  50%{
    opacity:1;
    transform:scale(1.25);
    box-shadow:0 0 14px rgba(255,58,69,.9);
  }
}

.footer-actions .footer-top{
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-width:38px;
  height:34px;
  padding:0;
  margin:0;
  flex:0 0 38px;
}

.footer-link-icon{
  margin-left:6px;
  font-size:.8rem;
  transition:transform .2s ease;
}

.footer-security:hover .footer-link-icon{
  transform:translate(2px,-2px);
}

.footer-security{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(255,58,69,.28);
  border-radius:8px;
  color:#ff7b83;
  background:rgba(255,58,69,.045);
  text-decoration:none;
  font:900 .62rem/1 Consolas,"Liberation Mono",monospace;
  letter-spacing:.09em;
  white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}

.footer-security::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px rgba(255,58,69,.65);
}

.footer-security:hover{
  color:#fff;
  border-color:rgba(255,58,69,.65);
  background:rgba(255,58,69,.10);
  box-shadow:0 0 16px rgba(255,58,69,.14);
  transform:translateY(-1px);
}





/* ============================================================
   FOOTER // LOCAL PROCESSING BUTTON
   ============================================================ */

.footer-local-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(114,255,157,.25);
  border-radius:8px;
  color:var(--green);
  background:rgba(114,255,157,.045);
  font:900 .62rem/1 Consolas,"Liberation Mono",monospace;
  letter-spacing:.08em;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}

.footer-local-info:hover{
  color:#fff;
  border-color:rgba(114,255,157,.6);
  background:rgba(114,255,157,.09);
  box-shadow:0 0 18px rgba(114,255,157,.12);
  transform:translateY(-1px);
}

/* ============================================================
   PRIVACY // STATUS DOT
   ============================================================ */

.footer-local-dot{
  display:inline-block;
  width:7px;
  min-width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;
  background:#72ff9d !important;
  border:1px solid #9dffbb;
  opacity:1 !important;
  box-shadow:
    inset 0 0 2px rgba(255,255,255,.75),
    0 0 5px #72ff9d,
    0 0 10px rgba(114,255,157,.9),
    0 0 16px rgba(114,255,157,.55);
}

.footer-local-dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(114,255,157,.35);
  border-radius:50%;
  animation:privacyDotRing 1.6s ease-out infinite;
}

@keyframes privacyDotPulse{
  0%,100%{
    opacity:.75;
    transform:scale(.9);
    box-shadow:
      0 0 4px rgba(114,255,157,.7),
      0 0 8px rgba(114,255,157,.4);
  }

  50%{
    opacity:1;
    transform:scale(1.15);
    box-shadow:
      0 0 6px rgba(114,255,157,1),
      0 0 14px rgba(114,255,157,.9),
      0 0 24px rgba(114,255,157,.55);
  }
}

@keyframes privacyDotRing{
  0%{
    opacity:.7;
    transform:scale(.7);
  }

  70%,100%{
    opacity:0;
    transform:scale(1.7);
  }
}

@keyframes localDotPulse{
  0%,100%{opacity:.65;box-shadow:0 0 5px rgba(114,255,157,.45)}
  50%{opacity:1;box-shadow:0 0 13px rgba(114,255,157,.95)}
}

/* ============================================================
   LOCAL PROCESSING // DIALOG
   ============================================================ */

.local-info-dialog{
  width:min(680px,calc(100% - 30px));
  max-width:680px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
}

.local-info-dialog::backdrop{
  background:rgba(0,4,8,.82);
  backdrop-filter:blur(8px);
}

.local-info-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(88,220,255,.22);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(8,14,21,.98),rgba(3,8,12,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 40px rgba(88,220,255,.06);
}

.local-info-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(88,220,255,.035),transparent 70%);
}

.local-info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(88,220,255,.12);
}

.local-info-label{
  color:var(--cyan);
  font:900 .66rem/1 Consolas,"Liberation Mono",monospace;
  letter-spacing:.14em;
}

.local-info-head h3{
  margin:8px 0 0;
  color:var(--text);
  font-size:1.45rem !important;
}

.local-info-close{
  width:36px;
  min-width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,58,69,.22);
  border-radius:9px;
  color:#ff7b83;
  background:rgba(255,58,69,.04);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}

.local-info-close:hover{
  color:#fff;
  border-color:rgba(255,58,69,.6);
  background:rgba(255,58,69,.1);
}

.local-info-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:20px 0 16px;
  color:var(--green);
  font:900 .65rem/1 Consolas,"Liberation Mono",monospace;
  letter-spacing:.1em;
}

.local-info-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(114,255,157,.75);
}

.local-info-card > p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.local-info-grid{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.local-info-item{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:14px;
  padding:15px;
  border:1px solid rgba(88,220,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.018);
}

.local-info-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(88,220,255,.22);
  border-radius:8px;
  color:var(--cyan);
  background:rgba(88,220,255,.045);
  font:900 .62rem/1 Consolas,"Liberation Mono",monospace;
}

.local-info-item strong{
  display:block;
  margin-bottom:4px;
  color:var(--cyan-2);
  font-size:.84rem;
}

.local-info-item p{
  margin:0;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.55;
}

.local-info-terminal{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(114,255,157,.12);
  border-radius:10px;
  background:#020609;
  font:800 .66rem/1.6 Consolas,"Liberation Mono",monospace;
}

.local-info-terminal span{color:#718995}
.local-info-terminal strong{color:var(--green)}

.local-info-confirm{
  width:100%;
  min-height:42px;
  margin-top:18px;
  border:1px solid rgba(88,220,255,.28);
  border-radius:9px;
  color:#03131a;
  background:linear-gradient(135deg,#82e9ff,#45c9eb);
  font:900 .68rem/1 Consolas,"Liberation Mono",monospace;
  letter-spacing:.09em;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}

.local-info-confirm:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(88,220,255,.18);
}

@media(max-width:700px){
  .footer-local-info{padding:0 9px;font-size:.56rem}
  .local-info-card{padding:20px}
}


/* ============================================================
   FOOTER // ACTIONS POSITION
   ============================================================ */

.footer-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  position:relative;
  z-index:3;
  margin-right:-200px;
}



/* ============================================================
   LOCAL INFO // INTRO
   ============================================================ */

.local-info-intro{
  position:relative;
  margin:20px 0 0 !important;
  padding:18px 20px 18px 22px;
  border:1px solid rgba(88,220,255,.16);
  border-left:3px solid var(--cyan);
  border-radius:12px;
  color:var(--soft) !important;
  background:linear-gradient(90deg,rgba(88,220,255,.07),rgba(88,220,255,.018));
  box-shadow:inset 0 0 22px rgba(88,220,255,.025),0 0 24px rgba(88,220,255,.035);
  font-size:.88rem;
  line-height:1.75 !important;
}

.local-info-intro::before{
  content:"PRIVACY // NOTICE";
  display:block;
  margin-bottom:8px;
  color:var(--cyan);
  font:900 .62rem/1 Consolas,"Liberation Mono",monospace;
  letter-spacing:.13em;
}

.local-info-intro::after{
  content:"";
  position:absolute;
  top:17px;
  right:18px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(114,255,157,.75);
}


/* ============================================================
   PRIVACY // HORIZONTAL DIALOG LAYOUT
   ============================================================ */

.local-info-dialog{
  width:min(1100px,calc(100% - 40px));
  max-width:1300px;
}

.local-info-card{
  padding:26px 28px;
  max-height:95vh;
  overflow-y:auto;
}

.local-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.local-info-item{
  height:100%;
  align-items:start;
}

/* ============================================================
   PRIVACY // TABLET
   ============================================================ */

@media(max-width:900px){
  .local-info-dialog{
    width:min(680px,calc(100% - 30px));
    max-width:680px;
  }

  .local-info-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   PRIVACY // MOBILE
   ============================================================ */

@media(max-width:700px){
  .local-info-dialog{
    width:calc(100% - 20px);
  }

  .local-info-card{
    padding:20px;
    max-height:92vh;
  }
}

.footer-top{
  border:0;
  font-family:inherit;
  cursor:pointer;
}

/* ============================================================
   FOOTER // INTERACTION FIX
   Dekorative Animationen dürfen keine Klicks blockieren
   ============================================================ */

.footer-actions{
  position:relative;
  isolation:isolate;
}

.footer-security,
.footer-local-info,
.footer-top{
  position:relative;
  z-index:5;
  pointer-events:auto !important;
}

.footer-actions::before,
.footer-actions::after,
.footer-security::before,
.footer-security::after,
.footer-local-info::before,
.footer-local-info::after,
.footer-local-dot::before,
.footer-local-dot::after{
  pointer-events:none !important;
}


/* ============================================================
   NAVIGATION // NEW ENTRY // PERMANENT ANIMATION
   ============================================================ */

.horizontal-nav-panel a.nav-new-entry{
  position:relative;
  color:#b9cad3;
  border:1px solid transparent;
  border-radius:6px;
}

/* NEW Badge */
.horizontal-nav-panel a.nav-new-entry::after{
  content:"NEW";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:16px;
  margin-left:8px;
  padding:0 6px;

  border:1px solid rgba(255,58,69,.50);
  border-radius:4px;

  background:rgba(255,58,69,.08);
  color:#ff6670;

  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.46rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;

  box-shadow:0 0 6px rgba(255,58,69,.18);
}

/* Dauerhafte Animation sobald Navigation geöffnet ist */
.horizontal-nav[open] .horizontal-nav-panel a.nav-new-entry{
  opacity:1 !important;
  transform:translateX(0) !important;

  animation:navNewPermanentPulse 2.2s ease-in-out infinite !important;
}

/* NEW Badge dauerhaft animieren */
.horizontal-nav[open] .horizontal-nav-panel a.nav-new-entry::after{
  animation:navNewBadgePulse 1.6s ease-in-out infinite;
}

/* Hauptanimation */
@keyframes navNewPermanentPulse{
  0%,100%{
    color:#b9cad3;
    border-color:rgba(233,196,106,.12);
    background:rgba(233,196,106,.015);

    box-shadow:
      inset 0 0 0 rgba(233,196,106,0),
      0 0 0 rgba(233,196,106,0);

    text-shadow:none;
  }

  50%{
    color:#ffe49a;
    border-color:rgba(233,196,106,.60);
    background:rgba(233,196,106,.09);

    box-shadow:
      inset 0 0 18px rgba(233,196,106,.06),
      0 0 16px rgba(233,196,106,.18);

    text-shadow:0 0 10px rgba(233,196,106,.55);
  }
}

/* NEW Badge */
@keyframes navNewBadgePulse{
  0%,100%{
    color:#ff6670;
    border-color:rgba(255,58,69,.40);
    background:rgba(255,58,69,.07);

    box-shadow:
      0 0 5px rgba(255,58,69,.18);

    text-shadow:none;
  }

  50%{
    color:#ff9aa0;
    border-color:rgba(255,58,69,.85);
    background:rgba(255,58,69,.16);

    box-shadow:
      0 0 8px rgba(255,58,69,.45),
      0 0 15px rgba(255,58,69,.20);

    text-shadow:0 0 7px rgba(255,58,69,.65);
  }
}

/* Hover bleibt zusätzlich deutlich sichtbar */
.horizontal-nav[open] .horizontal-nav-panel a.nav-new-entry:hover{
  color:#fff0b8;
  border-color:rgba(233,196,106,.85);
  background:rgba(233,196,106,.13);
}






/* ============================================================
   HORIZONTAL NAVIGATION // 10 LINK VIEWPORT
   ============================================================ */

.horizontal-nav-panel{
  display:flex;
  align-items:center;
  gap:5px;
  overflow:visible;
}

/* ============================================================
   HORIZONTAL NAVIGATION // SMOOTH LINK SLIDE
   ============================================================ */

/* ============================================================
   HORIZONTAL NAVIGATION // CONTINUOUS SMOOTH SCROLL
   ============================================================ */

.horizontal-nav-viewport{
  overflow:hidden;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}

.horizontal-nav-track{
  transform:none !important;
  transition:none !important;
  will-change:auto;
}

/* ============================================================
   VIEWPORT
   ============================================================ */

.horizontal-nav-viewport{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  transition:width .28s cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   LINK TRACK
   ============================================================ */

.horizontal-nav-track{
  display:flex;
  align-items:center;
  gap:4px;
  width:max-content;
  transform:translateX(0);
  transition:transform .34s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.horizontal-nav-track > a{
  flex:0 0 auto;
}

/* ============================================================
   ARROWS
   ============================================================ */

.horizontal-nav-arrow{
  position:relative;
  z-index:5;

  width:34px;
  min-width:34px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:1px solid rgba(88,220,255,.14);
  border-radius:7px;

  background:rgba(88,220,255,.035);
  color:var(--cyan);

  font-family:Consolas,"Liberation Mono",monospace;
  font-size:1.35rem;
  font-weight:700;
  line-height:1;

  cursor:pointer;

  box-shadow:
    inset 0 0 12px rgba(88,220,255,.025),
    0 0 0 rgba(88,220,255,0);

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

.horizontal-nav-arrow:hover{
  color:#bff4ff;
  border-color:rgba(88,220,255,.55);
  background:rgba(88,220,255,.09);

  box-shadow:
    inset 0 0 14px rgba(88,220,255,.06),
    0 0 14px rgba(88,220,255,.16);
}

.horizontal-nav-arrow-left:hover{
  transform:translateX(-2px);
}

.horizontal-nav-arrow-right:hover{
  transform:translateX(2px);
}

.horizontal-nav-arrow:disabled{
  opacity:.22;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
}

/* ============================================================
   EDGE FADE
   ============================================================ */

.horizontal-nav-viewport::before,
.horizontal-nav-viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:4;
  width:14px;
  pointer-events:none;
}

.horizontal-nav-viewport::before{
  left:0;
  background:linear-gradient(90deg,rgba(5,10,16,.85),transparent);
}

.horizontal-nav-viewport::after{
  right:0;
  background:linear-gradient(270deg,rgba(5,10,16,.85),transparent);
}

/* ============================================================
   LINKS INNERHALB DES TRACKS
   ============================================================ */

.horizontal-nav-track a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;

  color:#b9cad3;
  text-decoration:none;

  border:1px solid transparent;
  border-radius:7px;

  font-size:.72rem;
  font-weight:800;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.horizontal-nav-track a:hover{
  color:var(--cyan);
  border-color:rgba(88,220,255,.14);
  background:rgba(88,220,255,.06);
  text-shadow:0 0 12px rgba(88,220,255,.35);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:900px){

  .horizontal-nav-panel{
    overflow:visible;
  }

  .horizontal-nav-arrow{
    display:none;
  }

  .horizontal-nav-viewport{
    width:calc(100vw - 70px) !important;
    max-width:calc(100vw - 70px);
    overflow-x:auto;
    scrollbar-width:none;
  }

  .horizontal-nav-viewport::-webkit-scrollbar{
    display:none;
  }

  .horizontal-nav-track{
    transform:none !important;
  }
}

/* ============================================================
   HORIZONTAL NAVIGATION // STABLE LINKS
   verhindert Springen / Zucken beim ֦fnen
   ============================================================ */

.horizontal-nav-track > a:not(.nav-new-entry){
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .22s ease,
    text-shadow .22s ease !important;
  transition-delay:0s !important;
}

/* Auch beim Hover keine Positions䮤erung mehr */
.horizontal-nav[open] .horizontal-nav-track > a:not(.nav-new-entry):hover,
.horizontal-nav[open] .horizontal-nav-track > a:not(.nav-new-entry):focus-visible{
  transform:none !important;
  animation:none !important;
}

/* Rendering zus䴺lich stabilisieren */
.horizontal-nav-track > a{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:flat;
}



/* ============================================================
   GAME & SCRIPT DEVELOPMENT // TEBEX
   ============================================================ */

.tebex-section{
  --tebex-logo-width:1100px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 22%,rgba(255,58,69,.055),transparent 30%),
    radial-gradient(circle at 84% 28%,rgba(233,196,106,.045),transparent 28%),
    #05070b;
}

/* ============================================================
   GTA V LOGO // FORCED CENTER
   ============================================================ */

.tebex-logo{
  float:none !important;
  position:relative;
  left:50%;
  width:var(--tebex-logo-width);
  margin:0 0 24px;
  transform:translateX(-50%);
}

.tebex-logo img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  margin:0;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.52));
}

/* ============================================================
   MAIN GRID
   ============================================================ */

.tebex-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(310px,.55fr);
  gap:28px;
  align-items:start;
}

.tebex-intro,
.tebex-store{
  min-width:0;
  box-sizing:border-box;
}

/* ============================================================
   DEVELOPMENT CARD
   ============================================================ */

.tebex-intro{
  display:flow-root;
  position:relative;
  padding:30px;
  border:1px solid rgba(88,220,255,.14);
  border-radius:18px;
  background:rgba(8,13,20,.76);
  box-shadow:0 24px 65px rgba(0,0,0,.32);
}

/* ============================================================
   GTA V IMAGE // FLOATING LEFT
   ============================================================ */

.tebex-logo{
  float:left;
  width:var(--tebex-logo-width);
  margin:2px 32px 18px 0;
}

.tebex-logo img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.52));
}

/* ============================================================
   DEVELOPMENT CONTENT
   ============================================================ */

.tebex-label{
  display:block;
  margin:0 0 10px;
  color:#e9c46a;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.35;
}

.tebex-intro h3{
  margin:0 0 16px;
  color:#eef7fb;
  font-size:clamp(1.25rem,2vw,1.65rem);
  font-weight:800;
  line-height:1.3;
}

.tebex-intro p{
  margin:0 0 14px;
  color:#9eb0ba;
  font-size:.92rem;
  line-height:1.75;
}

.tebex-intro p:last-of-type{
  margin-bottom:0;
}

/* ============================================================
   TECHNOLOGY TAGS
   ============================================================ */

.tebex-tech{
  clear:both;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:24px;
}

.tebex-tech span{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border:1px solid rgba(88,220,255,.16);
  border-radius:7px;
  background:rgba(88,220,255,.035);
  color:#a7efff;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.07em;
  white-space:nowrap;
}

/* ============================================================
   TEBEX STORE CARD
   ============================================================ */

.tebex-store{
  position:relative;
  align-self:start;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(88,220,255,.14);
  border-radius:18px;
  background:rgba(8,13,20,.76);
  box-shadow:0 24px 65px rgba(0,0,0,.32);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.tebex-store:hover{
  transform:translateY(-2px);
  border-color:rgba(233,196,106,.38);
  box-shadow:
    0 28px 70px rgba(0,0,0,.40),
    0 0 28px rgba(233,196,106,.06);
}

/* ============================================================
   STORE HEADER
   ============================================================ */

.tebex-store-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid rgba(88,220,255,.12);
  background:rgba(255,255,255,.012);
}

.tebex-store-head > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.tebex-store-head > div > span{
  color:#718590;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.60rem;
  font-weight:800;
  letter-spacing:.10em;
}

.tebex-store-head > div > strong{
  color:#e9c46a;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
}

/* ============================================================
   STORE ONLINE STATUS
   ============================================================ */

.tebex-store-status{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  color:#72ff9d;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}

.tebex-store-status i{
  display:block;
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#72ff9d;
  box-shadow:
    0 0 6px rgba(114,255,157,.65),
    0 0 13px rgba(114,255,157,.30);
}

/* ============================================================
   STORE DATA
   ============================================================ */

.tebex-store-content{
  padding:5px 18px;
}

.tebex-store-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.tebex-store-row:last-child{
  border-bottom:0;
}

.tebex-store-row > span{
  flex:0 0 auto;
  color:#687d88;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.07em;
}

.tebex-store-row > strong{
  min-width:0;
  color:#cbd9df;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.72rem;
  font-weight:800;
  line-height:1.35;
  text-align:right;
}

/* ============================================================
   STORE DESCRIPTION
   ============================================================ */

.tebex-store-description{
  margin:8px 18px 16px;
  padding-top:14px;
  border-top:1px solid rgba(88,220,255,.10);
}

/* ============================================================
   STORE DESCRIPTION // MAIN TITLE
   STORE ACCESS // DIGITAL CONTENT
   ============================================================ */

.tebex-store-description > span{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  margin:0 0 12px;
  color:#e9c46a;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1.25;
}

.tebex-store-description > span::before{
  content:"◆";
  flex:0 0 auto;
  color:#e9c46a;
  font-size:.50rem;
  text-shadow:0 0 9px rgba(233,196,106,.45);
}

.tebex-store-description > span::after{
  content:"";
  flex:1;
  height:1px;
  min-width:20px;
  background:linear-gradient(
    90deg,
    rgba(233,196,106,.42),
    rgba(233,196,106,.08),
    transparent
  );
}

/* ============================================================
   TEBEX STORE NOTE
   ============================================================ */

.tebex-store-note{
  position:relative;
  padding:13px 14px;
  border:1px solid rgba(88,220,255,.11);
  border-left:2px solid #58dcff;
  border-radius:6px;
  background:
    linear-gradient(
      90deg,
      rgba(88,220,255,.035),
      rgba(88,220,255,.012),
      transparent
    );
}

/* ============================================================
   STORE NOTE // LABEL
   TEBEX // STORE ACCESS
   ============================================================ */

.tebex-store-note > span{
  display:block;
  margin:0 0 6px;
  color:#58dcff;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1.3;
}

/* ============================================================
   STORE NOTE // TITLE
   ============================================================ */

.tebex-store-note > strong{
  display:block;
  margin:0 0 7px;
  color:#eef7fb;
  font-size:.88rem;
  font-weight:750;
  line-height:1.35;
}

/* ============================================================
   STORE NOTE // DESCRIPTION TEXT
   ============================================================ */

.tebex-store-note > p{
  margin:0;
  color:#91a4ae;
  font-size:.78rem;
  line-height:1.55;
}

/* ============================================================
   STORE BUTTON
   ============================================================ */

.tebex-store-action{
  padding:0 18px 18px;
}

.tebex-store-action .btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  text-align:center;
}

/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px){
  .tebex-section{
    --tebex-logo-width:280px;
  }

  .tebex-grid{
    grid-template-columns:1fr;
  }

  .tebex-store{
    width:100%;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:700px){
  .tebex-section{
    --tebex-logo-width:220px;
  }

  .tebex-intro{
    padding:24px;
  }

  .tebex-logo{
    float:none;
    margin:0 0 24px;
  }

  .tebex-logo img{
    max-width:100% !important;
  }

  .tebex-tech{
    padding-top:20px;
  }
}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:480px){
  .tebex-section{
    --tebex-logo-width:180px;
  }

  .tebex-intro{
    padding:20px;
  }

  .tebex-intro p{
    font-size:.86rem;
  }

  .tebex-store-head{
    gap:12px;
    padding:14px;
  }

  .tebex-store-head > div > span{
    font-size:.55rem;
  }

  .tebex-store-head > div > strong{
    font-size:.70rem;
  }

  .tebex-store-status{
    font-size:.56rem;
  }

  .tebex-store-content{
    padding:4px 14px;
  }

  .tebex-store-row{
    gap:12px;
    padding:11px 0;
  }

  .tebex-store-row > span{
    font-size:.58rem;
  }

  .tebex-store-row > strong{
    font-size:.67rem;
  }

  .tebex-store-description{
    margin:8px 14px 14px;
    padding-top:12px;
  }

  .tebex-store-description > span{
    gap:7px;
    margin-bottom:10px;
    font-size:.55rem;
    letter-spacing:.06em;
  }

  .tebex-store-note{
    padding:12px;
  }

  .tebex-store-note > span{
    font-size:.54rem;
    letter-spacing:.07em;
  }

  .tebex-store-note > strong{
    font-size:.82rem;
  }

  .tebex-store-note > p{
    font-size:.74rem;
    line-height:1.5;
  }

  .tebex-store-action{
    padding:0 14px 14px;
  }
}

/* ============================================================
   STORE DESCRIPTION // VISUAL EXTENSIONS
   ============================================================ */

.tebex-store-divider{
  width:100%;
  height:1px;
  margin:9px 0 12px;
  background:linear-gradient(
    90deg,
    rgba(233,196,106,.45),
    rgba(88,220,255,.16),
    transparent
  );
}

.tebex-store-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid rgba(88,220,255,.08);
}

.tebex-store-meta > span{
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:5px 8px;
  border:1px solid rgba(88,220,255,.14);
  border-radius:4px;
  background:rgba(88,220,255,.025);
  color:#8299a5;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.54rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
}

.tebex-store-meta > span::before,
.tebex-store-meta > span::after{
  content:none;
}

/* ============================================================
   STORE DESCRIPTION // VISUAL UPGRADE
   ============================================================ */

.tebex-content-badge{
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  width:auto !important;
  margin:0 0 12px !important;
  padding:6px 10px;
  border:1px solid rgba(233,196,106,.28);
  border-radius:5px;
  background:rgba(233,196,106,.055);
  color:#e9c46a !important;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.58rem !important;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1;
  box-shadow:inset 0 0 14px rgba(233,196,106,.025);
}

.tebex-content-badge::before{
  content:"◆" !important;
  color:#e9c46a;
  font-size:.46rem;
  text-shadow:0 0 8px rgba(233,196,106,.50);
}

.tebex-content-badge::after{
  content:none !important;
}

/* ============================================================
   MAIN CONTENT TITLE
   ============================================================ */

.tebex-content-title{
  display:flex !important;
  align-items:center;
  gap:9px;
  margin:0 0 10px !important;
  padding:0 0 10px;
  border-bottom:1px solid rgba(88,220,255,.10);
  color:#eef7fb !important;
  font-size:.94rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

.tebex-content-title::before{
  content:"//";
  color:#58dcff;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.72rem;
  font-weight:900;
}

/* ============================================================
   CONTENT INFO
   ============================================================ */

.tebex-content-info{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 !important;
  padding:9px 11px;
  border-radius:5px;
  background:rgba(88,220,255,.025);
  color:#98aab3 !important;
  font-size:.78rem !important;
  line-height:1.55 !important;
}

.tebex-content-info::before{
  content:"●";
  flex:0 0 auto;
  margin-top:1px;
  color:#72ff9d;
  font-size:.48rem;
  text-shadow:0 0 7px rgba(114,255,157,.45);
}



/* GTA V // DIGITAL SIGNATURE BADGE */

.tebex-logo{
  position:relative;
}

.tebex-signature-badge{
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:10px;
  margin-left:130px;
  padding:6px 10px;
  border:1px solid rgba(114,255,157,.28);
  border-radius:5px;
  background:rgba(114,255,157,.055);
  color:#72ff9d;
  font-family:Consolas,"Liberation Mono",monospace;
  font-size:.60rem;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1;
  text-transform:uppercase;
}

.tebex-signature-badge i{
  display:block;
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#72ff9d;
  box-shadow:
    0 0 6px rgba(114,255,157,.70),
    0 0 12px rgba(114,255,157,.35);
}


/* ============================================================
   BEGIN UPDATE SECURITY LAYER
   ============================================================ */
.security-flow-text{
  display:inline-block;
  font-size:.72rem;
  line-height:1.55;
  font-weight:700;

  background:linear-gradient(
    90deg,
    #b8860b,
    #ffd700,
    #fff3b0,
    #f6c177,
    #ffd700,
    #b8860b
  );

  background-size:300% 100%;
  background-position:0% 50%;

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;

  opacity:0;

  transform:
    translateX(-80px)
    translateY(12px)
    scale(.94);

  animation:
    securityTextFlyIn .9s cubic-bezier(.16,1,.3,1) .25s forwards,
    securityTextFlow 7s ease-in-out 1.15s infinite;
}

@keyframes securityTextFlyIn{
  0%{
    opacity:0;
    transform:
      translateX(-80px)
      translateY(12px)
      scale(.94);
    filter:blur(7px);
  }

  65%{
    opacity:1;
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:
      translateX(0)
      translateY(0)
      scale(1);
    filter:blur(0);
  }
}

@keyframes securityTextFlow{
  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}
/* ============================================================
   END UPDATE SECURITY LAYER
   ============================================================ */
   
   
/* ============================================================
   BEGIN MOBILE PROTECTION // COLOR & TEXT ANIMATION
   ============================================================ */

#mobile-content-lock .mobile-content-lock-title{
  color:#c40000 !important;
  text-shadow:0 0 10px rgba(196,0,0,.18);
}

#mobile-content-lock .mobile-content-lock-text{
  color:#000 !important;
  animation:mobileProtectionText 3s ease-in-out infinite;
}

#mobile-content-lock .mobile-content-lock-text:nth-of-type(1){
  animation-delay:0s;
}

#mobile-content-lock .mobile-content-lock-text:nth-of-type(2){
  animation-delay:.5s;
}

#mobile-content-lock .mobile-content-lock-text:nth-of-type(3){
  animation-delay:1s;
}

@keyframes mobileProtectionText{
  0%,100%{
    opacity:.55;
    transform:translateY(0);
  }

  50%{
    opacity:1;
    transform:translateY(-2px);
  }
}

/* ============================================================
   END MOBILE PROTECTION // COLOR & TEXT ANIMATION
   ============================================================ */



/* ============================================================
   HERO TITLE + AUTHOR WEBSITE BUTTON
   ============================================================ */

.hero-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  width:100%;
}

.hero-title-row .verified-name{
  margin:0;
}

.hero-title-row .author-site-btn{
  flex:0 0 auto;
  min-height:40px;
  padding:0 14px;
  border-radius:10px;
  font-size:.68rem;
  white-space:nowrap;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){
  .hero-title-row{
    align-items:flex-start;
    gap:14px;
  }

  .hero-title-row .author-site-btn{
    min-height:38px;
    padding:0 12px;
    font-size:.65rem;
  }
}

@media(max-width:480px){
  .hero-title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}


/* ============================================================
   HERO TITLE ROW
   ============================================================ */

.hero-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  width:100%;
}

.hero-title-row .verified-name{
  margin:0;
}


/* ============================================================
   AUTHOR WEBSITE BUTTON
   ============================================================ */

.author-site-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:40px;
  padding:0 15px;

  border:1px solid rgba(88,220,255,.35);
  border-radius:10px;

  background:
    linear-gradient(135deg,rgba(88,220,255,.08),rgba(88,220,255,.02)),
    rgba(4,10,15,.92);

  color:#dffaff;

  font-size:.67rem;
  font-weight:800;
  letter-spacing:.11em;
  text-decoration:none;
  white-space:nowrap;

  overflow:hidden;

  box-shadow:
    0 8px 24px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(88,220,255,.03);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    color .3s ease;
}


/* animierter Lichtstreifen */

.author-site-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-130%;

  width:80%;
  height:100%;

  background:linear-gradient(
    110deg,
    transparent,
    rgba(88,220,255,.08),
    rgba(255,255,255,.45),
    rgba(88,220,255,.10),
    transparent
  );

  transform:skewX(-18deg);

  animation:authorButtonSweep 4.5s ease-in-out infinite;
}


/* dezenter Glow */

.author-site-btn::after{
  content:"";
  position:absolute;
  inset:0;

  border-radius:inherit;

  box-shadow:
    inset 0 0 18px rgba(88,220,255,.05);

  pointer-events:none;

  animation:authorButtonGlow 2.8s ease-in-out infinite;
}


.author-site-btn span{
  position:relative;
  z-index:1;
}


/* Pfeil */

.author-site-btn-arrow{
  color:#58dcff;
  font-size:.95rem;

  transition:transform .3s ease;
}


/* Hover */

.author-site-btn:hover{
  transform:translateY(-2px);

  color:#fff;

  border-color:rgba(88,220,255,.70);

  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 22px rgba(88,220,255,.16);
}

.author-site-btn:hover .author-site-btn-arrow{
  transform:translate(3px,-3px);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes authorButtonSweep{
  0%,
  65%{
    left:-130%;
  }

  82%{
    left:150%;
  }

  100%{
    left:150%;
  }
}

@keyframes authorButtonGlow{
  0%,
  100%{
    opacity:.45;
  }

  50%{
    opacity:1;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){
  .hero-title-row{
    gap:12px;
  }

  .author-site-btn{
    min-height:38px;
    padding:0 12px;
    font-size:.62rem;
  }
}

@media(max-width:480px){
  .hero-title-row{
    flex-direction:column;
    align-items:flex-start;
  }
}