.ngk-pricing-shell{
  --navy:#082b5c;
  --red:#e11d2e;
  --text:#10213f;
  --muted:#5f6b82;
  position:relative;
  left:50%;
  width:100vw;
  max-width:100vw;
  margin-left:-50vw;
  padding:18px 18px 28px;
  background-image:var(--ngk-bg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Bengali","Hind Siliguri",sans-serif;
  color:var(--text);
}

.ngk-pricing-shell *{box-sizing:border-box}

.ngk-pricing-wrap{
  width:min(1500px,calc(100vw - 36px));
  margin:0 auto;
}

.ngk-pricing-brand-zone{
  width:min(1500px,calc(100vw - 36px));
  margin:0 auto 8px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:190px;
  position:relative;
  z-index:2;
}

.ngk-pricing-logo{
  display:block;
  width:min(330px,28vw);
  max-height:175px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 7px 18px rgba(255,255,255,.40));
}

.glass-card{
  background:linear-gradient(180deg,rgba(255,255,255,.73),rgba(255,255,255,.53));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 14px 34px rgba(21,35,58,.13);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.ngk-pricing-intro{
  max-width:900px;
  margin:0 auto 14px;
  padding:16px 22px 14px;
  border-radius:22px;
  text-align:center;
}

.ngk-intro-icon{
  width:40px;
  height:40px;
  margin:0 auto 5px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(225,29,46,.11);
  color:var(--red);
  font-size:20px;
}

.ngk-pricing-intro h2{
  margin:0;
  font-size:clamp(26px,2.15vw,34px);
  line-height:1.18;
  color:#0b2350;
}

.ngk-intro-rule{
  width:34px;
  height:3px;
  border-radius:9px;
  background:var(--red);
  margin:8px auto;
}

.ngk-pricing-intro p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.ngk-pricing-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.ngk-plan{
  position:relative;
  min-width:0;
  min-height:300px;
  padding:14px 15px 12px;
  border-radius:20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  transition:transform .30s ease,box-shadow .30s ease,border-color .30s ease;
}

.ngk-plan:hover,
.ngk-plan:focus-within{
  transform:translateY(-7px);
  box-shadow:0 24px 48px rgba(21,35,58,.18);
  border-color:rgba(255,255,255,.95);
}

.ngk-plan:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.82) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .70s ease;
}

.ngk-plan:hover:before,
.ngk-plan:focus-within:before{transform:translateX(130%)}

.ngk-badge{
  position:absolute;
  right:8px;
  top:8px;
  padding:5px 9px;
  border-radius:999px;
  background:#25a455;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
}

.ngk-plan-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  margin-bottom:7px;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.ngk-plan-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ngk-plan h3{
  margin:0 0 7px;
  font-size:18px;
  line-height:1.2;
  color:#0a2452;
}

.ngk-desc{
  margin:0;
  color:#24395d;
  line-height:1.46;
  font-size:12.3px;
  min-height:56px;
}

.ngk-mini-rule{
  width:88px;
  height:1px;
  background:rgba(17,38,76,.16);
  margin:6px 0 8px;
}

.ngk-mini-rule span{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin:-3px auto 0;
  background:currentColor;
}

.ngk-price{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  min-height:34px;
  margin-bottom:9px;
  color:currentColor;
}

.ngk-price strong{
  font-size:24px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}

.ngk-price small{
  font-size:11px;
  line-height:1.2;
  color:#1c3155;
  padding-bottom:2px;
}

.ngk-select{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  background:currentColor;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:800;
  font-size:13px;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}

.ngk-select:hover,
.ngk-select:focus{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 12px 22px rgba(0,0,0,.16);
}

.ngk-details{
  margin-top:8px;
  color:#10213f!important;
  text-decoration:none!important;
  font-weight:700;
  font-size:11.5px;
}

.ngk-details span{
  display:inline-block;
  transition:transform .20s ease;
}

.ngk-details:hover span,
.ngk-details:focus span{transform:translateX(4px)}

.accent-pink{color:#ed4164}
.accent-orange{color:#f58220}
.accent-green{color:#55a630}
.accent-blue{color:#168fd0}
.accent-purple{color:#8d65cc}

.accent-pink .ngk-plan-icon{background:linear-gradient(135deg,#ff6c8b,#e93369)}
.accent-orange .ngk-plan-icon{background:linear-gradient(135deg,#ffab55,#f58220)}
.accent-green .ngk-plan-icon{background:linear-gradient(135deg,#8fd066,#55a630)}
.accent-blue .ngk-plan-icon{background:linear-gradient(135deg,#55b8e7,#168fd0)}
.accent-purple .ngk-plan-icon{background:linear-gradient(135deg,#b79aea,#8d65cc)}

.ngk-plan.is-featured{
  border-color:rgba(70,170,78,.42);
  box-shadow:0 18px 42px rgba(61,139,66,.16);
}

.ngk-trust{
  max-width:860px;
  margin:10px auto 0;
  padding:8px 18px;
  border-radius:18px;
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  font-size:11.5px;
  font-weight:700;
  color:#1e3153;
}

@media(max-width:1180px){
  .ngk-pricing-brand-zone{min-height:165px}
  .ngk-pricing-logo{width:min(310px,38vw);max-height:155px}
  .ngk-pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ngk-plan:nth-child(4){grid-column:1 / span 1}
  .ngk-plan:nth-child(5){grid-column:2 / span 1}
  .ngk-plan{min-height:340px}
}

@media(max-width:800px){
  .ngk-pricing-shell{padding-left:12px;padding-right:12px;padding-bottom:30px}
  .ngk-pricing-wrap,.ngk-pricing-brand-zone{width:calc(100vw - 24px)}
  .ngk-pricing-brand-zone{min-height:150px}
  .ngk-pricing-logo{width:min(285px,62vw);max-height:140px}
  .ngk-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ngk-plan:nth-child(4),.ngk-plan:nth-child(5){grid-column:auto}
  .ngk-plan:last-child{grid-column:1 / -1;width:min(520px,100%);justify-self:center}
}

@media(max-width:560px){
  .ngk-pricing-shell{padding:10px 10px 26px;background-position:center top}
  .ngk-pricing-wrap,.ngk-pricing-brand-zone{width:calc(100vw - 20px)}
  .ngk-pricing-brand-zone{min-height:135px;margin-bottom:6px}
  .ngk-pricing-logo{width:min(250px,74vw);max-height:125px}
  .ngk-pricing-grid{grid-template-columns:1fr;gap:14px}
  .ngk-plan,.ngk-plan:last-child{grid-column:auto;width:100%;min-height:0;padding:22px 18px 18px}
  .ngk-desc{min-height:0}
  .ngk-pricing-intro{padding:20px 16px;border-radius:18px}
  .ngk-pricing-intro h2{font-size:25px}
  .ngk-plan-icon{width:54px;height:54px}
  .ngk-plan h3{font-size:20px}
  .ngk-desc{font-size:13.5px}
  .ngk-price strong{font-size:28px}
  .ngk-select{min-height:46px;font-size:14px}
  .ngk-details{font-size:12.5px}
  .ngk-trust{gap:10px 16px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .ngk-plan,.ngk-plan:before,.ngk-select,.ngk-details span{transition:none!important}
}


/* v1.3.1 — approved whole-background treatment.
   Uses the newly approved scenery across the complete pricing section. */
@media (min-width:1181px){
  .ngk-pricing-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    background-position:center center;
  }

  .ngk-pricing-brand-zone{
    margin-top:0;
  }
}

@media (max-width:1180px){
  .ngk-pricing-shell{
    background-position:center top;
  }
}

/* v1.3.3 — ensure the plan CTA labels are visible on their accent buttons. */
.ngk-plan.accent-pink .ngk-select{background:#ed4164!important;color:#fff!important;}
.ngk-plan.accent-orange .ngk-select{background:#f58220!important;color:#fff!important;}
.ngk-plan.accent-green .ngk-select{background:#55a630!important;color:#fff!important;}
.ngk-plan.accent-blue .ngk-select{background:#168fd0!important;color:#fff!important;}
.ngk-plan.accent-purple .ngk-select{background:#8b63d9!important;color:#fff!important;}


/* v1.3.4 — editable discount seals for plan cards */
.ngk-discount-mark{
  position:absolute;
  top:10px;
  left:10px;
  z-index:4;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  padding:8px;
  border-radius:50%;
  background:linear-gradient(145deg,#ff314c,#cf102d);
  color:#fff;
  font-size:13px;
  line-height:1.05;
  font-weight:900;
  text-align:center;
  letter-spacing:.01em;
  text-transform:uppercase;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:
    0 8px 18px rgba(157,18,43,.24),
    inset 0 0 0 2px rgba(255,255,255,.18);
  transform:rotate(-7deg);
}

.ngk-discount-mark::after{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  background:inherit;
  clip-path:polygon(
    50% 0%,58% 9%,69% 4%,74% 16%,87% 14%,88% 27%,
    100% 33%,93% 44%,100% 54%,90% 62%,94% 75%,81% 78%,
    78% 91%,65% 88%,57% 100%,48% 92%,37% 99%,31% 87%,
    18% 91%,16% 78%,3% 74%,9% 62%,0% 53%,8% 43%,
    1% 32%,13% 27%,12% 14%,25% 16%,30% 4%,41% 9%
  );
}

.accent-orange .ngk-discount-mark{
  background:linear-gradient(145deg,#ff9d24,#ef6f00);
}
.accent-green .ngk-discount-mark{
  background:linear-gradient(145deg,#72c84b,#3f9f28);
}
.accent-blue .ngk-discount-mark{
  background:linear-gradient(145deg,#2d96e8,#0a67c7);
}
.accent-purple .ngk-discount-mark{
  background:linear-gradient(145deg,#9a76df,#6f42c1);
}

@media(max-width:560px){
  .ngk-discount-mark{
    width:58px;
    height:58px;
    top:9px;
    left:9px;
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ngk-discount-mark{transform:none}
}

/* v1.3.6 — MOBILE-ONLY premium treatment for the secondary CTA link.
   Visual-only change: no markup, settings, URLs, database, shortcode or desktop/tablet behavior changed. */
@media(max-width:560px){
  .ngk-details{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:min(78%,270px);
    min-height:44px;
    margin-top:12px;
    padding:10px 18px;
    border:1px solid rgba(255,255,255,.92);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:#10213f!important;
    background:
      linear-gradient(115deg,rgba(255,255,255,.94),rgba(250,245,255,.88),rgba(239,249,255,.92));
    background-size:220% 100%;
    box-shadow:
      0 8px 20px rgba(26,40,70,.11),
      inset 0 1px 0 rgba(255,255,255,.95);
    font-size:13.5px;
    font-weight:850;
    letter-spacing:.01em;
    line-height:1;
    text-decoration:none!important;
    -webkit-tap-highlight-color:transparent;
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      filter .22s ease;
    animation:ngkDetailsGradient 6s ease-in-out infinite alternate;
  }

  .ngk-details::before{
    content:"";
    position:absolute;
    left:5%;
    bottom:1px;
    width:62%;
    height:6px;
    z-index:1;
    border-radius:999px;
    background:linear-gradient(90deg,transparent 0%,#312e81 16%,#6d28d9 34%,#db2777 56%,#1d4ed8 78%,transparent 100%);
    box-shadow:
      0 0 9px rgba(109,40,217,.58),
      0 0 15px rgba(219,39,119,.34);
    opacity:.96;
    transform:translateX(-185%);
    animation:ngkDetailsSweep 4.2s ease-in-out infinite;
    pointer-events:none;
  }

  .ngk-details span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
    transform:translateX(0);
    transition:transform .22s ease;
  }

  .ngk-details:hover,
  .ngk-details:focus-visible{
    transform:translateY(-2px) scale(1.015);
    border-color:rgba(124,58,237,.34);
    box-shadow:
      0 12px 26px rgba(76,44,130,.16),
      0 0 0 3px rgba(124,58,237,.08),
      inset 0 1px 0 rgba(255,255,255,.96);
    outline:none;
  }

  .ngk-details:hover span,
  .ngk-details:focus-visible span{
    transform:translateX(5px);
  }

  .ngk-details:active{
    transform:translateY(0) scale(.985);
    filter:brightness(.99);
    box-shadow:
      0 6px 14px rgba(26,40,70,.12),
      inset 0 1px 0 rgba(255,255,255,.92);
  }

  .accent-pink .ngk-details{box-shadow:0 8px 20px rgba(237,65,100,.13),inset 0 1px 0 rgba(255,255,255,.95)}
  .accent-orange .ngk-details{box-shadow:0 8px 20px rgba(245,130,32,.13),inset 0 1px 0 rgba(255,255,255,.95)}
  .accent-green .ngk-details{box-shadow:0 8px 20px rgba(85,166,48,.13),inset 0 1px 0 rgba(255,255,255,.95)}
  .accent-blue .ngk-details{box-shadow:0 8px 20px rgba(22,143,208,.13),inset 0 1px 0 rgba(255,255,255,.95)}
  .accent-purple .ngk-details{box-shadow:0 8px 20px rgba(141,101,204,.13),inset 0 1px 0 rgba(255,255,255,.95)}
}

@keyframes ngkDetailsSweep{
  0%,58%{transform:translateX(-135%)}
  78%,100%{transform:translateX(135%)}
}

@keyframes ngkDetailsGradient{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}

@media(max-width:560px) and (prefers-reduced-motion:reduce){
  .ngk-details,
  .ngk-details::before,
  .ngk-details span{
    animation:none!important;
    transition:none!important;
  }
}