.survey-grid > div { position: relative; overflow: hidden; }
.survey-grid > div {
  border-color: rgba(43,177,167,0.25);
  background-image: linear-gradient(180deg, rgba(47,111,237,0.06), rgba(43,177,167,0.06));
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.survey-grid > div:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.survey-grid > div::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 0.75rem;
  background: radial-gradient(140px 90px at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,0.65), transparent 60%);
  opacity: 0; transition: opacity 240ms ease; pointer-events: none;
}
.survey-grid > div:hover::before { opacity: 1; }
.survey-grid > div::after {
  content: '';
  position: absolute; left: -1px; top: -1px; bottom: -1px; width: 6px;
  border-radius: 0.75rem 0 0 0.75rem;
  background: linear-gradient(180deg, var(--stripe-from, #2f6fed), var(--stripe-to, #2bb1a7));
}
.survey-grid > div:nth-child(6n+1) { --stripe-from: #2f6fed; --stripe-to: #2bb1a7; }
.survey-grid > div:nth-child(6n+2) { --stripe-from: #f59e0b; --stripe-to: #f43f5e; }
.survey-grid > div:nth-child(6n+3) { --stripe-from: #06b6d4; --stripe-to: #22c55e; }
.survey-grid > div:nth-child(6n+4) { --stripe-from: #8b5cf6; --stripe-to: #06b6d4; }
.survey-grid > div:nth-child(6n+5) { --stripe-from: #ef4444; --stripe-to: #f59e0b; }
.survey-grid > div:nth-child(6n+6) { --stripe-from: #22c55e; --stripe-to: #2bb1a7; }
/* Common custom styles (Tailwind complement) */
html { scroll-behavior: smooth; }

/* Card / shadow detail */
.card {
  box-shadow: 0 10px 24px rgba(47,111,237,0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(47,111,237,0.16);
}

/* Motion reveal initial state */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.visible { opacity: 1; transform: translateY(0); transition: all 680ms cubic-bezier(.2,.8,.2,1); }

/* Mobile nav */
#navListMobile a { display: block; padding: 8px 2px; }
/* Header nav hover underline */
header a[data-link] {
  position: relative;
  padding-bottom: 2px;
}
header a[data-link]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: #2bb1a7; /* accent */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
header a[data-link]:hover::after,
header a[data-link]:focus-visible::after {
  transform: scaleX(1);
}
/* Feature card subtle hover and focus ring */
.feature-card { position: relative; }
.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 0.75rem;
  background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(43,177,167,0.18), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.feature-card:hover::before { opacity: 1; }
.feature-card {
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.feature-card:hover { background-color: rgba(255,255,255,0.92); }

/* Survey cards: colorful accents and hover glow */
.survey-card { position: relative; overflow: hidden; }
.survey-card { 
  border-color: rgba(43,177,167,0.25);
  background-image: linear-gradient(180deg, rgba(47,111,237,0.06), rgba(43,177,167,0.06));
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.survey-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.survey-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 0.75rem;
  background: radial-gradient(140px 90px at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,0.65), transparent 60%);
  opacity: 0; transition: opacity 240ms ease; pointer-events: none;
}
.survey-card:hover::before { opacity: 1; }
.survey-card::after {
  content: '';
  position: absolute; left: -1px; top: -1px; bottom: -1px; width: 6px;
  border-radius: 0.75rem 0 0 0.75rem;
  background: linear-gradient(180deg, var(--stripe-from, #2f6fed), var(--stripe-to, #2bb1a7));
}
/* Variant stripes for visual diversity */
.survey-card:nth-child(6n+1) { --stripe-from: #2f6fed; --stripe-to: #2bb1a7; }
.survey-card:nth-child(6n+2) { --stripe-from: #f59e0b; --stripe-to: #f43f5e; }
.survey-card:nth-child(6n+3) { --stripe-from: #06b6d4; --stripe-to: #22c55e; }
.survey-card:nth-child(6n+4) { --stripe-from: #8b5cf6; --stripe-to: #06b6d4; }
.survey-card:nth-child(6n+5) { --stripe-from: #ef4444; --stripe-to: #f59e0b; }
.survey-card:nth-child(6n+6) { --stripe-from: #22c55e; --stripe-to: #2bb1a7; }