.brand span {
  background: linear-gradient(135deg, #ffffff, #d7edff 35%, #f5beea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero h1 {
  background: linear-gradient(135deg, #f0f7ff 0%, #d6dcff 25%, #ffc5ec 62%, #96f2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.drop strong {
  color: #fdf7ff;
}

.tab.on {
  position: relative;
  overflow: hidden;
}

.tab.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.12), transparent 80%);
  transform: translateX(-110%);
  animation: sheen 2.2s ease-in-out infinite;
}

@keyframes sheen {
  0% { transform: translateX(-110%); }
  45%, 100% { transform: translateX(110%); }
}

.panel,
.faq,
.facts > div {
  position: relative;
}

.panel::before,
.faq::before,
.facts > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 30%, transparent 65%, rgba(255,255,255,0.02));
  pointer-events: none;
}

.list li:hover {
  border-color: rgba(59, 217, 208, 0.35);
  background: rgba(59, 217, 208, 0.04);
}

button:not(.tab):active {
  transform: translateY(0);
}

@media (max-width: 500px) {
  .brand {
    font-size: 1.1rem;
  }

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

  .tab {
    width: 100%;
  }
}