[data-reveal] { will-change: opacity, transform; }
[data-reveal].reveal-init {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].reveal-in { opacity: 1 !important; transform: none !important; }

[data-bar] { transition: width 1.1s cubic-bezier(.16, 1, .3, 1); }

[data-faq-panel] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
[data-faq-panel] > .faq-panel-inner { overflow: hidden; min-height: 0; }
[data-faq-item][data-open] [data-faq-panel] { grid-template-rows: 1fr; }

[data-login], [data-support] { position: relative; }
[data-login-menu], [data-support-menu] {
  position: absolute;
  top: 100%;
  margin-top: .75rem;
  z-index: 50;
  min-width: 11rem;
  background: #282828b8;
  transform-origin: top center;
  animation: in-login .14s ease;
}
[data-login-menu] { right: 0; }
[data-support-menu] { left: 0; }
[data-login-menu][hidden], [data-support-menu][hidden] { display: none; }
[data-login-menu] a, [data-support-menu] a { display: block; color: inherit; text-decoration: none; }
@keyframes in-login {
  from { opacity: 0; transform: scale(.95) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

[data-header-bg] {
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

body.menu-open { overflow: hidden; }

.bg-green-500\/10 { background-color: rgba(179, 166, 238, 0.10) !important; }
.border-green-500\/60 { border-color: rgba(179, 166, 238, 0.60) !important; }
.hover\:border-green-500\/60:hover { border-color: rgba(179, 166, 238, 0.60) !important; }


.bg-card { background-color: hsl(0deg 0% 6.86% / var(--tw-bg-opacity, 1)) }
.border-card { border-color: #2a2536 !important }

.kvm-slider { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: #2a2536; outline: none; cursor: pointer; }
.kvm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 18px; width: 18px; border-radius: 9999px; background: #b3a6ee; cursor: pointer; box-shadow: 0 0 0 4px rgba(179, 166, 238, .2); transition: box-shadow .15s ease; }
.kvm-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(179, 166, 238, .3); }
.kvm-slider::-moz-range-thumb { height: 18px; width: 18px; border: none; border-radius: 9999px; background: #b3a6ee; cursor: pointer; }
.kvm-slider::-moz-range-track { height: 6px; border-radius: 9999px; background: transparent; }

/* Dedicated configurator: selected option card (ponytail: own rule instead of
   gambling on compiled Tailwind opacity variants like bg-green-500/5). */
[data-ded-opt] { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
[data-ded-opt].ded-on { border-color: #b3a6ee !important; background-color: rgba(179,166,238,.08) !important; box-shadow: inset 0 0 0 1px rgba(179,166,238,.30); }