/* =====================================================
   CREATORCLAW ULTRA PREMIUM HERO
===================================================== */

.ccultra26-hero {
    position: relative;
    overflow: hidden;

    /* background: #ffffff;

    padding: 48px 0 75px;

    font-size: 18px; */

    isolation: isolate;
}


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

.ccultra26-shell {
    position: relative;

    max-width: 1240px;

    margin: 0 auto;

    /* padding: 50px 50px 55px; */

    text-align: center;

    border-radius: 40px;
/* 
    border: 1px solid rgba(40, 100, 55, 0.07);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(250,255,249,.97)
        );

    box-shadow:
        0 45px 100px rgba(40, 84, 49, 0.08),
        0 10px 30px rgba(80, 160, 67, 0.05),
        inset 0 1px 0 rgba(255,255,255,.9); */
}


/* premium glow inside card */

.ccultra26-shell::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: -260px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(156, 255, 55, 0.18),
            rgba(156, 255, 55, 0.05) 45%,
            transparent 70%
        );

    filter: blur(15px);

    z-index: -1;
}


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

.ccultra26-top-badge {

    display: inline-flex;

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

    gap: 9px;

    margin-bottom: 25px;

    padding: 11px 20px;

    border-radius: 100px;

    border:
        1px solid rgba(78, 190, 50, 0.25);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fff5
        );

    box-shadow:
        0 10px 28px rgba(51, 119, 44, 0.08);

    color: #46544c;

    font-size: 15px;

    font-weight: 600;
}

.ccultra26-top-badge strong {
    color: #169b34;
    font-weight: 900;
}

.ccultra26-badge-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d4ff2f,
            #2cca48
        );

    box-shadow:
        0 0 0 5px rgba(84, 210, 57, .08),
        0 0 14px rgba(78, 206, 58, .4);
}

.ccultra26-sep {
    color: #9fa9a3;
}


/* =====================================================
   PREHEAD
===================================================== */

.ccultra26-prehead {

    margin-bottom: 20px;

    color: #111b17;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 850;

    letter-spacing: -0.5px;
}

.ccultra26-prehead span {

    color: #159d35;

    font-weight: 950;
}


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

.ccultra26-title {

    max-width: 1120px;

    margin:
        0 auto 28px;

    color: #08120d;

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

    line-height: 1.04;

    font-weight: 950;

    letter-spacing: -3.2px;
}

.ccultra26-line {

    display: block;
}

.ccultra26-line--middle {

    margin-top: 5px;
}


/* highlight */

.ccultra26-highlight {

    position: relative;

    display: inline-block;

    padding:
        2px 16px 6px;

    margin:
        0 3px;

    border-radius: 14px;

    color: #071209;

    background:
        linear-gradient(
            115deg,
            #e1ff3d 0%,
            #adff1d 46%,
            #70ef2d 100%
        );

    box-shadow:
        0 10px 25px rgba(125, 216, 53, 0.18);

    transform:
        rotate(-0.7deg);
}


/* shine */

.ccultra26-highlight::after {

    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 11px;

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

    pointer-events: none;
}


.ccultra26-normal {

    color: #08120d;
}


/* green text */

.ccultra26-green {

    /* background:
        linear-gradient(
            90deg,
            #147b2c,
            #1da83a 48%,
            #54ce48
        ); */
background: linear-gradient( 90deg, #cbff32 0%, #9dff18 35%, #6eff63 68%, #61ffc1 100% );
    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.13);
}


/* last line */

.ccultra26-last {

    margin-top: 6px;

    position: relative;
}


/* underline */

.ccultra26-last::after {

    content: "";

    display: block;

    width: 360px;

    max-width: 65%;

    height: 10px;

    margin:
        12px auto 0;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #85ec32,
            #baff39,
            #85ec32,
            transparent
        );

    filter: blur(.2px);

    transform:
        rotate(-1deg);
}


/* =====================================================
   SUB HEAD
===================================================== */

.ccultra26-subhead {

    max-width: 990px;

    margin:
        0 auto 30px;

    color: #526158;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 500;
}

.ccultra26-subhead strong {

    color: #17261d;

    font-weight: 900;
}


/* =====================================================
   SUPPORT AREA
===================================================== */

.ccultra26-support-box {

max-width: 1150px;

    margin:
        0 auto 30px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    padding:
        8px 12px;

    border:
        1px solid rgba(26, 89, 43, 0.08);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.94),
            rgba(249,252,249,.94)
        );

    box-shadow:
        0 15px 40px rgba(39, 75, 47, 0.07);

    backdrop-filter: blur(12px);

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


.ccultra26-support-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        12px 20px;

    font-size: 14px;

    color: #35443b;
}

.ccultra26-support-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    width: 1px;

    height: 26px;

    background:
        rgba(18, 69, 35, 0.08);
}


.ccultra26-support-item span {

    display: grid;

    place-items: center;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #aefa29,
            #24bc42
        );

    box-shadow:
        0 5px 13px rgba(57, 189, 64, 0.20);

    font-size: 14px;

    font-weight: 900;
}


.ccultra26-support-item b {

    font-weight: 750;
}


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

.ccultra26-cta-wrap {

    position: relative;

    max-width: 980px;

    margin:
        0 auto;
}


.ccultra26-cta-wrap::before {

    content: "";

    position: absolute;

    left: 10%;
    right: 10%;

    bottom: -18px;

    height: 50px;

    border-radius: 50%;

    background:
        rgba(115, 234, 38, .25);

    filter: blur(30px);

    z-index: -1;
}


.ccultra26-cta {

    position: relative;

    display: flex;

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

    gap: 18px;

    width: 100%;

    min-height: 82px;

    padding:
        16px 20px;

    border-radius: 22px;

    border:
        2px solid rgba(166, 255, 43, .95);

    background:
        linear-gradient(
            110deg,
            #dcff43 0%,
            #aefe1e 40%,
            #65ee0d 100%
        );

    color: #07120b;

    text-decoration: none;

    font-size: 21px;

    font-weight: 950;

    line-height: 1.25;

    letter-spacing: -.5px;

    box-shadow:
        0 20px 45px rgba(100, 194, 32, .23),
        inset 0 2px 0 rgba(255,255,255,.75),
        inset 0 -2px 0 rgba(66, 161, 17, .18);

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


.ccultra26-cta::after {

    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 16px;

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

    pointer-events: none;
}


.ccultra26-cta:hover {

    color: #07120b;

    text-decoration: none;

    transform:
        translateY(-4px);

    box-shadow:
        0 28px 60px rgba(92, 185, 29, .28),
        inset 0 2px 0 rgba(255,255,255,.8);
}


.ccultra26-arrow {

    display: grid;

    place-items: center;

    width: 52px;

    height: 52px;

    flex: 0 0 auto;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #0b2413,
            #06170b
        );

    color: #baff32;

    font-size: 27px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.15);

    transition:
        transform .25s ease;
}


.ccultra26-cta:hover
.ccultra26-arrow {

    transform:
        translateX(5px);
}


/* =====================================================
   TRUST LINE
===================================================== */

.ccultra26-trust {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px 30px;

    margin-top: 25px;

    color: #78847c;

    font-size: 13px;

    font-weight: 700;
}

.ccultra26-trust span {

    position: relative;
}


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

@media (max-width: 1199px) {

    .ccultra26-shell {

        padding:
            45px 35px 50px;
    }

}


@media (max-width: 991px) {

    .ccultra26-title {

        font-size:
            clamp(42px, 7vw, 62px);

        letter-spacing:
            -2px;
    }


    .ccultra26-prehead {

        font-size:
            22px;
    }


    .ccultra26-support-item {

        width:
            33.333%;

        justify-content:
            flex-start;
    }


    .ccultra26-support-item::after {

        display:
            none;
    }

}


@media (max-width: 767px) {

    .ccultra26-hero {

        padding:
            0px 0 0px;
    }


    .ccultra26-shell {

        border-radius:
            24px;

               padding: 0px 18px 0px;
    }


    .ccultra26-top-badge {

        flex-wrap:
            wrap;

        gap:
            6px;

        margin-bottom:
            20px;

        font-size:
            12px;
    }


    .ccultra26-prehead {

        font-size:
            18px;

        margin-bottom:
            16px;
    }


    .ccultra26-title {

        font-size:
            37px;

        line-height:
            1.07;

        letter-spacing:
            -1.4px;
    }


    .ccultra26-highlight {

        padding:
            2px 9px 4px;

        border-radius:
            9px;
    }


    .ccultra26-subhead {

        font-size:
            16px;

        line-height:
            1.65;
    }


    .ccultra26-support-box {

        padding:
            10px;

        border-radius:
            17px;
    }


    .ccultra26-support-item {

        width:
            50%;

        padding:
            9px 10px;

        font-size:
            13px;
    }


    .ccultra26-cta {

        font-size:
            17px;

        min-height:
            74px;

        padding:
            14px;

        gap:
            10px;

        border-radius:
            18px;
    }


    .ccultra26-arrow {

        width:
            44px;

        height:
            44px;

        border-radius:
            11px;

        font-size:
            23px;
    }

}


@media (max-width: 480px) {

    .ccultra26-title {

        font-size:
            33px;
    }


    .ccultra26-support-item {

        width:
            100%;
    }


    .ccultra26-cta {

        flex-direction:
            column;
    }


    .ccultra26-arrow {

        width:
            100%;
    }

}


.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);

   }

}

/* =====================================================
   CREATORCLAW — VALUE PROPOSITION
===================================================== */

.ccvalue26-section {
    position: relative;
    overflow: hidden;

    padding: 85px 0;

    background: #ffffff;

    font-size: 18px;
}


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

.ccvalue26-box {
    position: relative;
    overflow: hidden;

    padding: 65px 55px;

    border: 1px solid rgba(24, 92, 44, 0.08);

    border-radius: 36px;

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

    box-shadow:
        0 35px 90px rgba(36, 77, 46, 0.08),
        0 10px 25px rgba(48, 115, 52, 0.04);

    text-align: center;

    isolation: isolate;
}


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

.ccvalue26-glow {
    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(20px);

    z-index: -1;
}


.ccvalue26-glow--left {
    left: -230px;
    top: -150px;

    background:
        radial-gradient(
            circle,
            rgba(176, 255, 49, 0.17),
            transparent 68%
        );
}


.ccvalue26-glow--right {
    right: -220px;
    bottom: -170px;

    background:
        radial-gradient(
            circle,
            rgba(57, 207, 90, 0.12),
            transparent 68%
        );
}


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

.ccvalue26-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 18px;

    padding: 9px 17px;

    border-radius: 100px;

    border: 1px solid rgba(70, 187, 54, .18);

    background:
        linear-gradient(
            180deg,
            #fbfff7,
            #f3ffe9
        );

    color: #23852f;

    font-size: 13px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.1px;

    box-shadow:
        0 8px 25px rgba(72, 153, 56, .07);
}


.ccvalue26-eyebrow-icon {
    color: #80df25;
}


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

.ccvalue26-title {
max-width: 1250px;
  margin: 0 auto 0px;
  color: #0b1710;
  font-size: clamp(22px, 6vw, 24px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
}


.ccvalue26-gradient {
    background:
        linear-gradient(
            90deg,
            #238e32,
            #55ce39
        );

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

    color: transparent;
}


.ccvalue26-equal {
    display: inline-block;

    margin:
        0 10px;

    color: #a7f32e;
}


.ccvalue26-title-bottom {
    display: block;

    position: relative;

    margin-top: 5px;
}


.ccvalue26-title-bottom::after {
 content: "";
  display: block;
  width: 280px;
  max-width: 65%;
  height: 3px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: linear-gradient( 90deg, transparent, #8be937, transparent );
}



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

.ccvalue26-intro {
    max-width: 780px;

margin: 0 auto 10px;
    color: #57665d;

    font-size: 17px;

    line-height: 1.65;

    font-weight: 550;
}


/* =====================================================
   3 STEP PROCESS
===================================================== */

.ccvalue26-process {
    display: flex;

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

    max-width: 1020px;

    margin:
        0 auto 36px;
}


/* STEP */

.ccvalue26-step {
    position: relative;

    flex: 1;

    min-height: 190px;

    display: flex;

    flex-direction: column;

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

    padding: 28px 20px;

    border:
        1px solid rgba(31, 101, 47, .08);

    border-radius: 24px;

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

    box-shadow:
        0 18px 40px rgba(40, 83, 50, .06);

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


.ccvalue26-step:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(100, 218, 59, .28);

    box-shadow:
        0 25px 55px rgba(54, 117, 60, .11);
}


.ccvalue26-step-number {
    position: absolute;

    top: 15px;
    right: 17px;

    color: rgba(24, 126, 45, .13);

    font-size: 25px;

    font-weight: 950;
}


.ccvalue26-step-icon {
    display: grid;

    place-items: center;

    width: 62px;
    height: 62px;

    margin-bottom: 17px;

    border-radius: 18px;

    color: #12331b;

    background:
        linear-gradient(
            135deg,
            #e4ff62,
            #79ef37
        );

    box-shadow:
        0 12px 24px rgba(105, 209, 59, .20);

    font-size: 26px;

    font-weight: 900;
}


.ccvalue26-step-content span {
    display: block;

    margin-bottom: 3px;

    color: #79867e;

    font-size: 13px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.ccvalue26-step-content strong {
    display: block;

    color: #14231a;

    font-size: 20px;

    font-weight: 900;
}


/* CONNECTORS */

.ccvalue26-connector {
    position: relative;

    width: 70px;

    display: flex;

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


.ccvalue26-connector span {
    position: absolute;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(111, 209, 59, .05),
            rgba(111, 209, 59, .40),
            rgba(111, 209, 59, .05)
        );
}


.ccvalue26-connector b {
    position: relative;

    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #ffffff;

    border:
        1px solid rgba(75, 171, 51, .14);

    color: #43bd35;

    box-shadow:
        0 7px 17px rgba(43, 113, 51, .08);

    font-size: 17px;
}


/* =====================================================
   AUTOMATION MESSAGE
===================================================== */

.ccvalue26-automation {
    max-width: 670px;

margin: 0 auto 10px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        18px 22px;

    border:
        1px solid rgba(43, 123, 51, .08);

    border-radius: 22px;

    background:
        linear-gradient(
            90deg,
            #f7fff2,
            #ffffff 50%,
            #f8fff4
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 12px 30px rgba(41, 90, 48, .05);

    text-align: left;
}


.ccvalue26-agent-icon {
    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

    flex: 0 0 auto;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #cfff32,
            #56d637
        );

    color: #102218;

    font-size: 24px;

    font-weight: 950;

    box-shadow:
        0 10px 20px rgba(77, 189, 54, .17);
}


.ccvalue26-agent-text {
    flex: 1;
}


.ccvalue26-agent-text strong {
    display: block;

    margin-bottom: 3px;

    color: #16251b;

    font-size: 17px;

    font-weight: 900;
}


.ccvalue26-agent-text span {
    color: #5b6a61;

    font-size: 16px;

    line-height: 1.5;
}


.ccvalue26-hours {
    flex: 0 0 auto;

    padding-left: 22px;

    border-left:
        1px solid rgba(31, 91, 45, .09);

    text-align: center;
}


.ccvalue26-hours span {
    display: block;

    color: #819087;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1px;
}


.ccvalue26-hours strong {
    display: block;

    margin:
        1px 0;

    color: #229c35;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 950;
}


.ccvalue26-hours small {
    color: #64726a;

    font-size: 11px;

    font-weight: 650;
}


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

.ccvalue26-price-box {
    position: relative;

    max-width: 900px;

    margin: 0 auto;

padding: 0 0 10px 0;
    overflow: hidden;

    border:
        1px solid rgba(48, 123, 58, .10);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 25px 65px rgba(39, 84, 46, .10);
}


.ccvalue26-price-top {
  margin: 0 auto 15px;

    padding:
        11px 20px;

    background:
        linear-gradient(
            90deg,
            #edffd4,
            #dfff9e,
            #edffd4
        );

    color: #26782f;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* pricing */

.ccvalue26-pricing {
    display: flex;

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

    gap: 35px;

    margin-bottom: 5px;
}


.ccvalue26-old-price,
.ccvalue26-launch-price {
    min-width: 220px;
}


.ccvalue26-old-price span,
.ccvalue26-launch-price > span {
    display: block;

    margin-bottom: 5px;

    color: #7b8980;

    font-size: 14px;

    font-weight: 700;
}


.ccvalue26-old-price strong {
    position: relative;

    display: inline-block;

    color: #767e79;

    font-size: 27px;

    font-weight: 850;
}


.ccvalue26-old-price strong::after {
    content: "";

    position: absolute;

    left: -5px;
    right: -5px;

    top: 50%;

    height: 2px;

    background: #ef6565;

    transform:
        rotate(-6deg);
}


/* arrow */

.ccvalue26-price-vs {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: #33a93e;

    background:
        #f5fff0;

    border:
        1px solid rgba(55, 166, 57, .12);

    font-size: 22px;

    font-weight: 900;
}


/* launch price */

.ccvalue26-launch-row {
    display: flex;

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

    gap: 9px;
}


.ccvalue26-launch-row strong {
    color: #0e1f14;

    font-size: 54px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -2px;
}


.ccvalue26-launch-row b {
    padding:
        6px 10px;

    border-radius: 8px;

    color: #197f2c;

    background:
        #eaffcf;

    font-size: 13px;

    font-weight: 900;
}


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

.ccvalue26-cta-wrap {
    position: relative;

    max-width: 600px;

    margin: 0 auto;
}


.ccvalue26-cta-wrap::before {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;

    bottom: -12px;

    height: 35px;

    border-radius: 50%;

    background:
        rgba(103, 222, 43, .28);

    filter: blur(22px);

    z-index: 0;
}


.ccvalue26-cta {
    position: relative;

    z-index: 1;

    display: flex;

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

    gap: 15px;

    width: 100%;

    min-height: 72px;

    padding:
        14px 18px;

    border-radius: 18px;

    border:
        2px solid rgba(172, 255, 52, .95);

    background:
        linear-gradient(
            110deg,
            #dbff43,
            #a8ff1b 45%,
            #61ec12
        );

    color: #07130c;

    text-decoration: none;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 950;

    box-shadow:
        0 17px 38px rgba(87, 181, 32, .22),
        inset 0 2px 0 rgba(255,255,255,.72);

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


.ccvalue26-cta:hover {
    color: #07130c;

    text-decoration: none;

    transform:
        translateY(-4px);

    box-shadow:
        0 24px 50px rgba(78, 170, 30, .28),
        inset 0 2px 0 rgba(255,255,255,.8);
}


.ccvalue26-cta-arrow {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 12px;

    background: #0a1d10;

    color: #baff31;

    font-size: 23px;

    transition:
        transform .25s ease;
}


.ccvalue26-cta:hover
.ccvalue26-cta-arrow {
    transform:
        translateX(4px);
}


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

@media (max-width: 991px) {

    .ccvalue26-box {
        padding:
            50px 30px;
    }


    .ccvalue26-process {
        gap: 14px;
    }


    .ccvalue26-connector {
        display: none;
    }


    .ccvalue26-step {
        min-height: 180px;
    }

}


@media (max-width: 767px) {

    .ccvalue26-section {
        padding:
            55px 0;
    }


    .ccvalue26-box {
        padding:
            38px 17px;

        border-radius:
            25px;
    }


    .ccvalue26-title {
        font-size: 37px;

        letter-spacing:
            -1.5px;
    }


    .ccvalue26-intro {
        margin-bottom:
            28px;

        font-size:
            17px;
    }


    .ccvalue26-process {
        flex-direction: column;

        gap: 13px;
    }


    .ccvalue26-step {
        min-height: auto;

        flex-direction: row;

        justify-content: flex-start;

        gap: 16px;

        padding:
            20px;

        text-align: left;
    }


    .ccvalue26-step-icon {
        width: 54px;
        height: 54px;

        margin-bottom: 0;

        flex: 0 0 auto;
    }


    .ccvalue26-automation {
        align-items: flex-start;

        flex-wrap: wrap;

        padding:
            17px;

        border-radius:
            18px;
    }


    .ccvalue26-hours {
        width: 100%;

        padding:
            14px 0 0;

        border-left: 0;

        border-top:
            1px solid rgba(31, 91, 45, .09);
    }


    .ccvalue26-pricing {
        flex-direction: column;

        gap: 15px;
    }


    .ccvalue26-price-vs {
        transform:
            rotate(90deg);
    }


    .ccvalue26-price-box {
        padding:
            0 18px 25px;
    }


    .ccvalue26-price-top {
        margin:
            0 -18px 24px;
    }


    .ccvalue26-launch-row strong {
        font-size:
            48px;
    }


    .ccvalue26-cta {
        font-size:
            17px;
    }

}


@media (max-width: 480px) {

    .ccvalue26-title {
        font-size:
            33px;
    }


    .ccvalue26-equal {
        margin:
            0 4px;
    }


    .ccvalue26-agent-icon {
        width: 48px;
        height: 48px;
    }


    .ccvalue26-agent-text {
        width:
            calc(100% - 70px);
    }


    .ccvalue26-cta {
        flex-direction: column;
    }


    .ccvalue26-cta-arrow {
        width: 100%;
    }

}

/* =====================================================
   CREATORCLAW AI FEATURE GRID
   3 CARDS PER ROW
===================================================== */

.ccfeatures26-section {
    position: relative;
    overflow: hidden;
    padding: 0px 0 95px 0;
    /* background: #ffffff; */
    font-size: 18px;
    isolation: isolate;
}


/* BACKGROUND GLOW */

.ccfeatures26-section::before {
    content: "";
    position: absolute;

    width: 620px;
    height: 620px;

    top: -330px;
    left: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(181, 255, 45, 0.12),
            rgba(181, 255, 45, 0.03) 45%,
            transparent 70%
        );

    pointer-events: none;
    z-index: -1;
}


.ccfeatures26-section::after {
    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

    right: -320px;
    bottom: -310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(33, 185, 69, 0.09),
            transparent 70%
        );

    pointer-events: none;
    z-index: -1;
}


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

.ccfeatures26-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 16px;

    padding: 9px 16px;

    border-radius: 100px;

    border:
        1px solid rgba(82, 184, 54, 0.18);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f4ffe9
        );

    color: #278b33;

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

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 8px 24px rgba(62, 131, 54, 0.06);
}


.ccfeatures26-eyebrow span {
    color: #8ae829;
    font-size: 15px;
}


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

.ccfeatures26-title {
max-width: 1100px;
  margin: 0 auto;
  color: #07140d;
  font-size: clamp(33px, 4.5vw, 50px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -2.2px;
}


.ccfeatures26-title span {
    background:
        linear-gradient(
            90deg,
            #126d2b 0%,
            #1da73a 45%,
            #6bd829 100%
        );

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

    color: transparent;
}


.ccfeatures26-title-line {
    width: 190px;
    height: 7px;

    margin: 17px auto 0;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9bf02f,
            #41c13e,
            transparent
        );
}


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

.ccfeatures26-card {
    position: relative;

    height: 100%;

 min-height: 120px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;

    overflow: hidden;

    border-radius: 22px;

    border:
        1px solid rgba(20, 78, 38, 0.08);

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

    box-shadow:
        0 18px 45px rgba(26, 67, 38, 0.07),
        0 4px 12px rgba(35, 93, 48, 0.03);

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


/* TOP SHINE */

.ccfeatures26-card::before {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;

    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(151, 239, 49, 0.55),
            transparent
        );
}


/* GLOW */

.ccfeatures26-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(157, 244, 44, 0.13),
            transparent 70%
        );

    pointer-events: none;

    transition:
        transform .3s ease;
}


.ccfeatures26-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(98, 204, 51, 0.22);

    box-shadow:
        0 26px 58px rgba(30, 84, 43, 0.11),
        0 5px 14px rgba(40, 117, 49, 0.05);
}


.ccfeatures26-card:hover::after {
    transform:
        scale(1.45);
}


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

.ccfeatures26-icon {
    position: relative;

    flex:
        0 0 66px;

    width: 66px;
    height: 66px;

    display: flex;

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

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #f5ffe7,
            #e4ffc4
        );

    border:
        1px solid rgba(109, 200, 50, .13);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 23px rgba(87, 160, 48, .09);
}


.ccfeatures26-icon::after {
    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 13px;

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

    pointer-events: none;
}


.ccfeatures26-icon img {
    position: relative;
    z-index: 1;

    display: block;

    max-width: 52px;
    max-height: 52px;

    width: auto;
    height: auto;

    object-fit: contain;
}


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

.ccfeatures26-content {
    position: relative;

    z-index: 1;

    flex: 1;

    color: #17261d;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 750;

    text-align: left;
}


.ccfeatures26-content em {
    color: #269238;

    font-style: normal;

    font-weight: 900;
}


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

.ccfeatures26-card--final {
    border-color:
        rgba(93, 198, 48, 0.18);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4ffe7 100%
        );
}


.ccfeatures26-card--final
.ccfeatures26-content {
    color: #126d29;
    font-weight: 900;
}


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

@media (max-width: 991px) {

    .ccfeatures26-section {
        padding:
            70px 0 80px;
    }


    .ccfeatures26-title {
        font-size:
            clamp(38px, 6vw, 52px);
    }


    .ccfeatures26-card {
        min-height: 135px;

        padding:
            20px;
    }


    .ccfeatures26-icon {
        flex-basis: 64px;

        width: 64px;
        height: 64px;
    }


    .ccfeatures26-icon img {
        max-width: 50px;
        max-height: 50px;
    }


    .ccfeatures26-content {
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .ccfeatures26-section {
        padding:
            55px 0 65px;
    }


    .ccfeatures26-eyebrow {
        font-size: 11px;
    }


    .ccfeatures26-title {
        font-size: 36px;

        letter-spacing:
            -1.4px;
    }


    .ccfeatures26-card {
        min-height: auto;

        padding:
            18px;

        gap: 15px;

        border-radius: 18px;
    }


    .ccfeatures26-icon {
        flex-basis: 60px;

        width: 60px;
        height: 60px;

        border-radius: 16px;
    }


    .ccfeatures26-icon img {
        max-width: 48px;
        max-height: 48px;
    }


    .ccfeatures26-content {
        font-size: 16px;

        line-height: 1.45;
    }

}


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

@media (max-width: 480px) {

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


    .ccfeatures26-card {
        align-items: flex-start;
    }


    .ccfeatures26-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }


    .ccfeatures26-icon img {
        max-width: 42px;
        max-height: 42px;
    }

}

.section02 {
  background: url("../images/section02.png") center top / cover no-repeat;
  padding: 8% 0px  65px;
  position: relative;
  margin-top: -36%;
  overflow: hidden;
}
.section02 {
  background: url("../images/section02.png") center top / cover no-repeat;
padding: 11.5% 0px 65px 0;
  position: relative;
  margin-top: -8%;
    overflow: hidden;
}
.section03 {
  background: url("../images/section03.png") center top / cover no-repeat;
  padding: 8% 0px  65px;
  position: relative;
  margin-top: -36%;
  overflow: hidden;
}
.section03 {
  background: url("../images/section03.png") center top / cover no-repeat;
padding: 11.5% 0px 65px 0;
  position: relative;
  margin-top: -8%;
    overflow: hidden;
}
/* =====================================================
   CREATORCLAW TESTIMONIAL SECTION
===================================================== */
/* =====================================================
   CREATORCLAW TESTIMONIALS
===================================================== */

.cctesti26-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: #ffffff;
    font-size: 18px;
    isolation: isolate;
}


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

.cctesti26-section::before {
    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

    left: -300px;
    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(172, 255, 51, .12),
            transparent 70%
        );

    z-index: -1;
}


.cctesti26-section::after {
    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(35, 197, 79, .08),
            transparent 70%
        );

    z-index: -1;
}


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

.cctesti26-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 9px 16px;
    margin-bottom: 16px;

    border-radius: 100px;

    border:
        1px solid rgba(74, 176, 53, .17);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f3ffe9
        );

    color: #258735;

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

    letter-spacing: 1px;

    box-shadow:
        0 8px 25px rgba(49, 108, 45, .06);
}


.cctesti26-eyebrow span {
    color: #90eb2d;
}


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

.cctesti26-title {
    margin: 0;

    color: #08140d;

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

    line-height: 1.07;

    font-weight: 950;

    letter-spacing: -2.3px;
}


.cctesti26-title span {
    background:
        linear-gradient(
            90deg,
            #167b2e,
            #1fa83b 50%,
            #68d52d
        );

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

    color: transparent;
}


.cctesti26-title-line {
    width: 190px;
    height: 7px;

    margin: 17px auto 0;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a1f238,
            #46c642,
            transparent
        );
}


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

.cctesti26-card {
    position: relative;
    overflow: hidden;

    height: 100%;

    min-height: 310px;

    padding: 28px;

    border-radius: 28px;

    border:
        1px solid rgba(20, 78, 38, .08);

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

    box-shadow:
        0 22px 55px rgba(31, 76, 43, .08),
        0 5px 14px rgba(30, 85, 45, .03);

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


.cctesti26-card::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(165, 243, 47, .15),
            transparent 70%
        );

    pointer-events: none;
}


.cctesti26-card::after {
    content: "";

    position: absolute;

    left: 28px;
    right: 28px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143, 231, 53, .55),
            transparent
        );
}


.cctesti26-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(89, 199, 51, .23);

    box-shadow:
        0 32px 75px rgba(30, 83, 43, .12);
}


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

.cctesti26-card-top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 14px;
}


/* =====================================================
   AVATAR
===================================================== */

.cctesti26-avatar {
    position: relative;

    flex: 0 0 72px;

    width: 72px;
    height: 72px;

    overflow: hidden;

    border-radius: 20px;

    border:
        2px solid rgba(133, 221, 62, .26);

    background:
        linear-gradient(
            135deg,
            #efffbd,
            #aef55c
        );

    box-shadow:
        0 12px 25px rgba(78, 171, 49, .16);
}


.cctesti26-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: inherit;
}


/* =====================================================
   USER
===================================================== */

.cctesti26-user {
    flex: 1;
}


.cctesti26-user h4 {
    margin:
        0 0 4px;

    color: #112119;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 900;
}


.cctesti26-user p {
    margin: 0;

    color: #78867d;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 650;
}


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

.cctesti26-quote-icon {
    flex: 0 0 auto;

    color:
        rgba(74, 184, 51, .18);

    font-family:
        Georgia, serif;

    font-size: 76px;

    line-height: .7;

    font-weight: 900;
}


/* =====================================================
   STARS
===================================================== */

.cctesti26-stars {
    position: relative;
    z-index: 1;

    margin-top: 22px;

    color: #f4b914;

    font-size: 19px;

    line-height: 1;

    letter-spacing: 3px;
}


/* =====================================================
   QUOTE
===================================================== */

.cctesti26-quote {
    position: relative;
    z-index: 1;

    margin:
        17px 0 24px;

    padding: 0;

    border: 0;

    color: #445148;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 550;
}


/* =====================================================
   FOOTER
===================================================== */

.cctesti26-card-footer {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 9px;

    padding-top: 16px;

    border-top:
        1px solid rgba(22, 77, 38, .07);

    color: #839087;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 750;
}


.cctesti26-verified-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        #56cc43;

    box-shadow:
        0 0 0 4px rgba(86, 204, 67, .10);
}


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

@media (max-width: 991px) {

    .cctesti26-section {
        padding:
            70px 0;
    }


    .cctesti26-card {
        min-height: 290px;
        padding: 24px;
    }


    .cctesti26-avatar {
        flex-basis: 64px;

        width: 64px;
        height: 64px;

        border-radius: 17px;
    }

}


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

@media (max-width: 767px) {

    .cctesti26-section {
        padding:
            55px 0;
    }


    .cctesti26-title {
        font-size: 36px;

        letter-spacing:
            -1.4px;
    }


    .cctesti26-card {
        min-height: auto;

        padding: 22px;

        border-radius: 22px;
    }


    .cctesti26-avatar {
        flex-basis: 58px;

        width: 58px;
        height: 58px;

        border-radius: 15px;
    }


    .cctesti26-user h4 {
        font-size: 18px;
    }


    .cctesti26-quote-icon {
        font-size: 58px;
    }


    .cctesti26-stars {
        margin-top: 18px;
    }


    .cctesti26-quote {
        font-size: 16px;
    }

}


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

@media (max-width: 480px) {

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


    .cctesti26-card-top {
        align-items: center;
    }


    .cctesti26-avatar {
        flex-basis: 52px;

        width: 52px;
        height: 52px;

        border-radius: 14px;
    }


    .cctesti26-quote-icon {
        font-size: 48px;
    }

}

/* =====================================================
   CREATORCLAW — HOW IT WORKS
   REFERENCE STYLE FLOW
/* 

/* =========================================
   HOW IT WORKS - DARK VERSION
   SAME LAYOUT, ONLY DARK THEME
   PREFIX: ccflow27-
========================================= */

.ccflow27-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 105px;
    /* background:
        radial-gradient(circle at 15% 20%, rgba(181, 255, 54, 0.08), transparent 22%),
        radial-gradient(circle at 85% 30%, rgba(130, 230, 57, 0.07), transparent 24%),
        linear-gradient(180deg, #060807 0%, #0a100c 45%, #070907 100%); */
    font-size: 18px;
    isolation: isolate;

        background: url("../images/ccflow27-section.webp") center top / cover no-repeat;
  padding: 11.5% 0px 65px 0;
padding: 5.5% 0px 0px 0;
  position: relative;
  /* margin-top: -8%; */
  overflow: hidden;
}

.ccflow27-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(190, 255, 83, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(190, 255, 83, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
    z-index: -2;
}

.ccflow27-section::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(177, 255, 58, 0.06), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

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

.ccflow27-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dfff49, #a7ee2d);
    color: #081008;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(175, 239, 49, 0.14);
}

.ccflow27-main-title {
    max-width: 920px;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -2px;
}

.ccflow27-main-title span {
    display: inline-block;
    background: linear-gradient(90deg, #d9ff4f 0%, #95eb31 42%, #53c847 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* =========================================
   PROCESS WRAP
========================================= */

.ccflow27-process-wrap {
    position: relative;
    max-width: 1180px;
    margin: 80px auto 0;
}

/* =========================================
   CENTER LINE
========================================= */

.ccflow27-center-line {
    position: absolute;

  top: 0px;
  bottom: 0px;
  left: 50%;
  width: 1px;
    transform: translateX(-50%);
    /* background: linear-gradient(
        to bottom,
        transparent,
        rgba(197, 255, 86, 0.26) 12%,
        rgba(197, 255, 86, 0.20) 88%,
        transparent
    ); */
    background: linear-gradient( to bottom, transparent, rgba(255, 255, 255, 0.98) 12%, rgb(255, 255, 255) 88%, transparent );
    /* background: #0f150e;
  box-shadow: 0 0 0 6px rgb(255, 255, 255), 0 0 24px rgba(255, 255, 255, 0.79); */
    z-index: 0;
}

.ccflow27-center-line::before,
.ccflow27-center-line::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(-50%);
    /* background: #bfff37;
    box-shadow:
        0 0 0 6px rgba(191, 255, 55, 0.08),
        0 0 24px rgba(191, 255, 55, 0.35); */

        background: #0f150e;
  box-shadow: 0 0 0 6px rgb(255, 255, 255), 0 0 24px rgba(255, 255, 255, 0.79);
}

.ccflow27-center-line::before {
    top: 0;
}

.ccflow27-center-line::after {
    bottom: 0;
}

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

.ccflow27-step-block {
    position: relative;
    z-index: 2;
    padding: 15px 0;
}

.ccflow27-step-block--two {
    margin-top: 6px;
}

.ccflow27-step-block--three {
    margin-top: 6px;
}

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

.ccflow27-content-card {
    position: relative;
    max-width: 420px;
    padding: 30px 28px 28px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(18, 24, 20, 0.96), rgba(10, 15, 12, 0.98));
    border: 1px solid rgba(190, 255, 87, 0.14);
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}

.ccflow27-content-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(204, 255, 79, 0.30),
        rgba(255, 255, 255, 0.03),
        rgba(102, 208, 61, 0.12)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.ccflow27-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ccflow27-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dfff4a 0%, #aaef31 100%);
    color: #071008;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(180, 240, 53, 0.12);
}

.ccflow27-step-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #b6ff38;
    box-shadow:
        0 0 0 5px rgba(182, 255, 56, 0.08),
        0 0 18px rgba(182, 255, 56, 0.35);
}

.ccflow27-step-title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 0.96;
    font-weight: 950;
    letter-spacing: -1.6px;
    text-transform: uppercase;
}

.ccflow27-content-card p {
    margin: 0;
    color: rgba(234, 241, 236, 0.76);
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
}

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

.ccflow27-image-card {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(15, 23, 18, 0.92), rgba(10, 14, 11, 0.96));
    border: 1px solid rgba(191, 255, 75, 0.10);
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ccflow27-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(203, 255, 86, 0.30),
        rgba(255, 255, 255, 0.03),
        rgba(93, 195, 57, 0.12)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.ccflow27-image-card::after {
    content: "";
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    /* background: radial-gradient(circle at 30% 30%, #dfff56, #8ddb34 62%, #58ad2e 100%); */
    background: radial-gradient(circle at 30% 30%, #f5fafa, #3ff6ff 62%, #b4ff8f 100%);
    opacity: 0.90;
    z-index: 0;
    box-shadow: 0 0 30px rgba(185, 255, 73, 0.18);
}

.ccflow27-image-card--right::after {
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
}

.ccflow27-image-card--left::after {
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
}

.ccflow27-image-card img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* =========================================
   CONNECTORS
========================================= */

.ccflow27-connector {
    position: relative;
    height: 110px;
    margin: -8px 0 2px;
    z-index: 1;
    pointer-events: none;
}

.ccflow27-connector svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ccflow27-connector path {
    fill: none;
    stroke: rgba(191, 255, 83, 0.24);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 8;
}

/* =========================================
   ALIGNMENT
========================================= */

.ccflow27-step-block--one .ccflow27-content-card {
    margin-left: auto;
    margin-right: 12px;
}

.ccflow27-step-block--two .ccflow27-content-card {
    margin-left: 12px;
}

.ccflow27-step-block--three .ccflow27-content-card {
    margin-left: auto;
    margin-right: 12px;
}

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

@media (max-width: 991px) {
    .ccflow27-section {
  padding: 5.5% 0px 0px 0;
    }

    .ccflow27-process-wrap {
        margin-top: 60px;
    }

    .ccflow27-content-card {
        max-width: 760px;
        margin: 0 auto !important;
        padding: 28px 24px;
        text-align: center;
    }

    .ccflow27-step-top {
        justify-content: center;
    }

    .ccflow27-image-card {
        max-width: 760px;
    }

    .ccflow27-step-block {
        margin-bottom: 40px;
    }
}

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

@media (max-width: 767px) {
    .ccflow27-section {
padding: 5.5% 0px 0px 0;
    }

    .ccflow27-main-title {
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -1.1px;
    }

    .ccflow27-process-wrap {
        margin-top: 45px;
    }

    .ccflow27-content-card {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .ccflow27-step-dot {
        display: none;
    }

    .ccflow27-step-title {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .ccflow27-content-card p {
        font-size: 16px;
        line-height: 1.65;
    }

    .ccflow27-image-card {
        padding: 12px;
    }

    .ccflow27-image-card::after {
        width: 68px;
        height: 68px;
    }

    .ccflow27-image-card img {
        /* border-radius: 999px; */
    }
}

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

@media (max-width: 480px) {
    .ccflow27-main-title {
        font-size: 30px;
    }

    .ccflow27-step-title {
        font-size: 27px;
    }
}

/* =========================================
   BLOCK 8 - SPECIAL BONUS
   PREFIX: ccbonus28-
========================================= */
.ccbonus28-section {
    position: relative;
    overflow: hidden;
    padding:0 0 0px 0;

    /* background:
        radial-gradient(circle at 15% 18%, rgba(187,255,47,.12), transparent 22%),
        radial-gradient(circle at 85% 80%, rgba(94,196,65,.08), transparent 24%),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fcf7 50%,
            #ffffff 100%
        ); */
background: radial-gradient(circle at 20% 20%, rgb(0, 0, 0), black 22%), radial-gradient(circle at 80% 75%, rgba(76,194,68,.08), transparent 24%), linear-gradient(180deg, #050806 0%, #09100b 100%);

    font-size: 18px;
}


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

.ccbonus28-card {
    position: relative;
    overflow: hidden;

padding: 25px 26px 20px 26px;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(249,252,247,.98)
        );

    border:
        1px solid rgba(67, 125, 70, .12);

    box-shadow:
        0 28px 75px rgba(43, 82, 46, .10),
        inset 0 1px 0 rgba(255,255,255,.9);
}


.ccbonus28-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 30px;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(192,255,55,.40),
            rgba(255,255,255,.55),
            rgba(79,181,67,.14)
        );

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

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}


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

.ccbonus28-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(20px);

    pointer-events: none;
}


.ccbonus28-glow--one {
    width: 260px;
    height: 260px;

    top: -110px;
    left: -90px;

    background:
        rgba(190,255,53,.16);
}


.ccbonus28-glow--two {
    width: 300px;
    height: 300px;

    right: -130px;
    bottom: -130px;

    background:
        rgba(66,186,67,.10);
}


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

.ccbonus28-badge {
    position: relative;

    z-index: 2;

    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 20px;

    padding: 10px 17px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #dfff4a,
            #9dea2d
        );

    color:
        #081008;

    font-size: 12px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: 1px;

    box-shadow:
        0 10px 25px rgba(177,238,48,.18);
}


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

.ccbonus28-title {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    color:
        #0b140d;

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

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: -2px;
}


.ccbonus28-title span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #278f35,
            #58b83c,
            #89cf2e
        );

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

    color: transparent;
}


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

.ccbonus28-text {
    position: relative;

    z-index: 2;



    margin: 22px auto 0;

    color:
        #4c594e;

    font-size: 18px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================
   LICENSE BOX
========================================= */

.ccbonus28-license-box {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

    max-width: 760px;

    margin: 34px auto 0;

    padding: 18px 20px;

    border-radius: 24px;

    text-align: left;

    background:
        linear-gradient(
            135deg,
            #f6ffe8,
            #fbfff6
        );

    border:
        1px solid rgba(139, 205, 56, .23);

    box-shadow:
        0 14px 38px rgba(66, 107, 44, .07),
        inset 0 1px 0 rgba(255,255,255,.85);
}


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

.ccbonus28-license-icon {
    display: flex;

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

    flex: 0 0 74px;

    width: 74px;
    height: 74px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #dfff4a,
            #82d62c
        );

    color:
        #081008;

    font-size: 25px;

    line-height: 1;

    font-weight: 950;

    box-shadow:
        0 12px 30px rgba(174,238,49,.18);
}


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

.ccbonus28-license-content {
    flex: 1;
}


.ccbonus28-license-content strong {
    display: block;

    margin-bottom: 4px;

    color:
        #101812;

    font-size: 20px;

    font-weight: 900;
}


.ccbonus28-license-content span {
    display: block;

    color:
        #647066;

    font-size: 15px;

    line-height: 1.55;
}


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

.ccbonus28-free {
    flex: 0 0 auto;

    padding: 9px 14px;

    border-radius: 999px;

    background:
        #efffd2;

    border:
        1px solid rgba(132,201,40,.28);

    color:
        #4b8f24;

    font-size: 12px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: 1px;
}


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

.ccbonus28-cta-wrap {
    position: relative;

    z-index: 2;

    margin-top: 34px;
}


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

.ccbonus28-cta {
    display: inline-flex;

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

    gap: 14px;

    min-height: 64px;

    padding: 17px 28px;

    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #dfff46,
            #9bea2d
        );

    color:
        #081008;

    text-decoration: none;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 950;

    box-shadow:
        0 16px 35px rgba(172,236,49,.20),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition: .25s ease;
}


.ccbonus28-cta:hover {
    color:
        #081008;

    text-decoration: none;

    transform:
        translateY(-2px);

    box-shadow:
        0 20px 45px rgba(172,236,49,.26),
        inset 0 1px 0 rgba(255,255,255,.45);
}


.ccbonus28-arrow {
    font-size: 25px;

    line-height: 1;
}


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

@media (max-width: 991px) {

    .ccbonus28-section {
        padding:
            70px 0;
    }


    .ccbonus28-card {
        padding:
            48px 28px;
    }


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

}


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

@media (max-width: 767px) {

    .ccbonus28-section {
        padding:
            0px 0;
    }


    .ccbonus28-card {
        padding:
            38px 18px;

        border-radius:
            26px;
    }


    .ccbonus28-title {
        font-size:
            34px;

        letter-spacing:
            -1.2px;
    }


    .ccbonus28-text {
        font-size:
            16px;
    }


    .ccbonus28-license-box {
        flex-direction:
            column;

        text-align:
            center;

        padding:
            20px 16px;
    }


    .ccbonus28-license-icon {
        width:
            68px;

        height:
            68px;

        flex-basis:
            68px;
    }


    .ccbonus28-license-content strong {
        font-size:
            18px;
    }


    .ccbonus28-cta {
        width:
            100%;

        padding:
            16px 18px;

        font-size:
            16px;
    }

}


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

@media (max-width: 480px) {

    .ccbonus28-title {
        font-size:
            30px;
    }

}
.ccurgency30-bar-wrap {
    position: relative;
    width: 100%;
    padding: 0;
    background: #426c05;
    border-top: 1px solid rgba(205,255,42,.35);
    border-bottom: 2px solid #baff0b;
}

.ccurgency30-bar {
    min-height: 78px;

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

    gap: 35px;

    padding: 8px 0;
}


/* LEFT CONTENT */

.ccurgency30-copy {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    min-width: 0;
}

.ccurgency30-main {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
  position: absolute;
  left: 38%;
  top: -34px;
  background-color: black;
  padding: 3px 34px;
  border-radius: 20px 20px 0 0;
}
.ccurgency30-sub {
  margin-top: 4px;
  color: rgb(255, 255, 255);
  font-size: 28px;
  line-height: 1.35;
  font-weight: 800;
}
.ccurgency30-sub strong {
    color: #d7ff22;

    font-weight: 900;
}


/* TIMER */

.ccurgency30-timer {
    flex: 0 0 340px;

    width: 340px;

    margin-left: auto;

    overflow: hidden;
}

.timer-box2 {
  margin-top: -33px;
  height: 100px;
}
/* TABLET */


/* =========================================
   MARKET OPPORTUNITY — ULTRA PREMIUM WHITE
   PREFIX: ccmarket29-
========================================= */

.ccmarket29-section {
    position: relative;
    overflow: hidden;

padding: 50px 0 0px 0;

    background:
        radial-gradient(circle at 5% 15%, rgba(190, 255, 48, .10), transparent 20%),
        radial-gradient(circle at 95% 80%, rgba(95, 197, 54, .07), transparent 22%),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdf9 52%,
            #ffffff 100%
        );

    font-size: 18px;

    isolation: isolate;
}


/* subtle grid */
.ccmarket29-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(32, 70, 37, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 70, 37, .028) 1px, transparent 1px);

    background-size:
        54px 54px;

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

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

    pointer-events: none;

    z-index: -2;
}


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

.ccmarket29-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 18px;

    padding: 9px 17px;

    border-radius: 999px;

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

    color: #0d180c;

    font-size: 11px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: 1.1px;

    box-shadow:
        0 10px 25px rgba(157, 212, 45, .15);
}


.ccmarket29-title {
    max-width: 1000px;

    margin: 0 auto;

    color: #09120c;

font-size: clamp(40px, 5vw, 54px);

    line-height: 1.04;

    font-weight: 950;

    letter-spacing: -2.2px;
}


.ccmarket29-title span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #16872e,
            #39ad40,
            #81c92d
        );

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

    color: transparent;
}


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

.ccmarket29-stat-card {
    position: relative;

    margin-top: 65px;

    padding: 38px 42px;

    border-radius: 34px;

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

    border:
        1px solid rgba(86, 122, 91, .13);

    box-shadow:
        0 25px 75px rgba(31, 59, 35, .08),
        inset 0 1px 0 rgba(255,255,255,.85);

    backdrop-filter: blur(8px);
}


.ccmarket29-stat-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 34px;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(191,255,55,.42),
            rgba(255,255,255,.15),
            rgba(73,175,63,.15)
        );

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

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}


/* =========================================
   MARKET STAT
========================================= */

.ccmarket29-stat {
    position: relative;

    padding: 30px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #efffd5,
            #f9fff1
        );

    border:
        1px solid rgba(135, 201, 50, .25);
}


.ccmarket29-stat-label {
    margin-bottom: 12px;

    color: #41513e;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;
}


.ccmarket29-stat-number {
    color: #0b160d;

    font-size:
        clamp(54px, 7vw, 78px);

    line-height: .95;

    font-weight: 950;

    letter-spacing: -3px;
}


.ccmarket29-stat-year {
    margin-top: 8px;

    color: #5c6b59;

    font-size: 15px;

    font-weight: 700;
}


.ccmarket29-stat-next {
    margin-top: 20px;

    color: #253024;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 500;
}


.ccmarket29-stat-next strong {
    color: #2e8e30;

    font-weight: 900;
}


.ccmarket29-source {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    color: #36832d;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 800;
}


.ccmarket29-source:hover {
    color: #245f20;

    text-decoration: underline;
}


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

.ccmarket29-copy {
    max-width: 620px;

    margin: 0 auto;
}


.ccmarket29-copy p {
    margin: 0 0 20px;

    color: #303b32;

    font-size: 19px;

    line-height: 1.75;

    font-weight: 500;
}


.ccmarket29-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================
   QUESTION
========================================= */

.ccmarket29-question-row {
    margin-top: 70px;
}


.ccmarket29-question {
    position: relative;

    max-width: 900px;

    margin: 0 auto;

    padding: 40px 45px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #0d170f,
            #131f15
        );

    box-shadow:
        0 24px 65px rgba(21, 43, 25, .16);
}


.ccmarket29-question::before {
    content: "";

    position: absolute;

    top: -2px;
    left: 20%;
    right: 20%;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #caff38,
            transparent
        );
}


.ccmarket29-question-small {
    display: block;

    margin-bottom: 14px;

    color: #cfff42;

    font-size:
        clamp(29px, 4vw, 44px);

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: -1.3px;
}


.ccmarket29-question p {
    max-width: 760px;

    margin: 0 auto;

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

    font-size: 18px;

    line-height: 1.7;

    font-weight: 500;
}


/* =========================================
   PROOF AREA
========================================= */

.ccmarket29-proof-wrap {
    margin-top: 65px;
}


.ccmarket29-proof-head {
    margin-bottom: 30px;
}


.ccmarket29-proof-label {
    display: inline-flex;

    margin-bottom: 9px;

    color: #65a32d;

    font-size: 11px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: 1.3px;
}


.ccmarket29-proof-head h3 {
    margin: 0;

    color: #0b140d;

    font-size:
        clamp(30px, 4vw, 44px);

    line-height: 1.1;

    font-weight: 950;

    letter-spacing: -1.4px;
}


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

.ccmarket29-proof-card {
    position: relative;

  margin-bottom: 30px;

    padding: 16px;

    border-radius: 27px;

    background: #ffffff;

    border:
        1px solid rgba(90, 118, 94, .14);

    box-shadow:
        0 20px 55px rgba(28, 51, 31, .08);

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


.ccmarket29-proof-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 28px 70px rgba(28, 51, 31, .12);
}


.ccmarket29-proof-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 7px 6px 15px;
}


.ccmarket29-proof-site {
    color: #142015;

    font-size: 14px;

    font-weight: 950;

    letter-spacing: .8px;
}


.ccmarket29-proof-top > span {
    padding: 7px 11px;

    border-radius: 999px;

    background: #efffd5;

    color: #4d8425;

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: .6px;
}


.ccmarket29-image {
    position: relative;

    overflow: hidden;



    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #f5f7f4,
            #edf2eb
        );
}


.ccmarket29-image img {
    display: block;

    width: 100%;

    height: 100%;

     min-height: 100%;


    object-fit: cover;

    border-radius: 19px;
}


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

@media (max-width: 991px) {

    .ccmarket29-section {
        padding:
            75px 0 85px;
    }


    .ccmarket29-stat-card {
        margin-top:
            50px;

        padding:
            28px;
    }


    .ccmarket29-stat {
        text-align:
            center;
    }


    .ccmarket29-copy {
        text-align:
            center;
    }


    .ccmarket29-question-row {
        margin-top:
            55px;
    }


    .ccmarket29-proof-wrap {
        margin-top:
            55px;
    }

}


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

@media (max-width: 767px) {

    .ccmarket29-section {
        padding:
            58px 0 0px;
    }


    .ccmarket29-title {
        font-size:
            34px;

        line-height:
            1.08;

        letter-spacing:
            -1.2px;
    }


    .ccmarket29-stat-card {
        margin-top:
            38px;

        padding:
            15px;

        border-radius:
            25px;
    }


    .ccmarket29-stat {
        padding:
            24px 17px;

        border-radius:
            20px;
    }


    .ccmarket29-stat-number {
        font-size:
            58px;
    }


    .ccmarket29-copy p {
        font-size:
            16px;

        line-height:
            1.68;
    }


    .ccmarket29-question-row {
        margin-top:
            45px;
    }


    .ccmarket29-question {
        padding:
            30px 18px;

        border-radius:
            23px;
    }


    .ccmarket29-question-small {
        font-size:
            30px;
    }


    .ccmarket29-question p {
        font-size:
            16px;
    }


    .ccmarket29-proof-wrap {
        margin-top:
            45px;
    }


    .ccmarket29-proof-head h3 {
        font-size:
            30px;
    }


    .ccmarket29-proof-card {
        padding:
            11px;

        border-radius:
            21px;
    }


    .ccmarket29-image,
    .ccmarket29-image img {
        /* min-height:
            230px; */

        border-radius:
            15px;
    }

}


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

@media (max-width: 480px) {

    .ccmarket29-title {
        font-size:
            30px;
    }


    .ccmarket29-stat-number {
        font-size:
            50px;
    }


    .ccmarket29-question-small {
        font-size:
            27px;
    }

}

/* =========================================================
   CREATORCLAW OLD WAY VS NEW WAY
   DARK ULTRA PREMIUM
   PREFIX: ccvs30-
========================================================= */

.ccvs30-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 0px 0;
background: radial-gradient( circle at 82% 18%, rgb(0, 0, 2), transparent 27% ), radial-gradient( circle at 14% 75%, rgba(36, 153, 63, .08), transparent 28% ), linear-gradient( 180deg, #000 0%, #000 46%, #020202 100% );

    font-size: 18px;

    isolation: isolate;
}


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

.ccvs30-grid {
    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

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

    background-size:
        55px 55px;

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

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


/* =========================================================
   AMBIENT GLOW
========================================================= */

.ccvs30-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(25px);

    z-index: -2;
}


.ccvs30-glow--left {
    width: 470px;
    height: 470px;

    left: -230px;
    top: 300px;

    background:
        rgba(110, 220, 46, .085);
}


.ccvs30-glow--right {
    width: 560px;
    height: 560px;

    right: -260px;
    top: 90px;

    background:
        rgba(182, 255, 42, .09);
}


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

.ccvs30-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 17px;

    padding: 10px 17px;

    border-radius: 999px;

    background:
        rgba(198, 255, 61, .08);

    border:
        1px solid rgba(198, 255, 61, .18);

    color: #cfff42;

    font-size: 11px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;

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


.ccvs30-title {
    max-width: 1050px;

    margin: 0 auto;

    color: #ffffff;

 font-size: clamp(42px, 5.4vw, 50px);
  line-height: 1.03;
  font-weight: 950;
  letter-spacing: -1.6px;
}


.ccvs30-vs-text {
    display: inline-block;

    margin: 0 8px;

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

    font-weight: 800;
}


.ccvs30-title-gradient {
    display: inline;

    background:
        linear-gradient(
            90deg,
            #d8ff42 0%,
            #9eef31 42%,
            #48cb5d 100%
        );

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

    color: transparent;

    filter:
        drop-shadow(
            0 0 20px rgba(173,255,46,.08)
        );
}


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

.ccvs30-comparison {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        78px
        minmax(0, 1fr);

    align-items: stretch;

    max-width: 1240px;

    margin: 75px auto 0;
}


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

.ccvs30-card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    border-radius: 32px;

    backdrop-filter:
        blur(12px);
}


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

.ccvs30-card--old {
    background:
        linear-gradient(
            160deg,
            rgba(27, 30, 30, .98),
            rgba(10, 12, 12, .99)
        );

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

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


.ccvs30-card--old::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    left: -180px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 62, 72, .07),
            transparent 70%
        );

    pointer-events: none;
}


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

.ccvs30-card--new {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(186,255,39,.14),
            transparent 33%
        ),
        linear-gradient(
            150deg,
            #102210 0%,
            #09150b 47%,
            #050a06 100%
        );

    border:
        1px solid rgba(190,255,70,.22);

    box-shadow:
        0 0 0 1px rgba(175,255,51,.025),
        0 35px 100px rgba(0,0,0,.48),
        0 0 65px rgba(150,230,35,.07),
        inset 0 1px 0 rgba(255,255,255,.055);
}


/* premium border */
.ccvs30-card--new::before {
    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(215,255,73,.62),
            rgba(103,215,74,.14) 35%,
            transparent 58%,
            rgba(181,255,56,.20)
        );

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

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;

    z-index: 5;
}


.ccvs30-new-aura {
    position: absolute;

    width: 280px;
    height: 280px;

    top: -140px;
    right: -80px;

    border-radius: 50%;

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

    filter:
        blur(12px);

    pointer-events: none;
}


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

.ccvs30-card-head {
    position: relative;

    z-index: 2;

    min-height: 104px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        24px 28px;

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


.ccvs30-card-head--old {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
}


.ccvs30-card-head--new {
    background:
        linear-gradient(
            90deg,
            rgba(184,255,49,.11),
            rgba(89,198,78,.025)
        );

    border-bottom:
        1px solid rgba(196,255,65,.13);
}


.ccvs30-head-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

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

    border-radius: 15px;

    font-size: 17px;
}


.ccvs30-head-icon--old {
    color: #ff4f58;

    background:
        rgba(255, 68, 79, .09);

    border:
        1px solid rgba(255, 78, 88, .15);

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


.ccvs30-head-icon--new {
    color: #071106;

    background:
        linear-gradient(
            135deg,
            #d9ff46,
            #7de431
        );

    box-shadow:
        0 10px 30px rgba(172,244,44,.16);
}


.ccvs30-head-kicker {
    display: block;

    margin-bottom: 5px;

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

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.25px;

    text-transform: uppercase;
}


.ccvs30-card-head h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(20px, 2.2vw, 28px);

    line-height: 1.1;

    font-weight: 950;

    letter-spacing: -.6px;
}


.ccvs30-card-head--new h3 {
    color:
        #eaffd5;
}


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

.ccvs30-card-body {
    position: relative;

    z-index: 2;
}


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

.ccvs30-row {
    min-height: 88px;

    display: grid;

    grid-template-columns:
        46px 22px minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    padding:
        17px 26px;

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

    transition:
        background .22s ease,
        transform .22s ease;
}


.ccvs30-row:last-child {
    border-bottom: 0;
}


.ccvs30-row--old:hover {
    background:
        rgba(255,255,255,.025);
}


.ccvs30-row--new {
    border-bottom:
        1px solid rgba(190,255,65,.075);
}


.ccvs30-row--new:hover {
    background:
        linear-gradient(
            90deg,
            rgba(181,255,48,.055),
            transparent
        );
}


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

.ccvs30-feature-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 12px;

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

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

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

    font-size:
        15px;
}


.ccvs30-feature-icon--new {
    color: #caff43;

    background:
        rgba(190,255,58,.065);

    border:
        1px solid rgba(190,255,58,.13);

    box-shadow:
        inset 0 0 20px rgba(171,244,45,.035);
}


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

.ccvs30-row-status {
    width: 20px;
    height: 20px;

    display: flex;

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

    border-radius: 50%;

    font-size:
        9px;

    font-weight:
        900;
}


.ccvs30-row-status--bad {
    color:
        #ff5a63;

    background:
        rgba(255,67,77,.08);

    border:
        1px solid rgba(255,80,89,.15);
}


.ccvs30-row-status--good {
    color:
        #081008;

    background:
        #aefe34;

    box-shadow:
        0 0 18px rgba(171,255,46,.20);
}


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

.ccvs30-row-copy {
    color:
        rgba(243,247,244,.83);

    font-size:
        16px;

    line-height:
        1.45;

    font-weight:
        600;
}


.ccvs30-card--old
.ccvs30-row-copy {
    color:
        rgba(236,239,237,.70);
}


.ccvs30-row-copy--highlight {
    color:
        #d9ff45;

    font-weight:
        900;
}


/* =========================================================
   FOOTER
========================================================= */

.ccvs30-card-foot {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    margin:
        12px 18px 18px;

    padding:
        18px 20px;

    border-radius:
        18px;
}


.ccvs30-card-foot--old {
    background:
        rgba(255,255,255,.028);

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


.ccvs30-card-foot--new {
    background:
        linear-gradient(
            90deg,
            rgba(183,255,46,.09),
            rgba(79,197,69,.025)
        );

    border:
        1px solid rgba(185,255,49,.13);
}


.ccvs30-foot-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    border-radius:
        12px;

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

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

    font-size:
        16px;
}


.ccvs30-card-foot--new
.ccvs30-foot-icon {
    color:
        #091107;

    background:
        linear-gradient(
            135deg,
            #d7ff45,
            #86df32
        );
}


.ccvs30-card-foot strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 900;
}


.ccvs30-card-foot span:not(.ccvs30-foot-icon) {
    color:
        rgba(255,255,255,.48);

    font-size:
        13px;

    line-height:
        1.35;
}


/* =========================================================
   CENTER VS
========================================================= */

.ccvs30-center {
    position: relative;

    display: flex;

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

    z-index: 10;
}


.ccvs30-center-line {
    position: absolute;

    top: 8%;
    bottom: 8%;

    left: 50%;

    width: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(185,255,50,.18),
            rgba(185,255,50,.18),
            transparent
        );
}


.ccvs30-vs-badge {
    position: relative;

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #152617,
            #050a06
        );

    border:
        1px solid rgba(194,255,65,.38);

    box-shadow:
        0 0 0 7px rgba(180,255,45,.035),
        0 0 35px rgba(166,241,42,.13),
        0 18px 35px rgba(0,0,0,.35);
}


.ccvs30-vs-badge::before {
    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

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


.ccvs30-vs-badge span {
    position: relative;

    z-index: 2;

    color: #cfff40;

    font-size: 13px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: .5px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .ccvs30-card--new {
        transform:
            translateY(-12px);

        margin-bottom:
            -24px;
    }

}


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

@media (max-width: 991px) {

    .ccvs30-section {
        padding:
            78px 0 85px;
    }


    .ccvs30-title {
        font-size:
            44px;

        letter-spacing:
            -1.8px;
    }


    .ccvs30-comparison {
        grid-template-columns:
            1fr;

        gap:
            30px;

        margin-top:
            55px;
    }


    .ccvs30-center {
        height:
            54px;
    }


    .ccvs30-center-line {
        top: 50%;
        bottom: auto;

        left: 10%;
        right: 10%;

        width: auto;
        height: 1px;

        transform:
            translateY(-50%);

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(190,255,57,.20),
                transparent
            );
    }


    .ccvs30-vs-badge {
        width:
            54px;

        height:
            54px;
    }


    .ccvs30-card--old,
    .ccvs30-card--new {
        max-width:
            760px;

        width:
            100%;

        margin:
            0 auto;
    }

}


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

@media (max-width: 767px) {

    .ccvs30-section {
        padding:
            60px 0 0px;
    }


    .ccvs30-eyebrow {
        margin-bottom:
            14px;

        font-size:
            10px;

        padding:
            9px 14px;
    }


    .ccvs30-title {
        font-size:
            34px;

        line-height:
            1.08;

        letter-spacing:
            -1.2px;
    }


    .ccvs30-vs-text {
        margin:
            0 3px;
    }


    .ccvs30-comparison {
        margin-top:
            42px;

        gap:
            20px;
    }


    .ccvs30-card {
        border-radius:
            24px;
    }


    .ccvs30-card-head {
        min-height:
            88px;

        padding:
            19px 18px;

        gap:
            13px;
    }


    .ccvs30-head-icon {
        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;

        border-radius:
            12px;
    }


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


    .ccvs30-head-kicker {
        font-size:
            9px;
    }


    .ccvs30-row {
        min-height:
            76px;

        grid-template-columns:
            39px 18px minmax(0, 1fr);

        gap:
            10px;

        padding:
            14px 16px;
    }


    .ccvs30-feature-icon {
        width:
            38px;

        height:
            38px;

        border-radius:
            10px;

        font-size:
            14px;
    }


    .ccvs30-row-status {
        width:
            18px;

        height:
            18px;
    }


    .ccvs30-row-copy {
        font-size:
            15px;
    }


    .ccvs30-card-foot {
        margin:
            10px 12px 12px;

        padding:
            15px;

        border-radius:
            15px;
    }


    .ccvs30-foot-icon {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }

}


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

@media (max-width: 480px) {

    .ccvs30-title {
        font-size:
            30px;
    }


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


    .ccvs30-row {
        grid-template-columns:
            36px 17px minmax(0, 1fr);

        padding:
            13px 13px;

        gap:
            8px;
    }


    .ccvs30-feature-icon {
        width:
            35px;

        height:
            35px;
    }


    .ccvs30-row-copy {
        font-size:
            14px;

        line-height:
            1.45;
    }


    .ccvs30-card-foot strong {
        font-size:
            14px;
    }


    .ccvs30-card-foot span:not(.ccvs30-foot-icon) {
        font-size:
            12px;
    }

}


/* =========================================================
   BLOCK 11 — VISUAL DEMO RESULTS
   ULTRA PREMIUM CREATORCLAW V2
   PREFIX: ccdemoV2-
========================================================= */

.ccdemoV2-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 0px;

    background:
        radial-gradient(circle at 9% 12%, rgba(192,255,48,.14), transparent 21%),
        radial-gradient(circle at 91% 18%, rgba(56,177,65,.09), transparent 23%),
        radial-gradient(circle at 82% 83%, rgba(177,255,48,.08), transparent 26%),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfef8 46%,
            #f8fcf5 72%,
            #ffffff 100%
        );

    font-size: 18px;

    isolation: isolate;
}


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

.ccdemoV2-grid {
    position: absolute;
    inset: 0;

    z-index: -5;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(28, 72, 37, .026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(28, 72, 37, .026) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

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

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


/* =========================================================
   WATERMARK
========================================================= */

.ccdemoV2-watermark {
    position: absolute;

    top: 25px;
    left: 2.5%;

    width: 330px;

    opacity: .035;

    pointer-events: none;

    z-index: -2;
}


.ccdemoV2-watermark img {
    display: block;

    width: 100%;

    filter:
        grayscale(1);
}


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

.ccdemoV2-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(30px);

    pointer-events: none;

    z-index: -4;
}


.ccdemoV2-glow--one {
    width: 460px;
    height: 460px;

    left: -210px;
    top: 180px;

    background:
        rgba(181,255,51,.11);
}


.ccdemoV2-glow--two {
    width: 520px;
    height: 520px;

    right: -250px;
    bottom: 130px;

    background:
        rgba(55,174,64,.08);
}


/* =========================================================
   CURVED ACCENTS
========================================================= */

.ccdemoV2-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -3;
}


.ccdemoV2-orbit--left {
    width: 500px;
    height: 500px;

    left: -355px;
    top: 300px;

    border:
        1px solid rgba(142,218,42,.13);

    box-shadow:
        0 0 0 38px rgba(182,255,49,.018),
        0 0 0 78px rgba(182,255,49,.012);
}


.ccdemoV2-orbit--right {
    width: 540px;
    height: 540px;

    right: -390px;
    top: 600px;

    border:
        1px solid rgba(83,183,59,.11);

    box-shadow:
        0 0 0 38px rgba(126,211,49,.014),
        0 0 0 77px rgba(126,211,49,.009);
}


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

.ccdemoV2-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 18px;

    padding: 10px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #e2ff50,
            #a4ed2f
        );

    color:
        #071009;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        1.1px;

    box-shadow:
        0 10px 26px rgba(156,220,43,.16),
        inset 0 1px 0 rgba(255,255,255,.75);
}


.ccdemoV2-title {
    max-width: 970px;

    margin: 0 auto;

    color:
        #07120b;

    font-size:
        clamp(42px, 5vw, 66px);

    line-height:
        1.035;

    font-weight:
        950;

    letter-spacing:
        -2.4px;
}


.ccdemoV2-title span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #087329 0%,
            #28a73a 43%,
            #9edc2d 100%
        );

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

    color: transparent;
}


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

.ccdemoV2-showcase {
    position: relative;

    max-width: 1200px;

    margin: 72px auto 0;

    display: grid;

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

    gap: 28px;
}


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

.ccdemoV2-card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    padding: 17px;

    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(249,252,247,.98)
        );

    border:
        1px solid rgba(46,106,54,.11);

    box-shadow:
        0 22px 58px rgba(30,74,38,.075),
        inset 0 1px 0 rgba(255,255,255,.95);

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


.ccdemoV2-card::before {
    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(196,255,62,.43),
            rgba(255,255,255,.45) 38%,
            rgba(53,154,64,.09) 75%,
            rgba(180,255,48,.23)
        );

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

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;

    z-index: 5;
}


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

    border-color:
        rgba(133,207,42,.23);

    box-shadow:
        0 34px 85px rgba(29,74,37,.13),
        0 0 42px rgba(163,233,44,.055),
        inset 0 1px 0 rgba(255,255,255,.96);
}


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

.ccdemoV2-card-glow {
    position: absolute;

    width: 240px;
    height: 240px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

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

    opacity: .35;

    transition:
        opacity .3s ease,
        transform .4s ease;

    pointer-events: none;
}


.ccdemoV2-card:hover .ccdemoV2-card-glow {
    opacity: .85;

    transform:
        scale(1.18);
}


/* =========================================================
   FEATURED PROMO
========================================================= */

.ccdemoV2-card--featured {
    grid-column:
        span 2;

    padding:
        19px;

    border-color:
        rgba(117,189,39,.19);

    box-shadow:
        0 28px 75px rgba(27,71,34,.095),
        0 0 55px rgba(166,238,44,.045),
        inset 0 1px 0 #ffffff;
}


.ccdemoV2-card--featured::after {
    content: "";

    position: absolute;

    left: 14%;
    right: 14%;

    top: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #cfff36,
            #54b93c,
            transparent
        );
}


.ccdemoV2-featured-aura {
    position: absolute;

    width: 500px;
    height: 280px;

    left: 50%;
    top: -180px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(188,255,46,.14),
            transparent 70%
        );
}


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

.ccdemoV2-card-heading {
    position: relative;

    z-index: 2;

    min-height: 44px;

    display: flex;

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

    gap: 15px;

    padding:
        2px 5px 13px;
}


.ccdemoV2-label {
    display: flex;

    align-items: center;

    gap: 9px;

    color:
        #102417;

    font-size:
        12px;

    line-height:
        1.2;

    font-weight:
        950;

    letter-spacing:
        .85px;
}


.ccdemoV2-label-number {
    min-width: 30px;
    height: 25px;

    display: inline-flex;

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

    padding: 0 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #dcff4a,
            #a1e934
        );

    color:
        #071008;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        950;
}


/* =========================================================
   LIVE DOT
========================================================= */

.ccdemoV2-live-dot {
    position: relative;

    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    border-radius: 50%;

    background:
        #a9e924;

    box-shadow:
        0 0 0 5px rgba(169,233,36,.11),
        0 0 17px rgba(149,212,30,.24);
}


/* =========================================================
   FEATURED TAG
========================================================= */

.ccdemoV2-featured-tag {
    display: inline-flex;

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

    gap: 6px;

    padding:
        8px 12px;

    border-radius: 999px;

    background:
        #efffda;

    border:
        1px solid rgba(126,194,38,.18);

    color:
        #4a8427;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        .65px;
}


/* =========================================================
   SOFTWARE WINDOW
========================================================= */

.ccdemoV2-window {
    position: relative;

    overflow: hidden;

    border-radius: 21px;

    background:
        #f5f8f3;

    border:
        1px solid rgba(54,105,60,.11);

    box-shadow:
        0 12px 34px rgba(31,64,35,.075);
}


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

.ccdemoV2-window-bar {
    height: 43px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding:
        0 14px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7faf5
        );

    border-bottom:
        1px solid rgba(49,105,56,.09);
}


.ccdemoV2-window-dots {
    display: flex;

    align-items: center;

    gap: 6px;
}


.ccdemoV2-window-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #dbe5d8;
}


.ccdemoV2-window-dots span:nth-child(1) {
    background:
        #c9ff4a;
}


.ccdemoV2-window-dots span:nth-child(2) {
    background:
        #91d93f;
}


.ccdemoV2-window-dots span:nth-child(3) {
    background:
        #d8e7d4;
}


.ccdemoV2-window-name {
    color:
        #647166;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .35px;

    text-align:
        center;
}


.ccdemoV2-window-status {
    justify-self:
        end;

    color:
        #56932d;

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        .7px;
}


/* =========================================================
   SCREEN
========================================================= */

.ccdemoV2-screen {
    position: relative;

    overflow: hidden;

    height:
        330px;

    background:
        linear-gradient(
            145deg,
            #eef4eb,
            #e7eee5
        );
}


.ccdemoV2-screen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);
}


.ccdemoV2-card:hover .ccdemoV2-screen img {
    transform:
        scale(1.018);
}


/* FEATURED IMAGE */
.ccdemoV2-screen--featured {
    height:
        500px;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.ccdemoV2-play {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 50%;

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

    border:
        1px solid rgba(129,197,45,.24);

    color:
        #59a52e;

    font-size:
        17px;

    box-shadow:
        0 15px 40px rgba(30,76,37,.15),
        0 0 0 8px rgba(191,255,57,.08);

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


.ccdemoV2-card:hover .ccdemoV2-play {
    transform:
        translate(-50%, -50%)
        scale(1.07);

    box-shadow:
        0 20px 45px rgba(30,76,37,.19),
        0 0 0 10px rgba(191,255,57,.10);
}


.ccdemoV2-play--large {
    width:
        76px;

    height:
        76px;

    font-size:
        21px;
}


/* =========================================================
   CAPTION
========================================================= */

.ccdemoV2-caption {
    position: relative;

    z-index: 2;

    display: flex;

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

    gap: 9px;

    margin-top:
        13px;

    padding:
        13px 14px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #f2ffe1,
            #fbfff6
        );

    border:
        1px solid rgba(137,204,49,.16);

    color:
        #475549;

    text-align:
        center;

    font-size:
        13px;

    line-height:
        1.5;

    font-weight:
        650;
}


.ccdemoV2-caption-check {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: inline-flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #dfff49,
            #93dc34
        );

    color:
        #0b160b;

    font-size:
        10px;

    font-weight:
        950;
}


/* =========================================================
   FEATURED CAPTION
========================================================= */

.ccdemoV2-caption--featured {
    max-width:
        850px;

    margin-left:
        auto;

    margin-right:
        auto;
}


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

@media (max-width: 991px) {

    .ccdemoV2-section {
        padding:
            78px 0 88px;
    }


    .ccdemoV2-showcase {
        margin-top:
            58px;

        gap:
            22px;
    }


    .ccdemoV2-screen {
        height:
            275px;
    }


    .ccdemoV2-screen--featured {
        height:
            390px;
    }


    .ccdemoV2-watermark {
        width:
            240px;
    }

}


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

@media (max-width: 767px) {

    .ccdemoV2-section {
        padding:
            60px 0 0px;
    }


    .ccdemoV2-title {
        font-size:
            34px;

        line-height:
            1.08;

        letter-spacing:
            -1.2px;
    }


    .ccdemoV2-showcase {
        grid-template-columns:
            1fr;

        margin-top:
            44px;

        gap:
            18px;
    }


    .ccdemoV2-card,
    .ccdemoV2-card--featured {
        grid-column:
            span 1;

        padding:
            12px;

        border-radius:
            23px;
    }


    .ccdemoV2-card::before {
        border-radius:
            23px;
    }


    .ccdemoV2-card-heading {
        min-height:
            40px;

        padding:
            2px 3px 11px;
    }


    .ccdemoV2-featured-tag {
        display:
            none;
    }


    .ccdemoV2-window {
        border-radius:
            17px;
    }


    .ccdemoV2-window-bar {
        height:
            38px;

        padding:
            0 10px;
    }


    .ccdemoV2-window-name {
        font-size:
            9px;
    }


    .ccdemoV2-window-status {
        font-size:
            7px;
    }


    .ccdemoV2-screen,
    .ccdemoV2-screen--featured {
        height:
            240px;
    }


    .ccdemoV2-caption {
        padding:
            11px 10px;

        font-size:
            12px;

        border-radius:
            13px;
    }


    .ccdemoV2-play {
        width:
            52px;

        height:
            52px;

        font-size:
            14px;
    }


    .ccdemoV2-play--large {
        width:
            58px;

        height:
            58px;
    }


    .ccdemoV2-watermark {
        width:
            180px;

        opacity:
            .025;
    }

}


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

@media (max-width: 480px) {

    .ccdemoV2-title {
        font-size:
            30px;
    }


    .ccdemoV2-eyebrow {
        font-size:
            10px;

        padding:
            9px 14px;
    }


    .ccdemoV2-label {
        font-size:
            10px;
    }


    .ccdemoV2-label-number {
        min-width:
            27px;

        height:
            23px;

        font-size:
            8px;
    }


    .ccdemoV2-screen,
    .ccdemoV2-screen--featured {
        height:
            210px;
    }


    .ccdemoV2-caption {
        align-items:
            flex-start;

        text-align:
            left;
    }

}

/* =========================================================
   BLOCK 13 — USE CASES
   SECOND REFERENCE STYLE
   CREATORCLAW DARK PREMIUM
   PREFIX: ccuse34-
========================================================= */

.ccuse34-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0 0px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(168, 255, 42, .075),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 28%,
            rgba(46, 169, 68, .065),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #050806 52%,
            #020403 100%
        );

    font-size: 18px;

    isolation: isolate;
}


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

.ccuse34-grid-bg {
    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

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

    background-size:
        54px 54px;

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

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


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

.ccuse34-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 17px;

    padding: 9px 16px;

    border-radius: 999px;

    background:
        rgba(184, 255, 48, .08);

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

    color:
        #caff3f;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


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

.ccuse34-title {
    max-width: 950px;

    margin: 0 auto;

    color:
        #ffffff;

    font-size:
        clamp(40px, 5vw, 64px);

    line-height:
        1.04;

    font-weight:
        950;

    letter-spacing:
        -2.2px;
}


.ccuse34-title span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #d8ff42 0%,
            #95ec31 45%,
            #4bc955 100%
        );

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

    color:
        transparent;
}


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

.ccuse34-row {
    margin-top:
        68px;
}


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

.ccuse34-card {
    position: relative;

    overflow: hidden;

    height: 100%;

    border-radius:
        32px;

    background:
        #060806;

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

    box-shadow:
        0 28px 75px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.015),
        inset 0 1px 0 rgba(255,255,255,.035);

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


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

    border-color:
        rgba(184, 255, 50, .28);

    box-shadow:
        0 38px 90px rgba(0,0,0,.48),
        0 0 38px rgba(155, 233, 42, .07),
        inset 0 1px 0 rgba(255,255,255,.045);
}


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

.ccuse34-image {
position: relative;
  overflow: hidden;
  height: 290px;
  background: #101311;
}


.ccuse34-image img {
    display: block;

    width: 100%;
    height: 100%;

object-fit: contain;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);
}


.ccuse34-card:hover
.ccuse34-image img {
    /* transform:
        scale(1.035); */
}


/* dark gradient between image/content */
.ccuse34-image-shade {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(3,6,4,.08) 68%,
            #060806 100%
        );
}


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

.ccuse34-body {
    position: relative;

  min-height: 250px;

    padding:
        0 28px 31px;

    text-align:
        center;

  background: linear-gradient( 180deg, #0a0b0a 0%, #030504 100% );
}


/* =========================================================
   ICON + NUMBER
========================================================= */

.ccuse34-meta {
    position: relative;

    z-index: 4;

    display: flex;

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

    gap: 10px;

    margin-top:
        -28px;

    margin-bottom:
        25px;
}


.ccuse34-icon {
    width:
        58px;

    height:
        58px;

    display: flex;

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

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #112b07,
            #061407
        );

    border:
        1px solid rgba(163, 244, 29, .30);

    color:
        #aefe23;

    font-size:
        21px;

    box-shadow:
        0 12px 28px rgba(0,0,0,.28),
        0 0 22px rgba(145, 228, 26, .06),
        inset 0 1px 0 rgba(255,255,255,.04);
}


.ccuse34-number {
    min-width:
        48px;

    height:
        37px;

    display: flex;

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

    padding:
        0 12px;

    border-radius:
        999px;

    background:
        #10120e;

    border:
        1px solid rgba(172, 246, 37, .20);

    color:
        #d0ff45;

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        .5px;
}


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

.ccuse34-body h3 {
    max-width:
        340px;

    margin:
        0 auto 15px;

    color:
        #ffffff;

    font-size:
        clamp(23px, 2vw, 29px);

    line-height:
        1.13;

    font-weight:
        950;

    letter-spacing:
        -.8px;
}


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

.ccuse34-body p {
    max-width:
        355px;

    margin:
        0 auto;

    color:
        rgba(233, 241, 234, .72);

    font-size:
        17px;

    line-height:
        1.7;

    font-weight:
        500;
}


/* =========================================================
   PREMIUM BOTTOM ACCENT
========================================================= */

.ccuse34-card::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;

    bottom: 0;

    height:
        2px;

    opacity: 0;

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

    transition:
        opacity .28s ease;
}


.ccuse34-card:hover::after {
    opacity:
        1;
}


/* =========================================================
   DESKTOP CARD VARIATION
========================================================= */

@media (min-width: 992px) {

    .ccuse34-card:nth-child(odd) {
        transform:
            translateY(0);
    }

}


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

@media (max-width: 991px) {

    .ccuse34-section {
        padding:
            76px 0 85px;
    }


    .ccuse34-row {
        margin-top:
            55px;
    }


    .ccuse34-image {
        height:
            235px;
    }


    .ccuse34-body {
        min-height:
            275px;

        padding:
            0 22px 27px;
    }

}


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

@media (max-width: 767px) {

    .ccuse34-section {
        padding:
            58px 0 0px;
    }


    .ccuse34-title {
        font-size:
            34px;

        line-height:
            1.08;

        letter-spacing:
            -1.2px;
    }


    .ccuse34-row {
        margin-top:
            42px;
    }


    .ccuse34-card {
        max-width:
            520px;

        margin:
            0 auto;

        border-radius:
            25px;
    }


    .ccuse34-image {
        height:
            235px;
    }


    .ccuse34-body {
        min-height:
            auto;

        padding:
            0 18px 27px;
    }


    .ccuse34-meta {
        margin-top:
            -25px;

        margin-bottom:
            20px;
    }


    .ccuse34-icon {
        width:
            52px;

        height:
            52px;

        border-radius:
            16px;

        font-size:
            19px;
    }


    .ccuse34-number {
        min-width:
            44px;

        height:
            34px;

        font-size:
            11px;
    }


    .ccuse34-body h3 {
        font-size:
            25px;
    }


    .ccuse34-body p {
        font-size:
            16px;

        line-height:
            1.65;
    }

}


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

@media (max-width: 480px) {

    .ccuse34-title {
        font-size:
            30px;
    }


    .ccuse34-image {
        height:
            210px;
    }


    .ccuse34-body h3 {
        font-size:
            23px;
    }

}

/* =========================================================
   CREATORCLAW AI — BLOCK 14
   FREELANCE OPPORTUNITY
   WHITE / FUTURISTIC 2030 PREMIUM
========================================================= */

.ccfo30-section {
    --ccfo30-green-dark: #063b28;
    --ccfo30-green: #0b8f48;
    --ccfo30-green-bright: #45ca42;
    --ccfo30-lime: #9edc24;

    --ccfo30-text: #10241b;
    --ccfo30-muted: #66776f;

    --ccfo30-border: #dfe9e3;
    --ccfo30-soft: #f4f9f6;

    position: relative;
    overflow: hidden;

    padding: 105px 0 0 0;
background: radial-gradient( circle at 10% 12%, rgb(246, 242, 250), #f6f2fa 25% ), radial-gradient( circle at 91% 75%, rgba(11, 143, 72, 0.07), transparent 30% ), #fff;
}


/* subtle futuristic grid */

.ccfo30-section::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .42;

    background-image:
        linear-gradient(
            rgba(7, 80, 49, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 80, 49, .035) 1px,
            transparent 1px
        );

    background-size: 44px 44px;

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


.ccfo30-section .container {
    position: relative;
    z-index: 2;
}


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

.ccfo30-eyebrow {
    width: max-content;
    max-width: 100%;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 16px;

    border: 1px solid rgba(11, 143, 72, .20);
    border-radius: 100px;

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

    box-shadow:
        0 8px 30px rgba(11, 143, 72, .07),
        inset 0 1px 0 #ffffff;

    color: #087b42;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.ccfo30-eyebrow-icon {
    width: 25px;
    height: 25px;

    border-radius: 50%;

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

    background:
        linear-gradient(
            135deg,
            var(--ccfo30-green-bright),
            var(--ccfo30-green)
        );

    color: #fff;

    box-shadow:
        0 5px 15px rgba(11, 143, 72, .24);
}


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

.ccfo30-title {
    margin: 0;

    color: var(--ccfo30-text);

    font-size: clamp(36px, 4.1vw, 62px);
    font-weight: 900;
    line-height: 1.07;

    letter-spacing: -2.4px;
}


.ccfo30-title span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #086b3b 0%,
            #0ca14f 42%,
            #69b816 100%
        );

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

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


.ccfo30-intro {
    max-width: 750px;

    margin: 25px auto 0;

    color: var(--ccfo30-muted);

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


.ccfo30-intro strong {
    color: #114b34;

    font-weight: 800;
}


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

.ccfo30-proof-card {
    position: relative;
    overflow: hidden;

    margin-top: 62px;

    padding: 25px;

    border: 1px solid rgba(14, 100, 61, .12);
    border-radius: 34px;

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

    box-shadow:
        0 35px 90px rgba(13, 78, 49, .10),
        0 8px 30px rgba(13, 78, 49, .05),
        inset 0 1px 0 #ffffff;
}


.ccfo30-proof-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(56, 186, 75, .60),
            transparent
        );
}


.ccfo30-card-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(75px);

    pointer-events: none;
}


.ccfo30-card-glow--one {
    top: -180px;
    left: -130px;

    background:
        rgba(80, 209, 73, .10);
}


.ccfo30-card-glow--two {
    right: -170px;
    bottom: -170px;

    background:
        rgba(9, 143, 73, .08);
}


/* =========================================================
   BROWSER MOCKUP
========================================================= */

.ccfo30-browser-wrap {
    overflow: hidden;

    border: 1px solid #dce7e0;
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 55px rgba(21, 72, 48, .11),
        0 5px 15px rgba(21, 72, 48, .05);
}


.ccfo30-browser-top {
    min-height: 61px;

    display: flex;
    align-items: center;

    padding: 0 17px;

    border-bottom: 1px solid #e3ece6;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbf9
        );
}


.ccfo30-browser-dots {
    display: flex;
    gap: 6px;

    margin-right: 16px;
}


.ccfo30-browser-dots span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #c8d5cd;
}


.ccfo30-browser-dots span:nth-child(1) {
    background: #ff786f;
}


.ccfo30-browser-dots span:nth-child(2) {
    background: #f6c657;
}


.ccfo30-browser-dots span:nth-child(3) {
    background: #64ca7a;
}


.ccfo30-browser-address {
    min-width: 0;

    flex: 1;

    padding: 10px 14px;

    border: 1px solid #e0ebe4;
    border-radius: 11px;

    background: #f5f8f6;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #62726a;

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


.ccfo30-lock {
    margin-right: 6px;

    color: var(--ccfo30-green);

    font-size: 7px;
}


.ccfo30-live-badge {
    margin-left: 12px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #087543;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
}


.ccfo30-live-badge span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #20b866;

    box-shadow:
        0 0 0 4px rgba(32,184,102,.12);
}


.ccfo30-screenshot-frame {
    position: relative;

    padding: 10px;

    background: #f7faf8;
}


.ccfo30-screenshot-frame img {
    width: 100%;

    display: block;

    border-radius: 15px;
}


.ccfo30-proof-label {
    position: absolute;

    left: 28px;
    bottom: 28px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 15px;

    border: 1px solid rgba(255,255,255,.9);
    border-radius: 100px;

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

    backdrop-filter: blur(14px);

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

    color: #155b3b;

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


.ccfo30-proof-label span {
    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background: #daf5e5;

    color: #087c46;
}


.ccfo30-caption {
    margin-top: 17px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: #74827b;

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


.ccfo30-caption-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

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

    border-radius: 8px;

    background: #edf7f1;

    color: #11874d;
}


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

.ccfo30-content {
    position: relative;

    padding: 10px 13px 10px 0;
}


.ccfo30-mini-label {
    margin-bottom: 12px;

    color: #0d8b4b;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
}


.ccfo30-content h3 {
    margin-bottom: 18px;

    color: #10281d;

    font-size: clamp(28px, 2.7vw, 42px);
    font-weight: 900;
    line-height: 1.12;

    letter-spacing: -1.4px;
}


.ccfo30-content h3 span {
    color: #0e914c;
}


.ccfo30-content > p {
    margin: 0;

    color: #617269;

  font-size: 18px;
    line-height: 1.7;
}


.ccfo30-divider {
    width: 100%;
    height: 1px;

    margin: 28px 0;

    background:
        linear-gradient(
            90deg,
            #dde8e1,
            transparent
        );
}


/* =========================================================
   AI BOX
========================================================= */

.ccfo30-ai-box {
    position: relative;
    overflow: hidden;

    padding: 21px;

    border: 1px solid rgba(11, 143, 72, .13);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f5fcf8,
            #fbfefc
        );
}


.ccfo30-ai-box::after {
    content: "";

    position: absolute;

    right: -55px;
    top: -55px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        rgba(90, 207, 62, .08);
}


.ccfo30-ai-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 13px;
}


.ccfo30-ai-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #0a964d,
            #61c938
        );

    box-shadow:
        0 9px 20px rgba(27, 153, 76, .24);

    color: #ffffff;

    font-size: 20px;
}


.ccfo30-ai-top small {
    display: block;

    margin-bottom: 2px;

    color: #15884e;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .9px;
}


.ccfo30-ai-top strong {
    display: block;

    color: #173a28;

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


.ccfo30-ai-box p {
    position: relative;
    z-index: 2;

    margin: 18px 0 0;

    color: #5a6f64;

  font-size: 18px;
    line-height: 1.7;
}


.ccfo30-deliverables {
    position: relative;
    z-index: 2;

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

    gap: 9px;

    margin-top: 18px;
}


.ccfo30-deliverables span {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 10px;

    border: 1px solid #dfebe3;
    border-radius: 10px;

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

    color: #345445;

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


.ccfo30-deliverables b {
    width: 20px;
    height: 20px;

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

    border-radius: 50%;

    background: #e5f7ea;

    color: #0b944e;

    font-size: 11px;
}


/* =========================================================
   LICENSE
========================================================= */

.ccfo30-license-box {
    margin-top: 15px;

    display: flex;
    gap: 13px;

    padding: 18px;

    border: 1px solid #e1e9e4;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 22px rgba(12, 71, 44, .05);
}


.ccfo30-license-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #e9f9ed,
            #daf5df
        );

    color: #078a47;

    font-weight: 900;
}


.ccfo30-license-box small {
    display: block;

    margin-bottom: 4px;

    color: #127e49;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
}


.ccfo30-license-box p {
    margin: 0;

    color: #66786e;

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


/* =========================================================
   DISCLAIMER NOTE
========================================================= */

.ccfo30-note {
    margin-top: 27px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 20px;

    border: 1px solid #e1eae5;
    border-radius: 16px;

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

    box-shadow:
        0 10px 25px rgba(15, 71, 46, .04);
}


.ccfo30-note-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    border-radius: 50%;

    background: #edf5f0;

    color: #4c6a5b;

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


.ccfo30-note p {
    margin: 0;

    color: #77867e;

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


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

@media (max-width: 991.98px) {

    .ccfo30-section {
        padding: 80px 0;
    }

    .ccfo30-proof-card {
        margin-top: 45px;

        padding: 18px;

        border-radius: 27px;
    }

    .ccfo30-content {
        padding: 15px 5px 5px;
    }

    .ccfo30-title {
        letter-spacing: -1.8px;
    }

}


@media (max-width: 767.98px) {

    .ccfo30-section {
        padding: 0px 0;
    }

    .ccfo30-title {
        font-size: 35px;
        line-height: 1.1;

        letter-spacing: -1.2px;
    }

    .ccfo30-intro {
        margin-top: 19px;

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

    .ccfo30-proof-card {
        margin-top: 35px;

        padding: 12px;

        border-radius: 22px;
    }

    .ccfo30-browser-wrap {
        border-radius: 18px;
    }

    .ccfo30-browser-top {
        min-height: 50px;

        padding: 0 10px;
    }

    .ccfo30-browser-address {
        font-size: 10px;
    }

    .ccfo30-live-badge {
        display: none;
    }

    .ccfo30-proof-label {
        left: 18px;
        bottom: 18px;

        padding: 8px 11px;

        font-size: 10px;
    }

    .ccfo30-content h3 {
        font-size: 30px;
    }

    .ccfo30-content > p {
        font-size: 16px;
    }

    .ccfo30-deliverables {
        grid-template-columns: 1fr 1fr;
    }

    .ccfo30-note {
        align-items: flex-start;
    }

}


@media (max-width: 575.98px) {

    .ccfo30-eyebrow {
        font-size: 10px;

        letter-spacing: .9px;
    }

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

    .ccfo30-deliverables {
        grid-template-columns: 1fr;
    }

    .ccfo30-caption {
        padding: 0 5px;
    }

}

/* =========================================================
   BLOCK 15 — OBJECTION
   REFERENCE-INSPIRED DARK ULTRA PREMIUM
   PREFIX: ccstart15-
========================================================= */

.ccstart15-section {
    position: relative;
    overflow: hidden;
padding: 100px 0 0px;

   background: radial-gradient(circle at 14% 18%, rgb(1, 1, 2), transparent 24%), radial-gradient(circle at 88% 20%, rgb(1, 1, 2), transparent 25%), linear-gradient( 180deg, #010101 0%, #010101 48%, #020403 100% );

    font-size: 18px;

    isolation: isolate;
}


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

.ccstart15-grid {
    position: absolute;
    inset: 0;

    z-index: -3;

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

    background-size: 54px 54px;

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

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

    pointer-events: none;
}


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

.ccstart15-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(30px);

    pointer-events: none;

    z-index: -2;
}

.ccstart15-glow--one {
    width: 430px;
    height: 430px;

    left: -190px;
    top: 180px;

    background:
        rgba(176,255,48,.09);
}

.ccstart15-glow--two {
    width: 500px;
    height: 500px;

    right: -230px;
    bottom: 100px;

    background:
        rgba(53,179,67,.08);
}


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

.ccstart15-eyebrow {
    display: inline-flex;

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

    gap: 8px;

    margin-bottom: 18px;

    padding: 10px 17px;

    border-radius: 999px;

    background:
        rgba(196,255,59,.08);

    border:
        1px solid rgba(196,255,59,.17);

    color:
        #d0ff46;

    font-size:
        11px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: 1.15px;

    text-transform: uppercase;

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


.ccstart15-title {
    max-width: 1020px;

    margin: 0 auto;

    color:
        #ffffff;

    font-size:
        clamp(40px, 5vw, 64px);

    line-height:
        1.04;

    font-weight:
        950;

    letter-spacing:
        -2.2px;
}


.ccstart15-title span {
    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #d9ff43 0%,
            #98ec32 45%,
            #4dcc57 100%
        );

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

    color: transparent;
}


.ccstart15-intro {
    max-width: 850px;

    margin:
        22px auto 0;

    color:
        rgba(237,243,239,.72);

    font-size:
        19px;

    line-height:
        1.7;

    font-weight:
        500;
}


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

.ccstart15-main-row {
    margin-top:
        65px;
}


/* =========================================
   LEFT IMAGE CARD
========================================= */

.ccstart15-visual-card {
    position: relative;

    overflow: hidden;

    padding: 16px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(18,26,20,.98),
            rgba(6,11,8,.99)
        );

    border:
        1px solid rgba(185,255,64,.16);

    box-shadow:
        0 30px 90px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.04);
}


.ccstart15-visual-card::before {
    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            rgba(210,255,75,.30),
            rgba(255,255,255,.02),
            rgba(71,185,69,.10)
        );

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

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}


.ccstart15-visual-glow {
    position: absolute;

    width: 250px;
    height: 250px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180,255,47,.14),
            transparent 70%
        );

    pointer-events: none;
}


.ccstart15-visual-label {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin:
        0 0 13px 2px;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        rgba(186,255,46,.08);

    border:
        1px solid rgba(186,255,46,.15);

    color:
        #cbff42;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        .8px;
}


.ccstart15-image-wrap {
    position: relative;

    overflow: hidden;

    min-height:
        510px;

    border-radius:
        23px;

    background:
        #101411;

    border:
        1px solid rgba(190,255,68,.07);
}


.ccstart15-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    min-height:
        510px;

    object-fit:
        cover;

    border-radius:
        23px;
}


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

.ccstart15-objections {
    display: flex;

    flex-direction:
        column;

    gap:
        13px;
}


/* =========================================
   ITEM
========================================= */

.ccstart15-item {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap:
        16px;

    min-height:
        82px;

    padding:
        15px 18px;

    border-radius:
        18px;

    background:
        linear-gradient(
            90deg,
            rgba(22,33,24,.98),
            rgba(8,14,10,.99)
        );

    border:
        1px solid rgba(184,255,61,.13);

    box-shadow:
        0 14px 36px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.03);

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


.ccstart15-item::before {
    content: "";

    position: absolute;

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

    width:
        3px;

    background:
        linear-gradient(
            180deg,
            #d8ff42,
            #58c64c
        );

    opacity:
        .8;
}


.ccstart15-item:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(190,255,69,.23);

    box-shadow:
        0 20px 45px rgba(0,0,0,.26),
        0 0 25px rgba(158,233,43,.05);
}


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

.ccstart15-icon {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #dfff49,
            #8fdb31
        );

    color:
        #071008;

    font-size:
        13px;

    box-shadow:
        0 9px 22px rgba(163,229,43,.12);
}


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

.ccstart15-item-copy {
    min-width:
        0;
}


.ccstart15-item-copy strong {
    display: block;

    margin-bottom:
        4px;

    color:
        #ffffff;

    font-size:
        17px;

    line-height:
        1.3;

    font-weight:
        900;
}


.ccstart15-item-copy span {
    display: block;

    color:
        rgba(231,240,233,.66);

    font-size:
        15px;

    line-height:
        1.5;

    font-weight:
        500;
}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.ccstart15-bottom {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap:
        18px;

    margin-top:
        10px;

    padding:
        23px 26px;

    border-radius:
        27px;

    background:
        linear-gradient(
            135deg,
            rgba(197,255,63,.10),
            rgba(56,175,67,.05)
        );

    border:
        1px solid rgba(190,255,69,.17);

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


.ccstart15-bottom::before {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;

    top: 0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #cfff3f,
            transparent
        );
}


.ccstart15-bottom-icon {
    width:
        64px;

    height:
        64px;

    flex:
        0 0 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        19px;

    background:
        linear-gradient(
            135deg,
            #ddff49,
            #8bd832
        );

    color:
        #071008;

    font-size:
        22px;

    box-shadow:
        0 12px 28px rgba(162,228,44,.15);
}


.ccstart15-bottom-copy strong {
    display: block;

    margin-bottom:
        3px;

    color:
        #ffffff;

    font-size:
        22px;

    line-height:
        1.35;

    font-weight:
        950;
}


.ccstart15-bottom-copy span {
    display: block;

    color:
        rgba(231,240,233,.72);

    font-size:
        17px;

    line-height:
        1.6;

    font-weight:
        500;
}


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

@media (max-width: 991px) {

    .ccstart15-section {
        padding:
            76px 0 86px;
    }


    .ccstart15-main-row {
        margin-top:
            55px;
    }


    .ccstart15-image-wrap,
    .ccstart15-image-wrap img {
        min-height:
            430px;
    }


    .ccstart15-bottom {
        margin-top:
            35px;
    }

}


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

@media (max-width: 767px) {

    .ccstart15-section {
        padding:
            58px 0 0px;
    }


    .ccstart15-title {
        font-size:
            34px;

        line-height:
            1.08;

        letter-spacing:
            -1.2px;
    }


    .ccstart15-intro {
        font-size:
            17px;

        line-height:
            1.65;
    }


    .ccstart15-main-row {
        margin-top:
            42px;
    }


    .ccstart15-visual-card {
        padding:
            12px;

        border-radius:
            24px;
    }


    .ccstart15-image-wrap,
    .ccstart15-image-wrap img {
        min-height:
            300px;

        border-radius:
            18px;
    }


    .ccstart15-item {
        min-height:
            auto;

        padding:
            14px;

        border-radius:
            16px;
    }


    .ccstart15-item-copy strong {
        font-size:
            16px;
    }


    .ccstart15-item-copy span {
        font-size:
            14px;
    }


    .ccstart15-bottom {
        flex-direction:
            column;

        text-align:
            center;

        margin-top:
            28px;

        padding:
            21px 17px;

        border-radius:
            22px;
    }


    .ccstart15-bottom-icon {
        width:
            58px;

        height:
            58px;

        flex-basis:
            58px;
    }


    .ccstart15-bottom-copy strong {
        font-size:
            19px;
    }


    .ccstart15-bottom-copy span {
        font-size:
            16px;
    }

}


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

@media (max-width: 480px) {

    .ccstart15-title {
        font-size:
            30px;
    }


    .ccstart15-eyebrow {
        font-size:
            10px;

        padding:
            9px 14px;
    }


    .ccstart15-image-wrap,
    .ccstart15-image-wrap img {
        min-height:
            250px;
    }

}

/* =========================================================
   CREATORCLAW AI
   BLOCK 16 — FEATURE DEEP-DIVE
========================================================= */

.ccfd16-section {

    --ccfd16-dark: #031b13;
    --ccfd16-dark-2: #072d1f;

    --ccfd16-green: #059447;
    --ccfd16-green-2: #18b74e;

    --ccfd16-lime: #86d900;
    --ccfd16-lime-2: #b4ef15;

    --ccfd16-white: #ffffff;

    --ccfd16-text: #10231a;
    --ccfd16-text-light: #617168;

    --ccfd16-border: #e1ebe4;
    --ccfd16-soft: #f6faf7;


    position: relative;

    overflow: hidden;

    padding: 110px 0 125px;

    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(155, 225, 18, 0.09),
            transparent 24%
        ),
        radial-gradient(
            circle at 93% 40%,
            rgba(13, 157, 70, 0.07),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfb 48%,
            #ffffff 100%
        );
}


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

.ccfd16-grid {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 480px;

    pointer-events: none;

    opacity: .55;

    background-image:

        linear-gradient(
            rgba(7, 74, 45, .035) 1px,
            transparent 1px
        ),

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

    background-size: 40px 40px;

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

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


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

.ccfd16-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);
}


.ccfd16-glow-1 {
    width: 320px;
    height: 320px;

    left: -150px;
    top: 35%;

    background:
        rgba(139, 218, 0, .09);
}


.ccfd16-glow-2 {
    width: 380px;
    height: 380px;

    right: -190px;
    top: 67%;

    background:
        rgba(9, 152, 68, .08);
}


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

.ccfd16-eyebrow {

    width: max-content;
    max-width: 100%;

    margin: 0 auto 20px;

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

    gap: 10px;

    padding: 10px 17px;

    border: 1px solid rgba(6, 141, 65, .15);

    border-radius: 100px;

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

    box-shadow:
        0 8px 30px rgba(9, 82, 48, .06);

    color: #16472f;

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

    letter-spacing: 1.5px;
}


.ccfd16-eyebrow-star {
    color: var(--ccfd16-lime);

    font-size: 16px;
}


.ccfd16-eyebrow-line {
    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--ccfd16-green),
            var(--ccfd16-lime)
        );
}


.ccfd16-main-title {

    margin: 0 auto;

    max-width: 960px;

    color: var(--ccfd16-dark);

    font-size: clamp(38px, 4.7vw, 66px);

    font-weight: 900;

    line-height: 1.06;

    letter-spacing: -2.8px;
}


.ccfd16-main-title span {

    display: block;

    margin-top: 7px;

    background:
        linear-gradient(
            90deg,
            #087b3e 0%,
            #14a846 43%,
            #85cf08 100%
        );

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

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


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

.ccfd16-step {

    position: relative;

    margin-top: 100px;
}


.ccfd16-step-1 {
    margin-top: 85px;
}


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

.ccfd16-content-card {

    position: relative;

    z-index: 2;

    min-height: 355px;

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

padding: 20px 30px;

    border: 1px solid var(--ccfd16-border);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(248,252,249,.98)
        );

    box-shadow:
        0 30px 80px rgba(18, 78, 49, .08),
        0 8px 20px rgba(18, 78, 49, .04),
        inset 0 1px 0 #ffffff;

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


.ccfd16-content-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 40px;
    right: 40px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(112, 207, 17, .55),
            transparent
        );
}


.ccfd16-content-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(56, 170, 54, .22);

    box-shadow:
        0 36px 90px rgba(15, 88, 50, .12),
        0 12px 30px rgba(15, 88, 50, .06);
}


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

.ccfd16-number {

    width: 63px;
    height: 63px;

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

    margin-bottom: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #e8f9dd,
            #f5ffe8
        );

    border:
        1px solid rgba(123, 202, 17, .17);

    box-shadow:
        inset 0 1px 0 #fff,
        0 7px 20px rgba(98, 177, 14, .12);

    color: #27932a;

    font-size: 21px;

    font-weight: 900;
}


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

.ccfd16-small-label {

    margin-bottom: 9px;

    color: #16843e;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


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

.ccfd16-content-card h3 {

    margin: 0;

    color: var(--ccfd16-dark);

    font-size: clamp(27px, 2.5vw, 39px);

    font-weight: 900;

    line-height: 1.14;

    letter-spacing: -1.3px;
}


.ccfd16-title-line {

    width: 55px;
    height: 3px;

    margin: 18px 0 20px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            var(--ccfd16-green),
            var(--ccfd16-lime)
        );
}


.ccfd16-content-card p {

    margin: 0;

    color: var(--ccfd16-text-light);

    font-size: 18px;

    line-height: 1.72;

    font-weight: 500;
}


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

.ccfd16-media-wrap {

    position: relative;

    z-index: 2;

    padding: 25px;
}


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

.ccfd16-image-card {

    position: relative;

    z-index: 3;

    overflow: hidden;

    min-height: 355px;

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

    padding: 16px;

    border:
        1px solid rgba(14, 111, 58, .11);

    border-radius: 30px;

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

    box-shadow:
        0 30px 75px rgba(13, 69, 42, .11),
        0 7px 20px rgba(13, 69, 42, .04);

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


.ccfd16-image-card:hover {

    transform:
        translateY(-6px)
        rotate(.3deg);

    box-shadow:
        0 40px 95px rgba(13, 89, 49, .15);
}


.ccfd16-image-card img {

    width: 100%;

    max-height: 420px;

    object-fit: contain;

    border-radius: 19px;

    display: block;
}


/* =========================================================
   IF IMAGE NOT ADDED YET
========================================================= */

.ccfd16-image-card:has(img[src=""])::after {

    content: "ADD YOUR IMAGE";

    position: absolute;

    inset: 15px;

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

    border:
        1px dashed rgba(9, 143, 65, .3);

    border-radius: 18px;

    color: #5a7666;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.ccfd16-orbit {

    position: absolute;

    z-index: 1;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(156, 224, 28, .17),
            rgba(23, 174, 72, .05) 47%,
            transparent 70%
        );
}


.ccfd16-orbit::before {

    content: "";

    position: absolute;

    inset: 25px;

    border:
        1px dashed rgba(44, 174, 65, .18);

    border-radius: 50%;
}


.ccfd16-orbit-1,
.ccfd16-orbit-3 {

    right: -15px;
    top: 50%;

    transform:
        translateY(-50%);
}


.ccfd16-orbit-2,
.ccfd16-orbit-4 {

    left: -15px;
    top: 50%;

    transform:
        translateY(-50%);
}


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

.ccfd16-floating-icon {

    position: absolute;

    z-index: 5;

    top: 0;
    right: 0;

    width: 70px;
    height: 70px;

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

    border-radius: 20px;

    border:
        1px solid rgba(71, 180, 37, .15);

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 15px 45px rgba(15, 85, 50, .14);

    color: #60b81a;

    font-size: 27px;

    animation:
        ccfd16Float 4s ease-in-out infinite;
}


.ccfd16-floating-icon-left {

    right: auto;
    left: 0;
}


/* =========================================================
   CONNECTING ARROWS
========================================================= */

.ccfd16-flow-arrow {

    position: absolute;

    z-index: 1;

    width: 140px;
    height: 92px;

    bottom: -96px;

    opacity: .8;
}


.ccfd16-flow-arrow span {

    position: absolute;

    top: 32px;

    width: 100px;
    height: 25px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            rgba(169, 229, 13, .12),
            #76ce0c
        );

    box-shadow:
        0 10px 30px rgba(74, 173, 28, .12);
}


.ccfd16-flow-arrow span::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 0;
    height: 0;

    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;

    transform:
        translateY(-50%);
}


.ccfd16-arrow-right {

    left: 50%;

    transform:
        translateX(-15%);
}


.ccfd16-arrow-right span {

    transform:
        rotate(24deg);
}


.ccfd16-arrow-right span::after {

    right: -26px;

    border-left:
        33px solid #76ce0c;
}


.ccfd16-arrow-left {

    right: 50%;

    transform:
        translateX(15%);
}


.ccfd16-arrow-left span {

    transform:
        rotate(-24deg);
}


.ccfd16-arrow-left span::after {

    right: -26px;

    border-left:
        33px solid #76ce0c;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes ccfd16Float {

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

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


/* =========================================================
   JS REVEAL CLASS
========================================================= */

.ccfd16-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}


.ccfd16-reveal.ccfd16-visible {

    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 991.98px) {

    .ccfd16-section {

        padding:
            85px 0 95px;
    }


    .ccfd16-main-title {

        letter-spacing:
            -2px;
    }


    .ccfd16-step {

        margin-top:
            75px;
    }


    .ccfd16-content-card {

        min-height:
            auto;

        padding:
            38px 35px;
    }


    .ccfd16-image-card {

        min-height:
            300px;
    }


    .ccfd16-flow-arrow {

        display:
            none;
    }


    .ccfd16-media-wrap {

        padding:
            15px;
    }

}


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

@media (max-width: 767.98px) {

    .ccfd16-section {

        padding:
            65px 0 75px;
    }


    .ccfd16-eyebrow {

        padding:
            8px 12px;

        gap:
            7px;

        font-size:
            9px;

        letter-spacing:
            1px;
    }


    .ccfd16-main-title {

        font-size:
            34px;

        line-height:
            1.1;

        letter-spacing:
            -1.3px;
    }


    .ccfd16-step,
    .ccfd16-step-1 {

        margin-top:
            55px;
    }


    .ccfd16-content-card {

        padding:
            30px 25px;

        border-radius:
            24px;
    }


    .ccfd16-number {

        width:
            54px;

        height:
            54px;

        border-radius:
            15px;

        font-size:
            18px;
    }


    .ccfd16-content-card h3 {

        font-size:
            28px;
    }


    .ccfd16-content-card p {

        font-size:
            17px;

        line-height:
            1.65;
    }


    .ccfd16-image-card {

        min-height:
            230px;

        padding:
            10px;

        border-radius:
            23px;
    }


    .ccfd16-image-card img {

        border-radius:
            15px;
    }


    .ccfd16-floating-icon {

        width:
            55px;

        height:
            55px;

        border-radius:
            16px;

        font-size:
            21px;
    }


    .ccfd16-orbit {

        width:
            240px;

        height:
            240px;
    }

}


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

@media (max-width: 480px) {

    .ccfd16-main-title {

        font-size:
            30px;
    }


    .ccfd16-content-card {

        padding:
            27px 21px;
    }


    .ccfd16-content-card h3 {

        font-size:
            25px;
    }


    .ccfd16-content-card p {

        font-size:
            16px;
    }

}

/* =========================================================
   BLOCK 17 — WHAT YOU NEVER HAVE TO DO AGAIN
   WHITE ULTRA PREMIUM
   PREFIX: ccnever17-
========================================================= */

.ccnever17-section {
    position: relative;
    overflow: hidden;
padding: 10px 0 80px;
    background:
        radial-gradient(circle at 12% 18%, rgba(193,255,66,.12), transparent 22%),
        radial-gradient(circle at 88% 18%, rgba(71,182,67,.08), transparent 24%),
        radial-gradient(circle at 82% 82%, rgba(190,255,57,.07), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfef8 48%, #ffffff 100%);
    font-size: 18px;
    isolation: isolate;
}


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

.ccnever17-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(31, 76, 39, .024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 76, 39, .024) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
}


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

.ccnever17-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
    z-index: -2;
}

.ccnever17-glow--one {
    width: 420px;
    height: 420px;
    left: -180px;
    top: 140px;
    background: rgba(177,255,48,.10);
}

.ccnever17-glow--two {
    width: 500px;
    height: 500px;
    right: -230px;
    bottom: 90px;
    background: rgba(56,180,67,.07);
}


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

.ccnever17-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 17px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e5ff58, #a5eb31);
    color: #081008;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    box-shadow:
        0 10px 26px rgba(162,226,45,.14),
        inset 0 1px 0 rgba(255,255,255,.75);
}

.ccnever17-title {
    max-width: 980px;
    margin: 0 auto;
    color: #08120b;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -2.2px;
}

.ccnever17-title span {
    display: inline-block;
    background: linear-gradient(90deg, #0e7c2d 0%, #2faa3d 45%, #9fda2f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


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

.ccnever17-main-row {
    margin-top: 70px;
}


/* =========================================
   LEFT VISUAL CARD
========================================= */

.ccnever17-visual-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 32px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(248,252,245,.98)
        );
    border: 1px solid rgba(56,110,61,.11);
    box-shadow:
        0 28px 75px rgba(35,74,41,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ccnever17-visual-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 32px;
    background:
        linear-gradient(
            135deg,
            rgba(196,255,69,.36),
            rgba(255,255,255,.55),
            rgba(78,181,67,.10)
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.ccnever17-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 4px 5px 14px;
}

.ccnever17-visual-label {
    color: #243228;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ccnever17-visual-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #b2e42d;
    box-shadow:
        0 0 0 5px rgba(178,228,45,.10),
        0 0 14px rgba(178,228,45,.22);
}

.ccnever17-image-wrap {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            #eef4ea,
            #e7eee5
        );
    border: 1px solid rgba(56,109,60,.08);
    box-shadow:
        0 16px 38px rgba(32,69,37,.07);
}

.ccnever17-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    border-radius: 24px;
}


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

.ccnever17-list {
   display: flex;
  flex-direction: column;
  gap: 5px;
}


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

.ccnever17-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
min-height: 65px;
  padding: 10px 18px;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(248,252,245,.98)
        );
    border: 1px solid rgba(56,110,61,.10);
    box-shadow:
        0 14px 34px rgba(35,74,41,.06),
        inset 0 1px 0 rgba(255,255,255,.90);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.ccnever17-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 10px;
    background: linear-gradient(180deg, #dfff49, #67c64b);
}

.ccnever17-item:hover {
    transform: translateX(5px);
    border-color: rgba(147,214,55,.20);
    box-shadow:
        0 18px 42px rgba(35,74,41,.09),
        0 0 28px rgba(161,231,43,.04),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.ccnever17-item-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
background: linear-gradient(135deg, #ff3131, #e29c2f);
  color: #fff;
    font-size: 13px;
    box-shadow:
        0 8px 20px rgba(161,229,43,.14),
        inset 0 1px 0 rgba(255,255,255,.45);
}

.ccnever17-item-copy {
    color: #142117;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
}


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

@media (max-width: 991px) {

    .ccnever17-section {
        padding: 76px 0 86px;
    }

    .ccnever17-main-row {
        margin-top: 55px;
    }

    .ccnever17-image-wrap,
    .ccnever17-image-wrap img {
        min-height: 420px;
    }

    .ccnever17-item-copy {
        font-size: 17px;
    }
}


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

@media (max-width: 767px) {

    .ccnever17-section {
        padding: 58px 0 68px;
    }

    .ccnever17-title {
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -1.2px;
    }

    .ccnever17-main-row {
        margin-top: 42px;
    }

    .ccnever17-visual-card {
        padding: 12px;
        border-radius: 24px;
    }

    .ccnever17-visual-card::before {
        border-radius: 24px;
    }

    .ccnever17-visual-top {
        padding: 3px 3px 12px;
    }

    .ccnever17-visual-label {
        font-size: 11px;
    }

    .ccnever17-image-wrap,
    .ccnever17-image-wrap img {
        min-height: 280px;
        border-radius: 18px;
    }

    .ccnever17-list {
        gap: 12px;
    }

    .ccnever17-item {
        min-height: auto;
        padding: 14px;
        border-radius: 16px;
        gap: 12px;
    }

    .ccnever17-item-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
        font-size: 12px;
    }

    .ccnever17-item-copy {
        font-size: 16px;
        line-height: 1.5;
    }
}


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

@media (max-width: 480px) {

    .ccnever17-title {
        font-size: 30px;
    }

    .ccnever17-eyebrow {
        font-size: 10px;
        padding: 9px 14px;
    }

    .ccnever17-image-wrap,
    .ccnever17-image-wrap img {
        min-height: 240px;
    }

    .ccnever17-item-copy {
        font-size: 15px;
    }
}


/* ==========================================================
   CREATORCLAW AI - BLOCK 18 MONETIZATION
   DARK PREMIUM / NEON GREEN
========================================================== */

.ccmon18-section {
    --ccmon18-bg: #020a08;
    --ccmon18-panel: #071b13;
    --ccmon18-green: #39e55b;
    --ccmon18-lime: #b5f21d;
    --ccmon18-text: #ffffff;
    --ccmon18-muted: #a4b9ac;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 105px 0 115px;
    color: var(--ccmon18-text);
    font-size: 18px;
    /* background:
        radial-gradient(ellipse at 90% 65%,
            rgba(35, 194, 57, .15),
            transparent 45%),
        radial-gradient(ellipse at 10% 10%,
            rgba(18, 95, 49, .12),
            transparent 40%),
        linear-gradient(135deg, #020707, #03110c 65%, #020807); */

        background: url("../images/ccmon18-section.png") center top / cover no-repeat;
}

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

.ccmon18-container {
    position: relative;
    z-index: 2;
}

/* BACKGROUND */

.ccmon18-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
}

.ccmon18-glow-one {
    width: 400px;
    height: 400px;
    background: rgba(66, 220, 49, .10);
    right: -150px;
    top: 150px;
}

.ccmon18-glow-two {
    width: 330px;
    height: 330px;
    background: rgba(11, 143, 78, .10);
    left: -170px;
    bottom: -100px;
}

.ccmon18-orbit {
    position: absolute;
    width: 800px;
    height: 800px;
    right: -440px;
    top: -420px;
    border: 1px solid rgba(125, 230, 99, .09);
    border-radius: 50%;
    pointer-events: none;
}

/* SECTION HEADING */

.ccmon18-heading {
    max-width: 900px;
    margin: 0 auto 65px;
}

.ccmon18-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    margin-bottom: 23px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #c5fc66;
    text-transform: uppercase;
    border: 1px solid rgba(159, 240, 83, .35);
    border-radius: 100px;
    background: rgba(30, 82, 43, .25);
}

.ccmon18-eyebrow-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #abf32e;
    box-shadow: 0 0 15px #89e82d;
}

.ccmon18-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4.5vw, 58px);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -1.8px;
    color: #fff;
}

.ccmon18-heading h2 span {
    display: block;
    margin-top: 5px;
    background: linear-gradient(
        95deg,
        #bbf527 5%,
        #4ef257 49%,
        #08b969 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ccmon18-heading-line {
    width: 110px;
    height: 4px;
    margin: 23px auto 0;
    border-radius: 20px;
    background: linear-gradient(90deg, #bbf21d, #15d15e);
    box-shadow: 0 0 20px rgba(96, 230, 49, .4);
}

/* LEFT CONTENT */

.ccmon18-content {
    position: relative;
    padding-right: 10px;
}

.ccmon18-mini-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #bbf527;
}

.ccmon18-mini-title i {
    font-size: 20px;
    color: #69ef58;
}

.ccmon18-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ccmon18-list-item {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 15px 18px;
    border: 1px solid rgba(111, 201, 120, .09);
    border-radius: 13px;
    background: linear-gradient(
        115deg,
        rgba(13, 38, 24, .85),
        rgba(6, 23, 16, .38)
    );
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.ccmon18-list-item:hover {
    transform: translateX(7px);
    border-color: rgba(143, 244, 47, .45);
    background: rgba(25, 68, 36, .6);
    box-shadow: 0 8px 30px rgba(24, 160, 48, .09);
}

.ccmon18-check {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #05370e;
    font-size: 13px;
    background: linear-gradient(135deg, #d1f931, #32e960);
    box-shadow: 0 0 20px rgba(91, 226, 40, .17);
}

.ccmon18-list-item p {
    margin: 0;
    color: #e5f0e7;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 450;
}

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

/* BOTTOM CALLOUT */

.ccmon18-highlight {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 29px;
    padding: 23px 25px;
    border: 1px solid rgba(168, 242, 31, .6);
    border-radius: 16px;
    background: linear-gradient(
        110deg,
        rgba(18, 61, 26, .75),
        rgba(4, 28, 18, .8)
    );
    box-shadow:
        inset 0 0 20px rgba(71, 199, 40, .07),
        0 0 30px rgba(58, 198, 45, .11);
}

.ccmon18-highlight::before {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    top: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #b5f21d,
        transparent
    );
}

.ccmon18-highlight-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bafa37;
    font-size: 26px;
    border-radius: 13px;
    background: rgba(134, 241, 32, .1);
}

.ccmon18-highlight p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #f0fff0;
}

.ccmon18-highlight strong,
.ccmon18-highlight span {
    color: #bbf735;
    font-weight: 850;
}

/* RIGHT VISUAL */

.ccmon18-visual {
    position: relative;
    min-height: 600px;
    width: 100%;
    border-radius: 25px;
    perspective: 1000px;
}

.ccmon18-visual-halo {
    position: absolute;
    inset: 14% 2% 5%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(100, 237, 48, .24),
        rgba(23, 121, 42, .10) 45%,
        transparent 72%
    );
    filter: blur(20px);
    animation: ccmon18Pulse 6s ease-in-out infinite;
}

/* DASHBOARD */

.ccmon18-dashboard {
    position: absolute;
    top: 4%;
    right: 0;
    width: 79%;
    padding: 17px;
    border: 1px solid rgba(88, 218, 102, .45);
    border-radius: 18px;
    background: linear-gradient(
        145deg,
        rgba(8, 28, 21, .97),
        rgba(4, 14, 13, .98)
    );
    box-shadow:
        0 20px 65px rgba(0, 0, 0, .5),
        0 0 35px rgba(43, 231, 63, .10);
    transform: rotate(1.5deg);
    z-index: 2;
}

.ccmon18-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 18px;
}

.ccmon18-dashboard-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.ccmon18-dashboard-title i {
    color: #b8f42b;
    font-size: 19px;
}

.ccmon18-dashboard-button {
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
    background: linear-gradient(90deg, #bcf826, #41ea50);
    color: #063411;
    font-size: 10px;
    font-weight: 900;
}

.ccmon18-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ccmon18-course {
    overflow: hidden;
    padding: 7px 7px 11px;
    border: 1px solid rgba(92, 153, 103, .18);
    border-radius: 10px;
    background: #0b2219;
}

.ccmon18-course-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.35;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 27px;
    color: #d5ff9f;
}

.ccmon18-course-img-one {
    background: linear-gradient(135deg, #164d3c, #07241f);
}

.ccmon18-course-img-two {
    background: linear-gradient(135deg, #17405e, #09242a);
}

.ccmon18-course-img-three {
    background: linear-gradient(135deg, #335622, #102b1b);
}

.ccmon18-course h4 {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.ccmon18-course > span {
    display: block;
    font-size: 9px;
    color: #91a89a;
}

.ccmon18-course-stars {
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: 1px;
    color: #cdf22b;
}

/* FLOATING PLATFORM CARDS */

.ccmon18-platforms {
    position: absolute;
    top: 10%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 4;
}

.ccmon18-platform {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
    padding: 11px 14px;
    border: 1px solid rgba(92, 241, 75, .33);
    border-radius: 12px;
    background: rgba(5, 22, 17, .93);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    color: white;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(12px);
    animation: ccmon18Float 5s ease-in-out infinite;
}

.ccmon18-platform:nth-child(2) {
    animation-delay: .6s;
}

.ccmon18-platform:nth-child(3) {
    animation-delay: 1.2s;
}

.ccmon18-platform:nth-child(4) {
    animation-delay: 1.8s;
}

.ccmon18-platform-udemy {
    color: #ff627d;
    font-size: 22px;
    font-weight: 900;
}

.ccmon18-platform-skill {
    color: #6fea89;
    font-size: 24px;
}

.ccmon18-platform-gum {
    color: #ff7ac2;
    font-size: 22px;
    font-weight: 900;
}

.ccmon18-platform-teach {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #19d2b2;
    color: #002e24;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 900;
}

/* CREATOR IMAGE */

.ccmon18-human {
    position: absolute;
    left: 13%;
    bottom: 0;
    width: 86%;
    z-index: 3;
    pointer-events: none;
}

.ccmon18-human img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 35px rgba(70, 224, 52, .14));
}

/* ANALYTICS */

.ccmon18-analytics {
    position: absolute;
    right: 0;
    bottom: 18%;
    width: 174px;
    padding: 17px;
    z-index: 5;
    border: 1px solid rgba(170, 240, 53, .7);
    border-radius: 13px;
    background: rgba(4, 22, 14, .94);
    box-shadow: 0 10px 40px rgba(43, 226, 74, .18);
    backdrop-filter: blur(15px);
    animation: ccmon18Float 5s ease-in-out infinite 1s;
}

.ccmon18-analytics-label {
    display: block;
    color: #a4c0ab;
    font-size: 11px;
    margin-bottom: 5px;
}

.ccmon18-analytics-value {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
}

.ccmon18-analytics-value i {
    color: #a8f22f;
    font-size: 21px;
}

.ccmon18-bars {
    display: flex;
    align-items: flex-end;
    height: 48px;
    gap: 8px;
    margin-top: 9px;
}

.ccmon18-bars span {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(0deg, #117431, #8ff12e);
}

.ccmon18-bars span:nth-child(1) { height: 28%; }
.ccmon18-bars span:nth-child(2) { height: 42%; }
.ccmon18-bars span:nth-child(3) { height: 54%; }
.ccmon18-bars span:nth-child(4) { height: 77%; }
.ccmon18-bars span:nth-child(5) { height: 100%; }

/* SMALL BRAND LABEL */

.ccmon18-brand {
    position: absolute;
    bottom: 7%;
    left: 5%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 40px;
    background: rgba(5, 34, 20, .9);
    border: 1px solid rgba(141, 237, 63, .5);
    color: #d6ff81;
    font-size: 13px;
    font-weight: 800;
}

.ccmon18-brand i {
    color: #8cf146;
    font-size: 18px;
}

/* SPARKLES */

.ccmon18-spark {
    position: absolute;
    color: #c8fc31;
    text-shadow: 0 0 22px #75ec31;
    z-index: 6;
    animation: ccmon18Sparkle 3s ease-in-out infinite;
}

.ccmon18-spark-one {
    right: 5%;
    top: 0;
    font-size: 37px;
}

.ccmon18-spark-two {
    left: 6%;
    bottom: 25%;
    font-size: 28px;
    animation-delay: 1s;
}

/* SCROLL REVEAL */

.ccmon18-section .ccmon18-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}

.ccmon18-section .ccmon18-reveal.ccmon18-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ANIMATIONS */

@keyframes ccmon18Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes ccmon18Pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes ccmon18Sparkle {
    0%, 100% { opacity: .5; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* RESPONSIVE */

@media (max-width: 1199px) {
    .ccmon18-visual {
        min-height: 520px;
    }

    .ccmon18-platform {
        min-width: 120px;
        padding: 9px;
        font-size: 11px;
    }

    .ccmon18-dashboard {
        width: 83%;
    }
}

@media (max-width: 991px) {
    .ccmon18-section {
        padding: 75px 0;
    }

    .ccmon18-heading {
        margin-bottom: 45px;
    }

    .ccmon18-content {
        padding-right: 0;
    }

    .ccmon18-visual {
        width: 100%;
        max-width: 650px;
        min-height: 590px;
        margin: 15px auto 0;
    }
}

@media (max-width: 575px) {
    .ccmon18-section {
        padding: 60px 0 45px;
    }

    .ccmon18-heading {
        margin-bottom: 35px;
    }

    .ccmon18-heading h2 {
        font-size: 30px;
        letter-spacing: -.7px;
    }

    .ccmon18-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
        padding: 9px 14px;
    }

    .ccmon18-mini-title {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .ccmon18-list {
        gap: 10px;
    }

    .ccmon18-list-item {
        padding: 13px 12px;
        gap: 11px;
        border-radius: 10px;
    }

    .ccmon18-list-item p {
        font-size: 15px;
    }

    .ccmon18-check {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 11px;
    }

    .ccmon18-highlight {
        padding: 17px 14px;
        gap: 12px;
    }

    .ccmon18-highlight-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        font-size: 20px;
    }

    .ccmon18-highlight p {
        font-size: 15px;
    }

    .ccmon18-visual {
        min-height: 410px;
        margin-top: 0;
    }

    .ccmon18-dashboard {
        width: 81%;
        padding: 9px;
        border-radius: 11px;
    }

    .ccmon18-dashboard-title {
        font-size: 10px;
        gap: 5px;
    }

    .ccmon18-dashboard-title i {
        font-size: 13px;
    }

    .ccmon18-dashboard-button {
        font-size: 7px;
        padding: 6px;
    }

    .ccmon18-course-grid {
        gap: 4px;
    }

    .ccmon18-course {
        padding: 4px;
    }

    .ccmon18-course-img {
        font-size: 17px;
    }

    .ccmon18-course h4 {
        font-size: 8px;
    }

    .ccmon18-course > span {
        font-size: 7px;
    }

    .ccmon18-course-stars {
        font-size: 7px;
        letter-spacing: 0;
    }

    .ccmon18-platforms {
        gap: 9px;
        top: 12%;
    }

    .ccmon18-platform {
        min-width: 93px;
        padding: 7px;
        gap: 5px;
        font-size: 9px;
        border-radius: 8px;
    }

    .ccmon18-platform-udemy,
    .ccmon18-platform-gum,
    .ccmon18-platform-skill {
        font-size: 16px;
    }

    .ccmon18-platform-teach {
        width: 17px;
        height: 17px;
        font-size: 12px;
    }

    .ccmon18-human {
        width: 90%;
        left: 7%;
    }

    .ccmon18-analytics {
        width: 110px;
        right: 0;
        bottom: 17%;
        padding: 10px;
    }

    .ccmon18-analytics-label {
        font-size: 8px;
    }

    .ccmon18-analytics-value {
        font-size: 23px;
    }

    .ccmon18-analytics-value i {
        font-size: 13px;
    }

    .ccmon18-bars {
        height: 30px;
        gap: 4px;
    }

    .ccmon18-brand {
        bottom: 4%;
        left: 2%;
        padding: 8px 10px;
        font-size: 10px;
    }

    .ccmon18-brand i {
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .ccmon18-visual {
        min-height: 360px;
    }

    .ccmon18-dashboard {
        width: 82%;
    }

    .ccmon18-platform {
        min-width: 80px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccmon18-section *,
    .ccmon18-section *::before,
    .ccmon18-section *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .ccmon18-section .ccmon18-reveal {
        opacity: 1;
        transform: none;
    }
}


/* =====================================================
   CREATORCLAW AI — BLOCK 19
   PREMIUM WHITE + GREEN MARKETING SUPPORT
===================================================== */

.ccmkt19-section {
    --ccmkt19-dark: #08271a;
    --ccmkt19-green: #0eaf42;
    --ccmkt19-green-2: #38df44;
    --ccmkt19-lime: #a6ed22;
    --ccmkt19-muted: #596e61;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 5% 65%,
            rgba(135, 231, 78, .09),
            transparent 35%
        ),
        linear-gradient(180deg, #ffffff, #fafffb);
    padding: 100px 0 115px;
    font-size: 18px;
    color: var(--ccmkt19-dark);
}

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

.ccmkt19-container {
    position: relative;
    z-index: 2;
}

/* BACKGROUND DECORATIONS */

.ccmkt19-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(75px);
}

.ccmkt19-bg-glow-one {
    width: 360px;
    height: 360px;
    left: -180px;
    top: 160px;
    background: rgba(79, 214, 66, .09);
}

.ccmkt19-bg-glow-two {
    width: 270px;
    height: 270px;
    right: -130px;
    bottom: 0;
    background: rgba(171, 237, 48, .1);
}

/* SECTION HEADING */

.ccmkt19-heading {
    max-width: 850px;
    margin: 0 auto 65px;
}

.ccmkt19-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    margin-bottom: 22px;
    border: 1px solid #c7edc8;
    border-radius: 100px;
    background: #f1fff1;
    color: #138832;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ccmkt19-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d846;
    box-shadow: 0 0 12px rgba(54, 213, 48, .5);
}

.ccmkt19-heading h2 {
    margin: 0;
    font-size: clamp(33px, 4.5vw, 58px);
    line-height: 1.13;
    font-weight: 900;
    letter-spacing: -1.8px;
    color: #08291b;
}

.ccmkt19-heading h2 span {
    display: block;
    margin-top: 4px;
    background: linear-gradient(
        100deg,
        #137d2d,
        #19c84c 52%,
        #78d71c
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ccmkt19-heading-line {
    width: 105px;
    height: 4px;
    margin: 25px auto 0;
    background: linear-gradient(90deg, #0caf45, #b5ef27);
    border-radius: 30px;
}

/* LEFT VISUAL */

.ccmkt19-visual {
    position: relative;
    width: 100%;
    min-height: 580px;
    max-width: 650px;
    margin: 0 auto;
}

.ccmkt19-visual-glow {
    position: absolute;
    width: 83%;
    height: 73%;
    left: 9%;
    bottom: 5%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(125, 234, 62, .22),
        rgba(41, 171, 65, .08) 52%,
        transparent 75%
    );
    filter: blur(18px);
    animation: ccmkt19Pulse 6s ease-in-out infinite;
}

.ccmkt19-circle {
    position: absolute;
    border: 1px solid rgba(77, 182, 82, .16);
    border-radius: 50%;
    pointer-events: none;
}

.ccmkt19-circle-one {
    width: 430px;
    height: 430px;
    left: 8%;
    top: 12%;
}

.ccmkt19-circle-two {
    width: 330px;
    height: 330px;
    left: 17%;
    top: 21%;
    border-style: dashed;
}

/* HUMAN IMAGE */

.ccmkt19-human-wrap {
position: absolute;
  width: 100%;
  height: 100%;
  left: 9%;
  bottom: 0%;
  border-radius: 50%;
  background: radial-gradient( ellipse, rgba(125, 234, 62, .22), rgba(41, 171, 65, .08) 52%, transparent 75% );
  /* filter: blur(18px); */
  animation: ccmkt19Pulse 6s ease-in-out infinite;
}


.ccmkt19-human {
display: block;
  width: 100%;
  max-height: 100%;
  /* object-fit: cover; */
  object-fit: scale-down;
  object-position: bottom center;
  filter: drop-shadow(0 18px 26px rgba(20, 76, 39, .12));
}

/* FLOATING CARDS */

.ccmkt19-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
    padding: 13px 15px;
    border: 1px solid rgba(73, 179, 86, .2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 15px 45px rgba(17, 70, 37, .10),
        0 3px 10px rgba(27, 88, 44, .04);
    backdrop-filter: blur(12px);
    animation: ccmkt19Float 5s ease-in-out infinite;
}

.ccmkt19-float-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #e2ffe0, #bcf4bf);
    color: #108d35;
    font-size: 19px;
}

.ccmkt19-float-card strong {
    display: block;
    font-size: 13px;
    font-weight: 850;
    color: #102e1c;
    white-space: nowrap;
}

.ccmkt19-float-card small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #7c8b80;
    white-space: nowrap;
}

.ccmkt19-status {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
    background: #35dc53;
    color: white;
    font-size: 10px;
}

.ccmkt19-card-one {
    top: 9%;
    left: 1%;
}

.ccmkt19-card-two {
    top: 30%;
    right: -1%;
    animation-delay: .8s;
}

.ccmkt19-card-three {
    bottom: 20%;
    left: 0;
    animation-delay: 1.5s;
}

.ccmkt19-icon-lime {
    background: #eeffce;
    color: #66ac14;
}

.ccmkt19-icon-email {
    background: #e3f5ff;
    color: #1286b7;
}

/* SEO CARD */

.ccmkt19-seo-card {
    position: absolute;
    right: 3%;
    bottom: 9%;
    z-index: 5;
    width: 170px;
    padding: 14px;
    border: 1px solid #c6ebbe;
    border-radius: 13px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 35px rgba(22, 103, 37, .10);
    animation: ccmkt19Float 6s ease-in-out infinite 1s;
}

.ccmkt19-seo-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 850;
    color: #173c22;
}

.ccmkt19-seo-top i {
    color: #16b442;
    font-size: 18px;
}

.ccmkt19-seo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
}

.ccmkt19-seo-tags span {
    padding: 5px 7px;
    border-radius: 5px;
    background: #eaffeb;
    color: #268941;
    font-size: 9px;
    font-weight: 800;
}

/* BOTTOM LABEL */

.ccmkt19-bottom-label {
    position: absolute;
    left: 23%;
    bottom: 1%;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    background: #0c3a22;
    color: #e2ffc7;
    box-shadow: 0 10px 22px rgba(19, 95, 43, .19);
    font-size: 12px;
    font-weight: 800;
}

.ccmkt19-bottom-label i {
    color: #b4f12e;
}

/* SPARKLES */

.ccmkt19-spark {
    position: absolute;
    z-index: 6;
    color: #72d72d;
    text-shadow: 0 0 12px rgba(107, 221, 38, .22);
    animation: ccmkt19Sparkle 4s ease-in-out infinite;
}

.ccmkt19-spark-one {
    top: 5%;
    right: 18%;
    font-size: 38px;
}

.ccmkt19-spark-two {
    bottom: 25%;
    left: 10%;
    font-size: 28px;
    animation-delay: 1.2s;
}

/* RIGHT CONTENT */

.ccmkt19-content {
    padding-left: 12px;
}

.ccmkt19-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 19px 22px;
    margin-bottom: 20px;
    border-radius: 15px;
    border: 1px solid #d8efda;
    background: linear-gradient(110deg, #f0fff0, #ffffff);
}

.ccmkt19-intro-icon {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #b8f53a, #32dd57);
    color: #08351b;
    font-size: 20px;
}

.ccmkt19-intro p {
    margin: 0;
    color: #334c3b;
    font-size: 18px;
    line-height: 1.5;
}

.ccmkt19-intro strong {
    display: block;
    color: #0b7e32;
    font-weight: 850;
}

/* FEATURE LIST */

.ccmkt19-feature-list {
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
    gap: 5px;
}

.ccmkt19-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 68px;
    padding: 12px 16px;
    border-radius: 13px;
    border: 1px solid #e2eee3;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(33, 76, 39, .035);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.ccmkt19-feature:hover {
    transform: translateX(-7px);
    border-color: #9ae4a2;
    background: #fafffa;
    box-shadow: 0 12px 30px rgba(32, 120, 49, .09);
}

.ccmkt19-feature-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #eaffde, #ddf8e2);
    color: #129b3c;
    font-size: 18px;
    transition: .3s ease;
}

.ccmkt19-feature:hover .ccmkt19-feature-icon {
    background: linear-gradient(135deg, #aaf236, #36d952);
    color: #07351a;
}

.ccmkt19-feature p {
    flex: 1;
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 700;
    color: #193728;
}

.ccmkt19-check {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e3fbe6;
    color: #20b747;
    font-size: 12px;
}

/* BOTTOM HIGHLIGHT */

.ccmkt19-highlight {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 19px 20px;
    border-radius: 15px;
    border: 1px solid #7cdd79;
    background: linear-gradient(
        110deg,
        #eaffdf,
        #f7fff4 58%,
        #ffffff
    );
    box-shadow: 0 10px 30px rgba(50, 183, 56, .07);
}

.ccmkt19-highlight-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #1aa744, #72df26);
    color: white;
    font-size: 23px;
}

.ccmkt19-highlight strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #0b612d;
}

.ccmkt19-highlight p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #63806b;
}

.ccmkt19-highlight-arrow {
    margin-left: auto;
    color: #35b84b;
    font-size: 21px;
}

/* ANIMATIONS */

@keyframes ccmkt19Float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes ccmkt19Pulse {
    0%, 100% {
        opacity: .6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.07);
    }
}

@keyframes ccmkt19Sparkle {
    0%, 100% {
        opacity: .45;
        transform: scale(.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

/* SCROLL REVEAL */

.ccmkt19-section .ccmkt19-animate {
    opacity: 1;
    transform: none;
}

.ccmkt19-section.ccmkt19-js-ready .ccmkt19-animate {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.ccmkt19-section.ccmkt19-js-ready .ccmkt19-animate.ccmkt19-visible {
    opacity: 1;
    transform: translateY(0);
}

/* TABLET */

@media (max-width: 991px) {

    .ccmkt19-section {
        padding: 75px 0;
    }

    .ccmkt19-heading {
        margin-bottom: 45px;
    }

    .ccmkt19-content {
        padding-left: 0;
    }

    .ccmkt19-visual {
        min-height: 560px;
        max-width: 600px;
        margin-top: 10px;
    }
}

/* MOBILE */

@media (max-width: 575px) {

    .ccmkt19-section {
        padding: 60px 0 55px;
    }

    .ccmkt19-heading {
        margin-bottom: 35px;
    }

    .ccmkt19-heading h2 {
        font-size: 31px;
        letter-spacing: -.8px;
    }

    .ccmkt19-eyebrow {
        padding: 9px 13px;
        font-size: 10px;
        letter-spacing: .8px;
    }

    .ccmkt19-intro {
        padding: 14px;
        gap: 11px;
        margin-bottom: 16px;
    }

    .ccmkt19-intro-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        font-size: 17px;
    }

    .ccmkt19-intro p {
        font-size: 15px;
    }

    .ccmkt19-feature-list {
        gap: 10px;
    }

    .ccmkt19-feature {
        padding: 12px;
        gap: 10px;
        min-height: 62px;
    }

    .ccmkt19-feature-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .ccmkt19-feature p {
        font-size: 15px;
    }

    .ccmkt19-check {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .ccmkt19-highlight {
        padding: 14px;
        gap: 11px;
    }

    .ccmkt19-highlight-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .ccmkt19-highlight strong {
        font-size: 14px;
    }

    .ccmkt19-highlight p {
        font-size: 12px;
    }

    .ccmkt19-highlight-arrow {
        font-size: 15px;
    }

    /* MOBILE VISUAL */

    .ccmkt19-visual {
        min-height: 420px;
        margin-top: 15px;
    }

    .ccmkt19-circle-one {
        width: 290px;
        height: 290px;
        top: 14%;
        left: 8%;
    }

    .ccmkt19-circle-two {
        width: 220px;
        height: 220px;
        top: 23%;
        left: 19%;
    }

    .ccmkt19-human-wrap {
        width: 85%;
        left: 7%;
    }

    .ccmkt19-human {
        max-height: 370px;
    }

    .ccmkt19-float-card {
        min-width: 0;
        padding: 8px 9px;
        gap: 7px;
        border-radius: 9px;
    }

    .ccmkt19-float-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        font-size: 13px;
        border-radius: 7px;
    }

    .ccmkt19-float-card strong {
        font-size: 9px;
    }

    .ccmkt19-float-card small {
        font-size: 8px;
    }

    .ccmkt19-status {
        width: 15px;
        height: 15px;
        font-size: 8px;
    }

    .ccmkt19-card-one {
        top: 8%;
        left: 0;
    }

    .ccmkt19-card-two {
        top: 31%;
        right: 0;
    }

    .ccmkt19-card-three {
        bottom: 21%;
        left: 0;
    }

    .ccmkt19-seo-card {
        width: 120px;
        padding: 9px;
        right: 0;
        bottom: 8%;
    }

    .ccmkt19-seo-top {
        font-size: 9px;
        gap: 5px;
    }

    .ccmkt19-seo-top i {
        font-size: 13px;
    }

    .ccmkt19-seo-tags span {
        padding: 4px;
        font-size: 7px;
    }

    .ccmkt19-bottom-label {
        left: 13%;
        bottom: 0;
        font-size: 9px;
        padding: 9px 12px;
    }

    .ccmkt19-spark-one {
        font-size: 27px;
    }
}

@media (max-width: 380px) {

    .ccmkt19-visual {
        min-height: 365px;
    }

    .ccmkt19-human {
        max-height: 330px;
    }

    .ccmkt19-card-three {
        bottom: 19%;
    }
}

/* REDUCED MOTION */

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

    .ccmkt19-section *,
    .ccmkt19-section *::before,
    .ccmkt19-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .ccmkt19-section.ccmkt19-js-ready .ccmkt19-animate {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================
   CREATORCLAW AI — BLOCK 20 TOOL CONSOLIDATION
   UPDATED: LEFT CONTENT CARD / RIGHT IMAGE
========================================================== */

.cctool20-section {
    --cctool20-bg: #020b08;
    --cctool20-green: #32e45b;
    --cctool20-lime: #b7f329;
    --cctool20-dark: #061810;
    --cctool20-text: #ffffff;
    --cctool20-muted: #b1c3b6;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 105px 0 115px;
    color: #fff;
    font-size: 18px;
    background:
        radial-gradient(ellipse at 15% 75%, rgba(33, 148, 55, .13), transparent 40%),
        radial-gradient(ellipse at 92% 18%, rgba(38, 156, 75, .08), transparent 38%),
        linear-gradient(135deg, #020907, #03110b 60%, #020907);
}

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

.cctool20-container {
    position: relative;
    z-index: 2;
}

/* BG */

.cctool20-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
}

.cctool20-bg-glow-1 {
    width: 390px;
    height: 390px;
    left: -180px;
    top: 220px;
    background: rgba(48, 196, 71, .10);
}

.cctool20-bg-glow-2 {
    width: 350px;
    height: 350px;
    right: -180px;
    bottom: 0;
    background: rgba(91, 224, 38, .09);
}

/* HEADING */

.cctool20-heading {
    max-width: 900px;
    margin: 0 auto 65px;
}

.cctool20-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 21px;
    margin-bottom: 22px;
    border-radius: 100px;
    border: 1px solid rgba(162, 243, 57, .38);
    background: rgba(38, 89, 32, .19);
    color: #c7fd63;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.6px;
}

.cctool20-dot {
    width: 8px;
    height: 8px;
    background: #aef32c;
    border-radius: 50%;
    box-shadow: 0 0 12px #70e33d;
}

.cctool20-heading h2 {
    font-size: clamp(34px, 4.4vw, 50px);
    line-height: 1.16;
    letter-spacing: -1.7px;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.cctool20-heading h2 span {
    /* display: block; */
    background: linear-gradient(90deg, #b7f427, #4af05b, #13c761);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cctool20-heading-line {
    width: 100px;
    height: 4px;
    border-radius: 10px;
    margin: 24px auto 0;
    background: linear-gradient(90deg, #b7f427, #19d65b);
}

/* LEFT CONTENT CARD */

.cctool20-content-card {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(141, 214, 132, .23);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(19, 42, 31, .94), rgba(8, 25, 18, .97));
    box-shadow:
        0 20px 65px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(176, 248, 176, .07);
}

.cctool20-card-topline {
    position: absolute;
    top: -1px;
    left: 18%;
    width: 64%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #b7f427, #2de15a, transparent);
}

.cctool20-intro {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 22px;
    margin-bottom: 19px;
    border-bottom: 1px solid rgba(133, 207, 137, .17);
}

.cctool20-intro-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #bff62f, #32df5a);
    color: #07351a;
    font-size: 23px;
}

.cctool20-intro h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 850;
    color: #fff;
}

.cctool20-intro h3 span {
    display: block;
    color: #bdf43c;
}

/* TOOLS LIST */

.cctool20-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cctool20-tool {
   display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  padding: 0px 14px;
    border-radius: 12px;
    /* background: rgba(4, 24, 14, .55); */
}

.cctool20-tool-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    background: rgba(128, 241, 55, .12);
    color: #aaf537;
    font-size: 15px;
}

.cctool20-tool p {
    margin: 0;
    color: #eef8ef;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

/* BOTTOM COPY */

.cctool20-bottom-copy {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(133, 207, 137, .14);
}

.cctool20-bottom-text {
margin: 0 0 14px;
  color: #d8e6db;
  font-size: 18px;
  line-height: 1.4;
}

.cctool20-bottom-text strong {
    color: #ffffff;
    font-weight: 900;
}

.cctool20-bottom-text-main {
    margin-bottom: 0;
    color: #c9f963;
    font-weight: 700;
}

/* RIGHT VISUAL */

.cctool20-visual {
    position: relative;
    width: 100%;
    max-width: 660px;
    min-height: 680px;
    margin: 0 auto;
}

.cctool20-visual-glow {
    position: absolute;
    width: 90%;
    height: 80%;
    left: 5%;
    bottom: 3%;
    background: radial-gradient(
        ellipse,
        rgba(71, 226, 42, .22),
        rgba(23, 116, 52, .10) 48%,
        transparent 72%
    );
    border-radius: 50%;
    filter: blur(23px);
    animation: cctool20Pulse 6s ease-in-out infinite;
}

.cctool20-orbit {
    position: absolute;
    border: 1px solid rgba(95, 201, 89, .16);
    border-radius: 50%;
}

.cctool20-orbit-one {
    width: 80%;
    aspect-ratio: 1;
    left: 10%;
    top: 13%;
}

.cctool20-orbit-two {
    width: 62%;
    aspect-ratio: 1;
    left: 19%;
    top: 23%;
    border-style: dashed;
    border-color: rgba(176, 242, 66, .12);
}

.cctool20-human-wrap {
    position: absolute;
    width: 90%;
    left: 5%;
    bottom: 4%;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.cctool20-human {
    display: block;
    width: 100%;
    max-height: 605px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 12px 36px rgba(47, 212, 59, .15));
}

/* FLOATING CARDS */

.cctool20-floating {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 168px;
    padding: 12px 15px;
    border: 1px solid rgba(121, 228, 96, .34);
    border-radius: 12px;
    background: rgba(7, 28, 18, .94);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, .3),
        0 0 20px rgba(46, 219, 64, .06);
    backdrop-filter: blur(12px);
    animation: cctool20Float 5s ease-in-out infinite;
}

.cctool20-float-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #bdf328, #35d95b);
    color: #073b19;
    font-size: 17px;
}

.cctool20-floating strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.cctool20-floating small {
    display: block;
    margin-top: 3px;
    color: #9aafa0;
    font-size: 10px;
    white-space: nowrap;
}

.cctool20-float-one {
    top: 11%;
    left: 0;
}

.cctool20-float-two {
    top: 29%;
    right: 0;
    animation-delay: .7s;
}

.cctool20-float-three {
    bottom: 32%;
    left: 0;
    animation-delay: 1.4s;
}

.cctool20-float-four {
    bottom: 13%;
    right: 0;
    animation-delay: 2s;
}

/* SMALL ICONS */

.cctool20-small-icon {
    position: absolute;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(171, 243, 57, .5);
    border-radius: 13px;
    background: rgba(12, 48, 26, .88);
    color: #b4f63d;
    font-size: 23px;
    box-shadow: 0 0 25px rgba(72, 223, 53, .13);
    animation: cctool20Float 5s ease-in-out infinite;
}

.cctool20-small-one {
    left: 16%;
    top: 30%;
    animation-delay: .8s;
}

.cctool20-small-two {
    right: 18%;
    top: 13%;
    animation-delay: 1.5s;
}

.cctool20-small-three {
    right: 12%;
    bottom: 31%;
    animation-delay: 2s;
}

/* BOTTOM PILL */

.cctool20-bottom-pill {
    position: absolute;
    z-index: 6;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: 100px;
    border: 1px solid rgba(157, 235, 75, .46);
    background: #062d1a;
    color: #dcff9b;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.cctool20-bottom-pill i {
    color: #a9f036;
    font-size: 16px;
}

.cctool20-spark {
    position: absolute;
    z-index: 6;
    color: #c0f936;
    text-shadow: 0 0 20px rgba(169, 245, 39, .7);
    animation: cctool20Spark 4s ease-in-out infinite;
}

.cctool20-spark-one {
    right: 8%;
    top: 4%;
    font-size: 35px;
}

.cctool20-spark-two {
    left: 9%;
    bottom: 14%;
    font-size: 29px;
    animation-delay: 1s;
}

/* REVEAL */

.cctool20-section.cctool20-js-ready .cctool20-reveal-item {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .75s ease, transform .75s ease;
}

.cctool20-section.cctool20-js-ready .cctool20-reveal-item.cctool20-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ANIMATIONS */

@keyframes cctool20Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes cctool20Pulse {
    0%, 100% { transform: scale(1); opacity: .65; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes cctool20Spark {
    0%, 100% { opacity: .45; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.16); }
}

/* RESPONSIVE */

@media (max-width: 1199px) {
    .cctool20-content-card {
        padding: 23px;
    }

    .cctool20-visual {
        min-height: 600px;
    }

    .cctool20-floating {
        min-width: 145px;
        padding: 10px;
    }

    .cctool20-floating strong {
        font-size: 11px;
    }
}

@media (max-width: 991px) {
    .cctool20-section {
        padding: 75px 0;
    }

    .cctool20-heading {
        margin-bottom: 45px;
    }

    .cctool20-visual {
        max-width: 630px;
        min-height: 590px;
    }

    .cctool20-content-card {
        max-width: 700px;
        margin: 0 auto;
        padding: 26px;
    }
}

@media (max-width: 575px) {
    .cctool20-section {
        padding: 60px 0;
    }

    .cctool20-heading {
        margin-bottom: 35px;
    }

    .cctool20-eyebrow {
        padding: 9px 12px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .cctool20-heading h2 {
        font-size: 32px;
        letter-spacing: -.6px;
    }

    .cctool20-content-card {
        padding: 18px 14px;
        border-radius: 15px;
    }

    .cctool20-intro {
        gap: 12px;
        padding-bottom: 17px;
    }

    .cctool20-intro-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .cctool20-intro h3 {
        font-size: 18px;
    }

    .cctool20-tool {
        padding: 10px;
        min-height: 48px;
        gap: 10px;
    }

    .cctool20-tool-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .cctool20-tool p {
        font-size: 15px;
    }

    .cctool20-bottom-text {
        font-size: 14px;
    }

    .cctool20-visual {
        min-height: 400px;
    }

    .cctool20-human-wrap {
        width: 90%;
        left: 5%;
    }

    .cctool20-human {
        max-height: 370px;
    }

    .cctool20-floating {
        min-width: 110px;
        padding: 7px;
        gap: 6px;
        border-radius: 8px;
    }

    .cctool20-float-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        border-radius: 7px;
        font-size: 12px;
    }

    .cctool20-floating strong {
        font-size: 9px;
    }

    .cctool20-floating small {
        font-size: 8px;
    }

    .cctool20-small-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .cctool20-bottom-pill {
        font-size: 9px;
        padding: 9px 13px;
    }

    .cctool20-bottom-pill i {
        font-size: 12px;
    }

    .cctool20-spark-one {
        font-size: 25px;
    }
}

@media (max-width: 380px) {
    .cctool20-visual {
        min-height: 350px;
    }

    .cctool20-human {
        max-height: 315px;
    }

    .cctool20-floating {
        min-width: 96px;
    }

    .cctool20-floating strong {
        font-size: 8px;
    }

    .cctool20-float-four {
        bottom: 18%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cctool20-section *,
    .cctool20-section *::before,
    .cctool20-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .cctool20-section.cctool20-js-ready .cctool20-reveal-item {
        opacity: 1;
        transform: none;
    }
}



/* ==========================================================
   CREATORCLAW AI — BLOCK 21
   FOR YOURSELF OR FOR CLIENTS
   WHITE + GREEN PREMIUM THEME
========================================================== */

.ccfc21-section {
    --ccfc21-dark: #092b1b;
    --ccfc21-green: #14b847;
    --ccfc21-green2: #39de55;
    --ccfc21-lime: #a6eb2d;
    --ccfc21-muted: #66796c;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0 110px;
    font-size: 18px;
    color: var(--ccfc21-dark);

    background:
        radial-gradient(
            ellipse at 5% 65%,
            rgba(121, 225, 83, .12),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 90% 18%,
            rgba(52, 190, 90, .065),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafffb 100%
        );
}

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

.ccfc21-container {
    position: relative;
    z-index: 2;
}

/* BACKGROUND */

.ccfc21-bg-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
}

.ccfc21-bg-glow-one {
    width: 390px;
    height: 390px;
    left: -180px;
    top: 24%;
    background: rgba(71, 212, 76, .10);
}

.ccfc21-bg-glow-two {
    width: 320px;
    height: 320px;
    right: -170px;
    bottom: -80px;
    background: rgba(151, 236, 53, .11);
}

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

.ccfc21-heading {
    max-width: 900px;
    margin: 0 auto 65px;
}

.ccfc21-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 20px;
    margin-bottom: 22px;
    border: 1px solid #bfe8c3;
    border-radius: 50px;
    background: #f0fff1;
    color: #168d37;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ccfc21-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #32d64e;
    box-shadow: 0 0 10px rgba(43, 206, 67, .5);
}

.ccfc21-heading h2 {
    margin: 0;
    font-size: clamp(33px, 4.6vw, 58px);
    line-height: 1.14;
    letter-spacing: -1.6px;
    font-weight: 900;
    color: #092c1b;
}

.ccfc21-heading h2 span {
    /* display: block; */
    margin-top: 5px;
    background: linear-gradient(
        90deg,
        #10842e,
        #23c850 50%,
        #78d71d
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ccfc21-heading-line {
    width: 100px;
    height: 4px;
    margin: 23px auto 0;
    border-radius: 20px;
    background: linear-gradient(90deg, #0caa43, #a4ef27);
}

/* ==========================================================
   LEFT — PREMIUM VISUAL
========================================================== */

.ccfc21-visual {
    position: relative;
    width: 100%;
    max-width: 650px;
    min-height: 580px;
    margin: 0 auto;
}

.ccfc21-visual-glow {
    position: absolute;
    inset: 12% 6% 5%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(129, 228, 75, .23),
        rgba(32, 170, 64, .08) 48%,
        transparent 75%
    );
    filter: blur(22px);
}

.ccfc21-orbit {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.ccfc21-orbit-one {
    width: 78%;
    aspect-ratio: 1;
    left: 11%;
    top: 10%;
    border: 1px solid rgba(35, 168, 70, .18);
}

.ccfc21-orbit-two {
    width: 59%;
    aspect-ratio: 1;
    left: 20%;
    top: 20%;
    border: 1px dashed rgba(79, 190, 71, .20);
}

/* MAIN HUMAN IMAGE */

.ccfc21-human-wrap {
    position: absolute;
    z-index: 3;
    left: 7%;
    bottom: 4%;
    width: 86%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.ccfc21-human {
    display: block;
    width: 100%;
    max-height: 540px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(
        0 19px 25px rgba(29, 113, 55, .13)
    );
}

/* ==========================================================
   FLOATING GLASS CARDS
========================================================== */

.ccfc21-floating {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 165px;
    padding: 12px 14px;
    border: 1px solid rgba(87, 185, 104, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .95);

    box-shadow:
        0 15px 40px rgba(24, 85, 46, .11),
        0 2px 8px rgba(25, 75, 39, .04);

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

    animation: ccfc21Float 5.5s ease-in-out infinite;
}

.ccfc21-float-icon {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        #dcffd5,
        #b8f1b9
    );
    color: #138c36;
    font-size: 18px;
}

.ccfc21-floating strong {
    display: block;
    color: #153c24;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.ccfc21-floating small {
    display: block;
    margin-top: 3px;
    color: #718677;
    font-size: 10px;
    white-space: nowrap;
}

.ccfc21-float-one {
    top: 12%;
    left: 0;
}

.ccfc21-float-two {
    top: 32%;
    right: 0;
    animation-delay: .8s;
}

.ccfc21-float-three {
    bottom: 28%;
    left: 0;
    animation-delay: 1.5s;
}

.ccfc21-float-four {
    bottom: 12%;
    right: 0;
    animation-delay: 2s;
}

/* SMALL FLOATING ICONS */

.ccfc21-small-icon {
    position: absolute;
    z-index: 4;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3efc8;
    border-radius: 12px;
    background: #f0ffe9;
    color: #23a841;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(37, 132, 55, .10);
}

.ccfc21-small-one {
    top: 7%;
    right: 17%;
}

.ccfc21-small-two {
    bottom: 24%;
    right: 16%;
}

/* BOTTOM PILL */

.ccfc21-bottom-pill {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 17px;
    border-radius: 50px;
    background: #103f25;
    color: #ddffb8;

    box-shadow:
        0 12px 26px rgba(15, 87, 39, .18);

    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ccfc21-bottom-pill i {
    color: #b9f132;
    font-size: 16px;
}

/* SPARKLES */

.ccfc21-spark {
    position: absolute;
    z-index: 6;
    color: #65cb39;
    text-shadow: 0 0 13px rgba(94, 204, 59, .18);
}

.ccfc21-spark-one {
    top: 6%;
    right: 8%;
    font-size: 33px;
}

.ccfc21-spark-two {
    bottom: 15%;
    left: 9%;
    font-size: 26px;
}

/* ==========================================================
   RIGHT — PREMIUM WHITE GLASS CARD
========================================================== */

.ccfc21-content-card {
    position: relative;
    overflow: hidden;
    padding: 32px;

    border: 1px solid rgba(84, 162, 101, .20);
    border-radius: 23px;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, .98),
        rgba(247, 255, 248, .97)
    );

    box-shadow:
        0 24px 65px rgba(30, 96, 49, .09),
        0 3px 12px rgba(32, 101, 44, .035),
        inset 0 1px 0 #ffffff;

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

.ccfc21-card-topline {
    position: absolute;
    top: 0;
    left: 17%;
    width: 66%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #32c950,
        #b2f12b,
        transparent
    );
}

/* CARD INTRO */

.ccfc21-card-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 23px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e4efe6;
}

.ccfc21-intro-icon {
    flex: 0 0 51px;
    width: 51px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;
    background: linear-gradient(
        135deg,
        #baf633,
        #34d957
    );

    color: #073b1d;
    font-size: 23px;
}

.ccfc21-card-intro h3 {
    margin: 0;
    color: #103b23;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 900;
}

.ccfc21-card-intro h3 span {
    display: block;
    color: #16a740;
}

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

.ccfc21-feature-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ccfc21-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 17px;

    border: 1px solid #e3eee5;
    border-radius: 13px;
    background: #ffffff;

    box-shadow:
        0 4px 18px rgba(37, 105, 48, .035);

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

.ccfc21-feature:hover {
    transform: translateY(-3px);
    border-color: #b0eab4;
    box-shadow:
        0 12px 28px rgba(42, 132, 53, .09);
}

.ccfc21-feature-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;
    background: linear-gradient(
        135deg,
        #eaffdb,
        #d6f6da
    );

    color: #159d3d;
    font-size: 19px;
}

.ccfc21-feature-text {
    flex: 1;
    min-width: 0;
}

.ccfc21-feature h4 {
    margin: 0 0 6px;
    color: #153a26;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.ccfc21-feature p {
    margin: 0;
    color: #607366;
    font-size: 16px;
    line-height: 1.55;
}

.ccfc21-check {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    border-radius: 50%;
    background: #e4fbe6;
    color: #20b849;
    font-size: 11px;
}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.ccfc21-section.ccfc21-js-ready .ccfc21-reveal {
    opacity: 0;
    transform: translateY(26px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}

.ccfc21-section.ccfc21-js-ready
.ccfc21-reveal.ccfc21-visible {
    opacity: 1;
    transform: translateY(0);
}

/* FLOAT ANIMATION */

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

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

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

@media (max-width: 1199px) {

    .ccfc21-content-card {
        padding: 24px;
    }

    .ccfc21-visual {
        min-height: 530px;
    }

    .ccfc21-floating {
        min-width: 140px;
        padding: 10px;
    }

    .ccfc21-floating strong {
        font-size: 11px;
    }

    .ccfc21-feature {
        padding: 15px;
    }
}

@media (max-width: 991px) {

    .ccfc21-section {
        padding: 75px 0;
    }

    .ccfc21-heading {
        margin-bottom: 45px;
    }

    .ccfc21-visual {
        max-width: 620px;
        min-height: 570px;
        margin-bottom: 20px;
    }

    .ccfc21-content-card {
        max-width: 710px;
        margin: 0 auto;
    }
}

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

@media (max-width: 575px) {

    .ccfc21-section {
        padding: 60px 0;
    }

    .ccfc21-heading {
        margin-bottom: 36px;
    }

    .ccfc21-eyebrow {
        padding: 9px 12px;
        font-size: 9px;
        letter-spacing: .9px;
    }

    .ccfc21-heading h2 {
        font-size: 31px;
        letter-spacing: -.7px;
    }

    /* VISUAL */

    .ccfc21-visual {
        min-height: 395px;
        margin-bottom: 15px;
    }

    .ccfc21-human-wrap {
        width: 90%;
        left: 5%;
    }

    .ccfc21-human {
        max-height: 360px;
    }

    .ccfc21-floating {
        min-width: 0;
        padding: 8px;
        gap: 7px;
        border-radius: 9px;
    }

    .ccfc21-float-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .ccfc21-floating strong {
        font-size: 9px;
    }

    .ccfc21-floating small {
        font-size: 8px;
    }

    .ccfc21-small-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .ccfc21-bottom-pill {
        padding: 9px 12px;
        font-size: 9px;
    }

    .ccfc21-bottom-pill i {
        font-size: 12px;
    }

    /* CONTENT CARD */

    .ccfc21-content-card {
        padding: 18px 14px;
        border-radius: 17px;
    }

    .ccfc21-card-intro {
        gap: 11px;
        padding-bottom: 17px;
        margin-bottom: 17px;
    }

    .ccfc21-intro-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

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

    .ccfc21-feature-list {
        gap: 10px;
    }

    .ccfc21-feature {
        padding: 13px 11px;
        gap: 11px;
        border-radius: 11px;
    }

    .ccfc21-feature-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
        font-size: 15px;
    }

    .ccfc21-feature h4 {
        font-size: 16px;
    }

    .ccfc21-feature p {
        font-size: 14px;
    }

    .ccfc21-check {
        flex-basis: 21px;
        width: 21px;
        height: 21px;
        font-size: 10px;
    }
}

@media (max-width: 380px) {

    .ccfc21-visual {
        min-height: 345px;
    }

    .ccfc21-human {
        max-height: 315px;
    }

    .ccfc21-float-four {
        bottom: 17%;
    }

    .ccfc21-feature {
        gap: 9px;
    }
}

/* REDUCED MOTION */

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

    .ccfc21-section *,
    .ccfc21-section *::before,
    .ccfc21-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .ccfc21-section.ccfc21-js-ready .ccfc21-reveal {
        opacity: 1;
        transform: none;
    }
}



/* ==========================================================
   CREATORCLAW AI — YOU DON'T NEED TO BE AN EXPERT
   ULTRA PREMIUM DARK GREEN THEME
========================================================== */

.ccexp22-section {
    --ccexp22-bg: #020b08;
    --ccexp22-card: #10271b;
    --ccexp22-green: #37e85a;
    --ccexp22-lime: #b9f32d;
    --ccexp22-muted: #b5c9b8;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 105px 0 115px;
    font-size: 18px;
    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 12% 65%,
            rgba(49, 163, 56, .13),
            transparent 40%
        ),
        radial-gradient(
            ellipse at 91% 18%,
            rgba(62, 190, 57, .08),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #020907 0%,
            #03110b 60%,
            #020907 100%
        );
}

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

.ccexp22-container {
    position: relative;
    z-index: 2;
}

/* BACKGROUND GLOW */

.ccexp22-bg-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
}

.ccexp22-bg-glow-one {
    width: 380px;
    height: 380px;
    left: -180px;
    top: 200px;
    background: rgba(43, 211, 72, .10);
}

.ccexp22-bg-glow-two {
    width: 330px;
    height: 330px;
    right: -170px;
    bottom: -90px;
    background: rgba(125, 221, 37, .08);
}

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

.ccexp22-heading {
    max-width: 920px;
    margin: 0 auto 65px;
}

.ccexp22-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 20px;
    margin-bottom: 23px;
    border: 1px solid rgba(174, 243, 67, .40);
    border-radius: 50px;
    background: rgba(34, 81, 36, .21);
    color: #c6fa68;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ccexp22-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b5f333;
    box-shadow: 0 0 13px rgba(169, 244, 52, .7);
}

.ccexp22-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(33px, 4.5vw, 50px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1.6px;
}

.ccexp22-heading h2 span {
    display: block;
    margin-top: 5px;

    background: linear-gradient(
        90deg,
        #b7f62d,
        #4bed57 52%,
        #11c66b
    );

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

.ccexp22-heading-line {
    width: 100px;
    height: 4px;
    margin: 23px auto 0;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #b5f52c,
        #28d962
    );
}

/* ==========================================================
   LEFT VISUAL
========================================================== */

.ccexp22-visual {
    position: relative;
    width: 100%;
    max-width: 650px;
    min-height: 585px;
    margin: 0 auto;
}

.ccexp22-visual-glow {
    position: absolute;
    inset: 12% 5% 5%;
    border-radius: 50%;

    background: radial-gradient(
        ellipse,
        rgba(82, 229, 41, .24),
        rgba(27, 125, 48, .10) 50%,
        transparent 75%
    );

    filter: blur(23px);
}

.ccexp22-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ccexp22-orbit-one {
    width: 79%;
    aspect-ratio: 1;
    top: 10%;
    left: 10%;
    border: 1px solid rgba(105, 210, 99, .17);
}

.ccexp22-orbit-two {
    width: 61%;
    aspect-ratio: 1;
    top: 20%;
    left: 19%;
    border: 1px dashed rgba(165, 243, 62, .15);
}

/* HUMAN IMAGE */

.ccexp22-human-wrap {
    position: absolute;
    z-index: 3;
    left: 7%;
    bottom: 5%;
    width: 86%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.ccexp22-human {
    display: block;
    width: 100%;
    max-height: 540px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(
        0 15px 32px rgba(56, 219, 57, .17)
    );
}

/* FLOATING CARDS */

.ccexp22-floating {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 172px;
    padding: 12px 14px;
    border: 1px solid rgba(129, 230, 88, .36);
    border-radius: 12px;

    background: rgba(5, 26, 16, .94);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .3),
        0 0 24px rgba(44, 217, 59, .07);

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

    animation: ccexp22Float 5.5s ease-in-out infinite;
}

.ccexp22-float-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        #b9f431,
        #3ce05b
    );
    color: #063719;
    font-size: 17px;
}

.ccexp22-floating strong {
    display: block;
    font-size: 12px;
    font-weight: 850;
    color: #ffffff;
    white-space: nowrap;
}

.ccexp22-floating small {
    display: block;
    margin-top: 3px;
    color: #9fb9a4;
    font-size: 10px;
    white-space: nowrap;
}

.ccexp22-float-one {
    top: 12%;
    left: 0;
}

.ccexp22-float-two {
    top: 31%;
    right: 0;
    animation-delay: .7s;
}

.ccexp22-float-three {
    bottom: 27%;
    left: 0;
    animation-delay: 1.4s;
}

.ccexp22-float-four {
    bottom: 12%;
    right: 0;
    animation-delay: 2s;
}

/* SMALL ICONS */

.ccexp22-small-icon {
    position: absolute;
    z-index: 4;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(172, 239, 65, .5);
    border-radius: 12px;
    background: rgba(12, 49, 27, .92);
    color: #bbf538;
    font-size: 20px;
    box-shadow: 0 0 22px rgba(74, 223, 56, .12);
}

.ccexp22-icon-one {
    top: 7%;
    right: 17%;
}

.ccexp22-icon-two {
    bottom: 26%;
    right: 16%;
}

/* BOTTOM PILL */

.ccexp22-bottom-pill {
    position: absolute;
    z-index: 6;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid rgba(168, 237, 68, .46);
    border-radius: 50px;
    background: #062e1a;
    color: #e0ffa6;
    box-shadow: 0 12px 27px rgba(0, 0, 0, .25);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ccexp22-bottom-pill i {
    color: #b9f42f;
}

/* SPARKLES */

.ccexp22-spark {
    position: absolute;
    z-index: 6;
    color: #bdf437;
    text-shadow: 0 0 18px rgba(178, 240, 47, .55);
}

.ccexp22-spark-one {
    top: 4%;
    right: 8%;
    font-size: 34px;
}

.ccexp22-spark-two {
    bottom: 15%;
    left: 9%;
    font-size: 27px;
}

/* ==========================================================
   RIGHT — PREMIUM GLASS CARD
========================================================== */

.ccexp22-content-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid rgba(135, 205, 133, .25);
    border-radius: 22px;

    background: linear-gradient(
        145deg,
        rgba(18, 43, 29, .96),
        rgba(7, 26, 17, .98)
    );

    box-shadow:
        0 22px 65px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(196, 251, 186, .07);

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

.ccexp22-card-topline {
    position: absolute;
    top: 0;
    left: 17%;
    width: 66%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #b8f42d,
        #31e45b,
        transparent
    );
}

/* CARD INTRO */

.ccexp22-card-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(149, 211, 145, .17);
}

.ccexp22-intro-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #baf52c, #3de05b);
    color: #063719;
    font-size: 21px;
}

.ccexp22-card-intro h3 {
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 900;
    color: #ffffff;
}

.ccexp22-card-intro h3 span {
    color: #bafa35;
}

/* CONTENT LIST */

.ccexp22-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ccexp22-item {
    display: flex;
    align-items: center;
    gap: 13px;
padding: 5px 5px;
    border-radius: 11px;

}

.ccexp22-item-icon {
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(122, 235, 51, .12);
    color: #b6f238;
    font-size: 16px;
}

.ccexp22-item p {
    margin: 0;
    color: #e2eee5;
    font-size: 16px;
    line-height: 1.55;
}

.ccexp22-item strong {
    color: #ffffff;
    font-weight: 900;
}

/* BOTTOM CONCLUSION */

.ccexp22-conclusion {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 21px;
    padding: 19px;
    border: 1px solid rgba(176, 243, 55, .55);
    border-radius: 13px;
    background: linear-gradient(
        110deg,
        rgba(29, 77, 29, .76),
        rgba(6, 40, 20, .9)
    );
}

.ccexp22-conclusion-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        #baf42a,
        #3cde59
    );
    color: #06391c;
    font-size: 22px;
}

.ccexp22-conclusion p {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
}

.ccexp22-conclusion strong {
    display: block;
    color: #b9f63b;
    font-weight: 900;
}

/* ==========================================================
   SCROLL ANIMATION
========================================================== */

.ccexp22-section.ccexp22-js-ready .ccexp22-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.ccexp22-section.ccexp22-js-ready
.ccexp22-reveal.ccexp22-visible {
    opacity: 1;
    transform: translateY(0);
}

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

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

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

@media (max-width: 1199px) {

    .ccexp22-content-card {
        padding: 23px;
    }

    .ccexp22-visual {
        min-height: 530px;
    }

    .ccexp22-floating {
        min-width: 140px;
        padding: 10px;
    }

    .ccexp22-floating strong {
        font-size: 11px;
    }

    .ccexp22-item {
        padding: 13px;
    }
}

@media (max-width: 991px) {

    .ccexp22-section {
        padding: 75px 0;
    }

    .ccexp22-heading {
        margin-bottom: 45px;
    }

    .ccexp22-visual {
        max-width: 630px;
        min-height: 570px;
        margin-bottom: 15px;
    }

    .ccexp22-content-card {
        max-width: 710px;
        margin: 0 auto;
    }
}

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

@media (max-width: 575px) {

    .ccexp22-section {
        padding: 60px 0;
    }

    .ccexp22-heading {
        margin-bottom: 35px;
    }

    .ccexp22-eyebrow {
        padding: 9px 13px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .ccexp22-heading h2 {
        font-size: 31px;
        letter-spacing: -.7px;
    }

    /* IMAGE */

    .ccexp22-visual {
        min-height: 395px;
        margin-bottom: 10px;
    }

    .ccexp22-human-wrap {
        width: 91%;
        left: 4.5%;
    }

    .ccexp22-human {
        max-height: 360px;
    }

    .ccexp22-floating {
        min-width: 0;
        padding: 8px;
        gap: 7px;
        border-radius: 9px;
    }

    .ccexp22-float-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .ccexp22-floating strong {
        font-size: 9px;
    }

    .ccexp22-floating small {
        font-size: 8px;
    }

    .ccexp22-small-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .ccexp22-bottom-pill {
        padding: 9px 12px;
        font-size: 9px;
    }

    .ccexp22-spark-one {
        font-size: 25px;
    }

    /* RIGHT CARD */

    .ccexp22-content-card {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .ccexp22-card-intro {
        gap: 11px;
        padding-bottom: 17px;
        margin-bottom: 17px;
    }

    .ccexp22-intro-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

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

    .ccexp22-list {
        gap: 9px;
    }

    .ccexp22-item {
        padding: 12px 10px;
        gap: 10px;
    }

    .ccexp22-item-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .ccexp22-item p {
        font-size: 14px;
    }

    .ccexp22-conclusion {
        padding: 14px 12px;
        gap: 11px;
    }

    .ccexp22-conclusion-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        font-size: 18px;
    }

    .ccexp22-conclusion p {
        font-size: 15px;
    }
}

@media (max-width: 380px) {

    .ccexp22-visual {
        min-height: 345px;
    }

    .ccexp22-human {
        max-height: 315px;
    }

    .ccexp22-float-four {
        bottom: 17%;
    }
}

/* REDUCED MOTION */

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

    .ccexp22-section *,
    .ccexp22-section *::before,
    .ccexp22-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .ccexp22-section.ccexp22-js-ready .ccexp22-reveal {
        opacity: 1;
        transform: none;
    }
}



/* ====================================================
   CREATORCLAW AI — BLOCK 23 AGENT WORKFLOW
   ULTRA PREMIUM WHITE + GREEN THEME
==================================================== */

.ccwf23-section {
    --ccwf23-dark: #082f1e;
    --ccwf23-green: #18bc48;
    --ccwf23-lime: #abed2d;
    --ccwf23-muted: #698170;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 105px 0 0px 0;
    font-size: 18px;
    color: var(--ccwf23-dark);

    background:
        radial-gradient(
            ellipse at 8% 70%,
            rgba(120, 228, 76, .11),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 90% 16%,
            rgba(50, 202, 78, .07),
            transparent 34%
        ),
        linear-gradient(180deg, #ffffff, #f9fffa);
}

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

.ccwf23-container {
    position: relative;
    z-index: 2;
}

.ccwf23-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(85px);
}

.ccwf23-glow-one {
    width: 350px;
    height: 350px;
    left: -180px;
    bottom: -50px;
    background: rgba(91, 223, 67, .10);
}

.ccwf23-glow-two {
    width: 300px;
    height: 300px;
    right: -160px;
    top: 5%;
    background: rgba(159, 229, 52, .10);
}

/* HEADING */

.ccwf23-heading {
    max-width: 1050px;
    margin: 0 auto 75px;
}

.ccwf23-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    margin-bottom: 22px;
    border: 1px solid #c5edc8;
    border-radius: 50px;
    background: #effff0;
    color: #128b37;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.7px;
}

.ccwf23-eyebrow-dot {
    width: 8px;
    height: 8px;
    background: #35d74b;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(51, 216, 76, .45);
}

.ccwf23-heading h2 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 57px);
    line-height: 1.16;
    font-weight: 900;
    letter-spacing: -1.7px;
    color: #092e1d;
}

.ccwf23-heading h2 span {
    display: block;
    margin-top: 6px;
    background: linear-gradient(
        90deg,
        #117d31,
        #24c950 52%,
        #80d91c
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ccwf23-heading-line {
    width: 105px;
    height: 4px;
    margin: 24px auto 0;
    border-radius: 20px;
    background: linear-gradient(90deg, #0bac45, #aaf030);
}

/* WORKFLOW */

.ccwf23-workflow {
    position: relative;
    max-width: 1220px;
    margin: 0 auto;
    padding: 6px 0;
}

.ccwf23-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
}

/* STEP CARDS */

.ccwf23-step {
    position: relative;
    min-width: 0;
    min-height: 188px;
    padding: 29px 10px 21px;
    border: 1px solid #d9ecdd;
    border-radius: 18px;
    background: linear-gradient(160deg, #fff, #f7fff8);
    box-shadow:
        0 15px 36px rgba(20, 99, 43, .065),
        inset 0 1px 0 #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.ccwf23-step:hover {
    transform: translateY(-6px);
    border-color: #87d990;
    box-shadow: 0 18px 35px rgba(20, 130, 45, .11);
}

/* CARD NUMBERS */

.ccwf23-number {
    position: absolute;
    top: 10px;
    left: 14px;
    color: #96b59c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* ICON BOX */

.ccwf23-icon {
    width: 73px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid #c3efb4;
    border-radius: 19px;
    background: linear-gradient(135deg, #e8ffd9, #c5f7c9);
    color: #11943c;
    font-size: 31px;
    box-shadow: 0 7px 20px rgba(56, 177, 65, .09);
}

.ccwf23-step h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.35;
    color: #153d25;
}

/* START STEP */

.ccwf23-step-input {
    border-color: #84d78b;
    background: linear-gradient(145deg, #f4fff0, #ffffff);
}

/* DONE STEP */

.ccwf23-track-bottom > .ccwf23-step:first-child {
    border-color: #56c96b;
    background: linear-gradient(145deg, #eaffdc, #f6fff0);
    box-shadow: 0 15px 40px rgba(35, 164, 57, .13);
}

.ccwf23-done-icon {
    background: linear-gradient(135deg, #acf12e, #3dd85d);
    border-color: transparent;
    color: #063d1b;
    box-shadow: 0 8px 22px rgba(90, 201, 49, .2);
}

/* CONNECTING ARROWS */

.ccwf23-track-top > .ccwf23-step:not(:last-child)::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: calc(100% + 7px);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    color: #35bd51;
    font-size: 18px;
    z-index: 3;
}

.ccwf23-track-bottom > .ccwf23-step:not(:first-child)::after {
    content: "\f060";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: calc(100% + 7px);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    color: #35bd51;
    font-size: 18px;
    z-index: 3;
}

/* U-TURN CONNECTOR */

.ccwf23-turn {
    position: relative;
    height: 84px;
    width: calc(10% - 4px);
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ccwf23-turn-line {
    position: absolute;
    width: 2px;
    height: 77px;
    background: linear-gradient(#49d767, #a8ec37);
    border-radius: 10px;
}

.ccwf23-turn-arrow {
    position: absolute;
    z-index: 3;
    bottom: 0;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #063b1c;
    border-radius: 50%;
    background: linear-gradient(135deg, #adf035, #37da59);
    font-size: 13px;
    box-shadow: 0 5px 17px rgba(32, 188, 58, .19);
}

/* FINAL SUMMARY STRIP */

.ccwf23-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
    width: fit-content;
    max-width: 100%;
    margin: 47px auto 0;
    padding: 18px 26px;
    border: 1px solid #bce9b4;
    border-radius: 50px;
    background: linear-gradient(100deg, #f1ffed, #ffffff, #eaffdf);
    color: #245332;
    font-size: 17px;
    font-weight: 750;
    box-shadow: 0 12px 32px rgba(50, 145, 49, .08);
}

.ccwf23-footer-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #b6f431, #36d85a);
    color: #06391a;
}

.ccwf23-footer-arrow {
    color: #25b951;
    font-size: 14px;
}

.ccwf23-footer strong {
    color: #0b842f;
    font-weight: 900;
}

/* SCROLL REVEAL */

.ccwf23-section.ccwf23-js-ready .ccwf23-step {
    opacity: 0;
    translate: 0 20px;
}

.ccwf23-section.ccwf23-js-ready .ccwf23-step.ccwf23-visible {
    opacity: 1;
    translate: 0 0;
    transition: opacity .55s ease, translate .55s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* TABLET: ORDERED FLOW */

@media (max-width: 991px) {
    .ccwf23-section {
        padding: 75px 0;
    }

    .ccwf23-heading {
        margin-bottom: 50px;
    }

    .ccwf23-track {
        gap: 13px;
    }

    .ccwf23-step {
        min-height: 155px;
        padding: 27px 7px 17px;
        border-radius: 13px;
    }

    .ccwf23-icon {
        width: 51px;
        height: 51px;
        font-size: 22px;
        margin-bottom: 13px;
        border-radius: 13px;
    }

    .ccwf23-step h3 {
        font-size: 12px;
    }

    .ccwf23-track-top > .ccwf23-step:not(:last-child)::after {
        left: calc(100% + 1px);
        font-size: 12px;
    }

    .ccwf23-track-bottom > .ccwf23-step:not(:first-child)::after {
        right: calc(100% + 1px);
        font-size: 12px;
    }
}

/* MOBILE: SINGLE VERTICAL TIMELINE */

@media (max-width: 575px) {
    .ccwf23-section {
        padding: 0px 0;
    }

    .ccwf23-heading {
        margin-bottom: 38px;
    }

    .ccwf23-heading h2 {
        font-size: 31px;
        letter-spacing: -.7px;
    }

    .ccwf23-eyebrow {
        padding: 9px 14px;
        font-size: 10px;
    }

    .ccwf23-workflow {
        max-width: 440px;
        padding-left: 19px;
    }

    .ccwf23-track {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .ccwf23-step {
        min-height: 86px;
        padding: 14px 14px 14px 57px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 15px;
        text-align: left;
    }

    .ccwf23-number {
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        font-size: 12px;
    }

    .ccwf23-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        margin: 0;
        font-size: 21px;
        border-radius: 12px;
    }

    .ccwf23-step h3 {
        font-size: 16px;
    }

    .ccwf23-track-top > .ccwf23-step:not(:last-child)::after,
    .ccwf23-track-bottom > .ccwf23-step:not(:first-child)::after {
        display: none;
    }

    /* Reorder bottom row to 6,7,8,9,10 */
    .ccwf23-track-bottom {
        flex-direction: column-reverse;
    }

    .ccwf23-track-top > .ccwf23-step::before,
    .ccwf23-track-bottom > .ccwf23-step::before {
        content: "";
        position: absolute;
        left: -19px;
        top: -15px;
        bottom: -15px;
        width: 2px;
        background: #b5e7b8;
    }

    .ccwf23-track-top > .ccwf23-step:first-child::before {
        top: 50%;
    }

    .ccwf23-track-bottom > .ccwf23-step:first-child::before {
        bottom: 50%;
    }

    .ccwf23-step::marker {
        content: "";
    }

    .ccwf23-turn {
        height: 14px;
        width: 100%;
    }

    .ccwf23-turn-line,
    .ccwf23-turn-arrow {
        display: none;
    }

    .ccwf23-footer {
        gap: 9px;
        margin-top: 32px;
        padding: 15px;
        border-radius: 17px;
        font-size: 13px;
    }

    .ccwf23-footer-icon {
        width: 29px;
        height: 29px;
    }

    .ccwf23-footer-arrow {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccwf23-section *,
    .ccwf23-section *::before,
    .ccwf23-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .ccwf23-section.ccwf23-js-ready .ccwf23-step {
        opacity: 1;
        translate: none;
    }
}


/* =========================================================
   BLOCK 24 — THE 7 AGENTS IN DETAIL
   WHITE THEME / REFERENCE STYLE LAYOUT
========================================================= */

.ccdet24-section {
    position: relative;
    padding: 20px 0;
    background:
        radial-gradient(circle at top left, rgba(94, 206, 70, 0.08), transparent 25%),
        radial-gradient(circle at bottom right, rgba(182, 241, 52, 0.08), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, #f9fcf8 100%);
    font-size: 18px;
    overflow: hidden;
}

.ccdet24-section {
    position: relative;
    overflow: hidden;

    padding: 20px 0 0px 0;
background: radial-gradient( circle at 82% 18%, rgb(0, 0, 2), transparent 27% ), radial-gradient( circle at 14% 75%, rgba(36, 153, 63, .08), transparent 28% ), linear-gradient( 180deg, #000 0%, #000 46%, #020202 100% );

    font-size: 18px;

    isolation: isolate;
}


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

.ccdet24-grid {
    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

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

    background-size:
        55px 55px;

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

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


/* =========================================================
   AMBIENT GLOW
========================================================= */

.ccdet24-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(25px);

    z-index: -2;
}


.ccdet24-glow--left {
    width: 470px;
    height: 470px;

    left: -230px;
    top: 300px;

    background:
        rgba(110, 220, 46, .085);
}


.ccdet24-glow--right {
    width: 560px;
    height: 560px;

    right: -260px;
    top: 90px;

    background:
        rgba(182, 255, 42, .09);
}


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

.ccdet24-wrap {
max-width: 1480px;
  margin: 0 auto;
  /* background: #f5f5f5; */
  border-radius: 28px;
  padding: 34px 15px;
  box-shadow: 0 24px 60px rgba(209, 254, 52, 0.24);
  border: 1px solid #97eb0880;
}


.ccdet24-head {
    margin-bottom: 34px;
}

.ccdet24-badge {
    display: inline-block;
    background: linear-gradient(135deg, #b8f11f, #d4ff36);
    color: #111111;
    font-weight: 900;
    font-size: clamp(22px, 2.3vw, 36px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 28px;
    border-radius: 18px;
    transform: skewX(-8deg);
    box-shadow: 0 10px 24px rgba(157, 224, 34, 0.28);
    border: 2px solid #111;
    font-style: italic;
}

.ccdet24-title {
    margin: 18px 0 0;
    font-size: clamp(24px, 2.5vw, 42px);
    line-height: 1.2;
    font-weight: 900;
    color: #fff;
}

.ccdet24-title span {
color: #cfff36;
}

/* CARD */

.ccdet24-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(32, 72, 40, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.ccdet24-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(45, 110, 55, 0.12);
    border-color: #bfe4b3;
}

.ccdet24-imgbox {
    min-height: 150px;
    padding: 18px 18px 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(168, 235, 88, 0.14), transparent 58%),
        linear-gradient(180deg, #fbfff9 0%, #f2fff0 100%);
}

.ccdet24-imgbox img {
max-height: 180px;
    width: auto;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.ccdet24-card:hover .ccdet24-imgbox img {
    transform: scale(1.05);
}

.ccdet24-cardbody {
    padding: 14px 18px 20px;
    text-align: center;
}

.ccdet24-cardbody h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
    color: #111111;
}

.ccdet24-cardbody p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #4d4d4d;
}

.ccdet24-cardbody em {
    color: #188f35;
    font-style: italic;
    font-weight: 700;
}

/* LABELS */

.ccdet24-label {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #caff69, #b5f12b);
    color: #111111;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(154, 215, 44, 0.18);
}

.ccdet24-label-bonus {
    background: linear-gradient(135deg, #1fcf56, #b8f12d);
}

/* PRO / BONUS slight accent */
.ccdet24-pro-card {
    border-color: #c7eaa7;
}

.ccdet24-bonus-card {
    border-color: #c7eaa7;
}

/* REVEAL */

.ccdet24-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.ccdet24-reveal.ccdet24-visible {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1199px) {
    .ccdet24-wrap {
        padding: 30px 22px;
    }

    .ccdet24-imgbox {
        min-height: 140px;
    }

    .ccdet24-imgbox img {
        max-height: 110px;
    }
}

@media (max-width: 991px) {
    .ccdet24-section {
        padding: 70px 0;
    }

    .ccdet24-wrap {
        border-radius: 24px;
        padding: 26px 18px;
    }

    .ccdet24-head {
        margin-bottom: 26px;
    }
}

@media (max-width: 575px) {
    .ccdet24-section {
        padding: 0px 0;
    }

    .ccdet24-wrap {
        padding: 20px 14px;
        border-radius: 18px;
    }

    .ccdet24-badge {
        font-size: 18px;
        padding: 14px 16px;
        border-radius: 14px;
    }

    .ccdet24-title {
        font-size: 24px;
    }

    .ccdet24-imgbox {
        min-height: 132px;
        padding: 16px 16px 8px;
    }

    .ccdet24-imgbox img {
        max-height: 100px;
    }

    .ccdet24-cardbody {
        padding: 14px 14px 18px;
    }

    .ccdet24-cardbody h3 {
        font-size: 18px;
    }

    .ccdet24-cardbody p {
        font-size: 14px;
    }

    .ccdet24-label {
        font-size: 10px;
        padding: 6px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccdet24-card,
    .ccdet24-imgbox img,
    .ccdet24-reveal {
        transition: none !important;
    }

    .ccdet24-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =====================================================
   CREATORCLAW AI — BLOCK 25 VIDEO DEMO
   PREMIUM WHITE + GREEN THEME
===================================================== */

.ccdemo25-section {
    --ccdemo25-dark: #082d1c;
    --ccdemo25-green: #14b847;
    --ccdemo25-lime: #adf02d;
    --ccdemo25-muted: #627968;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    font-size: 18px;
    color: var(--ccdemo25-dark);

    background:
        radial-gradient(
            ellipse at 50% 52%,
            rgba(117, 222, 80, .10),
            transparent 58%
        ),
        linear-gradient(180deg, #ffffff 0%, #fafffa 100%);



        background: url(../images/ccdemo25-section.png) no-repeat center bottom;
    background-size: auto;
  background-size: auto;
  background-size: cover;
padding: 10px 0px 0px 0px;
}

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

.ccdemo25-container {
    position: relative;
    z-index: 2;
}

/* BACKGROUND */

.ccdemo25-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(85px);
}

.ccdemo25-glow-one {
    width: 390px;
    height: 390px;
    left: -200px;
    top: 25%;
    background: rgba(91, 219, 73, .1);
}

.ccdemo25-glow-two {
    width: 350px;
    height: 350px;
    right: -180px;
    bottom: -70px;
    background: rgba(164, 233, 51, .1);
}

/* HEADING */

.ccdemo25-heading {
    max-width: 900px;
    margin: 0 auto 20px;
}

.ccdemo25-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 19px;
    margin-bottom: 22px;
    border: 1px solid #bfecc4;
    border-radius: 50px;
    background: #effff0;
    color: #128d37;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1.6px;
}

.ccdemo25-eyebrow i {
    font-size: 15px;
    color: #16b94b;
}

.ccdemo25-heading h2 {
    margin: 0;
    color: #092e1d;
font-size: clamp(33px, 4.5vw, 50px);
    line-height: 1.15;
    letter-spacing: -1.6px;
    font-weight: 900;
}

.ccdemo25-heading h2 span {
    /* display: block; */
    margin-top: 5px;
    background: linear-gradient(90deg, #0e8230, #20c950 55%, #80d91d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ccdemo25-heading-line {
    width: 105px;
    height: 4px;
    margin: 24px auto 0;
    border-radius: 20px;
    background: linear-gradient(90deg, #0da943, #a8ee2c);
}

/* VIDEO SHELL */

.ccdemo25-video-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(47, 154, 72, .3);
    border-radius: 22px;
    background: #07150f;

    box-shadow:
        0 30px 80px rgba(16, 86, 43, .17),
        0 0 0 7px rgba(73, 191, 71, .045);
}

/* GLOW EDGE */

.ccdemo25-video-shell::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #a9f02d,
        #2cdd5a,
        transparent
    );
    pointer-events: none;
}

/* TOPBAR */

.ccdemo25-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 19px;
    background: linear-gradient(90deg, #0b2115, #0e2b1b);
    border-bottom: 1px solid rgba(121, 201, 128, .17);
}

.ccdemo25-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ccdemo25-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.ccdemo25-dots span:nth-child(1) {
    background: #ff6969;
}

.ccdemo25-dots span:nth-child(2) {
    background: #ffd364;
}

.ccdemo25-dots span:nth-child(3) {
    background: #42d977;
}

.ccdemo25-topbar-title {
    color: #b9d5bf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.ccdemo25-topbar-icon {
    color: #95cd9e;
    font-size: 15px;
}

/* VIDEO WRAPPER */

.ccdemo25-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(circle at center, #154128, #06130d 68%);
}

.ccdemo25-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #07130d;
}

/* PLAY OVERLAY */

.ccdemo25-play-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        rgba(3, 19, 10, .12),
        rgba(3, 20, 10, .34)
    );
    transition: opacity .3s ease;
}

.ccdemo25-play-overlay.ccdemo25-hidden {
    opacity: 0;
    pointer-events: none;
}

.ccdemo25-play-ring {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(233, 255, 206, .55);
    border-radius: 50%;
    background: linear-gradient(135deg, #c5f93a, #3ee35e);
    color: #083d1c;
    font-size: 31px;

    box-shadow:
        0 0 0 12px rgba(165, 241, 64, .14),
        0 15px 45px rgba(35, 174, 56, .3);

    transition: transform .3s ease;
}

.ccdemo25-play-ring i {
    margin-left: 5px;
}

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

.ccdemo25-play-text {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

/* BOTTOM STRIP */

.ccdemo25-bottom-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border-top: 1px solid rgba(121, 201, 128, .17);
    background: linear-gradient(90deg, #0b2417, #07180f);
}

.ccdemo25-bottom-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e1f5e3;
    font-size: 13px;
    font-weight: 800;
}

.ccdemo25-bottom-left i {
    color: #aef036;
    font-size: 17px;
}

.ccdemo25-bottom-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b8e7bd;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.3px;
}

.ccdemo25-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #68e958;
}

/* CAPTION */

.ccdemo25-caption {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid #caebc8;
    border-radius: 16px;
    background: linear-gradient(100deg, #f1fff0, #ffffff);

    box-shadow: 0 10px 30px rgba(32, 116, 49, .055);
}

.ccdemo25-caption-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #b8f42d, #38d957);
    color: #073919;
    font-size: 19px;
}

.ccdemo25-caption p {
    margin: 0;
    padding-top: 4px;
    color: #395a42;
    font-size: 17px;
    line-height: 1.65;
}

.ccdemo25-caption strong {
    color: #0b9237;
    font-weight: 900;
}

/* SPARKLES */

.ccdemo25-spark {
    position: absolute;
    z-index: -1;
    color: #73cf3f;
}

.ccdemo25-spark-one {
    top: 31%;
    left: 1%;
    font-size: 32px;
}

.ccdemo25-spark-two {
    top: 65%;
    right: 1%;
    font-size: 27px;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .ccdemo25-section {
        padding: 75px 0;
    }

    .ccdemo25-heading {
        margin-bottom: 45px;
    }
}

@media (max-width: 575px) {
    .ccdemo25-section {
        padding: 0px 0;
    }

    .ccdemo25-heading {
        margin-bottom: 35px;
    }

    .ccdemo25-heading h2 {
        font-size: 31px;
        letter-spacing: -.8px;
    }

    .ccdemo25-eyebrow {
        padding: 9px 14px;
        font-size: 10px;
    }

    .ccdemo25-video-shell {
        border-radius: 14px;
    }

    .ccdemo25-topbar {
        padding: 11px 12px;
    }

    .ccdemo25-topbar-title {
        font-size: 8px;
        letter-spacing: .6px;
    }

    .ccdemo25-dots span {
        width: 7px;
        height: 7px;
    }

    .ccdemo25-play-ring {
        width: 62px;
        height: 62px;
        font-size: 22px;
        box-shadow: 0 0 0 7px rgba(165, 241, 64, .14);
    }

    .ccdemo25-play-text {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .ccdemo25-bottom-strip {
        padding: 12px;
    }

    .ccdemo25-bottom-left {
        font-size: 11px;
    }

    .ccdemo25-bottom-right {
        font-size: 8px;
        letter-spacing: .3px;
    }

    .ccdemo25-caption {
        gap: 11px;
        padding: 16px 14px;
        margin-top: 18px;
    }

    .ccdemo25-caption-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .ccdemo25-caption p {
        padding-top: 0;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccdemo25-section *,
    .ccdemo25-section *::before,
    .ccdemo25-section *::after {
        transition: none !important;
        animation: none !important;
    }
}



/* =====================================================
   CREATORCLAW AI — BLOCK 26
   REFERENCE STYLE VERTICAL CHECKLIST
   PREMIUM WHITE + LIME + DARK GREEN
===================================================== */

.ccpkg26-section {
    --cc26-lime: #aff31f;
    --cc26-green: #18b947;
    --cc26-dark: #062719;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0;
    /* background:
        radial-gradient(ellipse at 50% 10%, #0b3322 0%, transparent 58%),
        linear-gradient(135deg, #020d09, #051c13 50%, #020e0a); */
    font-size: 18px;

    background: url("../images/ccflow27-section.webp") center top / cover no-repeat;
}

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

/* BACKGROUND DOT PATTERN */

.ccpkg26-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: .17;
    background-image: radial-gradient(
        rgba(133, 236, 93, .5) 1px,
        transparent 1px
    );
    background-size: 22px 22px;
    mask-image: linear-gradient(
        90deg,
        black,
        transparent 35%,
        transparent 65%,
        black
    );
    pointer-events: none;
}

/* MAIN PANEL */

.ccpkg26-panel {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
    padding: 75px 42px 45px;
    border-radius: 28px;
    background: linear-gradient(
        145deg,
        #ecefeb,
        #e6eae5
    );
    box-shadow:
        0 30px 85px rgba(0, 0, 0, .26),
        inset 0 1px 0 #ffffff;
}

/* TOP FLOATING LABEL */

.ccpkg26-top-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid #e4f1db;
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(27, 82, 34, .10);
    color: #18442a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
    white-space: nowrap;
    z-index: 4;
}

.ccpkg26-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #81da24;
}

/* HEADING */

.ccpkg26-heading {
    margin-bottom: 35px;
}

.ccpkg26-heading h2 {
    margin: 0;
    color: #082c1c;
    font-size: clamp(28px, 3.5vw, 50px);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -1.2px;
}

.ccpkg26-heading h2 span {
    /* display: block; */
    margin-top: 4px;
    background: linear-gradient(
        90deg,
        #0b842f,
        #25c950 50%,
        #75cc16
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TIMELINE */

.ccpkg26-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* VERTICAL CONNECTING LINE */

.ccpkg26-timeline::before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 35px;
    left: 43px;
    width: 2px;
    background: linear-gradient(
        180deg,
        #c4ef94,
        #6bcc65 55%,
        #a7e75a
    );
    z-index: 0;
}

/* INDIVIDUAL CARDS */

.ccpkg26-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 105px;
    padding: 22px 22px 22px 85px;
    border: 1px solid rgba(183, 218, 171, .35);
    border-radius: 17px;
    background: linear-gradient(
        110deg,
        #ffffff,
        #fafff8
    );
    box-shadow:
        0 11px 25px rgba(31, 68, 32, .045);
    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.ccpkg26-card:hover {
    border-color: #a5dc8b;
    box-shadow: 0 14px 30px rgba(36, 107, 38, .08);
}

/* STEP NUMBER */

.ccpkg26-number {
    position: absolute;
    top: 18px;
    left: 19px;
    color: #e0e8de;
    font-size: 31px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1.5px;
}

/* IMAGE BOX */

.ccpkg26-icon {
    position: relative;
    z-index: 2;
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(
        135deg,
        #c4fb44,
        #8bea17
    );
    box-shadow:
        0 9px 22px rgba(109, 203, 36, .17);
}

.ccpkg26-icon img {
    display: block;
    width: 100%;
    max-width: 53px;
    height: 53px;
    object-fit: contain;
}

/* CONTENT */

.ccpkg26-content {
    flex: 1;
    min-width: 0;
}

.ccpkg26-content h3 {
    margin: 0;
    color: #0c2a17;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 850;
}

/* RIGHT STATUS LABEL */

.ccpkg26-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 9px 13px;
    border: 1px solid #d6eac8;
    border-radius: 50px;
    background: #f1fae9;
    color: #4d9229;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    white-space: nowrap;
}

/* FINAL CARD */

.ccpkg26-card-last {
    border-color: #9cdd75;
    background: linear-gradient(
        110deg,
        #f5ffec,
        #ffffff
    );
}

/* SCROLL REVEAL */

.ccpkg26-section.ccpkg26-js-ready .ccpkg26-card {
    opacity: 0;
    transform: translateY(20px);
}

.ccpkg26-section.ccpkg26-js-ready
.ccpkg26-card.ccpkg26-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .6s ease,
        transform .6s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* TABLET */

@media (max-width: 991px) {
    .ccpkg26-section {
        padding: 80px 0;
    }

    .ccpkg26-panel {
        padding: 65px 28px 30px;
    }

    .ccpkg26-card {
        padding: 18px 18px 18px 75px;
        gap: 16px;
    }

    .ccpkg26-timeline::before {
        left: 37px;
    }

    .ccpkg26-icon {
        flex-basis: 57px;
        width: 57px;
        height: 57px;
    }

    .ccpkg26-icon img {
        max-width: 48px;
        height: 48px;
    }

    .ccpkg26-content h3 {
        font-size: 17px;
    }
}

/* MOBILE */

@media (max-width: 575px) {
    .ccpkg26-section {
        padding: 65px 0;
    }

    .ccpkg26-panel {
        padding: 55px 13px 18px;
        border-radius: 18px;
    }

    .ccpkg26-top-label {
        top: -17px;
        min-height: 35px;
        padding: 9px 12px;
        gap: 6px;
        font-size: 8px;
        letter-spacing: .5px;
    }

    .ccpkg26-heading {
        margin-bottom: 27px;
    }

    .ccpkg26-heading h2 {
        font-size: 26px;
        letter-spacing: -.6px;
    }

    .ccpkg26-timeline {
        gap: 10px;
    }

    .ccpkg26-timeline::before {
        left: 22px;
        top: 30px;
        bottom: 30px;
    }

    .ccpkg26-card {
        min-height: 95px;
        gap: 12px;
        padding: 17px 10px 17px 47px;
        border-radius: 12px;
    }

    .ccpkg26-number {
        top: 14px;
        left: 8px;
        font-size: 22px;
    }

    .ccpkg26-icon {
        flex-basis: 43px;
        width: 43px;
        height: 43px;
        border-radius: 10px;
    }

    .ccpkg26-icon img {
        max-width: 36px;
        height: 36px;
    }

    .ccpkg26-content h3 {
        font-size: 14px;
        line-height: 1.45;
    }

    .ccpkg26-status {
        display: none;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .ccpkg26-card {
        padding-left: 40px;
        gap: 9px;
    }

    .ccpkg26-timeline::before {
        left: 18px;
    }

    .ccpkg26-number {
        left: 5px;
        font-size: 19px;
    }

    .ccpkg26-icon {
        flex-basis: 37px;
        width: 37px;
        height: 37px;
    }

    .ccpkg26-icon img {
        max-width: 31px;
        height: 31px;
    }

    .ccpkg26-content h3 {
        font-size: 13px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .ccpkg26-section *,
    .ccpkg26-section *::before,
    .ccpkg26-section *::after {
        animation: none !important;
        transition: none !important;
    }

    .ccpkg26-section.ccpkg26-js-ready .ccpkg26-card {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   BLOCK 27 — WHO THIS IS FOR
   DARK THEME / REFERENCE STYLE
========================================================= */

.ccf27-section {
    --ccf27-bg-1: #02140d;
    --ccf27-bg-2: #042117;
    --ccf27-panel: #101916;
    --ccf27-panel-2: #16211d;
    --ccf27-border: rgba(255, 255, 255, 0.10);
    --ccf27-text: #ffffff;
    --ccf27-muted: #c5d2ca;
    --ccf27-lime: #b8f12d;
    --ccf27-lime-2: #d4ff56;
    --ccf27-chip-1: #f0e7b6;
    --ccf27-chip-2: #d8e7f7;
    --ccf27-chip-3: #d9f3e3;
    --ccf27-chip-4: #ead8f1;
    --ccf27-chip-5: #f3d5dc;
    --ccf27-chip-6: #dcead2;

    position: relative;
    overflow: hidden;
    padding: 95px 0;
    font-size: 18px;
    background:
        radial-gradient(circle at 15% 20%, rgba(90, 180, 255, 0.12), transparent 24%),
        radial-gradient(circle at 85% 0%, rgba(120, 180, 255, 0.08), transparent 25%),
        radial-gradient(circle at 50% 80%, rgba(81, 210, 98, 0.08), transparent 26%),
        linear-gradient(180deg, #032448 0%, #041b36 18%, #02140d 60%, #02110c 100%);
}

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

.ccf27-panel {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: 42px 42px 34px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(18, 25, 22, 0.96) 0%, rgba(14, 20, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* heading */

.ccf27-heading {
    margin-bottom: 28px;
}

.ccf27-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ccf27-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -1.6px;
    text-transform: uppercase;
}

.ccf27-title span {
    display: inline-block;
    padding: 2px 12px 5px;
    margin-left: 6px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ccf27-lime), var(--ccf27-lime-2));
    color: #111111;
    box-shadow: 0 8px 20px rgba(184, 241, 45, 0.24);
}

.ccf27-title-decor {
    width: 34px;
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--ccf27-lime), transparent);
    position: relative;
}

.ccf27-title-decor::before,
.ccf27-title-decor::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--ccf27-lime);
}

.ccf27-title-decor::before {
    left: -7px;
    transform: translateY(-50%) rotate(22deg);
}

.ccf27-title-decor::after {
    right: -7px;
    transform: translateY(-50%) rotate(-22deg);
}

/* grid */

.ccf27-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
}

.ccf27-card {
    height: 100%;
    min-height: 285px;
    padding: 24px 18px 24px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.00) 100%);
    transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.ccf27-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(184, 241, 45, 0.05) 0%, rgba(255,255,255,0.00) 100%);
    box-shadow: inset 0 0 0 1px rgba(184, 241, 45, 0.12);
}

.ccf27-image-wrap {
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 16px;
}

.ccf27-image-wrap img {
    max-height: 110px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* labels */
.ccf27-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    margin-bottom: 14px;
    border-radius: 14px;
    color: #111111;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.ccf27-grid > div:nth-child(1) .ccf27-label { background: var(--ccf27-chip-1); }
.ccf27-grid > div:nth-child(2) .ccf27-label { background: #f2d3d9; }
.ccf27-grid > div:nth-child(3) .ccf27-label { background: var(--ccf27-chip-3); }
.ccf27-grid > div:nth-child(4) .ccf27-label { background: #d8d1ef; }
.ccf27-grid > div:nth-child(5) .ccf27-label { background: #d7e8f5; }
.ccf27-grid > div:nth-child(6) .ccf27-label { background: #efe3cc; }

.ccf27-content {
    color: var(--ccf27-muted);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    max-width: 270px;
    margin: 0 auto;
}

/* reveal */
.ccf27-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.ccf27-reveal.ccf27-visible {
    opacity: 1;
    transform: translateY(0);
}

/* tablet */
@media (max-width: 991px) {
    .ccf27-section {
        padding: 75px 0;
    }

    .ccf27-panel {
        padding: 30px 22px 24px;
        border-radius: 22px;
    }

    .ccf27-card {
        min-height: 260px;
    }

    .ccf27-title {
        font-size: 38px;
    }

    .ccf27-label {
        font-size: 17px;
    }
}

/* mobile */
@media (max-width: 575px) {
    .ccf27-section {
        padding: 55px 0;
    }

    .ccf27-panel {
        padding: 24px 14px 18px;
        border-radius: 18px;
    }

    .ccf27-heading {
        margin-bottom: 18px;
    }

    .ccf27-title-wrap {
        gap: 10px;
    }

    .ccf27-title {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.7px;
    }

    .ccf27-title span {
        padding: 2px 9px 4px;
        border-radius: 10px;
    }

    .ccf27-title-decor {
        width: 22px;
        height: 4px;
    }

    .ccf27-card {
        min-height: auto;
        padding: 18px 14px 20px;
    }

    .ccf27-image-wrap {
        height: 95px;
        margin-bottom: 12px;
    }

    .ccf27-image-wrap img {
        max-height: 88px;
    }

    .ccf27-label {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 16px;
        margin-bottom: 10px;
        border-radius: 12px;
    }

    .ccf27-content {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccf27-card,
    .ccf27-reveal {
        transition: none !important;
    }

    .ccf27-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   BLOCK 27 — WHO THIS IS FOR
   WHITE THEME / REFERENCE STYLE
========================================================= */

.ccwf27-section {
    --ccwf27-panel: #f3f3f1;
    --ccwf27-border: #cfcfcf;
    --ccwf27-text: #111111;
    --ccwf27-muted: #454545;
    --ccwf27-lime: #c6f12f;
    --ccwf27-lime-2: #dfff59;

    position: relative;
    overflow: hidden;
    padding: 90px 0;
    font-size: 18px;
    background:
        radial-gradient(circle at 10% 10%, rgba(164, 216, 255, 0.15), transparent 20%),
        radial-gradient(circle at 90% 20%, rgba(193, 244, 120, 0.10), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

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

.ccwf27-panel {
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 42px 26px;
    border-radius: 28px;
    background: var(--ccwf27-panel);
    border: 1px solid #e7e7e7;
    box-shadow: 0 24px 60px rgba(20, 45, 40, 0.08);
}

/* heading */

.ccwf27-heading {
    margin-bottom: 22px;
}

.ccwf27-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ccwf27-title {
    margin: 0;
    color: #0d0d0d;
    font-size: clamp(34px, 4vw, 62px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1.8px;
    text-transform: uppercase;
}

.ccwf27-title span {
    display: inline-block;
    padding: 2px 12px 6px;
    margin-left: 6px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ccwf27-lime), var(--ccwf27-lime-2));
    color: #111111;
    box-shadow: 0 8px 18px rgba(186, 233, 49, 0.22);
}

.ccwf27-decor {
    width: 32px;
    height: 6px;
    border-radius: 50px;
    background: linear-gradient(90deg, transparent, #b8ef30, transparent);
    position: relative;
}

.ccwf27-decor::before,
.ccwf27-decor::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 2px;
    background: #b7ee2d;
    border-radius: 3px;
}

.ccwf27-decor::before {
    left: -7px;
    transform: translateY(-50%) rotate(24deg);
}

.ccwf27-decor::after {
    right: -7px;
    transform: translateY(-50%) rotate(-24deg);
}

/* grid */

.ccwf27-grid {
    border-top: 1px solid var(--ccwf27-border);
    border-left: 1px solid var(--ccwf27-border);
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.35);
}

.ccwf27-item {
    height: 100%;
    min-height: 285px;
    padding: 26px 18px 24px;
    text-align: center;
    border-right: 1px solid var(--ccwf27-border);
    border-bottom: 1px solid var(--ccwf27-border);
    transition: transform 0.35s ease, background 0.35s ease;
}

.ccwf27-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.55);
}

.ccwf27-image-wrap {
height: 170px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}

.ccwf27-image-wrap img {
max-height: 180px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* chips */

.ccwf27-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #111111;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}

.ccwf27-chip-1 { background: #efe4b4; }
.ccwf27-chip-2 { background: #f4d5dc; }
.ccwf27-chip-3 { background: #d9f1df; }
.ccwf27-chip-4 { background: #e5d6ef; }
.ccwf27-chip-5 { background: #efe5bf; }
.ccwf27-chip-6 { background: #d7e8f5; }

.ccwf27-text {
    max-width: 290px;
    margin: 0 auto;
    color: var(--ccwf27-muted);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}

/* reveal */

.ccwf27-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.ccwf27-reveal.ccwf27-visible {
    opacity: 1;
    transform: translateY(0);
}

/* tablet */

@media (max-width: 991px) {
    .ccwf27-section {
        padding: 70px 0;
    }

    .ccwf27-panel {
        padding: 28px 20px 18px;
        border-radius: 22px;
    }

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

    .ccwf27-item {
        min-height: 260px;
    }

    .ccwf27-chip {
        font-size: 17px;
    }
}

/* mobile */

@media (max-width: 575px) {
    .ccwf27-section {
        padding: 55px 0;
    }

    .ccwf27-panel {
        padding: 22px 14px 14px;
        border-radius: 18px;
    }

    .ccwf27-heading {
        margin-bottom: 16px;
    }

    .ccwf27-title-wrap {
        gap: 10px;
    }

    .ccwf27-title {
        font-size: 28px;
        letter-spacing: -0.8px;
        line-height: 1.12;
    }

    .ccwf27-title span {
        padding: 2px 9px 4px;
        border-radius: 10px;
    }

    .ccwf27-decor {
        width: 22px;
        height: 4px;
    }

    .ccwf27-item {
        min-height: auto;
        padding: 18px 14px 20px;
    }

    .ccwf27-image-wrap {
        height: 96px;
        margin-bottom: 12px;
    }

    .ccwf27-image-wrap img {
        max-height: 86px;
    }

    .ccwf27-chip {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 16px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .ccwf27-text {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccwf27-item,
    .ccwf27-reveal {
        transition: none !important;
    }

    .ccwf27-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}