/* ============================================================
   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:
      linear-gradient(
         180deg,
         #010503 0%,
         #020a06 48%,
         #010503 100%
      );
padding: 0 0 66px 0;
}



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

.ccaihero26-bg {

   position:
      absolute;

   inset:
      0;

   z-index:
      -10;

   background:

      radial-gradient(
         circle at 50% 48%,
         rgba(140, 255, 30, 0.09),
         transparent 32%
      ),

      radial-gradient(
         circle at 86% 30%,
         rgba(91, 255, 57, 0.07),
         transparent 27%
      ),

      radial-gradient(
         circle at 12% 70%,
         rgba(102, 255, 75, 0.035),
         transparent 24%
      ),

      linear-gradient(
         135deg,
         #010503,
         #03100a 55%,
         #010604
      );

}



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

.ccaihero26-grid {

   position:
      absolute;

   inset:
      0;

   z-index:
      -9;

   opacity:
      .46;

   background-image:

      linear-gradient(
         rgba(156, 255, 76, 0.027) 1px,
         transparent 1px
      ),

      linear-gradient(
         90deg,
         rgba(156, 255, 76, 0.027) 1px,
         transparent 1px
      );

   background-size:
      72px 72px;

   mask-image:
      linear-gradient(
         to bottom,
         black 0%,
         black 55%,
         transparent 100%
      );

   -webkit-mask-image:
      linear-gradient(
         to bottom,
         black 0%,
         black 55%,
         transparent 100%
      );
      background: #010d08  url(../images/basa-header.png) no-repeat center top;
    background-size: auto;
  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(134,255,36,.10),
         rgba(89,255,45,.025) 50%,
         transparent 72%
      );

   filter:
      blur(15px);

}


.ccaihero26-glow--two {

   width:
      600px;

   height:
      600px;

   right:
      -290px;

   top:
      130px;

   background:
      radial-gradient(
         circle,
         rgba(100,255,54,.10),
         transparent 70%
      );

   filter:
      blur(30px);

}


.ccaihero26-glow--three {

   width:
      500px;

   height:
      500px;

   left:
      -280px;

   bottom:
      -220px;

   background:
      radial-gradient(
         circle,
         rgba(174,255,25,.055),
         transparent 70%
      );

   filter:
      blur(25px);

}



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

.ccaihero26-particles {

   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:
      #aaff00;

   box-shadow:

      0 0 8px #aaff00,

      0 0 17px rgba(170,255,0,.55);

   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 {

   position:
      relative;

   z-index:
      50;

   padding-top:
      18px;

}



/* ============================================================
   NAVBAR
============================================================ */

.ccaihero26-nav {

   min-height:
      78px;

   padding:
      9px 11px 9px 21px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      space-between;

   gap:
      25px;

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

   border-radius:
      21px;

   background:
      rgba(2, 11, 7, .72);

   -webkit-backdrop-filter:
      blur(22px);

   backdrop-filter:
      blur(22px);

   box-shadow:

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

      0 15px 50px rgba(0,0,0,.18),

      0 0 45px rgba(121,255,34,.018);

}



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

.ccaihero26-logo {

   display:
      flex;

   align-items:
      center;

   flex-shrink:
      0;

   text-decoration:
      none;

}


.ccaihero26-logo img {

   display:
      block;

   width:
      auto;

   height:
      auto;

   max-width:
      235px;

   max-height:
      56px;

   object-fit:
      contain;

}



/* ============================================================
   NAV LINKS
============================================================ */

.ccaihero26-nav-links {

   display:
      flex;

   align-items:
      center;

   gap:
      42px;

}


.ccaihero26-nav-links a {

   position:
      relative;

   padding:
      10px 0;

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

   text-decoration:
      none;

   font-size:
      14px;

   font-weight:
      600;

   transition:
      color .3s ease;

}


.ccaihero26-nav-links a::after {

   content:
      "";

   position:
      absolute;

   left:
      50%;

   bottom:
      3px;

   width:
      0;

   height:
      2px;

   border-radius:
      20px;

   background:
      #aaff00;

   transform:
      translateX(-50%);

   transition:
      width .3s ease;

}


.ccaihero26-nav-links a:hover {

   color:
      #ffffff;

}


.ccaihero26-nav-links a:hover::after {

   width:
      22px;

}



/* ============================================================
   NAV BUTTON
============================================================ */

.ccaihero26-nav-btn {

   min-height:
      52px;

   padding:
      0 20px;

   display:
      inline-flex;

   align-items:
      center;

   justify-content:
      center;

   gap:
      10px;

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

   border-radius:
      14px;

   color:
      #071100;

   text-decoration:
      none;

   background:
      linear-gradient(
         135deg,
         #d8ff35 0%,
         #9cff00 100%
      );

   font-size:
      14px;

   font-weight:
      900;

   box-shadow:

      0 7px 25px rgba(138,255,0,.15),

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

   transition:
      .3s ease;

}


.ccaihero26-nav-btn i {

   font-size:
      18px;

   font-style:
      normal;

   transition:
      transform .3s ease;

}


.ccaihero26-nav-btn:hover {

   color:
      #071100;

   transform:
      translateY(-2px);

   box-shadow:

      0 12px 35px rgba(138,255,0,.26),

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

}


.ccaihero26-nav-btn:hover i {

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

}



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

.ccaihero26-main-container {

   position:
      relative;

   z-index:
      10;

   flex:
      1;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

   padding-top:
      60px;

   padding-bottom:
      80px;

}



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

.ccaihero26-main {

   position:
      relative;

   width:
      100%;

   max-width:
      1220px;

   margin:
      0 auto;

   text-align:
      center;

}



/* ============================================================
   JV INVITE BADGE
============================================================ */

.ccaihero26-launch {
position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 27px;
  padding: 9px 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(169,255,53,.25);
  border-radius: 100px;
  color: #c5cec9;
  background: linear-gradient( 90deg, rgba(143,255,31,.09), rgba(255,255,255,.018) );
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 35px rgba(139,255,23,.035);
  font-size: 18px;
  font-weight: 600;

}


.ccaihero26-launch::before {

   content:
      "";

   position:
      absolute;

   inset:
      -1px;

   border-radius:
      inherit;

   pointer-events:
      none;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(168,255,0,.08),
         transparent
      );

}


.ccaihero26-launch-live {

   display:
      inline-flex;

   align-items:
      center;

   gap:
      7px;

}


.ccaihero26-launch-dot {

   width:
      7px;

   height:
      7px;

   flex-shrink:
      0;

   border-radius:
      50%;

   background:
      #aaff00;

   box-shadow:

      0 0 0 5px rgba(170,255,0,.06),

      0 0 13px rgba(170,255,0,.8);

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

}


@keyframes ccaiPulseDot {

   0%,
   100% {

      box-shadow:

         0 0 0 4px rgba(170,255,0,.05),

         0 0 12px rgba(170,255,0,.65);

   }

   50% {

      box-shadow:

         0 0 0 7px rgba(170,255,0,.02),

         0 0 20px rgba(170,255,0,1);

   }

}


.ccaihero26-launch-label {

   color:
      #b9ff27;

   font-weight:
      900;

}


.ccaihero26-launch-separator {

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

}



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

.ccaihero26-prehead {

margin: 0 0 20px;
  color: rgba(255,255,255,.91);
  font-size: clamp(20px, 3.45vw, 29px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -.025em;

}


.ccaihero26-prehead span {

   color:
      #baff24;

   font-weight:
      900;

}



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

.ccaihero26-title {

   max-width:
      1180px;

   margin:
      0 auto;

   color:
      #ffffff;
font-size: clamp(48px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -3;
  font-weight: 900;

}


.ccaihero26-title-line {

   display:
      block;

}


.ccaihero26-highlight {
position: relative;
  display: inline-block;
  margin: 5px 0 5px 0;
  padding: 0px 10px 5px;
  border-radius: 12px;
  color: #061000;
  background: linear-gradient( 110deg, #d9ff37 0%, #adff12 52%, #88fa00 100% );
  box-shadow: 0 9px 35px rgba(146,255,0,.09), inset 0 1px rgba(255,255,255,.4);
  transform: rotate(-.4deg);

}


.ccaihero26-title-platform {

   margin-top:
      4px;

   color:
      transparent;

   background:
      linear-gradient(
         90deg,
         #cbff32 0%,
         #9dff18 35%,
         #6eff63 68%,
         #61ffc1 100%
      );

   background-clip:
      text;

   -webkit-background-clip:
      text;

   -webkit-text-fill-color:
      transparent;

}


.ccaihero26-title-last {

   margin-top:
      7px;

   color:
      #ffffff;

}



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

.ccaihero26-description {

max-width: 920px;

   margin:
      31px auto 0;

   color:
      #a8b6ae;

   font-size:
      18px;

   line-height:
      1.72;

   font-weight:
      400;

}


.ccaihero26-description strong {

   color:
      #ffffff;

   font-weight:
      800;

}



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

.ccaihero26-cta {

   margin-top:
      34px;

   display:
      flex;

   align-items:
      center;

   justify-content:
      center;

}



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

.ccaihero26-primary-btn {
position: relative;
  min-width: 534px;
  min-height: 68px;
  padding: 7px 8px 7px 27px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  color: #061000;
  text-decoration: none;
  background: linear-gradient( 115deg, #ddff3b 0%, #a5ff0b 50%, #82f900 100% );
  font-size: 40px;
  font-weight: 900;
  box-shadow: 0 16px 44px rgba(130,255,0,.18), 0 0 0 6px rgba(147,255,18,.035), inset 0 1px rgba(255,255,255,.7);
  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,.75),
         transparent
      );

   transform:
      rotate(24deg);

   transition:
      left .65s ease;

      

}


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

   left:
      120%;

}


.ccaihero26-primary-btn:hover {

   color:
      #061000;

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

   box-shadow:

      0 23px 60px rgba(130,255,0,.27),

      0 0 0 7px rgba(147,255,18,.045),

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

}



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

.ccaihero26-btn-icon {

   width:
      52px;

   height:
      52px;

   flex-shrink:
      0;

   display:
      grid;

   place-items:
      center;

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

   border-radius:
      14px;

   color:
      #baff26;

   background:
      #061006;

   font-size:
      23px;

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

   transition:
      .3s ease;

}


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

   transform:
      rotate(7deg);

}



/* ============================================================
   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(167,255,45,.55)
      );

}


.ccaihero26-bottom-line:last-child {

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

}


.ccaihero26-bottom-star {

   color:
      #aaff00;

   font-size:
      16px;

   text-shadow:
      0 0 14px rgba(170,255,0,.8);

   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(255,255,255,.055);

   border-radius:
      100px;

   color:
      #7e8e84;

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

   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:
      #aaff00;

   background:
      rgba(170,255,0,.07);

   font-size:
      10px;

   font-weight:
      900;

}



/* ============================================================
   BOTTOM EDGE LIGHT
============================================================ */

.ccaihero26-edge-light {

   position:
      absolute;

   left:
      50%;

   bottom:
      0;

   z-index:
      3;

   width:
      72%;

   max-width:
      1150px;

   height:
      1px;

   transform:
      translateX(-50%);

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

   box-shadow:
      0 -8px 40px rgba(140,255,17,.09);

}



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

.ccaihero26-launch,
.ccaihero26-prehead,
.ccaihero26-title,
.ccaihero26-description,
.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-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-nav-links {

      gap:
         28px;

   }


   .ccaihero26-title {

      font-size:
         clamp(48px, 5.5vw, 70px);

   }

}



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

@media (max-width: 991px) {

   .ccaihero26-nav-links {

      display:
         none;

   }


   .ccaihero26-main-container {

      padding-top:
         75px;

      padding-bottom:
         75px;

   }


   .ccaihero26-main {

      max-width:
         800px;

   }


   .ccaihero26-title {

      font-size:
         clamp(43px, 7.5vw, 65px);

   }


   .ccaihero26-description {

      max-width:
         730px;

   }

}



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

@media (max-width: 767px) {

   .ccaihero26 {

      min-height:
         auto;

   }


   .ccaihero26-container {

      padding-left:
         13px;

      padding-right:
         13px;

   }


   .ccaihero26-nav-wrap {

      padding-top:
         10px;

   }


   .ccaihero26-nav {

      min-height:
         68px;

      padding:
         8px 9px 8px 13px;

      border-radius:
         17px;

   }


   .ccaihero26-logo img {

      max-width:
         180px;

      max-height:
         44px;

   }


   .ccaihero26-nav-btn {

      min-width:
         45px;

      min-height:
         45px;

      padding:
         0;

   }


   .ccaihero26-nav-btn span {

      display:
         none;

   }


   .ccaihero26-nav-btn i {

      font-size:
         18px;

   }


   .ccaihero26-main-container {

      padding-top:
         58px;

      padding-bottom:
         65px;

   }


   .ccaihero26-launch {

      margin-bottom:
         23px;

      padding:
         8px 12px;

      gap:
         6px;

      font-size:
         11px;

   }


   .ccaihero26-prehead {

      margin-bottom:
         16px;

      font-size:
         17px;

   }


   .ccaihero26-title {

      font-size:
         clamp(37px, 10vw, 52px);

      line-height:
         1.05;

   }


   .ccaihero26-highlight {

      padding:
         3px 8px 6px;

      border-radius:
         9px;

   }


   .ccaihero26-title-platform {

      margin-top:
         7px;

   }


   .ccaihero26-title-last {

      margin-top:
         8px;

   }


   .ccaihero26-description {

      margin-top:
         25px;

      padding:
         0 8px;

      font-size:
         16px;

      line-height:
         1.65;

   }


   .ccaihero26-cta {

      margin-top:
         28px;

   }


   .ccaihero26-primary-btn {

      width:
         100%;

      max-width:
         370px;

      min-width:
         0;

      min-height:
         64px;

      padding-left:
         22px;

      font-size:
         15px;

   }


   .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-logo img {

      max-width:
         155px;

   }


   .ccaihero26-main-container {

      padding-top:
         48px;

   }


   .ccaihero26-launch {

      flex-wrap:
         wrap;

      line-height:
         1.4;

   }


   .ccaihero26-launch-separator {

      display:
         none;

   }


   .ccaihero26-launch-date {

      width:
         100%;

   }


   .ccaihero26-title {

    font-size: 30px;
letter-spacing: -1px;
   }


   .ccaihero26-description {

      font-size:
         15px;

   }


   .ccaihero26-primary-btn {

      max-width:
         330px;

   }


   .ccaihero26-bottom-pills {

      max-width:
         330px;

      margin-left:
         auto;

      margin-right:
         auto;

   }

}



/* ============================================================
   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;

   }

}
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;
}

/* ============================================================
   CREATORCLAW AI — JV LAUNCH CARDS
   WHITE PREMIUM THEME
============================================================ */

.ccjv26-launch-section {

   --ccjv26-green: #8ee600;
   --ccjv26-green-2: #b7ff17;
   --ccjv26-green-3: #54c900;
   --ccjv26-dark: #0b1608;
   --ccjv26-muted: #788272;

   position: relative;

   /* overflow: hidden; */

   /* padding: 90px 0 100px; */
padding: 42px 0 100px 0;
   background:
      radial-gradient(
         circle at 50% 10%,
         rgba(162, 235, 35, .12),
         transparent 31%
      ),
      radial-gradient(
         circle at 8% 80%,
         rgb(255, 255, 255),
         transparent 25%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #f9fcf5 50%,
         #ffffff 100%
      );

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

   isolation: isolate;

}



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

.ccjv26-bg-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   opacity: .52;

   background-image:

      linear-gradient(
         rgba(74, 125, 20, .035) 1px,
         transparent 1px
      ),

      linear-gradient(
         90deg,
         rgba(74, 125, 20, .035) 1px,
         transparent 1px
      );

   background-size:
      64px 64px;

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

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

}



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

.ccjv26-bg-glow {

   position: absolute;

   z-index: -4;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(20px);

}


.ccjv26-bg-glow--left {

   width: 500px;

   height: 500px;

   left: -270px;

   top: 130px;

   background:
      radial-gradient(
         circle,
         rgba(141, 222, 28, .12),
         transparent 70%
      );

}


.ccjv26-bg-glow--right {

   width: 600px;

   height: 600px;

   right: -330px;

   bottom: -220px;

   background:
      radial-gradient(
         circle,
         rgba(83, 196, 62, .09),
         transparent 70%
      );

}



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

.ccjv26-heading {

   max-width: 900px;

   margin: 0 auto 48px;

   text-align: center;

}


.ccjv26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 9px;

   margin-bottom: 13px;

   color: #65a800;

   font-size: 12px;

   font-weight: 900;

   letter-spacing: .16em;

}


.ccjv26-eyebrow-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #95e900;

   box-shadow:
      0 0 10px rgba(132, 220, 0, .35);

}


.ccjv26-eyebrow-line {

   width: 44px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(111, 184, 0, .65)
      );

}


.ccjv26-eyebrow-line--right {

   background:
      linear-gradient(
         90deg,
         rgba(111, 184, 0, .65),
         transparent
      );

}


.ccjv26-heading h2 {
margin: 0;
  color: #11190e;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 900;

}


.ccjv26-heading h2 span {

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #79c900 0%,
         #9ae600 47%,
         #34a84d 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}


.ccjv26-heading p {

   margin: 16px 0 0;

   color: #788274;

   font-size: 17px;

   line-height: 1.6;

}



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

.ccjv26-card-row {

   position: relative;

   z-index: 5;

}


.ccjv26-card {
position: relative;
  height: 100%;
  min-height: 461px;
  overflow: hidden;
  padding: 25px 30px 25px;
   border:
      1px solid rgba(81, 129, 28, .13);

   border-radius: 29px;

   text-align: center;

   background:
      linear-gradient(
         145deg,
         rgba(255,255,255,.99),
         rgba(247,251,243,.98)
      );

   box-shadow:
      0 25px 65px rgba(27, 57, 8, .09),
      inset 0 1px rgba(255,255,255,1);

   transform-style: preserve-3d;

   transition:
      transform .35s cubic-bezier(.2,.8,.2,1),
      border-color .35s ease,
      box-shadow .35s ease;

}


.ccjv26-card::after {

   content: "";

   position: absolute;

   inset: 0;

   pointer-events: none;

   border-radius: inherit;

   background:
      linear-gradient(
         130deg,
         rgba(255,255,255,.8),
         transparent 35%
      );

   opacity: .4;

}


.ccjv26-card:hover {

   border-color:
      rgba(117, 185, 16, .30);

   box-shadow:
      0 35px 85px rgba(26, 55, 8, .14),
      0 0 50px rgba(126, 212, 9, .075);

}



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

.ccjv26-card-glow {

   position: absolute;

   width: 300px;

   height: 260px;

   top: -165px;

   left: 50%;

   transform: translateX(-50%);

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(164, 237, 42, .20),
         transparent 69%
      );

   pointer-events: none;

}


.ccjv26-card-top-light {

   position: absolute;

   top: 0;

   left: 17%;

   right: 17%;

   height: 2px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(144, 222, 24, .9),
         transparent
      );

   box-shadow:
      0 3px 22px rgba(135, 218, 11, .18);

}



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

.ccjv26-card-badge {

   position: relative;

   z-index: 3;

   width: fit-content;

   margin: 0 auto 27px;

   padding: 8px 13px;

   display: inline-flex;

   align-items: center;

   justify-content: center;

   gap: 7px;

   border:
      1px solid rgba(111, 170, 25, .18);

   border-radius: 100px;

   color: #53614d;

   background:
      rgba(144, 216, 39, .075);

   font-size: 10px;

   font-weight: 900;

   letter-spacing: .11em;

}


.ccjv26-card-badge > span {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #8bdb00;

   box-shadow:
      0 0 9px rgba(125, 207, 0, .45);

}



/* ============================================================
   DATE CARD ICON
============================================================ */

.ccjv26-icon-shell {

   display: flex;

   justify-content: center;

   margin-bottom: 17px;

}


.ccjv26-icon {

   width: 57px;

   height: 57px;

   display: grid;

   place-items: center;

   border:
      1px solid rgba(102, 168, 13, .16);

   border-radius: 17px;

   color: #122000;

   background:
      linear-gradient(
         135deg,
         #d9ff4c 0%,
         #a5ef12 45%,
         #79d800 100%
      );

   box-shadow:
      0 12px 28px rgba(100, 171, 0, .15),
      inset 0 1px rgba(255,255,255,.85);

   font-size: 23px;

   font-weight: 900;

}



/* ============================================================
   DAY
============================================================ */

.ccjv26-day {

   margin-bottom: 5px;

   color: #808c7a;

   font-size: 12px;

   font-weight: 800;

   letter-spacing: .15em;

}



/* ============================================================
   DATE
============================================================ */

.ccjv26-date-wrap {

   position: relative;

   display: inline-flex;

   align-items: flex-start;

   justify-content: center;

   margin-top: 2px;

}


.ccjv26-date {

   color: transparent;

   background:
      linear-gradient(
         180deg,
         #172111 0%,
         #6ebe00 38%,
         #8cdd00 67%,
         #33983f 100%
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

   font-size: 93px;

   line-height: .92;

letter-spacing: -4px;

   font-weight: 900;

   filter:
      drop-shadow(
         0 8px 16px rgba(78, 131, 0, .08)
      );

}


.ccjv26-date-wrap sup {

   margin:
      7px 0 0 5px;

   color: #75bd00;

   font-size: 18px;

   line-height: 1;

   font-weight: 900;

}



/* ============================================================
   MONTH
============================================================ */

.ccjv26-month {

   margin-top: 14px;

   color: #172012;

   font-size: 18px;

   font-weight: 900;

}



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

.ccjv26-divider {

   width: 76%;

   margin: 26px auto 21px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 9px;

}


.ccjv26-divider span {

   height: 1px;

   flex: 1;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(104, 160, 31, .28)
      );

}


.ccjv26-divider span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(104, 160, 31, .28),
         transparent
      );

}


.ccjv26-divider i {

   color: #7fc900;

   font-size: 10px;

   font-style: normal;

}



/* ============================================================
   TIME
============================================================ */

.ccjv26-time-box {

   width: fit-content;

   margin: 0 auto;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 11px;

}


.ccjv26-time-icon {

   width: 40px;

   height: 40px;

   display: grid;

   place-items: center;

   border:
      1px solid rgba(110, 166, 29, .14);

   border-radius: 12px;

   color: #6fb700;

   background:
      rgba(133, 202, 30, .06);

   font-size: 19px;

}


.ccjv26-time-content {

   text-align: left;

}


.ccjv26-time-content small {

   display: block;

   color: #919b8c;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .14em;

}


.ccjv26-time-content strong {

   display: block;

   margin-top: 3px;

   color: #1a2415;

   font-size: 13px;

   font-weight: 900;

}



/* ============================================================
   DATE CARD BOTTOM
============================================================ */

.ccjv26-card-bottom {

   position: absolute;

   left: 25px;

   right: 25px;

   bottom: 20px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 8px;

   color: #a1aa9d;

   font-size: 7px;

   font-weight: 800;

   letter-spacing: .15em;

}


.ccjv26-card-bottom span {

   width: 27px;

   height: 1px;

   background:
      rgba(112, 154, 70, .15);

}



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

.ccjv26-card--affiliate {

   border-color:
      rgba(103, 167, 17, .25);

   background:
      radial-gradient(
         circle at 50% 12%,
         rgba(169, 238, 51, .14),
         transparent 34%
      ),
      linear-gradient(
         145deg,
         #ffffff 0%,
         #f7fbf2 100%
      );

   box-shadow:
      0 30px 80px rgba(27, 62, 7, .12),
      0 0 50px rgba(131, 215, 12, .055);

}



/* ============================================================
   JV ACCESS LABEL
============================================================ */

.ccjv26-featured {

   position: absolute;

   top: 17px;

   right: 17px;

   z-index: 5;

   padding: 6px 9px;

   border:
      1px solid rgba(114, 173, 19, .12);

   border-radius: 8px;

   color: #1b3000;

   background:
      linear-gradient(
         135deg,
         #d8ff44,
         #98e500
      );

   box-shadow:
      0 6px 18px rgba(114, 183, 0, .12);

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .08em;

}



/* ============================================================
   AFFILIATE HEAD
============================================================ */

.ccjv26-affiliate-head {

   position: relative;

   z-index: 3;

   margin-top: 5px;

}


.ccjv26-affiliate-head small {

   display: block;

   margin-bottom: 5px;

   color: #8b9586;

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .14em;

}


.ccjv26-affiliate-head h3 {

   margin: 0;

   color: #172011;

   font-size: 28px;

   line-height: 1.12;

   font-weight: 700;

   letter-spacing: -.035em;

}


.ccjv26-affiliate-head h3 span {

   display: block;

   margin-top: 2px;

   color: transparent;

   background:
      linear-gradient(
         90deg,
         #6db900,
         #93dd00,
         #38a147
      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

   font-size: 35px;

   font-weight: 900;

}



/* ============================================================
   LAUNCHPAD
============================================================ */

.ccjv26-launchpad-box {
position: relative;
  z-index: 3;
  max-width: 285px;
  margin: 15px auto 0;
  padding: 15px 18px 12px;
  border: 1px solid rgba(55, 89, 35, .08);
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 13px 32px rgba(24, 50, 9, .07), inset 0 1px rgba(255,255,255,.9);

}


.ccjv26-launchpad-label {

   margin-bottom: 10px;

   color: #9aa394;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .14em;

}


.ccjv26-launchpad-logo {

   display: block;

   width: auto;

   max-width: 185px;

   max-height: 62px;

   margin: 0 auto;

   object-fit: contain;

}



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

.ccjv26-affiliate-copy {

   max-width: 300px;

   margin: 19px auto 0;

   color: #758071;

   font-size: 13px;

   line-height: 1.65;

}



/* ============================================================
   AFFILIATE BUTTON
============================================================ */

.ccjv26-affiliate-btn {

   position: relative;

   z-index: 4;

   width: 100%;

   min-height: 60px;

   margin-top: 23px;

   padding:
      7px 7px 7px 21px;

   overflow: hidden;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 15px;

   border:
      1px solid rgba(91, 147, 6, .25);

   border-radius: 15px;

   color: #142300;

   text-decoration: none;

   background:
      linear-gradient(
         110deg,
         #dbff48 0%,
         #b5f91d 47%,
         #84db00 100%
      );

   box-shadow:
      0 13px 35px rgba(107, 178, 0, .18),
      inset 0 1px rgba(255,255,255,.8);

   font-size: 14px;

   font-weight: 900;

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

}


.ccjv26-affiliate-btn::before {

   content: "";

   position: absolute;

   top: -60%;

   left: -100px;

   width: 55px;

   height: 220%;

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

   transform: rotate(24deg);

   transition:
      left .65s ease;

}


.ccjv26-affiliate-btn:hover {

   color: #142300;

   transform:
      translateY(-3px);

   box-shadow:
      0 19px 45px rgba(107, 178, 0, .26);

}


.ccjv26-affiliate-btn:hover::before {

   left: 120%;

}


.ccjv26-affiliate-btn i {

   width: 45px;

   height: 45px;

   display: grid;

   place-items: center;

   flex-shrink: 0;

   border-radius: 11px;

   color: #baff24;

   background:
      #102006;

   font-size: 19px;

   font-style: normal;

   transition:
      transform .3s ease;

}


.ccjv26-affiliate-btn:hover i {

   transform:
      rotate(7deg);

}



/* ============================================================
   INSTANT ACCESS
============================================================ */

.ccjv26-instant {

   position: relative;

   z-index: 3;

   margin-top: 14px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 6px;

   color: #818b7c;

   font-size: 10px;

   font-weight: 700;

}


.ccjv26-instant span {

   width: 17px;

   height: 17px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   color: #579c00;

   background:
      rgba(122, 199, 14, .10);

   font-size: 9px;

   font-weight: 900;

}



/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 991px) {

   .ccjv26-launch-section {

      padding:
         75px 0 80px;

   }


   .ccjv26-heading {

      margin-bottom:
         38px;

   }


   .ccjv26-card {

      min-height:
         465px;

   }


   .ccjv26-card--affiliate {

      max-width:
         540px;

      margin:
         0 auto;

   }

}



/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 767px) {

   .ccjv26-launch-section {

      padding:
         60px 0 65px;

   }


   .ccjv26-heading {

      margin-bottom:
         32px;

   }


   .ccjv26-eyebrow {

      font-size:
         10px;

   }


   .ccjv26-heading h2 {

      font-size:
         35px;

   }


   .ccjv26-heading h2 span {

      display:
         block;

   }


   .ccjv26-heading p {

      font-size:
         15px;

   }


   .ccjv26-card {

      min-height:
         auto;

      padding:
         31px 22px 29px;

      border-radius:
         23px;

   }


   .ccjv26-date {

      font-size:
         80px;

   }


   .ccjv26-card-bottom {

      position:
         static;

      margin-top:
         27px;

   }


   .ccjv26-affiliate-head h3 {

      font-size:
         25px;

   }


   .ccjv26-affiliate-head h3 span {

      font-size:
         31px;

   }


   .ccjv26-featured {

      position:
         static;

      width:
         fit-content;

      margin:
         0 auto 15px;

   }

}



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

@media (max-width: 480px) {

   .ccjv26-heading h2 {

      font-size:
         31px;

   }


   .ccjv26-card {

      padding-left:
         18px;

      padding-right:
         18px;

   }


   .ccjv26-affiliate-btn {

      font-size:
         13px;

   }

}


.ccjv26-card-row{
margin-top: -200px !important;
}


/* ==========================================================
   CREATORCLAW AI — WHY THIS CONVERTS SECTION
========================================================== */

.ccconv26-section * {
   box-sizing: border-box;
}

.ccconv26-section {
   position: relative;
   overflow: hidden;
   padding: 90px 0 100px;
   background:
      linear-gradient(180deg, #ffffff 0%, #fbfdf8 45%, #ffffff 100%);
   font-family: "Inter", Arial, sans-serif;
   font-size: 18px;
   color: #101510;
   isolation: isolate;
}


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

.ccconv26-grid {
   position: absolute;
   inset: 0;
   z-index: -4;
   opacity: .45;
   background-image:
      linear-gradient(rgba(104, 160, 26, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(104, 160, 26, 0.035) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
   -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.ccconv26-bg-shape {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(25px);
   z-index: -3;
}

.ccconv26-bg-shape--one {
width: 520px;
  height: 520px;
  left: -363px;
  top: 15px;
  background: radial-gradient(circle, rgba(160, 235, 35, 0.11), transparent 70%);
}

.ccconv26-bg-shape--two {
   width: 600px;
   height: 600px;
   right: -260px;
   bottom: -140px;
   background: radial-gradient(circle, rgba(74, 200, 65, 0.08), transparent 72%);
}


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

.ccconv26-heading {
   max-width: 920px;
   margin: 0 auto 36px;
}

.ccconv26-eyebrow {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 14px;
   color: #74b800;
   font-size: 12px;
   font-weight: 900;
   letter-spacing: .18em;
}

.ccconv26-eyebrow-line {
   width: 46px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(115, 184, 0, .7));
}

.ccconv26-eyebrow-line:last-child {
   background: linear-gradient(90deg, rgba(115, 184, 0, .7), transparent);
}

.ccconv26-eyebrow-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #99e500;
   box-shadow: 0 0 10px rgba(136, 214, 17, .35);
}

.ccconv26-title {
   margin: 0;
   color: #10170d;
   font-size: clamp(34px, 3.6vw, 58px);
   line-height: 1.08;
   letter-spacing: -.04em;
   font-weight: 900;
}

.ccconv26-title span {
   color: transparent;
   background: linear-gradient(90deg, #73bf00 0%, #96e600 45%, #39b152 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.ccconv26-subtitle {
   max-width: 770px;
   margin: 18px auto 0;
   color: #768171;
   line-height: 1.7;
}


/* ==========================================================
   MAIN HERO WRAP
========================================================== */

.ccconv26-hero-wrap {
   position: relative;
   padding-top: 40px;
}

.ccconv26-visual-shell {
   position: relative;
   /* max-width: 760px; */
   margin: 0 auto;
   padding: 10px 20px 0;
   text-align: center;
   z-index: 3;
}

.ccconv26-main-image {
   position: relative;
   z-index: 3;
   max-width: 100%;
   /* max-height: 480px; */
   object-fit: contain;
}

.ccconv26-visual-glow {
   position: absolute;
   left: 50%;
   top: 48%;
   width: 520px;
   height: 300px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: radial-gradient(ellipse, rgba(182, 234, 37, .28), rgba(128, 220, 35, .08) 48%, transparent 72%);
   filter: blur(18px);
   z-index: 1;
}

.ccconv26-rays {
   position: absolute;
   left: 50%;
   top: 46%;
   width: 500px;
   height: 500px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background:
      repeating-conic-gradient(
         from 0deg,
         rgba(180, 230, 65, .18) 0deg 10deg,
         rgba(255,255,255,0) 10deg 20deg
      );
   mask-image: radial-gradient(circle, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 48%, transparent 72%);
   -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 48%, transparent 72%);
   z-index: 0;
   opacity: .7;
}


/* ==========================================================
   FLOATING TAGS
========================================================== */

.ccconv26-float-tag {
   position: absolute;
   z-index: 5;
   padding: 10px 16px;
   border: 1px solid rgba(105, 165, 22, .16);
   border-radius: 14px;
   background: rgba(255,255,255,.92);
   box-shadow: 0 14px 28px rgba(34, 61, 16, .08);
   color: #43523f;
   font-size: 14px;
   font-weight: 700;
   line-height: 1.2;
   transform: rotate(-4deg);
}

.ccconv26-float-tag--one {
   top: 80px;
   left: 10%;
}

.ccconv26-float-tag--two {
   top: 110px;
   right: 10%;
   transform: rotate(5deg);
}

.ccconv26-float-tag--three {
   top: 255px;
   left: 7%;
   transform: rotate(3deg);
}

.ccconv26-float-tag--four {
   top: 285px;
   right: 8%;
   transform: rotate(-5deg);
}


/* ==========================================================
   BOARD
========================================================== */

.ccconv26-board {
   position: relative;
   margin-top: -34px;
   padding: 70px 26px 30px;
   border: 1.5px solid rgba(103, 160, 23, .22);
   border-radius: 34px;
   background:
      linear-gradient(145deg, #d9ff31 0%, #c8f814 45%, #b7ef00 100%);
   box-shadow:
      0 30px 70px rgba(44, 78, 12, .12),
      inset 0 1px rgba(255,255,255,.42);
   z-index: 2;
}

.ccconv26-board::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   border: 2px dashed rgba(17, 24, 11, .28);
   pointer-events: none;
   opacity: .45;
}

.ccconv26-board-title-wrap {
   position: absolute;
   left: 50%;
   top: 0;
   transform: translate(-50%, -50%);
   z-index: 4;
}

.ccconv26-board-title {
   min-height: 58px;
   padding: 0 26px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 100px;
   background: #0a0e08;
   color: #ffffff;
   box-shadow:
      0 14px 30px rgba(0,0,0,.18),
      0 0 0 5px rgba(255,255,255,.3);
   font-size: clamp(18px, 1.8vw, 28px);
   font-weight: 900;
   line-height: 1.1;
   text-align: center;
   letter-spacing: -.02em;
}


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

.ccconv26-card {
   height: 100%;
   min-height: 170px;
   padding: 20px 18px 18px;
   border: 1px solid rgba(14, 22, 9, .12);
   border-radius: 22px;
   background: rgba(255,255,255,.72);
   box-shadow:
      0 12px 26px rgba(27, 51, 10, .08),
      inset 0 1px rgba(255,255,255,.65);
   backdrop-filter: blur(8px);
   transition: transform .3s ease, box-shadow .3s ease;
}

.ccconv26-card:hover {
   transform: translateY(-6px);
   box-shadow:
      0 18px 32px rgba(27, 51, 10, .13),
      inset 0 1px rgba(255,255,255,.7);
}

.ccconv26-card-icon {
   width: 42px;
   height: 42px;
   margin-bottom: 14px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: linear-gradient(135deg, #0d1309 0%, #1a2513 100%);
   color: #c9ff30;
   box-shadow: inset 0 1px rgba(255,255,255,.06);
   font-size: 14px;
   font-weight: 900;
   letter-spacing: .06em;
}

.ccconv26-card h3 {
   margin: 0 0 10px;
   color: #121810;
   font-size: 20px;
   line-height: 1.25;
   font-weight: 800;
   letter-spacing: -.02em;
}

.ccconv26-card p {
   margin: 0;
   color: #2f372b;
   font-size: 15px;
   line-height: 1.65;
}


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

@media (max-width: 1199px) {

   .ccconv26-float-tag--one {
      left: 3%;
   }

   .ccconv26-float-tag--two {
      right: 3%;
   }

   .ccconv26-float-tag--three {
      left: 1%;
   }

   .ccconv26-float-tag--four {
      right: 1%;
   }
}

@media (max-width: 991px) {

   .ccconv26-section {
      padding: 75px 0 80px;
   }

   .ccconv26-hero-wrap {
      padding-top: 20px;
   }

   .ccconv26-float-tag {
      display: none;
   }

   .ccconv26-board {
      margin-top: -10px;
      padding-top: 64px;
   }

   .ccconv26-main-image {
      max-height: 400px;
   }
}

@media (max-width: 767px) {

   .ccconv26-section {
      padding: 60px 0 65px;
   }

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

   .ccconv26-subtitle {
      font-size: 16px;
   }

   .ccconv26-visual-shell {
      padding-left: 0;
      padding-right: 0;
   }

   .ccconv26-main-image {
      max-height: 320px;
   }

   .ccconv26-rays {
      width: 360px;
      height: 360px;
   }

   .ccconv26-visual-glow {
      width: 360px;
      height: 220px;
   }

   .ccconv26-board {
      border-radius: 26px;
      padding: 62px 18px 18px;
   }

   .ccconv26-board-title {
      min-height: 52px;
      padding: 0 18px;
      font-size: 18px;
   }

   .ccconv26-card {
      min-height: auto;
      padding: 18px 16px 16px;
      border-radius: 18px;
   }

   .ccconv26-card h3 {
      font-size: 18px;
   }

   .ccconv26-card p {
      font-size: 14px;
   }
}

@media (max-width: 480px) {

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

   .ccconv26-eyebrow {
      font-size: 10px;
      gap: 7px;
   }

   .ccconv26-eyebrow-line {
      width: 26px;
   }

   .ccconv26-subtitle {
      font-size: 15px;
   }

   .ccconv26-board-title {
      width: calc(100% - 26px);
      padding: 10px 14px;
   }
}

/* ============================================================
   CREATORCLAW AI — SOFTWARE WORKFLOW
============================================================ */

.ccflow26-section {

   --ccflow-green: #92e400;
   --ccflow-green-light: #caff37;
   --ccflow-green-soft: #edfbd7;
   --ccflow-dark: #11180d;
   --ccflow-text: #687164;

   position: relative;

   overflow: hidden;

   padding: 95px 0 105px;

   background:
      radial-gradient(
         circle at 50% 0%,
         rgba(162, 234, 37, .12),
         transparent 30%
      ),
      linear-gradient(
         180deg,
         #ffffff 0%,
         #fbfdf8 50%,
         #ffffff 100%
      );

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

   font-size: 18px;

   color: var(--ccflow-dark);

   isolation: isolate;

}


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

   box-sizing: border-box;

}



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

.ccflow26-grid {

   position: absolute;

   inset: 0;

   z-index: -5;

   /* opacity: .5; */

   background-image:
      linear-gradient(
         rgba(83, 132, 23, .03) 1px,
         transparent 1px
      ),
      linear-gradient(
         90deg,
         rgba(83, 132, 23, .03) 1px,
         transparent 1px
      );

   background-size: 65px 65px;

   /* -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: #010d08 url(../images/ccflow26-section.png) no-repeat center top;
    background-size: auto;
  background-size: auto;
  background-size: cover;

}


.ccflow26-glow {

   position: absolute;

   z-index: -4;

   border-radius: 50%;

   pointer-events: none;

   filter: blur(30px);

}


.ccflow26-glow--left {

   width: 550px;

   height: 550px;

   left: -330px;

   top: 230px;

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

}


.ccflow26-glow--right {

   width: 600px;

   height: 600px;

   right: -360px;

   bottom: 120px;

   background:
      radial-gradient(
         circle,
         rgba(76, 194, 78, .10),
         transparent 70%
      );

}



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

.ccflow26-heading {

   max-width: 880px;

   margin: 0 auto 55px;

   text-align: center;

}


.ccflow26-eyebrow {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 11px;

   margin-bottom: 14px;

   color: #6bad00;

   font-size: 12px;

   font-weight: 900;

   letter-spacing: .18em;

}


.ccflow26-eyebrow span {

   width: 50px;

   height: 1px;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(116, 185, 0, .65)
      );

}


.ccflow26-eyebrow span:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(116, 185, 0, .65),
         transparent
      );

}


.ccflow26-heading h2 {

   margin: 0;

color: #fff;

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

   line-height: 1.05;

   letter-spacing: -.05em;

   font-weight: 900;

}


.ccflow26-heading h2 strong {

   display: block;

   margin-top: 3px;

   color: transparent;

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

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}


.ccflow26-heading p {

   margin: 17px 0 0;

   color: #717b6d;

   font-size: 18px;

   line-height: 1.65;

}



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

.ccflow26-workflow {

   position: relative;

   padding: 65px 38px 35px;

   border:
      1px solid rgba(82, 128, 28, .13);

   border-radius: 36px;

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

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

}


.ccflow26-workflow::before {

   content: "";

   position: absolute;

   left: 78px;

   top: 110px;

   bottom: 230px;

   width: 2px;

   background:
      linear-gradient(
         to bottom,
         rgba(143,219,23,.12),
         rgba(143,219,23,.65),
         rgba(143,219,23,.12)
      );

   z-index: 0;

}



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

.ccflow26-workflow-topline {

   position: absolute;

   top: 0;

   left: 50%;

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

   min-height: 48px;

   padding: 0 21px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 9px;

   border:
      1px solid rgba(105, 164, 24, .13);

   border-radius: 100px;

   color: #4f5e47;

   background: #ffffff;

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

   font-size: 10px;

   font-weight: 900;

   letter-spacing: .12em;

   white-space: nowrap;

}


.ccflow26-workflow-dot {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background: #8edc00;

   box-shadow:
      0 0 9px rgba(133, 213, 0, .5);

}



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

.ccflow26-step {

   position: relative;

   z-index: 2;

   min-height: 155px;

   margin-bottom: 17px;

   padding:
      24px 145px 24px 115px;

   display: flex;

   align-items: center;

   border:
      1px solid rgba(74, 111, 37, .09);

   border-radius: 22px;

   background:
      linear-gradient(
         135deg,
         rgba(255,255,255,.99),
         rgba(248,251,245,.98)
      );

   box-shadow:
      0 12px 30px rgba(30, 55, 14, .055);

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

}


.ccflow26-step:hover {

   transform: translateX(6px);

   border-color:
      rgba(122, 190, 18, .24);

   box-shadow:
      0 18px 42px rgba(30, 55, 14, .09);

}



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

.ccflow26-number {

   position: absolute;

   left: 22px;

   top: 22px;

   z-index: 3;

   color: rgba(82, 120, 56, .12);

   font-size: 43px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: -.06em;

}



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

.ccflow26-icon {

   position: absolute;

   left: 55px;

   top: 50%;

   width: 51px;

   height: 51px;

   display: grid;

   place-items: center;

   transform: translateY(-50%);

   border:
      1px solid rgba(99, 159, 15, .17);

   border-radius: 15px;

   background:
      linear-gradient(
         135deg,
         #ddff4d,
         #93e900
      );

   box-shadow:
      0 11px 28px rgba(112, 182, 0, .13),
      inset 0 1px rgba(255,255,255,.75);

}


.ccflow26-icon span {

   color: #162500;

   font-size: 21px;

   font-weight: 900;

}



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

.ccflow26-content {

   width: 100%;

}


.ccflow26-agent-label {

   margin-bottom: 5px;

   color: #7abc00;

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .16em;

}


.ccflow26-content h3 {

   margin: 0;

   color: #151c12;

   font-size: 21px;

   line-height: 1.25;

   letter-spacing: -.025em;

   font-weight: 800;

}


.ccflow26-content h3 span {

   color: #63a900;

}


.ccflow26-content p {

   max-width: 700px;

   margin: 8px 0 0;

   color: #6d7769;

   font-size: 15px;

   line-height: 1.65;

}



/* ============================================================
   STATUS
============================================================ */

.ccflow26-status {

   position: absolute;

   right: 20px;

   top: 50%;

   min-width: 103px;

   min-height: 38px;

   padding: 0 11px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 6px;

   transform: translateY(-50%);

   border:
      1px solid rgba(104, 162, 30, .12);

   border-radius: 100px;

   color: #66735f;

   background:
      rgba(143, 214, 29, .055);

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .08em;

}


.ccflow26-status span {

   width: 20px;

   height: 20px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   color: #397900;

   background:
      rgba(137, 215, 11, .16);

   font-size: 10px;

}



/* ============================================================
   BONUS CALLOUT
============================================================ */

.ccflow26-bonus {

   position: relative;

   margin-top: 30px;

   padding:
      30px 190px 30px 98px;

   overflow: hidden;

   border:
      1px solid rgba(105, 163, 23, .20);

   border-radius: 26px;

   background:
      radial-gradient(
         circle at 90% 20%,
         rgba(255,255,255,.35),
         transparent 30%
      ),
      linear-gradient(
         110deg,
         #e4ff72,
         #c8fb2b 48%,
         #a9ed08
      );

   box-shadow:
      0 20px 50px rgba(68, 113, 6, .12);

}


.ccflow26-bonus::after {

   content: "?";

   position: absolute;

   right: 80px;

   top: 50%;

   transform:
      translateY(-50%)
      rotate(-8deg);

   color:
      rgba(16,25,9,.055);

   font-size: 170px;

   line-height: 1;

   font-weight: 900;

}



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

.ccflow26-bonus-icon {

   position: absolute;

   left: 28px;

   top: 50%;

   width: 52px;

   height: 52px;

   display: grid;

   place-items: center;

   transform: translateY(-50%);

   border-radius: 15px;

   color: #c7ff2a;

   background: #11180c;

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

   font-size: 23px;

   font-weight: 900;

}



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

.ccflow26-bonus-copy {

   position: relative;

   z-index: 3;

}


.ccflow26-bonus-label {

   display: block;

   margin-bottom: 5px;

   color: #466f00;

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .16em;

}


.ccflow26-bonus h3 {

   margin: 0;

   color: #16200e;

   font-size: 23px;

   line-height: 1.25;

   font-weight: 900;

   letter-spacing: -.025em;

}


.ccflow26-bonus h3 span {

   color: #386e00;

}


.ccflow26-bonus p {

   margin: 9px 0 0;

   color: #3e4c34;

   font-size: 15px;

   line-height: 1.6;

}



/* ============================================================
   BONUS BADGE
============================================================ */

.ccflow26-bonus-badge {

   position: absolute;

   right: 25px;

   top: 25px;

   z-index: 4;

   padding: 7px 10px;

   border-radius: 8px;

   color: #c9ff29;

   background: #14200e;

   font-size: 8px;

   font-weight: 900;

   letter-spacing: .1em;

}



/* ============================================================
   RESULT
============================================================ */

.ccflow26-result {

   margin-top: 35px;

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 14px;

}


.ccflow26-result-line {

   height: 1px;

   flex: 1;

   background:
      linear-gradient(
         90deg,
         transparent,
         rgba(107,166,28,.30)
      );

}


.ccflow26-result-line:last-child {

   background:
      linear-gradient(
         90deg,
         rgba(107,166,28,.30),
         transparent
      );

}


.ccflow26-result-content {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 10px;

   color: #858f80;

   font-size: 9px;

   font-weight: 900;

   letter-spacing: .09em;

   text-align: center;

}


.ccflow26-result-content i {

   color: #8edc00;

   font-size: 17px;

   font-style: normal;

}


.ccflow26-result-content strong {

   color: #4e8500;

}



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

@media (max-width: 991px) {

   .ccflow26-section {

      padding:
         75px 0 80px;

   }


   .ccflow26-heading {

      margin-bottom:
         45px;

   }


   .ccflow26-workflow {

      padding:
         60px 24px 30px;

   }


   .ccflow26-workflow::before {

      left:
         61px;

   }


   .ccflow26-step {

      padding:
         22px 25px 22px 95px;

   }


   .ccflow26-icon {

      left:
         35px;

   }


   .ccflow26-number {

      left:
         12px;

      top:
         15px;

      font-size:
         33px;

   }


   .ccflow26-status {

      position:
         static;

      width:
         fit-content;

      min-width:
         0;

      margin-top:
         14px;

      transform:
         none;

   }


   .ccflow26-bonus {

      padding:
         30px 28px 30px 95px;

   }


   .ccflow26-bonus-badge {

      position:
         static;

      width:
         fit-content;

      margin-top:
         15px;

   }

}



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

@media (max-width: 767px) {

   .ccflow26-section {

      padding:
         60px 0 65px;

   }


   .ccflow26-heading {

      margin-bottom:
         36px;

   }


   .ccflow26-heading h2 {

      font-size:
         36px;

   }


   .ccflow26-heading p {

      font-size:
         16px;

   }


   .ccflow26-workflow {

      padding:
         50px 14px 22px;

      border-radius:
         26px;

   }


   .ccflow26-workflow::before {

      display:
         none;

   }


   .ccflow26-workflow-topline {

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

      min-height:
         42px;

      padding:
         0 14px;

      white-space:
         normal;

      text-align:
         center;

      line-height:
         1.35;

   }


   .ccflow26-step {

      min-height:
         auto;

      margin-bottom:
         12px;

      padding:
         22px 18px;

      display:
         block;

      border-radius:
         19px;

      text-align:
         center;

   }


   .ccflow26-number {

      top:
         15px;

      left:
         15px;

      font-size:
         31px;

   }


   .ccflow26-icon {

      position:
         relative;

      left:
         auto;

      top:
         auto;

      width:
         54px;

      height:
         54px;

      margin:
         0 auto 16px;

      transform:
         none;

   }


   .ccflow26-content h3 {

      font-size:
         19px;

   }


   .ccflow26-content p {

      font-size:
         14px;

   }


   .ccflow26-status {

      margin:
         15px auto 0;

   }


   .ccflow26-bonus {

      padding:
         25px 18px;

      border-radius:
         21px;

      text-align:
         center;

   }


   .ccflow26-bonus-icon {

      position:
         static;

      width:
         55px;

      height:
         55px;

      margin:
         0 auto 16px;

      transform:
         none;

   }


   .ccflow26-bonus h3 {

      font-size:
         20px;

   }


   .ccflow26-bonus p {

      font-size:
         14px;

   }


   .ccflow26-bonus-badge {

      margin:
         16px auto 0;

   }


   .ccflow26-result {

      margin-top:
         27px;

   }


   .ccflow26-result-line {

      display:
         none;

   }


   .ccflow26-result-content {

      flex-wrap:
         wrap;

      font-size:
         8px;

   }

}



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

@media (max-width: 480px) {

   .ccflow26-heading h2 {

      font-size:
         31px;

   }


   .ccflow26-eyebrow {

      gap:
         7px;

      font-size:
         9px;

   }


   .ccflow26-eyebrow span {

      width:
         28px;

   }


   .ccflow26-workflow {

      padding-left:
         10px;

      padding-right:
         10px;

   }

}

/* ============================================================
   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;

   min-height: 535px;

   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;

   min-height: 330px;

   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;

   }

}


/* ============================================================
   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;
    }
}

/* ============================================================
   CREATORCLAW AI — PREMIUM JV CALENDAR SECTION
============================================================ */

.ccpromo26-section {

    --ccp-green: #8edc00;
    --ccp-lime: #cfff34;
    --ccp-green-dark: #4da300;
    --ccp-dark: #101810;
    --ccp-muted: #707b6c;

    position: relative;
    overflow: hidden;

  padding: 40px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(158, 232, 38, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(54, 177, 80, .06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafcf7 50%,
            #ffffff 100%
        );

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

    color: #111;

    isolation: isolate;
}


.ccpromo26-section *,
.ccpromo26-section *::before,
.ccpromo26-section *::after {
    box-sizing: border-box;
}


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

.ccpromo26-grid {

    position: absolute;
    inset: 0;

    z-index: -5;

    opacity: .5;

    background-image:
        linear-gradient(
            rgba(79, 126, 26, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79, 126, 26, .03) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

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

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


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

.ccpromo26-glow {

    position: absolute;
    z-index: -4;

    border-radius: 50%;

    filter: blur(30px);

    pointer-events: none;
}


.ccpromo26-glow--left {

    width: 520px;
    height: 520px;

    left: -290px;
    top: 130px;

    background:
        radial-gradient(
            circle,
            rgba(151, 228, 30, .12),
            transparent 70%
        );
}


.ccpromo26-glow--right {

    width: 580px;
    height: 580px;

    right: -320px;
    bottom: -180px;

    background:
        radial-gradient(
            circle,
            rgba(57, 179, 80, .08),
            transparent 70%
        );
}


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

.ccpromo26-shell {

    position: relative;

    padding: 75px 42px 34px;

    border:
        1px solid rgba(79, 122, 39, .12);

    border-radius: 34px;

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

    box-shadow:
        0 32px 85px rgba(31, 60, 13, .09),
        inset 0 1px rgba(255,255,255,1);

    backdrop-filter: blur(15px);
}


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

.ccpromo26-top-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(101, 158, 27, .14);

    border-radius: 100px;

    color: #53604d;

    background: #ffffff;

    box-shadow:
        0 12px 28px rgba(32, 59, 15, .08);

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

    letter-spacing: .13em;

    white-space: nowrap;
}


.ccpromo26-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #8bd900;

    box-shadow:
        0 0 10px rgba(125,210,0,.50);

    animation:
        ccpromo26Pulse 2s ease-in-out infinite;
}


@keyframes ccpromo26Pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(139,217,0,.06),
            0 0 10px rgba(125,210,0,.45);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(139,217,0,.025),
            0 0 16px rgba(125,210,0,.8);
    }

}


/* ============================================================
   BANNER
============================================================ */

.ccpromo26-banner {

    position: relative;

    max-width: 820px;

    margin: 0 auto;

    padding: 40px 30px 36px;

    overflow: hidden;

    border:
        1px solid rgba(86, 132, 34, .11);

    border-radius: 27px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(174, 236, 54, .14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbf2
        );

    box-shadow:
        0 20px 55px rgba(29, 59, 10, .08);
}


.ccpromo26-banner::before {

    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #91df00,
            transparent
        );

    box-shadow:
        0 3px 20px rgba(128, 208, 0, .18);
}


.ccpromo26-banner-glow {

    position: absolute;

    width: 420px;
    height: 300px;

    left: 50%;
    top: -210px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(163, 233, 40, .28),
            transparent 70%
        );
}


/* ============================================================
   EYEBROW
============================================================ */

.ccpromo26-eyebrow {

    position: relative;
    z-index: 2;

    margin-bottom: 8px;

    color: #6caa00;

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

    letter-spacing: .17em;
}


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

.ccpromo26-banner h2 {

    position: relative;
    z-index: 2;

    margin: 0;

    color: #111810;

    font-size:
        clamp(39px, 4vw, 58px);

    line-height: 1.05;

    letter-spacing: -.05em;

    font-weight: 900;
}


.ccpromo26-banner h2 span {

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #72ba00,
            #96df00,
            #3fab50
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* ============================================================
   DATE WRAP
============================================================ */

.ccpromo26-date-wrap {

    position: relative;
    z-index: 3;

    max-width: 630px;

    margin: 30px auto 0;

    padding: 18px 24px;

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

    gap: 18px;

    border:
        1px solid rgba(90, 137, 36, .10);

    border-radius: 20px;

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

    box-shadow:
        0 12px 30px rgba(31, 58, 14, .06);
}


/* ============================================================
   CALENDAR
============================================================ */

.ccpromo26-calendar-icon {

    width: 72px;
    height: 72px;

    flex-shrink: 0;

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

    border:
        1px solid rgba(104, 165, 22, .16);

    border-radius: 17px;

    color: #142400;

    background:
        linear-gradient(
            135deg,
            #dcff47,
            #91df00
        );

    box-shadow:
        0 12px 28px rgba(106, 173, 0, .13),
        inset 0 1px rgba(255,255,255,.7);
}


.ccpromo26-calendar-icon span {

    font-size: 27px;

    line-height: 1;

    font-weight: 900;
}


.ccpromo26-calendar-icon small {

    margin-top: 4px;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .12em;
}


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

.ccpromo26-date-content {

    text-align: left;
}


.ccpromo26-date-content > small {

    display: block;

    margin-bottom: 4px;

    color: #8b9687;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .14em;
}


.ccpromo26-date-content strong {

    display: block;

    color: #172013;

    font-size:
        clamp(20px, 2vw, 27px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -.025em;
}


.ccpromo26-date-content strong span {

    margin: 0 7px;

    color: #79bc00;

    font-size: .65em;

    font-weight: 900;
}


.ccpromo26-time {

    width: fit-content;

    margin-top: 7px;

    padding: 5px 9px;

    border-radius: 7px;

    color: #477800;

    background:
        rgba(138, 214, 16, .10);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .08em;
}


/* ============================================================
   RESOURCE LINKS WRAP
============================================================ */

.ccpromo26-links-wrap {

    max-width: 1030px;

    margin: 45px auto 0;
}


.ccpromo26-links-label {

    margin-bottom: 22px;

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

    gap: 12px;

    color: #66735f;

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

    letter-spacing: .17em;
}


.ccpromo26-links-label span {

    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(111, 172, 24, .38)
        );
}


.ccpromo26-links-label span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(111, 172, 24, .38),
            transparent
        );
}


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

.ccpromo26-btn {

    position: relative;

    min-height: 92px;

    padding:
        10px 10px 10px 13px;

    overflow: hidden;

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

    gap: 16px;

    border:
        1px solid rgba(99, 159, 18, .20);

    border-radius: 18px;

    color: #16200f;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #f8fff0 0%,
            #efffd7 48%,
            #fafff4 100%
        );

    box-shadow:
        0 12px 26px rgba(47, 86, 9, .08),
        inset 0 1px rgba(255,255,255,.95);

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        border-color .3s ease;
}


.ccpromo26-btn::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            #d7ff39,
            #8ddb00,
            #48b84f
        );
}


.ccpromo26-btn::after {

    content: "";

    position: absolute;

    top: -50%;

    left: -80px;

    width: 48px;
    height: 220%;

    transform:
        rotate(24deg);

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

    transition:
        left .65s ease;
}


.ccpromo26-btn:hover {

    color: #16200f;

    transform:
        translateY(-5px);

    border-color:
        rgba(105, 171, 15, .42);

    box-shadow:
        0 20px 42px rgba(48, 89, 8, .14),
        0 0 0 4px rgba(145, 220, 0, .035);
}


.ccpromo26-btn:hover::after {

    left: 115%;
}


/* ============================================================
   BUTTON LEFT
============================================================ */

.ccpromo26-btn-left {

    position: relative;
    z-index: 2;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


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

.ccpromo26-btn-icon {

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(69, 117, 0, .18);

    border-radius: 14px;

    color: #102000;

    background:
        linear-gradient(
            135deg,
            #dcff42 0%,
            #a8ef0c 45%,
            #79d800 100%
        );

    box-shadow:
        0 10px 22px rgba(111, 179, 0, .16),
        inset 0 1px rgba(255,255,255,.7);

    font-size: 19px;

    font-weight: 900;

    transition:
        transform .3s ease;
}


.ccpromo26-btn:hover
.ccpromo26-btn-icon {

    transform:
        scale(1.06)
        rotate(-3deg);
}


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

.ccpromo26-btn-copy {

    min-width: 0;

    display: block;
}


.ccpromo26-btn-copy small {

    display: block;

    margin-bottom: 4px;

    color: #77856f;

    font-size: 7px;

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: .14em;
}


.ccpromo26-btn-copy strong {

    display: block;

    color: #172011;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -.02em;
}


/* ============================================================
   ARROW BOX
============================================================ */

.ccpromo26-btn-arrow {

    position: relative;
    z-index: 3;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #baff20;

    background:
        linear-gradient(
            145deg,
            #12200d,
            #071008
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.07),
        0 8px 18px rgba(27, 55, 8, .15);

    font-size: 18px;

    font-weight: 900;

    transition:
        transform .3s ease;
}


.ccpromo26-btn:hover
.ccpromo26-btn-arrow {

    transform:
        translate(2px, -2px)
        rotate(4deg);
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.ccpromo26-btn--primary {

    border:
        1px solid rgba(87, 146, 0, .35);

    background:
        linear-gradient(
            110deg,
            #deff47 0%,
            #bdff20 43%,
            #8ae400 100%
        );

    box-shadow:
        0 15px 34px rgba(100, 170, 0, .17),
        inset 0 1px rgba(255,255,255,.75);
}


.ccpromo26-btn--primary::before {

    width: 6px;

    background:
        #15250c;
}


.ccpromo26-btn--primary
.ccpromo26-btn-icon {

    color: #baff1d;

    border-color:
        rgba(255,255,255,.08);

    background:
        linear-gradient(
            145deg,
            #15240d,
            #091107
        );

    box-shadow:
        0 10px 22px rgba(22, 57, 5, .20),
        inset 0 1px rgba(255,255,255,.07);
}


.ccpromo26-btn--primary
.ccpromo26-btn-copy small {

    color:
        rgba(26, 48, 8, .60);
}


.ccpromo26-btn--primary
.ccpromo26-btn-copy strong {

    color: #112000;
}


.ccpromo26-btn--primary
.ccpromo26-btn-arrow {

    color: #cfff29;

    background:
        #102008;
}


.ccpromo26-btn--primary:hover {

    border-color:
        rgba(69, 119, 0, .50);

    box-shadow:
        0 22px 48px rgba(92, 159, 0, .25),
        0 0 0 5px rgba(151, 221, 0, .06);
}


/* ============================================================
   PREVIEW BADGE
============================================================ */

.ccpromo26-btn-badge {

 position: absolute;
  z-index: 5;
  top: -1px;
  right: 0px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #caff24;
  background: #102008;
  box-shadow: 0 5px 12px rgba(30, 67, 8, .14);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .08em;
}


/* ============================================================
   BOTTOM STATUS
============================================================ */

.ccpromo26-bottom {

    max-width: 700px;

    margin: 32px auto 0;

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

    gap: 13px;
}


.ccpromo26-bottom-line {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(107, 166, 29, .30)
        );
}


.ccpromo26-bottom-line--right {

    background:
        linear-gradient(
            90deg,
            rgba(107, 166, 29, .30),
            transparent
        );
}


.ccpromo26-bottom-copy {

    display: flex;
    align-items: center;

    gap: 7px;

    color: #7b8677;

    font-size: 10px;

    font-weight: 700;

    text-align: center;
}


.ccpromo26-bottom-copy span {

    color: #85cf00;
}


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

@media (max-width: 991px) {

    .ccpromo26-section {
        padding: 75px 0 80px;
    }

    .ccpromo26-shell {
        padding: 65px 25px 30px;
    }

    .ccpromo26-banner {
        padding: 35px 22px 30px;
    }

}


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

@media (max-width: 767px) {

    .ccpromo26-section {
        padding: 60px 0 65px;
    }


    .ccpromo26-shell {

        padding:
            58px 14px 24px;

        border-radius: 25px;
    }


    .ccpromo26-top-badge {

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

        min-height: 42px;

        padding:
            7px 13px;

        font-size: 8px;

        white-space: normal;

        text-align: center;
    }


    .ccpromo26-banner {

        padding:
            30px 15px 25px;

        border-radius: 21px;
    }


    .ccpromo26-banner h2 {
        font-size: 36px;
    }


    .ccpromo26-date-wrap {

        padding: 15px;

        flex-direction: column;

        gap: 12px;
    }


    .ccpromo26-date-content {
        text-align: center;
    }


    .ccpromo26-time {

        margin-left: auto;
        margin-right: auto;
    }


    .ccpromo26-links-wrap {
        margin-top: 34px;
    }


    .ccpromo26-btn {

        min-height: 84px;

        border-radius: 16px;
    }


    .ccpromo26-btn-icon {

        width: 49px;
        height: 49px;

        border-radius: 12px;
    }


    .ccpromo26-btn-copy strong {
        font-size: 15px;
    }


    .ccpromo26-btn-arrow {

        width: 39px;
        height: 39px;

        border-radius: 10px;
    }

}


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

@media (max-width: 480px) {

    .ccpromo26-banner h2 {
        font-size: 31px;
    }


    .ccpromo26-date-content strong {
        font-size: 19px;
    }


    .ccpromo26-date-content strong span {

        display: block;

        margin: 4px 0;
    }


    .ccpromo26-bottom-line {
        display: none;
    }

}


/* ============================================================
   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;
    }

}