/* ==========================================================================
   PRODUCT PAGE STYLES
   Order: page shell and hero -> page sections -> CTA -> footer
   ========================================================================== */

/* ==========================================================================
   Page: product | Inline section styles
   ========================================================================== */
.text-gradient-purple {
      background: linear-gradient(to right, #6366f1, #a855f7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .glass-nav {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
    }

    .hero-card-gradient {
      background: linear-gradient(
  90deg,
  rgba(235, 243, 253, 0.95) 48%,
  rgba(235, 243, 253, 0.70) 57%,
  rgba(235, 243, 253, 0.20) 65%,
  rgba(235, 243, 253, 0) 100%
);
    }

/* ==========================================================================
   Page: product | Inline section styles
   ========================================================================== */
/* ── Scrollbar ── */
.no-sb::-webkit-scrollbar{display:none}
.no-sb{scrollbar-width:none}

/* ── Card Width Morph ── */
.card-panel{flex-shrink:0;cursor:pointer;
  transition:width .65s cubic-bezier(.22,1,.36,1)}
  
/* Mobile widths */
@media (max-width: 640px) {
  /* Keep the expanded card inside the scroll track on small screens. */
  #carousel{
    gap:1rem;
    padding-inline:.5rem;
    scroll-padding-inline:.5rem;
    scroll-snap-stop:always;
    -webkit-overflow-scrolling:touch;
  }
  .card-panel,
  .card-panel.active{width:calc(100% - 1rem)}
}
/* Desktop widths */
@media (min-width: 641px) {
  #carousel{scroll-snap-type:none}
  .card-panel{width:280px}
  .card-panel.active{width:590px}
}

/* ── Expandable Content ── */
.expand-wrap{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s cubic-bezier(.22,1,.36,1),opacity .4s ease .1s}
.card-panel.active .expand-wrap{max-height:320px;opacity:1}

/* ── Pagination Dots ── */
.dots-wrap{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s ease,opacity .3s ease .08s}
.card-panel.active .dots-wrap{max-height:40px;opacity:1}

/* ── Illustration Morph ── */
.illust-box{position:absolute;bottom:-6%;right:-4%;width:68%;
  transform:scale(.62) translateX(12%);opacity:.45;
  transition:all .65s cubic-bezier(.22,1,.36,1)}
.card-panel.active .illust-box{transform:scale(1) translateX(0);opacity:1;width:56%;bottom:0;right:0}

/* ── Arrow Button Visibility ── */
.arrow-btn{position:absolute;bottom:24px;left:24px;z-index:10;width:44px;height:44px;
  border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s,opacity .3s,transform .3s}
.card-panel:hover .arrow-btn{transform:translateX(4px);box-shadow:0 10px 28px rgba(0,0,0,.15)}
/* Hide white arrow when active */
.card-panel.active .arrow-btn{opacity:0;transform:scale(0.8);pointer-events:none}

/* ── Active Number Badge ── */
.card-panel .num-badge{background:rgba(255,255,255,.7);transition:all .4s}
.card-panel.active .num-badge{background:var(--badge-bg);color:#fff;box-shadow:0 4px 14px var(--badge-shadow)}

/* ════════════════════════════════════════
   HOVER / ACTIVE ANIMATIONS
   ════════════════════════════════════════ */

/* ── Shared Keyframes ── */
@keyframes kFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes kFloatS{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}
@keyframes kBob{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-7px) rotate(2deg)}66%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes kTwinkle{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@keyframes kDashFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes kDbPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kSearchSwing{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-14deg) translateY(-3px)}75%{transform:rotate(14deg) translateY(-3px)}}
@keyframes kDocFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes kFileSlide{0%,100%{transform:translateX(0);opacity:.9}50%{transform:translateX(-5px);opacity:1}}
@keyframes kBarGrow{0%{transform:scaleY(.35);transform-origin:bottom}100%{transform:scaleY(1);transform-origin:bottom}}
@keyframes kGaugePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes kArrowMove{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-4px)}}
@keyframes kChartFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes kMagnify{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(18deg) scale(1.12)}}
@keyframes kItemSlide{0%,100%{transform:translateX(0);opacity:.85}50%{transform:translateX(5px);opacity:1}}
@keyframes kBrowsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes kCardShuffle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes kColSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes kCoinSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes kChartLine{0%{stroke-dasharray:0,1000}100%{stroke-dasharray:1000,0}}
@keyframes kHeartBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}
@keyframes kBrainPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.2)}}
@keyframes kSparkle{0%,100%{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}
@keyframes kShieldFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes kCheckPop{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes kNetworkPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ── Bindings: hover OR active ── */
/* Card 1 - Purple */
.card-panel:hover .a1-dash,.card-panel.active .a1-dash{animation:kDashFloat 3.5s ease-in-out infinite}
.card-panel:hover .a1-db,.card-panel.active .a1-db{animation:kDbPulse 2.8s ease-in-out .15s infinite}
.card-panel:hover .a1-badge,.card-panel.active .a1-badge{animation:kBob 3s ease-in-out .3s infinite}
.card-panel:hover .a1-star,.card-panel.active .a1-star{animation:kTwinkle 2s ease-in-out infinite}
.card-panel:hover .a1-circle,.card-panel.active .a1-circle{animation:kPulse 2.5s ease-in-out .2s infinite}

/* Card 2 - Blue */
.card-panel:hover .a2-doc,.card-panel.active .a2-doc{animation:kDocFloat 3s ease-in-out infinite}
.card-panel:hover .a2-search,.card-panel.active .a2-search{animation:kSearchSwing 2.2s ease-in-out .2s infinite}
.card-panel:hover .a2-file,.card-panel.active .a2-file{animation:kFileSlide 2.5s ease-in-out .4s infinite}
.card-panel:hover .a2-card,.card-panel.active .a2-card{animation:kFloatS 2.2s ease-in-out infinite}
.card-panel:hover .a2-line,.card-panel.active .a2-line{animation:kPulse 2s ease-in-out infinite}

/* Card 3 - Green */
.card-panel:hover .a3-bar,.card-panel.active .a3-bar{animation:kBarGrow 1.6s ease-out infinite alternate}
.card-panel:hover .a3-gauge,.card-panel.active .a3-gauge{animation:kGaugePulse 2.8s ease-in-out .25s infinite}
.card-panel:hover .a3-chart,.card-panel.active .a3-chart{animation:kChartFloat 3s ease-in-out infinite}
.card-panel:hover .a3-arrow,.card-panel.active .a3-arrow{animation:kArrowMove 2.2s ease-in-out .4s infinite}

/* Card 4 - Orange */
.card-panel:hover .a4-mag,.card-panel.active .a4-mag{animation:kMagnify 2.6s ease-in-out .15s infinite}
.card-panel:hover .a4-item,.card-panel.active .a4-item{animation:kItemSlide 2.2s ease-in-out infinite}
.card-panel:hover .a4-brow,.card-panel.active .a4-brow{animation:kBrowsFloat 3s ease-in-out infinite}
.card-panel:hover .a4-line,.card-panel.active .a4-line{animation:kPulse 2s ease-in-out infinite}

/* Card 5 - Purple */
.card-panel:hover .a5-card,.card-panel.active .a5-card{animation:kCardShuffle 2.2s ease-in-out infinite}
.card-panel:hover .a5-col,.card-panel.active .a5-col{animation:kColSlide 2.8s ease-in-out .2s infinite}
.card-panel:hover .a5-block,.card-panel.active .a5-block{animation:kFloatS 2.5s ease-in-out .3s infinite}

/* Card 6 - Amber (Finance) */
.card-panel:hover .a6-coin,.card-panel.active .a6-coin{animation:kCoinSpin 3s ease-in-out infinite}
.card-panel:hover .a6-chart,.card-panel.active .a6-chart{animation:kChartLine 2s ease-out forwards}
.card-panel:hover .a6-calc,.card-panel.active .a6-calc{animation:kFloatS 2.5s ease-in-out infinite}
.card-panel:hover .a6-dollar,.card-panel.active .a6-dollar{animation:kPulse 2s ease-in-out infinite}

/* Card 7 - Teal (Healthcare) */
.card-panel:hover .a7-heart,.card-panel.active .a7-heart{animation:kHeartBeat 1.5s ease-in-out infinite}
.card-panel:hover .a7-pulse,.card-panel.active .a7-pulse{animation:kChartFloat 2s ease-in-out infinite}
.card-panel:hover .a7-cross,.card-panel.active .a7-cross{animation:kFloat 3s ease-in-out infinite}
.card-panel:hover .a7-doc,.card-panel.active .a7-doc{animation:kDocFloat 2.5s ease-in-out .2s infinite}

/* Card 8 - Pink/Purple (AI) */
.card-panel:hover .a8-brain,.card-panel.active .a8-brain{animation:kBrainPulse 3s ease-in-out infinite}
.card-panel:hover .a8-sparkle,.card-panel.active .a8-sparkle{animation:kSparkle 2s ease-in-out infinite}
.card-panel:hover .a8-network,.card-panel.active .a8-network{animation:kNetworkPulse 2s ease-in-out infinite}
.card-panel:hover .a8-bot,.card-panel.active .a8-bot{animation:kFloatS 2.5s ease-in-out .3s infinite}

/* Card 9 - Indigo (Governance) */
.card-panel:hover .a9-shield,.card-panel.active .a9-shield{animation:kShieldFloat 3s ease-in-out infinite}
.card-panel:hover .a9-check,.card-panel.active .a9-check{animation:kCheckPop 2s ease-in-out infinite}
.card-panel:hover .a9-lock,.card-panel.active .a9-lock{animation:kFloat 2.5s ease-in-out infinite}
.card-panel:hover .a9-chart,.card-panel.active .a9-chart{animation:kBarGrow 1.5s ease-out infinite alternate}

/* ── Mobile Typography ── */
@media (max-width: 640px) {
  .card-panel h2 { font-size: 22px; line-height: 1.2; }
  .card-panel p { font-size: 13px; }
  .illust-box { width: 75%; }
  .card-panel.active .illust-box { width: 65%; }
}

/* Card 08: calm sky-blue AI palette, including its inline SVG illustration. */
article[data-i="7"] [fill="#EC4899"]{fill:#0284C7}
article[data-i="7"] [fill="#F472B6"]{fill:#38BDF8}
article[data-i="7"] [fill="#8B5CF6"]{fill:#2563EB}
article[data-i="7"] [fill="#A78BFA"]{fill:#60A5FA}
article[data-i="7"] [fill="#C4B5FD"]{fill:#93C5FD}
article[data-i="7"] [fill="#DDD6FE"]{fill:#BFDBFE}
article[data-i="7"] [fill="#F3E8FF"]{fill:#DBEAFE}
article[data-i="7"] [fill="#FDF2F8"]{fill:#F0F9FF}
article[data-i="7"] [fill="#FCE7F3"]{fill:#E0F2FE}
article[data-i="7"] [fill="#FBCFE8"]{fill:#BAE6FD}
article[data-i="7"] [fill="#F0FDFA"]{fill:#F0F9FF}
article[data-i="7"] [fill="#CCFBF1"]{fill:#CFFAFE}
article[data-i="7"] [stroke="#EC4899"]{stroke:#0284C7}
article[data-i="7"] [stroke="#C4B5FD"]{stroke:#93C5FD}
article[data-i="7"] [stroke="#14B8A6"]{stroke:#0EA5E9}
article[data-i="7"] [fill="#14B8A6"]{fill:#0EA5E9}
article[data-i="7"] [flood-color="#7C3AED"]{flood-color:#0369A1}
article[data-i="7"] [stop-color="#EC4899"]{stop-color:#0EA5E9}
article[data-i="7"] [stop-color="#8B5CF6"]{stop-color:#2563EB}

/* ==========================================================================
   Page: product | Inline section styles
   ========================================================================== */
/* ---------- SCOPED RESET / BASE ---------- */
#vibe3d, #vibe3d *{box-sizing:border-box}
#vibe3d{font-family:'Poppins', sans-serif;position:relative;overflow:hidden;
  background-color: white;}
#vibe3d button{font-family:'Poppins', sans-serif}
#vibe3d h2,#vibe3d h3,#vibe3d p{margin:0}

/* ---------- 3D STAGE ---------- */
#vibe3d .v3d-stage{perspective:1400px;perspective-origin:50% 42%;
  user-select:none;-webkit-user-select:none;touch-action:pan-y}
#vibe3d .v3d-rail{transform-style:preserve-3d}
#vibe3d .v3d-card{
  transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.2,.9,.25,1),opacity .5s ease,filter .6s ease,box-shadow .6s ease;
  will-change:transform,opacity,filter;position:absolute;left:50%;top:50%;
  height:520px;width:236px;cursor:pointer;overflow:hidden;border-radius:30px;padding:20px}
#vibe3d .v3d-rail.v3d-dragging .v3d-card{transition:none!important}
#vibe3d .v3d-shade{transition:opacity .6s ease;position:absolute;inset:0;border-radius:30px;
  background:#0f172a;opacity:0;pointer-events:none}
#vibe3d .v3d-floor{background:radial-gradient(60% 50% at 50% 0%,rgba(15,23,42,.16),transparent 70%);
  filter:blur(6px);position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none}

/* ---------- ANIMATED DATAVIZ ---------- */
#vibe3d .v3d-track{display:block;height:6px;border-radius:99px;background:rgba(100,116,139,.22);overflow:hidden}
#vibe3d .v3d-track > i{display:block;height:100%;width:0;border-radius:99px}
#vibe3d .v3d-col{transform:scaleY(0);transform-origin:bottom;border-radius:4px}
#vibe3d .v3d-spark{stroke-linecap:round;stroke-linejoin:round;fill:none}
#vibe3d .v3d-ring{transform:rotate(-90deg);transform-origin:50% 50%}

@keyframes v3dPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes v3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes v3dSheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes v3dSwipe{0%,100%{transform:translateX(-5px);opacity:.5}50%{transform:translateX(5px);opacity:1}}
#vibe3d .v3d-live{animation:v3dPulse 1.6s ease-in-out infinite}
#vibe3d .v3d-floaty{animation:v3dFloat 5s ease-in-out infinite}
#vibe3d .v3d-sheen{position:relative;overflow:hidden}
#vibe3d .v3d-sheen::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:v3dSheen 4.5s ease-in-out infinite}
#vibe3d .v3d-hint{animation:v3dSwipe 1.8s ease-in-out infinite}

#vibe3d #v3dPhoneInner{transition:opacity .3s ease,transform .3s ease}
#vibe3d #v3dPhoneScreen{transition:background-image .7s ease}
#vibe3d #v3dPhoneWrap{transform-origin:top center}

@media (prefers-reduced-motion:reduce){
  #vibe3d *{animation:none!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Page: product | Inline section styles
   ========================================================================== */
.dotted-line{
    background-image: radial-gradient(circle,#c9cbe4 1.6px,transparent 1.6px);
    background-size: 12px 12px; background-repeat: repeat-x; background-position:center;
  }
  /* slider slide widths */
  .slide{ flex: 0 0 100%; max-width:100%; }
  @media (min-width:1024px){ .slide{ flex:0 0 50%; max-width:50%; } }

  .no-bar::-webkit-scrollbar{ display:none }
  .no-bar{ -ms-overflow-style:none; scrollbar-width:none }

  @media (prefers-reduced-motion: reduce){
    #track{ transition:none !important }
  }

/* ==========================================================================
   Page: product | Inline section styles
   ========================================================================== */
/* slider slide widths */
  .slide{ flex:0 0 100%; max-width:100% }
  @media (min-width:1024px){ .slide{ flex:0 0 50%; max-width:50% } }

  /* dotted connector on timeline */
  .dotted-line{
    background-image:radial-gradient(circle,#d5d8ea 1.6px,transparent 1.6px);
    background-size:12px 12px; background-repeat:repeat-x; background-position:center;
  }

  /* hide scrollbars on mobile strips */
  .no-bar::-webkit-scrollbar{ display:none }
  .no-bar{ -ms-overflow-style:none; scrollbar-width:none }

  /* heading */
 
  @media (min-width:640px){ .industry-outcomes-heading h2 br{ display:inline } }

  /* left-side card media as background image */
  .media-bg{
    background-color: var(--media-tint);
    background-image: var(--media-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .media-bg.is-contain{
    background-size: contain;
  }
  .media-bg::after{
    content:"";
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top, rgba(15,23,42,.25), transparent 55%);
    pointer-events:none;
  }
  .media-bg.is-contain::after{ display:none }

  @media (prefers-reduced-motion:reduce){ #track{ transition:none!important } }