:root {
   --pu1: #7C3AED;
   --pu2: #9D4EDD;
   --pk1: #EC4899;
   --pk2: #F472B6;
   --grad: linear-gradient(135deg, #7C3AED, #EC4899);
   --dark: #050C18;
   --dark2: #080F1E;
   --dark3: #0C1428;
   --dark4: #101830;
   --dark5: #162038;
   --border: #1A2840;
   --border2: #1E3050;
   --text: #E8E8F8;
   --text2: #9AABBF;
   --white: #fff;
   --green: #10B981;
   --yellow: #F59E0B;
   --red: #EF4444;
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
   background: var(--dark);
   color: var(--white);
   font-family: 'Manrope', sans-serif;
  font-size: 18px;
   line-height: 1.75;
   overflow-x: hidden
}

p {
   color: var(--text);
  font-size: 18px;
   line-height: 1.75
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--white)
}

strong {
   color: var(--white)
}

img {
   max-width: 100%
}

/* ── TOPBAR ── */
.topbar {
   background: var(--grad);
   text-align: center;
   padding: 7px 20px;
   font-weight: 700;
   font-size: 16px;
   color: #fff;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 2px 20px rgba(124, 58, 237, .4);


   align-items: center;
  display: flex;
  justify-content: center;
  padding: 10px;
}

.tbadge {
   background: rgba(0, 0, 0, .25);
   padding: 3px 14px;
   border-radius: 4px;
   font-family: 'Bebas Neue', sans-serif;
   font-size: 22px;
   letter-spacing: 3px;
   color: #FFD700;
   display: inline-block;
   margin-left: 8px
}

/* ── TICKER ── */
.ticker {
   background: var(--dark2);
   border-bottom: 1px solid var(--border2);
   padding: 10px 0;
   overflow: hidden;
   position: relative
}

.ticker::before,
.ticker::after {
   content: '';
   position: absolute;
   top: 0;
   width: 80px;
   height: 100%;
   z-index: 2;
   pointer-events: none
}

.ticker::before {
   left: 0;
   background: linear-gradient(90deg, var(--dark2), transparent)
}

.ticker::after {
   right: 0;
   background: linear-gradient(-90deg, var(--dark2), transparent)
}

.ticker-track {
   display: flex;
   gap: 48px;
   animation: tickmove 35s linear infinite;
   width: max-content
}

@keyframes tickmove {
   from {
      transform: translateX(0)
   }

   to {
      transform: translateX(-50%)
   }
}

.tick-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text2);
   white-space: nowrap;
   font-weight: 600
}

.tick-item strong {
   color: var(--white)
}

.tdot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0
}

.tdg {
   background: var(--green);
   animation: blink 2s infinite
}

.tdp {
   background: var(--pu2);
   animation: blink 2s .7s infinite
}

.tdpk {
   background: var(--pk1);
   animation: blink 2s 1.4s infinite
}

@keyframes blink {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .2
   }
}

/* ── WARN ── */
.warn {
background: rgba(124, 58, 237, .08);
  border-bottom: 1px solid rgba(124, 58, 237, .2);
  text-align: center;
  padding: 10px 11px;
  font-weight: 598;
  font-size: 16px;
  color: #C4B5FD;
}

/* ══════════ HERO ══════════ */
.hero {
    background: url(../images/hero.png) no-repeat center center;
		background-size: cover;

   /* background: linear-gradient(160deg, #0A1228 0%, #060E1C 55%, #080C18 100%); */
   padding: 22px 0 30px;
   border-bottom: 1px solid var(--border2);
   position: relative;
   overflow: hidden
}

.hero::after {
   content: '';
   position: absolute;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(124, 58, 237, .12), transparent 65%);
   top: -200px;
   right: -150px;
   pointer-events: none
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(124, 58, 237, .12);
   border: 1px solid rgba(124, 58, 237, .3);
   color: #C4B5FD;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 8px 20px;
   border-radius: 6px;
   margin-bottom: 20px
}

.live-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--green);
   animation: blink 1.5s infinite;
   flex-shrink: 0
}

h1.h-title {
font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 4.5vw, 50px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -2px;
  margin-bottom: 18px;
  color: #fff;
}

.grad-text {
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.und {
   text-decoration: underline;
   text-decoration-color: var(--pk1);
   text-decoration-thickness: 3px;
   text-underline-offset: 6px
}

.zero-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   font-size: 16px;;
   font-weight: 700;
   color: #C4B5FD;
   margin-bottom: 30px
}

.zero-row span::before {
   content: '✦ ';
   color: #feb904;
}

.btn-cta {
   display: block;
   background: var(--grad);
   color: #fff !important;
   font-family: 'Manrope', sans-serif;
   font-size: 18px;
   font-weight: 800;
   padding: 19px 36px;
   border-radius: 10px;
   text-decoration: none;
   text-align: center;
   border: none;
   cursor: pointer;
   width: 100%;
   box-shadow: 0 10px 36px rgba(124, 58, 237, .38);
   animation: glw 2.5s ease-in-out infinite;
   transition: transform .2s
}

.btn-cta:hover {
   transform: translateY(-2px)
}

@keyframes glw {

   0%,
   100% {
      box-shadow: 0 10px 36px rgba(124, 58, 237, .38)
   }

   50% {
      box-shadow: 0 10px 52px rgba(236, 72, 153, .5)
   }
}

.cta-meta {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 11px;
   flex-wrap: wrap;
   font-size: 13px;
   color: var(--text2);
   font-weight: 600
}

.cta-meta span {
   display: flex;
   align-items: center;
   gap: 5px
}

/* VSL box */
.vsl-box {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 16px 60px rgba(0, 0, 0, .4)
}

.vsl-box::before {
   content: '';
   display: block;
   height: 3px;
   background: var(--grad)
}

.vsl-bar {
   background: rgba(124, 58, 237, .08);
   border-bottom: 1px solid var(--border);
   padding: 9px 16px
}

.vsl-bar span {
   font-size: 14px;
   font-weight: 800;
   color: #9D4EDD;
   letter-spacing: .5px
}

.vsl-inner {
   aspect-ratio: 16/9;
   background: linear-gradient(135deg, #060E1C, #0A1228);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative
}

.vsl-inner::after {
   content: 'FULL DEMO — 3:12 MINS';
   position: absolute;
   bottom: 12px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   color: rgba(255, 255, 255, .3)
}

.play-ring {
   width: 78px;
   height: 78px;
   border-radius: 50%;
   background: var(--grad);
   display: flex;
   align-items: center;
   justify-content: center;
   animation: pring 2s ease-out infinite;
   transition: transform .2s
}

.play-ring:hover {
   transform: scale(1.08)
}

@keyframes pring {
   0% {
      box-shadow: 0 0 0 0 rgba(124, 58, 237, .45)
   }

   70% {
      box-shadow: 0 0 0 22px rgba(124, 58, 237, 0)
   }

   100% {
      box-shadow: 0 0 0 0 rgba(124, 58, 237, 0)
   }
}

.vsl-foot {
   background: var(--dark4);
   border-top: 1px solid var(--border);
   padding: 12px 18px;
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   color: var(--text2);
   font-weight: 600
}

/* Features panel */
.feat-panel {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   padding: 24px
}

.fp-title {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0px;
   color: var(--pu2);
   margin-bottom: 14px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--border)
}

.fp-row {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   padding: 11px 0;
   padding: 16px 0;
   border-bottom: 1px solid var(--border)
}

.fp-row:last-child {
   border-bottom: none;
   padding-bottom: 0
}

.fck {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: rgba(16, 185, 129, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green);
   font-size: 10px;
   flex-shrink: 0;
   margin-top: 2px
}

.fp-row strong {
   color: #fff;
   font-size: 16px;
}

.fp-row span {
   color: var(--text2);
   font-size: 16px;
}

/* Price block */
.scarcity {
   background: rgba(245, 158, 11, .08);
   border: 1px solid rgba(245, 158, 11, .25);
   border-radius: 8px;
   padding: 10px 16px;
   text-align: center;
   font-size: 18px;;
   font-weight: 700;
   color: #FCD34D;
   margin-bottom: 14px
}

.price-blk {
   text-align: center;
   margin-bottom: 14px
}

.p-was {
font-size: 18px;
  color: #fff;
  text-decoration: line-through;
  font-weight: 700;
}

.p-now {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 70px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 3px
}

.p-note {
   font-size: 18px;
   color: var(--text1);
   font-weight: 600
}

.trust-row {
   display: flex;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 14px
}

.trust-pill {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 6px;
   padding: 6px 12px;
   font-size: 16px;
   font-weight: 700;
   color: var(--text1);
   display: flex;
   align-items: center;
   gap: 5px
}

.hero-cd {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 10px;
   padding: 14px 18px;
   text-align: center
}

.cd-lbl {
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--text2);
   margin-bottom: 8px
}

.cd-row {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 6px
}

.cdu {
   text-align: center;
   min-width: 58px
}

.cdn {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 50px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   display: block
}

.cdl {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text2)
}

.cdsep {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 50px;
   color: var(--border2);
   line-height: 1
}

/* ── STATS ── */
.stats-sec {
   background: var(--dark3);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   padding: 42px 0;
   padding: 10px 0;
}

.sn {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 54px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 5px
}

.sl {
font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text1);
}


/* ── SECTION HELPERS ── */
.eyebrow {
   display: inline-block;
   font-size: 18px;
   font-weight: 800;
   letter-spacing: 3px;
   text-transform: uppercase;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 10px
}

.sec-title {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(26px, 3.5vw, 42px);
   font-weight: 900;
   line-height: 1.1;
   letter-spacing: -2px;
   margin-bottom: 14px;
   color: #fff
}

.sec-rule {
   width: 48px;
   height: 3px;
   background: var(--grad);
   border-radius: 2px
}

.sec-sub {
  font-size: 18px;
   color: var(--text1);
   line-height: 1.75
}

/* ══════════════════════════════
   PERSON + CONTENT LAYOUT
   (MasterMind AI style)
══════════════════════════════ */
.person-section {
   padding: 80px 0
}

.person-section.bg2 {
   background: url(../images/bg1.png) no-repeat center center;
		background-size: cover;
      overflow: hidden;
}

.person-section.bg3 {
  background: url(../images/bg4.png) no-repeat center center;
		background-size: cover;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border)
}

.person-section.bg-dark {
  background: url(../images/bg2.png) no-repeat center center;
		background-size: cover;
}
.person-section.bg-white {
  background: url(../images/bg3.jpg) no-repeat center center;
		background-size: cover;
}

.person-section.bg5 {
  background: url(../images/bg5.png) no-repeat center center;
		background-size: cover;
}
/* Person avatar card */
.person-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 20px;
   padding: 36px 28px;
   text-align: center;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center
}

.p-avatar {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--dark4), var(--dark5));
   border: 3px solid transparent;
   background-clip: padding-box;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 54px;
   margin: 0 auto 16px;
   box-shadow: 0 0 0 3px var(--pu1)
}

.p-name {
   font-size: 22px;
   font-weight: 800;
   color: #fff;
   letter-spacing: -1px;
   margin-bottom: 4px
}

.p-role {
   font-size: 16px;;
   color: var(--text2);
   font-weight: 600;
   margin-bottom: 20px
}

.p-before-after {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   width: 100%;
   margin-bottom: 20px
}

.ba-box {
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 8px;
   padding: 12px
}

.ba-lbl {
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 4px
}

.ba-lbl.bef {
   color: var(--red)
}

.ba-lbl.aft {
   color: var(--green)
}

.ba-val {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 30px;
   line-height: 1;
   color: #fff
}

.ba-val.aft-v {
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.ba-desc {
   font-size: 11px;
   color: var(--text2);
   margin-top: 2px;
   font-weight: 600;
   line-height: 1.3
}

.p-result {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: rgba(16, 185, 129, .1);
   border: 1px solid rgba(16, 185, 129, .2);
   color: var(--green);
   font-size: 13px;
   font-weight: 700;
   padding: 7px 16px;
   border-radius: 100px
}

.p-metrics {
   display: flex;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap
}

.pm-box {
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 8px;
   padding: 10px 14px;
   text-align: center
}

.pm-n {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 28px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1
}

.pm-l {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text2)
}

/* Content side of person section */
.pc-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%
}

.pc-quote {
  font-size: 18px;
   color: var(--text);
   line-height: 1.85;
   font-style: italic;
   border-left: 3px solid var(--pu1);
   padding-left: 20px;
   margin: 20px 0
}

.pc-quote strong {
   color: #fff;
   font-style: normal
}

.pc-steps {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 20px
}

.pc-step {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 10px;
   padding: 14px 18px;
   display: flex;
   align-items: flex-start;
   gap: 14px
}

.pc-step-num {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--grad);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 800;
   color: #fff;
   flex-shrink: 0;
   margin-top: 1px
}

.pc-step p {
   margin: 0;
   font-size: 18px;
   color: var(--text)
}

.pc-step strong {
   color: #fff
}

/* ══════════════════════════════
   PROBLEM SECTION — PERSON LEFT
══════════════════════════════ */
.prob-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 18px 22px;
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 12px;
   margin-bottom: 12px
}

.prob-item:last-child {
   margin-bottom: 0
}

.prob-item .ico {
   font-size: 24px;
   flex-shrink: 0;
   margin-top: 2px
}

.prob-item p {
   font-size: 16px;
   color: var(--text);
   line-height: 1.75;
   margin: 0
}

.prob-item.green {
   border-color: rgba(16, 185, 129, .25);
   background: rgba(16, 185, 129, .04)
}

.quote-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   padding: 22px 24px;
   margin-bottom: 14px
}

.qm {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 52px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: .7;
   display: block;
   margin-bottom: 8px
}

.quote-card p {
   font-size: 16px;
   color: var(--text);
   font-style: italic;
   line-height: 1.8;
   margin: 0 0 14px
}

.qauth {
   display: flex;
   align-items: center;
   gap: 10px
}

.qav {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--dark5);
   border: 2px solid var(--pu1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0
}

.qname {
   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
   color: #fff
}

.qrole {
   font-size: 12px;
   color: var(--text2)
}

/* ══════════════════════════════
   DEMO CARDS
══════════════════════════════ */
.demo-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   overflow: hidden;
   height: 100%;
   transition: transform .3s, border-color .3s
}

.demo-card:hover {
   transform: translateY(-4px);
   border-color: var(--pu2)
}

.demo-preview {
   position: relative;
   aspect-ratio: 16/9;
   overflow: hidden
}

.demo-mock {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative
}

.demo-screen {
   width: 80%;
   height: 74%;
   border-radius: 6px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, .07)
}

.dplay {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   color: #fff
}

.dht {
   position: absolute;
   border-radius: 3px;
   font-size: 10px;
   font-weight: 800;
   padding: 3px 8px;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 4px
}

.dht::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   transform: translateX(-50%);
   border: 4px solid transparent
}

.dpu {
   background: #7C3AED;
   color: #fff
}

.dpu::after {
   border-top-color: #7C3AED
}

.dpk {
   background: #EC4899;
   color: #fff
}

.dpk::after {
   border-top-color: #EC4899
}

.dgr {
   background: #059669;
   color: #fff
}

.dgr::after {
   border-top-color: #059669
}

.dye {
   background: #D97706;
   color: #fff
}

.dye::after {
   border-top-color: #D97706
}

.dhd {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .6);
   flex-shrink: 0
}

.da1 {
   animation: dpop 3.5s ease-in-out infinite 0s
}

.da2 {
   animation: dpop 3.5s ease-in-out infinite 1.2s
}

.da3 {
   animation: dpop 3.5s ease-in-out infinite 2.4s
}

@keyframes dpop {

   0%,
   100% {
      opacity: 0;
      transform: scale(.85) translateY(4px)
   }

   15%,
   85% {
      opacity: 1;
      transform: scale(1) translateY(0)
   }
}

.demo-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .75);
   padding: 8px 12px;
   display: flex;
   justify-content: space-between
}

.demo-bar span {
   font-size: 11px;
   color: rgba(255, 255, 255, .6);
   font-weight: 700
}

.dpill {
   font-size: 10px;
   font-weight: 800;
   padding: 2px 8px;
   border-radius: 10px;
   color: #fff
}

.demo-body {
   padding: 15px 17px
}

.demo-body h5 {
font-size: 18px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: #fff;
   margin-bottom: 4px
}

.demo-body p {
   font-size: 16px;
   color: var(--text1);
   line-height: 1.5;
   margin: 0 0 7px
}

.dctr {
 font-size: 16px;
  font-weight: 800;
   color: var(--green);
   display: inline-flex;
   align-items: center;
   gap: 4px
}

/* ══════════════════════════════
   STEPS + DASHBOARD
══════════════════════════════ */
.step-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   padding: 28px 24px;
   text-align: center;
   height: 100%;
   position: relative;
   transition: border-color .3s, transform .3s
}

.step-card:hover {
   border-color: var(--pu2);
   transform: translateY(-4px)
}

.snbg {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 90px;
   background: var(--grad);
   -webkit-background-clip: text;
   /* -webkit-text-fill-color: transparent; */
   background-clip: text;
   opacity: .1;
   position: absolute;
   top: 0;
   right: 12px;
   line-height: 1
}

.step-ico {
   font-size: 38px;
   margin-bottom: 14px;
   display: block
}

.step-card h4 {
font-size: 22px;
  font-weight: 900;
   color: #fff;
   margin-bottom: 10px
}

.step-card p {
  font-size: 18px;
   color: var(--text1);
   line-height: 1.40;
}

.step-note {
   display: inline-block;
   background: rgba(124, 58, 237, .1);
   border: 1px solid rgba(124, 58, 237, .2);
   color: #C4B5FD;
   font-size: 12px;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: 100px;
   margin-top: 10px
}

/* Dashboard mock */
.dash-wrap {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   overflow: hidden
}

.dash-chrome {
   background: var(--dark4);
   border-bottom: 1px solid var(--border);
   padding: 10px 16px;
   display: flex;
   align-items: center;
   gap: 8px
}

.dc {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   display: inline-block
}

.dcr {
   background: #FF5F57
}

.dcy {
   background: #FFBD2E
}

.dcg2 {
   background: #28C840
}

.durl {
   flex: 1;
   background: var(--dark5);
   border-radius: 4px;
   padding: 5px 12px;
   font-size: 11px;
   color: var(--text2);
   font-weight: 600;
   margin: 0 10px
}

.dash-body {
   padding: 16px
}

.dtabs {
   display: flex;
   gap: 7px;
   margin-bottom: 12px;
   flex-wrap: wrap
}

.dtab {
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 5px;
   padding: 6px 13px;
   font-size: 11px;
   font-weight: 700;
   color: var(--text2);
   text-transform: uppercase;
   letter-spacing: .5px;
   cursor: pointer
}

.dtab.active {
   background: rgba(124, 58, 237, .15);
   border-color: rgba(124, 58, 237, .35);
   color: #C4B5FD
}

.urow {
   display: flex;
   gap: 7px;
   margin-bottom: 12px
}

.urow input {
   flex: 1;
   background: var(--dark5);
   border: 1px solid var(--border2);
   border-radius: 5px;
   padding: 8px 11px;
   font-size: 12px;
   color: var(--text);
   font-family: inherit
}

.urow .ubtn {
   background: var(--grad);
   color: #fff;
   border: none;
   border-radius: 5px;
   padding: 8px 16px;
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   white-space: nowrap
}

.vpm {
   aspect-ratio: 16/9;
   background: linear-gradient(135deg, #080F1E, #0C1428);
   border: 1px solid var(--border2);
   border-radius: 8px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   margin-bottom: 12px
}

.vtag {
   position: absolute;
   background: var(--pu1);
   color: #fff;
   font-size: 10px;
   font-weight: 800;
   padding: 3px 8px;
   border-radius: 3px;
   animation: dpop 3.5s ease-in-out infinite
}

.vtag2 {
   animation-delay: 1.5s;
   background: var(--pk1)
}

.vbar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .7);
   padding: 6px 11px;
   display: flex;
   justify-content: space-between
}

.vbar span {
   font-size: 11px;
   color: rgba(255, 255, 255, .4);
   font-weight: 600
}

.vbar .live {
   color: var(--green);
   font-weight: 800
}

.vstats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 7px
}

.vsb {
   background: var(--dark4);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 9px;
   text-align: center
}

.vsn {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 26px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1
}

.vsl {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text2)
}

/* ══════════════════════════════
   DND TAG BUILDER
══════════════════════════════ */
.dnd-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   padding: 22px 20px;
   height: 100%;
   transition: border-color .3s, transform .3s
}

.dnd-card:hover {
   border-color: var(--pu2);
   transform: translateY(-3px)
}

.dnd-ico {
   width: 46px;
   height: 46px;
   border-radius: 10px;
   background: rgba(124, 58, 237, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   margin-bottom: 12px
}

.dnd-card h5 {
font-size: 18px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: #fff;
   margin-bottom: 6px
}

.dnd-card p {
   font-size: 16px;
   color: var(--text1);
   line-height: 1.6;
   margin: 0
}

.bnew {
   background: var(--green);
   color: #fff;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: .5px;
   padding: 2px 6px;
   border-radius: 2px;
   margin-left: 6px;
   vertical-align: middle
}

.tbm {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   overflow: hidden
}

.tbm-head {
   background: var(--dark4);
   border-bottom: 1px solid var(--border);
   padding: 11px 16px;
   display: flex;
   justify-content: space-between
}

.tbm-head span {
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text2)
}

.tbm-body {
   padding: 16px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.tbm-field label {
   font-size: 18px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text1);
   display: block;
   margin-bottom: 4px
}

.tbm-field input,
.tbm-field select {
   width: 100%;
   background: var(--dark5);
   border: 1px solid var(--border2);
   border-radius: 5px;
   padding: 8px 11px;
   font-size: 16px;
   color: var(--text2);
   font-family: inherit
}

.tbm-preview {
   grid-column: 1/-1;
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 8px;
   padding: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px
}

.tpv-img {
   width: 40px;
   height: 40px;
   border-radius: 6px;
   background: rgba(124, 58, 237, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0
}

.tpv-cta {
   background: var(--grad);
   color: #fff;
   font-size: 11px;
   font-weight: 800;
   padding: 7px 14px;
   border-radius: 6px;
   white-space: nowrap;
   cursor: pointer
}

/* ══════════════════════════════
   FEATURES GRID
══════════════════════════════ */
.fc {
  background: #1E1046;
  border: 1px solid #F9FBFF;
   border-radius: 12px;
padding: 40px 20px 60px 20px;
   /* height: 100%; */
   transition: border-color .3s, transform .3s;
   position: relative;
   overflow: hidden
}

.fc::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--grad);
   opacity: 0;
   transition: opacity .3s
}

.fc:hover {
   border-color: var(--pu2);
   transform: translateY(-3px)
}

.fc:hover::before {
   opacity: 1
}

.fc-ico {
   width: 46px;
   height: 46px;
   border-radius: 10px;
   background: rgba(124, 58, 237, .1);
display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   margin-bottom: 13px
}
@media(min-width:767px) {
.fc h5 {
   font-size: 34px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: #fff;
   margin-bottom: 7px
}
}
@media(max-width:767px) {
.fc h5 {
   font-size: 24px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: #fff;
   margin-bottom: 7px
}
}

.fc p {
   font-size: 18px;
   color: var(--text1);
   line-height: 1.65;
   margin: 0
}

/* ══════════════════════════════
   WHO IS IT FOR — PERSON CARDS
══════════════════════════════ */
.who-persona {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 14px;
   padding: 24px;
   text-align: center;
   height: 100%;
   transition: border-color .3s, transform .3s
}

.who-persona:hover {
   border-color: var(--pu2);
   transform: translateY(-3px)
}

.persona-icon {
   font-size: 44px;
   margin-bottom: 12px;
   display: block
}

.persona-type {
   font-size: 16px;;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: #fff;
   margin-bottom: 8px
}

.persona-desc {
   font-size: 16px;;
   color: var(--text2);
   line-height: 1.6;
   margin: 0 0 14px
}

.persona-result {
   font-size: 13px;
   color: var(--green);
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px
}

/* ══════════════════════════════
   COMPARISON TABLE
══════════════════════════════ */
.ctbl {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--border2)
}

.ctbl th {
   padding: 15px;
   font-size: 18px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .5px;
   background: var(--dark4);
   color: var(--text1)
}

.ctbl th.hl {
   background: var(--grad);
   color: #fff
}

.ctbl th:first-child,
.ctbl td:first-child {
   text-align: left;
   padding-left: 20px
}

.ctbl td {
   padding: 12px 15px;
font-size: 18px;
   font-weight: 600;
   text-align: center;
border-top: 1px solid var(--border);
  color: #fff;
  background-color: #000;
}

.ctbl td.hl {
   background: rgba(124, 58, 237, .05)
}

.ctbl tr:hover td {
 background: rgba(255, 255, 255, .02);
  color: #000;
}

.cy {
   color: var(--green);
font-size: 18px;
}

.cn {
   color: var(--red);
font-size: 18px;
}

.cp {
   color: var(--yellow);
  font-size: 18px;
   font-weight: 700
}

/* ══════════════════════════════
   TESTIMONIALS — LARGE PERSON STYLE
══════════════════════════════ */
.testi-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 14px;
   overflow: hidden;
   height: 100%
}

.testi-person-bar {
   background: linear-gradient(135deg, var(--dark4), var(--dark3));
   border-bottom: 1px solid var(--border2);
   padding: 20px 24px;
   display: flex;
   align-items: center;
   gap: 16px
}

.testi-avatar {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: var(--dark5);
   border: 3px solid var(--pu1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   flex-shrink: 0
}

.testi-name {
   font-size: 18px;
   font-weight: 800;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .3px
}

.testi-role {
   font-size: 16px;
   color: var(--text);
   margin-top: 2px
}

.testi-rating {
   font-size: 16px;;
   color: var(--yellow);
   letter-spacing: 2px;
   margin-top: 4px
}

.testi-body {
   padding: 22px 24px
}

.testi-body p {
   font-size: 16px;
   color: var(--text);
   line-height: 1.8;
   font-style: italic;
   margin: 0
}

.testi-body p strong {
   color: #fff;
   font-style: normal
}

/* ══════════════════════════════
   VALUE STACK
══════════════════════════════ */
.vi {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid var(--border);
   border-bottom: 1px solid #DD46A4;
}

.vi:last-child {
   border-bottom: none
}

.vck {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(16, 185, 129, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green);
   font-size: 10px;
   flex-shrink: 0;
   margin-top: 2px
}

.vt {
   flex: 1;
  font-size: 20px;
   color: var(--text)
}

.vt strong {
   color: #fff;
   display: block
}

.vt span {
   color: var(--text1);
   font-size: 18px;
}

.vp {
color: #FFB900;
  font-size: 20px;
  text-decoration: line-through;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 3px;
}

.total-box {
   background: linear-gradient(135deg, #0A1830, #080F1E);
   border: 2px solid rgba(124, 58, 237, .35);
   border-radius: 14px;
   padding: 28px;
   text-align: center;
   margin-top: 20px
}

.tv-l {
font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 5px;
}

.tv-n {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 68px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1
}

.tv-s {
font-size: 20px;
  color: var(--text1);
}

/* Bonuses */
.bonus-card {
   background: rgba(16, 185, 129, .04);
   border: 1px solid rgba(16, 185, 129, .18);
   border-radius: 12px;
   padding: 22px;
   display: flex;
   gap: 18px;
   margin-bottom: 12px;
   transition: border-color .3s
}

.bonus-card:hover {
   border-color: var(--green)
}

.bico {
   font-size: 38px;
   flex-shrink: 0;
   line-height: 1
}

.btag {
   display: inline-block;
   background: var(--green);
   color: #fff;
font-size: 18px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 3px 8px;
   border-radius: 2px;
   margin-bottom: 6px
}

.bonus-card h6 {
font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 6px;
}

.bonus-card p {
font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 5px;
}

.bval {
   font-size: 11px;
   color: #1A2840;
   text-decoration: line-through
}

/* ══════════════════════════════
   FAQ — CARD GRID
══════════════════════════════ */
.faq-card {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 12px;
   padding: 22px 24px;
   height: 100%;
   transition: border-color .3s
}

.faq-card:hover {
   border-color: rgba(124, 58, 237, .4)
}

.faq-qrow {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 11px
}

.faq-num {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--grad);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 800;
   color: #fff;
   flex-shrink: 0;
   margin-top: 1px
}

.faq-q {
   font-size: 15px;
   font-weight: 800;
   color: #fff;
   line-height: 1.4
}

.faq-a {
   font-size: 16px;;
   color: var(--text2);
   line-height: 1.75;
   padding-left: 38px
}

/* ══════════════════════════════
   PRICE BOX
══════════════════════════════ */
.price-sec {
   background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(124, 58, 237, .08) 0%, transparent 55%), linear-gradient(180deg, #0A1228 0%, var(--dark) 100%);
   padding: 80px 0
}

.pbox {
   background: var(--dark2);
   border: 2px solid rgba(124, 58, 237, .4);
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.pbox::before {
   content: '';
   display: block;
   height: 4px;
   background: var(--grad);
   background-size: 200%;
   animation: psh 2s linear infinite
}

@keyframes psh {
   0% {
      background-position: 0%
   }

   100% {
      background-position: 200%
   }
}

.pbox-head {
   background: linear-gradient(135deg, #0A1830, #081020);
   border-bottom: 1px solid rgba(124, 58, 237, .2);
   padding: 36px;
   text-align: center
}

.pbadge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--grad);
   color: #fff;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 8px 20px;
   border-radius: 100px;
   margin-bottom: 20px
}

.pb-name {
   font-size: 28px;
   font-weight: 800;
   letter-spacing: -1px;
   color: #fff;
   margin-bottom: 7px
}

.pb-was {
   font-size: 16px;;
   color: #333;
   text-decoration: line-through;
   font-weight: 700;
   margin-bottom: 3px
}

.pb-price {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 100px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 5px
}

.pb-note {
   font-size: 16px;;
   color: var(--text2)
}

.pbox-body {
   padding: 32px 36px
}

.inc-list {
   list-style: none;
   padding: 0;
   margin-bottom: 24px
}

.inc-list li {
   padding: 11px 0;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: flex-start;
   gap: 11px;
   font-size: 15px;
   color: var(--text)
}

.inc-list li:last-child {
   border-bottom: none
}

.ick {
   color: var(--green);
   font-size: 16px;;
   flex-shrink: 0;
   margin-top: 2px
}

.ivl {
   color: #1A2840;
   font-size: 12px;
   text-decoration: line-through;
   margin-left: auto;
   flex-shrink: 0
}

/* Price countdown */
.pcd {
   background: rgba(124, 58, 237, .06);
   border: 1px solid rgba(124, 58, 237, .18);
   border-radius: 8px;
   padding: 14px 18px;
   text-align: center;
   margin-bottom: 22px
}

.pcd-l {
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--text2);
   margin-bottom: 8px
}

.pcd-r {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 6px
}

.pcdu {
   text-align: center;
   min-width: 56px
}

.pcdn {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 50px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   display: block
}

.pcdl {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text2)
}

.pcds {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 50px;
   color: var(--border2);
   line-height: 1
}

/* Guarantee */
.gtee {
   background: var(--dark3);
   border: 2px dashed var(--border2);
   border-radius: 12px;
   padding: 28px;
   display: flex;
   align-items: flex-start;
   gap: 18px;
   margin-top: 22px
}

.gico {
   font-size: 50px;
   flex-shrink: 0;
   line-height: 1
}

.gtee h5 {
   font-size: 16px;
   font-weight: 800;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 7px
}

.gtee p {
   font-size: 15px;
   color: var(--text2);
   line-height: 1.75;
   margin: 0
}

/* ══════════════════════════════
   FINAL CTA
══════════════════════════════ */
.final-sec {
   background: #060A14;
   border-top: 1px solid #102030;
   padding: 80px 0;
   text-align: center
}

.final-copy {
   max-width: 640px;
   margin: 0 auto 40px;
   font-size: 18px;
   color: var(--text);
   line-height: 1.9
}

/* FOOTER */
footer {
   background: #040A14;
   border-top: 1px solid #0E1A28;
   text-align: center;
   padding: 40px 24px;
   color: #2A3A50;
   font-size: 12px;
   line-height: 1.8
}

footer a {
   color: #FFF;
  text-decoration: none;
}

/* RESPONSIVE */
@media(max-width:991px) {
   .person-section .order-lg-1 {
      order: 1 !important
   }

   .person-section .order-lg-2 {
      order: 2 !important
   }
}

@media(max-width:768px) {
   .pb-price {
      font-size: 76px
   }

   .gtee {
      flex-direction: column
   }

   .bonus-card {
      flex-direction: column
   }

   .tbm-body {
      grid-template-columns: 1fr
   }

   .pbox-body {
      padding: 22px 20px
   }

   .pbox-head {
      padding: 24px 20px
   }
}

/* ══ MasterMind structural patterns ══ */

/* ZZ alternating */
.zz {
   display: flex;
   gap: 36px;
   align-items: center;
   margin-bottom: 28px
}

.zz:last-child {
   margin-bottom: 0
}

.zz-flip {
   flex-direction: row-reverse
}

.zz-i {
   flex: 0 0 280px;
   max-width: 280px
}

.zz-t {
   flex: 1
}

.zz-t h3 {
   font-size: clamp(18px, 2.5vw, 26px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px;
   line-height: 1.2
}

.zz-t p {
   font-size: 16px;
   color: var(--text);
   line-height: 1.75;
   margin-bottom: 8px
}

.pbox-zz {
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 200px;
   font-size: 72px
}

.pzz1 {
   background: linear-gradient(135deg, rgba(124, 58, 237, .2), rgba(20, 15, 60, .5))
}

.pzz2 {
   background: linear-gradient(135deg, rgba(236, 72, 153, .18), rgba(60, 15, 40, .5))
}

.pzz3 {
   background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(10, 40, 20, .5))
}

.pzz4 {
   background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(40, 25, 0, .5))
}

.pzz5 {
   background: linear-gradient(135deg, rgba(56, 189, 248, .15), rgba(5, 30, 50, .5))
}

@media(max-width:767px) {

   .zz,
   .zz-flip {
      flex-direction: column !important
   }

   .zz-i {
      flex: none;
      max-width: 100%;
      width: 100%
   }
}

/* CTA block */
.cta-blk {
   background: url(../images/cta-blk.png) no-repeat center center;
		background-size: cover;
   /* background: linear-gradient(135deg, #0A1830, #060E1C); */
   border-top: 1px solid var(--border2);
   border-bottom: 1px solid var(--border2);

   text-align: center;
   overflow: hidden;
}


@media (min-width: 768px) {
  .cta-card1 {
  border-radius: 40px;
    padding: 40px 20px 0px 20px;
    position: relative;
    box-shadow: 0px 0px 14px 0px #fff0;
    position: relative;
    background-color: #efefef12;
    border: 2px solid #ffffff2b;
  }


  .cta-blk {
padding: 70px 0 70px 0;
}
}
@media (max-width: 768px) {
  .cta-card1 {
    border-radius: 20px;
    padding: 40px 20px 0px 20px;
    position: relative;
  box-shadow: 0px 0px 14px 0px #fff0;
    position: relative;
   background-color: #efefef12;
    border: 2px solid #ffffff2b;
  }
    .cta-blk {
padding: 50px 0 50px 0;
}
}

.cta-blk .now {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(38px, 5vw, 54px);
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1
}

/* Endstime */
.endstime-section {
   background: rgba(236, 72, 153, .05);
   border-bottom: 1px solid rgba(236, 72, 153, .18);
   padding: 14px 0;
   text-align: center
}

.endstime-section p {
   font-size: clamp(15px, 2.5vw, 20px);
   font-weight: 700;
   color: var(--pk1);
   margin: 0
}

/* Offer stack */
.ofr {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 14px;
   overflow: hidden;
   max-width: 680px;
   margin: 0 auto
}

.oi {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px 22px;
   border-bottom: 1px solid var(--border)
}

.oi:last-child {
   border-bottom: none
}

.oi-n {
   font-size: 15px;
   font-weight: 700;
   color: #fff
}

.oi-v {
   font-size: 16px;;
   color: var(--text2);
   text-decoration: line-through;
   flex-shrink: 0;
   margin-left: 16px
}

.total-r {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 22px;
   background: rgba(124, 58, 237, .1);
   border-top: 2px solid rgba(124, 58, 237, .3)
}

.tl {
   font-size: 16px;
   font-weight: 900;
   color: #fff
}

.tv {
   font-size: 20px;
   font-weight: 900;
   color: var(--text2);
   text-decoration: line-through
}

.paybox {
   padding: 22px;
   text-align: center;
   background: var(--dark4)
}

.paybox p {
   font-size: 13px;
   color: var(--text2);
   margin-bottom: 4px
}

.pp {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 68px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin: 6px 0 4px
}

/* Order bump */
.bump {
   background: rgba(245, 158, 11, .05);
   border: 2px dashed rgba(245, 158, 11, .28);
   border-radius: 10px;
   padding: 16px 18px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-top: 14px
}

.bump input[type=checkbox] {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   margin-top: 3px;
   cursor: pointer;
   accent-color: var(--pu1)
}

.bump-ar {
   color: var(--yellow);
   font-size: 18px;
   font-weight: 900;
   flex-shrink: 0;
   line-height: 1.4
}

.bump h4 {
   font-size: 15px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 5px
}

.bump p {
   font-size: 13px;
   color: var(--text2);
   line-height: 1.55;
   margin-bottom: 4px
}

/* Guarantee box */
.guar-box {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   background: var(--dark3);
   border: 2px dashed var(--border2);
   border-radius: 12px;
   padding: 24px
}

.guar-ico {
   font-size: 56px;
   flex-shrink: 0;
   line-height: 1
}

.guar-box h5 {
  font-size: 18px;
   font-weight: 800;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 7px
}

.guar-box p {
   font-size: 15px;
   color: var(--text2);
   line-height: 1.75;
   margin: 0
}

@media(max-width:767px) {
   .guar-box {
      flex-direction: column
   }
}

/* PS Box */
.ps-box {
background: var(--dark3);
  border-left: 4px solid var(--pu1);
  border-radius: 0 10px 10px 0;
  padding: 60px 24px;
  max-width: 980px;
  margin: 27px auto 0;
}

.ps-box p {
font-size: 18px;
   color: var(--text);
   line-height: 1.8;
   margin-bottom: 8px
}

.ps-box p:last-child {
   margin-bottom: 0
}

/* See you inside */
.sec-seeyou {
background: url(../images/hero.png) no-repeat center top;
    background-size: auto;
  background-size: cover;
   border-top: 1px solid var(--border2);
   padding: 56px 0;
   text-align: center
}

/* FAQ accordion (tF pattern) */
.faq-acc-item {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 8px;
   margin-bottom: 10px;
   overflow: hidden
}

.faq-acc-q {
   padding: 18px 22px;
   font-weight: 700;
   font-size: 19px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   user-select: none;
   gap: 12px
}

.faq-acc-q:hover {
   color: #C4B5FD
}

.faq-acc-item.fopen .faq-acc-q {
   color: #C4B5FD
}

.tg-icon {
   color: var(--pu2);
   font-size: 18px;
   font-weight: 900;
   transition: transform .25s;
   flex-shrink: 0;
   display: inline-block
}

.faq-acc-item.fopen .tg-icon {
   transform: rotate(45deg)
}

.faq-acc-a {
   padding: 0 22px 16px;
   font-size: 17px;
   color: var(--text);
   line-height: 1.75;
   display: none
}

.faq-acc-item.fopen .faq-acc-a {
   display: block
}

/* EXIT POPUP — .show class pattern like MasterMind */
.exit-ov {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .85);
   z-index: 9999;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(4px)
}

.exit-ov.show {
   display: flex
}

.exit-box {
   background: var(--dark2);
   border: 2px solid rgba(124, 58, 237, .4);
   border-radius: 16px;
   max-width: 520px;
   width: 92%;
   overflow: hidden;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .8);
   position: relative
}

.exit-box-inner {
   padding: 28px 28px 24px
}

.exit-box::before {
   content: '';
   display: block;
   height: 4px;
   background: var(--grad)
}

.exit-x {
   position: absolute;
   top: 14px;
   right: 16px;
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text2);
   cursor: pointer;
   font-size: 15px;
   font-weight: 900;
   z-index: 2;
   line-height: 1
}

.exit-box h2 {
   font-size: 26px;
   font-weight: 800;
   color: #fff;
   text-align: center;
   line-height: 1.2;
   margin: 6px 0 8px
}

.exit-box>div>p,
.exit-box-inner p {
   font-size: 15px;
   color: var(--text);
   text-align: center;
   line-height: 1.6;
   margin-bottom: 8px
}

.coupon {
   background: rgba(245, 158, 11, .1);
   border: 2px dashed rgba(245, 158, 11, .4);
   border-radius: 8px;
   padding: 12px 20px;
   font-family: 'Bebas Neue', sans-serif;
   font-size: 24px;
   font-weight: 900;
   color: var(--yellow);
   text-align: center;
   letter-spacing: 3px;
   margin: 10px auto;
   max-width: 260px
}

/* ═══ V5 SECTION STYLES ═══ */
/* Problem section */
.prob-sec {
   background: var(--dark2);
   padding: 80px 0;
   overflow: hidden;
}

.prob-block {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-left: 3px solid var(--pk1);
   border-radius: 0 10px 10px 0;
   padding: 24px 28px;
   margin-bottom: 14px;
font-size: 18px;
   color: var(--text);
   line-height: 1.8
}

.prob-block:last-child {
   margin-bottom: 0
}

.prob-block strong {
   color: var(--white)
}

.quote-wrap {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 14px;
   padding: 22px 24px;
   margin-bottom: 16px;
   position: relative
}

.quote-mark {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 68px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: .7;
   display: block;
   margin-bottom: 8px
}

.quote-wrap p {
   font-size: 16px;
   color: var(--text);
   line-height: 1.8;
   font-style: italic;
   margin: 0 0 12px
}

.quote-wrap p strong {
   color: var(--white);
   font-style: normal
}

.quote-author {
   display: flex;
   align-items: center;
   gap: 10px
}

.qa-dot {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--dark5);
   border: 2px solid var(--pu1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0
}

.qa-name {
   font-size: 18px;
   font-weight: 800;
   color: var(--white);
   text-transform: uppercase;
   letter-spacing: .3px
}

.qa-role {
   font-size: 14px;
   color: var(--text1);
   margin-top: 1px
}

/* Calculator */
.calc-sec {

  background: url(../images/bg3.jpg) no-repeat center center;

  background-size: auto;
  background-size: cover;
   padding: 80px 0
}

.calc-box {
   background: var(--dark3);
   border: 1px solid var(--border2);
   border-radius: 16px;
   padding: 36px
}

.calc-lbl {
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text);
   display: block;
   margin-bottom: 8px
}

.calc-sl {
   width: 100%;
   -webkit-appearance: none;
   appearance: none;
   height: 6px;
   border-radius: 3px;
   background: var(--dark5);
   outline: none
}

.calc-sl::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--grad);
   cursor: pointer;
   border: 2px solid var(--dark3)
}

.calc-vv {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 30px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1
}

.calc-result {
   background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(236, 72, 153, .06));
   border: 1px solid rgba(124, 58, 237, .3);
   border-radius: 14px;
   padding: 30px;
   text-align: center
}

.calc-big {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 78px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 4px
}

.calc-rl {
font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text1);
  margin-bottom: 18px;
}

.calc-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px
}

.cg-box {
   background: var(--dark4);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 14px;
   text-align: center
}

.cg-n {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 30px;
   color: var(--white);
   line-height: 1
}

.cg-l {
   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text2)
}

/* Who is it for */
.who-sec {
   background: var(--dark3);
   border-top: 1px solid var(--border);
   padding: 80px 0
}

.who-card {
   background: var(--dark4);
   border: 1px solid var(--border2);
   border-radius: 10px;
   padding: 17px 20px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
font-size: 18px;
   color: var(--text);
   line-height: 1.55;
   /* height: 100%; */
   transition: border-color .3s
}

.who-card:hover {
   border-color: var(--pu2)
}

.who-ck {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(16, 185, 129, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green);
   font-size: 11px;
   flex-shrink: 0;
   margin-top: 2px
}

/* Stop / Start */
.ss-sec {
   background: url(../images/ss-sec.png) no-repeat center center;
  
    background-size: auto;
  background-size: cover;
   padding: 80px 0;
   background-attachment: fixed;
}

.ss-item {
background: #953DDA12;
  border: 1px solid #E5479E;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  color: #000;
  line-height: 1.55;
}

.ss-item:last-child {
   margin-bottom: 0
}

.ssx {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(239, 68, 68, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--red);
   font-size: 11px;
   flex-shrink: 0;
   font-weight: 800
}

.ssy {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(16, 185, 129, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--green);
   font-size: 11px;
   flex-shrink: 0
}

/* Price box */
.price-sec {
   /* background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(124, 58, 237, .08) 0%, transparent 55%), linear-gradient(180deg, #0A1228 0%, var(--dark) 100%); */


   background: url(../images/price-sec.png) no-repeat center center;
    background-size: auto;
  background-size: cover;
   padding: 80px 0
}

.pbox {
   background: #140028;
   border: 2px solid rgba(124, 58, 237, .45);
   border-radius: 18px;
   overflow: hidden;
   position: relative
}

.pbox::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--grad);
   background-size: 200%;
   animation: gsh 2s linear infinite
}

@keyframes gsh {
   0% {
      background-position: 0%
   }

   100% {
      background-position: 200%
   }
}

.pbox-head {
background: linear-gradient(135deg, #25133A, #25133A);
   border-bottom: 1px solid rgba(124, 58, 237, .25);
   padding: 38px;
   text-align: center
}

.pbadge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--grad);
   color: #fff;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 8px 20px;
   border-radius: 100px;
   margin-bottom: 20px
}

.pb-name {
   font-size: 30px;
   font-weight: 800;
   letter-spacing: -1px;
   margin-bottom: 7px;
   color: var(--white)
}

.pb-was {
  font-size: 18px;
  color: #FFF;
   text-decoration: line-through;
   margin-bottom: 4px
}

.pb-price {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 108px;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 5px
}

.pb-note {
font-size: 18px;
  color: var(--text);
}

.pbox-body {
   padding: 32px 36px
}

.inc-list {
   list-style: none;
   padding: 0;
   margin-bottom: 26px
}

.inc-list li {
   padding: 11px 0;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: flex-start;
   gap: 12px;
  font-size: 18px;
  color: var(--text1);
}

.inc-list li:last-child {
   border-bottom: none
}

.ick {
   color: var(--green);
   font-size: 16px;;
   flex-shrink: 0;
   margin-top: 2px
}

.ivl {
color: #FFB900;
  font-size: 18px;
  text-decoration: line-through;
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 900;
}

.cta-meta {
   text-align: center;
   font-size: 13px;
   color: var(--text2);
   margin-top: 12px;
   font-weight: 600
}

.gtee {
   background: var(--dark3);
   border: 2px dashed var(--border2);
   border-radius: 12px;
   padding: 28px;
   display: flex;
   align-items: flex-start;
   gap: 18px;
   margin-top: 24px
}

.gico {
   font-size: 50px;
   flex-shrink: 0;
   line-height: 1
}

.gtee h5 {
 font-size: 20px;
   font-weight: 800;
   background: var(--grad);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 7px
}

.gtee p {
   font-size: 18px;
   color: var(--text);
   line-height: 1.75;
   margin: 0
}

@media(max-width:767px) {
   .gtee {
      flex-direction: column
   }

   .pbox-body {
      padding: 22px 18px
   }

   .pbox-head {
      padding: 24px 18px
   }

   .pb-price {
      font-size: 78px
   }


   .btn-cta {
  padding: 12px 10px;

  margin-bottom: 10px;
}
}

/* Final section */
.final-sec {
background: url(../images/bg2.png) no-repeat center top;
    background-size: auto;
  background-size: cover;
   border-top: 1px solid #102030;
   padding: 80px 0;
   text-align: center
}

.final-copy {
   max-width: 640px;
   margin: 0 auto 40px;
   font-size: 18px;
color: #000;
   line-height: 1.9
}