/* ======= PREMIUM WHY-QUANTORA SECTION (v3) ======= */
:root{
  --fx-cyan: var(--q-os-cyan, #38bdf8);
  --fx-indigo: #6366f1;
  --fx-purple: #a855f7;
  --fx-surface: rgba(15,23,42,.7);
  --fx-surface-strong: rgba(15,23,42,.9);
  --fx-border: rgba(148,163,184,.45);
  --fx-text: var(--text, #e5e7eb);
  --fx-text-soft: var(--text-soft, #9ca3af);
}

/* Container + background */
.features--v3{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.features--v3 .fx-bg{
  position:absolute; inset:-8% -4%;
  pointer-events:none;
  z-index:-2;
}

/* Soft plasma glow */
.features--v3 .fx-bg--plasma{
  background:
    radial-gradient(50% 40% at 16% 8%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(40% 30% at 84% 10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(35% 25% at 74% 60%, rgba(168,85,247,.12), transparent 60%);
  filter: blur(40px) saturate(120%);
  animation: fxPlasma 18s ease-in-out infinite alternate;
}
@keyframes fxPlasma{
  50%{ transform: translateY(-1.5%) translateX(.5%) scale(1.02); filter: blur(44px) saturate(130%); }
  100%{ transform: translateY(1.2%) translateX(-.5%) scale(1.0); filter: blur(40px) saturate(120%); }
}

/* Subtle grid with scanning line */
.features--v3 .fx-bg--grid{
  background:
    linear-gradient(to right, rgba(100,116,139,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100,116,139,.06) 1px, transparent 1px);
  background-size: 38px 38px, 38px 38px;
  mask: linear-gradient(to bottom, transparent, #000 15% 85%, transparent);
  opacity:.7;
}
.features--v3 .fx-bg--grid::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(56,189,248,.15), transparent);
  animation: fxScan 8s linear infinite;
}
@keyframes fxScan{ from{ transform: translateY(-100%);} to{ transform: translateY(100%);} }

/* Header */
.features--v3 .fx-head{ text-align:left; max-width:980px; margin-inline:auto; }
.features--v3 .fx-head .section-title{ margin-top:.35rem; }
.features--v3 .fx-gradient-text{
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-indigo) 40%, var(--fx-purple));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(56,189,248,.16));
}

/* Overview: widget + bullets */
.features--v3 .fx-overview{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 2.2rem;
  align-items: center; margin-top: 1.6rem;
}
@media (max-width: 980px){
  .features--v3 .fx-overview{ grid-template-columns: 1fr; }
}

.features--v3 .fx-widget{
  position:relative;
  border-radius: 18px;
  border: 1px solid var(--fx-border);
  background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(15,23,42,.6));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 4px 18px rgba(2,6,23,.45);
  padding: 1.2rem 1.2rem 1rem;
  backdrop-filter: blur(6px) saturate(120%);
}

.features--v3 .fx-widget::before{
  /* Shimmer border */
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  padding: 1px; background:
    linear-gradient(120deg, rgba(56,189,248,.6), rgba(99,102,241,.6) 34%, rgba(168,85,247,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .15;
  animation: fxBorder 8s linear infinite;
}
@keyframes fxBorder{ 50%{ filter: hue-rotate(18deg) brightness(1.06);} }

.features--v3 .fx-widget-head{
  display:flex; justify-content: space-between; align-items: flex-end; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.features--v3 .fx-chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.features--v3 .fx-chip{
  --c1: rgba(56,189,248,.22);
  display:inline-flex; align-items:center; gap:.35rem;
  background: linear-gradient(180deg, rgba(2,6,23,.1), rgba(2,6,23,.3));
  border:1px solid var(--c1);
  box-shadow: inset 0 0 12px rgba(56,189,248,.06);
  padding: .35rem .6rem; border-radius: 999px; font-size: .78rem; color: var(--fx-text);
}
.features--v3 .fx-chip--muted{ --c1: rgba(99,102,241,.25); }

.features--v3 .fx-kpis{ display:grid; grid-auto-flow: column; gap: 1.1rem; color: var(--fx-text-soft); }
.features--v3 .fx-kpis dt{ font-size:.72rem; letter-spacing:.03em; text-transform: uppercase; }
.features--v3 .fx-kpis dd{ margin:0; color: var(--fx-text); font-weight: 500; }

.features--v3 .fx-chart-wrap{ position:relative; overflow:hidden; border-radius: 12px; background: rgba(2,6,23,.65); }
.features--v3 .fx-chart{ display:block; width:100%; height:auto; }
.features--v3 .fx-chart-glow{ position:absolute; inset:-20% -10% -40% -10%; pointer-events:none;
  background: radial-gradient(50% 50% at 50% 100%, rgba(56,189,248,.35), transparent 60%);
  filter: blur(18px);
}

.features--v3 .fx-widget-foot{ color: var(--fx-text-soft); font-size:.86rem; margin-top:.7rem; }

.features--v3 .fx-bullets{ list-style:none; margin:0; padding:0; }
.features--v3 .fx-bullets li{ color: var(--fx-text-soft); margin-bottom: .9rem; }
.features--v3 .fx-bullets strong{ color: var(--fx-text); }

/* Cards grid */
.features--v3 .fx-grid{
  margin-top: 2.4rem;
  display:grid; gap: 1.2rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1100px){ .features--v3 .fx-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .features--v3 .fx-grid{ grid-template-columns: 1fr; } }

.features--v3 .fx-card{
  position:relative;
  border-radius: 16px; padding: 1rem 1rem .9rem;
  background: linear-gradient(180deg, var(--fx-surface), rgba(15,23,42,.58));
  border: 1px solid var(--fx-border);
  box-shadow: 0 10px 24px rgba(2,6,23,.45);
  transform-style: preserve-3d;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.features--v3 .fx-card:focus-visible{ box-shadow: 0 0 0 2px rgba(56,189,248,.85); }

.features--v3 .fx-card-head{ display:flex; align-items:center; gap:.7rem; margin-bottom: .5rem; }
.features--v3 .fx-icon{ width:28px; height:28px; flex:0 0 auto; }
.features--v3 .fx-card h3{ margin:0; font-size: 1.05rem; }

.features--v3 .fx-card p{ color: var(--fx-text-soft); margin:.35rem 0 .6rem; }
.features--v3 .fx-card ul{ padding-left: 1rem; margin:0; color: var(--fx-text-soft); }
.features--v3 .fx-card li{ margin: .35rem 0; }

/* 3D tilt + shine */
.features--v3 .fx-card-gloss{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%);
  mix-blend-mode: screen; opacity:0; transition: opacity .25s ease;
}
.features--v3 .fx-card:hover .fx-card-gloss{ opacity:1; }

.features--v3 .fx-tilt:hover{ box-shadow: 0 14px 44px rgba(8,47,73,.55); border-color: rgba(56,189,248,.5); }

/* Reveal on scroll */
.features--v3 .fx-reveal{ opacity:0; transform: translateY(14px); }
.features--v3 .fx-reveal.fx-in{ opacity:1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
.features--v3 .fx-grid .fx-reveal.fx-in{ transition-delay: calc(var(--i, 0) * 80ms); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .features--v3 .fx-bg--plasma, .features--v3 .fx-bg--grid::after{ animation: none !important; }
  .features--v3 .fx-card, .features--v3 .fx-reveal{ transform: none !important; transition: none !important; }
}