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

body {
  background: linear-gradient(270deg, #af2ec0bd, #7024a3bd, #3c22afc2);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}

@keyframes pixelFlicker {
  0%   { opacity: 0.25; }
  50%  { opacity: 0.35; }
  100% { opacity: 0.25; }
}


@keyframes grainMove {
  0%   { background-position: 0 0; }
  25%  { background-position: 20px 30px; }
  50%  { background-position: 40px 60px; }
  75%  { background-position: 60px 40px; }
  100% { background-position: 0 0; }
}

/* === Global graphite background (match chat offer card) ================== */

#site-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Put the new gradient behind orbs + grain */
#site-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.12), transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.12), transparent 58%),
    linear-gradient(145deg, #8d1e3a, #510f58 35%, #2a3241 100%);
  background-blend-mode: soft-light, soft-light, normal;
  filter: blur(0.5px);
  opacity: 1;
  z-index: 0;
  animation: siteGlowDrift 32s ease-in-out infinite alternate;
}

/* === Fix select dropdown appearance (dark theme) ===================== */

select.footer-input,
select {
  background-color: rgba(15, 15, 20, 0.85) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Options inside the dropdown */
select option {
  background-color: #111315 !important;
  color: #f1f1f1 !important;
  padding: 8px;
}

/* Hover / focus */
select option:hover,
select option:focus,
select option:checked {
  background-color: #1f2937 !important;  /* graphite blue-gray */
  color: #fff !important;
}

select.footer-input {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  background:
    linear-gradient(145deg, rgba(96, 165, 250, 0.08), rgba(244, 114, 182, 0.08)),
    rgba(20, 20, 30, 0.85);
  border-radius: 10px;
}

/* Make sure all existing layers (orbs, grain, orb-layer) sit above it */
#site-bg > * {
  position: relative;
  z-index: 1;
}

/* Very subtle slow movement so it doesn’t feel static */
@keyframes siteGlowDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  50% {
    transform: translate3d(-6px, 4px, 0) scale(1.02);
    background-position: 10% 5%, 90% 95%, 55% 52%;
  }
  100% {
    transform: translate3d(4px, -4px, 0) scale(1.01);
    background-position: 5% 10%, 95% 90%, 52% 48%;
  }
}

/* === Floating Orbs (blur restored, positioned correctly) === */
.orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  top: 0;
  left: 0;
  /* Each orb’s exact spot comes from individual rules below */
  overflow: visible;
  will-change: transform;
}

/* The blurred glowing part */
.orb-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: float 20s ease-in-out infinite alternate;
}

/* individual colors + start positions + delays */
.orb1 {
  top: 5%;
  left: 10%;
}
.orb1 .orb-inner {
  background: radial-gradient(circle at center, #ff7cf8, transparent 70%);
  animation-delay: 1s;
}

.orb2 {
  top: 40%;
  left: 60%;
}
.orb2 .orb-inner {
  background: radial-gradient(circle at center, #7cf8ff, transparent 70%);
  animation-delay: 6s;
}

.orb3 {
  top: 70%;
  left: 25%;
}
.orb3 .orb-inner {
  background: radial-gradient(circle at center, #a17cff, transparent 70%);
  animation-delay: 12s;
}

@keyframes float {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.05); }
  100% { transform: translate(-30px,20px) scale(0.95); }
}

/* === HEADER FIX — CLEAN, SINGLE DEFINITION === */
header {
  position: relative;
  z-index: 50; /* ensure it's above grain and orbs */
}

/* Glass effect for header */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(30px) saturate(180%);
  background: rgba(20, 20, 25, 0.75);
  pointer-events: none;
  z-index: -1; /* sits behind text inside header */
  /* remove border if you don't want that white line */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

#petauto-frame {
  position: relative;
  z-index: 10; /* chatbot above background, below header */
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.8s ease-out both;
}

@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-slide-up {
  animation: fadeSlideUp 0.8s ease-out both;
}

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

/* Reusable class for animated gradient text */
.animate-gradient-text {
  background-size: 200% auto;
  animation: gradientFlow 4s ease-in-out infinite;
}

  /* Responsive, JS-free height for the video area */
  #qs-video-wrap { height: 360px; }            /* base */
  @media (min-width: 640px) { #qs-video-wrap { height: 600px; } }  /* sm */
  @media (min-width: 1050px) { #qs-video-wrap { height: 600px; } }  /* md */
  @media (min-width: 1279px){ #qs-video-wrap { height: 560px; } }  /* lg -> 740 - 56 header */
  /* Keep the whole pane from ever going enormous */
  #qs-pane { max-height: 80vh; }

  /* === Fixed full-viewport ORB layer === */
#orb-layer {
  position: absolute;
  inset: 0;
  z-index: 1;          /* above grain inside #site-bg */
  pointer-events: none;
  overflow: hidden;
}

#orb-layer .orb {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 9999px;
  filter: blur(120px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
  contain: layout paint;
}

/* Three subtle hues — reuse freely */
.orb[data-hue="pink"]  { background: radial-gradient(circle at 30% 30%, #ff4d9d, #9025ff 60%, transparent 70%); }
.orb[data-hue="cyan"]  { background: radial-gradient(circle at 30% 30%, #3de1ff, #2f6bff 60%, transparent 70%); }
.orb[data-hue="amber"] { background: radial-gradient(circle at 30% 30%, #ffc23d, #ff5b2f 60%, transparent 70%); }

@media (max-width: 640px) {
  #orb-layer .orb { width: 200px; height: 200px; filter: blur(90px); }
}

@media (prefers-reduced-motion: reduce) {
  #orb-layer { display: none; }
}

/* --- Footer helpers --- */
.footer-link { position: relative; display:inline-block; transition: color .25s ease; }
.footer-link:hover { color: rgb(244 114 182 / 1); } /* pink-400 */

.footer-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.footer-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 24px rgba(168,85,247,.35);
}

.footer-icon {
  display:inline-flex; padding:.55rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  color: rgba(255,255,255,.75);
}
.footer-icon:hover {
  transform: translateY(-2px);
  color: white; border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 20px rgba(168,85,247,.35);
}

.footer-input {
  appearance:none; outline:none;
  border-radius:9999px; border:1px solid rgba(255,255,255,.18);
  padding:.7rem 1rem; background: rgba(0,0,0,.55);
  color:white; width:100%; backdrop-filter: blur(8px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.footer-input::placeholder { color: rgba(255,255,255,.45); }
.footer-input:focus {
  border-color: rgba(168,85,247,.65);
  box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}

.footer-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border:none; border-radius:9999px;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  color:white; font-weight:600; padding:.7rem 1rem; cursor:pointer;
  box-shadow: 0 0 20px rgba(168,85,247,.35);
  transition: transform .15s ease, filter .25s ease;
}
.footer-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width: 420px) {
  #site-footer input.footer-input { padding: .6rem .85rem; }
  #site-footer button.footer-btn { padding: .6rem .85rem; }
}

/* === Background layer (fixed) === */
#site-bg { position: fixed; inset: 0; }

/* Put the film grain behind the orbs, above the page bg */
#site-bg .grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
    background-image: url("../images/grain.png");
  background-repeat: repeat;
  background-size: 200px 200px;                   /* smaller = finer grain; larger = chunkier */
  opacity: 0.15;                                   /* tweak 0.06–0.14 to taste */
  /* IMPORTANT: no blend mode — overlay on pure black makes it vanish */
  mix-blend-mode: normal;
  pointer-events: none;
}

/* Ensure the orbs render above the grain inside the same layer */
#orb-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* --- Shared Hover Enhancements for Features Page --- */
.hover-glow {
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.hover-glow:hover {
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 25px rgba(168,85,247,.4);
  filter:brightness(1.05);
}

/* gradient button universal hover */
a[class*="bg-gradient-to-r"]:hover {
  filter:brightness(1.1);
  box-shadow:0 0 25px rgba(168,85,247,.45);
}

/* card hover lift */
figure:hover {
  transform:translateY(-4px);
  box-shadow:0 0 25px rgba(168,85,247,.3);
  transition:transform .3s ease, box-shadow .3s ease;
}

/* ==== How it works — visual helpers (on-brand pink/purple/indigo) ==== */
.step-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(168,85,247,.35);
  border-color: rgba(255,255,255,.22);
}

.step-card .accent-ring {
  display: inline-flex;
  border-radius: 9999px;
  padding: 2px;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  box-shadow: 0 0 18px rgba(168,85,247,.35);
}
.step-card .icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
}

.step-card .title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}
.step-card .desc {
  color: rgba(255,255,255,.75);
  max-width: 320px;
  margin: 0 auto 0.75rem;
}
.step-card .points {
  color: rgba(255,255,255,.7);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
  list-style-position: inside; /* ✅ keeps bullets next to text */
  text-align: left;            /* ✅ aligns bullets cleanly within centered card */
  display: inline-block;       /* ✅ keeps the list nicely centered */
}
.step-card .points li {
  list-style-type: disc;
  margin: 0.25rem 0;
  padding-left: 0.25rem;
}

/* uniform buttons */
.step-card .actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1rem;
  box-shadow: 0 0 15px rgba(168,85,247,.3);
  transition: transform .15s ease, filter .25s ease, box-shadow .25s ease;
}
.cta-primary:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.08);
  box-shadow: 0 0 22px rgba(168,85,247,.45);
}
.cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.4);
  color: #fff;
  padding: 0.55rem 1rem;
  transition: transform .15s ease, border-color .25s ease, box-shadow .25s ease;
}
.cta-ghost:hover {
  transform: translateY(-1.5px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 15px rgba(168,85,247,.25);
}

/* ==== Analytics helpers ==== */
.kpi-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:16px 14px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi-card:hover{ transform:translateY(-3px); box-shadow:0 0 22px rgba(168,85,247,.32); border-color:rgba(255,255,255,.22); }
.kpi-label{ color:rgba(255,255,255,.65); font-size:.8rem; letter-spacing:.04em; }
.kpi-value{ font-size:1.35rem; font-weight:800; margin-top:.2rem; }
.kpi-spark{
  height:6px; border-radius:9999px; margin-top:.6rem;
  background:linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  background-size:200% auto; animation: gradientFlow 6s ease infinite;
  box-shadow:0 0 14px rgba(168,85,247,.35);
}
.kpi-spark--a{ animation-duration:5.6s; }
.kpi-spark--b{ animation-duration:6.2s; }
.kpi-spark--c{ animation-duration:6.8s; }
.kpi-spark--d{ animation-duration:7.4s; }

.chart-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:16px;
  box-shadow:0 0 18px rgba(168,85,247,.22);
}
.chart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.chart-title{ font-weight:700; }
.chart-legend{ display:flex; align-items:center; gap:.25rem; color:rgba(255,255,255,.7); font-size:.8rem; }
.legend-dot{ width:10px; height:10px; border-radius:9999px; display:inline-block; margin-right:.35rem; }
.legend-dot--pink{ background:linear-gradient(90deg,#ec4899,#8b5cf6); }
.legend-dot--indigo{ background:linear-gradient(90deg,#6366f1,#8b5cf6); }

.chart-grid{
  display:grid; grid-template-columns: repeat(6, 1fr);
  align-items:end; gap:12px; height:180px; margin-top:10px; padding:10px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%);
  border-radius:12px;
}
.bar-group{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; align-items:end; }
.bar{
  width:100%; border-radius:8px 8px 0 0;
  animation: rise 800ms ease forwards; transform-origin: bottom;
  filter:brightness(1.02);
}
.bar--rev{ background:linear-gradient(180deg,rgba(236,72,153,.95),rgba(139,92,246,.7)); box-shadow:0 8px 18px rgba(236,72,153,.25); }
.bar--sess{ background:linear-gradient(180deg,rgba(99,102,241,.95),rgba(139,92,246,.7)); box-shadow:0 8px 18px rgba(99,102,241,.25); }
@keyframes rise{ from{ transform: scaleY(.1); opacity:.6; } to{ transform: scaleY(1); opacity:1; } }

.chart-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.axis-label{ color:rgba(255,255,255,.6); font-size:.8rem; }

.insights-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:16px;
}
.insight-row{
  display:flex; gap:.6rem; align-items:flex-start;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:12px; padding:10px 12px; margin-bottom:.6rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.insight-row:hover{ transform:translateY(-2px); box-shadow:0 0 18px rgba(168,85,247,.28); border-color:rgba(255,255,255,.16); }
.insight-title{ font-weight:700; }
.insight-desc{ color:rgba(255,255,255,.7); font-size:.9rem; margin-top:.15rem; }

/* reuse smaller buttons for consistency */
#analytics .cta-primary, #analytics .cta-ghost{
  font-size: .85rem; padding: .5rem .9rem;
}

/* Chart card as a vertical flex container */
/* Chart card as a vertical flex container */
.chart-card{
  display:flex;
  flex-direction:column;
}

/* Let the chart fill the available space but NEVER stretch non-uniformly */
.linechart{
  height: 273px;           /* fixed visual height so it won’t overgrow */
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%);
  flex: 1 1 auto;          /* still allows the card to match right-panel height */
}
.linechart svg{
  width: 100%;
  height: 100%;            /* with preserveAspectRatio=slice, scales uniformly */
  display: block;
}

/* ========================================================= */
/*                 AGENT ROLE CARDS — FINAL PASS             */
/* ========================================================= */

.agent-card {
  position: relative;
  padding: 2.4rem 1.8rem 2.6rem;
  border-radius: 1.4rem;
  min-height: 430px;

  /* NEW glass + gradient base */
  background: linear-gradient(
      145deg,
      rgba(255, 136, 239, 0.1) 0%,
      rgba(173, 0, 255, 0.08) 35%,
      rgba(0, 119, 255, 0.07) 70%,
      rgba(255, 139, 139, 0.07) 100%
  );
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  /* NEW elegant border + soft glow */
  border: 1px solid rgba(255, 124, 238, 0.18);
  box-shadow:
      0 8px 24px rgba(0,0,0,0.45),
      inset 0 0 22px rgba(255,255,255,0.08),
      0 0 35px rgba(168, 85, 247, 0.18);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.agent-card:hover {
  transform: translateY(-8px);

  /* brighter underlying glow */
  background: linear-gradient(
      145deg,
      rgba(255, 130, 255, 0.18) 0%,
      rgba(255, 0, 180, 0.16) 35%,
      rgba(91, 33, 182, 0.15) 60%,
      rgba(255, 255, 255, 0.15) 100%
  );

  border-color: rgba(243, 104, 213, 0.28);

  box-shadow:
      0 14px 45px rgba(0,0,0,0.55),
      inset 0 0 35px rgba(255,255,255,0.14),
      0 0 45px rgba(168, 85, 247, 0.45);
}

/* Image shell */
.agent-card__image-wrap {
  width: 150px;
  height: 150px;
  margin: 0 auto 1.6rem;
  border-radius: 999px;
  padding: 5px;

  background: conic-gradient(from 160deg,#ec4899,#8b5cf6,#6366f1,#ec4899);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 38px rgba(168, 85, 247, 0.9),
    0 0 20px rgba(99, 102, 241, 0.55);
}

.agent-card__image {
  width: 136px;
  height: 136px;
  border-radius: 999px;
  object-fit: contain;
  background: radial-gradient(circle at 30% 0, #1e1e1e, #0c0c0c);
}

/* Text block (title + subtitle) */
.agent-card__text {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* reduced spacing */
  margin-bottom: 0.5rem;    /* was 1.6rem */
}

.agent-card__title {
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.55rem;
  color: #fff;
}

.agent-card__subtitle {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(235, 235, 235, 0.82);
  max-width: 270px;
  margin: 0 auto;
}

/* Actions (buttons) — aligned across all cards */
.agent-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
}

/* Primary CTA */
.agent-cta-primary {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;

  background: linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  color: #fff;

  box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);
  transition: all 0.25s ease;
}

.agent-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.7);
}

/* Secondary CTA */
.agent-cta-secondary {
  display: inline-block;
  padding: 0.45rem 1.3rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);

  color: rgba(255,255,255,0.85);
  transition: all 0.25s ease;
}

.agent-cta-secondary:hover {
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
}


/* Pin footer to bottom — no grey gap */
.chart-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto;         /* pushes footer to bottom of chart-card */
  padding-top:.5rem;
}

/* Line / fill / head styling */
.lc-line{
  fill: none;
  stroke: url(#lcLine);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;  /* ✅ keep stroke width crisp on resize */
  filter: drop-shadow(0 0 10px rgba(168,85,247,.35));
}
.lc-area{ fill: url(#lcFill); }

.lc-head{
  fill: #ffffff;
  filter:
    drop-shadow(0 0 6px rgba(236,72,153,.9))
    drop-shadow(0 0 14px rgba(139,92,246,.6));
  animation: lcPulse 1s ease-in-out infinite;
}
@keyframes lcPulse{
  0% { r:4; }
  50%{ r:6; }
  100%{ r:4; }
}

/* Axes styling */
.lc-axis{ stroke: rgba(255,255,255,.22); stroke-width:1; shape-rendering:crispEdges; }
.lc-tick{ stroke: rgba(255,255,255,.35); stroke-width:1; shape-rendering:crispEdges; }
.lc-tick-label{ fill: rgba(255,255,255,.7); font-size: 10px; font-family: system-ui, ui-sans-serif, sans-serif; }
.lc-axis-title{ fill: rgba(255,255,255,.8); font-size: 11px; letter-spacing:.08em; font-weight:700; }

/* === Color-coded guides (match legend dots) === */
/* legend-dot--pink  -> #ec4899 (Revenue) */
/* legend-dot--indigo-> #6366f1 (Sessions) */
.lc-guides .guide-rev{
  stroke: #ec4899;
  stroke-width: 2;
  opacity: .7;
  shape-rendering: crispEdges;
}
.lc-guides .guide-sess{
  stroke: #6366f1;
  stroke-width: 2;
  opacity: .7;
  shape-rendering: crispEdges;
}

/* === Analytics chart polish === */
.lc-line {
  stroke: url(#lcLine);
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(139,92,246,.35));
}

.lc-area {
  fill: url(#lcFill);
}

.lc-head {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
}

/* === Comparison Section — QARIN Glow Upgrade === */
.comparison-grid > div {
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-radius: 1rem;
  overflow: hidden;
}

.comparison-grid > div::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(236,72,153,.6), rgba(139,92,246,.6), rgba(99,102,241,.6));
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity .3s ease, background-position 6s ease-in-out;
  z-index: 0;
}

.comparison-grid > div:hover::before {
  opacity: 1;
  animation: comparisonFlow 6s linear infinite;
}

.comparison-grid > div:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 0 30px rgba(168,85,247,.3);
}

.comparison-grid h4 {
  position: relative;
  z-index: 1;
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(90deg,#ec4899,#a855f7,#6366f1);
  -webkit-background-clip: text;
  color: transparent;
}

.comparison-grid ul {
  position: relative;
  z-index: 1;
  text-align: left;
}

.comparison-grid li::before {
  content: "✦";
  color: rgba(236,72,153,.9);
  margin-right: .4rem;
  text-shadow: 0 0 8px rgba(168,85,247,.5);
}

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

/* === iPhone showcase: gradient chips + faster motion === */
#floating-badges { position:absolute; inset:0; z-index:50; pointer-events:none; }
.iphone-showcase { isolation:isolate; }

/* === Floating chips: solid gradient background (on-brand) === */
.floating-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.72rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  will-change: transform;
  /* solid gradient fill */
  background: linear-gradient(90deg, #ec4899, #a855f7, #6366f1);
  border: none;
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.35);
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-chip:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.55);
  transform: translate(-50%, -50%) scale(1.05);
}

/* === Floating chips: glassy gradient style === */
.floating-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  will-change: transform;

  /* translucent gradient background */
  background: linear-gradient(
    90deg,
    rgba(236, 72, 153, 0.35),
    rgba(139, 92, 246, 0.35),
    rgba(99, 102, 241, 0.35)
  );
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.35);

  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-chip:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.55);
  transform: translate(-50%, -50%) scale(1.06);
}

.floating-chip i {
  width: 16px;
  height: 16px;
  opacity: 0.95;
}

/* Faster, slightly wider drift */
@keyframes floatDrift{
  0%   { transform: translate(-50%,-50%) translate(var(--dx, 10px),  var(--dy, 6px)); }
  100% { transform: translate(-50%,-50%) translate(calc(var(--dx, -10px) * -1), calc(var(--dy, -6px) * -1)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .floating-chip{ animation:none; }
}

/* Chips anchor & clip to the image frame */
.iphone-frame { position: relative; display: inline-block; overflow: hidden; }
.iphone-frame #floating-badges { position: absolute; inset: 0; z-index: 50; pointer-events: none; }

/* Extra safety: match the rounded image and clip children */
.iphone-frame { clip-path: inset(0 round 2rem); } /* matches rounded-[2rem] */

/* ==== Contact page: slight rounding + GRADIENT border on fields ==== */
#contact-form .footer-input {
  /* size/shape */
  border-radius: 10px !important;        /* same curve as inner button */
  padding: .7rem 1rem !important;

  /* make the gradient border (do NOT use border-color) */
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) padding-box,
    linear-gradient(90deg, #ec4899, #8b5cf6, #6366f1) border-box !important;

  /* text */
  color: #fff;
  backdrop-filter: blur(8px);
}

#contact-form .footer-input::placeholder { color: rgba(255,255,255,.45); }

#contact-form .footer-input:focus {
  outline: none;
  filter: brightness(1.05);
  box-shadow: 0 0 18px rgba(168,85,247,.25);
}

/* Textarea specifics: fixed height, no drag, same 10px radius */
#contact-form textarea.footer-input {
  resize: none !important;
  height: 10rem !important; /* adjust if you want taller/shorter */
  border-radius: 10px !important;
}

/* Select rendering across browsers */
#contact-form select.footer-input {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px !important;
}

/* ==== Gradient borders (match footer-input theme) ==== */
.gradient-border {
  border: 1.5px solid transparent !important;
  border-radius: 16px;
  background:
    linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)) padding-box,
    linear-gradient(90deg, #ec4899, #8b5cf6, #6366f1) border-box !important;
  backdrop-filter: blur(10px);
}

.gradient-border-sm {
  border: 1.5px solid transparent !important;
  border-radius: 12px;
  background:
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)) padding-box,
    linear-gradient(90deg, #ec4899, #8b5cf6, #6366f1) border-box !important;
  backdrop-filter: blur(10px);
}

/* === Mini Cart: Bigger, premium glass panel (overrides) ================== */

/* Make sure it sits above header bits */
#mini-cart { z-index: 60; }

/* Bigger, responsive width (overrides w-[360px]) */
#mini-cart {
  width: clamp(220px, 40vw, 360px);
  /* keep position from your HTML (absolute right-0 mt-2) */
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* Beefier header/footer spacing + size */
#mini-cart .p-4 { padding: 18px 20px !important; } /* nudge all .p-4 inside */
#mini-cart .mini-cart__header,
#mini-cart .mini-cart__footer { padding: 18px 20px !important; }

#mini-cart .mini-cart__title { font-size: 14px; }
#mini-cart .mini-cart__link  { font-size: 12px; }

/* Taller item list (override max-h-64 from HTML classes) */
#mini-cart #mini-cart-items{
  max-height: clamp(20rem, 44vh, 30rem) !important; /* was 16rem */
}

/* Larger item rows */
#mini-cart .mini-cart-item{
  grid-template-columns: 68px 1fr auto;  /* bigger thumb column */
  gap: 14px;
  padding: 14px 18px;
}
#mini-cart .mini-thumb{
  width: 68px; height: 68px; border-radius: 12px;
}
#mini-cart .mini-title{ font-size: 14px; }
#mini-cart .mini-meta { font-size: 12px; }
#mini-cart .mini-price{ font-size: 14px; min-width: 84px; }

/* Larger subtotal + buttons */
#mini-cart #mini-cart-subtotal{ font-size: 20px; }
#mini-cart .btn-outline,
#mini-cart .btn-gradient{
  padding: 10px 14px; font-size: 13px;
}

/* Glass: give it a firmer base while staying frosted */
#mini-cart{
  background:
    linear-gradient(180deg, rgba(44, 44, 82, 0.13), rgba(107, 68, 107, 0.137)),
    radial-gradient(120% 120% at 100% -10%, rgba(140,22,161,0.12) 0%, transparent 100%);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Stronger reveal animation at larger size */
@keyframes miniCartPopBig {
  from { transform: translateY(10px) scale(.985); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
#mini-cart:not(.invisible){ animation: miniCartPopBig .2s ease-out; }

/* Nice scrollbar for bigger panel */
#mini-cart #mini-cart-items::-webkit-scrollbar{ width: 12px; }
#mini-cart #mini-cart-items::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-radius: 8px;
}

/* === Cart page additions (lightweight, theme-aligned) === */
#cart-page-items .cart-row { display:grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding: 1rem; }
#cart-page-items .cart-row img { width:84px; height:84px; border-radius:14px; object-fit:cover; }
#cart-empty .footer-btn { margin-top:.5rem; }

#cart-upsells [data-upsell-grid] > div{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border-radius:14px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#cart-upsells [data-upsell-grid] > div:hover{
  transform: translateY(-3px);
  box-shadow:0 0 22px rgba(168,85,247,.32);
  border-color:rgba(255,255,255,.22);
}

@media (max-width: 640px){
  #cart-page-items .cart-row { grid-template-columns: 72px 1fr auto; }
  #cart-page-items .cart-row img { width:72px; height:72px; }
}

/* === Equal-height panel system ========================================== */
.equal-panel{
  /* same min height on both sides; adjusts with viewport */
  min-height: clamp(560px, 72vh, 860px);
  display:flex; flex-direction:column;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.equal-scroll{
  flex: 1 1 auto; min-height:0; /* enable internal scrolling if content exceeds */
  padding: 14px 16px;
  overflow: auto;
}
.panel-head, .panel-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.panel-foot{ border-top: 1px solid rgba(255,255,255,.10); border-bottom: 0; }
.panel-title{ font-size:1.05rem; font-weight:700; }
.panel-sub{ color: rgba(255,255,255,.65); font-size:.75rem; }

/* === Glass tiers (soft → strong) ======================================== */
.glass-soft{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
}
.glass{
  background:
    linear-gradient(180deg, rgba(44,44,82,.13), rgba(107,68,107,.12)),
    radial-gradient(120% 120% at 100% -10%, rgba(140,22,161,.12) 0%, transparent 100%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.glass-strong{
  background:
    linear-gradient(180deg, rgba(44,44,82,.18), rgba(107,68,107,.18)),
    radial-gradient(120% 120% at 100% -10%, rgba(140,22,161,.16) 0%, transparent 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  box-shadow: 0 28px 90px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
}

/* === Left stack internals =============================================== */
.panel-section{
  margin: 12px 0; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
}
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.35rem; }
.section-title{ font-size:.95rem; font-weight:700; }
.section-link{ font-size:.8rem; color:#f0abfc; } /* pink-300 */
.section-link:hover{ color:#f9a8d4; }           /* pink-300/hover */

.pill-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

/* Items layout */
#cart-page-items .cart-row{
  display:grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding: 1rem;
}
#cart-page-items .cart-row img{
  width:84px; height:84px; border-radius:14px; object-fit:cover;
}
@media (max-width:640px){
  #cart-page-items .cart-row{ grid-template-columns:72px 1fr auto; }
  #cart-page-items .cart-row img{ width:72px; height:72px; }
}

/* Recommendations: uniform tiny cards, light glass by default  */
.rec-card{
  display:grid; grid-template-columns: 44px 1fr auto; align-items:center; gap:.75rem;
  border-radius:14px; padding:.75rem .85rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rec-card:hover{
  transform: translateY(-3px);
  box-shadow:0 0 22px rgba(168,85,247,.28);
  border-color: rgba(255,255,255,.22);
}
.rec-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.rec-title{ font-weight:700; font-size:.95rem; }
.rec-desc{ color:rgba(255,255,255,.72); font-size:.82rem; margin-top:.1rem; }
.rec-btn{
  border:none; border-radius:9999px; padding:.45rem .8rem; font-weight:700; font-size:.8rem; cursor:pointer;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1); color:#fff;
  box-shadow: 0 0 16px rgba(168,85,247,.3);
  transition: transform .15s ease, filter .25s ease;
}
.rec-btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }

/* Right panel details */
.info-grid{
  display:grid; grid-template-columns: 1fr auto; gap:.6rem .8rem;
  font-size:.92rem;
}
.info-grid .k{ color:rgba(255,255,255,.7); }
.info-grid .v{ font-weight:600; }

.separator{ height:1px; background:rgba(255,255,255,.1); margin:12px 0; }

.assure{
  margin-top:14px; display:grid; gap:.4rem; font-size:.78rem; color:rgba(255,255,255,.75);
}
.assure li{ display:flex; align-items:center; gap:.45rem; }

.help-pill{
  display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:rgba(255,255,255,.8);
}

/* Nice scrollbars for equal-scroll zones */
.equal-scroll::-webkit-scrollbar{ width: 10px; }
.equal-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-radius: 8px;
}

/* === Compact, equal heights (short) ===================================== */
:root{
  /* Tweak the middle (viewport %) if you want even shorter/taller */
  --cart-panel-h: clamp(380px, 48vh, 520px);
}

.equal-panel{
  height: var(--cart-panel-h) !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scroll only the middle content; keep headers/footers fixed */
.equal-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* even vertical rhythm */
}

/* Panels/sections: remove “mystery” space under last block */
.panel-section{ margin: 0; }
.equal-scroll > .panel-section:last-child { margin-bottom: 0; }

/* Cart rows look tight and consistent */
#cart-page-items{ display: flex; flex-direction: column; }
#cart-page-items .cart-row{
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
#cart-page-items .cart-row + .cart-row{ margin-top: 10px; }
#cart-page-items .cart-row img{
  width:84px; height:84px; border-radius:14px; object-fit:cover;
}

/* Recommendations: compact, no extra bottom space */
#cart-recos{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px){ #cart-recos{ grid-template-columns: 1fr; } }

.rec-card{ padding: .7rem .8rem; }

/* Right-panel footer stays fixed but doesn’t stretch the height */
.panel-foot{ padding: 10px 14px; }

/* Optional: shave a bit more height on very large desktops */
@media (min-width: 1536px){
  :root{ --cart-panel-h: clamp(380px, 44vh, 500px); }
}

/* — Keep existing equal-panel height; do not alter your --cart-panel-h — */

/* Make the interior a flex column so one block can fill remaining space */
.equal-panel .equal-scroll{
  display: flex;
  flex-direction: column;
  gap: 12px;                /* keeps your even rhythm */
}

/* Let the Cart block grow to use leftover space (bigger cart area)
   without changing overall panel height */
.cart-block{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;            /* enables inner scroll */
}

/* Cart list scrolls inside the growing Cart block */
.cart-block #cart-page-items{
  flex: 1 1 auto;
  min-height: 180px;        /* ensures presence even with few items */
  overflow: auto;
}

/* Kill any phantom bottom gap under the last section */
.equal-scroll > .panel-section:last-child{ margin-bottom: 0; }

/* Promo input/button: prevent truncation without changing panel size */
#promo-input{
  min-width: 14rem;         /* enough for “Promo code” */
}
@media (min-width: 768px){
  #promo-input{ min-width: 16rem; }
}
#promo-apply{
  white-space: nowrap;
  min-width: 100px;
}

/* Optional: if the page still feels too wide, constrain the main container */
@media (min-width: 1280px){
  .max-w-\[1280px\]{ max-width: 72rem !important; } /* guard, in case that class slipped in */
}

/* Cart fills the column, fixes the empty space beneath add-ons */
.equal-panel .equal-scroll{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-block{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* grows to fill the column */
  min-height: 0;
}
.cart-block #cart-page-items{
  flex: 1 1 auto;   /* list scrolls inside */
  min-height: 180px;
  overflow: auto;
}

/* Widen the checkout on desktop without touching heights */
@media (min-width: 1024px){
  .checkout-panel{ min-width: 420px; }  /* lg */
}
@media (min-width: 1280px){
  .checkout-panel{ min-width: 460px; }  /* xl */
}

/* Keep promo input/button from clipping (width only) */
#promo-input{ min-width: 14rem; }
@media (min-width: 768px){ #promo-input{ min-width: 16rem; } }
#promo-apply{ white-space: nowrap; min-width: 100px; }

.equal-panel .equal-scroll{ display:flex; flex-direction:column; gap:12px; }
.cart-block{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.cart-block #cart-page-items{ flex:1 1 auto; min-height:180px; overflow:auto; }

/* Prevent the checkout from overflowing its grid column */
.checkout-panel{
  /* if any earlier min-width was added, neutralize it */
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
}

/* Make all equal-panels obey the grid column width */
.equal-panel{
  width: 100%;
  max-width: 100%;
  overflow: hidden;          /* keep borders/glass inside the column */
}

/* Safety: inside content can’t force horizontal overflow */
.equal-panel .equal-scroll{ min-width: 0; overflow: auto; }
.equal-panel *{ min-width: 0; }

/* (Optional) If the strong glass shadow reads as “outside the gutter”,
   reduce the shadow spread slightly for optical balance */
.glass-strong{
  box-shadow: 0 22px 60px rgba(0,0,0,.35); /* a bit tighter than before */
}

/* Ensure the main grid keeps symmetric gutters (you already have px-6 lg:px-8) */
main > .max-w-7xl{ box-sizing: border-box; }

/* Each line in mini/cart pages */
.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) /* soft sheen */,
    rgba(58, 22, 143, 0.651);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 18px rgba(168,85,247,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
.cart-line + .cart-line { margin-top: 8px; }

.glass-line:hover {
  box-shadow:
    0 0 26px rgba(168,85,247,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  transform: translateY(-1px);
  transition: all .18s ease;
}

.line-meta { min-width: 0; }
.line-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.line-sub {
  margin-top: 2px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

.line-money {
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
}

.line-remove {
  margin-left: 4px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .15s ease;
}
.line-remove:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 12px rgba(168,85,247,0.35);
}

.line-remove {
  margin-left: 6px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(64% 64% at 30% 25%, rgba(168,85,247,0.35), rgba(23,88,150,0.25) 60%, rgba(255,255,255,0.06) 100%),
    rgba(14,14,18,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.45),
    0 0 18px rgba(168,85,247,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.line-remove:hover {
  transform: translateY(-1px) scale(1.05);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.5),
    0 0 26px rgba(168,85,247,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}
.line-remove i { opacity: .9; }

/* === CART: animated gradient + sheen + border =========================== */
@keyframes cartBgMove {
  0%   { background-position: left top,    0% 50%; }
  50%  { background-position: left top,  100% 50%; }
  100% { background-position: left top,    0% 50%; }
}
@keyframes cartSheen {
  0%,10%   { transform: translateX(-130%) skewX(-10deg); opacity: 0; }
  20%      { opacity: .28; }
  30%      { transform: translateX(130%)  skewX(-10deg); opacity: 0; }
  100%     { transform: translateX(130%)  skewX(-10deg); opacity: 0; }
}
@keyframes cartBorderSpin {
  to { --cartAngle: 360deg; }
}

.cart-line {
  position: relative;
  isolation: isolate;                /* keep pseudo behind content */
  overflow: hidden;
  border-radius: 14px;

  /* Your existing glass base stays… add a moving gradient layer on top */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(90deg, rgba(236,72,153,.14), rgba(139,92,246,.14), rgba(99,102,241,.14));
  background-size: auto auto, 200% 200%;
  animation: cartBgMove 12s ease-in-out infinite;
}

/* Subtle moving sheen that sweeps occasionally */
.cart-line::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.20) 30%,
    rgba(255,255,255,.08) 38%,
    transparent 50%);
  pointer-events:none;
  transform: translateX(-130%) skewX(-10deg);
  animation: cartSheen 6.5s ease-in-out infinite;
  z-index: 0; /* under text */
}

/* Animated conic-gradient "living" border (pure CSS) */
.cart-line::before{
  content:"";
  position:absolute; inset:-1px;
  --cartAngle: 0deg;
  background: conic-gradient(from var(--cartAngle),
    rgba(236,72,153,.55),
    rgba(139,92,246,.55),
    rgba(99,102,241,.55),
    rgba(236,72,153,.55));
  border-radius: 16px;
  animation: cartBorderSpin 10s linear infinite;
  z-index: -1;                /* sits below the row */
  padding: 1.5px;             /* border thickness */

  /* create a REAL border via masks (keeps interior transparent) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Keep content above pseudo-elements */
.cart-line > * { position: relative; z-index: 1; }

/* ✕ button: animated ring + soft pulse on hover */
@keyframes cartBtnRing {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
.line-remove{
  position: relative;
  overflow: hidden;
}
.line-remove::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  background: conic-gradient(
    from 0deg,
    rgba(236,72,153,.7),
    rgba(139,92,246,.7),
    rgba(99,102,241,.7),
    rgba(236,72,153,.7)
  );
  filter: blur(6px);
  opacity:.25;
  z-index:-1;
  animation: cartBtnRing 7s linear infinite;
}
.line-remove:hover::after{ opacity:.38; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .cart-line,
  .cart-line::after,
  .cart-line::before,
  .line-remove::after { animation: none !important; }
}

/* --- Mini-cart: side padding + internal scrolling (hidden scrollbar) --- */

/* Make sure the panel itself doesn't clip the list */
#mini-cart { overflow: visible; }

/* Give each row more breathing room on the sides ONLY in the mini-cart */
#mini-cart #mini-cart-items .cart-line {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Constrain the list and allow scrolling by wheel/touch */
#mini-cart #mini-cart-items,
#mini-cart .mini-scroll-area {
  max-height: min(44vh, 24rem);   /* fits viewport; adjust if you want taller */
  overflow-y: auto;
  overscroll-behavior: contain;    /* keep scroll inside the panel */
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar visuals (still scrolls with cursor/touch) */
#mini-cart #mini-cart-items::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent !important; }
#mini-cart #mini-cart-items { scrollbar-width: none; -ms-overflow-style: none; }

/* Optional: if you also want the main cart page list to behave the same */
#cart-page-items {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}


/* === Mini-cart fixes: padding + scroll (no visible bar) === */

/* Wrapper padding (space on left/right of rows) */
#mini-cart #mini-cart-items {
  padding-left: 12px !important;
  padding-right: 12px !important;

  /* force internal scroll even if Tailwind changed */
  max-height: min(44vh, 28rem) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox hide */
}
#mini-cart #mini-cart-items::-webkit-scrollbar { width: 0; height: 0; }

/* Extra breathing room inside each row */
#mini-cart #mini-cart-items .cart-line {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Make sure the panel itself doesn't clip the list */
#mini-cart { overflow: visible; }

/* === CART PAGE: scroll only the item list, no visible scrollbar ====== */

/* The section that contains the title + list needs to be a flex column */
.cart-block{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;       /* allow inner scroll areas */
}

/* The list itself becomes the scroller (keeps promo/reco fixed below) */
.cart-list{
  flex: 1 1 auto !important;      /* fill remaining height in the left panel */
  min-height: 220px !important;   /* shows a few rows even on small carts */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* side padding for breathing room */
  padding-left: 12px !important;
  padding-right: 12px !important;

  /* hide scrollbar visuals */
  scrollbar-width: none;          /* Firefox */
}
.cart-list::-webkit-scrollbar{ width:0; height:0; }  /* WebKit */

/* Each line gets internal side padding too (nice on hover/select) */
#cart-page-items .cart-line{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Make the middle column (equal-scroll) able to host internal scrollers */
.equal-panel .equal-scroll{
  min-height: 0 !important;
  overflow: hidden !important;    /* we scroll inside .cart-list, not the column */
}

/* (Safety) The panel itself must not clamp inner scroll areas */
.equal-panel{
  min-height: 0 !important;
  overflow: hidden !important;    /* keeps glow/edges tidy; inner lists still scroll */
}

/* === Cart page: make the list scroll inside the left panel ================= */

/* Let the middle section of each equal-panel actually shrink */
.equal-panel .equal-scroll{
  min-height: 0 !important;
}

/* The Cart block (title + list) is a column; allow the list to take leftover space */
.panel-section.cart-block{
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
}

/* The list itself scrolls (no visible scrollbar) and has a bit of side padding */
#cart-page-items{
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;                 /* <-- enables scrolling */
  -webkit-overflow-scrolling: touch;
  padding-left: 12px;
  padding-right: 12px;
}

/* Hide scrollbar visuals but keep scrolling with mouse/touch */
#cart-page-items::-webkit-scrollbar{ width: 0; height: 0; }
#cart-page-items{ scrollbar-width: none; }

/* === CART PAGE: force inner list to scroll =============================== */

/* The tall glass card must be a flex column and clip its children */
.equal-panel{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;          /* clips item effects at edges */
  isolation:isolate;                   /* stops blending with the other column */
  background-clip: padding-box;        /* keep backdrop/glow inside */
}

/* The middle column inside the panel must be allowed to shrink */
.equal-panel > .equal-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:visible;                     /* we scroll only the list, not the whole column */
}

/* The Cart section itself must also be a flex column and clip children */
.panel-section.cart-block{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden;                      /* clips cart-line ::before sheen */
}

/* The LIST is the only scroller (hidden scrollbar, mouse/touch wheel works) */
#cart-page-items{
  flex:1 1 auto !important;
  min-height:180px;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-left:12px;                    /* side padding you asked for */
  padding-right:12px;
}

/* Hide scrollbar visuals but keep scrolling */
#cart-page-items::-webkit-scrollbar{ width:0; height:0; }
#cart-page-items{ scrollbar-width:none; }

/* Extra guard: each rendered cart line can’t extend outside its section */
#cart-page-items .cart-line{
  position:relative;
  overflow:hidden;                      /* clips its animated border/glow */
}

/* === CART PAGE: authoritative scroll overrides (append at end of hero.css) === */

/* We scroll the list itself; the middle column should not clamp it */
.equal-panel > .equal-scroll {
  overflow: visible !important;
  min-height: 0 !important;
}

/* The Cart section is a flex column so the list can expand/shrink */
.panel-section.cart-block {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden; /* clips the animated borders nicely */
}

/* The list is the ONLY scroller, with a visible scrollbar */
#cart-page-items {
  flex: 1 1 auto !important;
  min-height: 180px !important;
  max-height: 480px !important;           /* tweak height to taste */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-left: 12px;
  padding-right: 12px;

  /* Visible scrollbar styles (override any prior hidden rules) */
  scrollbar-width: thin !important;       /* Firefox */
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.08) !important;
}
#cart-page-items::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
#cart-page-items::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
#cart-page-items::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14)) !important;
  border-radius: 10px !important;
}

/* === Cart list: scroll inside, no panel resize (append at end of hero.css) === */

/* Give the Cart section a flex column so the list can take the leftover space.
   This does NOT change the panel’s size, only how its inside lays out. */
.panel-section.cart-block{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;   /* just clips the row glow effects */
}

/* The LIST is the ONLY scroller. No height growth of the container. */
#cart-page-items{
  flex: 1 1 auto !important;     /* use the space the card already has */
  min-height: 0 !important;      /* allow it to actually shrink/grow */
  overflow-y: auto !important;    /* <-- the scroll happens here */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* (optional) keep your side breathing room */
  padding-left: 12px;
  padding-right: 12px;

  /* make the scrollbar visible (remove hiding from earlier rules) */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.08) !important;
}
#cart-page-items::-webkit-scrollbar{ width:10px !important; height:10px !important; }
#cart-page-items::-webkit-scrollbar-track{ background:rgba(255,255,255,.08) !important; border-radius:10px !important; }
#cart-page-items::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14)) !important;
  border-radius:10px !important;
}

/* === Cart list scroll without resizing or compressing items === */

/* 1) The list is NOT flex; it behaves like a normal block again */
#cart-page-items{
  display: block !important;

  /* keep the size you already had visually, just add scrolling */
  max-height: 420px !important;          /* match your previous look */
  height: auto !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* optional padding you were using */
  padding-left: 12px !important;
  padding-right: 12px !important;

  /* visible scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.08) !important;
}
#cart-page-items::-webkit-scrollbar{ width:10px !important; }
#cart-page-items::-webkit-scrollbar-track{ background:rgba(255,255,255,.08) !important; border-radius:10px; }
#cart-page-items::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14)) !important;
  border-radius: 10px;
}

/* 2) Guard: if any ancestor still uses flex, don't let rows shrink */
#cart-page-items > *{
  flex: 0 0 auto !important;   /* rows keep natural height */
}

/* 3) Extra guard for your row component */
#cart-page-items .cart-line{
  height: auto !important;
  min-height: unset !important;
  align-items: center;          /* keep the same look */
}

/* === Chat cart-offer (glassy, compact, on-brand) ======================= */
.chat-offer {
  display:flex; align-items:flex-start; gap:.75rem; margin-top:.5rem;
}
.chat-offer .avatar {
  width: 32px; height: 32px; border-radius:9999px; object-fit:cover; flex:0 0 32px;
}

/* Glass card */
.offer-card{
  position:relative;
  width:min(420px, 92vw);
  border-radius:16px;
  padding:14px 14px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(44,44,82,.13), rgba(107,68,107,.12)),
    radial-gradient(120% 120% at 100% -10%, rgba(140,22,161,.12) 0%, transparent 100%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  animation: offerPop .18s ease-out both;
}
@keyframes offerPop { from { transform: translateY(6px); opacity:0; } to { transform: none; opacity:1; } }

.offer-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.offer-title{ font-weight:800; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.offer-price{ font-weight:800; font-size:.95rem; opacity:.95; }

/* Segmented period toggle */
.offer-toggle{
  display:inline-flex; border-radius:9999px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.offer-toggle button{
  padding:.42rem .8rem; font-weight:700; font-size:.8rem;
  transition: filter .2s ease, background .2s ease, transform .2s ease;
}
.offer-toggle button[data-active="true"]{
  background:
    linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  color:#fff;
  box-shadow: 0 0 14px rgba(168,85,247,.35);
}
.offer-toggle button:not([data-active="true"]):hover{ filter: brightness(1.08); }

/* Qty stepper */
.offer-qty{
  display:inline-flex; align-items:center; gap:.4rem; margin-left:auto;
}
.offer-qty .step{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .12s ease, filter .2s ease, border-color .2s ease;
}
.offer-qty .step:hover{ transform: translateY(-1px); filter:brightness(1.05); border-color:rgba(255,255,255,.26); }
.offer-qty .qv{ min-width:2ch; text-align:center; font-weight:700; }

/* Primary “Add to cart” */
.offer-add{
  display:block; width:100%; margin-top:.65rem;
  border:none; border-radius:9999px; padding:.62rem 1rem; font-weight:800; font-size:.9rem;
  background: linear-gradient(90deg,#ec4899,#8b5cf6,#6366f1);
  color:#fff; box-shadow:0 0 18px rgba(168,85,247,.35);
  transition: transform .15s ease, filter .25s ease, box-shadow .25s ease;
}
.offer-add:hover{ transform: translateY(-1px); filter: brightness(1.06); box-shadow:0 0 26px rgba(168,85,247,.45); }

/* Tiny helper line */
.offer-hint{ margin-top:.35rem; font-size:.78rem; color:rgba(255,255,255,.72); }

/* Focus styles (keyboard) */
.offer-card :is(button){ outline:none; }
.offer-card :is(button):focus-visible{
  box-shadow: 0 0 0 3px rgba(168,85,247,.25);
}

/* Compact at very small widths */
@media (max-width: 420px){
  .offer-toggle button{ padding:.38rem .7rem; font-size:.78rem; }
  .offer-add{ padding:.56rem .9rem; }
}

/* =======================================================================
   INTERACTION SAFETY PATCH — fixes dead hover/click on landing CTAs
   (caused by absolute/glow layers intercepting pointer events)
   Paste at VERY END of hero.css
   ======================================================================= */

/* All decorative/ambient layers must NEVER intercept clicks */
#site-bg,
#site-bg::before,
#site-bg * ,
#orb-layer,
#orb-layer *,
.orb,
.orb-inner,
.grain-overlay,
#qarin-stats-marquee .pointer-events-none,
#qarin-stats-marquee [aria-hidden="true"],
#video-demo .absolute,
#gallery .absolute,
#how-it-works .absolute,
#qarin-switcher .absolute,
footer .pointer-events-none {
  pointer-events: none !important;
}

/* Force real interactive elements above any ambient layers */
a,
button {
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

/* Extra insurance for your specific CTA zones */
#video-demo a,
#gallery a,
#how-it-works a,
#qarin-switcher button,
#how-it-works button {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

/* ===========================
   Agent Demo Page Styling
   =========================== */

/* Outer glass container with animated gradient border */
.agent-demo-wrap {
  position: relative;
  border-radius: 28px;
  padding: 1px; /* space for border */
  background: transparent;
  isolation: isolate;
}

.agent-demo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(236,72,153,0.9),
    rgba(168,85,247,0.9),
    rgba(59,130,246,0.9),
    rgba(236,72,153,0.9)
  );
  background-size: 300% 300%;
  animation: agentBorderShift 8s ease infinite;
  z-index: -1;
  filter: blur(0.2px);
}

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

/* Inner panel */
.agent-demo-inner {
  border-radius: 27px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.06);
  padding: clamp(22px, 3vw, 36px);
  box-shadow:
    0 0 45px rgba(168,85,247,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Image gradient frame */
.agent-demo-image-frame {
  position: relative;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(140deg,
    rgba(236,72,153,0.8),
    rgba(168,85,247,0.8),
    rgba(59,130,246,0.8)
  );
  box-shadow: 0 0 30px rgba(168,85,247,0.35);
}

.agent-demo-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: inherit;
  filter: blur(14px);
  opacity: 0.45;
  z-index: -1;
}

.agent-demo-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 60%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Small feature list pills */
.agent-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
}

/* Buttons (tight + consistent) */
.agent-demo-btn {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  transition: 0.2s ease;
}
.agent-demo-btn:hover {
  background: rgba(0,0,0,0.75);
  transform: translateY(-1px);
}

/* ===========================
   BUTTONS (Gradient, Matching Pricing Page)
   =========================== */

.agent-demo-btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  color: white;
  background: linear-gradient(to right, #ec4899, #a855f7);
  box-shadow: 0 0 20px rgba(168,85,247,0.35);
  transition: 0.25s ease;
}

.agent-demo-btn-gradient:hover {
  background: linear-gradient(to right, #db418e, #8f3dde);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(168,85,247,0.55);
}

/* Variant — matches SALES assistant gradient (purple → pink → indigo) */
.agent-demo-btn-gradient-variant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  color: white;
  background: linear-gradient(to right, #a855f7, #ec4899, #6366f1);
  box-shadow: 0 0 20px rgba(168,85,247,0.35);
  transition: 0.25s ease;
}

.agent-demo-btn-gradient-variant:hover {
  background: linear-gradient(to right, #9333ea, #db418e, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(168,85,247,0.55);
}

/* Alternative — Indigo → Purple (Automation) */
.agent-demo-btn-gradient-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  color: white;
  background: linear-gradient(to right, #6366f1, #a855f7);
  box-shadow: 0 0 20px rgba(168,85,247,0.35);
  transition: 0.25s ease;
}

.agent-demo-btn-gradient-alt:hover {
  background: linear-gradient(to right, #4f46e5, #9333ea);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(168,85,247,0.55);
}

/* Glassy gradient for the Agents dropdown */
#agent-menu {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.10),
    rgba(132, 25, 146, 0.18),
    rgba(13, 25, 48, 0.65)
  );
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);

  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.75),
    inset 0 0 10px rgba(255, 255, 255, 0.06);

  border-radius: 16px;
}