/* ============================================================
   Luminous — plugin cards on /weebly-plugins/discover-plugins
   Same design language as the services mega menu: solid-color
   cards, abstract line art, divider + CTA footer.
   ============================================================ */

.lum-plugins-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1160px;
  margin: 10px auto 0;
  padding: 0 20px;
}

.lum-plugin-card {
  --pc-bg: #0854a5;
  --pc-fg: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 26px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--pc-bg);
  color: var(--pc-fg);
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lum-plugin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -18px rgba(18, 18, 23, 0.4);
}

/* abstract line art, bottom-right, behind content */
.lum-plugin-art {
  position: absolute;
  right: -16px;
  bottom: 70px;
  width: 230px;
  height: 230px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.14;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s ease;
}
.lum-plugin-card:hover .lum-plugin-art {
  transform: translate(-6px, -6px) rotate(-2deg);
  opacity: 0.22;
}

/* tag row + sale badge */
.lum-plugin-tagrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.lum-plugin-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.75;
}
.lum-plugin-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.lum-plugin-badge {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: #f83f5a;
  border-radius: 20px;
  padding: 6px 13px;
  white-space: nowrap;
}

h3.lum-plugin-title {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--pc-fg);
}
.lum-plugin-title .plugin-highlight { color: inherit; }

.lum-plugin-desc {
  position: relative;
  color: var(--pc-fg); /* beat the page's global `p` color */
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.82;
  margin: 0 0 22px;
  max-width: 52ch;
}
.lum-plugin-card a.link-53,
.lum-plugin-desc a,
.lum-plugin-feats a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* feature checkmarks */
.lum-plugin-feats {
  position: relative;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lum-plugin-feats li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--pc-fg);
  font-family: Poppins, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}
.lum-plugin-feats svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* divider + price + CTA */
.lum-plugin-foot {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--pc-fg) 24%, transparent);
}
.lum-plugin-price {
  font-family: Poppins, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}
.lum-plugin-price span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 5px;
}

/* CTA: white pill on the colored card (overrides .button) */
a.button.lum-plugin-cta {
  background-color: #fff !important;
  color: #121217 !important;
  border-radius: 30px;
  padding: 16px 28px 14px;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
a.button.lum-plugin-cta:hover {
  background-color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 24px -8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Animated product demos inside the cards (pure CSS, 5.6s loops)
   ============================================================ */
.lum-plugin-anim {
  position: relative;
  margin: 2px 0 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.lum-plugin-anim svg { display: block; width: 100%; height: auto; }

/* ---------- PageBoost: fast page load + 100 gauge ---------- */
.lum-anim-boost .ab-frame { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.35); stroke-width: 1.5; }
.lum-anim-boost .ab-dot { fill: rgba(255,255,255,0.5); }
.lum-anim-boost .ab-sep { stroke: rgba(255,255,255,0.25); stroke-width: 1; }
.lum-anim-boost text { font-family: Poppins, sans-serif; }
.lum-anim-boost .ab-h { fill: #fff; font-size: 13px; font-weight: 600; }
.lum-anim-boost .ab-p { fill: rgba(255,255,255,0.62); font-size: 8px; }
.lum-anim-boost .ab-btn { fill: #8fe3b0; }
.lum-anim-boost .ab-btntext { fill: #0a3f77; font-size: 7px; font-weight: 600; text-anchor: middle; }
.lum-anim-boost .ab-glabel { fill: rgba(255,255,255,0.55); font-size: 8px; text-anchor: middle; letter-spacing: 0.5px; }
.lum-anim-boost .ab-track { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 8; }
.lum-anim-boost .ab-arc {
  fill: none; stroke: #8fe3b0; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 251.3; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 245px 74px;
}
.lum-anim-boost .ab-score {
  fill: #fff; font-family: Poppins, sans-serif; font-size: 24px; font-weight: 600;
  text-anchor: middle;
}
.lum-anim-boost .ab-check-bg { fill: #8fe3b0; }
.lum-anim-boost .ab-check-tick {
  fill: none; stroke: #0a3f77; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes ab-bar-in {
  0%, 3% { opacity: 0; transform: translateX(-7px); }
  8%, 90% { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-7px); }
}
.lum-anim-boost .ab-bar { animation: ab-bar-in 5.6s cubic-bezier(0.215,0.61,0.355,1) infinite; }
.lum-anim-boost .ab-b2 { animation-name: ab-bar-in2; }
.lum-anim-boost .ab-b3 { animation-name: ab-bar-in3; }
.lum-anim-boost .ab-b4 { animation-name: ab-bar-in4; }
.lum-anim-boost .ab-b5 { animation-name: ab-bar-in5; }
@keyframes ab-bar-in2 { 0%,5% {opacity:0;transform:translateX(-7px);} 10%,90% {opacity:1;transform:none;} 96%,100% {opacity:0;transform:translateX(-7px);} }
@keyframes ab-bar-in3 { 0%,7% {opacity:0;transform:translateX(-7px);} 12%,90% {opacity:1;transform:none;} 96%,100% {opacity:0;transform:translateX(-7px);} }
@keyframes ab-bar-in4 { 0%,9% {opacity:0;transform:translateX(-7px);} 14%,90% {opacity:1;transform:none;} 96%,100% {opacity:0;transform:translateX(-7px);} }
@keyframes ab-bar-in5 { 0%,11% {opacity:0;transform:translateY(6px);} 16%,90% {opacity:1;transform:none;} 96%,100% {opacity:0;transform:translateY(6px);} }
@keyframes ab-arc-sweep {
  0%, 10% { stroke-dashoffset: 251.3; }
  38%, 90% { stroke-dashoffset: 0; }
  97%, 100% { stroke-dashoffset: 251.3; }
}
.lum-anim-boost .ab-arc { animation: ab-arc-sweep 5.6s cubic-bezier(0.33,0,0.2,1) infinite; }
@keyframes ab-score-in {
  0%, 30% { opacity: 0; transform: scale(0.8); }
  40%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.8); }
}
.lum-anim-boost .ab-score {
  animation: ab-score-in 5.6s cubic-bezier(0.215,0.61,0.355,1) infinite;
  transform-origin: 245px 74px; transform-box: view-box;
}
@keyframes ab-check-pop {
  0%, 42% { opacity: 0; transform: scale(0); }
  50%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0); }
}
.lum-anim-boost .ab-check {
  animation: ab-check-pop 5.6s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
  transform-origin: 276px 103px; transform-box: view-box;
}

/* ---------- MegaMenu: dropdown rolls over blurred page ---------- */
.lum-anim-menu text { font-family: Poppins, sans-serif; }
.lum-anim-menu .am-bgpanel { fill: rgba(255,255,255,0.06); }
.lum-anim-menu .am-heading { fill: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; }
.lum-anim-menu .am-body { fill: rgba(255,255,255,0.4); font-size: 8.5px; }
.lum-anim-menu .am-navbar { fill: rgba(255,255,255,0.1); stroke: rgba(255,255,255,0.28); stroke-width: 1.5; }
.lum-anim-menu .am-logotext { fill: #fff; font-size: 7.5px; font-weight: 600; letter-spacing: 1px; }
.lum-anim-menu .am-linktext { fill: rgba(255,255,255,0.6); font-size: 7px; }
.lum-anim-menu .am-activetext { font-weight: 600; animation: am-hover-hl 5.6s ease infinite; }
@keyframes am-hover-hl {
  0%, 13% { fill: rgba(255,255,255,0.6); }
  16%, 72% { fill: #8fb8e8; }
  78%, 100% { fill: rgba(255,255,255,0.6); }
}
.lum-anim-menu .am-cursor {
  fill: #fff; stroke: rgba(18,18,23,0.6); stroke-width: 0.8;
  animation: am-cursor-move 5.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  transform: translate(288px, 138px); transform-box: view-box;
}
@keyframes am-cursor-move {
  0%, 4% { transform: translate(288px, 138px); }
  14%, 64% { transform: translate(243px, 27px); }
  76%, 100% { transform: translate(288px, 138px); }
}
.lum-anim-menu .am-panelbg { fill: #f6f4ef; }
.lum-anim-menu .am-c1 { fill: #e9e6df; }
.lum-anim-menu .am-c2 { fill: #0854a5; }
.lum-anim-menu .am-c3 { fill: #1a1a20; }
.lum-anim-menu .am-c4 { fill: #dcd9d2; }
.lum-anim-menu .am-ctitle { font-size: 8px; font-weight: 600; }
.lum-anim-menu .am-csub { font-size: 6px; }
.lum-anim-menu .am-ctitle.am-on-light { fill: rgba(18,18,23,0.85); }
.lum-anim-menu .am-ctitle.am-on-dark { fill: rgba(255,255,255,0.95); }
.lum-anim-menu .am-csub.am-on-light { fill: rgba(18,18,23,0.5); }
.lum-anim-menu .am-csub.am-on-dark { fill: rgba(255,255,255,0.6); }
@keyframes am-blur {
  0%, 16% { filter: blur(0); opacity: 1; }
  26%, 78% { filter: blur(3px); opacity: 0.45; }
  88%, 100% { filter: blur(0); opacity: 1; }
}
.lum-anim-menu .am-page { animation: am-blur 5.6s ease-in-out infinite; }
@keyframes am-panel-open {
  0%, 16% { transform: scaleY(0); opacity: 0; }
  19% { opacity: 1; }
  28%, 78% { transform: scaleY(1); opacity: 1; }
  86%, 100% { transform: scaleY(0); opacity: 0; }
}
.lum-anim-menu .am-panel {
  transform-origin: 160px 42px; transform-box: view-box;
  animation: am-panel-open 5.6s cubic-bezier(0.215,0.61,0.355,1) infinite;
}
@keyframes am-item-in {
  0%, 26% { opacity: 0; transform: translateY(7px); }
  33%, 76% { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(7px); }
}
.lum-anim-menu .am-item { animation: am-item-in 5.6s cubic-bezier(0.215,0.61,0.355,1) infinite; }
.lum-anim-menu .am-i2 { animation-name: am-item-in2; }
.lum-anim-menu .am-i3 { animation-name: am-item-in3; }
.lum-anim-menu .am-i4 { animation-name: am-item-in4; }
@keyframes am-item-in2 { 0%,29% {opacity:0;transform:translateY(7px);} 36%,76% {opacity:1;transform:none;} 84%,100% {opacity:0;transform:translateY(7px);} }
@keyframes am-item-in3 { 0%,32% {opacity:0;transform:translateY(7px);} 39%,76% {opacity:1;transform:none;} 84%,100% {opacity:0;transform:translateY(7px);} }
@keyframes am-item-in4 { 0%,35% {opacity:0;transform:translateY(7px);} 42%,76% {opacity:1;transform:none;} 84%,100% {opacity:0;transform:translateY(7px);} }

@media (prefers-reduced-motion: reduce) {
  .lum-anim-boost *, .lum-anim-menu * { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .lum-plugins-grid { grid-template-columns: 1fr; max-width: 640px; }
  .lum-plugin-art { width: 190px; height: 190px; }
}
@media (max-width: 599px) {
  .lum-plugin-card { padding: 26px 22px 20px; }
  h3.lum-plugin-title { font-size: 19px; }
  .lum-plugin-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .lum-plugin-price { order: -1; }
  .lum-plugin-tagrow { flex-wrap: wrap; }
  .lum-plugin-art { opacity: 0.1; }
}
@media (prefers-reduced-motion: reduce) {
  .lum-plugin-card, .lum-plugin-art, a.button.lum-plugin-cta { transition: none !important; }
}