/* ================================================================
   SHARED: animatable angle for conic-gradient borders
================================================================ */
@property --sb-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes sbRotate {
  to { --sb-a: 360deg; }
}

/* Icon float (shared) */
@keyframes ldIconFloat {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-6px); }
}

/* ================================================================
   SOLUTION BOXES — always-on rotating gradient border
================================================================ */
.solution-box {
  position: relative;
  transition:
    transform  0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}

/* Hover: lift */
.solution-box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    0  0   22px rgba(0,212,255,0.05);
}

/* Icon glow */
.solution-box .elementor-icon svg {
  transition: filter 0.4s ease;
}
.solution-box:hover .elementor-icon svg {
  filter:
    drop-shadow(0 0  6px rgba(0,212,255,0.45))
    drop-shadow(0 0 14px rgba(0,212,255,0.15));
}

/* Title glow */
.solution-box h3.elementor-heading-title {
  transition: text-shadow 0.4s ease;
}
.solution-box:hover h3.elementor-heading-title {
  text-shadow:
    0 0 12px rgba(0,212,255,0.35),
    0 0 24px rgba(74,108,247,0.15);
}

/* ================================================================
   SERVICE BOXES — shimmer sweep + hover glow + floating icon
   (JS adds .ld-service-card to the parent container)
   The VISUAL card is .reveal-repeat (child of .ld-service-card) —
   that's where the background lives, so all effects go there.
================================================================ */
.ld-service-card {
  position: relative;
}

/* .reveal-repeat is the actual rendered card (has the background).
   We make it the stacking context for pseudo-elements. */
.ld-service-card > .reveal-repeat {
  position: relative;
  overflow: hidden;   /* clips the sweep shimmer */
  transition:
    transform  0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}

/* ── Sweep shimmer ──────────────────────────────────────────────
   A diagonal light reflection that crosses the card once every ~10s.
   --sb-delay is on .ld-service-card and inherited by .reveal-repeat. */
.ld-service-card > .reveal-repeat::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 45%;
  height: 160%;
  background: linear-gradient(
    105deg,
    transparent             0%,
    rgba(0,212,255,0.03)   30%,
    rgba(255,255,255,0.055) 50%,
    rgba(0,212,255,0.03)   70%,
    transparent            100%
  );
  transform: translateX(-160%) skewX(-12deg);
  animation: ldSweep 10s ease-in-out infinite;
  animation-delay: var(--sb-delay, 0s);
  pointer-events: none;
  z-index: 2;
}

@keyframes ldSweep {
  0%   { transform: translateX(-160%) skewX(-12deg); opacity: 0; }
  4%   { opacity: 1; }
  22%  { transform: translateX(310%)  skewX(-12deg); opacity: 0; }
  100% { transform: translateX(310%)  skewX(-12deg); opacity: 0; }
}

/* ── Hover border glow ──────────────────────────────────────────
   1-px cyan border + inner bloom, lives in ::after. */
.ld-service-card > .reveal-repeat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0,212,255,0);
  box-shadow: inset 0 0 0 rgba(0,212,255,0);
  transition:
    border-color 0.4s ease,
    box-shadow   0.4s ease;
  pointer-events: none;
  z-index: 3;
}

/* Hover: lift + subtle scale + border bloom */
.ld-service-card:hover > .reveal-repeat {
  transform: translateY(-5px) scale(1.018);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.45),
    0  0   28px rgba(0,212,255,0.07);
}
.ld-service-card:hover > .reveal-repeat::after {
  border-color: rgba(0,212,255,0.22);
  box-shadow:   inset 0 0 18px rgba(0,212,255,0.04);
}

/* Icon: float עדין + glow קל תמיד */
.service-box .elementor-icon {
  animation: ldIconFloat 6s ease-in-out infinite;
  animation-delay: var(--sb-delay, 0s);
}
.service-box .elementor-icon svg {
  filter: drop-shadow(0 0 4px rgba(0,212,255,0.22));
  transition: filter 0.4s ease;
}
.ld-service-card:hover .elementor-icon svg {
  filter:
    drop-shadow(0 0  8px rgba(0,212,255,0.65))
    drop-shadow(0 0 20px rgba(0,212,255,0.22));
}

/* Title glow on hover */
.service-box h3.elementor-heading-title {
  transition: text-shadow 0.4s ease;
}
.ld-service-card:hover .service-box h3.elementor-heading-title {
  text-shadow:
    0 0 12px rgba(0,212,255,0.35),
    0 0 24px rgba(74,108,247,0.15);
}

/* Mobile: disable hover + keep sweep */
@media (hover: none) {
  .solution-box:hover,
  .ld-service-card:hover {
    transform: none;
    box-shadow: none;
  }
  .ld-service-card:hover::after {
    border-color: rgba(0,212,255,0);
    box-shadow: none;
  }
}

/* ================================================================
   CIRCLE-MAIN — rotating halo (Flow / Secure / Edge icons)
   These are perfectly round cards so the spinning ring looks great
================================================================ */
.circle-main {
  position: relative;
}

/* Primary spark — ניצוץ קצר, מסתובב */
.circle-main::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--sb-a),
    transparent          0%,
    rgba(0,212,255,0.75) 8%,
    rgba(74,108,247,0.55) 16%,
    transparent          24%,
    transparent         100%
  );
  z-index: -1;
  opacity: 0.45;
  animation: sbRotate 9s linear infinite;
  animation-delay: var(--sb-delay, 0s);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Secondary spark offset 180° — עומק */
.circle-main::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from calc(var(--sb-a) + 180deg),
    transparent           0%,
    rgba(74,108,247,0.45) 7%,
    rgba(0,212,255,0.25)  13%,
    transparent           20%,
    transparent          100%
  );
  z-index: -1;
  opacity: 0.32;
  animation: sbRotate 9s linear infinite;
  animation-delay: calc(var(--sb-delay, 0s) - 4.5s);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Hover: glow התחזקות */
.circle-main:hover::before { opacity: 0.9; }
.circle-main:hover::after  { opacity: 0.6; }


/* ================================================================
   BRAINIUM GLOW HOVER CARDS
================================================================ */

/* הסקשן הראשי */
[data-id="b6b592e"] .e-con-inner{
    position: relative;
}

/* שני הטורים הימניים שמכילים את ה"כרטיסים" */
[data-id="b6b592e"] [data-id="335282a"],
[data-id="b6b592e"] [data-id="3ba5974"]{
    position: relative;
}

/* הבלוקים שעליהם יהיה האפקט */
[data-id="b6b592e"] .brainium-glow-card{
    position: relative;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    overflow: hidden;
    transition:
        background-color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
    will-change: transform, background-color;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

[data-id="b6b592e"] .brainium-glow-card:hover{
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.24);
    transform: translateY(-2px);
}

/* שכבת highlight פנימית עדינה */
[data-id="b6b592e"] .brainium-glow-card::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    background:
        radial-gradient(
            420px circle at var(--mx, 50%) var(--my, 50%),
            rgba(71, 160, 255, 0.18) 0%,
            rgba(71, 160, 255, 0.10) 18%,
            rgba(71, 160, 255, 0.04) 35%,
            rgba(71, 160, 255, 0.00) 62%
        );
}

[data-id="b6b592e"] .brainium-glow-card:hover::before{
    opacity: 1;
}

/* overlay card כמו בקודפן */
[data-id="b6b592e"] .brainium-glow-overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--opacity, 0);
    -webkit-mask: radial-gradient(
        22rem 22rem at var(--x, 50%) var(--y, 50%),
        #000 0%,
        rgba(0,0,0,0.95) 20%,
        rgba(0,0,0,0.7) 35%,
        transparent 65%
    );
    mask: radial-gradient(
        22rem 22rem at var(--x, 50%) var(--y, 50%),
        #000 0%,
        rgba(0,0,0,0.95) 20%,
        rgba(0,0,0,0.7) 35%,
        transparent 65%
    );
    transition: opacity .25s ease, mask .25s ease, -webkit-mask .25s ease;
    z-index: 5;
}

[data-id="b6b592e"] .brainium-glow-overlay-inner{
    display: grid;
    gap: inherit;
}

[data-id="b6b592e"] .brainium-glow-overlay-card{
    border-radius: 22px;
    border: 1px solid rgba(71,160,255,0.95);
    background:
        linear-gradient(180deg, rgba(71,160,255,0.12), rgba(71,160,255,0.04));
    box-shadow:
        0 0 0 1px rgba(71,160,255,0.28) inset,
        0 0 24px rgba(71,160,255,0.18),
        0 0 60px rgba(71,160,255,0.10);
}

/* שיהיה מעל הרקע ומתחת לתוכן המקורי */
[data-id="b6b592e"] .brainium-glow-card > *{
    position: relative;
    z-index: 2;
}

/* אם יש אייקון SVG – קצת חיזוק בזמן hover */
[data-id="b6b592e"] .brainium-glow-card:hover .elementor-icon svg,
[data-id="b6b592e"] .brainium-glow-card:hover .elementor-icon-box-icon svg{
    filter: drop-shadow(0 0 10px rgba(71,160,255,.25));
    transition: filter .35s ease;
}

/* מובייל – אפקט פחות אגרסיבי */
@media (max-width: 767px){
    [data-id="b6b592e"] .brainium-glow-card{
        border-radius: 18px;
    }

    [data-id="b6b592e"] .brainium-glow-card::before{
        background:
            radial-gradient(
                220px circle at var(--mx, 50%) var(--my, 50%),
                rgba(71, 160, 255, 0.14) 0%,
                rgba(71, 160, 255, 0.07) 30%,
                rgba(71, 160, 255, 0.00) 65%
            );
    }

    [data-id="b6b592e"] .brainium-glow-overlay{
        display: none; /* במובייל עדיף בלי שכבת overlay כבדה */
    }
}


/* ================================================================
   BENEFIT CARDS — Border Beam + SVG Icon Draw
   ──────────────────────────────────────────────
   שלב 1: בכל כרטיס ב-Elementor:
   Advanced → CSS Classes → הכנס: benefit-card
================================================================ */

.benefit-card {
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}

/* ── Cursor Spotlight ──────────────────────────────── */
.benefit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        280px circle at var(--cx, -200px) var(--cy, -200px),
        rgba(255, 255, 255, 0.10) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 2;
}

/* ── Border Beam ───────────────────────────────────── */
.benefit-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        var(--beam-angle, 0deg),
        transparent              0%,
        transparent             32%,
        rgba(0, 200, 255, 0.50) 45%,
        rgba(210, 248, 255, 1)  50%,
        rgba(0, 200, 255, 0.50) 55%,
        transparent             68%,
        transparent            100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

/* ── Hover: lift + outer glow ──────────────────────── */
.benefit-card:hover {
    box-shadow:
        0 0  0  1px rgba(0, 200, 255, 0.20),
        0 24px 55px rgba(0, 170, 255, 0.20),
        0  8px 22px rgba(0,   0,   0, 0.18);
}

/* Content above pseudo layers */
.benefit-card > * {
    position: relative;
    z-index: 4;
}

/* ── SVG icon glow on hover ────────────────────────── */
.benefit-card:hover .elementor-icon svg,
.benefit-card:hover .elementor-icon-box-icon svg {
    filter:
        drop-shadow(0 0  8px rgba(0, 200, 255, 0.85))
        drop-shadow(0 0 22px rgba(0, 160, 255, 0.40));
    transition: filter 0.4s ease;
}

/* ── Spring-back on leave ──────────────────────────── */
.benefit-card.is-leaving {
    transition:
        transform  0.55s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.55s ease !important;
}