/* Home 4 — CEO walkthrough video section (adds to home3 base styles) */
.elva-pg .ceo-video{ padding:72px 0 84px; background:var(--cream-0,#F5F5F7); }
.elva-pg .ceo-video .cv-head{ max-width:760px; margin:0 auto 40px; text-align:center; }
.elva-pg .ceo-video .eyebrow{ justify-content:center; }
.elva-pg .ceo-video h2{
  font-family:var(--font-display); font-weight:600; letter-spacing:var(--tracking-tight);
  font-size:clamp(28px,3.4vw,42px); line-height:1.12; color:var(--ink-0); margin:14px 0 0;
}
.elva-pg .ceo-video .cv-desc{ font-size:17px; line-height:1.62; color:var(--ink-2); margin:16px 0 0; }

/* the player: cover photo with a play button; video swaps in on click */
.elva-pg .cv-player{
  position:relative; max-width:1040px; margin:0 auto; aspect-ratio:16/9;
  border-radius:20px; overflow:hidden; background:#0b0b10;
  box-shadow:0 40px 90px -40px rgba(20,20,50,.5), 0 4px 14px -4px rgba(20,20,50,.12);
  cursor:pointer;
}
.elva-pg .cv-player img.cv-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.elva-pg .cv-player video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.elva-pg .cv-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; cursor:pointer; z-index:2;
}



.elva-pg .cv-player.is-playing .cv-play,
.elva-pg .cv-player.is-playing .cv-cover{ display:none; }
@media (max-width:640px){
  
  
}

/* Home 4 hero — secondary "Watch Overview" ghost button + play icon */
.elva-pg .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.elva-pg .btn-ghost{
  background:#fff; color:#7A34E0;
  border:1.6px solid #8A3FFF;
  display:inline-flex; align-items:center; gap:9px;
  box-shadow:0 8px 24px -14px rgba(138,63,255,.55);
  transition:background .16s, border-color .16s, box-shadow .16s, transform .16s;
}
.elva-pg .btn-ghost:hover{
  background:rgba(138,63,255,.06); border-color:#7A34E0; color:#6a2bc9;
  box-shadow:0 12px 30px -14px rgba(138,63,255,.7); transform:translateY(-1px);
}
.elva-pg .btn-ghost .ico-play{ width:15px; height:15px; fill:currentColor; }
@media (max-width:520px){
  .elva-pg .hero-cta{ flex-direction:column; align-items:stretch; }
  .elva-pg .hero-cta .btn{ justify-content:center; }
}

/* ---- animated glowing line around the video frame (until played) ---- */
.elva-pg .cv-play{ position:absolute; inset:0; border:none; background:transparent; cursor:pointer; z-index:3; }

/* Moving-gradient border FRAME around the whole box.
   A full conic gradient wraps all four sides; rotating its start angle makes
   the colours flow continuously around the frame. A blurred copy underneath
   gives an outer glow. Both stop when the video plays. */
@property --cv-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.elva-pg .cv-glow{
  position:absolute; inset:0; z-index:2; border-radius:20px; pointer-events:none;
  padding:3.5px;                     /* border thickness */
  background:conic-gradient(from var(--cv-ang),
    #8A3FFF, #5B8DEF, #2AA99A, #5B8DEF, #8A3FFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:cvFlow 4.5s linear infinite;
}
/* blurred outer glow: same rotating gradient, sitting behind, blurred */
.elva-pg .cv-glow::before{
  content:""; position:absolute; inset:-2px; border-radius:22px; z-index:-1;
  background:conic-gradient(from var(--cv-ang),
    #8A3FFF, #5B8DEF, #2AA99A, #5B8DEF, #8A3FFF);
  filter:blur(13px); opacity:.55;
  animation:cvFlow 4.5s linear infinite;
}
@keyframes cvFlow{ to{ --cv-ang:360deg; } }

/* fallback: browsers without @property get an animated linear-gradient border via
   background-position shift (still reads as a moving gradient frame). */
@supports not (background: conic-gradient(from var(--cv-ang), red)){
  .elva-pg .cv-glow{
    background:linear-gradient(115deg,#8A3FFF,#5B8DEF,#2AA99A,#5B8DEF,#8A3FFF);
    background-size:300% 300%;
    animation:cvSlide 5s ease infinite;
  }
  .elva-pg .cv-glow::before{
    background:linear-gradient(115deg,#8A3FFF,#5B8DEF,#2AA99A,#5B8DEF,#8A3FFF);
    background-size:300% 300%;
    animation:cvSlide 5s ease infinite;
  }
  @keyframes cvSlide{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
}

/* hide the frame + cover once playing */
.elva-pg .cv-player.is-playing .cv-glow,
.elva-pg .cv-player.is-playing .cv-play,
.elva-pg .cv-player.is-playing .cv-cover{ display:none; }

@media (prefers-reduced-motion: reduce){
  .elva-pg .cv-glow, .elva-pg .cv-glow::before{ animation:none; }
}