:root{
  --bg:#07080c;
  --panel:#0c0f16;
  --panel2:#0a0c12;
  --text:#e9edf5;
  --muted:#aab3c5;
  --line:rgba(255,255,255,.10);
  --accent:#7c5cff;
  --accent2:#3dd6d0;
  --radius:18px;
  --max:1100px;
  --shadow: 0 12px 36px rgba(0,0,0,.55);
  --focus: 0 0 0 3px rgba(124,92,255,.35);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height:100%;
}

body{
  height:100%;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: clamp(14px, 3.5vw, 16px);
  background-color: #05060a;
  color:var(--text);
  line-height:1.5;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(700px 420px at 85% 20%, rgba(61,214,208,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), #05060a);
  background-repeat:no-repeat;
  background-size:cover;
}

body h1{
  font-size: clamp(1.4rem, 5vw, 2rem);
}
body h2{
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
}
body h3{
  font-size: clamp(1.05rem, 4vw, 1.3rem);
}
body p,
body li{
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
}
body a{
  color:inherit;
  text-decoration:none;
}

body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body input:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:12px;
}

main{
  max-width:var(--max);
  margin:0 auto;
  padding:22px 22px 28px 22px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  background-color: rgba(12,15,22,.88); /* Fallback ohne backdrop-filter */
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  margin-bottom: 10px;
}

header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(7,8,12,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  max-width:var(--max);
  margin:0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  -webkit-tap-highlight-color: transparent;
}

.logo{
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.logo svg{
  width: 100%;
  height: 100%;
  display: block;
}

.brand-text{
  min-width:0;
}

/* brand-title (zusammengeführt: Typo + Animation-Container) */
.brand-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.05rem;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  display:inline-flex;
  gap:.02em;
}

nav{
  max-width:var(--max);
  margin:0 auto;
}

.nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  opacity: 0;
  pointer-events: none;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn:hover{background: rgba(255,255,255,.07)}

.nav-btn span{
  display:inline-block;
  width:18px;
  height:2px;
  background: rgba(233,237,245,.85);
  border-radius:2px;
  position:relative;
}

.nav-btn span::before,
.nav-btn span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: rgba(233,237,245,.85);
  border-radius:2px;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}

.nav-btn span::before{top:-6px}
.nav-btn span::after{top:6px}

.nav-btn-text{color:var(--muted); font-size:.95rem}

/* :has bleibt wie gewünscht */
header:has(#nav-toggle:checked) .nav-btn span{
  background: transparent;
}
header:has(#nav-toggle:checked) .nav-btn span::before{
  top: 0;
  transform: rotate(45deg);
}
header:has(#nav-toggle:checked) .nav-btn span::after{
  top: 0;
  transform: rotate(-45deg);
}

.nav-btn span,
.nav-btn span::before,
.nav-btn span::after{
  transition:
    transform .22s ease,
    top .22s ease,
    opacity .18s ease,
    background .18s ease;
}

/* <menu> robust machen (UA-Defaults) */
menu{
  display:block;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  max-height:0;
  padding: 0;
  margin: 0;
  margin-left: 3rem;
  transition: max-height .25s ease;
  list-style: none;
  border-radius: 0!important;
  margin-bottom:0!important;
}

menu a{
  display:block;
  padding:10px 10px;
  border-top:1px solid var(--line);
  color:rgba(233,237,245,.92);
}

menu a:first-child{border-top:none}
menu a:hover{background: rgba(255,255,255,.06)}

menu a.active{
  background: linear-gradient(90deg, rgba(124,92,255,.20), rgba(61,214,208,.10));
  border-left:3px solid rgba(124,92,255,.75);
  padding-left:11px;
}

.nav-toggle:checked ~ menu{max-height:420px}

@media (min-width: 780px){
  .nav-btn, .nav-btn-text{display:none}
  nav{padding:0 18px 16px}
  menu{
    max-height:none;
    display:flex;
    gap:10px;
    margin-top:0;
  }
  menu a{
    border-top:none;
    padding:10px 12px;
  }
  menu a.active{
    border-left:none;
    padding-left:12px;
  }
}

.hero{width: 100%}

.hero h1{
  margin:0 0 8px;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  letter-spacing:.2px;
}
.hero p{
  margin:0 0 14px;
  color:var(--muted);
}

.panel{padding:18px}
.panel h2{margin:0 0 8px; font-size:1.05rem}
.panel p{margin:0; color:var(--muted)}

.dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}

footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:18px;
  max-width:var(--max);
  margin:0 auto;
  font-size:.92rem;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

footer div{
  text-align: center;
  width: 100%;
}

.foot-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  width: 100%;
}

.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.foot-links a.toTopLink{margin-left: auto}

i{
  font-size: 50px;
  margin: 10px;
}

/* ===== NOTICE WARNING ===== */

.notice-warning{
  position:relative;
  text-align:center;
  color:#f1dede;
  font-size:clamp(10px, 2vw, 12px);
  line-height:1.4;
  padding:0 70px; /* Platz für Blitze */
}

/* BLITZ – Basis */
.notice-warning::before,
.notice-warning::after{
  content:"";
  position:absolute;
  top:50%;
  width:6px;
  height:60px;
  background:linear-gradient(
    160deg,
    transparent 0%,
    transparent 20%,
    #ff3b3b 20%,
    #ff3b3b 32%,
    transparent 32%,
    transparent 45%,
    #ff3b3b 45%,
    #ff3b3b 60%,
    transparent 60%
  );
  filter:
    drop-shadow(0 0 6px rgba(255,60,60,.8))
    drop-shadow(0 0 14px rgba(255,60,60,.6));
  transform:translateY(-50%) skewX(-12deg);
  opacity:.85;
  animation: lightning-flicker 2.8s infinite;
}
/* links */
.notice-warning::before{
  left:0;
}
/* rechts */
.notice-warning::after{
  right:0;
  transform:translateY(-50%) scaleX(-1) skewX(-12deg);
  animation-delay:1.4s;
}

/* Animation: leichtes Flackern */
@keyframes lightning-flicker{
  0%, 100% { opacity:.85; }
  45% { opacity:.4; }
  50% { opacity:1; }
  55% { opacity:.6; }
}



.notice-warning h3{
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  text-shadow:
    0 0 6px rgba(255, 60, 60, 0.9),
    0 0 14px rgba(255, 60, 60, 0.6),
    0 0 22px rgba(255, 60, 60, 0.4);
}
.notice-warning p{
  margin: 0;
  color: #ffd6d6;
  text-shadow: 0 0 6px rgba(255, 40, 40, 0.35);
}

@media (max-width: 600px){
  .notice-warning::before,
  .notice-warning::after{width: 40px}
  .notice-warning{padding: 1.2rem 2rem}
}

/* ===== TESTAMENT ===== */
#testament.panel.card{
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 4vw, 28px);
  border-radius: 22px;
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 450px at 80% 30%, rgba(255,60,60,.09), transparent 65%),
    linear-gradient(180deg, rgba(18,20,28,.92), rgba(10,12,18,.96));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

#testament.panel.card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(0,0,0,.35), transparent 65%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity: .55;
  animation: candleFlicker 5.2s linear infinite;
  transform-origin: center;
}

#testament.panel.card::after{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background:
    radial-gradient(260px 260px at 10% 18%, rgba(255,40,40,.22), transparent 65%),
    radial-gradient(300px 300px at 92% 22%, rgba(255,40,40,.18), transparent 70%),
    radial-gradient(340px 340px at 50% 110%, rgba(124,92,255,.10), transparent 70%);
  filter: blur(2px);
  animation: sigilPulse 3.6s ease-in-out infinite;
  transform-origin: center;
}

#testament h1{
  margin: 0 0 .35rem 0;
  font-size: clamp(1.45rem, 4.8vw, 2.1rem);
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 0 18px rgba(255,60,60,.18);
}

#testament h2{
  margin: 0 0 1rem 0;
  font-size: clamp(1.05rem, 3.8vw, 1.35rem);
  color: rgba(255,255,255,.86);
  text-align: center;
}

#testament h2::after{
  content: "";
  display: block;
  height: 1px;
  width: min(420px, 90%);
  margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,60,60,.55), transparent);
  box-shadow: 0 0 14px rgba(255,60,60,.25);
}

#testament p{
  color: rgba(255,255,255,.78);
  line-height: 1.72;
  font-size: clamp(.95rem, 3.4vw, 1.05rem);
  margin: .8rem 0;
}

#testament p:first-of-type::first-letter{
  float: left;
  font-size: 2em;
  line-height: 1.6;
  padding: 0 .1em 0 0;
  margin-top: -.4em;
  margin-bottom: .6em;
  font-weight: 400;
  color: #ff4d4d;
  text-shadow:0 0 10px rgba(255,60,60,.55), 0 0 22px rgba(255,60,60,.25);
}

#testament ul{
  list-style: none;
  padding: 0;
  margin: 1rem 0 .5rem;
  display: grid;
  gap: .85rem;
  counter-reset: codex;
}

#testament li{
  position: relative;
  padding: .85rem .95rem .85rem 2.4rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 25px rgba(0,0,0,.35);
  color: rgba(255,255,255,.82);
}

#testament li::after{
  counter-increment: codex;
  content: "§" counter(codex);
  position: absolute;
  left: .5rem;
  top: 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ff4d4d;
  animation: sigilBreath 3.8s ease-in-out infinite;
}

#testament li br{line-height: 1.1}
#testament li b{
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 10px rgba(255,60,60,.12);
}

#testament h3{
  margin: 1.8rem 0 .5rem;
  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  text-align: center;
  color: #ff4d4d;
  text-shadow:0 0 8px rgba(255,60,60,.8), 0 0 18px rgba(255,60,60,.35);
}

#testament h3 + p{
  margin-top: .5rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,60,60,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,60,60,.18);
  box-shadow:0 0 18px rgba(255,60,60,.12), inset 0 1px 0 rgba(255,255,255,.06);
}

#testament img{
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 1rem auto 0;
  border-radius: 50%;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}

@media (max-width: 520px){
  #testament li{padding-left: 2.2rem}
  #testament li::before{left: .75rem}
}

@keyframes sigilBreath{
  0%{
    opacity: .55;
    transform: translateY(-50%) scale(1);
    text-shadow:
      0 0 6px rgba(255,60,60,.6),
      0 0 14px rgba(255,60,60,.35);
  }
  50%{
    opacity: .95;
    transform: translateY(-50%) scale(1.12);
    text-shadow:
      0 0 10px rgba(255,80,80,.9),
      0 0 26px rgba(255,80,80,.6),
      0 0 44px rgba(255,80,80,.35);
  }
  100%{
    opacity: .55;
    transform: translateY(-50%) scale(1);
    text-shadow:
      0 0 6px rgba(255,60,60,.6),
      0 0 14px rgba(255,60,60,.35);
  }
}

@keyframes sigilPulse{
  0%{ opacity: .45; transform: scale(1); filter: blur(2px); }
  50%{ opacity: .70; transform: scale(1.02); filter: blur(1px); }
  100%{ opacity: .45; transform: scale(1); filter: blur(2px); }
}

@keyframes candleFlicker{
  0%{ opacity: .10; transform: translate3d(-1px, 0, 0) scale(1); }
  20%{ opacity: .14; transform: translate3d( 1px,-1px, 0) scale(1.01); }
  45%{ opacity: .09; transform: translate3d( 0px, 1px, 0) scale(1.00); }
  70%{ opacity: .16; transform: translate3d( 1px, 0px, 0) scale(1.015); }
  100%{ opacity: .11; transform: translate3d(-1px, 0px, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  #testament.panel.card::after,
  #testament.panel.card::before{ animation: none !important; }
}

/* ===== TECH ===== */
#tech.panel.card{overflow: visible}

.tech-icons{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 5;
}

.tech-icons i{
  position: relative;
  font-size: 3rem;
  margin: .8rem;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
}

.tech-icons i::after{
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-6px);
  padding: .25rem .65rem;
  font-size: .75rem;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #ffd6d6;
  background: rgba(14, 8, 12, .92);
  border: 1px solid rgba(255, 60, 60, .35);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}

.tech-icons i:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tech-icons i:focus-visible::after,
.tech-icons i:active::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  z-index: 999;
}

.tech-icons i:hover{
  filter: drop-shadow(0 0 8px rgba(255,60,60,.6));
}

/* Brand-Title Letters */
.brand-title span{
  display: inline-block;
  opacity: 0;
  transform: translateX(20px);
  animation: letter-in 0.45s ease-out forwards;
}

@keyframes letter-in{
  0%{ opacity: 0; transform: translateX(24px); }
  80%{ opacity: 1; transform: translateX(-2px); }
  100%{ opacity: 1; transform: translateX(0); }
}

.brand-title span:nth-child(10){
  margin-top: .4rem;
  font-size:.75rem;
}

.brand-title span:nth-child(5),
.brand-title span:nth-child(10){
  animation:
    letter-in 0.45s ease-out forwards,
    fifth-tilt .45s ease-out forwards;
}

@keyframes fifth-tilt{
  0%{ transform: translateX(24px) rotate(-20deg); }
  80%{ transform: translateX(-2px) rotate(20deg); }
  100%{ transform: translateX(0) rotate(45deg); }
}

/* ===== HOLY DOVE ===== */
.holy-dove{
  position: fixed;
  top: 14vh;
  left: -140px;
  width: 72px;
  height: auto;
  z-index: 50;
  pointer-events: auto;
  opacity: 0;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.65))
    drop-shadow(0 0 16px rgba(255,255,255,.25));
  animation: dove-fly 24s linear infinite;
}

@keyframes dove-fly{
  0%{ opacity: 0; transform: translateX(0) translateY(0); }
  60%{ opacity: 0; }
  62%{ opacity: .92; }
  70%{ transform: translateX(35vw) translateY(-10px); }
  78%{ transform: translateX(70vw) translateY(8px); }
  82%{ opacity: 0; transform: translateX(120vw) translateY(0); }
  100%{ opacity: 0; }
}

.dove-drops{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 49;
}

.dove-poop{
  position: fixed;
  width: 14px;
  height: 16px;
  border-radius: 9px 9px 10px 10px;
  background: rgba(235,235,235,.95);
  box-shadow: 0 0 8px rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.10);
  transform: translate(-50%, -50%);
  animation: poop-drop 1.25s ease-in forwards;
}

.dove-poop::after{
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  width:10px;
  height:8px;
  transform:translateX(-50%);
  border-radius:10px 10px 6px 6px;
  background: rgba(245,245,245,.95);
}

@keyframes poop-drop{
  0%{ opacity: 0; transform: translate(-50%,-50%) translateY(0) scale(.8); }
  10%{ opacity: 1; transform: translate(-50%,-50%) translateY(0) scale(1); }
  100%{ opacity: 0; transform: translate(-50%,-50%) translateY(520px) rotate(-10deg); }
}

.dove-splat{
  position: fixed;
  bottom: 8px;
  transform: translateX(-50%);
  width: 34px;
  height: 6px;
  border-radius: 18px 16px 14px 12px;
  background: rgba(240,240,240,.96);
  box-shadow:
    0 0 10px rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.14);
  opacity: 0;
  animation:
    splash-pop .28s cubic-bezier(.2,.9,.2,1) forwards,
    splat-out .7s ease-in forwards 9.3s;
}

.dove-splat::before,
.dove-splat::after{
  content:"";
  position:absolute;
  bottom: 2px;
  width: 10px;
  height: 8px;
  background: rgba(245,245,245,.96);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
  border-radius: 10px 10px 8px 8px;
  opacity: .95;
}

.dove-splat::before{
  left: -10px;
  transform: rotate(-14deg);
  animation: drip-left .55s ease-out forwards;
}

.dove-splat::after{
  right: -12px;
  transform: rotate(18deg);
  animation: drip-right .55s ease-out forwards;
}

@keyframes splash-pop{
  0%{ opacity: 0; transform: translateX(-50%) scale(.55,.85); filter: blur(.2px); }
  70%{ opacity: 1; transform: translateX(-50%) scale(1.10,.95); }
  100%{ opacity: 1; transform: translateX(-50%) scale(1,1); filter: blur(0); }
}

@keyframes drip-left{
  0%{ transform: translate(0,0) rotate(-14deg) scale(.7); }
  60%{ transform: translate(-6px,-3px) rotate(-22deg) scale(1); }
  100%{ transform: translate(-4px,0) rotate(-16deg) scale(.95); }
}

@keyframes drip-right{
  0%{ transform: translate(0,0) rotate(18deg) scale(.7); }
  60%{ transform: translate(7px,-4px) rotate(28deg) scale(1); }
  100%{ transform: translate(5px,0) rotate(20deg) scale(.95); }
}

/* splat-out nur EINMAL (Duplikat entfernt) */
@keyframes splat-out{
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .holy-dove{ animation:none; opacity:.9; left:12px; top:12px; }
}

/* ===== Scroll Reveal ===== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal[data-delay]{ transition-delay: var(--delay, 0ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ===== Snake Text ===== */
.snake-text{
  display: inline-flex;
  justify-content: center;
  width: 100%;
  gap: .04em;
  white-space: nowrap;
}
.snake-text span{
  display: inline-block;
  transform-origin: center bottom;
  animation: snakeWave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.08s);
  text-shadow: 0 0 10px rgba(255,255,255,.25);
}
@keyframes snakeWave{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .snake-text span{ animation: none; }
}

/* ===== Quote Slider ===== */
.quote-slider{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 24px 0;
}
.slider-track{
  display: flex;
  gap: 16px;
  will-change: transform;
  touch-action: pan-y;
}
.slide{
  position: relative;
  min-width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--panel, #0c0f16);
  color: var(--text, #fff);
  border-radius: 18px;
  text-align: center;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.quote-slider::before{
  content: "„";
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 3rem;
  color: rgba(255,255,255,.35);
  pointer-events: none;
}
.quote-slider::after{
  content: "“";
  position: absolute;
  bottom: 0;
  right: 10px;
  font-size: 3rem;
  color: rgba(255,255,255,.35);
  pointer-events: none;
}
.quote-slider::before,
.quote-slider::after{
  text-shadow:
    0 0 12px rgba(255,255,255,.25),
    0 0 24px rgba(255,255,255,.15);
  z-index: 15;
}
.no-us{
  user-select: none;
}

.user-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.68);
  border:1px solid rgba(255,255,255,.14);
  padding:10px 12px;
  border-radius:16px;
  color:var(--text, #e9edf5);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  max-width:min(92vw, 680px);
  backdrop-filter: blur(8px);
  z-index:9999;
}
.user-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

.faq-viewport{
  position: relative;
  margin: 0 0 18px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(1200px 400px at 50% -20%, rgba(124,92,255,.18), transparent 60%),
    rgba(0,0,0,.35);
}

.faq-viewport-inner{
  position: relative;
  padding: 22px 18px 20px;
  text-align: center;
}

.faq-eyebrow{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

/* Scanline */
.faq-scanline{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(124,92,255,.25) 48%,
      rgba(61,214,208,.25) 50%,
      transparent 52%,
      transparent 100%
    );
  animation: scanMove 6s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

@keyframes scanMove{
  from{ background-position: 0 -100%; }
  to{ background-position: 0 200%; }
}