/* =========================================================
   DIRECTOR AI — 4 STEP WORKFLOW
   Theme: DirectorAI Logo
   Navy / Violet / Royal Blue / Coral
========================================================= */

.drai-flow-section {
   position: relative;
   overflow: hidden;
   isolation: isolate;

   padding: 85px 0 100px;

   color: #ffffff;

   background:
      radial-gradient(
         circle at 12% 8%,
         rgba(133, 57, 232, 0.18),
         transparent 28%
      ),
      radial-gradient(
         circle at 88% 68%,
         rgba(76, 111, 232, 0.15),
         transparent 32%
      ),
      radial-gradient(
         circle at 52% 100%,
         rgba(255, 98, 108, 0.035),
         transparent 28%
      ),
      linear-gradient(
         180deg,
         #090d25 0%,
         #06091c 50%,
         #030616 100%
      );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.drai-flow-grid {
   position: absolute;
   inset: 0;

   z-index: -5;

   background-image:
      linear-gradient(
         rgba(132, 100, 239, 0.045) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(132, 100, 239, 0.045) 1px,
         transparent 1px
      );

   background-size: 44px 44px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         rgba(0,0,0,.95),
         rgba(0,0,0,.48),
         transparent
      );

   mask-image:
      linear-gradient(
         to bottom,
         rgba(0,0,0,.95),
         rgba(0,0,0,.48),
         transparent
      );
}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.drai-flow-glow {
   position: absolute;

   border-radius: 50%;

   filter: blur(125px);

   pointer-events: none;

   z-index: -4;
}

.drai-flow-glow-one {
   width: 450px;
   height: 450px;

   top: 90px;
   left: -270px;

   background: rgba(135, 56, 232, 0.25);
}

.drai-flow-glow-two {
   width: 500px;
   height: 500px;

   right: -330px;
   bottom: 60px;

   background: rgba(70, 101, 231, 0.22);
}


/* =========================================================
   HEADER BADGE
========================================================= */

.drai-flow-kicker {
   display: inline-flex;
   align-items: center;
   gap: 9px;

   margin-bottom: 20px;

   padding: 8px 15px;

   border:
      1px solid rgba(139, 91, 239, 0.30);

   border-radius: 50px;

   background:
      linear-gradient(
         135deg,
         rgba(126, 61, 218, 0.12),
         rgba(51, 68, 161, 0.09)
      );

   color: #c9baff;

   font-size: 11px;
   line-height: 1;

   font-weight: 700;

   letter-spacing: 1.8px;

   text-transform: uppercase;

   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 12px 35px rgba(0,0,0,.24),
      0 0 30px rgba(127, 68, 228, 0.06);

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}


.drai-flow-kicker-dot {
   width: 7px;
   height: 7px;

   border-radius: 50%;

   background: #9554f4;

   box-shadow:
      0 0 0 4px rgba(149,84,244,.10),
      0 0 15px rgba(149,84,244,.90);
}


/* =========================================================
   MAIN HEADING
========================================================= */

.drai-flow-heading {
max-width: 1260px;

   margin: 0 auto;

   color: #f9f9ff;

   font-size: 46px;
   line-height: 1.08;

   font-weight: 800;

   letter-spacing: -2px;
}


.drai-flow-heading span {
   background:
      linear-gradient(
         90deg,
         #9b42ed 0%,
         #7555e3 45%,
         #4e78e9 100%
      );

   -webkit-background-clip: text;
   background-clip: text;

   -webkit-text-fill-color: transparent;

   filter:
      drop-shadow(0 8px 22px rgba(117, 77, 224, 0.13));
}
.drai-flow-heading {
    max-width: 1200px;
    margin: 20px auto 0;
    text-align: center;
    line-height: 1.05;
}

.drai-flow-heading span {
    color: #7447e8;
}


.drai-flow-subheading {
   max-width: 780px;

   margin: 20px auto 0;

  color: #fff;

   font-size: 19px;
   line-height: 1.6;
}


/* =========================================================
   TIMELINE
========================================================= */

.drai-flow-timeline {
   position: relative;

   max-width: 1240px;

   margin: 75px auto 0;
}


.drai-flow-timeline::before {
   content: "";

   position: absolute;

   top: 30px;
   bottom: 50px;

   left: 50%;

   width: 1px;

   transform: translateX(-50%);

   background:
      linear-gradient(
         to bottom,
         transparent 0%,
         rgba(142, 75, 235, 0.22) 8%,
         rgba(113, 78, 225, 0.50) 42%,
         rgba(76, 112, 232, 0.42) 72%,
         rgba(255, 98, 108, 0.14) 92%,
         transparent 100%
      );

   box-shadow:
      0 0 18px rgba(109, 74, 223, 0.12);
}


/* =========================================================
   EACH STEP
========================================================= */

.drai-flow-row {
   position: relative;

   padding: 38px 0 92px;
}

.drai-flow-row-last {
   padding-bottom: 0;
}


/* =========================================================
   STEP NUMBER
========================================================= */

.drai-flow-step-marker {
   position: absolute;

   left: 50%;
   top: 50%;

   z-index: 5;

   width: 58px;
   height: 58px;

   display: flex;
   align-items: center;
   justify-content: center;

   transform: translate(-50%, -50%);

   border:
      1px solid rgba(139, 87, 239, 0.42);

   border-radius: 50%;

   background:
      linear-gradient(
         145deg,
         rgba(41, 29, 89, 0.98),
         rgba(9, 12, 38, 0.98)
      );

   box-shadow:
      0 0 0 8px rgba(6, 9, 29, 0.92),
      0 0 38px rgba(125, 69, 226, 0.18),
      inset 0 1px 0 rgba(255,255,255,.08);
}


.drai-flow-step-marker::before {
   content: "";

   position: absolute;

   inset: 7px;

   border-radius: 50%;

   border:
      1px solid rgba(139, 91, 235, 0.18);
}


.drai-flow-step-no {
   position: relative;

   z-index: 2;

   color: #a779ff;

   font-size: 14px;
   font-weight: 800;

   letter-spacing: 1px;
}


/* =========================================================
   COPY
========================================================= */

.drai-flow-copy {
   position: relative;

   padding: 15px 62px 15px 15px;
}

.drai-flow-row-reverse .drai-flow-copy {
   padding: 15px 15px 15px 62px;
}


.drai-flow-step-label {
margin-bottom: 18px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 2.4px;
  background-color: #9346eb;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 54px;
}


.drai-flow-title {
   margin: 0 0 18px;

   color: #f7f7ff;

   font-size: 34px;
   line-height: 1.15;

   font-weight: 800;

   letter-spacing: -1.1px;
}


.drai-flow-text {
   margin: 0 0 16px;

   color: #aeb2c5;

   font-size: 17px;
   line-height: 1.72;

   font-weight: 400;
}

.drai-flow-text:last-child {
   margin-bottom: 0;
}


.drai-flow-text-strong {
   color: #f0efff;

   font-weight: 700;
}


/* =========================================================
   STEP 1 QUOTE BOX
========================================================= */

.drai-flow-quote-box {
   position: relative;

   display: flex;
   flex-direction: column;
   gap: 7px;

   margin: 20px 0;

   padding: 18px 20px 18px 23px;

   overflow: hidden;

   border:
      1px solid rgba(130, 85, 229, 0.18);

   border-radius: 8px;

   background:
      linear-gradient(
         120deg,
         rgba(130, 61, 222, 0.09),
         rgba(67, 92, 212, 0.045)
      );

   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035);
}


.drai-flow-quote-box::before {
   content: "";

   position: absolute;

   top: 12px;
   bottom: 12px;
   left: 0;

   width: 2px;

   background:
      linear-gradient(
         to bottom,
         #9b3feb,
         #526ce5
      );

   box-shadow:
      0 0 17px rgba(130, 66, 229, .50);
}


.drai-flow-quote-box span {
   color: #c7c9dc;

   font-size: 15px;
   line-height: 1.45;

   font-style: italic;
}


/* =========================================================
   VISUAL / SCREEN CARD
========================================================= */

.drai-flow-visual {
   position: relative;

   margin-left: 62px;

   overflow: hidden;

   border:
      1px solid rgba(125, 91, 223, 0.20);

   border-radius: 14px;

   background:
      linear-gradient(
         145deg,
         rgba(19, 23, 59, 0.97),
         rgba(6, 9, 28, 0.99)
      );

   box-shadow:
      0 35px 80px rgba(0,0,0,.38),
      0 0 55px rgba(113, 64, 211, 0.055),
      inset 0 1px 0 rgba(255,255,255,.05);
}


.drai-flow-row-reverse .drai-flow-visual {
   margin-left: 0;
   margin-right: 62px;
}


/* Purple corner glow */

.drai-flow-visual::before {
   content: "";

   position: absolute;

   z-index: 3;

   width: 170px;
   height: 170px;

   top: -115px;
   right: -75px;

   border-radius: 50%;

   background:
      rgba(137, 59, 231, 0.21);

   filter: blur(52px);

   pointer-events: none;
}


/* =========================================================
   WINDOW BAR
========================================================= */

.drai-flow-visual-top {
   height: 43px;

   display: flex;
   align-items: center;
   justify-content: space-between;

   padding: 0 15px;

   border-bottom:
      1px solid rgba(255,255,255,.055);

   background:
      rgba(255,255,255,.018);

   color: #737991;

   font-size: 9px;

   font-weight: 700;

   letter-spacing: 1.4px;
}


.drai-flow-window-dots {
   display: flex;
   gap: 5px;
}


.drai-flow-window-dots i {
   display: block;

   width: 5px;
   height: 5px;

   border-radius: 50%;

   background:
      rgba(128, 133, 164, 0.42);
}


/* Logo coral detail */

.drai-flow-window-dots i:first-child {
   background: #ff6570;

   box-shadow:
      0 0 9px rgba(255,101,112,0.60);
}


.drai-flow-window-dots i:nth-child(2) {
   background: #9360ef;
}


.drai-flow-window-dots i:nth-child(3) {
   background: #5275e6;
}


/* =========================================================
   IMAGE SLOT
========================================================= */

.drai-flow-image-slot {
   position: relative;

   min-height: 330px;

   display: flex;
   align-items: center;
   justify-content: center;

   padding: 30px;

   overflow: hidden;

   background:
      radial-gradient(
         circle at 48% 45%,
         rgba(120, 65, 225, 0.15),
         transparent 38%
      ),
      radial-gradient(
         circle at 75% 68%,
         rgba(72, 107, 231, 0.10),
         transparent 38%
      ),
      linear-gradient(
         135deg,
         rgba(15, 19, 50, 0.99),
         rgba(5, 8, 26, 0.99)
      );
}


/* Inner interface grid */

.drai-flow-image-slot::before {
   content: "";

   position: absolute;
   inset: 0;

   background-image:
      linear-gradient(
         rgba(127, 90, 226, 0.035) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(127, 90, 226, 0.035) 1px,
         transparent 1px
      );

   background-size: 24px 24px;
}


/* Purple → blue scan line */

.drai-flow-image-slot::after {
   content: "";

   position: absolute;

   left: 10%;
   right: 10%;
   top: 50%;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(151, 70, 237, 0.40),
         rgba(70, 108, 231, 0.42),
         transparent
      );

   box-shadow:
      0 0 20px rgba(117, 77, 225, 0.18);
}


.drai-flow-image-slot span {
   position: relative;

   z-index: 2;

   padding: 10px 16px;

   color: #858aa5;

   font-size: 12px;

   font-weight: 700;

   letter-spacing: 1px;

   text-align: center;

   text-transform: uppercase;

   border:
      1px dashed rgba(129, 91, 225, 0.28);

   border-radius: 6px;

   background:
      rgba(5, 8, 27, 0.72);
}


/* =========================================================
   FINAL OUTPUT CARD
========================================================= */

.drai-flow-visual-final {
   border-color:
      rgba(135, 83, 235, 0.34);

   box-shadow:
      0 35px 95px rgba(0,0,0,.44),
      0 0 70px rgba(124, 67, 222, 0.10),
      inset 0 1px 0 rgba(255,255,255,.06);
}


/* =========================================================
   HOVER EFFECT
========================================================= */

@media (hover: hover) {

   .drai-flow-visual {
      transition:
         transform .35s ease,
         border-color .35s ease,
         box-shadow .35s ease;
   }


   .drai-flow-visual:hover {
      transform: translateY(-6px);

      border-color:
         rgba(139, 89, 236, 0.38);

      box-shadow:
         0 42px 100px rgba(0,0,0,.47),
         0 0 65px rgba(124, 70, 225, 0.11),
         inset 0 1px 0 rgba(255,255,255,.065);
   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

   .drai-flow-heading {
      font-size: 42px;
   }


   .drai-flow-copy {
      padding-right: 48px;
   }


   .drai-flow-row-reverse .drai-flow-copy {
      padding-left: 48px;
   }


   .drai-flow-visual {
      margin-left: 48px;
   }


   .drai-flow-row-reverse .drai-flow-visual {
      margin-right: 48px;
   }

}


/* =========================================================
   STACKED TABLET / MOBILE
========================================================= */

@media (max-width: 991px) {

   .drai-flow-section {
      padding: 65px 0 70px;
   }


   .drai-flow-timeline {
      margin-top: 55px;
   }


   .drai-flow-timeline::before {
      left: 25px;

      transform: none;
   }


   .drai-flow-row {
      padding:
         10px 0 75px 65px;
   }


   .drai-flow-step-marker {
      left: 25px;
      top: 0;

      width: 50px;
      height: 50px;

      transform: translate(-50%, 0);
   }


   .drai-flow-copy,
   .drai-flow-row-reverse .drai-flow-copy {
      padding: 0;

      margin-bottom: 28px;
   }


   .drai-flow-visual,
   .drai-flow-row-reverse .drai-flow-visual {
      margin: 0;
   }


   .drai-flow-image-slot {
      min-height: 300px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

   .drai-flow-section {
      padding: 50px 0 58px;
   }


   .drai-flow-kicker {
      margin-bottom: 15px;

      padding: 7px 12px;

      font-size: 9px;

      letter-spacing: 1.2px;
   }


   .drai-flow-heading {
      font-size: 34px;
      line-height: 1.12;

      letter-spacing: -1.25px;
   }


   .drai-flow-subheading {
      margin-top: 15px;

      font-size: 16px;
      line-height: 1.55;
   }


   .drai-flow-timeline {
      margin-top: 45px;
   }


   .drai-flow-timeline::before {
      left: 20px;
   }


   .drai-flow-row {
      padding:
         5px 0 60px 52px;
   }


   .drai-flow-step-marker {
      left: 20px;

      width: 40px;
      height: 40px;

      box-shadow:
         0 0 0 6px rgba(6,9,29,.94),
         0 0 28px rgba(128,71,225,.15);
   }


   .drai-flow-step-marker::before {
      inset: 5px;
   }


   .drai-flow-step-no {
      font-size: 11px;
   }


   .drai-flow-step-label {
      margin-bottom: 9px;

      font-size: 10px;
   }


   .drai-flow-title {
      margin-bottom: 13px;

      font-size: 27px;
      line-height: 1.16;

      letter-spacing: -.7px;
   }


   .drai-flow-text {
      margin-bottom: 13px;

      font-size: 15px;
      line-height: 1.65;
   }


   .drai-flow-quote-box {
      margin: 16px 0;

      padding: 15px 15px 15px 18px;
   }


   .drai-flow-quote-box span {
      font-size: 13px;
   }


   .drai-flow-visual {
      border-radius: 10px;
   }


   .drai-flow-visual-top {
      height: 38px;

      padding: 0 11px;

      font-size: 8px;

      letter-spacing: 1px;
   }


   .drai-flow-image-slot {
      min-height: 230px;

      padding: 20px;
   }


   .drai-flow-image-slot span {
      font-size: 10px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

   .drai-flow-heading {
    font-size: 22px;
   }


   .drai-flow-row {
      padding-left: 47px;
   }


   .drai-flow-timeline::before,
   .drai-flow-step-marker {
      left: 17px;
   }


   .drai-flow-title {
      font-size: 24px;
   }


   .drai-flow-image-slot {
      min-height: 205px;
   }

}


/* =========================================================
   REAL SCREENSHOT IMAGE
========================================================= */

.drai-flow-image-slot img {
   position: relative;

   z-index: 2;

   display: block;

   width: 100%;
   height: auto;

   border-radius: 8px;

   box-shadow:
      0 22px 55px rgba(0,0,0,.30);
}

/* tabels 2  */
/* =========================================================
   ULTRA PREMIUM V3
   GPT STORE BUILDER PRICING
========================================================= */

.gsbxp27-section{
   --blue:#356dff;
   --blue2:#4da4ff;

   --purple:#7051f5;
   --purple2:#a12df2;

   --gold:#ffc83e;
   --gold2:#ffe07a;

   --dark:#121b38;
   --text:#34405c;
   --muted:#737e98;

   position:relative;

   isolation:isolate;

   overflow:hidden;

   padding:95px 0 105px;

   background:
      radial-gradient(
         ellipse at 50% -9%,
         rgba(112,81,246,.16),
         transparent 39%
      ),
      radial-gradient(
         circle at 2% 46%,
         rgba(56,135,255,.085),
         transparent 29%
      ),
      radial-gradient(
         circle at 98% 49%,
         rgba(148,56,248,.085),
         transparent 28%
      ),
      linear-gradient(
         180deg,
         #fff 0%,
         #fafbff 43%,
         #f5f8fd 100%
      );
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.gsbxp27-gridbg{
   position:absolute;

   inset:0;

   z-index:-10;

   pointer-events:none;

   background-image:
      linear-gradient(
         rgba(67,91,151,.026) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(67,91,151,.026) 1px,
         transparent 1px
      );

   background-size:48px 48px;

   mask-image:
      linear-gradient(
         to bottom,
         #000,
         rgba(0,0,0,.45) 50%,
         transparent 93%
      );
}


/* noise */

.gsbxp27-noise{
   position:absolute;

   inset:0;

   z-index:-9;

   pointer-events:none;

   opacity:.26;

   background:
      radial-gradient(
         circle,
         rgba(47,64,111,.15) .65px,
         transparent .8px
      );

   background-size:11px 11px;

   mask-image:
      linear-gradient(
         to bottom,
         rgba(0,0,0,.35),
         transparent 70%
      );
}


/* =========================================================
   AURA
========================================================= */

.gsbxp27-aura{
   position:absolute;

   z-index:-8;

   border-radius:50%;

   filter:blur(105px);

   pointer-events:none;
}


.gsbxp27-aura--one{
   width:530px;
   height:530px;

   left:-370px;
   top:390px;

   background:
      rgba(53,112,255,.14);
}


.gsbxp27-aura--two{
   width:580px;
   height:580px;

   right:-410px;
   top:330px;

   background:
      rgba(143,62,245,.13);
}


.gsbxp27-aura--three{
   width:600px;
   height:260px;

   top:-200px;
   left:50%;

   transform:translateX(-50%);

   background:
      rgba(108,77,245,.16);
}


/* =========================================================
   WRAPPER
========================================================= */

.gsbxp27-wrap{
   position:relative;

   z-index:3;

   width:100%;

   max-width:1210px;

   margin:0 auto;
}


/* =========================================================
   SIDE ART
========================================================= */

.gsbxp27-side-art{
   position:absolute;

   z-index:1;

   width:250px;

   pointer-events:none;
}


.gsbxp27-side-art img{
   display:block;

   width:100%;

   filter:
      drop-shadow(
         0 30px 30px
         rgba(44,57,115,.15)
      );
}


.gsbxp27-side-art--left{
   left:-70px;
   top:40%;
}


.gsbxp27-side-art--right{
   right:-70px;
   top:36%;
}


/* =========================================================
   HEADER
========================================================= */

.gsbxp27-head{
   position:relative;

   max-width:1060px;

   margin:
      0 auto
      70px;
}


/* eyebrow */

.gsbxp27-eyebrow{
   display:flex;

   align-items:center;
   justify-content:center;

   gap:13px;

   margin-bottom:16px;
}


.gsbxp27-eyebrow-line{
   width:34px;
   height:1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(105,78,237,.7)
      );
}


.gsbxp27-eyebrow-line:last-child{
   transform:scaleX(-1);
}


.gsbxp27-eyebrow-text{
   color:#7259df;

   font-size:10px;
   font-weight:950;

   letter-spacing:2.2px;
}


/* title */

.gsbxp27-title{
   margin:0;

   color:#111a35;

   font-size:
      clamp(
         36px,
         4.1vw,
         59px
      );

   font-weight:950;

   letter-spacing:-2.3px;

   line-height:1.13;
}


.gsbxp27-title-gradient{
   display:inline-block;

   background:
      linear-gradient(
         100deg,
         #674df6,
         #9138ef 52%,
         #278fff
      );

   -webkit-background-clip:text;

   background-clip:text;

   color:transparent;
}


.gsbxp27-title-product{
   position:relative;

   display:inline-block;

   font-weight:950;
}


.gsbxp27-title-product::after{
   content:"";

   position:absolute;

   left:4%;
   right:4%;

   bottom:0;

   height:9px;

   z-index:-1;

   border-radius:100px;

   background:
      linear-gradient(
         90deg,
         rgba(84,109,255,.13),
         rgba(156,67,245,.13)
      );
}


/* subtitle */

.gsbxp27-subtitle{
   display:flex;

   align-items:center;
   justify-content:center;

   gap:15px;

   margin-top:18px;
}


.gsbxp27-subtitle p{
   margin:0;

   color:#59657f;

   font-size:19px;
   font-weight:600;
}


.gsbxp27-subtitle span{
   width:63px;
   height:1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(104,82,222,.42)
      );
}


.gsbxp27-subtitle span:last-child{
   transform:scaleX(-1);
}


/* =========================================================
   GRID
========================================================= */

.gsbxp27-grid{
   width:100%;

   max-width:1120px;

   display:grid;

   grid-template-columns:
      repeat(2,minmax(0,1fr));

   align-items:stretch;

   gap:34px;

   margin:0 auto;
}


/* =========================================================
   CARD
========================================================= */

.gsbxp27-card{
   position:relative;

   min-width:0;

   display:flex;

   flex-direction:column;

   border-radius:32px;

   background:
      linear-gradient(
         180deg,
         rgba(255,255,255,.99),
         rgba(255,255,255,.97)
      );

   border:
      1px solid
      rgba(74,92,146,.13);

   box-shadow:
      0 3px 8px rgba(30,44,91,.025),
      0 18px 42px rgba(43,56,103,.06),
      0 55px 115px rgba(52,64,112,.075);

   transition:
      transform .4s ease,
      box-shadow .4s ease;
      border: 3px solid rgb(98, 100, 245)
}


.gsbxp27-card:hover{
   transform:translateY(-7px);

   box-shadow:
      0 7px 14px rgba(30,44,91,.035),
      0 29px 60px rgba(43,56,103,.085),
      0 70px 140px rgba(52,64,112,.10);
}


/* external border */

.gsbxp27-card-outline{
   position:absolute;

   inset:0;

   z-index:10;

   padding:1px;

   border-radius:32px;

   pointer-events:none;

   background:
      linear-gradient(
         145deg,
         rgba(255,255,255,.95),
         rgba(76,110,255,.25),
         rgba(131,73,241,.15),
         rgba(255,255,255,.95)
      );

   -webkit-mask:
      linear-gradient(#fff 0 0)
      content-box,
      linear-gradient(#fff 0 0);

   -webkit-mask-composite:xor;

   mask-composite:exclude;
}


/* aura */

.gsbxp27-card-aura{
   position:absolute;

   width:70%;
   height:130px;

   left:15%;
   top:-15px;

   z-index:-2;

   border-radius:50%;

   background:
      rgba(78,103,255,.15);

   filter:blur(55px);
}


/* =========================================================
   COMMERCIAL
========================================================= */

.gsbxp27-card--commercial{
   border:
      2px solid
      rgba(247,192,47,.92);

   transform:translateY(-8px);

   box-shadow:
      0 0 0 5px rgba(255,199,49,.045),
      0 10px 26px rgba(114,71,208,.07),
      0 38px 80px rgba(108,71,202,.13),
      0 80px 155px rgba(102,70,185,.11);
      margin-top: 8px;
}


.gsbxp27-card--commercial:hover{
   transform:translateY(-15px);
}


.gsbxp27-card--commercial
.gsbxp27-card-outline{
   padding:2px;

   /* background:
      linear-gradient(
         135deg,
         #ffe17a 0%,
         #ffbd28 16%,
         #9d4eff 45%,
         #7351f4 72%,
         #ffc536 100%
      ); */
      background: linear-gradient( 135deg, #ffe17a 0%, #ffbd28 16%, #f5c142 45%, #f6c241 72%, #ffc536 100% );
}


.gsbxp27-card--commercial
.gsbxp27-card-aura{
   background:
      rgba(137,59,249,.20);
}


/* gold halo */

.gsbxp27-commercial-glow{
   position:absolute;

   inset:35px -20px -20px;

   z-index:-4;

   border-radius:45px;

   background:
      linear-gradient(
         180deg,
         rgba(142,66,255,.14),
         rgba(255,194,42,.07)
      );

   filter:blur(24px);
}


/* =========================================================
   POPULAR
========================================================= */

.gsbxp27-popular{
   position:absolute;

   top:-27px;
   left:50%;

   z-index:30;

   transform:translateX(-50%);

  min-width: 290px;
}


.gsbxp27-popular-inner{
position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient( 180deg, #ffe883 0%, #ffca38 58%, #f5b51e 100% );
  /* border: 1px solid rgba(255,255,255,.85); */
  color: #201800;
  box-shadow: 0 4px 8px rgba(194,139,8,.14), 0 15px 28px rgba(220,157,8,.27), inset 0 2px 1px rgba(255,255,255,.8);
  top: -27px;
}


.gsbxp27-popular-inner::after{
   content:"";

   position:absolute;

   left:17%;
   right:17%;

   top:2px;

   height:1px;

   background:
      rgba(255,255,255,.75);
}


.gsbxp27-popular span{
   font-size:19px;
}


.gsbxp27-popular strong{
   font-size:14px;
   font-weight:950;
}


/* =========================================================
   CARD HEADER
========================================================= */

.gsbxp27-card-top{
   position:relative;

   min-height:127px;

   display:flex;

   align-items:center;
   justify-content:center;

   overflow:hidden;

   padding:26px 30px;

   border-radius:
      31px 31px
      0 0;

   background:
      linear-gradient(
         120deg,
         #397ff2 0%,
         #536df6 38%,
         #7554f5 72%,
         #9250ef 100%
      );
}


.gsbxp27-card--commercial
.gsbxp27-card-top{
   background:
      linear-gradient(
         120deg,
         #5b6cf5 0%,
         #7150f4 41%,
         #9239f0 76%,
         #aa27ec 100%
      );
}


/* mini grid */

.gsbxp27-top-grid{
   position:absolute;

   inset:0;

   opacity:.1;

   background-image:
      linear-gradient(
         rgba(255,255,255,.5) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(255,255,255,.5) 1px,
         transparent 1px
      );

   background-size:30px 30px;

   mask-image:
      linear-gradient(
         to right,
         transparent,
         #000,
         transparent
      );
}


/* decorative orbits */

.gsbxp27-top-orbit{
   position:absolute;

   border:
      1px solid
      rgba(255,255,255,.11);

   border-radius:50%;
}


.gsbxp27-top-orbit--one{
   width:260px;
   height:260px;

   right:-110px;
   top:-170px;
}


.gsbxp27-top-orbit--two{
   width:190px;
   height:190px;

   right:-70px;
   top:-125px;
}


/* shine */

.gsbxp27-top-shine{
   position:absolute;

   width:70px;
   height:280%;

   top:-90%;
   left:-150px;

   transform:rotate(23deg);

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(255,255,255,.18),
         transparent
      );

   transition:left .85s ease;
}


.gsbxp27-card:hover
.gsbxp27-top-shine{
   left:125%;
}


/* =========================================================
   BRAND
========================================================= */

.gsbxp27-brand-row{
   position:relative;

   z-index:3;

   display:flex;

   align-items:center;
   justify-content:center;

   gap:17px;
}


.gsbxp27-logo{
   display:block;

   width:190px;
   max-width:100%;

   height:auto;
}


.gsbxp27-plan-divider{
   width:1px;
   height:40px;

   background:
      linear-gradient(
         transparent,
         rgba(255,255,255,.55),
         transparent
      );
}


.gsbxp27-plan-name{
   text-align:left;
}


.gsbxp27-plan-name small{
   display:block;

   margin-bottom:3px;

   color:
      rgba(255,255,255,.64);

   font-size:8px;
   font-weight:900;

   letter-spacing:1.5px;
}


.gsbxp27-plan-name strong{
   color:#fff;

   font-size:18px;
   font-weight:900;
}


/* =========================================================
   PRICE AREA
========================================================= */

.gsbxp27-price-area{
   position:relative;

   padding:
      31px 28px
      27px;

   text-align:center;

   background:
      linear-gradient(
         180deg,
         #fff,
         #fefeff
      );
}


/* badge */

.gsbxp27-price-badge{
   display:inline-flex;

   margin-bottom:14px;

   padding:
      7px 13px;

   border-radius:100px;

   background:
      linear-gradient(
         180deg,
         #f0f4ff,
         #e9efff
      );

   color:#4673eb;

   font-size:8px;
   font-weight:950;

   letter-spacing:1.45px;
}


.gsbxp27-card--commercial
.gsbxp27-price-badge{
   background:
      linear-gradient(
         180deg,
         #f6f0ff,
         #eee8ff
      );

   color:#8051e7;
}


/* =========================================================
   BIG PRICE
========================================================= */

.gsbxp27-price{
   display:flex;

   align-items:flex-end;
   justify-content:center;

   gap:5px;

   margin-bottom:22px;
}


.gsbxp27-price-dollar{
   margin-bottom:32px;

   color:#2861ec;

   font-size:29px;
   font-weight:950;
}


.gsbxp27-price strong{
   color:#2861ec;

   font-size:90px;
   font-weight:950;

   line-height:.85;

   letter-spacing:-6px;

   text-shadow:
      0 10px 24px
      rgba(40,96,236,.10);
}


.gsbxp27-price-type{
   margin:
      0 0
      14px 7px;

   color:#4271e7;

   font-size:19px;
   font-weight:850;
}




.gsbxp27-card--commercial
.gsbxp27-price-dollar,
.gsbxp27-card--commercial
.gsbxp27-price strong{
   background:
      linear-gradient(
         110deg,
         #614bf3,
         #7e3cf0 53%,
         #9a27ed
      );

   -webkit-background-clip:text;

   background-clip:text;

   color:transparent;

   text-shadow:none;
}


.gsbxp27-card--commercial
.gsbxp27-price-type{
   color:#8750e5;
}


/* =========================================================
   DESC
========================================================= */

.gsbxp27-desc{
   min-height:58px;

   max-width:430px;

   display:flex;

   align-items:center;
   justify-content:center;

   gap:9px;

   margin:0 auto;

   padding:
      12px 18px;

   border:
      1px solid
      rgba(58,99,212,.06);

   border-radius:18px;

   background:
      linear-gradient(
         90deg,
         #eff5ff,
         #f5f3ff
      );

   color:#3a4765;

   font-size:14px;
   font-weight:550;

   line-height:1.45;
}


.gsbxp27-card--commercial
.gsbxp27-desc{
   background:
      linear-gradient(
         90deg,
         #f5efff,
         #faefff
      );

   color:#6943ca;
}


.gsbxp27-desc-dot{
   width:6px;
   height:6px;

   flex:0 0 6px;

   border-radius:50%;

   background:#4775ed;

   box-shadow:
      0 0 0 5px
      rgba(71,117,237,.08);
}


.gsbxp27-card--commercial
.gsbxp27-desc-dot{
   background:#8d4ceb;

   box-shadow:
      0 0 0 5px
      rgba(141,76,235,.08);
}


/* =========================================================
   BODY
========================================================= */

.gsbxp27-body{
   flex:1;

   display:flex;

   flex-direction:column;

   padding:
      18px 29px
      30px;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.gsbxp27-section-label{
   display:flex;

   align-items:center;

   gap:10px;

   margin:
      2px 0
      13px;
}


.gsbxp27-section-label-icon{
   width:31px;
   height:31px;

   flex:0 0 31px;

   display:flex;

   align-items:center;
   justify-content:center;

   border-radius:10px;

   background:
      linear-gradient(
         135deg,
         #3d81ff,
         #2b5bea
      );

   color:#fff;

   font-size:13px;
   font-weight:950;

   box-shadow:
      0 6px 14px
      rgba(45,96,232,.16);
}


.gsbxp27-card--commercial
.gsbxp27-section-label-icon{
   background:
      linear-gradient(
         135deg,
         #a23df9,
         #7146ed
      );
}


.gsbxp27-section-label small{
   display:block;

   margin-bottom:1px;

   color:#98a2b8;

   font-size:10px;
   font-weight:900;

   letter-spacing:1.25px;
}


.gsbxp27-section-label strong{
   display:block;

   color:#3d6ce8;

   font-size:20px;
   font-weight:950;

   letter-spacing:.45px;
}


.gsbxp27-card--commercial
.gsbxp27-section-label strong{
   color:#7d50e4;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.gsbxp27-list{
   display:flex;

   flex-direction:column;

   margin:0;

   padding:0;

   list-style:none;
}


.gsbxp27-list li{
   position:relative;

   min-height:44px;

   padding:
      10px 5px
      10px 36px;

   border-bottom:
      1px dashed
      rgba(71,86,132,.14);

   color:#34405a;

font-size: 18px;
   font-weight:500;

   line-height:1.62;
}


.gsbxp27-list li:last-child{
   border-bottom:0;
}


.gsbxp27-list li strong{
   color:#18203a;

   font-weight:850;
   font-weight:700;
}


.gsbxp27-list li span{
   color:#7b8498;

   font-size:.92em;
}


/* checks */

.gsbxp27-list
li:not(.gsbxp27-off)::before{
   content:"✓";

   position:absolute;

   left:2px;
   top:11px;

   width:22px;
   height:22px;

   display:flex;

   align-items:center;
   justify-content:center;

   border-radius:7px;

   background:
      linear-gradient(
         135deg,
         #4789ff,
         #2b60e9
      );

   color:#fff;

   font-size:10px;
   font-weight:950;

   box-shadow:
      0 4px 9px
      rgba(39,90,223,.16),
      inset 0 1px 1px
      rgba(255,255,255,.35);
}


.gsbxp27-card--commercial
.gsbxp27-list
li:not(.gsbxp27-off)::before{
   background:
      linear-gradient(
         135deg,
         #a63eff,
         #7046ed
      );

   box-shadow:
      0 4px 9px
      rgba(114,63,222,.16);
}
/* =========================================
   RIGHT BUNDLE CARD — BALANCED HEIGHT
========================================= */

.gsbxp27-card--commercial .gsbxp27-price-area {
    padding-top: 30px;
    padding-bottom: 30px;
}

.gsbxp27-card--commercial .gsbxp27-body {
    padding-top: 34px;
    padding-bottom: 34px;
}

.gsbxp27-card--commercial .gsbxp27-section-label {
    margin-bottom: 26px;
}

.gsbxp27-card--commercial .gsbxp27-list {
    row-gap: 0;
}

.gsbxp27-card--commercial .gsbxp27-list > li {
padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.55;
}

.gsbxp27-card--commercial .gsbxp27-list li:not(.gsbxp27-off)::before{
   top: 20px;
}

.gsbxp27-card--commercial .gsbxp27-bonus {
    margin-top: 30px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.gsbxp27-card--commercial .gsbxp27-bonus-head {
    margin-bottom: 20px;
}

.gsbxp27-card--commercial .gsbxp27-bonus-list > li {
    /* padding-top: 10px;
    padding-bottom: 10px; */
    padding-top: 15px;
  padding-bottom: 15px;
}

.gsbxp27-card--commercial .gsbxp27-cta {
    margin-top: 32px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.gsbxp27-card--commercial .gsbxp27-best-value {
    margin-bottom: 40px;
     margin-top: 30px;
}

.gsbxp27-card--commercial .gsbxp27-cta-topline {
    margin-bottom: 12px;
}

.gsbxp27-card--commercial .gsbxp27-final-price {
    margin-top: 10px;
    margin-bottom: 14px;
}

.gsbxp27-card--commercial .gsbxp27-buy-wrap {
    margin-top: 20px;
}

.gsbxp27-card--commercial .gsbxp27-checkout-note {
    margin-top: 16px;
}

.gsbxp27-card--commercial .gsbxp27-guarantee {
    margin-top: 24px;
    margin-bottom: 18px;
}

/* =========================================================
   OFF
========================================================= */

.gsbxp27-off{
   /* color:#a1a6b5 !important; */
color: #34405a !important;
   text-decoration:line-through;

   text-decoration-color:
      rgba(128,135,155,.46);
}


.gsbxp27-off::before{
   content:"×" !important;

   background:
      linear-gradient(
         145deg,
         #fff7f8,
         #ffebee
      ) !important;

   border:
      1px solid
      rgba(220,88,108,.14) !important;

   color:#dc6777 !important;

   font-size:15px !important;

   box-shadow:none !important;
}


/* =========================================================
   BONUS VAULT
========================================================= */

.gsbxp27-bonus{
   position:relative;

   overflow:hidden;

   margin-top:29px;

   padding:
      14px 16px
      18px;

   border-radius:20px;

   border:
      1px solid
      rgba(68,107,226,.14);

   background:
      linear-gradient(
         145deg,
         #f3f7ff 0%,
         #faf9ff 60%,
         #f7f5ff 100%
      );

   box-shadow:
      inset 0 1px 1px rgba(255,255,255,.95),
      0 14px 30px rgba(51,68,130,.035);
}


.gsbxp27-bonus--commercial{
   border-color:
      rgba(232,179,44,.25);

   background:
      linear-gradient(
         145deg,
         #faf6ff 0%,
         #fcf8ff 55%,
         #fff9e9 100%
      );
}


.gsbxp27-bonus::before{
   content:"";

   position:absolute;

   width:190px;
   height:190px;

   top:-125px;
   right:-90px;

   border-radius:50%;

   background:
      rgba(66,111,248,.07);
}


.gsbxp27-bonus--commercial::before{
   background:
      rgba(151,56,247,.08);
}


/* top light */

.gsbxp27-bonus-light{
   position:absolute;

   top:0;
   left:12%;
   right:12%;

   height:1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(69,109,235,.40),
         transparent
      );
}


.gsbxp27-bonus--commercial
.gsbxp27-bonus-light{
   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(143,67,238,.34),
         rgba(243,187,43,.38),
         transparent
      );
}


/* bonus head */

.gsbxp27-bonus-head{
   position:relative;

   z-index:2;

   display:flex;

   align-items:center;

   gap:10px;

   padding:
      4px 4px
      12px;

   margin-bottom:4px;

   border-bottom:
      1px solid
      rgba(75,90,138,.08);
}


.gsbxp27-gift{
   width:39px;
   height:39px;

   flex:0 0 39px;

   display:flex;

   align-items:center;
   justify-content:center;

   border-radius:12px;

   background:
      linear-gradient(
         145deg,
         #fff,
         #f8f9ff
      );

   font-size:20px;

   box-shadow:
      0 7px 16px
      rgba(43,58,108,.09);
}


.gsbxp27-bonus-title{
   flex:1;

   min-width:0;
}


.gsbxp27-bonus-title small{
   display:block;

   color:#929db6;

   font-size:7px;
   font-weight:900;

   letter-spacing:1.2px;
}


.gsbxp27-bonus-title strong{
   display:block;

   margin-top:2px;

   color:#2863df;

   font-size:20px;
   font-weight:950;
}


.gsbxp27-bonus--commercial
.gsbxp27-bonus-title strong{
   color:#803ee5;
}


.gsbxp27-bonus-mark{
   color:#5672e9;

   font-size:18px;
   font-weight:950;
}


.gsbxp27-bonus--commercial
.gsbxp27-bonus-mark{
   color:#9548ed;
}


/* bonus list */

.gsbxp27-bonus-list li{
   min-height:auto;

   padding-top:7px;
   padding-bottom:7px;

   border-bottom:0;

   font-size:18px;
}


.gsbxp27-bonus-list
li:not(.gsbxp27-off)::before{
top: 12px;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  font-size: 8px;
}


.gsbxp27-bonus-list
.gsbxp27-off::before{
   top:7px !important;

   width:19px !important;
   height:19px !important;
}


/* =========================================================
   CTA
========================================================= */

.gsbxp27-cta{
   position:relative;

   margin-top:auto;

   padding:
      21px 16px
      16px;

   margin-top:30px;

   overflow:hidden;

   border-radius:20px;

   border:
      1px solid
      rgba(223,67,87,.18);

   background:
      linear-gradient(
         180deg,
         rgba(255,255,255,.99),
         #fffafb
      );

   text-align:center;

   box-shadow:
      inset 0 1px 1px #fff,
      0 12px 30px
      rgba(42,55,105,.045);
}


.gsbxp27-cta::before{
   content:"";

   position:absolute;

   inset:6px;

   border:
      1px dashed
      rgba(232,63,84,.28);

   border-radius:14px;

   pointer-events:none;
}


.gsbxp27-card--commercial
.gsbxp27-cta{
   border-color:
      rgba(229,63,81,.26);

   box-shadow:
      0 10px 28px
      rgba(120,62,187,.055);
}


/* =========================================================
   BEST VALUE
========================================================= */

.gsbxp27-best-value{
   position:relative;

   z-index:2;

   display:inline-flex;

   margin-bottom:7px;

   padding:
      5px 12px;

   border-radius:30px;

   background:
      linear-gradient(
         90deg,
         #fff1bf,
         #fff9e3
      );

   color:#9b6500;

   font-size:14px;
   font-weight:950;

   letter-spacing:1px;
}


/* CTA label */

.gsbxp27-cta-topline{
   position:relative;

   z-index:2;

   margin-bottom:5px;

   color:#9099ad;

   font-size:7px;
   font-weight:900;

   letter-spacing:1.35px;
}


/* final price */

.gsbxp27-final-price{
   position:relative;

   z-index:2;

   display:flex;

   align-items:baseline;
   justify-content:center;

   gap:7px;

   margin-bottom:12px;

   color:#d12437;

   font-size:17px;
   font-weight:800;
}


.gsbxp27-final-price strong{
   color:#c91d31;

   font-size:30px;
   font-weight:950;

   letter-spacing:-1px;
}

/* ==========================================
   DIRECTORAI PREMIUM COUPON
=========================================== */

.gsbxp27-coupon {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;

   width: 100%;
   max-width: 430px;

   margin: 14px auto 20px;
   padding: 13px 18px;

   border-radius: 12px;

   background:
      linear-gradient(
         135deg,
         rgba(255, 255, 255, 0.98),
         rgba(248, 247, 255, 0.96)
      );

   border: 1px solid rgba(104, 74, 255, 0.22);

   box-shadow:
      0 10px 28px rgba(51, 35, 130, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);

   overflow: hidden;
}


/* PREMIUM TOP GLOW */

.gsbxp27-coupon::before {
   content: "";
   position: absolute;
   top: 0;
   left: 18%;
   width: 64%;
   height: 2px;

   background: linear-gradient(
      90deg,
      transparent,
      #7658ff,
      #d748ff,
      transparent
   );

   box-shadow: 0 0 12px rgba(118, 88, 255, 0.55);
}


/* ICON */

.gsbxp27-coupon-icon {
   flex: 0 0 35px;
   width: 35px;
   height: 35px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   font-size: 16px;
   font-weight: 900;

   color: #ffffff;

   background: linear-gradient(
      135deg,
      #6947ff,
      #a43cff
   );

   box-shadow:
      0 7px 16px rgba(105, 71, 255, 0.26);
}


/* CONTENT */

.gsbxp27-coupon-content {
   text-align: left;
   line-height: 1.25;
}


.gsbxp27-coupon-content small {
   display: block;

   margin-bottom: 4px;

   font-size: 9px;
   line-height: 1.2;
   font-weight: 900;

   letter-spacing: 1.3px;
   text-transform: uppercase;

   color: #7c67d9;
}


.gsbxp27-coupon-line {
   font-size: 13px;
   line-height: 1.45;
   font-weight: 700;

   color: #2b2a38;
}


.gsbxp27-coupon-line strong {
   color: #6547ff;
   font-weight: 900;
}


/* COUPON CODE */

.gsbxp27-coupon-code {
   display: inline-block;

   margin: 0 4px;
   padding: 4px 9px;

   border-radius: 6px;

   font-size: 12px;
   line-height: 1;
   font-weight: 900;

   letter-spacing: 0.5px;

   color: #ffffff;

   background: linear-gradient(
      135deg,
      #6345ff,
      #8b45ff
   );

   border: 1px dashed rgba(255, 255, 255, 0.7);

   box-shadow:
      0 5px 12px rgba(99, 69, 255, 0.22);
}


/* ==========================================
   BUNDLE SPECIAL GOLD/PURPLE VERSION
=========================================== */

.gsbxp27-coupon--bundle {
   background:
      linear-gradient(
         135deg,
         #fffdf5 0%,
         #fff8dc 45%,
         #fbf7ff 100%
      );

   border-color: rgba(232, 171, 25, 0.42);

   box-shadow:
      0 12px 30px rgba(161, 113, 0, 0.12),
      inset 0 1px 0 #ffffff;
}


.gsbxp27-coupon--bundle::before {
   background: linear-gradient(
      90deg,
      transparent,
      #ffbe26,
      #ff8a00,
      #8b4cff,
      transparent
   );

   box-shadow:
      0 0 14px rgba(255, 183, 29, 0.55);
}


.gsbxp27-coupon--bundle .gsbxp27-coupon-icon {
   background: linear-gradient(
      135deg,
      #ffbc1f,
      #ff8300
   );

   box-shadow:
      0 7px 18px rgba(255, 153, 0, 0.26);
}


.gsbxp27-coupon--bundle .gsbxp27-coupon-content small {
   color: #b16c00;
}


.gsbxp27-coupon--bundle .gsbxp27-coupon-code {
   background: linear-gradient(
      135deg,
      #ffb716,
      #ff7b00
   );

   box-shadow:
      0 5px 14px rgba(255, 140, 0, 0.25);
}


.gsbxp27-coupon--bundle .gsbxp27-coupon-line strong {
   color: #e87500;
}


/* ==========================================
   MOBILE
=========================================== */

@media (max-width: 575px) {

   .gsbxp27-coupon {
      gap: 9px;
      padding: 11px 12px;
      margin-top: 12px;
      margin-bottom: 17px;
   }

   .gsbxp27-coupon-icon {
      flex: 0 0 31px;
      width: 31px;
      height: 31px;
      font-size: 14px;
   }

   .gsbxp27-coupon-line {
      font-size: 11px;
   }

   .gsbxp27-coupon-code {
      padding: 3px 6px;
      font-size: 10px;
   }

   .gsbxp27-coupon-content small {
      font-size: 8px;
      letter-spacing: 0.9px;
   }
}
/* =========================================================
   DEMO BUY BUTTON
========================================================= */

.gsbxp27-buy-demo{
   position:relative;

   z-index:2;

   width:100%;

   max-width:335px;

   min-height:58px;

   display:flex;

   align-items:center;
   justify-content:center;

   gap:17px;

   margin:0 auto;

   overflow:hidden;

   border-radius:100px;

   background:
      linear-gradient(
         100deg,
         #654bf4,
         #376af5 48%,
         #18b7ed
      );

   color:#fff;

   font-size:19px;
   font-weight:950;

   box-shadow:
      0 6px 12px rgba(48,91,223,.12),
      0 15px 30px rgba(50,93,226,.23),
      inset 0 2px 1px rgba(255,255,255,.38);

   transition:
      transform .25s ease,
      box-shadow .25s ease;
}


.gsbxp27-buy-demo::before{
   content:"";

   position:absolute;

   width:90px;
   height:180%;

   top:-40%;
   left:-130px;

   transform:rotate(22deg);

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(255,255,255,.26),
         transparent
      );

   animation:
      gsbxp27BuyShine
      3.8s infinite;
}


@keyframes gsbxp27BuyShine{

   0%{
      left:-130px;
   }

   48%{
      left:-130px;
   }

   74%{
      left:120%;
   }

   100%{
      left:120%;
   }

}


.gsbxp27-buy-demo:hover{
   transform:
      translateY(-3px)
      scale(1.01);

   box-shadow:
      0 8px 15px rgba(48,91,223,.14),
      0 20px 36px rgba(50,93,226,.30);
}


.gsbxp27-buy-demo span{
   position:relative;

   z-index:3;
}


.gsbxp27-buy-demo b{
   position:relative;

   z-index:3;

   width:31px;
   height:31px;

   display:flex;

   align-items:center;
   justify-content:center;

   border-radius:50%;

   background:#fff;

   color:#3567e8;

   font-size:17px;

   box-shadow:
      0 4px 10px
      rgba(27,44,106,.15);
}


/* =========================================================
   JVZOO
========================================================= */

.gsbxp27-buy-wrap{
   position:relative;

   z-index:2;

   width:100%;

   max-width:350px;

   margin:0 auto;
}


.gsbxp27-buy-link{
   display:block;

   transition:
      transform .25s ease,
      filter .25s ease;
}


.gsbxp27-buy-link:hover{
   transform:
      translateY(-3px)
      scale(1.01);

   filter:
      brightness(1.04)
      drop-shadow(
         0 12px 15px
         rgba(88,48,185,.18)
      );
}


.gsbxp27-buy-link img{
   display:block;

   width:auto;

   max-width:100%;

   height:auto;

   margin:0 auto;
}


/* =========================================================
   CHECKOUT NOTE
========================================================= */

.gsbxp27-checkout-note{
   position:relative;

   z-index:2;

   display:flex;

   align-items:center;
   justify-content:center;

   flex-wrap:wrap;

   gap:6px;

   margin-top:11px;

   color:#626c83;

   font-size:9px;
   font-weight:650;
}


.gsbxp27-checkout-note i{
   width:3px;
   height:3px;

   border-radius:50%;

   background:#8d96aa;
}


/* =========================================================
   GUARANTEE
========================================================= */

.gsbxp27-guarantee{
margin-top: 24px;
  margin-bottom: 18px;

   text-align:center;
}


.gsbxp27-guarantee img{
   display:block;

   width:100%;

   max-width:245px;

   height:auto;

   margin:0 auto;
}


/* =========================================================
   TRUST BAR
========================================================= */

.gsbxp27-trust{
   position:relative;

   width:100%;

   max-width:910px;

   display:grid;

   grid-template-columns:
      repeat(3,1fr);

   margin:
      48px auto 0;

   padding:
      19px 20px;

   overflow:hidden;

   border:
      1px solid
      rgba(71,89,140,.09);

   border-radius:21px;

   background:
      rgba(255,255,255,.70);

   box-shadow:
      0 14px 40px
      rgba(47,60,106,.045),
      inset 0 1px 1px #fff;

   backdrop-filter:blur(14px);
}


.gsbxp27-trust::before{
   content:"";

   position:absolute;

   left:15%;
   right:15%;
   top:0;

   height:1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(106,78,235,.24),
         transparent
      );
}


.gsbxp27-trust-item{
   display:flex;

   align-items:center;
   justify-content:center;

   gap:12px;

   padding:
      4px 20px;
}


.gsbxp27-trust-item +
.gsbxp27-trust-item{
   border-left:
      1px solid
      rgba(69,87,136,.10);
}


.gsbxp27-trust-icon{
   width:46px;
   height:46px;

   flex:0 0 46px;

   display:flex;

   align-items:center;
   justify-content:center;

   border-radius:14px;

   background:
      linear-gradient(
         145deg,
         #eef4ff,
         #f2eeff
      );

   border:
      1px solid
      rgba(80,101,220,.07);

   color:#5c63eb;

   font-size:18px;
   font-weight:950;
}


.gsbxp27-trust strong{
   display:block;

   color:#2b3956;

   font-size:13px;
   font-weight:850;
}


.gsbxp27-trust small{
   display:block;

   margin-top:2px;

   color:#7a849b;

   font-size:11px;
}


/* =========================================================
   1199
========================================================= */

@media(max-width:1199.98px){

   .gsbxp27-wrap{
      max-width:1050px;
   }


   .gsbxp27-grid{
      max-width:1010px;

      gap:25px;
   }


   .gsbxp27-side-art{
      display:none;
   }


   .gsbxp27-body{
      padding-left:24px;
      padding-right:24px;
   }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px){

   .gsbxp27-section{
      padding:
         72px 0
         80px;
   }


   .gsbxp27-head{
      margin-bottom:60px;
   }


   .gsbxp27-grid{
      grid-template-columns:
         minmax(0,640px);

      gap:56px;
   }


   .gsbxp27-card--commercial{
      transform:none;
   }


   .gsbxp27-card--commercial:hover{
      transform:translateY(-7px);
   }


   .gsbxp27-trust{
      max-width:640px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

   .gsbxp27-section{
      padding:
         58px 0
         65px;
   }


   .gsbxp27-head{
      margin-bottom:52px;
   }


   .gsbxp27-title{
      font-size:33px;

      letter-spacing:-1.2px;
   }


   .gsbxp27-title br{
      display:none;
   }


   .gsbxp27-subtitle p{
      font-size:15px;
   }


   .gsbxp27-subtitle span{
      width:28px;
   }


   .gsbxp27-grid{
      grid-template-columns:1fr;

      max-width:530px;

      gap:52px;
   }


   .gsbxp27-card-top{
      min-height:110px;

      padding:
         23px 18px;
   }


   .gsbxp27-logo{
      width:165px;
   }


   .gsbxp27-plan-name strong{
      font-size:15px;
   }


   .gsbxp27-price strong{
      font-size:72px;

      letter-spacing:-4px;
   }


   .gsbxp27-price-dollar{
      margin-bottom:25px;

      font-size:23px;
   }


   .gsbxp27-price-type{
      margin-bottom:10px;

      font-size:16px;
   }


   .gsbxp27-body{
      padding:
         16px 19px
         24px;
   }


   .gsbxp27-list li{
      font-size:13px;
   }


   .gsbxp27-trust{
      grid-template-columns:1fr;

      padding:
         10px 18px;

      max-width:530px;
   }


   .gsbxp27-trust-item{
      justify-content:flex-start;

      width:100%;

      max-width:270px;

      margin:0 auto;

      padding:
         15px 5px;
   }


   .gsbxp27-trust-item +
   .gsbxp27-trust-item{
      border-left:0;

      border-top:
         1px solid
         rgba(69,87,136,.10);
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

   .gsbxp27-section{
      padding:
         49px 0
         58px;
   }


   .gsbxp27-title{
      font-size:28px;

      letter-spacing:-.8px;
   }


   .gsbxp27-eyebrow-text{
      font-size:8px;

      letter-spacing:1.5px;
   }


   .gsbxp27-subtitle span{
      display:none;
   }


   .gsbxp27-card{
      border-radius:25px;
   }


   .gsbxp27-card-outline{
      border-radius:25px;
   }


   .gsbxp27-card-top{
      min-height:100px;

      border-radius:
         24px 24px
         0 0;
   }


   .gsbxp27-brand-row{
      gap:10px;
   }


   .gsbxp27-logo{
      width:138px;
   }


   .gsbxp27-plan-divider{
      height:34px;
   }


   .gsbxp27-plan-name strong{
      font-size:13px;
   }


   .gsbxp27-popular{
      top:-21px;

      min-width:170px;
   }


   .gsbxp27-popular-inner{
      padding:
         10px 16px;
   }


   .gsbxp27-price-area{
      padding:
         25px 14px
         21px;
   }


   .gsbxp27-price strong{
      font-size:63px;
   }


   .gsbxp27-price-dollar{
      margin-bottom:22px;

      font-size:20px;
   }


   .gsbxp27-price-type{
      margin-left:3px;

      font-size:14px;
   }


   .gsbxp27-desc{
      min-height:52px;

      padding:
         10px 13px;

      font-size:12.5px;
   }


   .gsbxp27-body{
      padding:
         14px 14px
         20px;
   }


   .gsbxp27-list li{
      min-height:41px;

      padding:
         9px 0
         9px 31px;

      font-size:12px;
   }


   .gsbxp27-list
   li:not(.gsbxp27-off)::before{
      left:1px;

      top:10px;

      width:20px;
      height:20px;
   }


   .gsbxp27-bonus{
      padding:
         12px 10px
         15px;

      border-radius:17px;
   }


   .gsbxp27-gift{
      width:33px;
      height:33px;

      flex-basis:33px;

      font-size:17px;
   }


   .gsbxp27-bonus-title strong{
      font-size:13px;
   }


   .gsbxp27-bonus-mark{
      font-size:14px;
   }


   .gsbxp27-bonus-list li{
      font-size:11px;
   }


   .gsbxp27-cta{
      padding:
         18px 10px
         14px;

      border-radius:17px;
   }


   .gsbxp27-final-price{
      font-size:15px;
   }


   .gsbxp27-final-price strong{
      font-size:25px;
   }


   .gsbxp27-buy-demo{
      min-height:53px;

      font-size:17px;
   }

}