/* ============================================================
   Premium hover system (v5 -- corner-glow + heading color)
   Replaces the v4 border-shimmer system entirely, matching the
   .trust-card hover style the user specifically asked to extend
   site-wide: a soft radial glow in the corner (not a full-card
   glow), a top-accent bar, a lift, and the card's own heading
   text changing to the accent color -- all per-card-position,
   cycling through 6 colors.

   Applies to: .exp-card .ip-card .ip-stat-card .pillar-card
   .price-card .pricing-card .stat-card .sum-card .svc-card-about
   .trust-card .about-card .ip-step .subject-card .inline-card
   .plat-card .detail-card .detail-card-cyan

   Three of these (.ip-stat-card, .pillar-card, .pricing-card)
   already had their own existing ::before/::after pseudo-elements
   serving an equivalent purpose (a top accent bar or an animated
   glow blob) before this system was built. Since an element can
   only have one ::before and one ::after, adding new ones here
   would silently overwrite -- not combine with -- those working
   effects. So for these three specifically, only the lift and
   heading-color-on-hover parts of this system apply; their
   existing top-accent/glow effects are left completely alone.

   .detail-card-cyan is a special case in a different direction:
   it has its own pre-existing hover (lift, border/background tint,
   heading color) but no ::before/::after conflict, so it gets the
   full corner-glow + top-accent treatment like any other card here.
   Unlike the others, though, it has an intentionally fixed cyan
   identity rather than a cycling one -- so after the six
   nth-of-type color-cycling rules below, a dedicated override pins
   its --cardglow back to cyan regardless of its position among
   siblings, preserving that identity instead of letting whichever
   position it lands on override it.

   The heading-color-on-hover targets any h1-h6 inside the card,
   rather than a specific class name -- this works across all card
   types regardless of what each one calls its own heading element
   (.trust-title, a bare <h3>, etc.), since it targets the semantic
   tag instead.
   ============================================================ */

:root{
  --cg2-blue:#3B82F6;   --cg2-blue-soft:rgba(59,130,246,.14);
  --cg2-cyan:#22D3EE;   --cg2-cyan-soft:rgba(34,211,238,.14);
  --cg2-purple:#A78BFA; --cg2-purple-soft:rgba(167,139,250,.14);
  --cg2-emerald:#34D399;--cg2-emerald-soft:rgba(52,211,153,.14);
  --cg2-amber:#F43F5E;  --cg2-amber-soft:rgba(244,63,94,.14);
  --cg2-gold:#F0A500;   --cg2-gold-soft:rgba(240,165,0,.14);
}

:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan){
  --cardglow: var(--cg2-gold);
  --cardglow-soft: var(--cg2-gold-soft);
  transition: transform .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s ease, border-color .4s ease;
}

/* Color cycling: 1st=blue, 2nd=cyan, 3rd=purple, 4th=emerald, 5th=amber,
   6th=gold, repeating every 6 cards */
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):nth-of-type(6n+1)
  {--cardglow:var(--cg2-blue);--cardglow-soft:var(--cg2-blue-soft)}
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):nth-of-type(6n+2)
  {--cardglow:var(--cg2-cyan);--cardglow-soft:var(--cg2-cyan-soft)}
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):nth-of-type(6n+3)
  {--cardglow:var(--cg2-purple);--cardglow-soft:var(--cg2-purple-soft)}
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):nth-of-type(6n+4)
  {--cardglow:var(--cg2-emerald);--cardglow-soft:var(--cg2-emerald-soft)}
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):nth-of-type(6n+5)
  {--cardglow:var(--cg2-amber);--cardglow-soft:var(--cg2-amber-soft)}
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):nth-of-type(6n+6)
  {--cardglow:var(--cg2-gold);--cardglow-soft:var(--cg2-gold-soft)}

/* .detail-card-cyan keeps its own fixed cyan identity rather than
   cycling -- this must come after the nth-of-type rules above to
   correctly override whichever color its position would otherwise
   assign it. */
.detail-card-cyan{--cardglow:var(--cg2-cyan);--cardglow-soft:var(--cg2-cyan-soft)}

/* Lift + border-tint + heading color -- applies to ALL 15 card types,
   including the 3 with pre-existing pseudo-elements */
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 64px rgba(0,0,0,.45);
  border-color: var(--cardglow) !important;
}
:is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
    .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
    .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan):hover :is(h1,h2,h3,h4,h5,h6){
  color: var(--cardglow) !important;
  transition: color .3s ease;
}

/* Corner glow (::after) + top-accent bar (::before) -- only for the 12
   card types WITHOUT a pre-existing pseudo-element conflict */
:is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
    .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
    .detail-card,.detail-card-cyan){
  position: relative;
}
:is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
    .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
    .detail-card,.detail-card-cyan)::after{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  top:-60px; right:-60px;
  background: radial-gradient(circle, var(--cardglow-soft), transparent 70%);
  opacity:0; transform:scale(.7); pointer-events:none;
  transition: opacity .4s ease, transform .4s ease;
  z-index: -1;
}
:is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
    .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
    .detail-card,.detail-card-cyan):hover::after{
  opacity:1; transform:scale(1);
}
:is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
    .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
    .detail-card,.detail-card-cyan)::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:14px 14px 0 0;
  background: var(--cardglow);
  transform: scaleX(0); transform-origin:left;
  transition: transform .45s ease;
  z-index: -1;
}
:is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
    .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
    .detail-card,.detail-card-cyan):hover::before{
  transform: scaleX(1);
}

/* No changes made to any card's own children -- .trust-card's original
   version explicitly set position:relative;z-index:1 on its specific
   named children (.trust-title, .trust-text) to stack above its own
   glow layer. This generic system instead keeps the glow/accent layers
   themselves at a negative z-index, which per normal CSS stacking order
   already renders behind ordinary non-positioned content -- achieving
   the same "glow stays behind text" result without needing to know or
   touch each of the 15 card types' own internal child elements. */

@media(prefers-reduced-motion:reduce){
  :is(.exp-card,.ip-card,.ip-stat-card,.pillar-card,.price-card,.pricing-card,
      .stat-card,.sum-card,.svc-card-about,.trust-card,.about-card,.ip-step,
      .subject-card,.inline-card,.plat-card,.detail-card,.detail-card-cyan){transition:none!important}
  :is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
      .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
      .detail-card,.detail-card-cyan)::before,
  :is(.exp-card,.ip-card,.price-card,.stat-card,.sum-card,.svc-card-about,
      .trust-card,.about-card,.ip-step,.subject-card,.inline-card,.plat-card,
      .detail-card,.detail-card-cyan)::after{
    transition:none!important;
  }
}