/* ============================================================
   CREATORCLAW AI
   ULTRA PREMIUM CENTERED HERO
============================================================ */


:root {

   --ccai-bg:
      #010503;

   --ccai-bg-2:
      #020a06;

   --ccai-green:
      #aaff00;

   --ccai-green-light:
      #caff31;

   --ccai-green-dark:
      #70ef00;

   --ccai-mint:
      #67ffc2;

   --ccai-white:
      #ffffff;

   --ccai-text:
      #aab8af;

   --ccai-border:
      rgba(170, 255, 65, 0.18);

}



/* ============================================================
   BASE
============================================================ */

* {

   box-sizing:
      border-box;

}


html {

   scroll-behavior:
      smooth;

}


body {

   margin:
      0;

   padding:
      0;

   background:
      #010503;

   font-family:
      "Inter",
      sans-serif;

   color:
      #ffffff;

}



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

.ccaihero26 {

   position:
      relative;

   width:
      100%;

   min-height:
      100vh;

   overflow:
      hidden;

   isolation:
      isolate;

   display:
      flex;

   flex-direction:
      column;

   background:
      #f3fbf6;
padding: 0 0 66px 0;
}



/* ============================================================
   BACKGROUND BASE
============================================================ */

.ccaihero26-bg {

   position:
      absolute;

   inset:
      0;

   z-index:
      -10;

   background:

      none;

}



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

.ccaihero26-grid {

   position:
      absolute;

   inset:
      0;

   z-index:
      -9;

   background:
      #f3fbf6 url(../images/basa-header.png) no-repeat center top;

   background-size:
      cover;

}



/* ============================================================
   SUBTLE NOISE
============================================================ */

.ccaihero26-noise {

   position:
      absolute;

   inset:
      0;

   z-index:
      -8;

   opacity:
      .12;

   pointer-events:
      none;

   background-image:

      radial-gradient(
         circle,
         rgba(255,255,255,.1) .6px,
         transparent .7px
      );

   background-size:
      18px 18px;

}



/* ============================================================
   LARGE GLOWS
============================================================ */

.ccaihero26-glow {

   position:
      absolute;

   border-radius:
      50%;

   pointer-events:
      none;

   z-index:
      -7;

}


.ccaihero26-glow--one {

   width:
      850px;

   height:
      540px;

   top:
      280px;

   left:
      50%;

   transform:
      translateX(-50%);

   background:
      radial-gradient(
         ellipse,
         rgba(255,255,255,.8),
         rgba(255,255,255,.3) 50%,
         transparent 72%
      );

   filter:
      blur(15px);

}


.ccaihero26-glow--two {

   width:
      600px;

   height:
      600px;

   right:
      -290px;

   top:
      130px;

   background:
      radial-gradient(
         circle,
         rgba(120,235,170,.16),
         transparent 70%
      );

   filter:
      blur(30px);

}


.ccaihero26-glow--three {

   width:
      500px;

   height:
      500px;

   left:
      -280px;

   bottom:
      -220px;

   background:
      radial-gradient(
         circle,
         rgba(120,235,170,.14),
         transparent 70%
      );

   filter:
      blur(25px);

}



/* ============================================================
   PARTICLES
============================================================ */

.ccaihero26-particles {

   opacity:
      .4;

   position:
      absolute;

   inset:
      0;

   z-index:
      -2;

   pointer-events:
      none;

}


.ccaihero26-particles span {

   position:
      absolute;

   left:
      var(--x);

   top:
      var(--y);

   width:
      4px;

   height:
      4px;

   border-radius:
      50%;

   background:
      #1fae5b;

   box-shadow:

      

      0 0 6px rgba(31,174,91,.5);

   animation:
      ccaiParticleFloat 5s ease-in-out infinite;

   animation-delay:
      var(--d);

}


.ccaihero26-particles span:nth-child(3n) {

   width:
      6px;

   height:
      6px;

   border-radius:
      1px;

   transform:
      rotate(45deg);

}


@keyframes ccaiParticleFloat {

   0%,
   100% {

      opacity:
         .15;

      translate:
         0 0;

   }

   50% {

      opacity:
         1;

      translate:
         0 -18px;

   }

}



/* ============================================================
   GLOBAL CONTAINER
============================================================ */

.ccaihero26-container {

   max-width:
      1450px;

   padding-left:
      32px;

   padding-right:
      32px;

}



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

.ccaihero26-nav-wrap {

   --ccai-nav-row:
      72px;

   --ccai-nav-logo:
      225px;

   position:
      relative;

   z-index:
      50;

   padding-top:
      18px;

}



/* ============================================================
   NAVBAR - CIRCUIT RAIL
============================================================ */

.ccaihero26-nav {

   position:
      relative;

   display:
      grid;

   grid-template-columns:
      1fr auto 1fr;

   grid-template-rows:
      var(--ccai-nav-row);

   align-items:
      center;

   column-gap:
      24px;

   font-family:
      "Manrope",
      "Inter",
      sans-serif;

}


.ccaihero26-nav::before,
.ccaihero26-nav::after {

   content:
      "";

   position:
      absolute;

   left:
      calc(var(--ccai-nav-logo) + 14px);

   right:
      40px;

   pointer-events:
      none;

}


.ccaihero26-nav::before {

   top:
      calc(var(--ccai-nav-row) / 2 - 3px);

   height:
      7px;

   background:

      radial-gradient(
         circle at 3.5px 50%,
         #0e7a44 0 2.5px,
         transparent 3px
      ),

      linear-gradient(
         90deg,
         rgba(14,122,68,.5) 0%,
         rgba(14,122,68,.18) 50%,
         rgba(14,122,68,.5) 100%
      ) center / 100% 1px no-repeat;

   animation:
      ccaiNavDraw 1.4s cubic-bezier(.22,1,.36,1) both;

}


.ccaihero26-nav::after {

   top:
      calc(var(--ccai-nav-row) / 2);

   height:
      1px;

   background:
      linear-gradient(
         90deg,
         transparent 0%,
         #19b35a 72%,
         #0e7a44 100%
      ) 0 0 / 120px 100% no-repeat;

   filter:
      drop-shadow(0 0 4px rgba(25,179,90,.7));

   animation:
      ccaiNavSignal 6s linear infinite;

}


@keyframes ccaiNavDraw {

   from {

      clip-path:
         inset(0 100% 0 0);

   }

   to {

      clip-path:
         inset(0 0 0 0);

   }

}


@keyframes ccaiNavSignal {

   from {

      background-position-x:
         -120px;

   }

   to {

      background-position-x:
         calc(100% + 120px);

   }

}



/* ============================================================
   LOGO
============================================================ */

.ccaihero26-logo {

   position:
      relative;

   isolation:
      isolate;

   grid-column:
      1;

   justify-self:
      start;

   display:
      flex;

   align-items:
      center;

   text-decoration:
      none;

}


.ccaihero26-logo::before {

   content:
      "";

   position:
      absolute;

   z-index:
      -1;

   inset:
      -14% -8%;

   background:
      radial-gradient(
         ellipse at 50% 50%,
         rgba(255,255,255,.5) 0%,
         rgba(255,255,255,.2) 50%,
         transparent 72%
      );

}


.ccaihero26-logo img {

   display:
      block;

   width:
      var(--ccai-nav-logo);

   height:
      auto;

   max-width:
      none;

   margin-block:
      calc((var(--ccai-nav-row) - var(--ccai-nav-logo) / 2.5) / 2);

   filter:
      contrast(1.12)
      drop-shadow(0 0 .6px rgba(6,41,26,.85))
      drop-shadow(0 2px 6px rgba(6,41,26,.14));

   transition:
      filter .35s ease;

}


.ccaihero26-logo:hover img {

   filter:
      contrast(1.12)
      drop-shadow(0 0 .6px rgba(6,41,26,.85))
      drop-shadow(0 4px 12px rgba(14,122,68,.3));

}



/* ============================================================
   NAV LINKS - TRACK AND GLIDING PUCK
============================================================ */

.ccaihero26-nav-links {

   --ccai-nav-i:
      0;

   position:
      relative;

   z-index:
      1;

   grid-column:
      2;

   display:
      grid;

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

   padding:
      5px;

   border:
      1px solid rgba(14,122,68,.16);

   border-radius:
      999px;

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #f1faf4 100%
      );

   box-shadow:

      

      inset 0 1px 0 #ffffff,

      0 10px 30px rgba(6,41,26,.09);

}


.ccaihero26-nav-links::before {

   content:
      "";

   position:
      absolute;

   top:
      5px;

   bottom:
      5px;

   left:
      5px;

   width:
      calc((100% - 10px) / 4);

   border:
      1px solid rgba(202,255,49,.28);

   border-radius:
      999px;

   background:

      

      radial-gradient(
         20px 2px at 50% 100%,
         #d8ff35 0%,
         transparent 100%
      ),

      linear-gradient(
         135deg,
         #0f5a36 0%,
         #0a3f27 55%,
         #06291a 100%
      );

   box-shadow:

      

      inset 0 1px 0 rgba(255,255,255,.14),

      0 6px 16px rgba(6,41,26,.24);

   opacity:
      0;

   transform:
      translateX(calc(var(--ccai-nav-i) * 100%));

   /* The long delay parks the puck on the last link while it fades,
      so the next hover glides from there and not from the first link. */
   transition:
      opacity .25s ease,
      transform 0s 100000s;

}


.ccaihero26-nav-links:has(a:hover, a:focus-visible)::before {

   opacity:
      1;

   transition:
      opacity .25s ease,
      transform .45s cubic-bezier(.22,1,.36,1);

}


.ccaihero26-nav-links:has(a:nth-child(2):hover, a:nth-child(2):focus-visible) {

   --ccai-nav-i:
      1;

}


.ccaihero26-nav-links:has(a:nth-child(3):hover, a:nth-child(3):focus-visible) {

   --ccai-nav-i:
      2;

}


.ccaihero26-nav-links:has(a:nth-child(4):hover, a:nth-child(4):focus-visible) {

   --ccai-nav-i:
      3;

}


/* Circuit nodes where the trace meets the track */

.ccaihero26-nav-links::after {

   content:
      "";

   position:
      absolute;

   top:
      50%;

   left:
      -5px;

   right:
      -5px;

   height:
      7px;

   margin-top:
      -3.5px;

   background:

      radial-gradient(
         circle at 3.5px 50%,
         #0e7a44 0 2.5px,
         transparent 3px
      ),

      radial-gradient(
         circle at calc(100% - 3.5px) 50%,
         #0e7a44 0 2.5px,
         transparent 3px
      );

   filter:
      drop-shadow(0 0 3px rgba(14,122,68,.5));

   pointer-events:
      none;

}


.ccaihero26-nav-links a {

   position:
      relative;

   z-index:
      1;

   min-height:
      46px;

   padding:
      0 22px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

   border-radius:
      999px;

   color:
      #2b4236;

   text-decoration:
      none;

   font-size:
      13.5px;

   font-weight:
      700;

   letter-spacing:
      .015em;

   transition:
      color .25s ease;

}


.ccaihero26-nav-links a:hover,
.ccaihero26-nav-links a:focus-visible {

   color:
      #ffffff;

}


.ccaihero26-nav-links a:focus-visible,
.ccaihero26-nav-btn:focus-visible {

   outline:
      2px solid #0e7a44;

   outline-offset:
      2px;

}



/* ============================================================
   NAV BUTTON - JEWEL PILL
============================================================ */

.ccaihero26-nav-action {

   position:
      relative;

   z-index:
      1;

   grid-column:
      3;

   justify-self:
      end;

}


.ccaihero26-nav-btn {

   position:
      relative;

   min-height:
      54px;

   padding:
      0 9px 0 24px;

   display:
      inline-flex;

   align-items:
      center;

   gap:
      14px;

   overflow:
      hidden;

   border-radius:
      999px;

   color:
      #ffffff;

   text-decoration:
      none;

   white-space:
      nowrap;

   background:
      linear-gradient(
         135deg,
         #0f5a36 0%,
         #0a3f27 55%,
         #06291a 100%
      );

   font-size:
      14px;

   font-weight:
      800;

   box-shadow:

      

      inset 0 1px 0 rgba(255,255,255,.16),

      0 0 0 4px #ffffff,

      0 0 0 5px rgba(14,122,68,.34),

      0 10px 28px rgba(6,41,26,.24);

   transition:
      transform .35s cubic-bezier(.22,1,.36,1),
      box-shadow .35s ease;

}


.ccaihero26-nav-btn::before {

   content:
      "";

   position:
      absolute;

   top:
      0;

   bottom:
      0;

   left:
      -40%;

   width:
      30%;

   background:
      linear-gradient(
         90deg,
         transparent 0%,
         rgba(255,255,255,.2) 50%,
         transparent 100%
      );

   transform:
      skewX(-20deg);

   animation:
      ccaiNavSheen 6.5s ease-in-out infinite;

   pointer-events:
      none;

}


@keyframes ccaiNavSheen {

   0%,
   64% {

      transform:
         translateX(0) skewX(-20deg);

   }

   100% {

      transform:
         translateX(500%) skewX(-20deg);

   }

}


.ccaihero26-nav-btn span {

   position:
      relative;

}


.ccaihero26-nav-btn i {

   position:
      relative;

   width:
      36px;

   height:
      36px;

   flex-shrink:
      0;

   display:
      grid;

   place-items:
      center;

   overflow:
      hidden;

   border-radius:
      50%;

   color:
      #06291a;

   background:
      #caff31;

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

}


.ccaihero26-nav-btn svg {

   grid-area:
      1 / 1;

   width:
      15px;

   height:
      15px;

   fill:
      none;

   stroke:
      currentColor;

   stroke-width:
      2;

   stroke-linecap:
      round;

   stroke-linejoin:
      round;

   transition:
      transform .4s cubic-bezier(.22,1,.36,1);

}


.ccaihero26-nav-btn svg:last-child {

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

}


.ccaihero26-nav-btn:hover {

   color:
      #ffffff;

   transform:
      translateY(-2px);

   box-shadow:

      

      inset 0 1px 0 rgba(255,255,255,.2),

      0 0 0 4px #ffffff,

      0 0 0 5px rgba(14,122,68,.7),

      0 16px 36px rgba(6,41,26,.32);

}


.ccaihero26-nav-btn:hover svg:first-child {

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

}


.ccaihero26-nav-btn:hover svg:last-child {

   transform:
      translate(0, 0);

}




/* ============================================================
   CENTER HERO CONTAINER
============================================================ */

.ccaihero26-main-container {

   position:
      relative;

   z-index:
      10;

   flex:
      1;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

   padding-top:
      44px;

   padding-bottom:
      80px;

}



/* ============================================================
   MAIN CENTER CONTENT
============================================================ */

.ccaihero26-main {

   position:
      relative;

   width:
      100%;

   max-width:
      1220px;

   margin:
      0 auto;

   text-align:
      center;

}



/* ============================================================
   LAUNCH TICKET
============================================================ */

.ccaihero26-launch {

   --ccai-ticket-stub:
      250px;

   width:
      100%;

   margin:
      0 auto 32px;

   text-align:
      left;

   font-family:
      "Manrope",
      "Inter",
      sans-serif;

}


.ccaihero26-launch-frame {

   filter:
      drop-shadow(0 14px 26px rgba(6,41,26,.12));

}


.ccaihero26-launch-ticket {

   display:
      grid;

   grid-template-columns:
      var(--ccai-ticket-stub) 1.1fr 1fr .7fr 1.5fr;

   min-height:
      92px;

   border-radius:
      20px;

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #f2faf5 100%
      );

   box-shadow:

      

      inset 0 0 0 1px rgba(14,122,68,.14);

   /* Punches the two ticket notches at the tear line */
   -webkit-mask-image:

      radial-gradient(
         circle 10px at var(--ccai-ticket-stub) 0,
         transparent 9.5px,
         #000 10px
      ),

      radial-gradient(
         circle 10px at var(--ccai-ticket-stub) 100%,
         transparent 9.5px,
         #000 10px
      );

   mask-image:

      radial-gradient(
         circle 10px at var(--ccai-ticket-stub) 0,
         transparent 9.5px,
         #000 10px
      ),

      radial-gradient(
         circle 10px at var(--ccai-ticket-stub) 100%,
         transparent 9.5px,
         #000 10px
      );

   -webkit-mask-composite:
      source-in;

   mask-composite:
      intersect;

}


.ccaihero26-launch-stub,
.ccaihero26-launch-item {

   min-width:
      0;

   padding:
      16px 24px;

   display:
      flex;

   flex-direction:
      column;

   justify-content:
      center;

   gap:
      6px;

}


.ccaihero26-launch-stub {

   color:
      #ffffff;

   border-right:
      2px dashed rgba(255,255,255,.34);

   border-radius:
      20px 0 0 20px;

   background:
      linear-gradient(
         135deg,
         #0f5a36 0%,
         #0a3f27 55%,
         #06291a 100%
      );

}


.ccaihero26-launch-item {

   padding-top:
      22px;

   justify-content:
      flex-start;

}


.ccaihero26-launch-item + .ccaihero26-launch-item {

   border-left:
      1px solid rgba(14,122,68,.12);

}


.ccaihero26-launch-label {

   display:
      flex;

   align-items:
      center;

   gap:
      8px;

   color:
      #566c60;

   font-size:
      11px;

   font-weight:
      700;

   line-height:
      1.2;

   letter-spacing:
      .13em;

   text-transform:
      uppercase;

   white-space:
      nowrap;

}


.ccaihero26-launch-stub .ccaihero26-launch-label {

   color:
      #caff31;

   font-weight:
      800;

}


.ccaihero26-launch-dot {

   width:
      7px;

   height:
      7px;

   flex-shrink:
      0;

   border-radius:
      50%;

   background:
      #caff31;

   animation:
      ccaiPulseDot 2s ease-in-out infinite;

}


@keyframes ccaiPulseDot {

   0%,
   100% {

      box-shadow:
         0 0 0 2px rgba(202,255,49,.25);

   }

   50% {

      box-shadow:
         0 0 0 5px rgba(202,255,49,.1);

   }

}


.ccaihero26-launch-value {

   color:
      #0b2a1c;

   font-size:
      18px;

   font-weight:
      800;

   line-height:
      29px;

   letter-spacing:
      -.01em;

   white-space:
      nowrap;

}


.ccaihero26-launch-stub .ccaihero26-launch-value {

   color:
      #ffffff;

   font-size:
      20px;

}


.ccaihero26-launch-value em {

   color:
      #0a8a45;

   font-size:
      24px;

   font-style:
      normal;

}


.ccaihero26-launch-value small {

   margin-left:
      4px;

   color:
      #4a5e53;

   font-size:
      13px;

   line-height:
      1;

   font-weight:
      600;

   letter-spacing:
      0;

}



/* ============================================================
   PRE HEADLINE
============================================================ */

.ccaihero26-prehead {

   margin:
      0 0 22px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

   flex-wrap:
      wrap;

   gap:
      6px 12px;

   color:
      #2b4236;

   font-family:
      "Manrope",
      "Inter",
      sans-serif;

   font-size:
      18px;

   line-height:
      1.4;

   font-weight:
      600;

}


.ccaihero26-prehead::before,
.ccaihero26-prehead::after {

   content:
      "";

   width:
      64px;

   height:
      1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(14,122,68,.6)
      );

}


.ccaihero26-prehead::after {

   transform:
      scaleX(-1);

}


.ccaihero26-prehead-kicker {

   color:
      #0a7a3f;

   font-size:
      14px;

   font-weight:
      800;

   letter-spacing:
      .14em;

   text-transform:
      uppercase;

}


.ccaihero26-prehead strong {

   color:
      #06291a;

   font-weight:
      800;

}



/* ============================================================
   MAIN TITLE
============================================================ */

.ccaihero26-title {

   max-width:
      1180px;

   margin:
      0 auto;

   color:
      #0b2a1c;

   font-family:
      "Manrope",
      "Inter",
      sans-serif;

   font-size:
      clamp(48px, 5vw, 60px);

   line-height:
      1.3;

   letter-spacing:
      -.03em;

   font-weight:
      800;

}


.ccaihero26-title-line {

   display:
      block;

}


/* Connecting words step back so the key phrases carry the line */

.ccaihero26-title-soft {

 color: #000000;
    font-weight: 900;

}


.ccaihero26-title-keep {

   white-space:
      nowrap;

}


.ccaihero26-title-brand {

   white-space:
      nowrap;

   color:
      transparent;

   background:
      linear-gradient(
         90deg,
         #0a7a3f 0%,
         #0e9a4e 45%,
         #0aa06e 75%,
         #06917f 100%
      );

   background-clip:
      text;

   -webkit-background-clip:
      text;

   -webkit-text-fill-color:
      transparent;

}


.ccaihero26-highlight {

   position:
      relative;

   display:
      inline-block;

   margin-top:
      .1em;

   padding:
      0 .2em .04em;

   border-radius:
      .22em;

   color:
      #d9ff37;

   white-space:
      nowrap;

   background:
      linear-gradient(
         135deg,
         #0f5a36 0%,
         #0a3f27 55%,
         #06291a 100%
      );

   box-shadow:

      

      0 12px 28px rgba(6,41,26,.24),

      inset 0 1px rgba(255,255,255,.16);

   transform:
      rotate(-.6deg);

}


.ccaihero26-title-stroke {

   position:
      relative;

   display:
      inline-block;

   white-space:
      nowrap;

}


.ccaihero26-title-stroke::after {

   content:
      "";

   position:
      absolute;

   left:
      -.04em;

   right:
      -.04em;

   bottom:
      -.1em;

   height:
      .2em;

   background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9C44 3 122 1 198 5' fill='none' stroke='%2319b35a' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-title-stroke::after {

   animation:
      ccaiNavDraw .9s .8s cubic-bezier(.22,1,.36,1) both;

}



/* ============================================================
   DESCRIPTION
============================================================ */

.ccaihero26-description {

   max-width:
      1080px;

   margin:
      28px auto 0;

   color:
      #4a5e53;

   font-family:
      "Inter",
      sans-serif;

   font-size:
      18px;

   line-height:
      1.72;

   font-weight:
      400;

   text-wrap:
      balance;

}


.ccaihero26-description strong {

   color:
      #0b2a1c;

   font-weight:
      700;

}


.ccaihero26-description em {

   color:
      #0a6b39;

   font-style:
      normal;

   font-weight:
      500;

   white-space:
      nowrap;

   text-decoration:
      underline 1px rgba(10,107,57,.4);

   text-underline-offset:
      4px;

}


.ccaihero26-description b {

   color:
      #0a7a3f;

   font-weight:
      700;

}



/* ============================================================
   PAYOFF CALLOUT
============================================================ */

.ccaihero26-payoff {

   width:
      fit-content;

   max-width:
      100%;

   margin:
      24px auto 0;

   padding:
      8px 30px;

   border:
      1px solid rgba(14,122,68,.26);

   border-radius:
      999px;

   color:
      #2b4236;

   background:
      linear-gradient(
         90deg,
         rgba(255,255,255,.75) 0%,
         rgba(217,255,55,.34) 50%,
         rgba(255,255,255,.75) 100%
      );

   box-shadow:
      0 10px 26px rgba(6,41,26,.07);

   font-family:
      "Manrope",
      "Inter",
      sans-serif;

   font-size:
      19px;

   line-height:
      1.4;

   font-weight:
      600;

}


.ccaihero26-payoff strong {

   color:
      #0a7a3f;

   font-weight:
      800;

}


.ccaihero26-payoff strong:first-child {

   font-size:
      30px;

   letter-spacing:
      -.02em;

   line-height:
      1;

}



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

.ccaihero26-cta {

   margin-top:
      34px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

}



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

.ccaihero26-primary-btn {
position: relative;
  min-height: 72px;
  padding: 8px 9px 8px 34px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient( 115deg, #0f5a36 0%, #0a3f27 55%, #06291a 100% );
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 0 5px #ffffff, 0 0 0 6px rgba(14,122,68,.34), 0 16px 38px rgba(6,41,26,.26);
  transition: .35s cubic-bezier(.2,.8,.2,1);

}



/* button shine */

.ccaihero26-primary-btn::before {

   content:
      "";

   position:
      absolute;

   width:
      70px;

   height:
      180px;

   top:
      -55px;

   left:
      -100px;

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

   transform:
      rotate(24deg);

   transition:
      left .65s ease;

      

}


.ccaihero26-primary-btn:hover::before {

   left:
      120%;

}


.ccaihero26-primary-btn:hover {

   color:
      #ffffff;

   transform:
      translateY(-4px) scale(1.015);

   box-shadow:

      

      inset 0 1px rgba(255,255,255,.2),

      0 0 0 5px #ffffff,

      0 0 0 6px rgba(14,122,68,.7),

      0 23px 48px rgba(6,41,26,.34);

}



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

.ccaihero26-btn-icon {

   width:
      54px;

   height:
      54px;

   flex-shrink:
      0;

   display:
      grid;

   place-items:
      center;

   border:
      0;

   border-radius:
      50%;

   color:
      #06291a;

   background:
      #caff31;

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

   transition:
      .3s ease;

}


.ccaihero26-btn-icon svg {

   width:
      20px;

   height:
      20px;

   fill:
      none;

   stroke:
      currentColor;

   stroke-width:
      2;

   stroke-linecap:
      round;

   stroke-linejoin:
      round;

}


.ccaihero26-primary-btn:hover
.ccaihero26-btn-icon {

   transform:
      translate(2px, -2px);

}



/* ============================================================
   BOTTOM DECORATION
============================================================ */

.ccaihero26-bottom-decor {

   width:
      310px;

   max-width:
      75%;

   margin:
      38px auto 0;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

   gap:
      14px;

}


.ccaihero26-bottom-line {

   flex:
      1;

   height:
      1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(14,122,68,.45)
      );

}


.ccaihero26-bottom-line:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(167,255,45,.55),
         transparent
      );

}


.ccaihero26-bottom-star {

   color:
      #0e9a4e;

   font-size:
      16px;

   text-shadow:
      0 0 10px rgba(14,154,78,.4);

   animation:
      ccaiStarGlow 2.8s ease-in-out infinite;

}


@keyframes ccaiStarGlow {

   0%,
   100% {

      opacity:
         .55;

      transform:
         scale(.9) rotate(0deg);

   }

   50% {

      opacity:
         1;

      transform:
         scale(1.15) rotate(20deg);

   }

}



/* ============================================================
   BOTTOM PILLS
============================================================ */

.ccaihero26-bottom-pills {

   margin-top:
      24px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

   flex-wrap:
      wrap;

   gap:
      9px;

}


.ccaihero26-pill {

   min-height:
      38px;

   padding:
      0 14px;

   display:
      inline-flex;

   align-items:
      center;

   justify-content:
      center;

   gap:
      7px;

   border:
      1px solid rgba(14,122,68,.16);

   border-radius:
      100px;

   color:
      #4a5e53;

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

   font-size:
      11px;

   font-weight:
      600;

   backdrop-filter:
      blur(10px);

}


.ccaihero26-pill span {

   width:
      18px;

   height:
      18px;

   display:
      grid;

   place-items:
      center;

   border-radius:
      50%;

   color:
      #0e7a44;

   background:
      rgba(14,122,68,.1);

   font-size:
      10px;

   font-weight:
      900;

}



/* ============================================================
   BOTTOM FADE
============================================================ */

.ccaihero26-edge-light {

   position:
      absolute;

   left:
      0;

   right:
      0;

   bottom:
      0;

   z-index:
      3;

   height:
      220px;

   pointer-events:
      none;

   background:
      linear-gradient(
         180deg,
         rgba(243,251,246,0) 0%,
         #f3fbf6 100%
      );

}



/* ============================================================
   HERO LOAD ANIMATION
============================================================ */

.ccaihero26-launch,
.ccaihero26-prehead,
.ccaihero26-title,
.ccaihero26-description,
.ccaihero26-payoff,
.ccaihero26-cta,
.ccaihero26-bottom-decor,
.ccaihero26-bottom-pills {

   opacity:
      0;

   transform:
      translateY(18px);

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-launch {

   animation:
      ccaiHeroReveal .65s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-prehead {

   animation:
      ccaiHeroReveal .65s .08s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-title {

   animation:
      ccaiHeroReveal .8s .15s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-description {

   animation:
      ccaiHeroReveal .7s .27s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-payoff {

   animation:
      ccaiHeroReveal .7s .32s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-cta {

   animation:
      ccaiHeroReveal .7s .36s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-bottom-decor {

   animation:
      ccaiHeroReveal .7s .44s ease forwards;

}


.ccaihero26.ccaihero26-loaded
.ccaihero26-bottom-pills {

   animation:
      ccaiHeroReveal .7s .51s ease forwards;

}


@keyframes ccaiHeroReveal {

   to {

      opacity:
         1;

      transform:
         translateY(0);

   }

}



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

@media (max-width: 1199px) {

   .ccaihero26-container {

      padding-left:
         24px;

      padding-right:
         24px;

   }


   .ccaihero26-launch {

      --ccai-ticket-stub:
         230px;

   }


   .ccaihero26-launch-ticket {

      grid-template-columns:
         var(--ccai-ticket-stub) 1.1fr 1fr .8fr 1.4fr;

   }


   .ccaihero26-launch-stub,
   .ccaihero26-launch-item {

      padding-left:
         18px;

      padding-right:
         18px;

   }


   .ccaihero26-title {

      font-size:
         clamp(44px, 4.7vw, 56px);

   }


   .ccaihero26-description {

      font-size:
         17px;

   }

}



/* ============================================================
   991px
============================================================ */

@media (max-width: 991px) {

   .ccaihero26-nav {

      grid-template-columns:
         auto 1fr;

      grid-template-rows:
         var(--ccai-nav-row) auto;

      row-gap:
         12px;

   }


   .ccaihero26-nav-links {

      grid-column:
         1 / -1;

      grid-row:
         2;

   }


   .ccaihero26-nav-links::after {

      display:
         none;

   }


   .ccaihero26-nav-action {

      grid-column:
         2;

      grid-row:
         1;

   }


   .ccaihero26-launch-ticket {

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

      -webkit-mask-image:

         radial-gradient(
            circle 10px at 0 var(--ccai-ticket-stub),
            transparent 9.5px,
            #000 10px
         ),

         radial-gradient(
            circle 10px at 100% var(--ccai-ticket-stub),
            transparent 9.5px,
            #000 10px
         );

      mask-image:

         radial-gradient(
            circle 10px at 0 var(--ccai-ticket-stub),
            transparent 9.5px,
            #000 10px
         ),

         radial-gradient(
            circle 10px at 100% var(--ccai-ticket-stub),
            transparent 9.5px,
            #000 10px
         );

   }


   .ccaihero26-launch {

      --ccai-ticket-stub:
         76px;

   }


   .ccaihero26-launch-item {

      padding-top:
         16px;

   }


   .ccaihero26-launch-stub {

      grid-column:
         1 / -1;

      min-height:
         var(--ccai-ticket-stub);

      padding:
         14px 22px;

      flex-direction:
         row;

      align-items:
         center;

      justify-content:
         space-between;

      gap:
         16px;

      border-right:
         0;

      border-bottom:
         2px dashed rgba(255,255,255,.34);

      white-space:
         nowrap;

      border-radius:
         20px 20px 0 0;

   }


   .ccaihero26-launch-value small {

      display:
         block;

      margin-left:
         0;

      font-size:
         12px;

      line-height:
         16px;

   }


   .ccaihero26-main-container {

      padding-top:
         75px;

      padding-bottom:
         75px;

   }


   .ccaihero26-main {

      max-width:
         800px;

   }


   .ccaihero26-title {

      font-size:
         clamp(36px, 5.2vw, 46px);

      text-wrap:
         balance;

   }


   .ccaihero26-title-line {

      display:
         inline;

   }


   .ccaihero26-description {

      max-width:
         730px;

      font-size:
         18px;

   }


   .ccaihero26-description br {

      display:
         none;

   }

}



/* ============================================================
   767px
============================================================ */

@media (max-width: 767px) {

   .ccaihero26 {

      min-height:
         auto;

   }


   .ccaihero26-container {

      padding-left:
         13px;

      padding-right:
         13px;

   }


   .ccaihero26-nav-wrap {

      --ccai-nav-row:
         60px;

      --ccai-nav-logo:
         170px;

      padding-top:
         10px;

   }


   .ccaihero26-nav {

      column-gap:
         10px;

   }


   .ccaihero26-nav-links a {

      min-height:
         44px;

      padding:
         0 6px;

      font-size:
         12.5px;

   }


   .ccaihero26-nav-btn {

      min-height:
         46px;

      padding:
         0 6px 0 16px;

      gap:
         9px;

      font-size:
         12.5px;

   }


   .ccaihero26-nav-btn i {

      width:
         32px;

      height:
         32px;

   }


   .ccaihero26-main-container {

      padding-top:
         58px;

      padding-bottom:
         65px;

   }


   .ccaihero26-launch {

      margin-bottom:
         26px;

   }


   .ccaihero26-launch-ticket {

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

   }


   .ccaihero26-launch-item {

      padding:
         14px 16px;

   }


   .ccaihero26-launch-item:nth-child(n + 4) {

      border-top:
         1px solid rgba(14,122,68,.12);

   }


   .ccaihero26-launch-item:nth-child(4) {

      border-left:
         0;

   }


   .ccaihero26-launch-value {

      font-size:
         16px;

   }


   .ccaihero26-launch-stub .ccaihero26-launch-value {

      font-size:
         18px;

   }


   .ccaihero26-prehead {

      flex-direction:
         column;

      margin-bottom:
         16px;

      font-size:
         16px;

   }


   .ccaihero26-prehead::before,
   .ccaihero26-prehead::after {

      display:
         none;

   }


   .ccaihero26-prehead-kicker {

      font-size:
         12px;

   }


   .ccaihero26-title {

      font-size:
         clamp(30px, 7.6vw, 42px);

      line-height:
         1.34;

   }


   .ccaihero26-description {

      margin-top:
         25px;

      padding:
         0 8px;

      font-size:
         16px;

      line-height:
         1.65;

   }


   .ccaihero26-payoff {

      margin-top:
         20px;

      padding:
         10px 20px;

      border-radius:
         20px;

      font-size:
         16px;

   }


   .ccaihero26-payoff strong:first-child {

      font-size:
         25px;

   }


   .ccaihero26-cta {

      margin-top:
         28px;

   }


   .ccaihero26-primary-btn {

      width:
         100%;

      max-width:
         370px;

      min-height:
         64px;

      padding-left:
         24px;

      gap:
         12px;

      font-size:
         16px;

      line-height:
         1.3;

   }


   .ccaihero26-btn-icon {

      width:
         49px;

      height:
         49px;

   }


   .ccaihero26-bottom-decor {

      margin-top:
         31px;

   }


   .ccaihero26-bottom-pills {

      margin-top:
         20px;

      gap:
         7px;

   }


   .ccaihero26-pill {

      min-height:
         34px;

      padding:
         0 11px;

      font-size:
         10px;

   }

}



/* ============================================================
   480px
============================================================ */

@media (max-width: 480px) {

   .ccaihero26-nav-wrap {

      --ccai-nav-logo:
         150px;

   }


   .ccaihero26-nav::before,
   .ccaihero26-nav::after {

      display:
         none;

   }


   .ccaihero26-main-container {

      padding-top:
         48px;

   }


   .ccaihero26-launch-item {

      padding:
         12px 14px;

   }


   .ccaihero26-launch-label {

      font-size:
         10px;

      letter-spacing:
         .1em;

   }


   .ccaihero26-launch-value {

      font-size:
         15px;

   }


   .ccaihero26-title {

      font-size:
         28px;

   }


   .ccaihero26-description {

      font-size:
         15px;

   }


   .ccaihero26-primary-btn {

      max-width:
         330px;

   }


   .ccaihero26-bottom-pills {

      max-width:
         330px;

      margin-left:
         auto;

      margin-right:
         auto;

   }

}



/* ============================================================
   359px
============================================================ */

@media (max-width: 359px) {

   .ccaihero26-nav-wrap {

      --ccai-nav-logo:
         130px;

   }


   .ccaihero26-nav-btn {

      padding:
         0 16px;

   }


   .ccaihero26-nav-btn i {

      display:
         none;

   }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

   .ccaihero26 *,
   .ccaihero26 *::before,
   .ccaihero26 *::after {

      animation-duration:
         .01ms !important;

      animation-iteration-count:
         1 !important;

      transition-duration:
         .01ms !important;

   }


   /* Would otherwise freeze as a stray comet at the start of the trace */
   .ccaihero26-nav::after {

      display:
         none;

   }

}
section2-card {
  position: relative;
  width: 100%;
  min-height: 480px;
  height: 100%;
  background-image: url("../images/form_shape.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  border-radius: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ============================================================
   HERO SCREEN FRAME
============================================================ */

/* Doubled class beats the negative margins .video-dask sets in style.css */
.video-border.ccaihero26-screen {
   position: relative;
   width: 100%;
   max-width: 960px;
   margin: 40px auto 0;
   padding: 0 12px 12px;
   border-radius: 28px;
   background: linear-gradient(145deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
   box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 0 1px rgba(14,122,68,.3),
      0 0 0 9px rgba(255,255,255,.62),
      0 0 0 10px rgba(14,122,68,.18),
      0 34px 70px rgba(6,41,26,.32),
      0 0 90px rgba(170,255,0,.2);
}

/* Lime brackets on the four corners */
.ccaihero26-screen-corner {
   position: absolute;
   width: 46px;
   height: 46px;
   border: 3px solid #aaff00;
   pointer-events: none;
}

.ccaihero26-screen-corner--tl {
   top: -18px;
   left: -18px;
   border-right: 0;
   border-bottom: 0;
   border-top-left-radius: 22px;
}

.ccaihero26-screen-corner--tr {
   top: -18px;
   right: -18px;
   border-left: 0;
   border-bottom: 0;
   border-top-right-radius: 22px;
}

.ccaihero26-screen-corner--bl {
   bottom: -18px;
   left: -18px;
   border-right: 0;
   border-top: 0;
   border-bottom-left-radius: 22px;
}

.ccaihero26-screen-corner--br {
   bottom: -18px;
   right: -18px;
   border-left: 0;
   border-top: 0;
   border-bottom-right-radius: 22px;
}

.ccaihero26-screen-bar {
   height: 44px;
   padding: 0 8px;
   display: flex;
   align-items: center;
   gap: 7px;
}

.ccaihero26-screen-bar i {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255,255,255,.26);
}

.ccaihero26-screen-bar i:first-child {
   background: #caff31;
}

.ccaihero26-screen .video-wrapper {
   border-radius: 16px;
   background: #06291a;
}

.ccaihero26-screen .video-wrapper img {
   width: 100%;
   height: auto;
}


@media (max-width: 991px) {

   .video-border.ccaihero26-screen {
      margin-top: 34px;
   }

   .ccaihero26-screen-corner {
      width: 34px;
      height: 34px;
   }

   .ccaihero26-screen-corner--tl,
   .ccaihero26-screen-corner--tr {
      top: -15px;
   }

   .ccaihero26-screen-corner--bl,
   .ccaihero26-screen-corner--br {
      bottom: -15px;
   }

   .ccaihero26-screen-corner--tl,
   .ccaihero26-screen-corner--bl {
      left: -15px;
   }

   .ccaihero26-screen-corner--tr,
   .ccaihero26-screen-corner--br {
      right: -15px;
   }

}


@media (max-width: 767px) {

   .video-border.ccaihero26-screen {
      width: calc(100% - 22px);
      padding: 0 7px 7px;
      border-radius: 18px;
      box-shadow:
         inset 0 1px 0 rgba(255,255,255,.18),
         0 0 0 1px rgba(14,122,68,.3),
         0 0 0 5px rgba(255,255,255,.62),
         0 22px 44px rgba(6,41,26,.3),
         0 0 50px rgba(170,255,0,.18);
   }

   .ccaihero26-screen-bar {
      height: 30px;
      padding: 0 5px;
      gap: 5px;
   }

   .ccaihero26-screen-bar i {
      width: 7px;
      height: 7px;
   }

   .ccaihero26-screen .video-wrapper {
      border-radius: 11px;
   }

   .ccaihero26-screen-corner {
      width: 24px;
      height: 24px;
      border-width: 2px;
   }

   .ccaihero26-screen-corner--tl,
   .ccaihero26-screen-corner--tr {
      top: -11px;
   }

   .ccaihero26-screen-corner--bl,
   .ccaihero26-screen-corner--br {
      bottom: -11px;
   }

   .ccaihero26-screen-corner--tl,
   .ccaihero26-screen-corner--bl {
      left: -11px;
      border-radius: 0;
      border-top-left-radius: 12px;
   }

   .ccaihero26-screen-corner--bl {
      border-top-left-radius: 0;
      border-bottom-left-radius: 12px;
   }

   .ccaihero26-screen-corner--tr,
   .ccaihero26-screen-corner--br {
      right: -11px;
      border-top-right-radius: 12px;
   }

   .ccaihero26-screen-corner--br {
      border-top-right-radius: 0;
      border-bottom-right-radius: 12px;
   }

}


/* ============================================================
   WELLNESSCLAW AI - LAUNCH PASS
============================================================ */

.ccjv26-launch-section {

   position:
      relative;

   padding:
      1px 0 10px;

   background:
      linear-gradient(
         180deg,
         #f3fbf6 0%,
         #ffffff 100%
      );

   font-family:
      "Manrope",
      "Inter",
      sans-serif;

}


.ccjv26-pass-wrap {

   position:
      relative;

   margin-top:
      -20px;

   filter:
      drop-shadow(0 26px 44px rgba(6,41,26,.2));

}


.ccjv26-pass {

   --ccjv26-tear:
      59%;

   display:
      grid;

   grid-template-columns:
      var(--ccjv26-tear) 1fr;

   border-radius:
      30px;

   overflow:
      hidden;

   /* Punches the two notches at the tear line */
   -webkit-mask-image:

      radial-gradient(
         circle 16px at var(--ccjv26-tear) 0,
         transparent 15.5px,
         #000 16px
      ),

      radial-gradient(
         circle 16px at var(--ccjv26-tear) 100%,
         transparent 15.5px,
         #000 16px
      );

   mask-image:

      radial-gradient(
         circle 16px at var(--ccjv26-tear) 0,
         transparent 15.5px,
         #000 16px
      ),

      radial-gradient(
         circle 16px at var(--ccjv26-tear) 100%,
         transparent 15.5px,
         #000 16px
      );

   -webkit-mask-composite:
      source-in;

   mask-composite:
      intersect;

}



/* ============================================================
   MAIN SIDE - DATE AND COUNTDOWN
============================================================ */

.ccjv26-pass-main {

   position:
      relative;

   min-width:
      0;

   padding:
      38px 44px 40px;

   display:
      flex;

   flex-direction:
      column;

   color:
      #ffffff;

   border-right:
      2px dashed rgba(255,255,255,.3);

   background:

      repeating-radial-gradient(
         circle at 100% 0,
         transparent 0 58px,
         rgba(202,255,49,.07) 58px 59px
      ),

      linear-gradient(
         140deg,
         #0f5a36 0%,
         #0a3f27 52%,
         #06291a 100%
      );

}


.ccjv26-dates {

   position:
      relative;

   flex:
      1;

   display:
      grid;

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

   gap:
      24px;

}


.ccjv26-dates-link {

   position:
      absolute;

   z-index:
      1;

   top:
      50%;

   left:
      50%;

   width:
      42px;

   height:
      42px;

   margin:
      -21px 0 0 -21px;

   display:
      grid;

   place-items:
      center;

   border-radius:
      50%;

   color:
      #06291a;

   background:
      #caff31;

   box-shadow:
      0 0 0 5px #0b4229;

}


.ccjv26-dates-link svg {

   width:
      18px;

   height:
      18px;

   fill:
      none;

   stroke:
      currentColor;

   stroke-width:
      2;

   stroke-linecap:
      round;

   stroke-linejoin:
      round;

}


.ccjv26-date {

   position:
      relative;

   min-width:
      0;

   display:
      flex;

   flex-direction:
      column;

   overflow:
      hidden;

   border-radius:
      22px;

   color:
      #06291a;

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #edf8f1 100%
      );

   box-shadow:

      inset 0 1px 0 rgba(255,255,255,.7),

      0 22px 40px rgba(0,0,0,.36);

   transform:
      rotate(1.2deg);

   transition:
      transform .45s cubic-bezier(.22,1,.36,1),
      box-shadow .45s ease;

}


.ccjv26-date--start {

   background:
      linear-gradient(
         150deg,
         #eaff7a 0%,
         #caff31 50%,
         #aaff00 100%
      );

   transform:
      rotate(-1.2deg);

}


.ccjv26-date:hover {

   transform:
      translateY(-5px);

   box-shadow:

      inset 0 1px 0 rgba(255,255,255,.7),

      0 30px 50px rgba(0,0,0,.44);

}


/* Binding strip with two punched holes */

.ccjv26-date-label {

   position:
      relative;

   padding:
      22px 18px 13px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      space-between;

   gap:
      10px;

   color:
      #ffffff;

   background:
      #06291a;

   font-size:
      11px;

   font-weight:
      800;

   letter-spacing:
      .12em;

   text-transform:
      uppercase;

   white-space:
      nowrap;

}


.ccjv26-date-label::before {

   content:
      "";

   position:
      absolute;

   top:
      8px;

   left:
      50%;

   width:
      52px;

   height:
      7px;

   margin-left:
      -26px;

   background:

      radial-gradient(
         circle at 3.5px 50%,
         #caff31 0 3px,
         transparent 3.5px
      ),

      radial-gradient(
         circle at calc(100% - 3.5px) 50%,
         #caff31 0 3px,
         transparent 3.5px
      );

}


.ccjv26-date--start .ccjv26-date-label span {

   color:
      #caff31;

}


.ccjv26-date-label b {

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

   font-weight:
      700;

}


.ccjv26-date-main {

   flex:
      1;

   padding:
      14px 16px 16px;

   display:
      flex;

   flex-direction:
      column;

   align-items:
      center;

   justify-content:
      center;

   text-align:
      center;

}


.ccjv26-date-day {

   color:
      #06291a;

   font-size:
      124px;

   font-weight:
      800;

   line-height:
      1;

   letter-spacing:
      -.05em;

}


.ccjv26-date-month strong {

   display:
      block;

   margin-top:
      6px;

   font-size:
      19px;

   font-weight:
      800;

   line-height:
      1.2;

   letter-spacing:
      -.01em;

}


.ccjv26-date-time {

   margin:
      0 18px;

   padding:
      13px 0 16px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      space-between;

   gap:
      10px;

   border-top:
      1px dashed rgba(6,41,26,.32);

}


.ccjv26-date-time small {

   color:
      #4a5e53;

   font-size:
      10.5px;

   font-weight:
      700;

   letter-spacing:
      .08em;

   text-transform:
      uppercase;

}


.ccjv26-date--start .ccjv26-date-time small {

   color:
      #24402f;

}


.ccjv26-date-time strong {

   font-size:
      15px;

   font-weight:
      800;

   line-height:
      1.2;

   white-space:
      nowrap;

}



/* ============================================================
   STUB - AFFILIATE ACCESS
============================================================ */

.ccjv26-pass-stub {

   position:
      relative;

   min-width:
      0;

   padding:
      38px 38px 32px;

   display:
      flex;

   flex-direction:
      column;

   color:
      #0b2a1c;

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #f2faf5 100%
      );

}


.ccjv26-featured {

   position:
      absolute;

   top:
      30px;

   right:
      30px;

   padding:
      6px 12px;

   border-radius:
      999px;

   color:
      #06291a;

   background:
      #caff31;

   font-size:
      11px;

   font-weight:
      800;

   letter-spacing:
      .08em;

   text-transform:
      uppercase;

}


.ccjv26-pass-stub small {

   color:
      #0a7a3f;

   font-size:
      12px;

   font-weight:
      800;

   letter-spacing:
      .14em;

   text-transform:
      uppercase;

}


.ccjv26-pass-stub h3 {

   margin:
      16px 0 0;

   color:
      #0b2a1c;

   font-family:
      inherit;

   font-size:
      38px;

   font-weight:
      800;

   line-height:
      1.14;

   letter-spacing:
      -.03em;

}


.ccjv26-pass-stub h3 span {

   display:
      block;

   color:
      #0a7a3f;

}


.ccjv26-launchpad-box {

   margin-top:
      20px;

   padding:
      12px 16px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      space-between;

   gap:
      14px;

   border:
      1px solid rgba(14,122,68,.16);

   border-radius:
      16px;

   background:
      #ffffff;

}


.ccjv26-launchpad-label {

   color:
      #566c60;

   font-size:
      11px;

   font-weight:
      700;

   letter-spacing:
      .12em;

   text-transform:
      uppercase;

   white-space:
      nowrap;

}


.ccjv26-launchpad-logo {

   width:
      128px;

   height:
      auto;

}


.ccjv26-affiliate-copy {

   margin:
      16px 0 20px;

   color:
      #4a5e53;

   font-size:
      15px;

   font-weight:
      500;

   line-height:
      1.55;

}


.ccjv26-affiliate-btn {

   position:
      relative;

   margin-top:
      auto;

   min-height:
      62px;

   padding:
      7px 8px 7px 26px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      space-between;

   gap:
      12px;

   border-radius:
      999px;

   color:
      #ffffff;

   text-decoration:
      none;

   background:
      linear-gradient(
         115deg,
         #0f5a36 0%,
         #0a3f27 55%,
         #06291a 100%
      );

   font-size:
      17px;

   font-weight:
      800;

   box-shadow:
      0 12px 26px rgba(6,41,26,.26);

   transition:
      transform .35s cubic-bezier(.22,1,.36,1),
      box-shadow .35s ease;

}


.ccjv26-affiliate-btn:hover {

   color:
      #ffffff;

   transform:
      translateY(-2px);

   box-shadow:
      0 18px 34px rgba(6,41,26,.34);

}


.ccjv26-affiliate-btn:focus-visible {

   outline:
      2px solid #0e7a44;

   outline-offset:
      3px;

}


.ccjv26-affiliate-btn i {

   width:
      46px;

   height:
      46px;

   flex-shrink:
      0;

   display:
      grid;

   place-items:
      center;

   border-radius:
      50%;

   color:
      #06291a;

   background:
      #caff31;

   transition:
      transform .3s ease;

}


.ccjv26-affiliate-btn:hover i {

   transform:
      translate(2px, -2px);

}


.ccjv26-affiliate-btn svg {

   width:
      18px;

   height:
      18px;

   fill:
      none;

   stroke:
      currentColor;

   stroke-width:
      2;

   stroke-linecap:
      round;

   stroke-linejoin:
      round;

}


.ccjv26-instant {

   margin-top:
      14px;

   color:
      #4a5e53;

   text-align:
      center;

   font-size:
      13px;

   font-weight:
      600;

}


.ccjv26-instant span {

   margin-right:
      4px;

   color:
      #0a7a3f;

   font-weight:
      800;

}



/* ============================================================
   SPEC ROW
============================================================ */

.ccjv26-specs {

   margin-top:
      22px;

   display:
      grid;

   grid-template-columns:
      1.05fr .85fr 1.1fr 1.3fr;

   gap:
      16px;

}


.ccjv26-spec {

   min-width:
      0;

   padding:
      22px 24px 24px;

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

   border-radius:
      22px;

   background:
      #ffffff;

   box-shadow:
      0 12px 30px rgba(6,41,26,.06);

   transition:
      transform .35s cubic-bezier(.22,1,.36,1),
      box-shadow .35s ease;

}


.ccjv26-spec:hover {

   transform:
      translateY(-3px);

   box-shadow:
      0 18px 38px rgba(6,41,26,.1);

}


.ccjv26-spec--key {

   border-color:
      transparent;

   background:
      linear-gradient(
         135deg,
         #e2ff5c 0%,
         #caff31 55%,
         #aaff00 100%
      );

}


.ccjv26-spec small {

   display:
      block;

   color:
      #566c60;

   font-size:
      11px;

   font-weight:
      700;

   letter-spacing:
      .12em;

   text-transform:
      uppercase;

}


.ccjv26-spec--key small {

   color:
      #24402f;

}


.ccjv26-spec strong {

   display:
      block;

   margin-top:
      10px;

   color:
      #0b2a1c;

   font-size:
      30px;

   font-weight:
      800;

   line-height:
      1.15;

   letter-spacing:
      -.02em;

}


.ccjv26-spec p {

   margin:
      6px 0 0;

   color:
      #4a5e53;

   font-size:
      14px;

   font-weight:
      600;

   line-height:
      1.4;

}


.ccjv26-spec--key p {

   color:
      #1d3526;

}


.ccjv26-spec--name strong {

   font-size:
      22px;

   line-height:
      1.5;

}


.ccjv26-niche {

   margin-top:
      12px;

   display:
      flex;

   flex-wrap:
      wrap;

   gap:
      6px;

}


.ccjv26-niche span {

   padding:
      5px 10px;

   border-radius:
      999px;

   color:
      #0a6b39;

   background:
      rgba(14,122,68,.09);

   font-size:
      12px;

   font-weight:
      700;

}



/* ============================================================
   LAUNCH PASS - RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

   .ccjv26-dates {

      gap:
         20px;

   }


   .ccjv26-dates-link {

      width:
         34px;

      height:
         34px;

      margin:
         -17px 0 0 -17px;

      box-shadow:
         0 0 0 4px #0b4229;

   }


   .ccjv26-dates-link svg {

      width:
         15px;

      height:
         15px;

   }


   .ccjv26-date-day {

      font-size:
         98px;

   }


   .ccjv26-date-month strong {

      font-size:
         17px;

   }


   .ccjv26-date-label {

      padding-left:
         14px;

      padding-right:
         14px;

      letter-spacing:
         .08em;

   }


   .ccjv26-date-time {

      margin:
         0 14px;

      flex-direction:
         column;

      align-items:
         flex-start;

      gap:
         3px;

   }


   .ccjv26-pass-main {

      padding:
         32px 30px 32px;

   }


   .ccjv26-pass-stub {

      padding:
         32px 28px 28px;

   }


   .ccjv26-pass-stub h3 {

      font-size:
         32px;

   }


   .ccjv26-specs {

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

   }

}


@media (max-width: 991px) {

   .ccjv26-date-time {

      margin:
         0 18px;

      flex-direction:
         row;

      align-items:
         center;

   }


   .ccjv26-date-day {

      font-size:
         112px;

   }


   .ccjv26-date-month strong {

      font-size:
         20px;

   }


   /* Stacked, the tear line runs across and the side notches are dropped */
   .ccjv26-pass {

      grid-template-columns:
         1fr;

      -webkit-mask-image:
         none;

      mask-image:
         none;

   }


   .ccjv26-pass-main {

      border-right:
         0;

      border-bottom:
         2px dashed rgba(255,255,255,.3);

   }


   .ccjv26-launchpad-box {

      justify-content:
         flex-start;

   }

}


@media (max-width: 767px) {

   .ccjv26-launch-section {

      padding-bottom:
         64px;

   }


   .ccjv26-pass {

      border-radius:
         24px;

   }


   .ccjv26-pass-main {

      padding:
         26px 20px 22px;

   }


   .ccjv26-pass-stub {

      padding:
         26px 20px 22px;

   }


   .ccjv26-featured {

      top:
         22px;

      right:
         18px;

   }


   .ccjv26-pass-stub h3 {

      font-size:
         30px;

   }


   .ccjv26-affiliate-btn {

      padding-left:
         22px;

      font-size:
         16px;

   }

}


@media (max-width: 575px) {

   .ccjv26-dates {

      grid-template-columns:
         1fr;

      gap:
         26px;

   }


   .ccjv26-dates-link {

      transform:
         rotate(90deg);

   }


   .ccjv26-date,
   .ccjv26-date--start {

      transform:
         none;

   }

   .ccjv26-specs {

      grid-template-columns:
         1fr;

      gap:
         12px;

   }

}


@media (max-width: 359px) {

   .ccjv26-launchpad-box {

      flex-direction:
         column;

      align-items:
         flex-start;

      gap:
         6px;

   }

}


/* ==========================================================
   WELLNESSCLAW AI — WHY YOU SHOULD PROMOTE
========================================================== */

.ccconv26-section {
   position: relative;
   padding: 20px 0 104px;
   background: #ffffff;
   color: #0b2a1c;
   font-family: "Manrope", "Inter", sans-serif;
}


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

.ccconv26-heading {
   max-width: 900px;
   margin: 0 auto 52px;
   text-align: center;
}

.ccconv26-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   color: #0a7a3f;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .16em;
   text-transform: uppercase;
}

.ccconv26-eyebrow::before,
.ccconv26-eyebrow::after {
   content: "";
   width: 56px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(14,122,68,.6));
}

.ccconv26-eyebrow::after {
   transform: scaleX(-1);
}

.ccconv26-title {
   margin: 18px 0 0;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 54px;
   font-weight: 800;
   line-height: 1.3;
   letter-spacing: -.03em;
}

.ccconv26-title span {
   display: inline-block;
   padding: 0 .2em .04em;
   border-radius: .22em;
   color: #d9ff37;
   white-space: nowrap;
   background: linear-gradient(135deg, #0f5a36 0%, #0a3f27 55%, #06291a 100%);
   box-shadow: 0 12px 28px rgba(6,41,26,.22), inset 0 1px rgba(255,255,255,.16);
   transform: rotate(-.6deg);
}


/* ==========================================================
   MAIN IMAGE
========================================================== */

.ccconv26-image {
   max-width: 1080px;
   margin: 0 auto 44px;
}

.ccconv26-image img {
   display: block;
   width: 100%;
   height: auto;
   /* Feathers the off-white image background into the white section */
   -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent),
      linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
   mask-image:
      linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent),
      linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
   -webkit-mask-composite: source-in;
   mask-composite: intersect;
}


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

.ccconv26-bento {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 20px;
}

.ccconv26-tile {
   position: relative;
   grid-column: span 4;
   min-width: 0;
   padding: 30px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid rgba(14,122,68,.14);
   border-radius: 26px;
   background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
   box-shadow: 0 14px 34px rgba(6,41,26,.07);
   transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}

.ccconv26-tile:hover {
   transform: translateY(-4px);
   box-shadow: 0 22px 44px rgba(6,41,26,.13);
}

.ccconv26-tile--niche {
   grid-column: span 7;
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
   align-items: center;
   gap: 28px;
   padding: 36px;
   border-color: transparent;
   color: #ffffff;
   background:
      repeating-radial-gradient(circle at 100% 0, transparent 0 58px, rgba(202,255,49,.07) 58px 59px),
      linear-gradient(140deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
}

.ccconv26-tile--product {
   grid-column: span 5;
   padding: 36px;
}

.ccconv26-tile--recurring {
   border-color: transparent;
   background: linear-gradient(145deg, #eaff7a 0%, #caff31 50%, #aaff00 100%);
}

.ccconv26-num {
   display: block;
   margin-bottom: 14px;
   color: #0a7a3f;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .14em;
}

.ccconv26-tile--niche .ccconv26-num {
   color: #caff31;
}

.ccconv26-tile--recurring .ccconv26-num {
   color: #24402f;
}

.ccconv26-tile h3 {
   margin: 0;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 23px;
   font-weight: 800;
   line-height: 1.25;
   letter-spacing: -.02em;
}

.ccconv26-tile--niche h3 {
   color: #ffffff;
   font-size: 30px;
   line-height: 1.2;
}

.ccconv26-tile--product h3 {
   font-size: 26px;
}

.ccconv26-tile p {
   margin: 12px 0 0;
   color: #4a5e53;
   font-size: 15.5px;
   font-weight: 500;
   line-height: 1.6;
}

.ccconv26-tile--niche p {
   color: rgba(255,255,255,.78);
}

.ccconv26-tile--recurring p {
   color: #1d3526;
}

.ccconv26-tile p strong {
   color: #0b2a1c;
   font-weight: 800;
}

.ccconv26-tile--niche p strong {
   color: #caff31;
}


/* ==========================================================
   TILE GRAPHICS
========================================================== */

.ccconv26-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
}

.ccconv26-chips span {
   padding: 7px 12px;
   border-radius: 999px;
   color: #0a6b39;
   background: rgba(14,122,68,.09);
   font-size: 13px;
   font-weight: 700;
   line-height: 1.2;
}

.ccconv26-visual {
   margin-top: auto;
   padding-top: 22px;
}

.ccconv26-niche {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.ccconv26-niche span {
   padding: 10px 14px;
   border: 1px solid rgba(255,255,255,.16);
   border-radius: 14px;
   color: rgba(255,255,255,.72);
   background: rgba(255,255,255,.05);
   font-size: 14px;
   font-weight: 600;
   line-height: 1.2;
   text-decoration: line-through;
   text-decoration-color: rgba(255,255,255,.5);
}

.ccconv26-niche .ccconv26-niche-new {
   padding: 13px 14px;
   border-color: transparent;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 60%, #aaff00 100%);
   font-size: 16px;
   font-weight: 800;
   text-decoration: none;
   box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.ccconv26-bars {
   height: 76px;
   display: flex;
   align-items: flex-end;
   gap: 6px;
}

.ccconv26-bars i {
   flex: 1;
   border-radius: 7px 7px 3px 3px;
   background: linear-gradient(180deg, #0f5a36 0%, #06291a 100%);
}

.ccconv26-bars i:nth-child(1) { height: 26%; opacity: .4; }
.ccconv26-bars i:nth-child(2) { height: 38%; opacity: .5; }
.ccconv26-bars i:nth-child(3) { height: 51%; opacity: .62; }
.ccconv26-bars i:nth-child(4) { height: 64%; opacity: .74; }
.ccconv26-bars i:nth-child(5) { height: 81%; opacity: .87; }
.ccconv26-bars i:nth-child(6) { height: 100%; }

.ccconv26-price {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 14px;
}

.ccconv26-price b {
   color: #0a7a3f;
   font-size: 58px;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.04em;
}

.ccconv26-price span {
   color: #4a5e53;
   font-size: 13px;
   font-weight: 700;
   line-height: 1.35;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199px) {

   .ccconv26-title {
      font-size: 46px;
   }

   .ccconv26-tile {
      grid-column: span 6;
   }

   .ccconv26-tile--niche,
   .ccconv26-tile--product,
   .ccconv26-tile--agency {
      grid-column: span 12;
   }

}


@media (max-width: 767px) {

   .ccconv26-section {
      padding: 8px 0 68px;
   }

   .ccconv26-heading {
      margin-bottom: 26px;
   }

   .ccconv26-image {
      margin-bottom: 26px;
   }

   .ccconv26-title {
      font-size: 32px;
      line-height: 1.36;
   }

   .ccconv26-bento {
      gap: 14px;
   }

   .ccconv26-tile,
   .ccconv26-tile--niche,
   .ccconv26-tile--product,
   .ccconv26-tile--agency {
      grid-column: span 12;
      padding: 24px 20px;
      border-radius: 22px;
   }

   .ccconv26-tile--niche {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
   }

   .ccconv26-tile--niche h3 {
      font-size: 25px;
   }

   .ccconv26-tile h3,
   .ccconv26-tile--product h3 {
      font-size: 22px;
   }

}


@media (max-width: 400px) {

   .ccconv26-eyebrow::before,
   .ccconv26-eyebrow::after {
      width: 28px;
   }

   .ccconv26-title {
      font-size: 28px;
   }

}

/* ==========================================================
   WELLNESSCLAW AI — WHAT IS WELLNESSCLAW AI
========================================================== */

.ccwhat26-section {
   position: relative;
   padding: 92px 0 100px;
   background: #010d08 url(../images/ccflow26-section.png) no-repeat center top;
   background-size: cover;
   color: #ffffff;
   font-family: "Manrope", "Inter", sans-serif;
}

.ccwhat26-top {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
   gap: 56px;
}

.ccwhat26-title {
   margin: 0;
   color: #ffffff;
   font-family: inherit;
   font-size: 52px;
   font-weight: 800;
   line-height: 1.28;
   letter-spacing: -.03em;
}

.ccwhat26-title span {
   display: inline-block;
   padding: 0 .2em .04em;
   border-radius: .22em;
   color: #06291a;
   white-space: nowrap;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   box-shadow: 0 14px 34px rgba(170,255,0,.22), inset 0 1px rgba(255,255,255,.6);
   transform: rotate(-.6deg);
}

.ccwhat26-lead {
   margin: 22px 0 0;
   color: rgba(255,255,255,.82);
   font-size: 20px;
   font-weight: 500;
   line-height: 1.55;
}

.ccwhat26-lead strong {
   color: #caff31;
   font-weight: 800;
}


/* ==========================================================
   TOPIC PROMPT
========================================================== */

.ccwhat26-prompt {
   margin-top: 26px;
   padding: 18px 20px 20px;
   border: 1px solid rgba(202,255,49,.16);
   background: linear-gradient(180deg, rgba(14,48,32,.86) 0%, rgba(4,20,13,.92) 100%);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   border-radius: 20px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 36px rgba(0,0,0,.4);
}

.ccwhat26-prompt p {
   margin: 0 0 12px;
   color: rgba(255,255,255,.76);
   font-size: 13px;
   font-weight: 700;
   line-height: 1.4;
}

.ccwhat26-topics {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 10px;
   color: rgba(255,255,255,.76);
   font-size: 14px;
   font-weight: 600;
}

.ccwhat26-topics b {
   padding: 9px 15px;
   border-radius: 12px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 60%, #aaff00 100%);
   font-size: 15px;
   font-weight: 800;
   line-height: 1.2;
}


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

.ccwhat26-image {
   overflow: hidden;
   border-radius: 26px;
   /* background:
      repeating-radial-gradient(circle at 100% 0, transparent 0 58px, rgba(202,255,49,.07) 58px 59px),
      linear-gradient(140deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
   border: 1px solid rgba(202,255,49,.22);
   box-shadow: 0 24px 46px rgba(0,0,0,.45); */
}

.ccwhat26-image img {
   display: block;
   width: 100%;
   height: auto;
}

/* Until an image is added the slot shows the panel, not a broken icon */
.ccwhat26-image:has(img[src=""]) {
   min-height: 400px;
}

.ccwhat26-image img[src=""] {
   display: none;
}


/* ==========================================================
   WHAT THE APP CREATES
========================================================== */

.ccwhat26-creates {
   margin-top: 56px;
}

.ccwhat26-creates-title {
   display: flex;
   align-items: center;
   gap: 14px;
   margin: 0 0 18px;
   color: #caff31;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   white-space: nowrap;
}

.ccwhat26-creates-title::after {
   content: "";
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, rgba(202,255,49,.5), transparent);
}

.ccwhat26-list {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 14px;
}

.ccwhat26-item {
   min-width: 0;
   padding: 22px 18px 20px;
   border: 1px solid rgba(202,255,49,.16);
   background: linear-gradient(180deg, rgba(14,48,32,.86) 0%, rgba(4,20,13,.92) 100%);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   border-radius: 20px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 36px rgba(0,0,0,.4);
   transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}

.ccwhat26-item:hover {
   transform: translateY(-4px);
   border-color: rgba(202,255,49,.6);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 44px rgba(0,0,0,.5), 0 0 30px rgba(170,255,0,.12);
}

.ccwhat26-item i {
   width: 44px;
   height: 44px;
   margin-bottom: 14px;
   display: grid;
   place-items: center;
   border-radius: 14px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   font-size: 18px;
}

.ccwhat26-item p {
   margin: 0;
   color: #ffffff;
   font-size: 15.5px;
   font-weight: 700;
   line-height: 1.4;
}


/* ==========================================================
   MEMBERSHIP AND NO-BARRIERS BAND
========================================================== */

.ccwhat26-band {
   margin-top: 18px;
   padding: 26px 32px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 28px;
   border-radius: 24px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   box-shadow: 0 18px 40px rgba(170,255,0,.16);
}

.ccwhat26-band p {
   margin: 0;
   color: #1d3526;
   font-size: 17px;
   font-weight: 600;
   line-height: 1.5;
}

.ccwhat26-band p strong {
   color: #06291a;
   font-weight: 800;
}

.ccwhat26-noes {
   display: grid;
   grid-template-columns: repeat(2, auto);
   gap: 8px 22px;
}

.ccwhat26-noes span {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #06291a;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.3;
   white-space: nowrap;
}

.ccwhat26-noes i {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   display: grid;
   place-items: center;
   border-radius: 50%;
   color: #caff31;
   background: #06291a;
   font-size: 10px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199px) {

   .ccwhat26-top {
      gap: 36px;
   }

   .ccwhat26-title {
      font-size: 44px;
   }

   .ccwhat26-list {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .ccwhat26-item {
      grid-column: span 2;
   }

   .ccwhat26-item:nth-child(n + 4) {
      grid-column: span 3;
   }

}


@media (max-width: 991px) {

   .ccwhat26-top,
   .ccwhat26-band {
      grid-template-columns: minmax(0, 1fr);
   }

   .ccwhat26-image:has(img[src=""]) {
      min-height: 320px;
   }

}


@media (max-width: 767px) {

   .ccwhat26-section {
      padding: 60px 0 68px;
   }

   .ccwhat26-title {
      font-size: 32px;
      line-height: 1.36;
   }

   .ccwhat26-lead {
      font-size: 17px;
   }

   .ccwhat26-creates {
      margin-top: 40px;
   }

   .ccwhat26-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .ccwhat26-item,
   .ccwhat26-item:nth-child(n + 4) {
      grid-column: span 1;
   }

   .ccwhat26-item:last-child {
      grid-column: span 2;
   }

   .ccwhat26-band {
      padding: 22px 20px;
      gap: 18px;
   }

   .ccwhat26-band p {
      font-size: 16px;
   }

   .ccwhat26-image:has(img[src=""]) {
      min-height: 240px;
   }

}


@media (max-width: 400px) {

   .ccwhat26-title {
      font-size: 28px;
   }

   .ccwhat26-noes {
      grid-template-columns: minmax(0, 1fr);
   }

}


@media (max-width: 359px) {

   .ccwhat26-list {
      grid-template-columns: minmax(0, 1fr);
   }

   .ccwhat26-item:last-child {
      grid-column: span 1;
   }

}

/* ==========================================================
   WELLNESSCLAW AI — HOW IT WORKS
========================================================== */

.cchow26-section {
   position: relative;
   padding: 84px 0 100px;
   background: linear-gradient(180deg, #f0faf4 0%, #ffffff 100%);
   color: #0b2a1c;
   font-family: "Manrope", "Inter", sans-serif;
}

.cchow26-title {
   margin: 0 0 44px;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 54px;
   font-weight: 800;
   line-height: 1.28;
   letter-spacing: -.03em;
   text-align: center;
}

.cchow26-title span {
   display: inline-block;
   padding: 0 .2em .04em;
   border-radius: .22em;
   color: #d9ff37;
   background: linear-gradient(135deg, #0f5a36 0%, #0a3f27 55%, #06291a 100%);
   box-shadow: 0 12px 28px rgba(6,41,26,.22), inset 0 1px rgba(255,255,255,.16);
   transform: rotate(-.6deg);
}

.cchow26-list {
   display: flex;
   flex-direction: column;
   gap: 28px;
}


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

.cchow26-card {
   position: sticky;
   top: 24px;
   padding: 16px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 16px;
   border: 1px solid rgba(14,122,68,.14);
   border-radius: 32px;
   background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
   box-shadow: 0 -8px 30px rgba(6,41,26,.07), 0 22px 44px rgba(6,41,26,.12);
}

.cchow26-card:nth-child(2) {
   top: 40px;
}

.cchow26-card:nth-child(3) {
   top: 56px;
}

.cchow26-card--forest {
   border-color: transparent;
   color: #ffffff;
   background:
      repeating-radial-gradient(circle at 0 100%, transparent 0 58px, rgba(202,255,49,.07) 58px 59px),
      linear-gradient(140deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
}

.cchow26-card--lime {
   border-color: transparent;
   background: linear-gradient(145deg, #eaff7a 0%, #caff31 50%, #aaff00 100%);
}

.cchow26-text {
   min-width: 0;
   padding: 30px 28px 26px 30px;
   display: flex;
   flex-direction: column;
}

.cchow26-step {
   align-self: flex-start;
   padding: 7px 14px;
   border-radius: 999px;
   color: #caff31;
   background: #06291a;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.cchow26-card--forest .cchow26-step {
   color: #06291a;
   background: #caff31;
}

.cchow26-card h3 {
   margin: 24px 0 0;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 42px;
   font-weight: 800;
   line-height: 1.14;
   letter-spacing: -.03em;
}

.cchow26-card--forest h3 {
   color: #ffffff;
}

.cchow26-card p {
   margin: 14px 0 0;
   color: #4a5e53;
   font-size: 18px;
   font-weight: 500;
   line-height: 1.6;
}

.cchow26-card--forest p {
   color: rgba(255,255,255,.8);
}

.cchow26-card--lime p {
   color: #1d3526;
}

.cchow26-card p strong {
   color: #0a7a3f;
   font-weight: 800;
}

.cchow26-card--forest p strong {
   color: #caff31;
}

.cchow26-card--lime p strong {
   color: #06291a;
}


/* Circuit trace showing progress through the three steps */

.cchow26-trace {
   margin-top: auto;
   padding-top: 28px;
   display: flex;
   align-items: center;
}

.cchow26-trace i {
   width: 11px;
   height: 11px;
   flex-shrink: 0;
   border-radius: 50%;
   background: rgba(14,122,68,.22);
}

.cchow26-trace i.is-on {
   background: #0e7a44;
   box-shadow: 0 0 0 4px rgba(14,122,68,.16);
}

.cchow26-trace b {
   flex: 1;
   height: 1px;
   background: rgba(14,122,68,.26);
}

.cchow26-trace b.is-on {
   height: 2px;
   background: #0e7a44;
}

.cchow26-card--forest .cchow26-trace i {
   background: rgba(255,255,255,.24);
}

.cchow26-card--forest .cchow26-trace i.is-on {
   background: #caff31;
   box-shadow: 0 0 0 4px rgba(202,255,49,.18);
}

.cchow26-card--forest .cchow26-trace b {
   background: rgba(255,255,255,.24);
}

.cchow26-card--forest .cchow26-trace b.is-on {
   background: #caff31;
}

.cchow26-card--lime .cchow26-trace i.is-on {
   background: #06291a;
   box-shadow: 0 0 0 4px rgba(6,41,26,.16);
}

.cchow26-card--lime .cchow26-trace b.is-on {
   background: #06291a;
}


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

.cchow26-image {
   min-width: 0;
   min-height: 340px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-radius: 22px;
   background:
      repeating-radial-gradient(circle at 100% 0, transparent 0 58px, rgba(202,255,49,.07) 58px 59px),
      linear-gradient(140deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
}

.cchow26-card--forest .cchow26-image {
   border: 1px solid rgba(255,255,255,.14);
   background: rgba(255,255,255,.07);
}

.cchow26-card--forest .cchow26-text {
   order: 2;
   padding: 30px 30px 26px 28px;
}

.cchow26-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* Until an image is added the slot shows the panel, not a broken icon */
.cchow26-image img[src=""] {
   display: none;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199px) {

   .cchow26-title {
      font-size: 46px;
   }

   .cchow26-card h3 {
      font-size: 34px;
   }

   .cchow26-card p {
      font-size: 17px;
   }

   .cchow26-image {
      min-height: 300px;
   }

}


@media (max-width: 991px) {

   /* Stacked cards can be taller than the screen, so they scroll normally here */
   .cchow26-card,
   .cchow26-card:nth-child(2),
   .cchow26-card:nth-child(3) {
      position: static;
      grid-template-columns: minmax(0, 1fr);
   }

   .cchow26-card--forest .cchow26-text {
      order: 0;
   }

   .cchow26-text,
   .cchow26-card--forest .cchow26-text {
      padding: 22px 18px 18px;
   }

}


@media (max-width: 767px) {

   .cchow26-section {
      padding: 56px 0 68px;
   }

   .cchow26-title {
      margin-bottom: 30px;
      font-size: 34px;
   }

   .cchow26-list {
      gap: 18px;
   }

   .cchow26-card {
      padding: 12px;
      border-radius: 26px;
   }

   .cchow26-card h3 {
      margin-top: 18px;
      font-size: 29px;
   }

   .cchow26-card p {
      font-size: 16px;
   }

   .cchow26-trace {
      padding-top: 22px;
   }

   .cchow26-image {
      min-height: 220px;
      border-radius: 18px;
   }

}

/* ============================================================
   WELLNESSCLAW AI — WHAT'S INSIDE
============================================================ */

.ccflow26-section {
   position: relative;
   padding: 96px 0 300px;
   background: #010d08 url(../images/ccflow26-section.png) no-repeat center bottom;
   background-size: cover;
   color: #ffffff;
   font-family: "Manrope", "Inter", sans-serif;
}

.ccflow26-title {
   margin: 0 0 52px;
   color: #ffffff;
   font-family: inherit;
   font-size: 54px;
   font-weight: 800;
   line-height: 1.28;
   letter-spacing: -.03em;
   text-align: center;
}

.ccflow26-title span {
   display: inline-block;
   padding: 0 .2em .04em;
   border-radius: .22em;
   color: #06291a;
   white-space: nowrap;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   box-shadow: 0 14px 34px rgba(170,255,0,.22), inset 0 1px rgba(255,255,255,.6);
   transform: rotate(-.6deg);
}


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

.ccflow26-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 20px;
}

.ccflow26-card {
   position: relative;
   grid-column: span 4;
   min-width: 0;
   padding: 12px 12px 26px;
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(202,255,49,.16);
   border-radius: 26px;
   background: linear-gradient(180deg, rgba(14,48,32,.86) 0%, rgba(4,20,13,.92) 100%);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 44px rgba(0,0,0,.42);
   transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}

.ccflow26-card:hover {
   transform: translateY(-6px);
   border-color: rgba(202,255,49,.6);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 54px rgba(0,0,0,.5), 0 0 36px rgba(170,255,0,.14);
}

.ccflow26-card--wide {
   grid-column: span 6;
}

.ccflow26-card--narrow {
   grid-column: span 3;
}


/* ============================================================
   SCREENSHOT WINDOW
============================================================ */

.ccflow26-shot {
   flex: 1 1 auto;
   min-height: 240px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid rgba(255,255,255,.12);
   border-radius: 18px;
   background: #06291a;
}

.ccflow26-card--wide .ccflow26-shot {
   min-height: 310px;
}

.ccflow26-card--narrow .ccflow26-shot {
   min-height: 200px;
}

.ccflow26-shot::before {
   content: "";
   flex: 0 0 30px;
   background:
      radial-gradient(circle at 18px 50%, #caff31 0 3.5px, transparent 4px),
      radial-gradient(circle at 32px 50%, rgba(255,255,255,.34) 0 3.5px, transparent 4px),
      radial-gradient(circle at 46px 50%, rgba(255,255,255,.18) 0 3.5px, transparent 4px),
      rgba(255,255,255,.05);
   border-bottom: 1px solid rgba(255,255,255,.08);
}

.ccflow26-shot-view {
   position: relative;
   flex: 1;
   display: grid;
   place-items: center;
   background:
      repeating-radial-gradient(circle at 100% 0, transparent 0 46px, rgba(202,255,49,.07) 46px 47px),
      linear-gradient(140deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
}

.ccflow26-shot-view > i {
   color: rgba(202,255,49,.22);
   font-size: 66px;
}

.ccflow26-shot-view img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
}

/* Until a screenshot is added the window shows the icon, not a broken image */
.ccflow26-shot-view img[src=""] {
   display: none;
}


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

.ccflow26-body {
   position: relative;
   padding: 0 14px;
}

.ccflow26-badge {
   width: 56px;
   height: 56px;
   margin-top: -28px;
   display: grid;
   place-items: center;
   position: relative;
   border-radius: 17px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   font-size: 22px;
   box-shadow: 0 0 0 5px rgba(6,32,20,.95), 0 12px 24px rgba(0,0,0,.4);
   transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.ccflow26-card:hover .ccflow26-badge {
   transform: rotate(-6deg) scale(1.06);
}

.ccflow26-num {
   position: absolute;
   top: 12px;
   right: 14px;
   color: rgba(255,255,255,.6);
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .14em;
}

.ccflow26-card h3 {
   margin: 18px 0 0;
   color: #ffffff;
   font-family: inherit;
   font-size: 22px;
   font-weight: 800;
   line-height: 1.25;
   letter-spacing: -.02em;
}

.ccflow26-card--wide h3 {
   font-size: 28px;
}

.ccflow26-card p {
   margin: 10px 0 0;
   color: rgba(255,255,255,.78);
   font-size: 15.5px;
   font-weight: 500;
   line-height: 1.6;
}

.ccflow26-card p strong {
   color: #caff31;
   font-weight: 700;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

   .ccflow26-section {
      padding-bottom: 220px;
   }

   .ccflow26-title {
      font-size: 46px;
   }

   .ccflow26-card,
   .ccflow26-card--wide,
   .ccflow26-card--narrow {
      grid-column: span 6;
   }

   .ccflow26-shot,
   .ccflow26-card--wide .ccflow26-shot,
   .ccflow26-card--narrow .ccflow26-shot {
      min-height: 230px;
   }

   .ccflow26-card--wide h3 {
      font-size: 22px;
   }

}


@media (max-width: 767px) {

   .ccflow26-section {
      padding: 64px 0 150px;
   }

   .ccflow26-title {
      margin-bottom: 32px;
      font-size: 32px;
      line-height: 1.36;
   }

   .ccflow26-grid {
      gap: 16px;
   }

   .ccflow26-card,
   .ccflow26-card--wide,
   .ccflow26-card--narrow {
      grid-column: span 12;
   }

   .ccflow26-shot,
   .ccflow26-card--wide .ccflow26-shot,
   .ccflow26-card--narrow .ccflow26-shot {
      min-height: 210px;
   }

}


@media (max-width: 400px) {

   .ccflow26-title {
      font-size: 28px;
   }

}

/* ============================================================
   WELLNESSCLAW AI — WHO YOUR BUYERS ARE
============================================================ */

.ccbuy26-section {
   position: relative;
   padding: 92px 0 96px;
   background: linear-gradient(180deg, #ffffff 0%, #f0faf4 100%);
   color: #0b2a1c;
   font-family: "Manrope", "Inter", sans-serif;
}

.ccbuy26-title {
   margin: 0 0 50px;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 54px;
   font-weight: 800;
   line-height: 1.28;
   letter-spacing: -.03em;
   text-align: center;
}

.ccbuy26-title span {
   display: inline-block;
   padding: 0 .2em .04em;
   border-radius: .22em;
   color: #d9ff37;
   background: linear-gradient(135deg, #0f5a36 0%, #0a3f27 55%, #06291a 100%);
   box-shadow: 0 12px 28px rgba(6,41,26,.22), inset 0 1px rgba(255,255,255,.16);
   transform: rotate(-.6deg);
}

.ccbuy26-frame {
   padding: 10px;
   border-radius: 34px;
   background: rgba(255,255,255,.72);
   box-shadow: 0 24px 50px rgba(6,41,26,.1);
}

.ccbuy26-map {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 1px;
   overflow: hidden;
   border: 1px solid rgba(14,122,68,.16);
   border-radius: 26px;
   background: rgba(14,122,68,.16);
}


/* ============================================================
   BUYER CELLS
============================================================ */

.ccbuy26-card {
   min-width: 0;
   padding: 26px 18px 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   background: #ffffff;
   transition: background-color .35s ease;
}

.ccbuy26-card:hover {
   background-color: #f5fcf7;
}


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

.ccbuy26-image {
   position: relative;
   width: 100%;
   max-width: 200px;
   aspect-ratio: 1;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(202,255,49,.34) 0%, rgba(103,255,194,.18) 46%, rgba(255,255,255,0) 72%);
}

.ccbuy26-image > i {
   color: #0e7a44;
   font-size: 52px;
}

/* A transparent image would otherwise show the icon through it */
.ccbuy26-image:has(img:not([src=""])) > i {
   display: none;
}

.ccbuy26-image img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.ccbuy26-card:hover .ccbuy26-image img {
   transform: scale(1.05);
}

/* Until an image is added the slot shows the icon, not a broken image */
.ccbuy26-image img[src=""] {
   display: none;
}


/* ============================================================
   CELL TEXT
============================================================ */

.ccbuy26-card h3 {
   margin: 18px 0 0;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 19px;
   font-weight: 800;
   line-height: 1.28;
   letter-spacing: -.015em;
}

.ccbuy26-card p {
   margin: 7px 0 0;
   color: #4a5e53;
   font-size: 14.5px;
   font-weight: 500;
   line-height: 1.5;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

   .ccbuy26-title {
      font-size: 46px;
   }

   .ccbuy26-card {
      padding: 22px 14px 26px;
   }

   .ccbuy26-card h3 {
      font-size: 17px;
   }

   .ccbuy26-card p {
      font-size: 13.5px;
   }

}


@media (max-width: 991px) {

   .ccbuy26-map {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .ccbuy26-card:last-child {
      grid-column: span 2;
   }

   .ccbuy26-card {
      padding: 24px 18px 28px;
   }

   .ccbuy26-card h3 {
      font-size: 19px;
   }

   .ccbuy26-card p {
      font-size: 14.5px;
   }

}


@media (max-width: 767px) {

   .ccbuy26-section {
      padding: 60px 0 68px;
   }

   .ccbuy26-title {
      margin-bottom: 30px;
      font-size: 32px;
      line-height: 1.36;
   }

   .ccbuy26-frame {
      padding: 7px;
      border-radius: 28px;
   }

   .ccbuy26-map {
      border-radius: 22px;
   }

}


@media (max-width: 480px) {

   .ccbuy26-map {
      grid-template-columns: minmax(0, 1fr);
   }

   .ccbuy26-card:last-child {
      grid-column: span 1;
   }

   .ccbuy26-image {
      max-width: 180px;
   }

}


@media (max-width: 400px) {

   .ccbuy26-title {
      font-size: 28px;
   }

}

/* ============================================================
   CREATORCLAW AI — AFFILIATE SUPPORT
   WHITE / LIME PREMIUM SECTION
============================================================ */

.ccsupport26-section {

   --cc-green: #95e600;
   --cc-green-light: #cfff32;
   --cc-green-dark: #55ae00;
   --cc-dark: #07120b;
   --cc-text: #626d61;

   position: relative;

   overflow: hidden;

   padding: 80px 0 95px;

   background:
      radial-gradient(
         circle at 80% 48%,
         rgba(162, 237, 35, .13),
         transparent 31%
      ),
      radial-gradient(
         circle at 10% 80%,
         rgba(90, 198, 54, .06),
         transparent 26%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fcfdfb 55%,
         #ffffff 100%
      );

   font-family:
      "Inter",
      Arial,
      sans-serif;

   color: #111;

   isolation: isolate;

}


.ccsupport26-section *,
.ccsupport26-section *::before,
.ccsupport26-section *::after {

   box-sizing: border-box;

}


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

.ccsupport26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .45;

   background-image:
      linear-gradient(
         rgba(81, 127, 31, .027) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(81, 127, 31, .027) 1px,
         transparent 1px
      );

   background-size:
      65px 65px;

   mask-image:
      linear-gradient(
         to bottom,
         transparent,
         black 15%,
         black 85%,
         transparent
      );

}


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

.ccsupport26-bg-glow {

   position: absolute;

   z-index: -4;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(30px);

}


.ccsupport26-bg-glow--left {

   width: 460px;

   height: 460px;

   left: -260px;

   bottom: -170px;

   background:
      radial-gradient(
         circle,
         rgba(147, 224, 23, .11),
         transparent 70%
      );

}


.ccsupport26-bg-glow--right {

   width: 580px;

   height: 580px;

   right: -320px;

   top: 70px;

   background:
      radial-gradient(
         circle,
         rgba(77, 200, 81, .09),
         transparent 70%
      );

}



/* ============================================================
   TOP PILL
============================================================ */

.ccsupport26-top-pill {

   position: relative;

   z-index: 10;

   width: fit-content;

   min-height: 46px;

   margin: 0 auto 60px;

   padding: 0 21px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 9px;

   border:
      1px solid rgba(74, 123, 24, .11);

   border-radius: 10px;

   color: #d3ff34;

   background:
      linear-gradient(
         135deg,
         #142014,
         #07110b
      );

   box-shadow:
      0 12px 28px rgba(21, 44, 12, .16);

   font-size: 11px;

   font-weight: 900;

   letter-spacing: .075em;

   transform:
      rotate(-1deg);

}


.ccsupport26-pill-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #a7f900;

   box-shadow:
      0 0 10px rgba(167,249,0,.6);

}


.ccsupport26-pill-star {

   color: #cfff33;

}



/* ============================================================
   MAIN ROW
============================================================ */

.ccsupport26-main-row {

   min-height: 580px;

}



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

.ccsupport26-copy {

   position: relative;

   z-index: 5;

   max-width: 610px;

}


.ccsupport26-kicker {

   margin-bottom: 11px;

   color: #6dab00;

   font-size: 11px;

   font-weight: 900;

   letter-spacing: .17em;

}



/* ============================================================
   HEADLINE
============================================================ */

.ccsupport26-title {

   margin: 0;

   color: #101510;

   font-size:
      clamp(43px, 4.3vw, 68px);

   line-height: 1.02;

   letter-spacing: -.055em;

   font-weight: 900;
text-align: center;
}


.ccsupport26-title > span {

   display: inline-block;

   padding: 1px 9px 5px;

   border-radius: 8px;

   color: #0a1204;

   background:
      linear-gradient(
         110deg,
         #d7ff39,
         #9bea00
      );

   transform:
      rotate(-1deg);

}


.ccsupport26-title strong {

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #70b900,
         #91dd00,
         #37a84c
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}



/* ============================================================
   INTRO
============================================================ */

.ccsupport26-intro-line {

   margin: 22px 0 25px;

   display: flex;

   align-items: center;

   gap: 10px;

   color: #687265;

   font-size: 15px;

   font-weight: 700;

}


.ccsupport26-intro-line span {

   width: 35px;

   height: 2px;

   border-radius: 10px;

   background:
      linear-gradient(
         90deg,
         #81cf00,
         #b4ef16
      );

}



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

.ccsupport26-list {

   position: relative;

}


.ccsupport26-list-item {

   position: relative;

   padding: 16px 10px 16px 65px;

   border-bottom:
      1px solid rgba(46, 75, 26, .10);

   transition:
      .3s ease;

}


.ccsupport26-list-item:last-child {

   border-bottom: 0;

}


.ccsupport26-list-item:hover {

   padding-left:
      70px;

}


.ccsupport26-list-icon {

   position: absolute;

   left: 0;

   top: 17px;

   width: 45px;

   height: 45px;

   display: grid;

   place-items: center;

   border:
      1px solid rgba(105, 167, 16, .14);

   border-radius: 13px;

   color: #142300;

   background:
      linear-gradient(
         135deg,
         #dcff45,
         #8fe300
      );

   box-shadow:
      0 10px 25px rgba(101, 165, 0, .11);

   font-size: 18px;

   font-weight: 900;

}


.ccsupport26-list-item h3 {

   margin: 0 0 5px;

   color: #172014;

   font-size: 18px;

   line-height: 1.3;

   font-weight: 800;

}


.ccsupport26-list-item p {

   max-width: 480px;

   margin: 0;

   color: #6b7568;

   font-size: 14px;

   line-height: 1.55;

}



/* ============================================================
   RIGHT VISUAL
============================================================ */

.ccsupport26-visual {

   position: relative;

   min-height: 590px;

   display: flex;

   align-items: center;

   justify-content: center;

}


/* ============================================================
   BACKGROUND SPLASH
============================================================ */

.ccsupport26-visual-splash {

   position: absolute;

   left: 50%;

   top: 50%;

   width: 500px;

   height: 420px;

   transform:
      translate(-50%, -50%)
      rotate(-8deg);

   border-radius:
      44% 56% 58% 42% /
      44% 44% 56% 56%;

   background:
      linear-gradient(
         135deg,
         rgba(214,255,61,.72),
         rgba(147,233,0,.30)
      );

   filter:
      blur(.2px);

   opacity: .78;

}


/* ============================================================
   VISUAL GLOW
============================================================ */

.ccsupport26-visual-glow {

   position: absolute;

   left: 50%;

   top: 52%;

   width: 520px;

   height: 420px;

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

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(158,235,35,.20),
         rgba(132,215,16,.06) 45%,
         transparent 70%
      );

   filter: blur(20px);

}



/* ============================================================
   ORBITS
============================================================ */

.ccsupport26-orbit {

   position: absolute;

   left: 50%;

   top: 52%;

   border-radius: 50%;

   transform:
      translate(-50%,-50%)
      rotateX(65deg);

   border:
      1px solid rgba(89, 147, 19, .16);

}


.ccsupport26-orbit--one {

   width: 530px;

   height: 530px;

}


.ccsupport26-orbit--two {

   width: 400px;

   height: 400px;

   border-style: dashed;

}



/* ============================================================
   MAIN IMAGE
============================================================ */

.ccsupport26-main-image {

   position: relative;

   z-index: 5;

   display: block;

   max-width: 100%;

   /* max-height: 565px; */

   margin: 0 auto;

   object-fit: contain;

   filter:
      drop-shadow(
         0 25px 28px rgba(20, 45, 9, .16)
      );

}



/* ============================================================
   FLOAT CARDS
============================================================ */

.ccsupport26-float-card {

   position: absolute;

   z-index: 10;

   min-width: 175px;

   padding: 10px 13px;

   display: flex;

   align-items: center;

   gap: 10px;

   border:
      1px solid rgba(78, 122, 36, .10);

   border-radius: 14px;

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

   backdrop-filter:
      blur(15px);

   box-shadow:
      0 15px 35px rgba(27, 55, 13, .10);

   animation:
      ccsupportFloat 5s ease-in-out infinite;

}


.ccsupport26-float-icon {

   width: 35px;

   height: 35px;

   display: grid;

   place-items: center;

   flex-shrink: 0;

   border-radius: 10px;

   color: #102000;

   background:
      linear-gradient(
         135deg,
         #dbff42,
         #91e700
      );

   font-size: 14px;

   font-weight: 900;

}


.ccsupport26-float-card small {

   display: block;

   color: #929b8e;

   font-size: 7px;

   font-weight: 900;

   letter-spacing: .12em;

}


.ccsupport26-float-card strong {

   display: block;

   margin-top: 2px;

   color: #1b2318;

   font-size: 12px;

   font-weight: 800;

}


.ccsupport26-float-card--one {

   top: 100px;

   left: -15px;

}


.ccsupport26-float-card--two {

   top: 235px;

   right: -10px;

   animation-delay: 1.1s;

}


.ccsupport26-float-card--three {

   bottom: 110px;

   left: 20px;

   animation-delay: 2s;

}


@keyframes ccsupportFloat {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-10px);
   }

}



/* ============================================================
   VISUAL BOTTOM LABEL
============================================================ */

.ccsupport26-visual-label {

   position: absolute;

   z-index: 8;

   left: 50%;

   bottom: 40px;

   min-height: 42px;

   padding: 0 17px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 7px;

   transform:
      translateX(-50%);

   border-radius: 100px;

   color: #d0ff32;

   background:
      #0c160a;

   box-shadow:
      0 13px 30px rgba(19, 42, 8, .18);

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .11em;

   white-space: nowrap;

}


.ccsupport26-visual-label span {

   color: #baff1d;

}



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

@media (max-width: 991px) {

   .ccsupport26-section {

      padding:
         70px 0 75px;

   }


   .ccsupport26-top-pill {

      margin-bottom:
         45px;

   }


   .ccsupport26-copy {

      max-width:
         720px;

      margin:
         0 auto;

   }


   .ccsupport26-visual {

      max-width:
         700px;

      min-height:
         570px;

      margin:
         25px auto 0;

   }

}



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

@media (max-width: 767px) {

   .ccsupport26-section {

      padding:
         55px 0 60px;

   }


   .ccsupport26-top-pill {

      max-width:
         95%;

      min-height:
         42px;

      margin-bottom:
         36px;

      padding:
         8px 14px;

      font-size:
         9px;

      text-align:
         center;

   }


   .ccsupport26-copy {

      text-align:
         center;

   }


   .ccsupport26-title {

      font-size:
         38px;

   }


   .ccsupport26-intro-line {

      justify-content:
         center;

   }


   .ccsupport26-list {

      text-align:
         left;

   }


   .ccsupport26-list-item {

      padding:
         15px 5px 15px 60px;

   }


   .ccsupport26-list-item:hover {

      padding-left:
         60px;

   }


   .ccsupport26-list-icon {

      width:
         42px;

      height:
         42px;

   }


   .ccsupport26-list-item h3 {

      font-size:
         17px;

   }


   .ccsupport26-list-item p {

      font-size:
         14px;

   }


   .ccsupport26-visual {

      min-height:
         480px;

   }


   .ccsupport26-visual-splash {

      width:
         350px;

      height:
         310px;

   }


   .ccsupport26-visual-glow {

      width:
         360px;

      height:
         330px;

   }


   .ccsupport26-orbit--one {

      width:
         390px;

      height:
         390px;

   }


   .ccsupport26-orbit--two {

      width:
         300px;

      height:
         300px;

   }


   .ccsupport26-main-image {

      max-height:
         430px;

   }


   .ccsupport26-float-card {

      min-width:
         145px;

      padding:
         8px 10px;

   }


   .ccsupport26-float-card--one {

      left:
         5px;

   }


   .ccsupport26-float-card--two {

      right:
         5px;

   }


   .ccsupport26-float-card--three {

      left:
         12px;

   }

}



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

@media (max-width: 480px) {

   .ccsupport26-title {

      font-size:
         33px;

   }


   .ccsupport26-visual {

      min-height:
         420px;

   }


   .ccsupport26-main-image {

      max-height:
         370px;

   }


   .ccsupport26-float-card {

      transform:
         scale(.85);

   }


   .ccsupport26-float-card--one {

      left:
         -17px;

   }


   .ccsupport26-float-card--two {

      right:
         -17px;

   }


   .ccsupport26-float-card--three {

      bottom:
         75px;

      left:
         -10px;

   }


   .ccsupport26-visual-label {

      bottom:
         20px;

      font-size:
         8px;

   }

}

/* ============================================================
   CREATORCLAW AI — PREMIUM FUNNEL SECTION
============================================================ */

.ccfunnel26-section {

   --ccf-green: #a6ff00;
   --ccf-lime: #d3ff36;
   --ccf-green-2: #6de132;
   --ccf-dark: #020704;
   --ccf-card: #070c08;

   position: relative;

   overflow: hidden;

   padding: 95px 0 110px;

   background:
      radial-gradient(
         circle at 50% 20%,
         rgba(164,255,27,.12),
         transparent 28%
      ),
      linear-gradient(
         180deg,
         #b8ff00 0%,
         #a8f500 35%,
         #c1ff10 100%
      );

   font-family:
      "Inter",
      Arial,
      sans-serif;

   color: #111;

   isolation: isolate;

}


.ccfunnel26-section *,
.ccfunnel26-section *::before,
.ccfunnel26-section *::after {

   box-sizing: border-box;

}


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

.ccfunnel26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .34;

   background-image:
      radial-gradient(
         circle,
         rgba(31,80,0,.3) 1px,
         transparent 1.5px
      );

   background-size:
      25px 25px;

}


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

.ccfunnel26-glow {

   position: absolute;

   border-radius: 50%;

   z-index: -4;

   pointer-events: none;

   filter: blur(40px);

}


.ccfunnel26-glow--one {

   width: 550px;

   height: 550px;

   left: -300px;

   top: 250px;

   background:
      radial-gradient(
         circle,
         rgba(255,255,255,.22),
         transparent 68%
      );

}


.ccfunnel26-glow--two {

   width: 620px;

   height: 620px;

   right: -330px;

   bottom: 100px;

   background:
      radial-gradient(
         circle,
         rgba(0,116,45,.12),
         transparent 70%
      );

}


/* ============================================================
   AUDIENCE PANEL
============================================================ */

.ccfunnel26-audience {

   margin-bottom: 80px;

   padding: 40px 35px 34px;

   border:
      1px solid rgba(0,45,13,.13);

   border-radius: 30px;

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

   box-shadow:
      0 24px 65px rgba(39,92,0,.12);

   backdrop-filter: blur(12px);

}


.ccfunnel26-audience-head {

   margin-bottom: 27px;

   text-align: center;

}


.ccfunnel26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   margin-bottom: 10px;

   color: #518c00;

   font-size: 10px;

   font-weight: 900;

   letter-spacing: .16em;

}


.ccfunnel26-eyebrow span {

   width: 38px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(71,125,0,.6)
      );

}


.ccfunnel26-eyebrow span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(71,125,0,.6),
         transparent
      );

}


.ccfunnel26-audience h2 {

   margin: 0;

   color: #10170d;

   font-size:
      clamp(34px, 3vw, 50px);

   line-height: 1.08;

   font-weight: 900;

   letter-spacing: -.045em;

}


.ccfunnel26-audience h2 strong {

   color: #62ae00;

}


/* ============================================================
   AUDIENCE ITEMS
============================================================ */

.ccfunnel26-audience-item {

   height: 100%;

   min-height: 125px;

   padding: 18px;

   border:
      1px solid rgba(46,92,17,.10);

   border-radius: 18px;

   background: #ffffff;

   box-shadow:
      0 10px 26px rgba(28,61,8,.055);

}


.ccfunnel26-audience-icon {

   width: 36px;

   height: 36px;

   margin-bottom: 12px;

   display: grid;

   place-items: center;

   border-radius: 10px;

   color: #baff1e;

   background:
      #071108;

   font-size: 11px;

   font-weight: 900;

}


.ccfunnel26-audience-item p {

   margin: 0;

   color: #364031;

   font-size: 14px;

   line-height: 1.55;

   font-weight: 700;

}


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

.ccfunnel26-heading {

   margin: 0 auto 48px;

   text-align: center;

}


.ccfunnel26-eyebrow--dark {

   color: #214900;

}


.ccfunnel26-heading h2 {

   margin: 0;

   color: #071008;

   font-size:
      clamp(38px, 4vw, 62px);

   line-height: 1.05;

   font-weight: 900;

   letter-spacing: -.05em;

}


.ccfunnel26-heading h2 strong {

   display: block;

   color: #174100;

}


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

.ccfunnel26-offer-grid {

   display: grid;

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

   gap: 18px;

   align-items: stretch;

}


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

.ccfunnel26-card {

   position: relative;

   overflow: hidden;


   padding: 31px 24px 24px;

   border:
      1px solid rgba(177,255,83,.13);

   border-radius: 18px;

   background:
      linear-gradient(
         145deg,
         #070b08,
         #020503
      );

   box-shadow:
      0 20px 48px rgba(15,51,0,.19),
      inset 0 1px rgba(255,255,255,.04);

   color: #ffffff;

   transform-style: preserve-3d;

   transition:
      transform .35s ease,
      border-color .35s ease,
      box-shadow .35s ease;

}


.ccfunnel26-card:hover {

   border-color:
      rgba(180,255,75,.38);

   box-shadow:
      0 30px 65px rgba(11,37,0,.3),
      0 0 40px rgba(135,255,18,.08);

}


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

.ccfunnel26-card-glow {

   position: absolute;

   width: 260px;

   height: 220px;

   top: -160px;

   left: 50%;

   transform: translateX(-50%);

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(161,255,35,.17),
         transparent 70%
      );

   pointer-events: none;

}


/* ============================================================
   TOP
============================================================ */

.ccfunnel26-card-top {

   display: flex;

   align-items: flex-start;

   justify-content: space-between;

   gap: 15px;

}


.ccfunnel26-tag {

width: fit-content;
  padding: 10px 14px;
  border-radius: 7px;
  color: #081100;
  background: linear-gradient( 135deg, #d5ff39, #92ee00 );
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .09em;

}


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

.ccfunnel26-price {

   display: flex;

   align-items: flex-start;

   color: #ffffff;

}


.ccfunnel26-price small {

   margin-top: 8px;

   color: #88d600;

   font-size: 13px;

   font-weight: 900;

}


.ccfunnel26-price strong {

   font-size: 42px;

   line-height: .9;

   font-weight: 900;

   letter-spacing: -.05em;

}


/* ============================================================
   TITLES
============================================================ */

.ccfunnel26-card h3 {

   margin: 22px 0 0;

   color: #ffffff;

   font-size: 25px;

   line-height: 1.1;

   font-weight: 900;

   letter-spacing: -.035em;

}


.ccfunnel26-card-sub,
.ccfunnel26-bundle-sub {

   margin-top: 7px;

   color: #839087;

   font-size: 12px;

   font-weight: 600;

}


.ccfunnel26-downsell {

   width: fit-content;

   margin-top: 9px;

   padding: 5px 8px;

   border:
      1px solid rgba(171,255,60,.12);

   border-radius: 6px;

   color: #9fe80d;

   background:
      rgba(153,255,31,.045);

   font-size: 9px;

   font-weight: 800;

}


/* ============================================================
   DIVIDER
============================================================ */

.ccfunnel26-divider {

   height: 1px;

   margin: 22px 0;

   background:
      linear-gradient(
         90deg,
         rgba(162,255,41,.28),
         rgba(255,255,255,.04),
         transparent
      );

}


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

.ccfunnel26-list {

   margin: 0;

   padding: 0;

   list-style: none;

}


.ccfunnel26-list li {

   position: relative;

   margin-bottom: 12px;

   padding-left: 25px;

   color: #c0cac3;

   font-size: 12px;

   line-height: 1.45;

}


.ccfunnel26-list li span {

   position: absolute;

   left: 0;

   top: 0;

   width: 17px;

   height: 17px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   color: #a9ff19;

   background:
      rgba(156,255,33,.09);

   font-size: 9px;

   font-weight: 900;

}


/* ============================================================
   WHY IT SELLS
============================================================ */

.ccfunnel26-why {

   position: absolute;

   left: 22px;

   right: 22px;

   bottom: 22px;

   padding: 14px 15px;

   border:
      1px solid rgba(154,255,47,.10);

   border-radius: 12px;

   background:
      rgba(155,255,39,.045);

}


.ccfunnel26-why small {

   display: block;

   margin-bottom: 5px;

   color: #95d900;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .13em;

}


.ccfunnel26-why p {

   margin: 0;

   color: #aab5ae;

   font-size: 11px;

   line-height: 1.5;

}


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

.ccfunnel26-card--fe {

   border-color:
      rgba(255,105,218,.30);

}


.ccfunnel26-card--fe .ccfunnel26-tag {

   background:
      linear-gradient(
         135deg,
         #ff69da,
         #ff33ae
      );

   color: #210018;

}


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

.ccfunnel26-card--pro {

   border-color:
      rgba(86,225,255,.38);

   box-shadow:
      0 24px 60px rgba(0,58,74,.25),
      inset 0 1px rgba(255,255,255,.05);

}


.ccfunnel26-card--pro .ccfunnel26-tag {

   background:
      linear-gradient(
         135deg,
         #67e6ff,
         #16c6ef
      );

}


.ccfunnel26-popular {

   position: absolute;

   top: 0;

   left: 50%;

   z-index: 5;

   padding: 5px 12px;

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

   border-radius:
      0 0 9px 9px;

   color: #001519;

   background:
      linear-gradient(
         90deg,
         #66e9ff,
         #b9ff31
      );

   font-size: 7px;

   font-weight: 900;

   letter-spacing: .09em;

}


/* ============================================================
   BUNDLE
============================================================ */

.ccfunnel26-card--bundle {

   grid-column:
      1 / -1;


   padding:
      34px 35px;

   border:
      1px solid rgba(198,255,83,.55);

   background:
      linear-gradient(
         120deg,
         #071108 0%,
         #112608 45%,
         #050a05 100%
      );

   box-shadow:
      0 30px 80px rgba(21,58,0,.28),
      0 0 55px rgba(160,255,27,.09);

}


.ccfunnel26-bundle-bg {

   position: absolute;

   width: 550px;

   height: 550px;

   right: -180px;

   top: -270px;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(176,255,41,.18),
         transparent 70%
      );

}


.ccfunnel26-bundle-badge {

   position: absolute;

   right: 25px;

   top: 22px;

   padding: 7px 11px;

   border-radius: 8px;

   color: #102000;

   background:
      linear-gradient(
         135deg,
         #e0ff4b,
         #98ef00
      );

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .08em;

}


.ccfunnel26-card--bundle h3 {

   font-size: 36px;

}


.ccfunnel26-card--bundle .ccfunnel26-price strong {

   font-size: 52px;

}


/* ============================================================
   BUNDLE INCLUDED
============================================================ */

.ccfunnel26-bundle-includes {

   max-width: 850px;

   display: flex;

   align-items: center;

   flex-wrap: wrap;

   gap: 8px;

}


.ccfunnel26-bundle-includes span {

   padding: 8px 11px;

   border:
      1px solid rgba(162,255,50,.17);

   border-radius: 8px;

   color: #d9e6dc;

   background:
      rgba(166,255,54,.055);

   font-size: 10px;

   font-weight: 900;

}


.ccfunnel26-bundle-includes i {

   color: #9eff10;

   font-style: normal;

   font-weight: 900;

}


.ccfunnel26-why--bundle {

   max-width: 410px;

   left: auto;

   right: 30px;

   bottom: 28px;

}


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

@media (max-width: 1199px) {

   .ccfunnel26-offer-grid {

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

   }


   .ccfunnel26-card--bundle {

      grid-column:
         1 / -1;

   }

}


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

@media (max-width: 767px) {

   .ccfunnel26-section {

      padding:
         65px 0 75px;

   }


   .ccfunnel26-audience {

      margin-bottom:
         60px;

      padding:
         30px 18px 20px;

      border-radius:
         24px;

   }


   .ccfunnel26-heading {

      margin-bottom:
         35px;

   }


   .ccfunnel26-heading h2 {

      font-size:
         36px;

   }


   .ccfunnel26-offer-grid {

      grid-template-columns:
         1fr;

   }


   .ccfunnel26-card {

      min-height:
         auto;

      padding:
         27px 21px 22px;

   }


   .ccfunnel26-why {

      position:
         static;

      margin-top:
         24px;

   }


   .ccfunnel26-card--bundle {

      grid-column:
         auto;

      min-height:
         auto;

      padding:
         28px 22px;

   }


   .ccfunnel26-card--bundle h3 {

      font-size:
         29px;

   }


   .ccfunnel26-bundle-badge {

      position:
         static;

      width:
         fit-content;

      margin-bottom:
         18px;

   }


   .ccfunnel26-why--bundle {

      max-width:
         none;

   }

}


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

@media (max-width: 480px) {

   .ccfunnel26-heading h2 {

      font-size:
         31px;

   }


   .ccfunnel26-audience h2 {

      font-size:
         31px;

   }


   .ccfunnel26-card h3 {

      font-size:
         22px;

   }


   .ccfunnel26-price strong {

      font-size:
         37px;

   }

}


/* ============================================================
   WELLNESSCLAW AI — ABOUT THE VENDOR
============================================================ */

.ccabout26-section {
   position: relative;
   padding: 96px 0 48px;
   background: linear-gradient(180deg, #ffffff 0%, #f0faf4 100%);
   color: #0b2a1c;
   font-family: "Manrope", "Inter", sans-serif;
}

.ccabout26-card {
   position: relative;
   padding: 56px 20px 20px;
   border: 1px solid rgba(14,122,68,.2);
   border-radius: 34px;
   background: rgba(255,255,255,.72);
   box-shadow: 0 26px 54px rgba(6,41,26,.1);
}

/* Star between two fading lines at the top of the frame */
.ccabout26-card::before {
   content: "\2726";
   position: absolute;
   top: 16px;
   left: 50%;
   width: 28px;
   height: 28px;
   margin-left: -14px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(14,122,68,.2);
   border-radius: 50%;
   color: #0e7a44;
   background: #e9f7ee;
   font-size: 12px;
   line-height: 1;
}

.ccabout26-card::after {
   content: "";
   position: absolute;
   top: 29px;
   left: 50%;
   width: 220px;
   height: 1px;
   margin-left: -110px;
   background: linear-gradient(90deg, transparent, rgba(14,122,68,.4) 38%, transparent 38%, transparent 62%, rgba(14,122,68,.4) 62%, transparent);
}


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

.ccabout26-head {
   position: relative;
   padding: 38px 56px;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   gap: 64px;
   overflow: hidden;
   border: 1px solid rgba(14,122,68,.12);
   border-radius: 24px;
   background: linear-gradient(120deg, #eaf6ef 0%, #ffffff 62%);
}

/* Large ring in the corner of the header */
.ccabout26-head::before {
   content: "";
   position: absolute;
   top: -96px;
   right: -60px;
   width: 240px;
   height: 240px;
   border: 48px solid rgba(14,122,68,.06);
   border-radius: 50%;
}

.ccabout26-ring {
   position: relative;
   width: 196px;
   height: 196px;
   padding: 8px;
   border-radius: 50%;
   background: linear-gradient(160deg, #0f5a36 0%, #2f8f5b 45%, #caff31 100%);
   box-shadow: 0 16px 32px rgba(6,41,26,.2);
}

.ccabout26-photo {
   position: relative;
   width: 100%;
   height: 100%;
   display: grid;
   place-items: center;
   overflow: hidden;
   border: 6px solid #ffffff;
   border-radius: 50%;
   background: #e3f4ea;
}

.ccabout26-photo > i {
   color: rgba(14,122,68,.45);
   font-size: 62px;
}

/* A transparent image would otherwise show the icon through it */
.ccabout26-photo:has(img:not([src=""])) > i {
   display: none;
}

.ccabout26-photo img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Until an image is added the slot shows the icon, not a broken image */
.ccabout26-photo img[src=""] {
   display: none;
}

.ccabout26-badge {
   position: absolute;
   left: 50%;
   bottom: -12px;
   padding: 7px 15px;
   display: flex;
   align-items: center;
   gap: 7px;
   border: 3px solid #ffffff;
   border-radius: 999px;
   color: #ffffff;
   background: #06291a;
   font-size: 10.5px;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   white-space: nowrap;
   transform: translateX(-50%);
   box-shadow: 0 8px 16px rgba(6,41,26,.26);
}

.ccabout26-badge::before {
   content: "";
   width: 6px;
   height: 6px;
   flex-shrink: 0;
   border-radius: 50%;
   background: #caff31;
}

.ccabout26-intro {
   position: relative;
   min-width: 0;
}

.ccabout26-eyebrow {
   margin: 0;
   color: #4a5e53;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.3;
}

.ccabout26-hi {
   position: relative;
   width: fit-content;
   margin-top: 10px;
   padding: 4px 18px 6px;
   border: 1px solid rgba(14,122,68,.24);
   border-radius: 12px;
   color: #0b2a1c;
   background: #ffffff;
   font-family: "Dancing Script", cursive;
   font-size: 34px;
   font-weight: 700;
   line-height: 1.2;
}

/* Speech bubble tail */
.ccabout26-hi::after {
   content: "";
   position: absolute;
   right: 16px;
   bottom: -7px;
   width: 12px;
   height: 12px;
   border-right: 1px solid rgba(14,122,68,.24);
   border-bottom: 1px solid rgba(14,122,68,.24);
   background: #ffffff;
   transform: rotate(45deg);
}

.ccabout26-title {
   margin: 12px 0 0;
   color: #0b2a1c;
   font-family: inherit;
   font-size: 48px;
   font-weight: 800;
   line-height: 1.16;
   letter-spacing: -.03em;
}

.ccabout26-title span {
   color: #0a7a3f;
}

.ccabout26-rule {
   width: 72px;
   height: 4px;
   margin-top: 16px;
   border-radius: 4px;
   background: linear-gradient(90deg, #06291a, #caff31);
}


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

.ccabout26-note {
   position: relative;
   margin-top: 14px;
   padding: 44px 60px 46px 112px;
   overflow: hidden;
   border: 1px solid rgba(14,122,68,.12);
   border-radius: 24px;
   background: #ffffff;
}

/* Rail down the left edge */
.ccabout26-note::before {
   content: "";
   position: absolute;
   top: 44px;
   bottom: 44px;
   left: 0;
   width: 4px;
   border-radius: 0 4px 4px 0;
   background: linear-gradient(180deg, rgba(14,122,68,0) 0%, #0e7a44 30%, #caff31 100%);
}

/* Oversized initial behind the text */
.ccabout26-note::after {
   content: "L";
   position: absolute;
   right: 36px;
   bottom: -28px;
   color: rgba(14,122,68,.06);
   font-size: 250px;
   font-weight: 800;
   line-height: 1;
   pointer-events: none;
}

.ccabout26-note p {
   position: relative;
   z-index: 1;
   margin: 0;
   color: #4a5e53;
   font-size: 18px;
   font-weight: 500;
   line-height: 1.65;
}

.ccabout26-note p + p {
   margin-top: 20px;
}

/* Target-style marker on the first line */
.ccabout26-note p:first-child::before {
   content: "";
   position: absolute;
   top: 5px;
   left: -50px;
   width: 12px;
   height: 12px;
   border: 3px solid #e3f4ea;
   border-radius: 50%;
   background: #0e7a44;
   box-shadow: 0 0 0 5px #e3f4ea, inset 0 0 0 2px #ffffff;
   box-sizing: content-box;
}

.ccabout26-note strong {
   color: #0b2a1c;
   font-weight: 800;
}

.ccabout26-note .ccabout26-reciprocate {
   width: fit-content;
   padding: 4px 16px 6px;
   border-radius: 10px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   font-size: 22px;
   font-weight: 800;
   letter-spacing: -.01em;
}

.ccabout26-promise a {
   color: #0a7a3f;
   font-weight: 800;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
}

.ccabout26-promise a:hover {
   color: #06291a;
}


/* ============================================================
   WELLNESSCLAW AI — PROMOTION RULES
============================================================ */

.ccrules26-section {
   position: relative;
   padding: 48px 0 96px;
   background: linear-gradient(180deg, #f0faf4 0%, #ffffff 100%);
   font-family: "Manrope", "Inter", sans-serif;
}

.ccrules26-panel {
   padding: 48px;
   display: grid;
   grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
   align-items: center;
   gap: 48px;
   border-radius: 32px;
   color: #ffffff;
   background:
      repeating-radial-gradient(circle at 0 100%, transparent 0 58px, rgba(202,255,49,.07) 58px 59px),
      linear-gradient(140deg, #0f5a36 0%, #0a3f27 52%, #06291a 100%);
   box-shadow: 0 26px 54px rgba(6,41,26,.22);
}

.ccrules26-shield {
   width: 68px;
   height: 68px;
   display: grid;
   place-items: center;
   border-radius: 22px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   font-size: 28px;
}

.ccrules26-title {
   margin: 24px 0 0;
   color: #ffffff;
   font-family: inherit;
   font-size: 48px;
   font-weight: 800;
   line-height: 1.14;
   letter-spacing: -.03em;
}

.ccrules26-title span {
   display: block;
   color: #caff31;
}

.ccrules26-list {
   min-width: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

.ccrules26-list li {
   padding: 17px 0;
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr);
   align-items: center;
   gap: 16px;
   border-bottom: 1px dashed rgba(255,255,255,.2);
   color: rgba(255,255,255,.86);
   font-size: 17px;
   font-weight: 500;
   line-height: 1.5;
}

.ccrules26-list li:first-child {
   padding-top: 0;
}

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

.ccrules26-list i {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255,255,255,.3);
   border-radius: 50%;
   color: #ffffff;
   font-size: 14px;
}

.ccrules26-list .ccrules26-yes {
   border-color: transparent;
   color: #06291a;
   background: #caff31;
}

.ccrules26-list strong {
   color: #ffffff;
   font-weight: 800;
}

.ccrules26-list li:last-child strong {
   color: #caff31;
}


/* ============================================================
   ABOUT AND RULES - RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

   .ccabout26-head {
      padding: 34px 40px;
      gap: 48px;
   }

   .ccabout26-title {
      font-size: 40px;
   }

   .ccabout26-note {
      padding: 38px 44px 40px 92px;
   }

   .ccrules26-panel {
      padding: 40px 36px;
      grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
      gap: 36px;
   }

   .ccrules26-title {
      font-size: 40px;
   }

}


@media (max-width: 991px) {

   .ccrules26-panel {
      grid-template-columns: minmax(0, 1fr);
   }

}


@media (max-width: 767px) {

   .ccabout26-section {
      padding: 60px 0 28px;
   }

   .ccrules26-section {
      padding: 28px 0 64px;
   }

   .ccabout26-card {
      padding: 50px 10px 10px;
      border-radius: 28px;
   }

   .ccabout26-head {
      padding: 30px 20px 28px;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: 34px;
      text-align: center;
      border-radius: 20px;
   }

   .ccabout26-hi {
      margin-left: auto;
      margin-right: auto;
   }

   .ccabout26-title {
      font-size: 32px;
   }

   .ccabout26-rule {
      margin-left: auto;
      margin-right: auto;
   }

   .ccabout26-note {
      padding: 30px 22px 32px 30px;
      border-radius: 20px;
   }

   .ccabout26-note::before {
      top: 30px;
      bottom: 30px;
   }

   .ccabout26-note::after {
      right: 14px;
      bottom: -18px;
      font-size: 170px;
   }

   .ccabout26-note p {
      font-size: 16px;
   }

   .ccabout26-note p + p {
      margin-top: 16px;
   }

   .ccabout26-note p:first-child::before {
      display: none;
   }

   .ccabout26-note .ccabout26-reciprocate {
      font-size: 20px;
   }

   .ccrules26-panel {
      padding: 30px 22px;
      gap: 26px;
      border-radius: 26px;
   }

   .ccrules26-title {
      margin-top: 18px;
      font-size: 34px;
   }

   .ccrules26-list li {
      gap: 13px;
      font-size: 16px;
   }

}


@media (max-width: 400px) {

   .ccabout26-title {
      font-size: 28px;
   }

}


/* ============================================================
   CREATORCLAW AI — AFFILIATE TERMS
   WHITE PREMIUM THEME
============================================================ */

.ccterms26-section {

   --ccterms-green: #91df00;
   --ccterms-green-light: #cfff36;
   --ccterms-green-dark: #58a900;
   --ccterms-dark: #111810;
   --ccterms-text: #6d7768;

   position: relative;

   overflow: hidden;

   padding: 95px 0 105px;

   background:
      radial-gradient(
         circle at 50% 0%,
         rgba(158, 233, 39, .12),
         transparent 30%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fafcf7 52%,
         #ffffff 100%
      );

   font-family:
      "Inter",
      Arial,
      sans-serif;

   color: #111;

   isolation: isolate;

}


.ccterms26-section *,
.ccterms26-section *::before,
.ccterms26-section *::after {

   box-sizing: border-box;

}


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

.ccterms26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .45;

   background-image:
      linear-gradient(
         rgba(85, 133, 30, .03) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(85, 133, 30, .03) 1px,
         transparent 1px
      );

   background-size:
      64px 64px;

   mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 15%,
         #000 86%,
         transparent
      );

}


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

.ccterms26-glow {

   position: absolute;

   border-radius: 50%;

   pointer-events: none;

   z-index: -4;

   filter: blur(30px);

}


.ccterms26-glow--one {

   width: 540px;

   height: 540px;

   left: -300px;

   top: 160px;

   background:
      radial-gradient(
         circle,
         rgba(154, 230, 39, .12),
         transparent 70%
      );

}


.ccterms26-glow--two {

   width: 590px;

   height: 590px;

   right: -330px;

   bottom: -150px;

   background:
      radial-gradient(
         circle,
         rgba(64, 186, 85, .08),
         transparent 70%
      );

}


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

.ccterms26-heading {

   max-width: 850px;

   margin: 0 auto 48px;

   text-align: center;

}


.ccterms26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   margin-bottom: 13px;

   color: #6bad00;

   font-size: 11px;

   font-weight: 900;

   letter-spacing: .17em;

}


.ccterms26-eyebrow span {

   width: 45px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(104, 169, 0, .6)
      );

}


.ccterms26-eyebrow span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(104, 169, 0, .6),
         transparent
      );

}


.ccterms26-heading h2 {

   margin: 0;

   color: #111810;

   font-size:
      clamp(40px, 4vw, 62px);

   line-height: 1.05;

   letter-spacing: -.05em;

   font-weight: 900;

}


.ccterms26-heading h2 strong {

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #72bd00,
         #95df00,
         #3cab50
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}


/* ============================================================
   SHELL
============================================================ */

.ccterms26-shell {

   position: relative;

   padding: 70px 30px 32px;

   border:
      1px solid rgba(91, 139, 33, .13);

   border-radius: 34px;

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

   box-shadow:
      0 30px 80px rgba(33, 62, 13, .09),
      inset 0 1px rgba(255,255,255,1);

}


/* ============================================================
   SHELL LABEL
============================================================ */

.ccterms26-shell-label {

   position: absolute;

   top: 0;

   left: 50%;

   min-height: 48px;

   padding: 0 19px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 8px;

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

   border:
      1px solid rgba(102, 159, 28, .13);

   border-radius: 100px;

   color: #53604e;

   background: #ffffff;

   box-shadow:
      0 13px 30px rgba(34, 61, 16, .08);

   font-size: 10px;

   font-weight: 900;

   letter-spacing: .11em;

   white-space: nowrap;

}


.ccterms26-shell-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #91df00;

   box-shadow:
      0 0 9px rgba(126, 209, 0, .45);

}


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

.ccterms26-card {

   position: relative;

   height: 100%;

   min-height: 190px;

   overflow: hidden;

   padding:
      28px 28px 26px 98px;

   border:
      1px solid rgba(73, 111, 38, .10);

   border-radius: 22px;

   background:
      linear-gradient(
         145deg,
         #ffffff,
         #f9fcf6
      );

   box-shadow:
      0 13px 34px rgba(30, 58, 14, .06);

   transition:
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;

}


.ccterms26-card::before {

   content: "";

   position: absolute;

   left: 0;

   top: 25%;

   bottom: 25%;

   width: 2px;

   background:
      linear-gradient(
         to bottom,
         transparent,
         #90dd00,
         transparent
      );

   opacity: .55;

}


.ccterms26-card:hover {

   transform:
      translateY(-6px);

   border-color:
      rgba(111, 179, 16, .25);

   box-shadow:
      0 20px 45px rgba(30, 58, 14, .10);

}


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

.ccterms26-number {

   position: absolute;

   top: 12px;

   right: 15px;

   color: rgba(87, 128, 55, .08);

   font-size: 48px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: -.07em;

}


/* ============================================================
   ICON
============================================================ */

.ccterms26-icon {

   position: absolute;

   left: 26px;

   top: 50%;

   width: 51px;

   height: 51px;

   display: grid;

   place-items: center;

   transform:
      translateY(-50%);

   border:
      1px solid rgba(109, 167, 20, .16);

   border-radius: 15px;

   color: #142400;

   background:
      linear-gradient(
         135deg,
         #dcff45,
         #92e200
      );

   box-shadow:
      0 11px 28px rgba(106, 174, 0, .12);

   font-size: 20px;

   font-weight: 900;

}


/* ============================================================
   CONTENT
============================================================ */

.ccterms26-content {

   position: relative;

   z-index: 3;

}


.ccterms26-label {

   margin-bottom: 7px;

   color: #72b600;

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .15em;

}


.ccterms26-content p {

   margin: 0;

   color: #4f5b4c;

   font-size: 16px;

   line-height: 1.65;

   font-weight: 600;

}


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

.ccterms26-card--featured {

   border-color:
      rgba(123, 190, 22, .24);

   background:
      radial-gradient(
         circle at 85% 15%,
         rgba(173, 236, 50, .13),
         transparent 30%
      ),
      linear-gradient(
         145deg,
         #ffffff,
         #f6fbeF
      );

}


.ccterms26-featured {

   position: absolute;

   top: 14px;

   right: 16px;

   z-index: 4;

   padding: 6px 9px;

   border-radius: 8px;

   color: #173000;

   background:
      linear-gradient(
         135deg,
         #d7ff3d,
         #94e200
      );

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .08em;

}


/* ============================================================
   BOTTOM NOTICE
============================================================ */

.ccterms26-notice {

   margin-top: 31px;

   padding: 20px 22px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 13px;

   border:
      1px solid rgba(97, 152, 29, .14);

   border-radius: 18px;

   background:
      linear-gradient(
         90deg,
         rgba(219,255,72,.25),
         rgba(255,255,255,.8),
         rgba(213,255,67,.24)
      );

   text-align: center;

}


.ccterms26-notice-icon {

   width: 38px;

   height: 38px;

   display: grid;

   place-items: center;

   flex-shrink: 0;

   border-radius: 12px;

   color: #cfff35;

   background: #13200e;

   font-size: 16px;

   font-weight: 900;

}


.ccterms26-notice strong {

   color: #182114;

   font-size: 14px;

   font-weight: 900;

}


.ccterms26-notice span {

   margin-left: 4px;

   color: #6b7667;

   font-size: 13px;

}


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

@media (max-width: 991px) {

   .ccterms26-section {

      padding:
         75px 0 80px;

   }


   .ccterms26-shell {

      padding:
         62px 22px 27px;

   }

}


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

@media (max-width: 767px) {

   .ccterms26-section {

      padding:
         60px 0 65px;

   }


   .ccterms26-heading {

      margin-bottom:
         38px;

   }


   .ccterms26-heading h2 {

      font-size:
         36px;

   }


   .ccterms26-shell {

      padding:
         55px 13px 20px;

      border-radius:
         25px;

   }


   .ccterms26-shell-label {

      max-width:
         calc(100% - 25px);

      min-height:
         42px;

      padding:
         8px 14px;

      white-space:
         normal;

      text-align:
         center;

      font-size:
         8px;

   }


   .ccterms26-card {

      min-height:
         auto;

      padding:
         24px 18px;

      text-align:
         center;

      border-radius:
         19px;

   }


   .ccterms26-icon {

      position:
         static;

      margin:
         0 auto 15px;

      transform:
         none;

   }


   .ccterms26-number {

      font-size:
         39px;

   }


   .ccterms26-content p {

      font-size:
         15px;

   }


   .ccterms26-featured {

      position:
         static;

      width:
         fit-content;

      margin:
         0 auto 15px;

   }


   .ccterms26-notice {

      flex-direction:
         column;

      padding:
         18px;

   }


   .ccterms26-notice span {

      display:
         block;

      margin:
         6px 0 0;

   }

}


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

@media (max-width: 480px) {

   .ccterms26-heading h2 {

      font-size:
         31px;

   }


   .ccterms26-eyebrow {

      font-size:
         9px;

      gap:
         6px;

   }


   .ccterms26-eyebrow span {

      width:
         26px;

   }

}


/* ============================================================
   CREATORCLAW AI — CONTACT & SIGN-UP
============================================================ */

.cccontact26-section {

   --cc26-green: #91df00;
   --cc26-lime: #cfff36;
   --cc26-green-dark: #397d00;
   --cc26-deep: #07140c;
   --cc26-text: #697466;

   position: relative;

   overflow: hidden;

   padding: 55px 0 95px;

   background:
      radial-gradient(
         circle at 78% 45%,
         rgba(158, 232, 36, .14),
         transparent 29%
      ),
      radial-gradient(
         circle at 5% 75%,
         rgba(80, 190, 64, .07),
         transparent 24%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #f9fcf5 55%,
         #ffffff 100%
      );

   font-family:
      "Inter",
      Arial,
      sans-serif;

   color: #111;

   isolation: isolate;

}


.cccontact26-section *,
.cccontact26-section *::before,
.cccontact26-section *::after {

   box-sizing: border-box;

}


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

.cccontact26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .5;

   background-image:
      linear-gradient(
         rgba(82, 129, 29, .03) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(82, 129, 29, .03) 1px,
         transparent 1px
      );

   background-size:
      65px 65px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 12%,
         #000 85%,
         transparent
      );

   mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 12%,
         #000 85%,
         transparent
      );

}


.cccontact26-glow {

   position: absolute;

   z-index: -4;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(25px);

}


.cccontact26-glow--one {

   width: 570px;

   height: 570px;

   right: -250px;

   top: 130px;

   background:
      radial-gradient(
         circle,
         rgba(153, 230, 31, .13),
         transparent 70%
      );

}


.cccontact26-glow--two {

   width: 450px;

   height: 450px;

   left: -280px;

   bottom: -180px;

   background:
      radial-gradient(
         circle,
         rgba(54, 172, 82, .09),
         transparent 70%
      );

}


/* ============================================================
   LOGO
============================================================ */

.cccontact26-brand {

   position: relative;

   z-index: 4;

   margin-bottom: 40px;

   text-align: center;

}


.cccontact26-brand img {

   display: block;

   width: auto;

   max-width: 300px;

   max-height: 82px;

   margin: 0 auto;

   object-fit: contain;

}


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

.cccontact26-main {

   min-height: 650px;

}


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

.cccontact26-copy {

   position: relative;

   z-index: 5;

   max-width: 625px;

}


.cccontact26-eyebrow {

   width: fit-content;

   margin-bottom: 12px;

   padding: 8px 12px;

   display: flex;

   align-items: center;

   gap: 8px;

   border:
      1px solid rgba(111, 170, 20, .15);

   border-radius: 100px;

   color: #609d00;

   background:
      rgba(144, 215, 32, .055);

   font-size: 10px;

   font-weight: 900;

   letter-spacing: .14em;

}


.cccontact26-eyebrow-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #8eda00;

   box-shadow:
      0 0 9px rgba(126, 210, 0, .45);

}


/* ============================================================
   TITLE
============================================================ */

.cccontact26-title {

   margin: 0;

   color: #10170d;

   font-size:
      clamp(43px, 4.5vw, 69px);

   line-height: 1.02;

   letter-spacing: -.055em;

   font-weight: 900;

}


.cccontact26-title span {

   display: block;

   margin-top: 4px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #73bd00 0%,
         #95df00 47%,
         #35a94d 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}


/* ============================================================
   INTRO
============================================================ */

.cccontact26-intro {

   max-width: 590px;

   margin: 24px 0 0;

   color: #5e695b;

   font-size: 17px;

   line-height: 1.65;

}


.cccontact26-intro--second {

   margin-top: 7px;

}


/* ============================================================
   CONTACT PERSON
============================================================ */

.cccontact26-person {

   margin-top: 27px;

   display: flex;

   align-items: center;

   gap: 12px;

}


.cccontact26-person-line {

   width: 3px;

   height: 42px;

   border-radius: 10px;

   background:
      linear-gradient(
         to bottom,
         #cfff34,
         #71bc00
      );

}


.cccontact26-person small {

   display: block;

   color: #8a9486;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .15em;

}


.cccontact26-person strong {

   display: block;

   margin-top: 2px;

   color: #152011;

   font-size: 18px;

   font-weight: 900;

}


/* ============================================================
   CONTACT LINKS
============================================================ */

.cccontact26-links {

   max-width: 585px;

   margin-top: 25px;

   display: grid;

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

   gap: 10px;

}


.cccontact26-link {

   position: relative;

   min-height: 69px;

   padding:
      10px 40px 10px 10px;

   display: flex;

   align-items: center;

   gap: 11px;

   border:
      1px solid rgba(77, 117, 41, .10);

   border-radius: 15px;

   color: inherit;

   text-decoration: none;

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

   box-shadow:
      0 10px 27px rgba(27, 53, 11, .055);

   transition:
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;

}


.cccontact26-link:hover {

   color: inherit;

   transform:
      translateY(-3px);

   border-color:
      rgba(117, 183, 14, .27);

   box-shadow:
      0 16px 35px rgba(27, 53, 11, .09);

}


.cccontact26-link-icon {

   width: 45px;

   height: 45px;

   display: grid;

   place-items: center;

   flex-shrink: 0;

   border:
      1px solid rgba(111, 170, 21, .15);

   border-radius: 12px;

   color: #152700;

   background:
      linear-gradient(
         135deg,
         #dcff48,
         #94e300
      );

   box-shadow:
      0 8px 20px rgba(106, 171, 0, .10);

   font-size: 16px;

   font-weight: 900;

}


.cccontact26-link-copy small {

   display: block;

   color: #949e90;

   font-size: 7px;

   font-weight: 900;

   letter-spacing: .14em;

}


.cccontact26-link-copy strong {

   display: block;

   margin-top: 2px;

   color: #1c2518;

   font-size: 12px;

   font-weight: 800;

}


.cccontact26-link > i {

   position: absolute;

   right: 13px;

   top: 50%;

   transform:
      translateY(-50%);

   color: #7abb00;

   font-style: normal;

   font-size: 17px;

}


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

.cccontact26-cta-wrap {

   margin-top: 28px;

}


.cccontact26-cta {

   position: relative;

   min-height: 65px;

   max-width: 510px;

   padding:
      7px 7px 7px 24px;

   overflow: hidden;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 18px;

   border:
      1px solid rgba(94, 151, 12, .24);

   border-radius: 17px;

   color: #132500;

   text-decoration: none;

   background:
      linear-gradient(
         110deg,
         #deff4a,
         #b8f91d 45%,
         #8ee100
      );

   box-shadow:
      0 15px 35px rgba(106, 176, 0, .17),
      inset 0 1px rgba(255,255,255,.75);

   font-size: 15px;

   font-weight: 900;

   transition:
      .3s ease;

}


.cccontact26-cta::before {

   content: "";

   position: absolute;

   top: -60%;

   left: -100px;

   width: 55px;

   height: 220%;

   transform:
      rotate(25deg);

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

   transition:
      left .7s ease;

}


.cccontact26-cta:hover {

   color: #132500;

   transform:
      translateY(-3px);

   box-shadow:
      0 20px 46px rgba(106, 176, 0, .25);

}


.cccontact26-cta:hover::before {

   left: 120%;

}


.cccontact26-cta i {

   width: 50px;

   height: 50px;

   display: grid;

   place-items: center;

   flex-shrink: 0;

   border-radius: 13px;

   color: #bdff29;

   background: #10200a;

   font-size: 21px;

   font-style: normal;

}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.cccontact26-visual {

   position: relative;

   min-height: 650px;

   perspective: 1200px;

}


/* ============================================================
   VISUAL SHAPE
============================================================ */

.cccontact26-visual-shape {

   position: absolute;

   left: 50%;

   top: 50%;

   width: 510px;

   height: 510px;

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

   border-radius:
      45% 55% 54% 46% /
      48% 44% 56% 52%;

   background:
      linear-gradient(
         145deg,
         rgba(220,255,68,.60),
         rgba(145,224,0,.15)
      );

}


/* ============================================================
   ORBITS
============================================================ */

.cccontact26-orbit {

   position: absolute;

   left: 50%;

   top: 51%;

   border-radius: 50%;

   transform:
      translate(-50%,-50%)
      rotateX(67deg);

   border:
      1px solid rgba(92, 150, 14, .15);

}


.cccontact26-orbit--one {

   width: 570px;

   height: 570px;

}


.cccontact26-orbit--two {

   width: 430px;

   height: 430px;

   border-style:
      dashed;

}


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

.cccontact26-profile {

   position: absolute;

   z-index: 5;

   overflow: hidden;

   border:
      1px solid rgba(64, 101, 36, .12);

   border-radius: 28px;

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

   box-shadow:
      0 25px 60px rgba(26, 52, 10, .12);

   backdrop-filter:
      blur(17px);

   transition:
      transform .35s ease;

}


.cccontact26-profile--person {

   width: 305px;

   left: 30px;

   top: 75px;

   padding:
      19px 19px 20px;

   transform:
      rotate(-5deg);

}


.cccontact26-profile--brand {

   width: 265px;

   right: 10px;

   bottom: 70px;

   padding:
      18px;

   transform:
      rotate(5deg);

}


/* ============================================================
   PROFILE BADGE
============================================================ */

.cccontact26-profile-badge {

   width: fit-content;

   margin-bottom: 12px;

   padding:
      6px 9px;

   border-radius: 7px;

   color: #173000;

   background:
      linear-gradient(
         135deg,
         #d8ff40,
         #91df00
      );

   font-size: 7px;

   font-weight: 900;

   letter-spacing: .09em;

}


/* ============================================================
   PERSON IMAGE
============================================================ */

.cccontact26-image-shell {

   position: relative;

   width: 215px;

   height: 215px;

   margin:
      0 auto 17px;

   padding: 8px;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #d8ff40,
         #81d600,
         #2ea74c
      );

   box-shadow:
      0 16px 35px rgba(77, 132, 0, .14);

}


.cccontact26-image-shell::after {

   content: "";

   position: absolute;

   inset: 6px;

   border:
      5px solid #ffffff;

   border-radius: 50%;

   pointer-events: none;

}


.cccontact26-person-img {

   width: 100%;

   height: 100%;

   border-radius: 50%;

   object-fit: cover;

}


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

.cccontact26-profile-copy {

   text-align: center;

}


.cccontact26-profile-copy small {

   color: #83b72a;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .14em;

}


.cccontact26-profile-copy h3 {

   margin:
      4px 0 0;

   color: #182015;

   font-size: 20px;

   line-height: 1.2;

   font-weight: 900;

}


.cccontact26-profile-copy > span {

   display: block;

   margin-top: 3px;

   color: #7d8878;

   font-size: 11px;

   font-weight: 600;

}


/* ============================================================
   TECHIES
============================================================ */

.cccontact26-brand-card-top {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 5px;

   margin-bottom: 11px;

   color: #659f00;

   font-size: 7px;

   font-weight: 900;

   letter-spacing: .12em;

}


.cccontact26-brand-card-top span {

   color: #91df00;

}


.cccontact26-tech-shell {

   width: 180px;

   height: 180px;

   margin:
      0 auto 14px;

   padding: 8px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   background:
      linear-gradient(
         135deg,
         #d9ff43,
         #94df00,
         #45b75c
      );

   box-shadow:
      0 15px 35px rgba(74, 126, 0, .14);

}


.cccontact26-tech-img {

   width: 100%;

   height: 100%;

   object-fit: cover;

   border:
      5px solid #ffffff;

   border-radius: 50%;

}


/* ============================================================
   FLOATING CHIPS
============================================================ */

.cccontact26-float {

   position: absolute;

   z-index: 10;

   min-height: 39px;

   padding: 0 13px;

   display: flex;

   align-items: center;

   gap: 7px;

   border:
      1px solid rgba(88, 137, 32, .11);

   border-radius: 100px;

   color: #42513d;

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

   box-shadow:
      0 13px 28px rgba(30, 58, 13, .09);

   font-size: 10px;

   font-weight: 800;

   animation:
      cccontact26Float 5s ease-in-out infinite;

}


.cccontact26-float span {

   width: 20px;

   height: 20px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   color: #397700;

   background:
      rgba(139, 216, 12, .14);

   font-size: 9px;

}


.cccontact26-float--one {

   top: 80px;

   right: 15px;

}


.cccontact26-float--two {

   top: 330px;

   right: -8px;

   animation-delay:
      1.2s;

}


.cccontact26-float--three {

   bottom: 40px;

   left: 20px;

   animation-delay:
      2s;

}


@keyframes cccontact26Float {

   0%,
   100% {
      translate: 0 0;
   }

   50% {
      translate: 0 -9px;
   }

}


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

@media (max-width: 991px) {

   .cccontact26-section {

      padding:
         50px 0 75px;

   }


   .cccontact26-copy {

      max-width:
         750px;

      margin:
         0 auto;

      text-align:
         center;

   }


   .cccontact26-eyebrow {

      margin-left:
         auto;

      margin-right:
         auto;

   }


   .cccontact26-person {

      justify-content:
         center;

   }


   .cccontact26-links {

      margin-left:
         auto;

      margin-right:
         auto;

      text-align:
         left;

   }


   .cccontact26-cta {

      margin-left:
         auto;

      margin-right:
         auto;

   }


   .cccontact26-visual {

      max-width:
         650px;

      margin:
         30px auto 0;

   }

}


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

@media (max-width: 767px) {

   .cccontact26-section {

      padding:
         45px 0 60px;

   }


   .cccontact26-brand {

      margin-bottom:
         30px;

   }


   .cccontact26-brand img {

      max-width:
         235px;

   }


   .cccontact26-title {

      font-size:
         38px;

   }


   .cccontact26-intro {

      font-size:
         15px;

   }


   .cccontact26-links {

      grid-template-columns:
         1fr;

   }


   .cccontact26-link {

      min-height:
         66px;

   }


   .cccontact26-cta {

      font-size:
         14px;

   }


   .cccontact26-visual {

      min-height:
         650px;

      transform:
         scale(.9);

      transform-origin:
         top center;

      margin-bottom:
         -55px;

   }

}


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

@media (max-width: 480px) {

   .cccontact26-title {

      font-size:
         33px;

   }


   .cccontact26-visual {

      width:
         520px;

      max-width:
         none;

      left:
         50%;

      min-height:
         600px;

      transform:
         translateX(-50%) scale(.68);

      transform-origin:
         top center;

      margin-bottom:
         -175px;

   }

}

/* ============================================================
   CREATORCLAW AI — ULTRA PREMIUM JV PRIZE SECTION
============================================================ */

.ccprize26-section {

   --ccp-green: #9cff00;
   --ccp-lime: #d3ff35;
   --ccp-green-2: #58f482;

   position: relative;

   overflow: hidden;

   padding: 95px 0 105px;

   background:
      radial-gradient(
         circle at 50% 25%,
         rgba(145,255,30,.11),
         transparent 30%
      ),
      radial-gradient(
         circle at 80% 80%,
         rgba(48,215,94,.06),
         transparent 25%
      ),
      linear-gradient(
         180deg,
         #010503 0%,
         #041009 50%,
         #010503 100%
      );

   font-family:
      "Inter",
      Arial,
      sans-serif;

   color: #ffffff;

   isolation: isolate;

}


.ccprize26-section *,
.ccprize26-section *::before,
.ccprize26-section *::after {

   box-sizing: border-box;

}


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

.ccprize26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .42;

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

   background-size:
      68px 68px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 15%,
         #000 85%,
         transparent
      );

   mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 15%,
         #000 85%,
         transparent
      );

}


/* ============================================================
   BACKGROUND GLOW
============================================================ */

.ccprize26-glow {

   position: absolute;

   border-radius: 50%;

   pointer-events: none;

   z-index: -4;

   filter: blur(35px);

}


.ccprize26-glow--one {

   width: 650px;

   height: 650px;

   left: -370px;

   top: 180px;

   background:
      radial-gradient(
         circle,
         rgba(158,255,35,.11),
         transparent 70%
      );

}


.ccprize26-glow--two {

   width: 650px;

   height: 650px;

   right: -380px;

   bottom: -100px;

   background:
      radial-gradient(
         circle,
         rgba(47,216,91,.08),
         transparent 70%
      );

}


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

.ccprize26-heading {

   max-width: 850px;

   margin: 0 auto 45px;

   text-align: center;

}


.ccprize26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   margin-bottom: 14px;

   color: #a9ff1f;

   font-size: 11px;

   font-weight: 900;

   letter-spacing: .18em;

}


.ccprize26-eyebrow span {

   width: 45px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(167,255,54,.65)
      );

}


.ccprize26-eyebrow span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(167,255,54,.65),
         transparent
      );

}


.ccprize26-heading h2 {

   margin: 0;

   color: #ffffff;

   font-size:
      clamp(39px, 4.4vw, 64px);

   line-height: 1.05;

   letter-spacing: -.05em;

   font-weight: 900;

}


.ccprize26-heading h2 strong {

   display: block;

   margin-top: 4px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #e0ff4b 0%,
         #9dff0d 50%,
         #5cff8d 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}


/* ============================================================
   OPENING
============================================================ */

.ccprize26-opening {

   width: fit-content;

   margin: 23px auto 0;

   padding: 8px 15px;

   border:
      1px solid rgba(165,255,58,.17);

   border-radius: 100px;

   color: #d4ded7;

   background:
      rgba(157,255,48,.055);

   font-size: 14px;

   font-weight: 800;

}


/* ============================================================
   DATES
============================================================ */

.ccprize26-dates {

   margin-top: 15px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   color: #9ca9a0;

   font-size: 14px;

   line-height: 1.5;

   font-weight: 600;

}


.ccprize26-date-dot {

   width: 6px;

   height: 6px;

   flex-shrink: 0;

   border-radius: 50%;

   background: #9cff00;

   box-shadow:
      0 0 10px rgba(156,255,0,.7);

}


/* ============================================================
   PRIZE STAGE
============================================================ */

.ccprize26-prize-stage {

   position: relative;

   min-height: 520px;

   display: flex;

   align-items: center;

   justify-content: center;

   overflow: hidden;

   border:
      1px solid rgba(157,255,55,.13);

   border-radius: 34px;

   background:
      radial-gradient(
         circle at 50% 45%,
         rgba(141,255,30,.09),
         transparent 34%
      ),
      linear-gradient(
         145deg,
         rgba(8,21,13,.92),
         rgba(3,10,6,.98)
      );

   box-shadow:
      0 35px 90px rgba(0,0,0,.38),
      inset 0 1px rgba(255,255,255,.04);

}


/* ============================================================
   RINGS
============================================================ */

.ccprize26-ring {

   position: absolute;

   left: 50%;

   top: 50%;

   border-radius: 50%;

   transform:
      translate(-50%, -50%)
      rotateX(65deg);

   border:
      1px solid rgba(154,255,54,.13);

}


.ccprize26-ring--one {

   width: 650px;

   height: 650px;

}


.ccprize26-ring--two {

   width: 490px;

   height: 490px;

   border-style: dashed;

   border-color:
      rgba(154,255,54,.18);

}


/* ============================================================
   TROPHY
============================================================ */

.ccprize26-trophy-wrap {

   position: relative;

   z-index: 5;

   width: 100%;

   max-width: 650px;

   text-align: center;

}


.ccprize26-trophy-glow {

   position: absolute;

   left: 50%;

   top: 55%;

   width: 480px;

   height: 300px;

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

   border-radius: 50%;

   background:
      radial-gradient(
         ellipse,
         rgba(173,255,39,.22),
         rgba(126,255,24,.06) 48%,
         transparent 72%
      );

   filter: blur(15px);

}


.ccprize26-trophy-img {

   position: relative;

   z-index: 3;

   display: block;

   max-width: 100%;

   max-height: 390px;

   margin: 0 auto;

   object-fit: contain;

   filter:
      drop-shadow(
         0 24px 35px rgba(0,0,0,.35)
      );

}


/* ============================================================
   PRIZE MINI CARDS
============================================================ */

.ccprize26-prize-cards {

   position: absolute;

   left: 50%;

   bottom: 35px;

   z-index: 10;

   width: 100%;

   max-width: 620px;

   display: grid;

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

   gap: 12px;

   transform:
      translateX(-50%);

}


.ccprize26-mini-card {

   min-height: 72px;

   padding: 13px 12px;

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

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

   border-radius: 15px;

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

   backdrop-filter:
      blur(15px);

   box-shadow:
      0 13px 30px rgba(0,0,0,.18);

}


.ccprize26-mini-card span {

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .13em;

}


.ccprize26-mini-card strong {

   display: block;

   margin-top: 4px;

   font-size: 20px;

   font-weight: 900;

}


/* SILVER */

.ccprize26-mini-card--silver {

   color: #d5dce1;

   border-color:
      rgba(218,229,236,.20);

}


/* GOLD */

.ccprize26-mini-card--gold {

   color: #ffd84d;

   border-color:
      rgba(255,216,77,.28);

   background:
      rgba(255,202,32,.055);

   transform:
      translateY(-7px);

   box-shadow:
      0 15px 38px rgba(255,196,0,.08);

}


/* BRONZE */

.ccprize26-mini-card--bronze {

   color: #e79050;

   border-color:
      rgba(222,131,63,.23);

}


/* ============================================================
   FLOOR
============================================================ */

.ccprize26-floor {

   position: absolute;

   left: 50%;

   bottom: 5px;

   width: 650px;

   height: 90px;

   transform:
      translateX(-50%)
      rotateX(65deg);

   border-radius: 50%;

   background:
      radial-gradient(
         ellipse,
         rgba(143,255,28,.13),
         transparent 68%
      );

   filter: blur(5px);

}


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

.ccprize26-note {

   width: fit-content;

   max-width: 100%;

   margin: 27px auto 0;

   padding: 11px 16px;

   border:
      1px solid rgba(155,255,47,.10);

   border-radius: 10px;

   color: #7e8d83;

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

   font-size: 11px;

   line-height: 1.55;

   text-align: center;

}


.ccprize26-note-label {

   color: #aaff1b;

   font-weight: 900;

}


/* ============================================================
   SURPRISE CONTEST
============================================================ */

.ccprize26-surprise {

   position: relative;

   min-height: 245px;

   margin-top: 40px;

   padding:
      30px 85px 30px 285px;

   overflow: hidden;

   display: flex;

   align-items: center;

   border:
      1px solid rgba(158,255,57,.18);

   border-radius: 25px;

   background:
      linear-gradient(
         125deg,
         rgba(11,28,17,.98),
         rgba(4,13,8,.98)
      );

   box-shadow:
      0 25px 65px rgba(0,0,0,.28),
      inset 0 1px rgba(255,255,255,.04);

}


/* ============================================================
   SURPRISE GLOW
============================================================ */

.ccprize26-surprise-glow {

   position: absolute;

   width: 370px;

   height: 370px;

   left: -100px;

   top: -100px;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(154,255,39,.18),
         transparent 70%
      );

}


/* ============================================================
   SURPRISE IMAGE
============================================================ */

.ccprize26-surprise-image {

   position: absolute;

   left: 25px;

   bottom: 0;

   z-index: 3;

   width: 235px;

   height: 230px;

   display: flex;

   align-items: flex-end;

   justify-content: center;

}


.ccprize26-surprise-image img {

   max-width: 100%;

   max-height: 100%;

   object-fit: contain;

   filter:
      drop-shadow(
         0 20px 25px rgba(0,0,0,.30)
      );

}


/* ============================================================
   SURPRISE CONTENT
============================================================ */

.ccprize26-surprise-content {

   position: relative;

   z-index: 4;

}


.ccprize26-surprise-label {

   display: flex;

   align-items: center;

   gap: 6px;

   margin-bottom: 8px;

   color: #97da18;

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .15em;

}


.ccprize26-surprise-label span {

   color: #baff1e;

}


.ccprize26-surprise h3 {

   margin: 0;

   color: #ffffff;

   font-size:
      clamp(20px, 2vw, 27px);

   line-height: 1.25;

   font-weight: 800;

   letter-spacing: -.025em;

}


.ccprize26-surprise-value {

   margin-top: 7px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #d9ff42,
         #9cff09,
         #5cff83
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

   font-size:
      clamp(32px, 3vw, 46px);

   line-height: 1;

   font-weight: 900;

   letter-spacing: -.04em;

}


.ccprize26-surprise p {

   margin: 11px 0 0;

   color: #a1aea5;

   font-size: 13px;

   font-weight: 600;

}


/* ============================================================
   SURPRISE BADGE
============================================================ */

.ccprize26-surprise-badge {

   position: absolute;

   right: 20px;

   top: 20px;

   z-index: 5;

   padding: 6px 9px;

   border-radius: 7px;

   color: #0f2000;

   background:
      linear-gradient(
         135deg,
         #d9ff41,
         #95ef00
      );

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .09em;

}


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

@media (max-width: 991px) {

   .ccprize26-section {

      padding:
         75px 0 80px;

   }


   .ccprize26-prize-stage {

      min-height:
         470px;

   }


   .ccprize26-surprise {

      padding:
         30px 35px 30px 240px;

   }


   .ccprize26-surprise-image {

      width:
         200px;

   }

}


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

@media (max-width: 767px) {

   .ccprize26-section {

      padding:
         60px 0 65px;

   }


   .ccprize26-heading h2 {

      font-size:
         36px;

   }


   .ccprize26-dates {

      padding:
         0 10px;

      font-size:
         12px;

   }


   .ccprize26-prize-stage {

      min-height:
         430px;

      padding:
         20px;

      border-radius:
         24px;

   }


   .ccprize26-trophy-img {

      max-height:
         300px;

   }


   .ccprize26-prize-cards {

      max-width:
         calc(100% - 30px);

      bottom:
         20px;

   }


   .ccprize26-mini-card {

      min-height:
         60px;

      padding:
         9px 7px;

   }


   .ccprize26-mini-card strong {

      font-size:
         17px;

   }


   .ccprize26-surprise {

      min-height:
         auto;

      padding:
         25px 18px;

      display:
         block;

      text-align:
         center;

   }


   .ccprize26-surprise-image {

      position:
         relative;

      left:
         auto;

      bottom:
         auto;

      width:
         190px;

      height:
         185px;

      margin:
         0 auto 18px;

   }


   .ccprize26-surprise-label {

      justify-content:
         center;

   }


   .ccprize26-surprise-badge {

      position:
         static;

      width:
         fit-content;

      margin:
         18px auto 0;

   }

}


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

@media (max-width: 480px) {

   .ccprize26-heading h2 {

      font-size:
         31px;

   }


   .ccprize26-opening {

      font-size:
         12px;

   }


   .ccprize26-dates {

      font-size:
         11px;

   }


   .ccprize26-prize-stage {

      min-height:
         380px;

   }


   .ccprize26-trophy-img {

      max-height:
         260px;

   }


   .ccprize26-mini-card span {

      font-size:
         7px;

   }


   .ccprize26-mini-card strong {

      font-size:
         15px;

   }

}

/* ============================================================
   CREATORCLAW AI — RECIPROCATION SECTION
============================================================ */

.ccrecip26-section {

   --ccr-green: #a8ff00;
   --ccr-lime: #d8ff3c;
   --ccr-mint: #5dff88;

   position: relative;

   overflow: hidden;

   padding: 90px 0 100px;

   background:
      radial-gradient(
         circle at 50% 30%,
         rgba(144,255,25,.11),
         transparent 30%
      ),
      radial-gradient(
         circle at 82% 72%,
         rgba(61,210,92,.06),
         transparent 26%
      ),
      linear-gradient(
         180deg,
         #010503 0%,
         #031008 50%,
         #010503 100%
      );

   font-family: "Inter", Arial, sans-serif;

   color: #ffffff;

   isolation: isolate;
}


.ccrecip26-section *,
.ccrecip26-section *::before,
.ccrecip26-section *::after {
   box-sizing: border-box;
}


/* GRID */

.ccrecip26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .44;

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

   background-size: 68px 68px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 14%,
         #000 86%,
         transparent
      );

   mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 14%,
         #000 86%,
         transparent
      );
}


/* BACKGROUND GLOWS */

.ccrecip26-glow {

   position: absolute;

   z-index: -4;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(35px);
}


.ccrecip26-glow--one {

   width: 580px;

   height: 580px;

   left: -330px;

   top: 180px;

   background:
      radial-gradient(
         circle,
         rgba(154,255,37,.12),
         transparent 70%
      );
}


.ccrecip26-glow--two {

   width: 620px;

   height: 620px;

   right: -350px;

   bottom: -190px;

   background:
      radial-gradient(
         circle,
         rgba(61,219,95,.08),
         transparent 70%
      );
}


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

.ccrecip26-heading {

   max-width: 900px;

   margin: 0 auto 45px;

   text-align: center;
}


.ccrecip26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   margin-bottom: 14px;

   color: #a9ff1c;

   font-size: 11px;

   font-weight: 900;

   letter-spacing: .18em;
}


.ccrecip26-eyebrow span {

   width: 45px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(168,255,45,.65)
      );
}


.ccrecip26-eyebrow span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(168,255,45,.65),
         transparent
      );
}


.ccrecip26-heading h2 {

   margin: 0;

   color: #ffffff;

   font-size:
      clamp(38px, 4vw, 62px);

   line-height: 1.08;

   letter-spacing: -.05em;

   font-weight: 900;
}


.ccrecip26-heading h2 strong {

   display: block;

   margin-top: 3px;

   color: #ffffff;
}


.ccrecip26-gradient {

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #e0ff48 0%,
         #9eff0b 48%,
         #5cff86 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;
}


/* ============================================================
   MAIN VISUAL
============================================================ */

.ccrecip26-visual {

   position: relative;

   /* max-width: 980px; */

   margin: 0 auto;

   padding: 70px 42px 34px;

   border:
      1px solid rgba(159,255,59,.16);

   border-radius: 32px;

   background:
      radial-gradient(
         circle at 50% 45%,
         rgba(145,255,37,.075),
         transparent 42%
      ),
      linear-gradient(
         145deg,
         rgba(8,21,13,.96),
         rgba(3,10,6,.98)
      );

   box-shadow:
      inset 0 1px rgba(255,255,255,.045),
      0 35px 90px rgba(0,0,0,.38),
      0 0 55px rgba(129,255,24,.04);

   backdrop-filter: blur(18px);
}


/* TOP BADGE */

.ccrecip26-badge {

   position: absolute;

   top: 0;

   left: 50%;

   min-height: 46px;

   padding: 0 18px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 8px;

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

   border:
      1px solid rgba(162,255,60,.18);

   border-radius: 100px;

   color: #dce5df;

   background: #071109;

   box-shadow:
      0 13px 30px rgba(0,0,0,.32);

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .12em;

   white-space: nowrap;
}


.ccrecip26-badge-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #a7ff00;

   box-shadow:
      0 0 10px rgba(167,255,0,.75);
}


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

.ccrecip26-image-wrap {

   position: relative;

   z-index: 5;

   /* max-width: 760px; */

   margin: 0 auto;

   padding: 15px;

   border:
      1px solid rgba(172,255,73,.23);

   border-radius: 20px;

   background:
      linear-gradient(
         145deg,
         rgba(255,255,255,.06),
         rgba(255,255,255,.015)
      );

   box-shadow:
      0 25px 60px rgba(0,0,0,.35),
      inset 0 1px rgba(255,255,255,.06);
}


.ccrecip26-image-wrap::before {

   content: "";

   position: absolute;

   inset: -1px;

   z-index: -1;

   border-radius: inherit;

   background:
      linear-gradient(
         135deg,
         rgba(207,255,54,.35),
         transparent 35%,
         transparent 65%,
         rgba(88,255,124,.20)
      );
}


.ccrecip26-image {

   display: block;

   width: 100%;

   margin: 0 auto;

   border-radius: 13px;

   object-fit: contain;

   transition:
      transform .35s ease;
}


/* IMAGE GLOW */

.ccrecip26-image-glow {

   position: absolute;

   left: 50%;

   top: 49%;

   width: 650px;

   height: 430px;

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

   border-radius: 50%;

   background:
      radial-gradient(
         ellipse,
         rgba(150,255,32,.15),
         rgba(94,255,81,.03) 48%,
         transparent 72%
      );

   filter: blur(20px);
}


/* ============================================================
   CORNERS
============================================================ */

.ccrecip26-corner {

   position: absolute;

   z-index: 6;

   width: 38px;

   height: 38px;

   pointer-events: none;
}


.ccrecip26-corner--tl {

   left: 24px;

   top: 24px;

   border-top:
      2px solid #9cff0a;

   border-left:
      2px solid #9cff0a;
}


.ccrecip26-corner--tr {

   right: 24px;

   top: 24px;

   border-top:
      2px solid #9cff0a;

   border-right:
      2px solid #9cff0a;
}


.ccrecip26-corner--bl {

   left: 24px;

   bottom: 24px;

   border-bottom:
      2px solid #9cff0a;

   border-left:
      2px solid #9cff0a;
}


.ccrecip26-corner--br {

   right: 24px;

   bottom: 24px;

   border-bottom:
      2px solid #9cff0a;

   border-right:
      2px solid #9cff0a;
}


/* ============================================================
   BOTTOM TEXT
============================================================ */

.ccrecip26-bottom {

   margin-top: 30px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 14px;
}


.ccrecip26-bottom-line {

   height: 1px;

   flex: 1;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(161,255,52,.3)
      );
}


.ccrecip26-bottom-line--right {

   background:
      linear-gradient(
         90deg,
         rgba(161,255,52,.3),
         transparent
      );
}


.ccrecip26-bottom-text {

   display: flex;

   align-items: center;

   gap: 7px;

   color: #89988e;

   font-size: 11px;

   font-weight: 700;

   text-align: center;
}


.ccrecip26-bottom-text i {

   color: #a4ff13;

   font-style: normal;

   text-shadow:
      0 0 12px rgba(164,255,19,.55);
}


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

@media (max-width: 991px) {

   .ccrecip26-section {

      padding:
         75px 0 80px;
   }


   .ccrecip26-heading {

      margin-bottom:
         42px;
   }


   .ccrecip26-visual {

      padding:
         65px 28px 30px;

      border-radius:
         26px;
   }

}


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

@media (max-width: 767px) {

   .ccrecip26-section {

      padding:
         60px 0 65px;
   }


   .ccrecip26-heading h2 {

      font-size:
         36px;
   }


   .ccrecip26-visual {

      padding:
         55px 14px 22px;

      border-radius:
         22px;
   }


   .ccrecip26-badge {

      max-width:
         calc(100% - 25px);

      min-height:
         41px;

      padding:
         7px 13px;

      font-size:
         8px;

      text-align:
         center;

      white-space:
         normal;
   }


   .ccrecip26-image-wrap {

      padding:
         8px;

      border-radius:
         15px;
   }


   .ccrecip26-image {

      border-radius:
         10px;
   }


   .ccrecip26-corner {

      width:
         25px;

      height:
         25px;
   }


   .ccrecip26-corner--tl,
   .ccrecip26-corner--bl {

      left:
         12px;
   }


   .ccrecip26-corner--tr,
   .ccrecip26-corner--br {

      right:
         12px;
   }


   .ccrecip26-bottom {

      margin-top:
         23px;
   }


   .ccrecip26-bottom-line {

      display:
         none;
   }

}


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

@media (max-width: 480px) {

   .ccrecip26-heading h2 {

      font-size:
         31px;
   }


   .ccrecip26-eyebrow {

      gap:
         6px;

      font-size:
         9px;
   }


   .ccrecip26-eyebrow span {

      width:
         25px;
   }


   .ccrecip26-bottom-text {

      font-size:
         10px;
   }

}

/* =====================================================
   CREATORCLAW AI — ULTRA PREMIUM WHITE DEMO SECTION
===================================================== */

.ccdemo26-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 105px;
    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(109, 240, 58, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 68%,
            rgba(34, 196, 255, 0.09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfffa 50%,
            #ffffff 100%
        );
    font-size: 18px;

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


/* GRID BACKGROUND */

.ccdemo26-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(18, 50, 39, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(18, 50, 39, 0.055) 1px,
            transparent 1px
        );

    background-size: 78px 78px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.7),
            transparent 92%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.7),
            transparent 92%
        );

    pointer-events: none;
}


/* GLOWS */

.ccdemo26-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    filter: blur(85px);
    opacity: .16;
    pointer-events: none;
}

.ccdemo26-glow--left {
    left: -170px;
    top: 100px;
    background: #8cff31;
}

.ccdemo26-glow--right {
    right: -180px;
    bottom: 20px;
    background: #20cfff;
}


/* BADGE */

.ccdemo26-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 18px;
    margin-bottom: 20px;

    border: 1px solid rgba(83, 200, 45, 0.22);
    border-radius: 100px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(240,255,234,.92)
        );

    box-shadow:
        0 8px 30px rgba(31, 149, 40, 0.08);

    color: #187a28;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.ccdemo26-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #65d52f;

    box-shadow:
        0 0 0 5px rgba(101,213,47,.13),
        0 0 15px rgba(101,213,47,.55);
}


/* TITLE */

.ccdemo26-title {
    margin: 0;

    color: #071b17;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -2.7px;
}

.ccdemo26-title span {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #82e918 0%,
            #28bd3d 45%,
            #04a985 100%
        );

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

    color: transparent;
}


/* SUBTITLE */

.ccdemo26-subtitle {
max-width: 820px;
  margin: 11px auto 15px;
  color: #32443e;
  font-size: clamp(18px, 2vw, 18px);
  line-height: 1.5;
  font-weight: 600;
}

.ccdemo26-subtitle strong {
    color: #20a93b;
    font-weight: 800;
}


/* VIDEO OUTER */

.ccdemo26-video-wrap {
    position: relative;

    padding: 10px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(239,255,238,.86)
        );

    border:
        1px solid
        rgba(70, 183, 71, 0.20);

    box-shadow:
        0 35px 85px rgba(7, 45, 30, 0.15),
        0 14px 35px rgba(13, 105, 55, 0.07),
        inset 0 1px 0 rgba(255,255,255,.98);

    z-index: 2;
}


/* GREEN FRAME */

.ccdemo26-video-wrap::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: 29px;

    padding: 1px;

    background:
        linear-gradient(
            125deg,
            rgba(144, 238, 59, .75),
            rgba(42, 190, 74, .08),
            rgba(19, 190, 210, .55)
        );

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

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}


/* TOP FLOATING GLOW */

.ccdemo26-video-glow {
    position: absolute;

    width: 56%;
    height: 65px;

    left: 22%;
    top: -25px;

    background:
        radial-gradient(
            ellipse,
            rgba(115,230,53,.28),
            transparent 68%
        );

    filter: blur(13px);

    pointer-events: none;
}


/* BROWSER BAR */

.ccdemo26-browser {
    display: flex;
    align-items: center;

    position: relative;

    min-height: 58px;

    padding: 10px 16px;

    border-radius: 19px 19px 10px 10px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbf8
        );

    border-bottom:
        1px solid
        rgba(15, 58, 38, 0.08);
}


/* DOTS */

.ccdemo26-browser-dots {
    display: flex;
    gap: 7px;
}

.ccdemo26-browser-dots span {
    display: block;

    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.ccdemo26-browser-dots span:nth-child(1) {
    background: #ff6868;
}

.ccdemo26-browser-dots span:nth-child(2) {
    background: #ffc84a;
}

.ccdemo26-browser-dots span:nth-child(3) {
    background: #69d978;
}


/* URL PILL */

.ccdemo26-browser-pill {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 17px;

    min-width: 225px;

    justify-content: center;

    background: #eef6f0;

    border:
        1px solid
        rgba(44, 112, 71, 0.09);

    border-radius: 100px;

    color: #53645e;

    font-size: 12px;
    font-weight: 700;
}

.ccdemo26-lock {
    color: #52bf46;
    font-size: 10px;
}


/* LIVE */

.ccdemo26-live {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px 11px;

    border-radius: 100px;

    background: #effbed;

    color: #248632;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
}

.ccdemo26-live span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #56ce41;

    box-shadow:
        0 0 0 4px rgba(86,206,65,.14);
}


/* VIDEO */

.ccdemo26-video {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #edf3ee;

    aspect-ratio: 16 / 9;
}

.ccdemo26-video img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* VIDEO SHADE */

.ccdemo26-video::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(0, 30, 20, 0.10)
        );

    pointer-events: none;
}


/* PLAY BUTTON */

.ccdemo26-play {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 5;
}

.ccdemo26-play-ring {
    position: absolute;

    inset: -18px;

    border-radius: 50%;

    border:
        1px solid
        rgba(100, 221, 51, .55);

    animation:
        ccdemo26Pulse
        2s infinite;
}

.ccdemo26-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a0ef24,
            #3dc842 48%,
            #039d76
        );

    border:
        6px solid
        rgba(255,255,255,.93);

    box-shadow:
        0 16px 45px rgba(38,180,74,.38),
        0 4px 13px rgba(0,0,0,.15);

    color: #fff;

    cursor: pointer;

    transition:
        .3s ease;
}

.ccdemo26-play-btn span {
    position: relative;
    left: 3px;

    font-size: 29px;
}

.ccdemo26-play:hover .ccdemo26-play-btn {
    transform: scale(1.08);
}


/* BOTTOM INFO */

.ccdemo26-video-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 22px;

    padding: 19px 15px 10px;

    color: #33443d;

    font-size: 14px;
    font-weight: 700;
}

.ccdemo26-mini-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ccdemo26-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #8deb32,
            #28bd49
        );

    color: #fff;

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

    box-shadow:
        0 5px 14px
        rgba(43, 188, 71, .18);
}

.ccdemo26-mini-line {
    width: 1px;
    height: 18px;

    background:
        rgba(24, 71, 51, 0.13);
}


/* ANIMATION */

@keyframes ccdemo26Pulse {

    0% {
        transform: scale(.92);
        opacity: .85;
    }

    70% {
        transform: scale(1.25);
        opacity: 0;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }

}


/* ==================================
   RESPONSIVE
================================== */

@media (max-width: 991px) {

    .ccdemo26-section {
        padding: 70px 0 80px;
    }

    .ccdemo26-subtitle {
        margin-bottom: 35px;
    }

}


@media (max-width: 767px) {

    .ccdemo26-section {
        padding: 55px 0 65px;
    }

    .ccdemo26-title {
        letter-spacing: -1.5px;
    }

    .ccdemo26-video-wrap {
        padding: 6px;
        border-radius: 20px;
    }

    .ccdemo26-browser {
        min-height: 48px;
        padding: 8px 11px;
    }

    .ccdemo26-browser-pill {
        display: none;
    }

    .ccdemo26-play-btn {
        width: 64px;
        height: 64px;
    }

    .ccdemo26-play-btn span {
        font-size: 23px;
    }

    .ccdemo26-video-bottom {
        gap: 12px 16px;

        padding:
            16px 8px
            8px;
    }

    .ccdemo26-mini-line {
        display: none;
    }

}


@media (max-width: 480px) {

    .ccdemo26-badge {
        font-size: 10px;
        letter-spacing: .8px;
    }

    .ccdemo26-subtitle {
        font-size: 17px;
    }

    .ccdemo26-mini-item {
        width: 100%;
        justify-content: center;
    }

}

/* ============================================================
   COURSECLAW AI — UNBEATABLE OFFER
   ULTRA PREMIUM WHITE THEME
============================================================ */

.ccoffer26-section {

   --ccoffer-green: #86d900;
   --ccoffer-lime: #cfff33;
   --ccoffer-dark: #101810;
   --ccoffer-muted: #687265;

   position: relative;

   overflow: hidden;

   padding: 95px 0 105px;

   background:
      radial-gradient(
         circle at 80% 45%,
         rgba(155, 232, 37, .12),
         transparent 30%
      ),
      radial-gradient(
         circle at 10% 75%,
         rgba(68, 180, 79, .055),
         transparent 25%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fafcf7 50%,
         #ffffff 100%
      );

   font-family:
      "Inter",
      Arial,
      sans-serif;

   font-size: 18px;

   color: #101810;

   isolation: isolate;

}


.ccoffer26-section *,
.ccoffer26-section *::before,
.ccoffer26-section *::after {

   box-sizing: border-box;

}


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

.ccoffer26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .50;

   background-image:
      linear-gradient(
         rgba(82, 127, 31, .03) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(82, 127, 31, .03) 1px,
         transparent 1px
      );

   background-size: 66px 66px;

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 15%,
         #000 84%,
         transparent
      );

   mask-image:
      linear-gradient(
         to bottom,
         transparent,
         #000 15%,
         #000 84%,
         transparent
      );

}


/* ============================================================
   BACKGROUND GLOW
============================================================ */

.ccoffer26-glow {

   position: absolute;

   z-index: -4;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(30px);

}


.ccoffer26-glow--one {

   width: 550px;

   height: 550px;

   right: -300px;

   top: 170px;

   background:
      radial-gradient(
         circle,
         rgba(155, 229, 40, .13),
         transparent 70%
      );

}


.ccoffer26-glow--two {

   width: 450px;

   height: 450px;

   left: -280px;

   bottom: -160px;

   background:
      radial-gradient(
         circle,
         rgba(51, 169, 79, .08),
         transparent 70%
      );

}


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

.ccoffer26-heading {

   max-width: 1150px;

   margin: 0 auto 55px;

   text-align: center;

}


.ccoffer26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   margin-bottom: 13px;

   color: #69a900;

   font-size: 11px;

   font-weight: 900;

   letter-spacing: .17em;

}


.ccoffer26-eyebrow span {

   width: 44px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(107, 171, 0, .62)
      );

}


.ccoffer26-eyebrow span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(107, 171, 0, .62),
         transparent
      );

}


.ccoffer26-heading h2 {

   margin: 0;

   color: #111810;

   font-size:
      clamp(38px, 4vw, 61px);

   line-height: 1.08;

   letter-spacing: -.045em;

   font-weight: 900;

}


.ccoffer26-heading h2 strong {

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #72ba00,
         #91dc00,
         #35a74d
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}


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

.ccoffer26-list {

   position: relative;

   max-width: 650px;

}


/* ============================================================
   ITEM
============================================================ */

.ccoffer26-item {

   position: relative;

   min-height: 105px;

   margin-bottom: 13px;

   padding:
      21px 50px 21px 78px;

   display: flex;

   align-items: center;

   overflow: hidden;

   border:
      1px solid rgba(73, 109, 41, .10);

   border-radius: 18px;

   background:
      linear-gradient(
         145deg,
         #ffffff,
         #f9fcf6
      );

   box-shadow:
      0 12px 30px rgba(31, 57, 15, .055);

   transition:
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;

}


.ccoffer26-item::before {

   content: "";

   position: absolute;

   left: 0;

   top: 22%;

   bottom: 22%;

   width: 3px;

   border-radius:
      0 4px 4px 0;

   background:
      linear-gradient(
         to bottom,
         transparent,
         #8bd900,
         transparent
      );

}


.ccoffer26-item:hover {

   transform:
      translateX(6px);

   border-color:
      rgba(113, 177, 21, .25);

   box-shadow:
      0 18px 40px rgba(31, 57, 15, .09);

}


/* ============================================================
   CHECK
============================================================ */

.ccoffer26-check {

   position: absolute;

   left: 21px;

   top: 50%;

   width: 39px;

   height: 39px;

   display: grid;

   place-items: center;

   transform:
      translateY(-50%);

   border:
      1px solid rgba(106, 165, 24, .16);

   border-radius: 50%;

   color: #163000;

   background:
      linear-gradient(
         135deg,
         #ddff49,
         #92df00
      );

   box-shadow:
      0 8px 22px rgba(105, 170, 0, .12);

   font-size: 16px;

   font-weight: 900;

}


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

.ccoffer26-number {

   position: absolute;

   right: 15px;

   top: 9px;

   color:
      rgba(78, 117, 49, .08);

   font-size: 36px;

   line-height: 1;

   font-weight: 900;

}


/* ============================================================
   CONTENT
============================================================ */

.ccoffer26-item-content {

   position: relative;

   z-index: 3;

}


.ccoffer26-item p {

   margin: 0;

   color: #323c2f;

   font-size: 16px;

   line-height: 1.6;

   font-weight: 700;

}


/* ============================================================
   FEATURED LAST ITEM
============================================================ */

.ccoffer26-item--featured {

   border-color:
      rgba(116, 181, 16, .24);

   background:
      radial-gradient(
         circle at 85% 20%,
         rgba(175, 236, 51, .13),
         transparent 30%
      ),
      linear-gradient(
         145deg,
         #ffffff,
         #f6fbeF
      );

}


.ccoffer26-featured-tag {

   position: absolute;

   right: 13px;

   bottom: 11px;

   padding:
      5px 7px;

   border-radius: 6px;

   color: #173000;

   background:
      linear-gradient(
         135deg,
         #d8ff3f,
         #92df00
      );

   font-size: 7px;

   font-weight: 900;

   letter-spacing: .08em;

}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.ccoffer26-visual {

   position: relative;

   min-height: 600px;

   display: flex;

   align-items: center;

   justify-content: center;

}


/* ============================================================
   GLOW
============================================================ */

.ccoffer26-visual-glow {

   position: absolute;

   left: 50%;

   top: 50%;

   width: 500px;

   height: 500px;

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

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(163, 235, 39, .20),
         rgba(130, 219, 25, .055) 47%,
         transparent 70%
      );

   filter: blur(17px);

}


/* ============================================================
   ORBITS
============================================================ */

.ccoffer26-orbit {

   position: absolute;

   left: 50%;

   top: 50%;

   border-radius: 50%;

   transform:
      translate(-50%, -50%)
      rotateX(65deg);

   border:
      1px solid rgba(101, 159, 23, .16);

}


.ccoffer26-orbit--one {

   width: 540px;

   height: 540px;

}


.ccoffer26-orbit--two {

   width: 420px;

   height: 420px;

   border-style:
      dashed;

}


/* ============================================================
   IMAGE SHELL
============================================================ */

.ccoffer26-image-shell {

   position: relative;

   z-index: 5;

   width: 100%;

   max-width: 550px;

   min-height: 470px;

   padding: 56px 22px 22px;

   border:
      1px solid rgba(93, 140, 39, .13);

   border-radius: 30px;

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

   box-shadow:
      0 28px 65px rgba(29, 60, 10, .11);

   backdrop-filter:
      blur(15px);

}


/* ============================================================
   IMAGE TOP
============================================================ */

.ccoffer26-image-top {

   position: absolute;

   top: 16px;

   left: 50%;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 7px;

   transform:
      translateX(-50%);

   color: #65705f;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .13em;

   white-space: nowrap;

}


.ccoffer26-image-top span {

   width: 7px;

   height: 7px;

   border-radius: 50%;

   background:
      #8edb00;

   box-shadow:
      0 0 9px rgba(129, 212, 0, .4);

}


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

.ccoffer26-main-image {

   position: relative;

   z-index: 3;

   display: block;

   width: 100%;

   /* max-height: 430px; */

   margin: 0 auto;

   object-fit: contain;

   transition:
      transform .25s ease;

}


/* ============================================================
   FLOATING CHIPS
============================================================ */

.ccoffer26-chip {

   position: absolute;

   z-index: 10;

   min-height: 40px;

   padding: 0 13px;

   display: flex;

   align-items: center;

   gap: 7px;

   border:
      1px solid rgba(81, 127, 34, .11);

   border-radius: 100px;

   color: #4d5a47;

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

   box-shadow:
      0 12px 28px rgba(28, 54, 12, .09);

   font-size: 10px;

   font-weight: 800;

   animation:
      ccoffer26Float 5s ease-in-out infinite;

}


.ccoffer26-chip span {

   width: 20px;

   height: 20px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   color: #397400;

   background:
      rgba(138, 214, 13, .15);

   font-size: 9px;

}


.ccoffer26-chip--one {

   top: 75px;

   left: -5px;

}


.ccoffer26-chip--two {

   right: -8px;

   top: 260px;

   animation-delay:
      1.3s;

}


.ccoffer26-chip--three {

   left: 20px;

   bottom: 55px;

   animation-delay:
      2.2s;

}


@keyframes ccoffer26Float {

   0%,
   100% {
      translate: 0 0;
   }

   50% {
      translate: 0 -9px;
   }

}


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

@media (max-width: 991px) {

   .ccoffer26-section {

      padding:
         75px 0 80px;

   }


   .ccoffer26-list {

      max-width:
         760px;

      margin:
         0 auto;

   }


   .ccoffer26-visual {

      max-width:
         650px;

      margin:
         35px auto 0;

   }

}


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

@media (max-width: 767px) {

   .ccoffer26-section {

      padding:
         60px 0 65px;

   }


   .ccoffer26-heading {

      margin-bottom:
         37px;

   }


   .ccoffer26-heading h2 {

      font-size:
         36px;

   }


   .ccoffer26-item {

      min-height:
         auto;

      padding:
         20px 18px 20px 67px;

      border-radius:
         16px;

   }


   .ccoffer26-check {

      left:
         16px;

      width:
         37px;

      height:
         37px;

   }


   .ccoffer26-item p {

      font-size:
         14px;

   }


   .ccoffer26-number {

      font-size:
         31px;

   }


   .ccoffer26-featured-tag {

      position:
         static;

      width:
         fit-content;

      margin-top:
         11px;

   }


   .ccoffer26-visual {

      min-height:
         500px;

   }


   .ccoffer26-image-shell {

      min-height:
         400px;

      padding:
         50px 15px 15px;

      border-radius:
         23px;

   }


   .ccoffer26-main-image {

      max-height:
         350px;

   }


   .ccoffer26-orbit--one {

      width:
         420px;

      height:
         420px;

   }


   .ccoffer26-orbit--two {

      width:
         320px;

      height:
         320px;

   }

}


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

@media (max-width: 480px) {

   .ccoffer26-heading h2 {

      font-size:
         31px;

   }


   .ccoffer26-eyebrow {

      gap:
         6px;

      font-size:
         9px;

   }


   .ccoffer26-eyebrow span {

      width:
         25px;

   }


   .ccoffer26-visual {

      min-height:
         430px;

   }


   .ccoffer26-chip {

      transform:
         scale(.85);

   }

}


/* ============================================================
   CREATORCLAW AI — CORE FEATURES
   ULTRA PREMIUM DARK THEME
============================================================ */

.ccfeat26-section {

    --ccfeat-green: #9cff00;
    --ccfeat-lime: #d7ff36;
    --ccfeat-mint: #5aff8a;

    position: relative;

    overflow: hidden;

    padding: 90px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(145, 255, 32, .10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(62, 220, 99, .06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #010503 0%,
            #031008 50%,
            #010503 100%
        );

    font-family: "Inter", Arial, sans-serif;

    color: #ffffff;

    isolation: isolate;
}


.ccfeat26-section *,
.ccfeat26-section *::before,
.ccfeat26-section *::after {
    box-sizing: border-box;
}


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

.ccfeat26-grid {

    position: absolute;

    inset: 0;

    z-index: -5;

    opacity: .46;

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

    background-size:
        66px 66px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 86%,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 86%,
            transparent
        );
}


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

.ccfeat26-glow {

    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(35px);
}


.ccfeat26-glow--one {

    width: 540px;
    height: 540px;

    left: -310px;
    top: 170px;

    background:
        radial-gradient(
            circle,
            rgba(155,255,38,.12),
            transparent 70%
        );
}


.ccfeat26-glow--two {

    width: 600px;
    height: 600px;

    right: -340px;
    bottom: -180px;

    background:
        radial-gradient(
            circle,
            rgba(60,221,98,.08),
            transparent 70%
        );
}


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

.ccfeat26-heading {

    max-width: 900px;

    margin: 0 auto 52px;
}


.ccfeat26-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 13px;

    color: #a8ff1f;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .17em;
}


.ccfeat26-eyebrow span {

    width: 45px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166,255,53,.66)
        );
}


.ccfeat26-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(166,255,53,.66),
            transparent
        );
}


.ccfeat26-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(38px, 4vw, 60px);

    line-height: 1.08;

    letter-spacing: -.045em;

    font-weight: 900;
}


.ccfeat26-heading h2 strong {

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ddff45,
            #9cff0a,
            #5bff8b
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


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

.ccfeat26-card {

    position: relative;

    height: 100%;

    min-height: 390px;

    overflow: hidden;

    padding: 24px 22px 26px;

    border:
        1px solid rgba(160,255,70,.12);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(147,255,45,.055),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(10,24,15,.96),
            rgba(3,11,6,.98)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 20px 48px rgba(0,0,0,.28);

    text-align: center;

    transform-style: preserve-3d;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}


.ccfeat26-card::before {

    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    top: 0;

    height: 2px;

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

    box-shadow:
        0 2px 20px rgba(149,255,31,.18);
}


.ccfeat26-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(168,255,68,.30);

    box-shadow:
        inset 0 1px rgba(255,255,255,.055),
        0 30px 65px rgba(0,0,0,.38),
        0 0 42px rgba(139,255,26,.07);
}


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

.ccfeat26-card-glow {

    position: absolute;

    width: 260px;
    height: 220px;

    left: 50%;
    top: -150px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(161,255,37,.17),
            transparent 70%
        );

    pointer-events: none;
}


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

.ccfeat26-number {

    position: absolute;

    right: 15px;
    top: 12px;

    color:
        rgba(165,255,78,.07);

    font-size: 44px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.07em;
}


/* ============================================================
   MEDIA
============================================================ */

.ccfeat26-media {

    position: relative;

    z-index: 3;

    width: 100%;

    height: 205px;

    margin-bottom: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(157,255,64,.08);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(165,255,40,.12),
            rgba(84,255,109,.025) 45%,
            transparent 68%
        ),
        rgba(255,255,255,.015);
}


.ccfeat26-media::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 145px;
    height: 145px;

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

    border:
        1px solid rgba(159,255,55,.13);

    border-radius: 50%;
}


.ccfeat26-media::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 105px;
    height: 105px;

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

    border:
        1px dashed rgba(159,255,55,.12);

    border-radius: 50%;
}


.ccfeat26-media img {

    position: relative;

    z-index: 4;

    max-width: 92%;

    max-height: 190px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 20px rgba(0,0,0,.20)
        );

    transition:
        transform .35s ease;
}


.ccfeat26-card:hover
.ccfeat26-media img {

    transform:
        translateY(-5px)
        scale(1.025);
}


/* ============================================================
   CONTENT
============================================================ */

.ccfeat26-content {

    position: relative;

    z-index: 3;
}


.ccfeat26-content h4 {

    margin: 0;

    color: #ffffff;

    font-size: 21px;

    line-height: 1.3;

    letter-spacing: -.025em;

    font-weight: 900;
}


.ccfeat26-content p {

    max-width: 320px;

    margin:
        10px auto 0;

    color: #94a199;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 400;
}


/* ============================================================
   CHECK
============================================================ */

.ccfeat26-check {

    width: 29px;

    height: 29px;

    margin:
        19px auto 0;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(157,255,57,.16);

    border-radius: 50%;

    color: #a7ff15;

    background:
        rgba(157,255,51,.06);

    box-shadow:
        0 0 18px rgba(138,255,20,.04);

    font-size: 12px;

    font-weight: 900;
}


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

@media (max-width: 991px) {

    .ccfeat26-section {

        padding:
            75px 0 80px;
    }


    .ccfeat26-heading {

        margin-bottom:
            42px;
    }


    .ccfeat26-card {

        min-height:
            370px;
    }

}


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

@media (max-width: 767px) {

    .ccfeat26-section {

        padding:
            60px 0 65px;
    }


    .ccfeat26-heading {

        margin-bottom:
            34px;
    }


    .ccfeat26-heading h2 {

        font-size:
            36px;
    }


    .ccfeat26-card {

        min-height:
            auto;

        padding:
            20px 18px 22px;

        border-radius:
            20px;
    }


    .ccfeat26-media {

        height:
            185px;
    }


    .ccfeat26-media img {

        max-height:
            170px;
    }


    .ccfeat26-content h4 {

        font-size:
            19px;
    }


    .ccfeat26-content p {

        font-size:
            14px;
    }

}


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

@media (max-width: 480px) {

    .ccfeat26-heading h2 {

        font-size:
            31px;
    }


    .ccfeat26-eyebrow {

        font-size:
            9px;

        gap:
            6px;
    }


    .ccfeat26-eyebrow span {

        width:
            25px;
    }


    .ccfeat26-media {

        height:
            165px;
    }


    .ccfeat26-media img {

        max-height:
            150px;
    }

}

/* =========================================================
   CREATORCLAW AI — PERFECT FOR
   ULTRA PREMIUM WHITE THEME
========================================================= */
/* =========================================================
   CREATORCLAW AI — PERFECT FOR PREMIUM SECTION
========================================================= */

.ccperf27-section {
    position: relative;
    overflow: hidden;
padding: 95px 0 50px;
    background:
        radial-gradient(circle at 8% 20%, rgba(135, 236, 70, 0.12), transparent 26%),
        radial-gradient(circle at 92% 18%, rgba(68, 202, 255, 0.12), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(120, 235, 120, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfffc 100%);
    font-size: 18px;
}

/* Grid */
.ccperf27-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 67, 46, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 67, 46, 0.05) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.8) 12%, rgba(0,0,0,.8) 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.8) 12%, rgba(0,0,0,.8) 88%, transparent 100%);
    pointer-events: none;
}

/* Ambient glow */
.ccperf27-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .18;
    pointer-events: none;
}

.ccperf27-glow--left {
    left: -220px;
    top: 120px;
    background: #8bf040;
}

.ccperf27-glow--right {
    right: -220px;
    bottom: 30px;
    background: #61d3ff;
}

/* Heading */
.ccperf27-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    margin-bottom: 18px;
    border-radius: 999px;
    border: 1px solid rgba(79, 191, 68, 0.20);
    background: linear-gradient(180deg, #ffffff 0%, #f4fff1 100%);
    box-shadow: 0 12px 28px rgba(59, 160, 66, 0.08);
    color: #299038;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.ccperf27-badge span {
    color: #78d72f;
}

.ccperf27-title {
    margin: 0;
    color: #071b17;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -2px;
}

.ccperf27-title span {
    background: linear-gradient(135deg, #8de92b 0%, #37c748 52%, #00a77d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ccperf27-subtitle {
    max-width: 760px;
    margin: 18px auto 48px;
    color: #5f726c;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
}

/* Rows */
.ccpf27-row-top,
.ccpf27-row-bottom {
    position: relative;
}

.ccpf27-row-bottom {
    margin-top: 6px;
}

/* Cards */
.ccperf27-card {
    position: relative;
    min-height: 100%;
    padding: 12px 12px 26px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,252,249,0.98) 100%);
    border: 1px solid rgba(23, 86, 57, 0.10);
    box-shadow:
        0 25px 60px rgba(17, 58, 42, 0.08),
        0 8px 24px rgba(17, 58, 42, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.90);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    overflow: hidden;
}

.ccperf27-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(145, 234, 59, 0.58),
        rgba(255,255,255,0.15) 35%,
        rgba(0,179,137,0.16) 70%,
        rgba(80,190,255,0.40)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}

.ccperf27-card::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(130, 232, 63, 0.14), transparent 68%);
    pointer-events: none;
}

.ccperf27-card:hover {
    transform: translateY(-8px);
    border-color: rgba(79, 189, 67, 0.22);
    box-shadow:
        0 34px 78px rgba(18, 78, 49, 0.13),
        0 12px 30px rgba(40, 170, 90, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Number */
.ccperf27-card-no {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #9aed35, #42c84a);
    border: 2px solid #ffffff;
    box-shadow: 0 10px 20px rgba(63, 186, 63, 0.25);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
}

/* Image */
.ccperf27-card-img {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #edf4ef;
    aspect-ratio: 16 / 9;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.75),
        0 12px 25px rgba(0,0,0,0.04);
}

.ccperf27-card-img::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 2;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.45);
    pointer-events: none;
}

.ccperf27-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 55%, rgba(7, 24, 18, 0.10) 100%);
    pointer-events: none;
}

.ccperf27-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform .55s ease, filter .55s ease;
}

.ccperf27-card:hover .ccperf27-card-img img {
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.02);
}

/* Content */
.ccperf27-card-body {
    position: relative;
    padding: 34px 18px 4px;
    text-align: center;
}

.ccperf27-card-icon {
    position: absolute;
    left: 50%;
    top: -17px;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #f2ffed 100%);
    border: 1px solid rgba(74, 190, 67, 0.18);
    box-shadow: 0 10px 22px rgba(60, 173, 67, 0.14);
    color: #63cd3f;
    font-size: 16px;
}

.ccperf27-card h4 {
    margin: 0;
    color: #0e2019;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: -.2px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* Better desktop sizing */
@media (min-width: 992px) {
    .ccpf27-row-top,
    .ccpf27-row-bottom {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .ccperf27-section {
        padding: 75px 0 85px;
    }

    .ccperf27-subtitle {
        margin-bottom: 36px;
    }
}

@media (max-width: 767px) {
    .ccperf27-section {
        padding: 58px 0 68px;
    }

    .ccperf27-title {
        letter-spacing: -1.4px;
    }

    .ccperf27-subtitle {
        font-size: 17px;
    }

    .ccperf27-card {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .ccperf27-badge {
        font-size: 10px;
        letter-spacing: .8px;
        padding: 8px 14px;
    }

    .ccperf27-title {
        font-size: 38px;
    }

    .ccperf27-card {
        padding: 10px 10px 22px;
        border-radius: 22px;
    }

    .ccperf27-card h4 {
        font-size: 17px;
    }
}

/* ============================================================
   WELLNESSCLAW AI — JV LAUNCH SCHEDULE
============================================================ */

.ccpromo26-section {
   position: relative;
   padding: 92px 0 84px;
   background: #010d08 url(../images/ccflow26-section.png) no-repeat center center;
   background-size: cover;
   color: #ffffff;
   font-family: "Manrope", "Inter", sans-serif;
}

.ccpromo26-board {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
   align-items: center;
   gap: 48px;
}


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

.ccpromo26-top-badge {
   width: fit-content;
   padding: 8px 15px;
   display: flex;
   align-items: center;
   gap: 9px;
   border: 1px solid rgba(202,255,49,.34);
   border-radius: 999px;
   color: #caff31;
   background: rgba(202,255,49,.07);
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.ccpromo26-live-dot {
   width: 7px;
   height: 7px;
   flex-shrink: 0;
   border-radius: 50%;
   background: #caff31;
   box-shadow: 0 0 0 3px rgba(202,255,49,.2);
}

.ccpromo26-eyebrow {
   margin-top: 22px;
   color: rgba(255,255,255,.78);
   font-size: 18px;
   font-weight: 700;
}

.ccpromo26-title {
   margin: 8px 0 0;
   color: #ffffff;
   font-family: inherit;
   font-size: 62px;
   font-weight: 800;
   line-height: 1.26;
   letter-spacing: -.03em;
}

.ccpromo26-title span {
   display: block;
   width: fit-content;
   padding: 0 .2em .04em;
   border-radius: .2em;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   box-shadow: 0 14px 34px rgba(170,255,0,.22), inset 0 1px rgba(255,255,255,.6);
   transform: rotate(-.6deg);
}


/* ============================================================
   LAUNCH WINDOW
============================================================ */

.ccpromo26-date-wrap {
   min-width: 0;
   padding: 26px;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   gap: 26px;
   border-radius: 30px;
   color: #06291a;
   background: linear-gradient(145deg, #eaff7a 0%, #caff31 50%, #aaff00 100%);
   box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 44px rgba(170,255,0,.12);
}

.ccpromo26-calendar-icon {
   width: 128px;
   overflow: hidden;
   border-radius: 20px;
   text-align: center;
   background: #ffffff;
   box-shadow: 0 16px 28px rgba(6,41,26,.26);
}

.ccpromo26-calendar-icon small {
   display: block;
   padding: 7px 0 8px;
   color: #caff31;
   background: #06291a;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .18em;
}

.ccpromo26-calendar-icon span {
   display: block;
   padding: 10px 0 14px;
   color: #06291a;
   font-size: 62px;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.04em;
}

.ccpromo26-date-content {
   min-width: 0;
}

.ccpromo26-date-content small {
   display: block;
   color: #24402f;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
}

.ccpromo26-date-content strong {
   display: block;
   margin-top: 8px;
   color: #06291a;
   font-size: 30px;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.02em;
}

.ccpromo26-date-content strong span {
   display: block;
   color: #24402f;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0;
}

.ccpromo26-time {
   width: fit-content;
   margin-top: 12px;
   padding: 6px 13px;
   border-radius: 999px;
   color: #caff31;
   background: #06291a;
   font-size: 14px;
   font-weight: 800;
}


/* ============================================================
   RESOURCES
============================================================ */

.ccpromo26-links-label {
   margin: 52px 0 18px;
   display: flex;
   align-items: center;
   gap: 14px;
   color: #caff31;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   white-space: nowrap;
}

.ccpromo26-links-label::after {
   content: "";
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, rgba(202,255,49,.5), transparent);
}

.ccpromo26-links {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 14px;
}

.ccpromo26-btn {
   position: relative;
   min-width: 0;
   min-height: 176px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(202,255,49,.16);
   border-radius: 22px;
   color: #ffffff;
   text-decoration: none;
   background: linear-gradient(180deg, rgba(14,48,32,.86) 0%, rgba(4,20,13,.92) 100%);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 36px rgba(0,0,0,.4);
   transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}

.ccpromo26-btn:hover {
   color: #ffffff;
   transform: translateY(-5px);
   border-color: rgba(202,255,49,.6);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 44px rgba(0,0,0,.5), 0 0 30px rgba(170,255,0,.12);
}

.ccpromo26-btn:focus-visible {
   outline: 2px solid #caff31;
   outline-offset: 3px;
}

.ccpromo26-btn--primary {
   border-color: transparent;
   color: #06291a;
   background: linear-gradient(145deg, #eaff7a 0%, #caff31 50%, #aaff00 100%);
}

.ccpromo26-btn--primary:hover {
   color: #06291a;
   border-color: transparent;
}

.ccpromo26-btn-icon {
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: 14px;
   color: #06291a;
   background: linear-gradient(135deg, #eaff7a 0%, #caff31 55%, #aaff00 100%);
   font-size: 18px;
}

.ccpromo26-btn--primary .ccpromo26-btn-icon {
   color: #caff31;
   background: linear-gradient(135deg, #0f5a36 0%, #06291a 100%);
}

.ccpromo26-btn-arrow {
   position: absolute;
   top: 20px;
   right: 18px;
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255,255,255,.24);
   border-radius: 50%;
   transition: transform .3s ease;
}

.ccpromo26-btn--primary .ccpromo26-btn-arrow {
   border-color: rgba(6,41,26,.4);
}

.ccpromo26-btn:hover .ccpromo26-btn-arrow {
   transform: translate(2px, -2px);
}

.ccpromo26-btn-arrow svg {
   width: 13px;
   height: 13px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ccpromo26-btn-copy {
   margin-top: auto;
   padding-top: 18px;
}

.ccpromo26-btn-copy small {
   display: block;
   color: rgba(255,255,255,.72);
   font-size: 11px;
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.ccpromo26-btn--primary .ccpromo26-btn-copy small {
   color: #24402f;
}

.ccpromo26-btn-copy strong {
   display: block;
   margin-top: 4px;
   font-size: 19px;
   font-weight: 800;
   line-height: 1.22;
   letter-spacing: -.01em;
}

.ccpromo26-btn-badge {
   display: block;
   width: fit-content;
   margin-top: 5px;
   padding: 3px 9px;
   border-radius: 999px;
   color: #caff31;
   background: #06291a;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .1em;
}

.ccpromo26-bottom {
   margin-top: 30px;
   color: rgba(255,255,255,.82);
   text-align: center;
   font-size: 15px;
   font-weight: 700;
}

.ccpromo26-bottom span {
   margin: 0 8px;
   color: #caff31;
}


/* ============================================================
   JV LAUNCH SCHEDULE - RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

   .ccpromo26-board {
      gap: 32px;
   }

   .ccpromo26-title {
      font-size: 50px;
   }

   .ccpromo26-date-wrap {
      padding: 22px;
      gap: 20px;
   }

   .ccpromo26-calendar-icon {
      width: 108px;
   }

   .ccpromo26-calendar-icon span {
      font-size: 52px;
   }

   .ccpromo26-date-content strong {
      font-size: 25px;
   }

   .ccpromo26-links {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .ccpromo26-btn {
      grid-column: span 2;
      min-height: 164px;
   }

   .ccpromo26-btn:nth-child(n + 4) {
      grid-column: span 3;
   }

}


@media (max-width: 991px) {

   .ccpromo26-board {
      grid-template-columns: minmax(0, 1fr);
   }

}


@media (max-width: 767px) {

   .ccpromo26-section {
      padding: 60px 0 60px;
   }

   .ccpromo26-title {
      font-size: 38px;
   }

   .ccpromo26-links-label {
      margin-top: 40px;
   }

   .ccpromo26-links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
   }

   .ccpromo26-btn,
   .ccpromo26-btn:nth-child(n + 4) {
      grid-column: span 1;
   }

   .ccpromo26-btn:last-child {
      grid-column: span 2;
   }

}


@media (max-width: 480px) {

   .ccpromo26-date-wrap {
      padding: 20px 18px;
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
   }

   .ccpromo26-date-content strong {
      font-size: 27px;
   }

}


@media (max-width: 359px) {

   .ccpromo26-title {
      font-size: 32px;
   }

   .ccpromo26-links {
      grid-template-columns: minmax(0, 1fr);
   }

   .ccpromo26-btn:last-child {
      grid-column: span 1;
   }

}


/* ============================================================
   CREATORCLAW AI — ULTRA PREMIUM PRODUCT INTRO
============================================================ */

.ccintro26-section {

    --cci-lime: #a6ff00;
    --cci-lime-light: #d8ff38;
    --cci-green: #65ed47;
    --cci-mint: #56ffc1;
    --cci-dark: #020705;

    position: relative;

    overflow: hidden;

    padding: 78px 0 55px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(126,255,38,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 55%,
            rgba(41,207,86,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #010403 0%,
            #03100a 44%,
            #010604 100%
        );

    font-family: "Inter", Arial, sans-serif;

    color: #ffffff;

    isolation: isolate;
}


.ccintro26-section *,
.ccintro26-section *::before,
.ccintro26-section *::after {

    box-sizing: border-box;
}


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

.ccintro26-grid {

    position: absolute;

    inset: 0;

    z-index: -8;

    opacity: .5;

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

    background-size: 72px 72px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 72%,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 72%,
            transparent
        );
}


/* ============================================================
   SUBTLE PARTICLE TEXTURE
============================================================ */

.ccintro26-noise {

    position: absolute;

    inset: 0;

    z-index: -7;

    opacity: .14;

    background-image:
        radial-gradient(
            circle,
            rgba(177,255,91,.18) .7px,
            transparent .9px
        );

    background-size: 25px 25px;

    pointer-events: none;
}


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

.ccintro26-glow {

    position: absolute;

    z-index: -6;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(38px);
}


.ccintro26-glow--top {

    width: 800px;
    height: 430px;

    left: 50%;
    top: -260px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(154,255,31,.16),
            transparent 70%
        );
}


.ccintro26-glow--left {

    width: 600px;
    height: 600px;

    left: -370px;
    top: 250px;

    background:
        radial-gradient(
            circle,
            rgba(142,255,28,.10),
            transparent 70%
        );
}


.ccintro26-glow--right {

    width: 650px;
    height: 650px;

    right: -390px;
    bottom: -150px;

    background:
        radial-gradient(
            circle,
            rgba(44,210,91,.075),
            transparent 70%
        );
}


/* ============================================================
   DECORATIVE ORBS
============================================================ */

.ccintro26-orb {

    position: absolute;

    z-index: -3;

    border-radius: 50%;

    border:
        1px solid rgba(162,255,60,.12);

    pointer-events: none;
}


.ccintro26-orb--one {

    width: 330px;
    height: 330px;

    left: -180px;
    top: 90px;
}


.ccintro26-orb--two {

    width: 430px;
    height: 430px;

    right: -255px;
    top: 300px;
}


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

.ccintro26-header {

    max-width: 1200px;

    margin: 0 auto;

    text-align: center;
}


/* ============================================================
   TOP BADGE
============================================================ */

.ccintro26-top-badge {

    width: fit-content;

    min-height: 43px;

    margin: 0 auto 23px;

    padding: 0 17px;

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

    gap: 8px;

    border:
        1px solid rgba(166,255,69,.17);

    border-radius: 100px;

    color: #bfcac3;

    background:
        rgba(153,255,49,.045);

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 0 30px rgba(145,255,25,.03);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .14em;
}


.ccintro26-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #aaff00;

    box-shadow:
        0 0 10px rgba(170,255,0,.85);

    animation:
        ccintro26Pulse 2s ease-in-out infinite;
}


.ccintro26-star {

    color: #b7ff24;
}


@keyframes ccintro26Pulse {

    0%,
    100% {

        box-shadow:
            0 0 0 4px rgba(166,255,0,.04),
            0 0 10px rgba(170,255,0,.65);
    }

    50% {

        box-shadow:
            0 0 0 7px rgba(166,255,0,.015),
            0 0 18px rgba(170,255,0,1);
    }

}


/* ============================================================
   INTRODUCING
============================================================ */

.ccintro26-introducing {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 18px;
}


.ccintro26-introducing strong {

    color: #ffffff;

    font-size:
        clamp(24px, 2.5vw, 39px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -.03em;
}


.ccintro26-intro-line {

    width: 65px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(163,255,50,.45)
        );
}


.ccintro26-intro-line--right {

    background:
        linear-gradient(
            90deg,
            rgba(163,255,50,.45),
            transparent
        );
}


/* ============================================================
   LOGO
============================================================ */

.ccintro26-logo-wrap {

    position: relative;

    width: fit-content;

    max-width: 100%;

    margin: 0 auto 25px;
}


.ccintro26-logo-glow {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 520px;
    height: 160px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(155,255,34,.14),
            transparent 70%
        );

    filter:
        blur(14px);
}


.ccintro26-logo {

    position: relative;

    z-index: 2;

    width: auto;

    max-width: 500px;

    max-height: 140px;

    object-fit: contain;

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


/* ============================================================
   HEADLINE
============================================================ */

.ccintro26-headline {
max-width: 1160px;
  margin: 0 auto;
  color: #ffffff;
  font-size: clamp(22px, 3.5vw, 42px);
  line-height: 1.4;
  letter-spacing: -.045em;
  font-weight: 900;
}


.ccintro26-gradient-text {

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #d8ff3d 0%,
            #a7ff0c 38%,
            #65ff64 70%,
            #58ffc0 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.ccintro26-course-highlight {

    position: relative;

    display: inline-block;

    margin: 6px 2px;

    padding: 2px 10px 5px;

    border-radius: 9px;

    color: #081300;

    background:
        linear-gradient(
            110deg,
            #dcff43,
            #9eff0a
        );

    box-shadow:
        0 10px 28px rgba(143,255,11,.11);

    transform:
        rotate(-.4deg);
}


.ccintro26-from {

    color: #ffffff;
}


/* ============================================================
   DIVIDER
============================================================ */

.ccintro26-divider {

    width: 330px;

    max-width: 75%;

    margin: 30px auto 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;
}


.ccintro26-divider span {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(159,255,52,.45)
        );
}


.ccintro26-divider span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(159,255,52,.45),
            transparent
        );
}


.ccintro26-divider i {

    color: #a9ff12;

    font-size: 14px;

    font-style: normal;

    text-shadow:
        0 0 15px rgba(169,255,18,.8);
}


/* ============================================================
   PRODUCT STAGE
============================================================ */

.ccintro26-product-stage {

    position: relative;

    min-height: 670px;

    padding: 80px 50px 100px;

    overflow: hidden;

    border:
        1px solid rgba(162,255,65,.15);

    border-radius: 36px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(135,255,32,.075),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(8,21,13,.94),
            rgba(2,10,6,.99)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.045),
        0 38px 100px rgba(0,0,0,.38),
        0 0 70px rgba(125,255,25,.035);

    backdrop-filter:
        blur(20px);

    perspective:
        1300px;
}


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

.ccintro26-stage-grid {

    position: absolute;

    inset: 0;

    opacity: .36;

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

    background-size:
        48px 48px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 80%
        );
}


/* ============================================================
   STAGE LABEL
============================================================ */

.ccintro26-stage-label {

    position: absolute;

    left: 50%;
    top: 0;

    z-index: 10;

    min-height: 45px;

    padding: 0 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

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

    border:
        1px solid rgba(162,255,60,.18);

    border-radius: 100px;

    color: #b9c7be;

    background:
        #071009;

    box-shadow:
        0 12px 32px rgba(0,0,0,.35);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .12em;

    white-space: nowrap;
}


.ccintro26-stage-label span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #a2ff00;

    box-shadow:
        0 0 9px rgba(162,255,0,.65);
}


/* ============================================================
   STAGE GLOW
============================================================ */

.ccintro26-stage-glow {

    position: absolute;

    left: 50%;
    top: 48%;

    width: 760px;
    height: 500px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(146,255,25,.17),
            rgba(85,255,92,.035) 48%,
            transparent 70%
        );

    filter:
        blur(23px);
}


/* ============================================================
   RINGS
============================================================ */

.ccintro26-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(67deg);

    border:
        1px solid rgba(149,255,47,.12);
}


.ccintro26-ring--one {

    width: 790px;
    height: 790px;
}


.ccintro26-ring--two {

    width: 610px;
    height: 610px;

    border-style: dashed;

    border-color:
        rgba(149,255,47,.15);
}


/* ============================================================
   COMBO IMAGE
============================================================ */

.ccintro26-combo-wrap {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


.ccintro26-combo-glow {

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 680px;
    height: 180px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(157,255,36,.15),
            transparent 70%
        );

    filter:
        blur(14px);
}


.ccintro26-combo {

    position: relative;

    z-index: 4;

    width: auto;

    max-width: 100%;

    max-height: 520px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 38px rgba(0,0,0,.40)
        );

    transition:
        transform .3s ease;
}


/* ============================================================
   FLOATING CHIPS
============================================================ */

.ccintro26-chip {

    position: absolute;

    z-index: 10;

    min-width: 165px;

    padding: 10px 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid rgba(161,255,66,.14);

    border-radius: 14px;

    background:
        rgba(6,19,11,.86);

    box-shadow:
        0 16px 35px rgba(0,0,0,.26),
        inset 0 1px rgba(255,255,255,.04);

    backdrop-filter:
        blur(16px);

    animation:
        ccintro26Float 5s ease-in-out infinite;
}


.ccintro26-chip-icon {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: #0b1800;

    background:
        linear-gradient(
            135deg,
            #dcff43,
            #8eff00
        );

    font-size: 15px;

    font-weight: 900;

    box-shadow:
        0 7px 18px rgba(134,255,0,.15);
}


.ccintro26-chip small {

    display: block;

    color: #77887d;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;
}


.ccintro26-chip strong {

    display: block;

    margin-top: 2px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;
}


.ccintro26-chip--one {

    left: 25px;
    top: 145px;
}


.ccintro26-chip--two {

    left: 60px;
    bottom: 160px;

    animation-delay:
        1.5s;
}


.ccintro26-chip--three {

    right: 25px;
    top: 155px;

    animation-delay:
        .8s;
}


.ccintro26-chip--four {

    right: 55px;
    bottom: 165px;

    animation-delay:
        2.1s;
}


@keyframes ccintro26Float {

    0%,
    100% {

        translate:
            0 0;
    }

    50% {

        translate:
            0 -10px;
    }

}


/* ============================================================
   BOTTOM FEATURE BAR
============================================================ */

.ccintro26-feature-bar {

    position: absolute;

    left: 50%;
    bottom: 28px;

    z-index: 12;

    width: calc(100% - 100px);

    max-width: 850px;

    min-height: 65px;

    padding: 10px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    transform:
        translateX(-50%);

    border:
        1px solid rgba(159,255,56,.13);

    border-radius: 17px;

    background:
        rgba(5,15,9,.80);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.04);

    backdrop-filter:
        blur(18px);
}


.ccintro26-feature {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    flex: 1;
}


.ccintro26-feature span {

    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: #aaff14;

    background:
        rgba(157,255,45,.08);

    font-size: 9px;

    font-weight: 900;
}


.ccintro26-feature strong {

    color: #dbe4df;

    font-size: 11px;

    font-weight: 800;
}


.ccintro26-feature-line {

    width: 1px;
    height: 27px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(158,255,55,.22),
            transparent
        );
}


/* ============================================================
   ARROW
============================================================ */

.ccintro26-arrow-wrap {

    max-width: 500px;

    margin: 34px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;
}


.ccintro26-arrow {

    display: block;

    width: auto;

    max-width: 70px;

    max-height: 80px;

    object-fit: contain;

    animation:
        ccintroArrowMove 2.5s ease-in-out infinite;
}


.ccintro26-arrow-line {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(161,255,57,.32)
        );
}


.ccintro26-arrow-line--right {

    background:
        linear-gradient(
            90deg,
            rgba(161,255,57,.32),
            transparent
        );
}


@keyframes ccintroArrowMove {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(8px);
    }

}


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

@media (max-width: 991px) {

    .ccintro26-section {

        padding:
            70px 0 50px;
    }


    .ccintro26-logo {

        max-width:
            420px;
    }


    .ccintro26-headline {

        font-size:
            clamp(34px, 5vw, 48px);
    }


    .ccintro26-product-stage {

        min-height:
            580px;

        padding:
            75px 25px 95px;
    }


    .ccintro26-combo {

        max-height:
            440px;
    }


    .ccintro26-chip {

        transform:
            scale(.88);
    }


    .ccintro26-chip--one {

        left:
            0;
    }


    .ccintro26-chip--three {

        right:
            0;
    }

}


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

@media (max-width: 767px) {

    .ccintro26-section {

        padding:
            55px 0 40px;
    }


    .ccintro26-top-badge {

        max-width:
            95%;

        min-height:
            40px;

        padding:
            7px 13px;

        font-size:
            8px;

        text-align:
            center;
    }


    .ccintro26-introducing {

        margin-top:
            15px;
    }


    .ccintro26-introducing strong {

        font-size:
            28px;
    }


    .ccintro26-intro-line {

        width:
            35px;
    }


    .ccintro26-logo {

        max-width:
            300px;
    }


    .ccintro26-logo-glow {

        width:
            340px;

        height:
            130px;
    }


    .ccintro26-headline {

        font-size:
            34px;

        line-height:
            1.18;
    }


    .ccintro26-gradient-text {

        display:
            block;

        margin:
            5px 0;
    }


    .ccintro26-from {

        display:
            block;

        margin-top:
            5px;
    }


    .ccintro26-divider {

        margin-bottom:
            35px;
    }


    .ccintro26-product-stage {

        min-height:
            auto;

        padding:
            65px 15px 25px;

        border-radius:
            25px;
    }


    .ccintro26-stage-label {

        max-width:
            calc(100% - 25px);

        min-height:
            40px;

        padding:
            7px 13px;

        white-space:
            normal;

        text-align:
            center;

        font-size:
            8px;
    }


    .ccintro26-combo {

        max-height:
            360px;
    }


    .ccintro26-chip {

        display:
            none;
    }


    .ccintro26-feature-bar {

        position:
            relative;

        left:
            auto;

        bottom:
            auto;

        width:
            100%;

        margin-top:
            24px;

        padding:
            12px;

        transform:
            none;

        flex-wrap:
            wrap;

        gap:
            10px;
    }


    .ccintro26-feature {

        flex:
            0 0 calc(50% - 6px);
    }


    .ccintro26-feature-line {

        display:
            none;
    }

}


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

@media (max-width: 480px) {

    .ccintro26-headline {

        font-size:
            29px;
    }


    .ccintro26-logo {

        max-width:
            250px;
    }


    .ccintro26-course-highlight {

        margin:
            5px 0;
    }


    .ccintro26-product-stage {

        padding-left:
            10px;

        padding-right:
            10px;
    }


    .ccintro26-combo {

        max-height:
            300px;
    }


    .ccintro26-feature strong {

        font-size:
            10px;
    }

}