/* theme */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
:root { --bg0:#0a0a0a; --bg1:#0e0e10; --text:#f5f7fa; --muted:#a7aab3; --brand:#0A84FF; --ring:rgba(255,255,255,.12); }
body{ color:var(--text); }

/* surfaces */
.card{ background:rgba(255,255,255,.06); border:1px solid var(--ring); }
.island{ border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 30px rgba(0,0,0,.28); }
.glass{ background:rgba(255,255,255,.05); backdrop-filter:blur(10px); }
.glass-liquid{ position:relative; backdrop-filter:blur(14px) saturate(120%); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.glass-liquid::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%); pointer-events:none; mix-blend-mode:overlay; }
.sep{ height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }

/* buttons */
.btn{ -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:44px; padding-inline:1rem; border-radius:9999px; font-weight:600; white-space:nowrap; line-height:1; color:#fff; }
.btn-lg{ height:48px; padding-inline:1.25rem; font-weight:700; }
.btn-brand{ background:var(--brand); box-shadow:0 8px 20px rgba(10,132,255,.35); transition:filter .2s ease, transform .15s ease; }
.btn-brand:hover{ filter:brightness(1.08); }
.btn-outline{ color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); }
.btn img{ height:1rem; width:auto; display:block; }

/* nav */
.nav-underline a{ position:relative; display:inline-block; padding-bottom:4px; }
.nav-underline a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--brand); transition:right .25s ease; opacity:.95; }
.nav-underline a:hover::after,.nav-underline a:focus-visible::after{ right:0; }

/* hero */
.hero-gradient{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(10,132,255,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(10,132,255,.12), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  pointer-events: none; /* ✅ FIX: verhindert Hover-Blockade */
  z-index: 0;           /* ✅ FIX: bleibt unter Content */
}
.hero-frame{ box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 25px 70px rgba(10,132,255,.16); }

/* blobs */
.liquid-wrap{ position:absolute; inset:0; pointer-events:none; z-index:-1; filter:url(#goo); }
.liquid{ position:absolute; inset:-10% -10% -20% -10%; overflow:visible; }
.liquid .blob{ position:absolute; width:42vmax; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(closest-side, rgba(10,132,255,.30), rgba(10,132,255,.18) 55%, rgba(10,132,255,0) 70%); filter:blur(22px) saturate(120%); animation:blobFloat 22s ease-in-out infinite; mix-blend-mode:screen; }
.liquid .blob.purple{ background:radial-gradient(closest-side, rgba(10,132,255,.30), rgba(10,132,255,.18) 55%, rgba(10,132,255,0) 70%); }
.liquid .blob.teal{ background:radial-gradient(closest-side, rgba(10,132,255,.24), rgba(10,132,255,.14) 55%, rgba(10,132,255,0) 70%); }
@keyframes blobFloat{ 0%{ transform:translate(-10%,-6%) scale(1);} 50%{ transform:translate(8%,4%) scale(1.06);} 100%{ transform:translate(-10%,-6%) scale(1);} }

/* hovers */
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .25s ease, box-shadow .25s ease; }
.tilt:hover{ transform:translateY(-2px) rotateX(1deg) rotateY(-1deg); box-shadow:0 14px 40px rgba(0,0,0,.28); }
.sheen{ position:relative; overflow:hidden; }
.sheen::before{ content:""; position:absolute; inset:-1px; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 45%, transparent 60%); transform:translateX(-120%); transition:transform .7s ease; }
.sheen:hover::before{ transform:translateX(120%); }
.card-lift:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.34); }
.hover-pop{ transition:transform .18s ease; }
.hover-pop:hover{ transform:translateY(-2px) scale(1.02); }
.hover-ring{ position:relative; }
.hover-ring::after{ content:""; position:absolute; inset:0; border-radius:1rem; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 0 rgba(10,132,255,.35); transition:box-shadow .25s ease; pointer-events:none; }
.hover-ring:hover::after{ box-shadow:0 0 0 1px rgba(10,132,255,.6) inset, 0 0 0 10px rgba(10,132,255,.10); }

/* rules page */
.rules-hero-mask img{ -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent 95%); mask-image:linear-gradient(to bottom, #000 60%, transparent 95%); }
.rules-pills{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.rules-pill{ display:inline-flex; align-items:center; gap:.5rem; height:38px; padding:0 .9rem; border-radius:9999px; font-weight:600; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; }
.rules-pill:hover{ background:rgba(255,255,255,.1); }
.rules-pill.is-active{ background:var(--brand); border-color:transparent; box-shadow:0 8px 20px rgba(10,132,255,.35); }
.rules-acc{ border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:1rem; }
.rules-acc summary{ cursor:pointer; }
.rules-acc .chev{ transition:transform .2s ease; }
.rules-acc[open] .chev{ transform:rotate(180deg); }

/* tos-link fix */
.tos-link{
  color: var(--text); /* ✅ bleibt hell */
  cursor: pointer;    /* ✅ klarer Zeiger */
  text-decoration-color: rgba(255,255,255,.20);
}
.tos-link:hover{
  text-decoration-color: rgba(255,255,255,.60);
}

/* motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* misc */
.rounded-island{ border-radius:22px; }
.shadow-card{ box-shadow:0 6px 20px rgba(0,0,0,.14); }
.join-panel{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03)); box-shadow:0 1px 0 rgba(255,255,255,.08) inset; }

.pulse-on-hover {
  position: relative;
  overflow: hidden; /* ensures the pulse effect stays within the button bounds */
}

/* Pseudo-element for the pulse effect */
.pulse-on-hover::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: var(--brand); /* Assumes --brand is defined, otherwise use a direct color like #007bff */
  border-radius: 9999px; /* Circle shape */
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Slower transition for a softer pulse */
  z-index: -1;
}

/* State when the button is hovered */
.pulse-on-hover:hover::after {
  transform: translate(-50%, -50%) scale(2); /* Scale out much further */
  opacity: 0.25; /* More visible but still soft */
}