/* =========================================================
   EI CHARGE APP PAGE (CLEAN / OFFICIAL-LIKE)
   - Hero video
   - What is panel
   - Products (App + Merchant) continuous background
   - Stats + icon inside each stat (perfect aligned)
========================================================= */

/* =========================================================
   0) ROOT + TOKENS
========================================================= */
.blh-eicharge{
  --ei-bg1:#061a3a;
  --ei-bg2:#0a2a62;
  --ei-text:#ffffff;
  --ei-muted:rgba(255,255,255,.78);
  --ei-btn:#0b4bd6;

  /* align with header */
  --ei-content-width: 1200px;
  --ei-content-padding: 24px;

  color: var(--ei-text);
}

/* shared container */
.blh-eicharge .ei-container{
  max-width: var(--ei-content-width);
  margin: 0 auto;
  padding-left: var(--ei-content-padding);
  padding-right: var(--ei-content-padding);
}

.blh-eicharge .ei-center{ text-align:center; }

/* =========================================================
   1) HERO (VIDEO)
========================================================= */
.blh-eicharge .ei-hero{
  position:relative;
  min-height: 92vh;
  overflow:hidden;
  background:#000;
}

.blh-eicharge .ei-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.blh-eicharge .ei-hero__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(80% 80% at 30% 30%, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

.blh-eicharge .ei-hero__inner{
  position:relative;
  z-index:2;
  width:min(var(--ei-content-width), 92%);
  margin:0 auto;
  padding:24px 0;
}

.blh-eicharge .ei-hero__content{
  min-height: 92vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px 0 64px;
}

.blh-eicharge .ei-hero__content h1{
  font-size: clamp(34px, 4vw, 58px);
  line-height:1.05;
  margin:0 0 12px;
  font-weight:800;
}

.blh-eicharge .ei-hero__content p{
  margin:0;
  font-size: clamp(15px, 1.4vw, 20px);
  color: rgba(255,255,255,.85);
}

/* =========================================================
   2) PANELS BACKGROUND
========================================================= */
.blh-eicharge .ei-dark{
  background: linear-gradient(180deg, var(--ei-bg2), var(--ei-bg1));
}

/* =========================================================
   3) WHAT IS
========================================================= */
.blh-eicharge .ei-what{
  min-height: 86vh;
  display:flex;
  align-items:center;
  padding: 70px 0;
}

.blh-eicharge .ei-what h2{
  font-size: clamp(30px, 3.2vw, 54px);
  margin:0 0 16px;
  font-weight:800;
}

.blh-eicharge .ei-what p{
  max-width: 720px;
  margin:0 auto;
  color: var(--ei-muted);
  font-size: clamp(15px, 1.4vw, 20px);
  line-height:1.6;
}

/* =========================================================
   4) BUTTON
========================================================= */
.blh-eicharge .ei-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: var(--ei-btn);
  color:#fff;
  text-decoration:none;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight:700;
  box-shadow: 0 20px 60px rgba(11,75,214,.28);
  transition: transform .15s ease;
}
.blh-eicharge .ei-btn:hover{ transform: translateY(-1px); }

/* =========================================================
   5) PRODUCTS (APP + MERCHANT) — ONE CONTINUOUS BG
========================================================= */
.blh-eicharge .ei-products{
  background: linear-gradient(180deg, var(--ei-bg2), var(--ei-bg1));
  padding: 80px 0;
}

/* rows */
.blh-eicharge .ei-row{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  align-items:center;
  gap: 60px;
  padding: 60px 0;
}

/* reverse second row */
.blh-eicharge .ei-row--reverse{
  grid-template-columns: 1fr 1.1fr;
}
.blh-eicharge .ei-row--reverse .ei-media{ order:2; }
.blh-eicharge .ei-row--reverse .ei-copy{ order:1; }

/* media */
.blh-eicharge .ei-products .ei-media{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 320px;
}

.blh-eicharge .ei-products .ei-media img{
  width: min(520px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.45));
  border-radius: 18px;
}

/* glow */
.blh-eicharge .ei-products .ei-glow{
  position:absolute;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 40%, rgba(35,96,255,.55), rgba(35,96,255,0) 70%);
  filter: blur(6px);
  z-index:-1;
}

/* copy */
.blh-eicharge .ei-products .ei-copy h3{
  margin:0 0 10px;
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight:800;
}

.blh-eicharge .ei-products .ei-copy p{
  margin:0 0 26px;
  color: var(--ei-muted);
  font-size: clamp(14px, 1.2vw, 18px);
}

/* Desktop: try fit 2 rows in one viewport */
@media (min-width: 981px){
  .blh-eicharge .ei-products{
    min-height: 100vh;
    display:flex;
    align-items:center;
    padding: 0; /* row padding controls spacing */
  }

  .blh-eicharge .ei-row{
    padding: 48px 0;
  }

  .blh-eicharge .ei-products .ei-media img{
    width: min(460px, 100%);
  }

  .blh-eicharge .ei-products .ei-copy p{
    margin:0 0 20px;
  }

  .blh-eicharge .ei-btn{
    padding: 12px 22px;
  }
}

/* Mobile stack */
@media (max-width: 980px){
  .blh-eicharge .ei-products{
    padding: 70px 0;
  }

  .blh-eicharge .ei-row{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 50px 0;
  }

  .blh-eicharge .ei-row--reverse .ei-media,
  .blh-eicharge .ei-row--reverse .ei-copy{
    order: initial;
  }
}

/* =========================================================
   6) STATS (ICON INSIDE EACH COLUMN)
========================================================= */
.blh-eicharge .ei-stats{
  padding: 100px 0 90px;
}

.blh-eicharge .ei-stats__head h2{
  margin:0 0 60px;
  font-size: clamp(30px, 3.2vw, 56px);
  font-weight:800;
}

.blh-eicharge .ei-stats__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.blh-eicharge .ei-stat{
  text-align:center;
  padding: 12px 8px 0;
}

.blh-eicharge .ei-stat__num{
  font-size: clamp(48px, 5vw, 76px);
  font-weight:300;
  letter-spacing:.5px;
}

.blh-eicharge .ei-stat__line{
  width: 92%;
  height: 1px;
  margin: 18px auto;
  background: rgba(255,255,255,.22);
}

.blh-eicharge .ei-stat__label{
  font-size: clamp(14px, 1.2vw, 20px);
  color: rgba(255,255,255,.92);
}

/* icon under each label */
.blh-eicharge .ei-stat__icon{
  margin-top: 22px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 90px; /* keep equal height */
}

.blh-eicharge .ei-stat__icon img{
  width: 96px;   /* adjust: 80~120 */
  max-width: 96px;
  height:auto;
  display:block;
  opacity: .95;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
}

/* stats mobile */
@media (max-width: 980px){
  .blh-eicharge .ei-stats__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .blh-eicharge .ei-stat__icon{
    min-height: 78px;
    margin-top: 18px;
  }

  .blh-eicharge .ei-stat__icon img{
    width: 90px;
    max-width: 90px;
  }
}

/* =========================================================
   7) FORCE TEXT WHITE (page only)
   - keep this LAST to override theme/elementor
========================================================= */
.blh-eicharge,
.blh-eicharge *{
  color: #ffffff;
}

/* restore muted hierarchy after forcing white */
.blh-eicharge .ei-what p,
.blh-eicharge .ei-products .ei-copy p{
  color: var(--ei-muted);
}

/* =========================================================
   PRODUCTS IMAGES HOVER "POP"
========================================================= */

/* 让 hover 动画更顺 */
.blh-eicharge .ei-products .ei-media img{
  transition: transform .22s ease, filter .22s ease;
  will-change: transform, filter;
  transform: translateZ(0);
}

/* glow 也跟着动一点 */
.blh-eicharge .ei-products .ei-glow{
  transition: transform .22s ease, opacity .22s ease;
  opacity: .9;
}

/* hover：图突出来 */
@media (hover:hover){
  .blh-eicharge .ei-products .ei-media:hover img{
    transform: translateY(-10px) scale(1.03);
    filter: drop-shadow(0 34px 90px rgba(0,0,0,.55));
  }

  .blh-eicharge .ei-products .ei-media:hover .ei-glow{
    transform: scale(1.08);
    opacity: 1;
  }
}