.hero-accordion {
  --accordion-height: 280px;
  --accordion-collapsed-width: 44px;
  --accordion-duration: 350ms;
  display: flex;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: var(--accordion-height);
  isolation: isolate;
}

.hero-accordion__card {
  position: relative;
  flex: 0 0 var(--accordion-collapsed-width);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  color: #f8fafc;
  transition: flex-grow var(--accordion-duration) ease,
    flex-basis var(--accordion-duration) ease,
    background-color var(--accordion-duration) ease,
    border-color var(--accordion-duration) ease;
}

.hero-accordion__card.is-expanded {
  flex: 1 0 0px;
  border-color: rgba(255,122,43,0.85);
  background: rgba(255,255,255,0.11);
  box-shadow: inset 0 3px 0 #ff7a2b, inset 0 1px 0 rgba(255,255,255,0.15);
}

.hero-accordion__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hero-accordion__trigger:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: -5px;
}

.hero-accordion__title {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: max-content;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: top var(--accordion-duration) ease,
    left var(--accordion-duration) ease,
    transform var(--accordion-duration) ease;
}

.hero-accordion__card.is-expanded .hero-accordion__title {
  top: 20px;
  left: 16px;
  transform: translate(0, 0) rotate(0deg);
}

.hero-accordion__description {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  margin: 0;
  color: rgba(248,250,252,0.82);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--accordion-duration) ease,
    visibility 0s linear var(--accordion-duration);
}

.hero-accordion__card.is-expanded .hero-accordion__description {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 399px) {
  .hero-accordion {
    --accordion-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-accordion {
    --accordion-duration: 0ms;
  }
}