/* Kommon Poll — Hero styles */
.hero {
  position: relative;
  min-height: 720px;
  background: linear-gradient(180deg,#07112b 0%, #041426 70%);
  color: var(--color-accent);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero .hero-content {
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: left;
}
.headline {
  font-weight: 800;
  font-size: clamp(40px, 9vw, 120px);
  line-height: 0.95;
  margin: 0 0 10px 0;
  color: #ffffff;
  letter-spacing: -1px;
}
.subcopy {
  opacity: 0.85;
  margin-bottom: 28px;
  font-size: 1.125rem;
  color: #cfe6ff;
}
.promptwrap {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(9,18,32,0.55);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(2,8,23,0.6);
  width: min(1100px, 90%);
}
.prompt-input {
  flex: 1;
  min-height: 72px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--color-accent);
  padding: 12px;
  resize: none;
  font-size: 1rem;
  outline: none;
}
.start-btn {
  background: linear-gradient(90deg,#4f7bff,#7b5bff);
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(45,63,255,0.22);
}
.floating-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}
.floating-layer .float-card {
  position: absolute;
  width: 260px;
  max-width: 36%;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 14px;
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
  /* Force mention/card text to black on the hero (light-mode)
    Keep decorative card background but ensure readable dark text.
    Dark-mode is handled below via the `.dark` selector. */
  color: #000000;
  box-shadow: 0 14px 50px rgba(3,9,24,0.55);
  transform-origin: center;
  opacity: 0.98;
  font-size: 13px;
  line-height: 1.25;
  will-change: transform, opacity;
  pointer-events: none; /* decorative by default */
}
.floating-layer .float-card .float-card-inner {
  width:100%;
  height:100%;
  display:block;
  transform-origin:center;
}
.floating-layer .float-card strong {
  display:block;
  font-size:12px;
  opacity:0.9;
  color:#0b0b0b; /* slightly softer black for labels */
  margin-bottom:8px;
}
.floating-layer .float-card .title {
  font-weight:700;
  margin-bottom:6px;
  color:#000000;
}
.floating-layer .float-card .body {
  opacity:0.95;
  font-size:13px;
  color:#111111;
}
@keyframes floatMove {
  0% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-30px) translateX(10px) rotate(calc(var(--rot) + 2deg)); }
  100% { transform: translateY(0) rotate(var(--rot)); }
}
.floating-layer .float-card .float-card-inner { animation: floatMove var(--dur) ease-in-out infinite; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .headline { font-size: clamp(34px, 10vw, 72px); text-align:center; }
  .hero .hero-content { padding: 56px 18px; text-align:center; }
  .promptwrap { width: 100%; flex-direction: column; align-items: stretch; }
  .start-btn { width: 100%; }
  .floating-layer .float-card { display:none; }
}

/* Accessibility helper for screen-reader-only text */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Prefer reduced motion – stop animations and parallax */
@media (prefers-reduced-motion: reduce) {
  .floating-layer .float-card .float-card-inner { animation: none !important; }
  .floating-layer { transition: none !important; }
}

/* Sentiment dot used in place of avatar images for landing page pills */
.sentiment-dot {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(3,9,24,0.2);
  border: 1px solid rgba(0,0,0,0.06);
}
.sentiment-positive { background: linear-gradient(180deg,#34d399,#10b981); }
.sentiment-neutral { background: linear-gradient(180deg,#cbd5e1,#94a3b8); }
.sentiment-negative { background: linear-gradient(180deg,#fb7185,#ef4444); }
.sentiment-mixed { background: linear-gradient(180deg,#a78bfa,#7c3aed); }

/* =========================
   Testimonials two-row slider
   - row A scrolls right (we simulate by animating from -50% to 0)
   - row B scrolls left (0 to -50%)
   Duplicate content in HTML to create an infinite loop.
   ========================= */
.testimonials-slider { gap: 20px; }
.testimonials-slider .testi-row { position: relative; width: 100%; overflow: hidden; }
.testimonials-slider .testi-track { display:flex; gap:18px; align-items:stretch; width:max-content; }
.testimonials-slider .testi-track > article { flex: 0 0 360px; min-width: 280px; display:block; }
.testimonials-slider .testi-row--left .testi-track { animation: scroll-left var(--testi-duration, 36s) linear infinite; }
.testimonials-slider .testi-row--right .testi-track { animation: scroll-right var(--testi-duration, 42s) linear infinite; }

@keyframes scroll-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .testimonials-slider .testi-track { animation: none !important; }
}

/* Keep marquee motion on mobile while fitting cards to viewport */
@media (max-width: 900px) {
  .testimonials-slider { gap: 16px; }
  .testimonials-slider .testi-row { padding: 0 6px; }
  .testimonials-slider .testi-track { gap: 14px; }
  .testimonials-slider .testi-track > article {
    flex: 0 0 clamp(260px, 88vw, 340px);
    min-width: clamp(260px, 88vw, 340px);
  }
}
/* Dark-mode fallback: keep previous lighter text when site is in dark mode */
.dark .floating-layer .float-card {
  color: #dce9ff;
}
.dark .floating-layer .float-card strong {
  color: #9fc7ff;
}
.dark .floating-layer .float-card .title { color: inherit; }
.dark .floating-layer .float-card .body { color: inherit; }

@media (prefers-color-scheme: dark) {
  .floating-layer .float-card {
    color: #dce9ff;
  }
  .floating-layer .float-card strong {
    color: #9fc7ff;
  }
  .floating-layer .float-card .title { color: inherit; }
  .floating-layer .float-card .body { color: inherit; }
}