.feedback-studio-card a {
  display: block;
  text-decoration: none;
  background-color: #060d1a;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
}

.feedback-studio-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 2rem 1.4rem;
  background: #060d1a;
  border-radius: 0;
  /* mirrors .workbook-card img (max-height: 25vh) + .workbook-card a (padding: 1rem top+bottom) */
  min-height: max(220px, calc(25vh + 2rem));
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow:
    inset 0 0 0 1px rgba(122,215,255,0.18),
    0 0 24px rgba(122,215,255,0.08);
}

/* mouse-following spotlight */
.feedback-studio-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(122,215,255,0.22) 0%,
    rgba(155,255,207,0.10) 40%,
    transparent 70%
  );
  pointer-events: none;
  transition: background 0.06s ease;
}

/* second ambient layer */
.feedback-studio-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 70% at 20% 110%, rgba(155,100,255,0.18), transparent 55%),
    radial-gradient(ellipse 90% 60% at 80% -10%, rgba(0,230,180,0.12), transparent 55%);
  pointer-events: none;
  animation: fs-breathe 5s ease-in-out infinite alternate;
}

@keyframes fs-breathe {
  from { opacity: 0.6; }
  to   { opacity: 1;   }
}

.fs-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-p {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: fs-float linear infinite;
}
.fs-p:nth-child(1)  { width:3px;height:3px; left:15%; background:#7ad7ff; animation-duration:6s;  animation-delay:0s;   }
.fs-p:nth-child(2)  { width:2px;height:2px; left:30%; background:#9bffcf; animation-duration:8s;  animation-delay:1.2s; }
.fs-p:nth-child(3)  { width:4px;height:4px; left:50%; background:#b57aff; animation-duration:7s;  animation-delay:0.4s; }
.fs-p:nth-child(4)  { width:2px;height:2px; left:68%; background:#7ad7ff; animation-duration:9s;  animation-delay:2s;   }
.fs-p:nth-child(5)  { width:3px;height:3px; left:82%; background:#9bffcf; animation-duration:6.5s;animation-delay:0.8s; }
.fs-p:nth-child(6)  { width:2px;height:2px; left:22%; background:#ffdd88; animation-duration:7.5s;animation-delay:3s;   }
.fs-p:nth-child(7)  { width:3px;height:3px; left:44%; background:#7ad7ff; animation-duration:5.5s;animation-delay:1.6s; }
.fs-p:nth-child(8)  { width:2px;height:2px; left:72%; background:#b57aff; animation-duration:8.5s;animation-delay:0.2s; }
.fs-p:nth-child(9)  { width:4px;height:4px; left:88%; background:#9bffcf; animation-duration:6.8s;animation-delay:2.4s; }
.fs-p:nth-child(10) { width:2px;height:2px; left:58%; background:#ffdd88; animation-duration:7.2s;animation-delay:1s;   }

@keyframes fs-float {
  0%   { transform: translateY(100%) scale(0.5); opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-120%) scale(1.2); opacity: 0; }
}

/* content sits above everything */
.feedback-studio-badge,
.feedback-studio-title,
.feedback-studio-cta {
  position: relative;
  z-index: 10;
}

.feedback-studio-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8eeff;
  background: rgba(6,13,26,0.72);
  border: 1px solid rgba(122,215,255,0.55);
  border-radius: 99px;
  padding: 0.26em 1em;
  text-shadow: 0 0 10px rgba(122,215,255,1), 0 1px 3px rgba(0,0,0,0.9);
  box-shadow: 0 0 14px rgba(122,215,255,0.35), inset 0 0 8px rgba(122,215,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.feedback-studio-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow:
    0 0 22px rgba(122,215,255,0.9),
    0 0 8px  rgba(122,215,255,0.7),
    0 2px 6px rgba(0,0,0,0.95);
  background: rgba(6,13,26,0.55);
  border-radius: 8px;
  padding: 0.25em 0.9em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.feedback-studio-cta {
  font-size: 0.88rem;
  font-weight: 800;
  color: #020810;
  background: linear-gradient(120deg, #7ad7ff, #9bffcf, #b57aff);
  background-size: 200% 100%;
  border-radius: 8px;
  padding: 0.42em 1.4em;
  margin-top: 0.4rem;
  box-shadow:
    0 0 22px rgba(122,215,255,0.65),
    0 0 44px rgba(155,255,207,0.25),
    0 2px 8px rgba(0,0,0,0.8);
  animation: fs-shimmer 3s linear infinite;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

@keyframes fs-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* neon border pulse on hover */
.feedback-studio-card a:hover .feedback-studio-preview {
  box-shadow:
    inset 0 0 0 1px rgba(122,215,255,0.5),
    0 0 32px rgba(122,215,255,0.25),
    0 0 60px rgba(155,100,255,0.15);
}


.fsc-frag {
  position: absolute;
  font-family: 'Fira Mono', 'Consolas', 'Courier New', monospace;
  font-size: 0.6rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  color: rgba(180,210,255,0.65);
  z-index: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* 6 drift directions */
@keyframes fsc-drift-a {
  0%,100% { translate: 0px 0px; }
  50%     { translate: -14px -22px; }
}
@keyframes fsc-drift-b {
  0%,100% { translate: 0px 0px; }
  50%     { translate: 18px -16px; }
}
@keyframes fsc-drift-c {
  0%,100% { translate: 0px 0px; }
  50%     { translate: 22px 10px; }
}
@keyframes fsc-drift-d {
  0%,100% { translate: 0px 0px; }
  50%     { translate: -20px 18px; }
}
@keyframes fsc-drift-e {
  0%,100% { translate: 0px 0px; }
  50%     { translate: 10px -26px; }
}
@keyframes fsc-drift-f {
  0%,100% { translate: 0px 0px; }
  50%     { translate: -10px 20px; }
}

.fsc-kw  { color: rgba(181,122,255,0.90); }
.fsc-fn  { color: rgba(100,220,255,0.90); }
.fsc-str { color: rgba(100,255,150,0.85); }
.fsc-num { color: rgba(255,215,80,0.85);  }
.fsc-cm  { color: rgba(150,180,220,0.60); font-style: italic; }
.fsc-op  { color: rgba(100,220,255,0.70); }