/*
  E-Token page (e-token.php) — scoped redesign.
  Every rule is prefixed with .etoken-page so nothing here leaks onto the
  other product pages that share .solution-box, .about-img, .heading11,
  .main-video-section, etc. (defined in assets/css/main.css / responsive.css).

  Unlike semsto.php (which has two separate scoping anchors — the hero div
  itself plus a second wrapper around the rest of the body), e-token.php's
  hero div carries no page-specific class and there is no single top-level
  content wrapper, so ONE .etoken-page wrapper spans the hero + everything
  else. That means every selector below is a plain descendant selector
  (.etoken-page .main-video-section ...), never a compound selector
  (.etoken-page.main-video-section ...).
*/

/* ---------------------------------------------------------------------- */
/* 1) Section heading accent — a short brand-blue bar above every h2 so   */
/*    each section reads as a distinct, intentional block.                */
/* ---------------------------------------------------------------------- */
.etoken-page .heading11 h2{position: relative;padding-top: 18px;}
.etoken-page .heading11 h2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
}
.etoken-page .heading11.text-center h2::before{left: 50%;transform: translateX(-50%);}

/* ---------------------------------------------------------------------- */
/* 2) Hero — richer overlay + eyebrow badge for contrast and polish.      */
/* ---------------------------------------------------------------------- */
.etoken-page .main-video-section .video-overlay-main{
  background: linear-gradient(120deg, rgba(6,14,34,.82) 0%, rgba(24,88,202,.55) 55%, rgba(6,14,34,.78) 100%);
}
.etoken-page .hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.etoken-page .hero-badge .dot{width: 7px;height: 7px;border-radius: 50%;background: #4A8AFE;box-shadow: 0 0 0 4px rgba(74,138,254,.3);}
.etoken-page .main-video-section .section-content .title{text-shadow: 0 2px 18px rgba(0,0,0,.25);}

/* ---------------------------------------------------------------------- */
/* 3) Solution-box grid — swap the dashed spreadsheet look for a soft     */
/*    card grid with icon badges and a hover lift. e-token.php uses a     */
/*    2-column grid (col-lg-6) across two sections ("How E-Token Solution */
/*    Impact your Business" — 7 cards, and "Features of E-Token Solution" */
/*    — 12 cards), with the existing .border-right-0 / .border-bottom-0   */
/*    utility classes on the HTML marking edge cells.                     */
/*                                                                          */
/*    GOTCHA: border-top/border-left must be reset with explicit          */
/*    `none !important` on their own longhand properties, NEVER via a     */
/*    blanket `border-style/border-color` shorthand-ish declaration —     */
/*    the original grid never had a top/left border to begin with, so a   */
/*    blanket property would incorrectly draw one across the whole grid's */
/*    outer top/left edge. border-right/border-bottom are set WITHOUT     */
/*    !important so the more specific existing .border-right-0 rule       */
/*    (`.solution-section-main .solution-box.border-right-0`, main.css)   */
/*    and the !important Bootstrap `.border-bottom-0` utility still win   */
/*    on edge cells.                                                       */
/* ---------------------------------------------------------------------- */
.etoken-page .solution-section-main{
  background: var(--vtc-bg-bg-white);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(24,88,202,.08);
  overflow: hidden;
}
.etoken-page .solution-box{
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  padding: 34px 26px;
  transition: background-color .3s ease, transform .3s ease;
}
.etoken-page .solution-box:hover{transform: translateY(-4px);}
.etoken-page .solution-box .icon{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--vtc-bg-main-blue-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease;
}
.etoken-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);}
.etoken-page .solution-box .icon img{max-width: 30px;max-height: 30px;transition: filter .3s ease;}
.etoken-page .solution-box:hover .icon img{filter: brightness(0) invert(1);}
.etoken-page .solution-box .heading2 h3{font-size: 19px;}
.etoken-page .solution-box .heading1 p{font-size: 14.5px;line-height: 1.65;}

/* ---------------------------------------------------------------------- */
/* 4) Image columns — lift the plain SVG/photo illustrations off the flat */
/*    section background with a soft blob + card treatment.               */
/* ---------------------------------------------------------------------- */
.etoken-page .about-img{
  position: relative;
  padding: 30px;
}
.etoken-page .about-img::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(24,88,202,.10), rgba(24,88,202,0) 72%);
  border-radius: 24px;
  z-index: 0;
}
.etoken-page .about-img img{position: relative;z-index: 1;}

/* ---------------------------------------------------------------------- */
/* 5) Bottom CTA band — give the two closing buttons ("Book A Discovery   */
/*    Call Now" / "Download Brochure") a proper stage instead of sitting  */
/*    bare on the page background.                                        */
/* ---------------------------------------------------------------------- */
.etoken-page .container.d-flex.justify-content-center.my-lg-5{
  background: linear-gradient(135deg, var(--vtc-bg-main-blue-1), #fff);
  border: 1px solid var(--vtc-border-border-1);
  border-radius: 20px;
  padding: 40px 24px !important;
  margin-top: 0;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------------------------------------------------------------------- */
/* 6) "Industries Served" feature grid — futuristic/HUD-style card redesign */
/*    replacing the flat white box + thin grey border + plain blue icon.   */
/*    Cards: soft gradient surface, rounded-square icon badge that glows   */
/*    and inverts to white on hover, a laser-line accent that sweeps in    */
/*    across the top edge on hover, and a faint decimal index (01, 02...)  */
/*    in the corner for a dashboard feel — generated purely via CSS        */
/*    counters, no HTML changes needed. A very faint dot-grid sits behind  */
/*    the whole section for texture. Only `.etoken-features-section` is    */
/*    touched (the exact section from the "Industries Served" grid) — the  */
/*    identically-named class is also used, unscoped, on our-products.php  */
/*    and shares CSS in main.css, but since every rule here is prefixed    */
/*    with `.etoken-page`, none of it reaches that page.                   */
/* ---------------------------------------------------------------------- */
.etoken-page .etoken-features-section{position: relative; z-index: 0;}
.etoken-page .etoken-features-section::before{
  content: "";
  position: absolute;
  inset: -20px -20px auto -20px;
  height: calc(100% + 40px);
  background-image: radial-gradient(rgba(24,88,202,.14) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.etoken-page .etoken-features-section .row.g-4{counter-reset: etkFeature;}
.etoken-page .feature-box{
  position: relative;
  counter-increment: etkFeature;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
  border: 1px solid rgba(24,88,202,.12) !important;
  border-radius: 18px !important;
  padding: 38px 22px 26px !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease;
}
.etoken-page .feature-box::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1858CA, #4A8AFE, #8ec2ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.etoken-page .feature-box::after{
  content: counter(etkFeature, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(24,88,202,.30);
}
.etoken-page .feature-box:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(24,88,202,.16);
  border-color: rgba(24,88,202,.3) !important;
}
.etoken-page .feature-box:hover::before{transform: scaleX(1);}
/* NOTE: the badge background/glow lives on .icon-wrap (a <span> wrapping the
   <img>), and the color-invert filter is applied only to the <img> inside it.
   Putting both the background AND the filter on the SAME element was the bug
   here — `filter` renders the whole element (background included), so
   brightness(0) invert(1) inverted the blue gradient background to solid
   white right along with the icon, hiding it completely on hover. Keeping
   them on separate elements (wrapper = background, img = filter) fixes it. */
.etoken-page .feature-box .icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eaf2ff, #dfebff);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 6px 16px rgba(24,88,202,.10);
  transition: background .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.etoken-page .feature-box .icon-wrap img{
  display: block;
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
  transition: filter .4s ease;
}
.etoken-page .feature-box:hover .icon-wrap{
  background: linear-gradient(135deg, #1858CA, #4A8AFE);
  box-shadow: 0 0 0 6px rgba(74,138,254,.16), 0 12px 26px rgba(24,88,202,.35);
  transform: scale(1.08) rotate(-4deg);
}
.etoken-page .feature-box:hover .icon-wrap img{
  filter: brightness(0) invert(1);
}
.etoken-page .feature-box h3{
  position: relative;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--vtc-text-heading-text-2);
  transition: color .3s ease;
}
.etoken-page .feature-box:hover h3{color: var(--vtc-bg-main-bg-1);}

@media (max-width: 767px){
  .etoken-page .heading11 h2{padding-top: 16px;}
  .etoken-page .feature-box{padding: 30px 18px 20px !important;}
}