/* Breadcrumb */
        .tz-breadcrumb {
            padding: 180px 0 120px;
            background: linear-gradient(rgba(10, 15, 26, 0.8), rgba(10, 15, 26, 0.9)), url('../images/gallery/gallery-inner-banner.webp');
            background-blend-mode: overlay;
            background-size: cover;
            background-position: center;
        }

        .tz-breadcrumb__title {
            text-align: center;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

       
         .tz-breadcrumb__title {
            text-align: center;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        .tz-breadcrumb__content {
    position: relative;
    z-index: 2
}

.tz-breadcrumb__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    gap: 10px
}

.tz-breadcrumb__item {
    color: #FFF

}
.tz-breadcrumb__list {
    list-style-type: none;
}

.tz-breadcrumb__item {
    list-style-type: none;
}
.tz-breadcrumb__item a {
    text-decoration: none;
    color: #FFF

}

.tz-breadcrumb__item.active {
    color: #85c815
}

.tz-breadcrumb__overlay {
    /* position: absolute; */
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 0);
    z-index: 1
}
.tz-display-4 {
    font-family: "Teko", serif;
    font-weight: 700;
    font-size: 30px
    
}

@media (min-width:576px) {
    .tz-display-4 {
        font-size: 24px
    }
}

@media (min-width:768px) {
    .tz-display-4 {
        font-size: 32px
    }
}

@media (min-width:992px) {
    .tz-display-4 {
        font-size: 40px
    }
}

@media (min-width:1200px) {
    .tz-display-4 {
        font-size: 48px
    }
}

@media (min-width:1440px) {
    .tz-display-4 {
        font-size: 48px
    }
}

@media (min-width:1680px) {
    .tz-display-4 {
        font-size: 56px
    }
}

/*breadcrumb end*/


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   WEB DESIGN INNOVATE - CYCLIC 1
   ============================================================ */

.sp-webdesign-innovate__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-webdesign-innovate__header {
    text-align: center;
    margin-bottom: 32px;
}

.sp-webdesign-innovate__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-webdesign-innovate__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-webdesign-innovate__title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
}

.sp-webdesign-innovate__tagline {
    font-size: 20px;
    font-weight: 400;
    color: #4a5268;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

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

.sp-webdesign-innovate__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

.sp-webdesign-innovate__tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    background: #f8fafc;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__tag:hover {
    border-color: #84c615;
    color: #84c615;
    background: #e6f5ef;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

/* ============================================================
   MAIN CONTENT - ROWS WITH ALTERNATING IMAGE
   ============================================================ */

.sp-webdesign-innovate__main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 36px;
}

.sp-webdesign-innovate__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: #f8fafc;
    border-radius: 18px;
    padding: 32px 36px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__row:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(132, 198, 21, 0.06);
    border-color: #84c615;
    background: #ffffff;
}

.sp-webdesign-innovate__row--reverse {
    direction: rtl;
}

.sp-webdesign-innovate__row--reverse .sp-webdesign-innovate__text-block,
.sp-webdesign-innovate__row--reverse .sp-webdesign-innovate__image-block {
    direction: ltr;
}

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

.sp-webdesign-innovate__text-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-webdesign-innovate__text-block--features {
    gap: 8px;
}

.sp-webdesign-innovate__icon-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-webdesign-innovate__icon {
    font-size: 16px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__row:hover .sp-webdesign-innovate__icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-webdesign-innovate__icon-label {
    font-size: 13px;
    font-weight: 600;
    color: #84c615;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sp-webdesign-innovate__subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    line-height: 1.3;
}

.sp-webdesign-innovate__desc {
    font-size: 15px;
    line-height: 1.8;
    color: #4a5268;
    margin: 0;
    text-align: justify;
}

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

.sp-webdesign-innovate__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-webdesign-innovate__list li {
    font-size: 14px;
    color: #1a1f36;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: all 0.3s ease;
}

.sp-webdesign-innovate__list li:hover {
    color: #84c615;
    transform: translateX(4px);
}

.sp-webdesign-innovate__check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================================================
   IMAGE BLOCK
   ============================================================ */

.sp-webdesign-innovate__image-block {
    display: flex;
    justify-content: center;
}

.sp-webdesign-innovate__image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-webdesign-innovate__image-wrapper--small {
    max-width: 450px;
}

.sp-webdesign-innovate__image-wrapper:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.08);
    border-color: #84c615;
}

.sp-webdesign-innovate__image-wrapper img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__image-wrapper:hover img {
    transform: scale(1.04);
}

/* Image Overlay */
.sp-webdesign-innovate__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__image-wrapper:hover .sp-webdesign-innovate__image-overlay {
    padding: 20px 24px;
}

.sp-webdesign-innovate__image-text {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Accent */
.sp-webdesign-innovate__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__image-wrapper:hover .sp-webdesign-innovate__image-accent {
    opacity: 0.08;
}

/* Image Badge */
.sp-webdesign-innovate__image-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-webdesign-innovate__image-wrapper:hover .sp-webdesign-innovate__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-webdesign-innovate__image-badge span:first-child {
    color: #84c615;
    font-size: 14px;
}

/* ============================================================
   STATS
   ============================================================ */

.sp-webdesign-innovate__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sp-webdesign-innovate__stat {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-webdesign-innovate__stat:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-webdesign-innovate__stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
}

.sp-webdesign-innovate__stat-label {
    display: block;
    font-size: 14px;
    color: #4a5268;
    margin-top: 4px;
}

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

@media (max-width: 1024px) {
    .sp-webdesign-innovate__title {
        font-size: 36px;
    }

    .sp-webdesign-innovate__row {
        padding: 24px 28px;
        gap: 30px;
    }

    .sp-webdesign-innovate__list {
        grid-template-columns: 1fr 1fr;
    }

    .sp-webdesign-innovate__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-webdesign-innovate__title {
        font-size: 30px;
    }

    .sp-webdesign-innovate__tagline {
        font-size: 18px;
    }

    .sp-webdesign-innovate__tags {
        gap: 8px;
        margin-bottom: 28px;
    }

    .sp-webdesign-innovate__tag {
        font-size: 12px;
        padding: 5px 14px;
    }

    .sp-webdesign-innovate__row {
        grid-template-columns: 1fr;
        padding: 20px 20px;
        gap: 20px;
        border-radius: 14px;
    }

    .sp-webdesign-innovate__row--reverse {
        direction: ltr;
    }

    .sp-webdesign-innovate__subtitle {
        font-size: 18px;
    }

    .sp-webdesign-innovate__desc {
        font-size: 14px;
    }

    .sp-webdesign-innovate__list {
        grid-template-columns: 1fr 1fr;
        gap: 4px 16px;
    }

    .sp-webdesign-innovate__list li {
        font-size: 13px;
    }

    .sp-webdesign-innovate__image-wrapper--small {
        max-width: 100%;
    }

    .sp-webdesign-innovate__image-wrapper img {
        max-height: 240px;
    }

    .sp-webdesign-innovate__image-text {
        font-size: 16px;
    }

    .sp-webdesign-innovate__image-overlay {
        padding: 14px 18px;
    }

    .sp-webdesign-innovate__image-wrapper:hover .sp-webdesign-innovate__image-overlay {
        padding: 18px 22px;
    }

    .sp-webdesign-innovate__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 11px;
    }

    .sp-webdesign-innovate__image-accent {
        width: 60px;
        height: 60px;
    }

    .sp-webdesign-innovate__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sp-webdesign-innovate__stat {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .sp-webdesign-innovate__stat-number {
        font-size: 26px;
    }

    .sp-webdesign-innovate__stat-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-webdesign-innovate__badge {
        font-size: 11px;
        padding: 6px 16px;
    }

    .sp-webdesign-innovate__title {
        font-size: 24px;
    }

    .sp-webdesign-innovate__tagline {
        font-size: 16px;
    }

    .sp-webdesign-innovate__tags {
        gap: 6px;
    }

    .sp-webdesign-innovate__tag {
        font-size: 11px;
        padding: 4px 12px;
    }

    .sp-webdesign-innovate__row {
        padding: 16px 16px;
        gap: 16px;
        border-radius: 12px;
    }

    .sp-webdesign-innovate__icon-box {
        gap: 8px;
    }

    .sp-webdesign-innovate__icon-label {
        font-size: 11px;
    }

    .sp-webdesign-innovate__subtitle {
        font-size: 16px;
    }

    .sp-webdesign-innovate__desc {
        font-size: 14px;
    }

    .sp-webdesign-innovate__list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sp-webdesign-innovate__list li {
        font-size: 13px;
    }

    .sp-webdesign-innovate__image-wrapper img {
        max-height: 180px;
    }

    .sp-webdesign-innovate__image-text {
        font-size: 14px;
    }

    .sp-webdesign-innovate__image-overlay {
        padding: 12px 16px;
    }

    .sp-webdesign-innovate__image-wrapper:hover .sp-webdesign-innovate__image-overlay {
        padding: 16px 18px;
    }

    .sp-webdesign-innovate__image-badge {
        top: 8px;
        right: 8px;
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-webdesign-innovate__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-webdesign-innovate__image-accent {
        width: 50px;
        height: 50px;
    }

    .sp-webdesign-innovate__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-webdesign-innovate__stat {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-webdesign-innovate__stat-number {
        font-size: 22px;
    }

    .sp-webdesign-innovate__stat-label {
        font-size: 11px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}





/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--black {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   DESIGN PHILOSOPHY - CYCLIC 2
   ============================================================ */

.sp-design-philosophy__content {
    max-width: 900px;
    margin: 0 auto;
}

.sp-h2-dark {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 32px 0;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}

.sp-h2-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

.sp-design-philosophy__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CARDS - White background, Black text */
.sp-paragraph-dark {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    padding: 24px 32px;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid #84c615;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
}

.sp-paragraph-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.12);
    background: #f8fafc;
}

/* All cards use the same green accent */
.sp-design-philosophy__body .sp-paragraph-dark {
    border-left-color: #84c615;
}

.sp-design-philosophy__body .sp-paragraph-dark:hover {
    border-left-color: #84c615;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.12);
}

/* ============================================================
   RESPONSIVE DESIGN - CYCLIC 2
   ============================================================ */

@media (max-width: 1024px) {
    .sp-h2-dark {
        font-size: 32px;
    }
    
    .sp-paragraph-dark {
        font-size: 15px;
        padding: 20px 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }
    
    .sp-container {
        padding: 0 16px;
    }
    
    .sp-h2-dark {
        font-size: 26px;
        margin: 0 0 24px 0;
        padding-bottom: 16px;
    }
    
    .sp-h2-dark::after {
        width: 48px;
        height: 3px;
    }
    
    .sp-paragraph-dark {
        font-size: 15px;
        padding: 16px 20px;
        border-left-width: 4px;
    }
    
    .sp-paragraph-dark:hover {
        transform: translateY(-2px);
    }
    
    .sp-design-philosophy__body {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }
    
    .sp-container {
        padding: 0 12px;
    }
    
    .sp-h2-dark {
        font-size: 22px;
        margin: 0 0 20px 0;
        padding-bottom: 14px;
    }
    
    .sp-h2-dark::after {
        width: 40px;
        height: 3px;
    }
    
    .sp-paragraph-dark {
        font-size: 14px;
        padding: 14px 16px;
        border-left-width: 4px;
        line-height: 1.7;
    }
    
    .sp-design-philosophy__body {
        gap: 12px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}






/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   DIGITAL EXPERIENCES - CYCLIC 1
   ============================================================ */

.sp-digital-experiences__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Content Side */
.sp-digital-experiences__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sp-h1-white {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
}

.sp-digital-experiences__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-paragraph-white {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
}

.sp-paragraph-highlight {
    background: #e6f5ef;
    border-radius: 12px;
    padding: 20px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 500;
}

.sp-paragraph-highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.12);
    background: #d4f0e0;
}

/* Feature List */
.sp-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 20px 24px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-feature-list:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.10);
}

.sp-feature-list li {
    font-size: 15px;
    color: #000000;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-feature-list li:hover {
    transform: translateX(4px);
}

.sp-check {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-feature-list li:hover .sp-check {
    transform: scale(1.2);
    color: #6aa810;
}

/* Image Side */
.sp-digital-experiences__image {
    display: flex;
    align-items: center;
}

.sp-image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
}

.sp-image-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 16px 56px rgba(132, 198, 21, 0.20);
    border-color: #84c615;
}

.sp-image-card img {
    width: 100%;
    height: 100%;
    max-height: 700px;
    object-fit: cover;
    display: block;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-image-card:hover img {
    transform: scale(1.03);
}

.sp-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 32px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-image-card:hover .sp-image-overlay {
    padding: 32px 36px;
}

.sp-overlay-text {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(132, 198, 21, 0.92);
    padding: 10px 24px;
    border-radius: 50px;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-image-card:hover .sp-overlay-text {
    background: #84c615;
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.sp-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-image-card:hover .sp-image-accent {
    opacity: 0.15;
}

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

@media (max-width: 1024px) {
    .sp-digital-experiences__grid {
        gap: 40px;
    }

    .sp-h1-white {
        font-size: 34px;
    }

    .sp-feature-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-digital-experiences__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-h1-white {
        font-size: 28px;
    }

    .sp-paragraph-white {
        font-size: 15px;
    }

    .sp-feature-list {
        padding: 16px 18px;
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sp-feature-list li {
        font-size: 14px;
        padding: 4px 0;
    }

    .sp-paragraph-highlight {
        padding: 16px 18px;
        font-size: 15px;
    }

    .sp-image-card img {
        max-height: 400px;
    }

    .sp-overlay-text {
        font-size: 16px;
        padding: 8px 18px;
    }

    .sp-image-overlay {
        padding: 20px 24px;
    }

    .sp-image-card:hover .sp-image-overlay {
        padding: 24px 28px;
    }

    .sp-image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-h1-white {
        font-size: 24px;
    }

    .sp-paragraph-white {
        font-size: 14px;
        line-height: 1.6;
    }

    .sp-feature-list {
        padding: 14px 14px;
        gap: 2px;
    }

    .sp-feature-list li {
        font-size: 13px;
        gap: 8px;
    }

    .sp-check {
        font-size: 16px;
    }

    .sp-paragraph-highlight {
        padding: 14px 16px;
        font-size: 14px;
    }

    .sp-image-card img {
        max-height: 280px;
    }

    .sp-overlay-text {
        font-size: 14px;
        padding: 6px 14px;
    }

    .sp-image-overlay {
        padding: 16px 18px;
    }

    .sp-image-card:hover .sp-image-overlay {
        padding: 20px 22px;
    }

    .sp-image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--black {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PROFESSIONAL DESIGN - CYCLIC 2
   ============================================================ */

.sp-professional-design__content {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-h2-dark {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 24px 0;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}

.sp-h2-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

.sp-intro-dark {
    font-size: 18px;
    line-height: 1.6;
    color: #e6e8ec;
    text-align: center;
    margin: 0;
}

.sp-intro-secondary {
    margin-bottom: 28px;
}

/* Feature Grid */
.sp-professional-design__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 28px 0 32px 0;
}

.sp-feature-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    border: 2px solid transparent;
    cursor: default;
    min-height: 100px;
}

.sp-feature-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
    background: #f8fafc;
}

.sp-feature-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f5ef;
    color: #84c615;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-feature-card:hover .sp-feature-icon {
    background: #84c615;
    color: #ffffff;
    transform: rotate(8deg) scale(1.1);
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.25);
}

.sp-feature-card:hover span {
    color: #84c615;
}

.sp-feature-card span {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Footer Section */
.sp-professional-design__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.sp-paragraph-dark {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    padding: 20px 28px;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid #84c615;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
}

.sp-paragraph-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.12);
    background: #f8fafc;
}

.sp-paragraph-highlight {
    background: #ffffff;
    border-left-color: #84c615;
    font-weight: 500;
    text-align: center;
    padding: 20px 28px;
}

.sp-paragraph-highlight:hover {
    border-left-color: #84c615;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.15);
    transform: translateY(-4px) scale(1.005);
}

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

@media (max-width: 1024px) {
    .sp-h2-dark {
        font-size: 32px;
    }

    .sp-professional-design__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .sp-feature-card {
        min-height: 90px;
        padding: 16px 12px;
    }

    .sp-feature-icon {
        width: 38px;
        height: 38px;
    }

    .sp-feature-card span {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-h2-dark {
        font-size: 26px;
        margin: 0 0 20px 0;
        padding-bottom: 16px;
    }

    .sp-h2-dark::after {
        width: 48px;
        height: 3px;
    }

    .sp-intro-dark {
        font-size: 16px;
    }

    .sp-professional-design__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin: 20px 0 24px 0;
    }

    .sp-feature-card {
        min-height: 80px;
        padding: 14px 10px;
        gap: 8px;
    }

    .sp-feature-icon {
        width: 34px;
        height: 34px;
    }

    .sp-feature-icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-feature-card span {
        font-size: 11px;
    }

    .sp-paragraph-dark {
        font-size: 15px;
        padding: 16px 20px;
    }

    .sp-paragraph-highlight {
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-h2-dark {
        font-size: 22px;
        margin: 0 0 16px 0;
        padding-bottom: 14px;
    }

    .sp-h2-dark::after {
        width: 40px;
        height: 3px;
    }

    .sp-intro-dark {
        font-size: 14px;
    }

    .sp-professional-design__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 16px 0 20px 0;
    }

    .sp-feature-card {
        min-height: 70px;
        padding: 12px 8px;
        gap: 6px;
        border-radius: 10px;
    }

    .sp-feature-icon {
        width: 30px;
        height: 30px;
    }

    .sp-feature-icon svg {
        width: 16px;
        height: 16px;
    }

    .sp-feature-card span {
        font-size: 10px;
    }

    .sp-paragraph-dark {
        font-size: 14px;
        padding: 14px 16px;
        line-height: 1.7;
    }

    .sp-paragraph-highlight {
        padding: 14px 16px;
        font-size: 14px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}



/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   BRAND IDENTITY - CYCLIC 1
   ============================================================ */

.sp-brand-identity__content {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-h1-white {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 24px 0;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
}

/* .sp-h1-white::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
} */

.sp-brand-identity__intro {
    text-align: center;
    margin-bottom: 28px;
}

.sp-paragraph-white {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0 0 6px 0;
}

.sp-brand-identity__intro .sp-paragraph-white:last-child {
    font-weight: 500;
    margin-top: 8px;
}

/* Brand Grid - 4 columns */
.sp-brand-identity__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.sp-brand-card {
    background: #e6f5ef;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
    cursor: default;
    min-height: 100px;
}

.sp-brand-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
    background: #d4f0e0;
}

.sp-brand-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    color: #84c615;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sp-brand-card:hover .sp-brand-icon {
    background: #84c615;
    color: #ffffff;
    transform: rotate(-5deg) scale(1.1) translateY(-4px);
    box-shadow: 0 6px 20px rgba(132, 198, 21, 0.25);
}

.sp-brand-card:hover span {
    color: #84c615;
}

.sp-brand-card span {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Footer Highlight */
.sp-brand-identity__footer {
    margin-top: 8px;
}

.sp-paragraph-highlight {
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
    padding: 24px 32px;
    background: #e6f5ef;
    border-radius: 12px;
    border-left: 4px solid #84c615;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
    font-weight: 500;
    text-align: center;
}

.sp-paragraph-highlight:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.12);
    background: #d4f0e0;
}

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

@media (max-width: 1024px) {
    .sp-h1-white {
        font-size: 34px;
    }

    .sp-brand-identity__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sp-brand-card {
        min-height: 90px;
        padding: 16px 12px;
    }

    .sp-brand-icon {
        width: 44px;
        height: 44px;
    }

    .sp-brand-icon svg {
        width: 24px;
        height: 24px;
    }

    .sp-brand-card span {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-h1-white {
        font-size: 28px;
        margin: 0 0 20px 0;
        padding-bottom: 16px;
    }

    .sp-h1-white::after {
        width: 48px;
        height: 3px;
    }

    .sp-paragraph-white {
        font-size: 15px;
    }

    .sp-brand-identity__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .sp-brand-card {
        min-height: 80px;
        padding: 14px 10px;
        gap: 10px;
    }

    .sp-brand-icon {
        width: 40px;
        height: 40px;
    }

    .sp-brand-icon svg {
        width: 22px;
        height: 22px;
    }

    .sp-brand-card span {
        font-size: 12px;
    }

    .sp-paragraph-highlight {
        font-size: 16px;
        padding: 18px 20px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-h1-white {
        font-size: 22px;
        margin: 0 0 16px 0;
        padding-bottom: 14px;
    }

    .sp-h1-white::after {
        width: 40px;
        height: 3px;
    }

    .sp-paragraph-white {
        font-size: 14px;
        line-height: 1.6;
    }

    .sp-brand-identity__intro {
        margin-bottom: 20px;
    }

    .sp-brand-identity__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .sp-brand-card {
        min-height: 70px;
        padding: 12px 8px;
        gap: 8px;
        border-radius: 10px;
    }

    .sp-brand-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .sp-brand-icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-brand-card span {
        font-size: 10px;
    }

    .sp-paragraph-highlight {
        font-size: 14px;
        padding: 14px 16px;
        line-height: 1.6;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--black {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   BUILD TRUST - CYCLIC 2
   ============================================================ */

.sp-build-trust__content {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-build-trust__header {
    text-align: center;
    margin-bottom: 32px;
}

.sp-h2-dark {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-h2-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

.sp-intro-dark {
    font-size: 18px;
    line-height: 1.6;
    color: #e6e8ec;
    margin: 0;
}

.sp-intro-secondary {
    margin-top: 4px;
    opacity: 0.85;
}

/* Trust Grid - 4 columns */
.sp-build-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.sp-trust-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
    cursor: default;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

/* Animated bottom line */
.sp-trust-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-card:hover::after {
    transform: scaleX(1);
}

.sp-trust-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.18);
    border-color: #84c615;
    background: #f8fafc;
}

.sp-trust-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f5ef;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    position: relative;
}

/* Pulsing ring effect on hover */
.sp-trust-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #84c615;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-card:hover .sp-trust-icon::before {
    opacity: 0.3;
    transform: scale(1.5);
    animation: pulse-ring 0.8s ease-out;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.sp-trust-card:hover .sp-trust-icon {
    background: #84c615;
    color: #ffffff;
    transform: rotate(10deg) scale(1.12) translateY(-4px);
    box-shadow: 0 8px 28px rgba(132, 198, 21, 0.3);
}

.sp-trust-card:hover span {
    color: #84c615;
}

.sp-trust-card span {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s ease;
}

/* Footer Section */
.sp-build-trust__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-paragraph-dark {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    padding: 20px 28px;
    background: #ffffff;
    border-radius: 12px;
    border-right: 4px solid #84c615;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #000000;
}

.sp-paragraph-dark:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 10px 36px rgba(132, 198, 21, 0.14);
    background: #f8fafc;
    border-right-width: 6px;
}

.sp-paragraph-highlight {
    background: #ffffff;
    border-right-color: #84c615;
    font-weight: 500;
    text-align: center;
    padding: 20px 28px;
}

.sp-paragraph-highlight:hover {
    border-right-color: #84c615;
    box-shadow: 0 10px 36px rgba(132, 198, 21, 0.18);
    transform: translateY(-4px) scale(1.01);
}

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

@media (max-width: 1024px) {
    .sp-h2-dark {
        font-size: 32px;
    }

    .sp-build-trust__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .sp-trust-card {
        min-height: 100px;
        padding: 18px 12px;
    }

    .sp-trust-icon {
        width: 48px;
        height: 48px;
    }

    .sp-trust-icon svg {
        width: 26px;
        height: 26px;
    }

    .sp-trust-card span {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-h2-dark {
        font-size: 26px;
        margin: 0 0 12px 0;
        padding-bottom: 16px;
    }

    .sp-h2-dark::after {
        width: 48px;
        height: 3px;
    }

    .sp-intro-dark {
        font-size: 16px;
    }

    .sp-build-trust__header {
        margin-bottom: 24px;
    }

    .sp-build-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .sp-trust-card {
        min-height: 90px;
        padding: 16px 12px;
        gap: 10px;
        border-radius: 14px;
    }

    .sp-trust-icon {
        width: 44px;
        height: 44px;
    }

    .sp-trust-icon svg {
        width: 24px;
        height: 24px;
    }

    .sp-trust-card span {
        font-size: 12px;
    }

    .sp-paragraph-dark {
        font-size: 15px;
        padding: 16px 20px;
        border-right-width: 4px;
    }

    .sp-paragraph-highlight {
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-h2-dark {
        font-size: 22px;
        margin: 0 0 10px 0;
        padding-bottom: 14px;
    }

    .sp-h2-dark::after {
        width: 40px;
        height: 3px;
    }

    .sp-intro-dark {
        font-size: 14px;
    }

    .sp-build-trust__header {
        margin-bottom: 20px;
    }

    .sp-build-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .sp-trust-card {
        min-height: 80px;
        padding: 14px 10px;
        gap: 8px;
        border-radius: 12px;
    }

    .sp-trust-icon {
        width: 38px;
        height: 38px;
    }

    .sp-trust-icon svg {
        width: 20px;
        height: 20px;
    }

    .sp-trust-card span {
        font-size: 10px;
    }

    .sp-paragraph-dark {
        font-size: 14px;
        padding: 14px 16px;
        line-height: 1.7;
        border-right-width: 4px;
    }

    .sp-paragraph-highlight {
        padding: 14px 16px;
        font-size: 14px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   BUSINESS GROWTH - CYCLIC 1
   ============================================================ */

.sp-business-growth__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Content Side */
.sp-business-growth__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sp-h1-white {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

/* .sp-h1-white::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
} */

.sp-business-growth__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-paragraph-white {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
}

/* Growth Cards Grid - 2 columns */
.sp-business-growth__grid-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-growth-card {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid #e8e8e8;
    cursor: default;
    min-height: 56px;
    position: relative;
    overflow: hidden;
}

/* Animated underline effect */
.sp-growth-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-growth-card:hover::after {
    transform: scaleX(1);
}

.sp-growth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-color: #84c615;
    background: #ffffff;
}

.sp-growth-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6f5ef;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sp-growth-card:hover .sp-growth-icon {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.15) rotate(0deg);
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.3);
}

.sp-growth-card:hover .sp-growth-icon svg {
    animation: icon-pulse 0.6s ease;
}

@keyframes icon-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.sp-growth-card span {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.sp-growth-card:hover span {
    color: #84c615;
}

/* Footer Highlight */
.sp-business-growth__footer {
    margin-top: 4px;
}

.sp-paragraph-highlight {
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
    padding: 20px 24px;
    background: #f5f5f5;
    border-radius: 12px;
    border-left: 4px solid #84c615;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
    font-weight: 500;
}

.sp-paragraph-highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    background: #ffffff;
    border-left-width: 6px;
}

/* Image Side */
.sp-business-growth__image {
    display: flex;
    align-items: center;
}

.sp-growth-image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid #e8e8e8;
}

.sp-growth-image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.1);
    border-color: #84c615;
}

.sp-growth-image-card img {
    width: 100%;
    height: 100%;
    max-height: 700px;
    object-fit: cover;
    display: block;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-growth-image-card:hover img {
    transform: scale(1.04);
}

/* Overlay with gradient */
.sp-growth-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 32px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-growth-image-card:hover .sp-growth-image-overlay {
    padding: 36px 38px;
}

.sp-growth-overlay-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-growth-overlay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #84c615;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-growth-image-card:hover .sp-growth-overlay-icon {
    transform: scale(1.1);
    background: #ffffff;
    color: #84c615;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sp-growth-overlay-text {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Accent shape top-right */
.sp-growth-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-growth-image-card:hover .sp-growth-image-accent {
    opacity: 0.1;
}

/* Floating Badge */
.sp-growth-image-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #84c615;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.sp-growth-image-card:hover .sp-growth-image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-growth-image-badge span {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.sp-growth-image-badge small {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
}

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

@media (max-width: 1024px) {
    .sp-business-growth__grid {
        gap: 40px;
    }

    .sp-h1-white {
        font-size: 34px;
    }

    .sp-business-growth__grid-cards {
        grid-template-columns: 1fr;
    }

    .sp-growth-card {
        min-height: 50px;
        padding: 14px 12px;
    }

    .sp-growth-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .sp-growth-icon svg {
        width: 20px;
        height: 20px;
    }

    .sp-growth-card span {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-business-growth__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-h1-white {
        font-size: 28px;
    }

    .sp-h1-white::after {
        width: 48px;
        height: 3px;
    }

    .sp-paragraph-white {
        font-size: 15px;
    }

    .sp-business-growth__grid-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-growth-card {
        min-height: 46px;
        padding: 12px 10px;
        gap: 10px;
        border-radius: 10px;
    }

    .sp-growth-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
    }

    .sp-growth-icon svg {
        width: 16px;
        height: 16px;
    }

    .sp-growth-card span {
        font-size: 11px;
    }

    .sp-paragraph-highlight {
        font-size: 15px;
        padding: 16px 18px;
        border-left-width: 4px;
    }

    .sp-growth-image-card img {
        max-height: 400px;
    }

    .sp-growth-overlay-text {
        font-size: 16px;
    }

    .sp-growth-overlay-icon {
        width: 40px;
        height: 40px;
    }

    .sp-growth-overlay-icon svg {
        width: 22px;
        height: 22px;
    }

    .sp-growth-image-overlay {
        padding: 20px 24px;
    }

    .sp-growth-image-card:hover .sp-growth-image-overlay {
        padding: 24px 28px;
    }

    .sp-growth-image-accent {
        width: 70px;
        height: 70px;
    }

    .sp-growth-image-badge {
        padding: 10px 14px;
        top: 14px;
        left: 14px;
    }

    .sp-growth-image-badge span {
        font-size: 20px;
    }

    .sp-growth-image-badge small {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-h1-white {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-h1-white::after {
        width: 40px;
        height: 3px;
    }

    .sp-paragraph-white {
        font-size: 14px;
        line-height: 1.6;
    }

    .sp-business-growth__grid-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sp-growth-card {
        min-height: 42px;
        padding: 10px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-growth-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 50%;
    }

    .sp-growth-icon svg {
        width: 14px;
        height: 14px;
    }

    .sp-growth-card span {
        font-size: 11px;
    }

    .sp-paragraph-highlight {
        font-size: 14px;
        padding: 14px 16px;
        border-left-width: 4px;
    }

    .sp-growth-image-card img {
        max-height: 280px;
    }

    .sp-growth-overlay-text {
        font-size: 14px;
    }

    .sp-growth-overlay-icon {
        width: 34px;
        height: 34px;
    }

    .sp-growth-overlay-icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-growth-overlay-content {
        gap: 12px;
    }

    .sp-growth-image-overlay {
        padding: 16px 18px;
    }

    .sp-growth-image-card:hover .sp-growth-image-overlay {
        padding: 20px 22px;
    }

    .sp-growth-image-accent {
        width: 50px;
        height: 50px;
    }

    .sp-growth-image-badge {
        padding: 8px 12px;
        top: 10px;
        left: 10px;
        border-radius: 8px;
    }

    .sp-growth-image-badge span {
        font-size: 18px;
    }

    .sp-growth-image-badge small {
        font-size: 9px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   FUTURE READY - CYCLIC 2
   ============================================================ */

.sp-future-ready__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.sp-future-ready__header {
    text-align: center;
    margin-bottom: 36px;
}

.sp-future-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-future-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

.sp-future-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #e6e8ec;
    margin: 0;
}

.sp-future-intro-secondary {
    margin-top: 4px;
}

.sp-future-intro-highlight {
    margin-top: 12px;
    font-weight: 500;
    color: #84c615;
}

/* Feature Grid - 4 columns with staggered layout */
.sp-future-ready__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.sp-future-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid #2a2a2a;
    cursor: default;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

/* Diagonal stripe accent on hover */
.sp-future-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(132, 198, 21, 0.04) 50%, transparent 55%);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-future-card:hover::before {
    transform: rotate(45deg) translateX(100%);
}

/* Bottom glow bar */
.sp-future-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-future-card:hover::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.3);
}

/* Individual card hover effects - different for each */
.sp-future-card--1:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.12);
    background: #f8fafc;
}

.sp-future-card--2:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card--3:hover {
    transform: translateY(-8px) rotate(1deg);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card--4:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card--5:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card--6:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card--7:hover {
    transform: translateY(-10px) rotate(0.5deg);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card--8:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
    background: #f8fafc;
}

.sp-future-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e6f5ef;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

/* Icon pulse ring animation with light green */
.sp-future-card__icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid #84c615;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-future-card--1:hover .sp-future-card__icon::before,
.sp-future-card--2:hover .sp-future-card__icon::before,
.sp-future-card--3:hover .sp-future-card__icon::before,
.sp-future-card--4:hover .sp-future-card__icon::before,
.sp-future-card--5:hover .sp-future-card__icon::before,
.sp-future-card--6:hover .sp-future-card__icon::before,
.sp-future-card--7:hover .sp-future-card__icon::before,
.sp-future-card--8:hover .sp-future-card__icon::before {
    border-color: #84c615;
    opacity: 0.4;
    transform: scale(1.4);
    animation: icon-ring-green 0.7s ease-out;
}

@keyframes icon-ring-green {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Icon hover - light green color for all cards */
.sp-future-card--1:hover .sp-future-card__icon,
.sp-future-card--2:hover .sp-future-card__icon,
.sp-future-card--3:hover .sp-future-card__icon,
.sp-future-card--4:hover .sp-future-card__icon,
.sp-future-card--5:hover .sp-future-card__icon,
.sp-future-card--6:hover .sp-future-card__icon,
.sp-future-card--7:hover .sp-future-card__icon,
.sp-future-card--8:hover .sp-future-card__icon {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.2) rotateY(180deg);
    box-shadow: 0 8px 28px rgba(132, 198, 21, 0.35);
}

.sp-future-card__label {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.sp-future-card--1:hover .sp-future-card__label,
.sp-future-card--2:hover .sp-future-card__label,
.sp-future-card--3:hover .sp-future-card__label,
.sp-future-card--4:hover .sp-future-card__label,
.sp-future-card--5:hover .sp-future-card__label,
.sp-future-card--6:hover .sp-future-card__label,
.sp-future-card--7:hover .sp-future-card__label,
.sp-future-card--8:hover .sp-future-card__label {
    color: #84c615;
}

/* Footer */
.sp-future-ready__footer {
    margin-top: 8px;
}

.sp-future-outro {
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
    padding: 22px 32px;
    background: #ffffff;
    border-radius: 12px;
    border-top: 4px solid #84c615;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
    font-weight: 500;
    text-align: center;
}

.sp-future-outro:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(132, 198, 21, 0.14);
    background: #f8fafc;
    border-top-width: 6px;
}

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

@media (max-width: 1024px) {
    .sp-future-title {
        font-size: 32px;
    }

    .sp-future-ready__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .sp-future-card {
        min-height: 100px;
        padding: 18px 14px;
    }

    .sp-future-card__icon {
        width: 44px;
        height: 44px;
    }

    .sp-future-card__icon svg {
        width: 24px;
        height: 24px;
    }

    .sp-future-card__label {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-future-title {
        font-size: 26px;
        margin: 0 0 12px 0;
        padding-bottom: 16px;
    }

    .sp-future-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-future-intro {
        font-size: 16px;
    }

    .sp-future-ready__header {
        margin-bottom: 28px;
    }

    .sp-future-ready__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .sp-future-card {
        min-height: 90px;
        padding: 16px 12px;
        gap: 12px;
        border-radius: 12px;
    }

    .sp-future-card__icon {
        width: 40px;
        height: 40px;
    }

    .sp-future-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .sp-future-card__label {
        font-size: 12px;
    }

    .sp-future-outro {
        font-size: 16px;
        padding: 18px 20px;
        border-top-width: 4px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-future-title {
        font-size: 22px;
        margin: 0 0 10px 0;
        padding-bottom: 14px;
    }

    .sp-future-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-future-intro {
        font-size: 14px;
    }

    .sp-future-intro-highlight {
        margin-top: 8px;
    }

    .sp-future-ready__header {
        margin-bottom: 20px;
    }

    .sp-future-ready__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .sp-future-card {
        min-height: 80px;
        padding: 14px 10px;
        gap: 10px;
        border-radius: 10px;
        border-width: 2px;
    }

    .sp-future-card__icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .sp-future-card__icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-future-card__label {
        font-size: 10px;
    }

    /* Simplified mobile hover */
    .sp-future-card--1:hover,
    .sp-future-card--2:hover,
    .sp-future-card--3:hover,
    .sp-future-card--4:hover,
    .sp-future-card--5:hover,
    .sp-future-card--6:hover,
    .sp-future-card--7:hover,
    .sp-future-card--8:hover {
        transform: translateY(-4px) scale(1.02);
        border-color: #84c615;
    }

    .sp-future-card--1:hover .sp-future-card__icon,
    .sp-future-card--2:hover .sp-future-card__icon,
    .sp-future-card--3:hover .sp-future-card__icon,
    .sp-future-card--4:hover .sp-future-card__icon,
    .sp-future-card--5:hover .sp-future-card__icon,
    .sp-future-card--6:hover .sp-future-card__icon,
    .sp-future-card--7:hover .sp-future-card__icon,
    .sp-future-card--8:hover .sp-future-card__icon {
        transform: scale(1.1);
        border-radius: 50%;
        background: #84c615;
        color: #ffffff;
    }

    .sp-future-outro {
        font-size: 14px;
        padding: 14px 16px;
        line-height: 1.6;
        border-top-width: 4px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}





/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   WHY FRESHORA - CYCLIC 1
   ============================================================ */

.sp-why-freshora__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.sp-why-freshora__header {
    text-align: center;
    margin-bottom: 36px;
}

.sp-why-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-why-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
}

.sp-why-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

.sp-why-intro-secondary {
    margin-top: 4px;
}

.sp-why-intro-highlight {
    margin-top: 12px;
    font-weight: 500;
    color: #84c615;
}

/* Feature Grid - 3 columns */
.sp-why-freshora__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.sp-why-card {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
    cursor: default;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

/* Diagonal stripe accent on hover - Light Green */
.sp-why-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(132, 198, 21, 0.06) 50%, transparent 55%);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-why-card:hover::before {
    transform: rotate(45deg) translateX(100%);
}

/* Bottom glow bar */
.sp-why-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-why-card:hover::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* Individual card hover effects - different for each */
.sp-why-card--1:hover {
    transform: translateY(-10px) rotate(-1deg);
    border-color: #000000;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--2:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--3:hover {
    transform: translateY(-8px) rotate(1deg);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--4:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--5:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--6:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--7:hover {
    transform: translateY(-10px) rotate(0.5deg);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--8:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card--9:hover {
    transform: translateY(-10px) scale(1.02) rotate(-0.5deg);
    border-color: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    background: #d4f0e0;
}

.sp-why-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    color: black;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Icon pulse ring animation with BLACK */
.sp-why-card__icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid #000000;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-why-card--1:hover .sp-why-card__icon::before,
.sp-why-card--2:hover .sp-why-card__icon::before,
.sp-why-card--3:hover .sp-why-card__icon::before,
.sp-why-card--4:hover .sp-why-card__icon::before,
.sp-why-card--5:hover .sp-why-card__icon::before,
.sp-why-card--6:hover .sp-why-card__icon::before,
.sp-why-card--7:hover .sp-why-card__icon::before,
.sp-why-card--8:hover .sp-why-card__icon::before,
.sp-why-card--9:hover .sp-why-card__icon::before {
    border-color: #000000;
    opacity: 0.35;
    transform: scale(1.4);
    animation: icon-ring-black-why 0.7s ease-out;
}

@keyframes icon-ring-black-why {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Icon hover - BLACK background with scale + rotateY */
.sp-why-card--1:hover .sp-why-card__icon,
.sp-why-card--2:hover .sp-why-card__icon,
.sp-why-card--3:hover .sp-why-card__icon,
.sp-why-card--4:hover .sp-why-card__icon,
.sp-why-card--5:hover .sp-why-card__icon,
.sp-why-card--6:hover .sp-why-card__icon,
.sp-why-card--7:hover .sp-why-card__icon,
.sp-why-card--8:hover .sp-why-card__icon,
.sp-why-card--9:hover .sp-why-card__icon {
    background: #000000;
    color: #ffffff;
    transform: scale(1.2) rotateY(180deg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
}

.sp-why-card__label {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.sp-why-card--1:hover .sp-why-card__label,
.sp-why-card--2:hover .sp-why-card__label,
.sp-why-card--3:hover .sp-why-card__label,
.sp-why-card--4:hover .sp-why-card__label,
.sp-why-card--5:hover .sp-why-card__label,
.sp-why-card--6:hover .sp-why-card__label,
.sp-why-card--7:hover .sp-why-card__label,
.sp-why-card--8:hover .sp-why-card__label,
.sp-why-card--9:hover .sp-why-card__label {
    color: #000000;
}

/* Footer */
.sp-why-freshora__footer {
    margin-top: 8px;
}

.sp-why-outro {
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
    padding: 22px 32px;
    background: #e6f5ef;
    border-radius: 12px;
    border-left: 4px solid #000000;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #000000;
    font-weight: 500;
    text-align: center;
}

.sp-why-outro:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    background: #d4f0e0;
    border-left-width: 6px;
    border-left-color: #000000;
}

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

@media (max-width: 1024px) {
    .sp-why-title {
        font-size: 32px;
    }

    .sp-why-freshora__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .sp-why-card {
        min-height: 100px;
        padding: 18px 14px;
    }

    .sp-why-card__icon {
        width: 44px;
        height: 44px;
    }

    .sp-why-card__icon svg {
        width: 24px;
        height: 24px;
    }

    .sp-why-card__label {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-why-title {
        font-size: 26px;
        margin: 0 0 12px 0;
        padding-bottom: 16px;
    }

    .sp-why-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-why-intro {
        font-size: 16px;
    }

    .sp-why-freshora__header {
        margin-bottom: 28px;
    }

    .sp-why-freshora__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .sp-why-card {
        min-height: 90px;
        padding: 16px 12px;
        gap: 12px;
        border-radius: 12px;
    }

    .sp-why-card__icon {
        width: 40px;
        height: 40px;
    }

    .sp-why-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .sp-why-card__label {
        font-size: 12px;
    }

    .sp-why-outro {
        font-size: 16px;
        padding: 18px 20px;
        border-left-width: 4px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-why-title {
        font-size: 22px;
        margin: 0 0 10px 0;
        padding-bottom: 14px;
    }

    .sp-why-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-why-intro {
        font-size: 14px;
    }

    .sp-why-intro-highlight {
        margin-top: 8px;
    }

    .sp-why-freshora__header {
        margin-bottom: 20px;
    }

    .sp-why-freshora__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .sp-why-card {
        min-height: 80px;
        padding: 14px 10px;
        gap: 10px;
        border-radius: 10px;
    }

    .sp-why-card__icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .sp-why-card__icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-why-card__label {
        font-size: 10px;
    }

    /* Simplified mobile hover */
    .sp-why-card--1:hover,
    .sp-why-card--2:hover,
    .sp-why-card--3:hover,
    .sp-why-card--4:hover,
    .sp-why-card--5:hover,
    .sp-why-card--6:hover,
    .sp-why-card--7:hover,
    .sp-why-card--8:hover,
    .sp-why-card--9:hover {
        transform: translateY(-4px) scale(1.02);
        border-color: #000000;
    }

    .sp-why-card--1:hover .sp-why-card__icon,
    .sp-why-card--2:hover .sp-why-card__icon,
    .sp-why-card--3:hover .sp-why-card__icon,
    .sp-why-card--4:hover .sp-why-card__icon,
    .sp-why-card--5:hover .sp-why-card__icon,
    .sp-why-card--6:hover .sp-why-card__icon,
    .sp-why-card--7:hover .sp-why-card__icon,
    .sp-why-card--8:hover .sp-why-card__icon,
    .sp-why-card--9:hover .sp-why-card__icon {
        transform: scale(1.1);
        border-radius: 50%;
        background: #000000;
        color: #ffffff;
    }

    .sp-why-outro {
        font-size: 14px;
        padding: 14px 16px;
        line-height: 1.6;
        border-left-width: 4px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TRUSTED COMPANY - CYCLIC 2
   ============================================================ */

.sp-trusted-company__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

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

.sp-trusted-company__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-trusted-company__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-trusted-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    align-self: flex-start;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-trusted-badge:hover {
    background: #84c615;
    color: #ffffff;
    border-color: #84c615;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.sp-trusted-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
}

.sp-trusted-company__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trusted-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
}

.sp-trusted-highlight-box {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-trusted-highlight-box:hover {
    background: rgba(132, 198, 21, 0.14);
    transform: translateX(6px);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-trusted-highlight {
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}

/* Quote Box */
.sp-trusted-quote {
    position: relative;
    padding: 20px 24px 20px 40px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sp-trusted-quote:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: #84c615;
}

.sp-trusted-quote-icon {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 32px;
    color: #84c615;
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.5;
}

.sp-trusted-quote-text {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
    font-style: italic;
}

/* Stats */
.sp-trusted-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 4px;
}

.sp-trusted-stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trusted-stat:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trusted-stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
}

.sp-trusted-stat-label {
    display: block;
    font-size: 13px;
    color: #a0a8b8;
    margin-top: 4px;
}

/* ============================================================
   IMAGE SIDE
   ============================================================ */

.sp-trusted-company__image {
    display: flex;
    align-items: center;
}

.sp-trusted-image-card {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-trusted-image-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 20px 60px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-trusted-image-card img {
    width: 100%;
    height: 100%;
    max-height: 700px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Overlay */
.sp-trusted-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 32px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trusted-image-card:hover .sp-trusted-image-overlay {
    padding: 34px 36px;
}

.sp-trusted-image-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-trusted-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #84c615;
    color: #ffffff;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trusted-image-card:hover .sp-trusted-image-icon {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.sp-trusted-image-text {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Badge */
.sp-trusted-image-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trusted-image-card:hover .sp-trusted-image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-trusted-image-badge span:first-child {
    color: #f59e0b;
    font-size: 16px;
}

/* Accent shape */
.sp-trusted-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trusted-image-card:hover .sp-trusted-image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-trusted-company__grid {
        gap: 40px;
    }

    .sp-trusted-title {
        font-size: 32px;
    }

    .sp-trusted-stats {
        gap: 12px;
    }

    .sp-trusted-stat-number {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-trusted-company__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-trusted-title {
        font-size: 26px;
    }

    .sp-trusted-badge {
        font-size: 12px;
        padding: 5px 14px;
    }

    .sp-trusted-text {
        font-size: 15px;
    }

    .sp-trusted-quote-text {
        font-size: 16px;
    }

    .sp-trusted-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .sp-trusted-stat {
        padding: 12px 10px;
    }

    .sp-trusted-stat-number {
        font-size: 22px;
    }

    .sp-trusted-stat-label {
        font-size: 12px;
    }

    .sp-trusted-image-card img {
        max-height: 400px;
    }

    .sp-trusted-image-text {
        font-size: 16px;
    }

    .sp-trusted-image-icon {
        width: 40px;
        height: 40px;
    }

    .sp-trusted-image-overlay {
        padding: 20px 24px;
    }

    .sp-trusted-image-card:hover .sp-trusted-image-overlay {
        padding: 24px 28px;
    }

    .sp-trusted-image-badge {
        top: 14px;
        right: 14px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-trusted-image-accent {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-trusted-title {
        font-size: 22px;
    }

    .sp-trusted-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-trusted-highlight-box {
        padding: 12px 16px;
    }

    .sp-trusted-quote {
        padding: 16px 18px 16px 34px;
    }

    .sp-trusted-quote-icon {
        font-size: 24px;
        top: 6px;
        left: 8px;
    }

    .sp-trusted-quote-text {
        font-size: 14px;
    }

    .sp-trusted-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .sp-trusted-stat {
        padding: 10px 8px;
        border-radius: 10px;
    }

    .sp-trusted-stat-number {
        font-size: 18px;
    }

    .sp-trusted-stat-label {
        font-size: 10px;
    }

    .sp-trusted-image-card img {
        max-height: 280px;
    }

    .sp-trusted-image-text {
        font-size: 14px;
    }

    .sp-trusted-image-icon {
        width: 34px;
        height: 34px;
    }

    .sp-trusted-image-icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-trusted-image-overlay {
        padding: 16px 18px;
    }

    .sp-trusted-image-card:hover .sp-trusted-image-overlay {
        padding: 20px 22px;
    }

    .sp-trusted-image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-trusted-image-badge span:first-child {
        font-size: 12px;
    }

    .sp-trusted-image-accent {
        width: 60px;
        height: 60px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}



/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   UNDERSTANDING DESIGN - CYCLIC 1
   ============================================================ */

.sp-understanding-design__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-understanding-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-understanding-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-understanding-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-understanding-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-understanding-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
}

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

.sp-understanding-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-understanding-design__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-understanding-text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
}

/* Highlight Box */
.sp-understanding-highlight {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 20px 24px;
    border-bottom: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-understanding-highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.10);
    background: #d4f0e0;
}

.sp-understanding-highlight-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #84c615;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-understanding-highlight:hover .sp-understanding-highlight-icon {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.3);
}

.sp-understanding-highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

/* CTA Box */
.sp-understanding-cta-box {
    background: #f5f5f5;
    border-radius: 14px;
    padding: 22px 28px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-understanding-cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.04;
    transition: all 0.5s ease;
}

.sp-understanding-cta-box:hover::before {
    opacity: 0.08;
    transform: scale(1.2);
}

.sp-understanding-cta-box:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    background: #f0f0f0;
}

.sp-understanding-cta-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-understanding-cta-line {
    margin-top: 12px;
    width: 50px;
    height: 3px;
    background: #84c615;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-understanding-cta-box:hover .sp-understanding-cta-line {
    width: 80px;
}

/* ============================================================
   RIGHT COLUMN - PILLARS (NEW DESIGN)
   ============================================================ */

.sp-understanding-design__pillars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-understanding-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Unique hover effect - Diagonal slide */
.sp-understanding-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.06), transparent);
    transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-understanding-pillar:hover::before {
    left: 100%;
}

.sp-understanding-pillar--1:hover {
    transform: translateX(8px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.08);
}

.sp-understanding-pillar--2:hover {
    transform: translateX(-8px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.08);
}

.sp-understanding-pillar--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.08);
}

.sp-understanding-pillar--4:hover {
    transform: translateX(8px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.08);
}

.sp-understanding-pillar--5:hover {
    transform: translateX(-8px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.08);
}

.sp-understanding-pillar-number {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 30px;
    opacity: 0.6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-understanding-pillar:hover .sp-understanding-pillar-number {
    opacity: 1;
    transform: scale(1.2);
}

.sp-understanding-pillar-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.sp-understanding-pillar-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

/* Icon hover - scale(1.2) rotateY(180deg) for ALL pillars */
.sp-understanding-pillar--1:hover .sp-understanding-pillar-icon,
.sp-understanding-pillar--2:hover .sp-understanding-pillar-icon,
.sp-understanding-pillar--3:hover .sp-understanding-pillar-icon,
.sp-understanding-pillar--4:hover .sp-understanding-pillar-icon,
.sp-understanding-pillar--5:hover .sp-understanding-pillar-icon {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.2) rotateY(180deg);
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.25);
}

.sp-understanding-pillar-label {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    transition: all 0.3s ease;
}

.sp-understanding-pillar:hover .sp-understanding-pillar-label {
    color: #84c615;
}

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

@media (max-width: 1024px) {
    .sp-understanding-title {
        font-size: 34px;
    }

    .sp-understanding-design__grid {
        gap: 40px;
    }

    .sp-understanding-pillar {
        padding: 12px 16px;
    }

    .sp-understanding-pillar-icon {
        width: 36px;
        height: 36px;
    }

    .sp-understanding-pillar-icon svg {
        width: 20px;
        height: 20px;
    }

    .sp-understanding-pillar-label {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-understanding-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-understanding-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-understanding-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-understanding-text {
        font-size: 15px;
    }

    .sp-understanding-highlight {
        padding: 16px 18px;
    }

    .sp-understanding-highlight-text {
        font-size: 15px;
    }

    .sp-understanding-cta-box {
        padding: 18px 20px;
    }

    .sp-understanding-cta-text {
        font-size: 15px;
    }

    .sp-understanding-pillar {
        padding: 12px 14px;
        gap: 12px;
    }

    .sp-understanding-pillar-number {
        font-size: 12px;
        min-width: 24px;
    }

    .sp-understanding-pillar-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .sp-understanding-pillar-icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-understanding-pillar-label {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-understanding-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-understanding-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-understanding-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-understanding-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-understanding-highlight {
        padding: 14px 16px;
        gap: 12px;
    }

    .sp-understanding-highlight-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .sp-understanding-highlight-icon svg {
        width: 18px;
        height: 18px;
    }

    .sp-understanding-highlight-text {
        font-size: 14px;
    }

    .sp-understanding-cta-box {
        padding: 14px 16px;
    }

    .sp-understanding-cta-text {
        font-size: 14px;
    }

    .sp-understanding-cta-line {
        width: 40px;
        height: 2px;
    }

    .sp-understanding-pillar {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 10px;
    }

    .sp-understanding-pillar-number {
        font-size: 11px;
        min-width: 20px;
    }

    .sp-understanding-pillar-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .sp-understanding-pillar-icon svg {
        width: 14px;
        height: 14px;
    }

    .sp-understanding-pillar-label {
        font-size: 12px;
    }

    /* Simplified mobile hover */
    .sp-understanding-pillar--1:hover,
    .sp-understanding-pillar--2:hover,
    .sp-understanding-pillar--3:hover,
    .sp-understanding-pillar--4:hover,
    .sp-understanding-pillar--5:hover {
        transform: translateY(-3px) scale(1.02);
        border-color: #84c615;
        background: #e6f5ef;
    }

    .sp-understanding-pillar--1:hover .sp-understanding-pillar-icon,
    .sp-understanding-pillar--2:hover .sp-understanding-pillar-icon,
    .sp-understanding-pillar--3:hover .sp-understanding-pillar-icon,
    .sp-understanding-pillar--4:hover .sp-understanding-pillar-icon,
    .sp-understanding-pillar--5:hover .sp-understanding-pillar-icon {
        transform: scale(1.1);
        border-radius: 50%;
        background: #84c615;
        color: #ffffff;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


    /* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   WHAT IS DESIGN - CYCLIC 2
   ============================================================ */

.sp-what-is-design__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-what-is-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-what-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-what-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-what-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-what-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

.sp-what-intro {
    font-size: 18px;
    line-height: 1.8;
    color: #e6e8ec;
    max-width: 850px;
    margin: 0 auto;
    text-align: justify;
}

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

.sp-what-is-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - DISCIPLINES
   ============================================================ */

.sp-what-is-design__disciplines {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-what-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.sp-what-disciplines-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sp-what-discipline {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
}

.sp-what-discipline:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-what-discipline-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-discipline:hover .sp-what-discipline-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-what-discipline-label {
    font-size: 14px;
    font-weight: 400;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-what-discipline:hover .sp-what-discipline-label {
    color: #84c615;
}

/* Different hover transforms for each discipline */
.sp-what-discipline--1:hover { transform: translateX(8px) scale(1.02); }
.sp-what-discipline--2:hover { transform: translateX(-4px) scale(1.02); }
.sp-what-discipline--3:hover { transform: translateY(-4px) scale(1.02); }
.sp-what-discipline--4:hover { transform: translateX(8px) translateY(-4px) scale(1.02); }
.sp-what-discipline--5:hover { transform: translateX(-8px) translateY(-4px) scale(1.02); }
.sp-what-discipline--6:hover { transform: translateX(6px) scale(1.03); }
.sp-what-discipline--7:hover { transform: translateX(-6px) scale(1.03); }
.sp-what-discipline--8:hover { transform: translateY(-6px) scale(1.02); }
.sp-what-discipline--9:hover { transform: translateX(8px) translateY(-2px) scale(1.02); }
.sp-what-discipline--10:hover { transform: translateX(-8px) translateY(-2px) scale(1.02); }

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-what-is-design__visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Image Card */
.sp-what-image-card {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-what-image-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 20px 60px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-what-image-card img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Image Overlay */
.sp-what-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-image-card:hover .sp-what-image-overlay {
    padding: 30px 32px;
}

.sp-what-image-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-what-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #84c615;
    color: #ffffff;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-image-card:hover .sp-what-image-icon {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.sp-what-image-text {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Badge */
.sp-what-image-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-image-card:hover .sp-what-image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-what-image-badge span:first-child {
    color: #84c615;
    font-size: 16px;
}

/* Image Accent */
.sp-what-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-image-card:hover .sp-what-image-accent {
    opacity: 0.08;
}

/* Comparison Box - Left Aligned Below Image */
.sp-what-comparison {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-what-comparison-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
}

.sp-what-comparison-item:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-what-comparison-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sp-what-comparison--design:hover {
    border-left: 3px solid #84c615;
}

.sp-what-comparison--dev:hover {
    border-left: 3px solid #84c615;
}

.sp-what-comparison-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.sp-what-comparison-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-what-comparison-label {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.sp-what-comparison-desc {
    font-size: 13px;
    color: #a0a8b8;
}

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

.sp-what-is-design__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
}

.sp-what-footer-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-footer-box:hover {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sp-what-footer-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-footer-box:hover .sp-what-footer-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-what-footer-text {
    font-size: 16px;
    line-height: 1.7;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-what-footer-highlight {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 20px 28px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-what-footer-highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
    background: rgba(132, 198, 21, 0.12);
}

.sp-what-footer-highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-what-title {
        font-size: 34px;
    }

    .sp-what-is-design__grid {
        gap: 40px;
    }

    .sp-what-disciplines-grid {
        gap: 8px;
    }

    .sp-what-discipline {
        padding: 10px 14px;
    }

    .sp-what-discipline-label {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-what-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-what-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-what-intro {
        font-size: 16px;
    }

    .sp-what-is-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-what-subtitle {
        font-size: 16px;
    }

    .sp-what-disciplines-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-what-discipline {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-what-discipline-label {
        font-size: 13px;
    }

    .sp-what-image-card img {
        max-height: 350px;
    }

    .sp-what-image-text {
        font-size: 16px;
    }

    .sp-what-image-icon {
        width: 38px;
        height: 38px;
    }

    .sp-what-image-overlay {
        padding: 18px 22px;
    }

    .sp-what-image-card:hover .sp-what-image-overlay {
        padding: 22px 26px;
    }

    .sp-what-image-badge {
        top: 14px;
        right: 14px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-what-comparison-item {
        padding: 12px 16px;
        gap: 12px;
    }

    .sp-what-comparison-icon {
        font-size: 18px;
        width: 32px;
    }

    .sp-what-comparison-label {
        font-size: 14px;
    }

    .sp-what-comparison-desc {
        font-size: 12px;
    }

    .sp-what-footer-box {
        padding: 16px 20px;
    }

    .sp-what-footer-text {
        font-size: 15px;
    }

    .sp-what-footer-highlight {
        padding: 16px 20px;
    }

    .sp-what-footer-highlight-text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-what-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-what-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-what-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-what-intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-what-subtitle {
        font-size: 15px;
    }

    .sp-what-disciplines-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-what-discipline {
        padding: 8px 10px;
        gap: 6px;
        border-radius: 6px;
    }

    .sp-what-discipline-icon {
        font-size: 11px;
    }

    .sp-what-discipline-label {
        font-size: 11px;
    }

    .sp-what-image-card img {
        max-height: 250px;
    }

    .sp-what-image-text {
        font-size: 14px;
    }

    .sp-what-image-icon {
        width: 32px;
        height: 32px;
    }

    .sp-what-image-icon svg {
        width: 16px;
        height: 16px;
    }

    .sp-what-image-overlay {
        padding: 14px 16px;
    }

    .sp-what-image-card:hover .sp-what-image-overlay {
        padding: 18px 20px;
    }

    .sp-what-image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-what-image-badge span:first-child {
        font-size: 12px;
    }

    .sp-what-image-accent {
        width: 60px;
        height: 60px;
    }

    .sp-what-comparison-item {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-what-comparison-icon {
        font-size: 16px;
        width: 28px;
    }

    .sp-what-comparison-label {
        font-size: 13px;
    }

    .sp-what-comparison-desc {
        font-size: 11px;
    }

    .sp-what-footer-box {
        padding: 14px 16px;
        gap: 12px;
    }

    .sp-what-footer-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .sp-what-footer-highlight {
        padding: 14px 16px;
    }

    .sp-what-footer-highlight-text {
        font-size: 14px;
        line-height: 1.6;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   WHY MATTERS - CYCLIC 1
   ============================================================ */

.sp-why-matters__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-why-matters__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-matters-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-matters-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-matters-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-matters-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
}

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

.sp-why-matters__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-why-matters__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-matters-text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
}

/* Highlight */
.sp-matters-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 14px 20px;
    border-bottom: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.10);
    background: #d4f0e0;
}

.sp-matters-highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-highlight:hover .sp-matters-highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-matters-highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* Questions */
.sp-matters-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-matters-question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-matters-question--1:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-matters-question--2:hover {
    transform: translateX(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-matters-question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-matters-question--4:hover {
    transform: translateX(6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-matters-question--5:hover {
    transform: translateX(-6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-matters-question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-matters-question-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    font-family: 'Georgia', serif;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-question:hover .sp-matters-question-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-matters-question-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-matters-question:hover .sp-matters-question-text {
    color: #84c615;
}

/* Conclusion */
.sp-matters-conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 22px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 4px;
}

.sp-matters-conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-matters-conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0 0 10px 0;
}

.sp-matters-conclusion-line {
    width: 40px;
    height: 3px;
    background: #84c615;
    border-radius: 2px;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-conclusion:hover .sp-matters-conclusion-line {
    width: 70px;
}

.sp-matters-conclusion-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-why-matters__visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Stats Grid */
.sp-matters-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-matters-stat {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-matters-stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-matters-stat--2:hover {
    transform: translateY(-4px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-matters-stat--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-matters-stat--4:hover {
    transform: translateY(-4px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-matters-stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.sp-matters-stat:hover .sp-matters-stat-number {
    transform: scale(1.05);
}

.sp-matters-stat-label {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

/* Image Card */
.sp-matters-image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-matters-image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-matters-image-card img {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-image-card:hover img {
    transform: scale(1.04);
}

.sp-matters-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-image-card:hover .sp-matters-image-overlay {
    padding: 22px 26px;
}

.sp-matters-image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-image-card:hover .sp-matters-image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-matters-image-text {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-matters-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-matters-image-card:hover .sp-matters-image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-matters-title {
        font-size: 34px;
    }

    .sp-why-matters__grid {
        gap: 40px;
    }

    .sp-matters-questions {
        grid-template-columns: 1fr;
    }

    .sp-matters-stat-number {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-matters-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-matters-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-why-matters__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-matters-text {
        font-size: 15px;
    }

    .sp-matters-highlight {
        padding: 12px 16px;
    }

    .sp-matters-highlight-text {
        font-size: 15px;
    }

    .sp-matters-questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-matters-question {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-matters-question-text {
        font-size: 13px;
    }

    .sp-matters-conclusion {
        padding: 18px 20px;
    }

    .sp-matters-conclusion-text {
        font-size: 15px;
    }

    .sp-matters-conclusion-highlight {
        font-size: 16px;
    }

    .sp-matters-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-matters-stat {
        padding: 14px 12px;
    }

    .sp-matters-stat-number {
        font-size: 26px;
    }

    .sp-matters-stat-label {
        font-size: 12px;
    }

    .sp-matters-image-card img {
        max-height: 220px;
    }

    .sp-matters-image-text {
        font-size: 16px;
    }

    .sp-matters-image-overlay {
        padding: 14px 18px;
    }

    .sp-matters-image-card:hover .sp-matters-image-overlay {
        padding: 18px 22px;
    }

    .sp-matters-image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-matters-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-matters-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-matters-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-matters-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-matters-highlight {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-matters-highlight-text {
        font-size: 14px;
    }

    .sp-matters-questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-matters-question {
        padding: 8px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-matters-question-text {
        font-size: 13px;
    }

    .sp-matters-conclusion {
        padding: 14px 16px;
    }

    .sp-matters-conclusion-text {
        font-size: 14px;
    }

    .sp-matters-conclusion-highlight {
        font-size: 15px;
    }

    .sp-matters-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-matters-stat {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-matters-stat-number {
        font-size: 22px;
    }

    .sp-matters-stat-label {
        font-size: 11px;
    }

    .sp-matters-image-card img {
        max-height: 180px;
    }

    .sp-matters-image-text {
        font-size: 14px;
    }

    .sp-matters-image-icon {
        font-size: 14px;
    }

    .sp-matters-image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-matters-image-card:hover .sp-matters-image-overlay {
        padding: 16px 18px;
    }

    .sp-matters-image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   FIRST IMPRESSIONS - CYCLIC 1
   ============================================================ */

.sp-first-impressions__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.sp-first-impressions__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-impressions-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-impressions-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-impressions-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-impressions-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
}

/* Grid */
.sp-first-impressions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Content */
.sp-first-impressions__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-impressions-text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

/* List - 3 columns */
.sp-impressions-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sp-impressions-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-impressions-item--1:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--2:hover {
    transform: translateX(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--4:hover {
    transform: translateX(6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--5:hover {
    transform: translateX(-6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item--9:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-impressions-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-item:hover .sp-impressions-item-dot {
    transform: scale(1.5);
    box-shadow: 0 0 16px rgba(132, 198, 21, 0.3);
}

.sp-impressions-item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-impressions-item:hover .sp-impressions-item-text {
    color: #84c615;
}

/* Conclusion */
.sp-impressions-conclusion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.sp-impressions-conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-impressions-conclusion-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-conclusion-highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-impressions-conclusion-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-conclusion-highlight:hover .sp-impressions-conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-impressions-conclusion-highlight-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    text-align: justify;
}

/* ============================================================
   VISUAL - LOGO + IMAGE + STATS
   ============================================================ */

.sp-first-impressions__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Logo Card */
/* .sp-impressions-logo-card {
    position: relative;
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.sp-impressions-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
    border-color: #84c615;
    background: #ffffff;
} */



.sp-impressions-logo {
    max-width: 180px;
    height: auto;
    display: block;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* .sp-impressions-logo-card:hover .sp-impressions-logo {
    transform: scale(1.04);
} */




.sp-impressions-logo-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* .sp-impressions-logo-card:hover .sp-impressions-logo-accent {
    opacity: 0.06;
} */

.sp-impressions-logo-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e6f5ef;
    color: #84c615;
    padding: 6px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #84c615;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* .sp-impressions-logo-card:hover .sp-impressions-logo-badge {
    opacity: 1;
    transform: translateY(0);
} */

.sp-impressions-logo-badge span:first-child {
    font-size: 14px;
}

/* Image Card */
.sp-impressions-image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-impressions-image-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-impressions-image-card img {
    width: 100%;
    height: 100%;
    max-height: 370px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-image-card:hover img {
    transform: scale(1.04);
}

.sp-impressions-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-image-card:hover .sp-impressions-image-overlay {
    padding: 18px 22px;
}

.sp-impressions-image-icon {
    font-size: 16px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-image-card:hover .sp-impressions-image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-impressions-image-text {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-impressions-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-impressions-image-card:hover .sp-impressions-image-accent {
    opacity: 0.08;
}

/* Stats */
.sp-impressions-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-impressions-stat {
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-impressions-stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-impressions-stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-impressions-stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
}

.sp-impressions-stat-label {
    display: block;
    font-size: 12px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

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

@media (max-width: 1024px) {
    .sp-impressions-title {
        font-size: 34px;
    }

    .sp-first-impressions__grid {
        gap: 40px;
    }

    .sp-impressions-list {
        grid-template-columns: 1fr 1fr;
    }

    .sp-impressions-stat-number {
        font-size: 24px;
    }

    .sp-impressions-logo {
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-impressions-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-impressions-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-first-impressions__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-impressions-text {
        font-size: 15px;
    }

    .sp-impressions-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-impressions-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-impressions-item-text {
        font-size: 13px;
    }

    .sp-impressions-conclusion-text {
        font-size: 15px;
    }

    .sp-impressions-conclusion-highlight {
        padding: 16px 20px;
    }

    .sp-impressions-conclusion-highlight-text {
        font-size: 15px;
    }

    /* .sp-impressions-logo-card {
        padding: 20px 16px;
    } */

    .sp-impressions-logo {
        max-width: 140px;
    }

   
    .sp-impressions-logo-badge {
        top: 10px;
        left: 10px;
        padding: 4px 12px;
        font-size: 11px;
    }

    .sp-impressions-image-card img {
        max-height: 180px;
    }

    .sp-impressions-image-text {
        font-size: 15px;
    }

    .sp-impressions-image-overlay {
        padding: 12px 16px;
    }

    .sp-impressions-image-card:hover .sp-impressions-image-overlay {
        padding: 16px 20px;
    }

    .sp-impressions-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-impressions-stat {
        padding: 12px 10px;
    }

    .sp-impressions-stat-number {
        font-size: 22px;
    }

    .sp-impressions-stat-label {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-impressions-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-impressions-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-impressions-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-impressions-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-impressions-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-impressions-item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-impressions-item-text {
        font-size: 12px;
    }

    .sp-impressions-item-dot {
        width: 6px;
        height: 6px;
    }

    .sp-impressions-conclusion-text {
        font-size: 14px;
    }

    .sp-impressions-conclusion-highlight {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-impressions-conclusion-highlight-text {
        font-size: 14px;
    }

    /* .sp-impressions-logo-card {
        padding: 16px 14px;
        border-radius: 12px;
    } */

    .sp-impressions-logo {
        max-width: 110px;
    }


  

    .sp-impressions-logo-accent {
        width: 50px;
        height: 50px;
    }

    .sp-impressions-logo-badge {
        top: 8px;
        left: 8px;
        padding: 4px 10px;
        font-size: 10px;
    }

    .sp-impressions-logo-badge span:first-child {
        font-size: 12px;
    }

    .sp-impressions-image-card img {
        max-height: 150px;
    }

    .sp-impressions-image-text {
        font-size: 14px;
    }

    .sp-impressions-image-icon {
        font-size: 14px;
    }

    .sp-impressions-image-overlay {
        padding: 10px 14px;
        gap: 8px;
    }

    .sp-impressions-image-card:hover .sp-impressions-image-overlay {
        padding: 14px 16px;
    }

    .sp-impressions-image-accent {
        width: 40px;
        height: 40px;
    }

    .sp-impressions-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-impressions-stat {
        padding: 10px 8px;
        border-radius: 10px;
    }

    .sp-impressions-stat-number {
        font-size: 20px;
    }

    .sp-impressions-stat-label {
        font-size: 10px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   DIGITAL SALES - CYCLIC 2
   ============================================================ */

.sp-digital-sales__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-digital-sales__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-sales-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-sales-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-sales-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-sales-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

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

.sp-digital-sales__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-digital-sales__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Analogy Box */
.sp-sales-analogy {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-analogy:hover {
    transform: translateX(6px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.08);
    border-left-width: 6px;
}

.sp-sales-analogy-icon {
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-analogy:hover .sp-sales-analogy-icon {
    transform: scale(1.2) rotate(-10deg) translateY(-4px);
}

.sp-sales-analogy-text {
    font-size: 17px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    font-weight: 400;
    text-align: justify;
}

/* Text */
.sp-sales-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    position: relative;
    display: block;
    padding: 4px 0;
    text-align: justify;
}

.sp-sales-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #84c615;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-text:hover::after {
    width: 100%;
}

.sp-sales-text:hover {
    color: #84c615;
}

/* Highlight Box */
.sp-sales-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-sales-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.1), transparent);
    transition: left 0.6s ease;
}

.sp-sales-highlight:hover::before {
    left: 100%;
}

.sp-sales-highlight:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.10);
    background: rgba(132, 198, 21, 0.14);
}

.sp-sales-highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-highlight:hover .sp-sales-highlight-icon {
    transform: rotate(180deg) scale(1.3);
}

.sp-sales-highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

/* List Items */
.sp-sales-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-sales-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects for each item */
.sp-sales-item--1:hover {
    transform: translateY(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.10);
}

.sp-sales-item--2:hover {
    transform: scale(1.04) rotate(-1deg);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-item--3:hover {
    transform: translateX(8px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: -6px 0 20px rgba(132, 198, 21, 0.06);
}

.sp-sales-item--4:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.06);
}

.sp-sales-item--5:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-item--6:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.sp-sales-item--7:hover {
    transform: scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.06);
}

.sp-sales-item--8:hover {
    transform: translateY(-4px) rotate(1deg);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-sales-item-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-item--1:hover .sp-sales-item-icon { transform: scale(1.3) rotate(0deg); }
.sp-sales-item--2:hover .sp-sales-item-icon { transform: scale(1.4) rotate(-10deg); }
.sp-sales-item--3:hover .sp-sales-item-icon { transform: scale(1.2) translateX(4px); }
.sp-sales-item--4:hover .sp-sales-item-icon { transform: scale(1.5) rotate(15deg); }
.sp-sales-item--5:hover .sp-sales-item-icon { transform: scale(1.2) rotate(-5deg); }
.sp-sales-item--6:hover .sp-sales-item-icon { transform: scale(1.4) translateY(-4px); }
.sp-sales-item--7:hover .sp-sales-item-icon { transform: scale(1.3) rotate(10deg); }
.sp-sales-item--8:hover .sp-sales-item-icon { transform: scale(1.3) rotate(-15deg); }

.sp-sales-item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.4s ease;
}

.sp-sales-item--1:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--2:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--3:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--4:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--5:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--6:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--7:hover .sp-sales-item-text { color: #84c615; }
.sp-sales-item--8:hover .sp-sales-item-text { color: #84c615; }

/* Conclusion */
.sp-sales-conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 4px;
    position: relative;
}

.sp-sales-conclusion:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.08);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-conclusion::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, transparent, #84c615, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.sp-sales-conclusion:hover::before {
    opacity: 1;
}

.sp-sales-conclusion-text {
    font-size: 17px;
    line-height: 1.8;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-digital-sales__visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Analogy Cards */
.sp-sales-analogy-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-sales-analogy-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects for analogy cards */
.sp-sales-analogy-card--1:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(132, 198, 21, 0.10);
}

.sp-sales-analogy-card--2:hover {
    transform: rotate(-2deg) scale(1.04);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-analogy-card--3:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(132, 198, 21, 0.08);
}

.sp-sales-analogy-card--4:hover {
    transform: translateY(-6px) rotate(2deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-analogy-card-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 6px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-analogy-card--1:hover .sp-sales-analogy-card-icon { transform: scale(1.2) rotate(-5deg) translateY(-4px); }
.sp-sales-analogy-card--2:hover .sp-sales-analogy-card-icon { transform: scale(1.3) rotate(10deg); }
.sp-sales-analogy-card--3:hover .sp-sales-analogy-card-icon { transform: scale(1.2) translateY(-6px); }
.sp-sales-analogy-card--4:hover .sp-sales-analogy-card-icon { transform: scale(1.3) rotate(-10deg) translateY(-4px); }

.sp-sales-analogy-card-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.4s ease;
}

.sp-sales-analogy-card--1:hover .sp-sales-analogy-card-label { color: #84c615; }
.sp-sales-analogy-card--2:hover .sp-sales-analogy-card-label { color: #84c615; }
.sp-sales-analogy-card--3:hover .sp-sales-analogy-card-label { color: #84c615; }
.sp-sales-analogy-card--4:hover .sp-sales-analogy-card-label { color: #84c615; }

.sp-sales-analogy-card-desc {
    display: block;
    font-size: 12px;
    color: #a0a8b8;
    margin-top: 2px;
}

/* Image Card */
.sp-sales-image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
    perspective: 800px;
}

.sp-sales-image-card:hover {
    transform: translateY(-10px) scale(1.02) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 60px rgba(132, 198, 21, 0.12);
    border-color: #84c615;
}

.sp-sales-image-card img {
    width: 100%;
    height: 100%;
    max-height: 250px;
    object-fit: cover;
    display: block;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-image-card:hover img {
    transform: scale(1.06);
}

/* Image Overlay */
.sp-sales-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-image-card:hover .sp-sales-image-overlay {
    padding: 24px 28px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.sp-sales-image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-image-card:hover .sp-sales-image-icon {
    transform: rotate(180deg) scale(1.3);
}

.sp-sales-image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Badge */
.sp-sales-image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-30px) rotate(-10deg);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-image-card:hover .sp-sales-image-badge {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.sp-sales-image-badge span:first-child {
    font-size: 18px;
    font-weight: 700;
    color: #84c615;
}

.sp-sales-image-badge span:last-child {
    font-size: 11px;
    color: #a0a8b8;
}

/* Image Accent */
.sp-sales-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-image-card:hover .sp-sales-image-accent {
    opacity: 0.10;
    transform: scale(1.2);
}

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

@media (max-width: 1024px) {
    .sp-sales-title {
        font-size: 34px;
    }

    .sp-digital-sales__grid {
        gap: 40px;
    }

    .sp-sales-list {
        grid-template-columns: 1fr;
    }

    .sp-sales-analogy-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-sales-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-sales-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-digital-sales__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-sales-analogy {
        padding: 16px 20px;
    }

    .sp-sales-analogy-text {
        font-size: 15px;
    }

    .sp-sales-text {
        font-size: 15px;
    }

    .sp-sales-highlight {
        padding: 12px 16px;
    }

    .sp-sales-highlight-text {
        font-size: 15px;
    }

    .sp-sales-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-sales-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-sales-item-text {
        font-size: 13px;
    }

    .sp-sales-conclusion {
        padding: 14px 18px;
    }

    .sp-sales-conclusion-text {
        font-size: 15px;
    }

    .sp-sales-analogy-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-sales-analogy-card {
        padding: 14px 12px;
    }

    .sp-sales-analogy-card-icon {
        font-size: 24px;
    }

    .sp-sales-analogy-card-label {
        font-size: 14px;
    }

    .sp-sales-image-card img {
        max-height: 220px;
    }

    .sp-sales-image-text {
        font-size: 15px;
    }

    .sp-sales-image-overlay {
        padding: 14px 18px;
    }

    .sp-sales-image-card:hover .sp-sales-image-overlay {
        padding: 18px 22px;
    }

    .sp-sales-image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
    }

    .sp-sales-image-badge span:first-child {
        font-size: 16px;
    }

    .sp-sales-image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-sales-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-sales-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-sales-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-sales-analogy {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-sales-analogy-icon {
        font-size: 22px;
    }

    .sp-sales-analogy-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-sales-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-sales-highlight {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-sales-highlight-text {
        font-size: 14px;
    }

    .sp-sales-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-sales-item {
        padding: 8px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-sales-item-text {
        font-size: 13px;
    }

    .sp-sales-conclusion {
        padding: 12px 14px;
    }

    .sp-sales-conclusion-text {
        font-size: 14px;
    }

    .sp-sales-analogy-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-sales-analogy-card {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-sales-analogy-card-icon {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .sp-sales-analogy-card-label {
        font-size: 13px;
    }

    .sp-sales-analogy-card-desc {
        font-size: 10px;
    }

    .sp-sales-image-card img {
        max-height: 180px;
    }

    .sp-sales-image-text {
        font-size: 14px;
    }

    .sp-sales-image-icon {
        font-size: 14px;
    }

    .sp-sales-image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-sales-image-card:hover .sp-sales-image-overlay {
        padding: 16px 18px;
    }

    .sp-sales-image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
    }

    .sp-sales-image-badge span:first-child {
        font-size: 14px;
    }

    .sp-sales-image-badge span:last-child {
        font-size: 10px;
    }

    .sp-sales-image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TRUST DESIGN - CYCLIC 2
   ============================================================ */

.sp-trust-design__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-trust-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-trust-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-trust-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-trust-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-trust-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

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

.sp-trust-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-trust-design__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trust-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
    position: relative;
    display: block;
    padding: 4px 0;
    transition: all 0.4s ease;
}

.sp-trust-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #84c615;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-text:hover::after {
    width: 100%;
}

.sp-trust-text:hover {
    color: #84c615;
}

/* Trust List - 2 columns */
.sp-trust-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects for each trust item */
.sp-trust-item--1:hover {
    transform: translateY(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.10);
}

.sp-trust-item--2:hover {
    transform: scale(1.04) rotate(-1deg);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-item--3:hover {
    transform: translateX(8px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: -6px 0 20px rgba(132, 198, 21, 0.06);
}

.sp-trust-item--4:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.06);
}

.sp-trust-item--5:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-item--6:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.sp-trust-item--7:hover {
    transform: scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.06);
}

.sp-trust-item--8:hover {
    transform: translateY(-4px) rotate(1deg);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-item-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-item--1:hover .sp-trust-item-icon { transform: scale(1.3) rotate(0deg); }
.sp-trust-item--2:hover .sp-trust-item-icon { transform: scale(1.4) rotate(-10deg); }
.sp-trust-item--3:hover .sp-trust-item-icon { transform: scale(1.2) translateX(4px); }
.sp-trust-item--4:hover .sp-trust-item-icon { transform: scale(1.5) rotate(15deg); }
.sp-trust-item--5:hover .sp-trust-item-icon { transform: scale(1.2) rotate(-5deg); }
.sp-trust-item--6:hover .sp-trust-item-icon { transform: scale(1.4) translateY(-4px); }
.sp-trust-item--7:hover .sp-trust-item-icon { transform: scale(1.3) rotate(10deg); }
.sp-trust-item--8:hover .sp-trust-item-icon { transform: scale(1.3) rotate(-15deg); }

.sp-trust-item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.4s ease;
}

.sp-trust-item--1:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--2:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--3:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--4:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--5:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--6:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--7:hover .sp-trust-item-text { color: #84c615; }
.sp-trust-item--8:hover .sp-trust-item-text { color: #84c615; }

/* Highlight Box */
.sp-trust-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-trust-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.1), transparent);
    transition: left 0.6s ease;
}

.sp-trust-highlight:hover::before {
    left: 100%;
}

.sp-trust-highlight:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.10);
    background: rgba(132, 198, 21, 0.14);
}

.sp-trust-highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-highlight:hover .sp-trust-highlight-icon {
    transform: rotate(180deg) scale(1.3);
}

.sp-trust-highlight-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: justify;
}

/* Conclusion */
.sp-trust-conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.sp-trust-conclusion:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.08);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-conclusion::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, transparent, #84c615, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.sp-trust-conclusion:hover::before {
    opacity: 1;
}

.sp-trust-conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-trust-conclusion-highlight {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
    padding: 12px 16px;
    background: rgba(132, 198, 21, 0.06);
    border-radius: 10px;
    border-left: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-conclusion-highlight:hover {
    background: rgba(132, 198, 21, 0.12);
    transform: translateX(6px);
    border-left-width: 5px;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-trust-design__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Image Card */
.sp-trust-image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
    perspective: 800px;
}

.sp-trust-image-card:hover {
    transform: translateY(-10px) scale(1.02) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 60px rgba(132, 198, 21, 0.12);
    border-color: #84c615;
}

.sp-trust-image-card img {
    width: 100%;
    height: 100%;
    max-height: 350px;
    object-fit: cover;
    display: block;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-image-card:hover img {
    transform: scale(1.06);
}

/* Image Overlay */
.sp-trust-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-image-card:hover .sp-trust-image-overlay {
    padding: 24px 28px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.sp-trust-image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-image-card:hover .sp-trust-image-icon {
    transform: rotate(180deg) scale(1.3);
}

.sp-trust-image-text {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Badge */
.sp-trust-image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-30px) rotate(-10deg);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-image-card:hover .sp-trust-image-badge {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.sp-trust-image-badge span:first-child {
    font-size: 16px;
}

.sp-trust-image-badge span:last-child {
    font-size: 12px;
    color: #e6e8ec;
}

/* Image Accent */
.sp-trust-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-image-card:hover .sp-trust-image-accent {
    opacity: 0.10;
    transform: scale(1.2);
}

/* Trust Stats */
.sp-trust-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-trust-stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trust-stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.sp-trust-stat:hover .sp-trust-stat-number {
    transform: scale(1.05);
}

.sp-trust-stat-label {
    display: block;
    font-size: 13px;
    color: #a0a8b8;
    margin-top: 4px;
    line-height: 1.4;
}

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

@media (max-width: 1024px) {
    .sp-trust-title {
        font-size: 34px;
    }

    .sp-trust-design__grid {
        gap: 40px;
    }

    .sp-trust-list {
        grid-template-columns: 1fr;
    }

    .sp-trust-stat-number {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-trust-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-trust-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-trust-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-trust-text {
        font-size: 15px;
    }

    .sp-trust-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-trust-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-trust-item-text {
        font-size: 13px;
    }

    .sp-trust-highlight {
        padding: 12px 16px;
    }

    .sp-trust-highlight-text {
        font-size: 15px;
    }

    .sp-trust-conclusion {
        padding: 16px 20px;
    }

    .sp-trust-conclusion-text {
        font-size: 15px;
    }

    .sp-trust-conclusion-highlight {
        font-size: 15px;
        padding: 10px 14px;
    }

    .sp-trust-image-card img {
        max-height: 280px;
    }

    .sp-trust-image-text {
        font-size: 16px;
    }

    .sp-trust-image-overlay {
        padding: 14px 18px;
    }

    .sp-trust-image-card:hover .sp-trust-image-overlay {
        padding: 18px 22px;
    }

    .sp-trust-image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-trust-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-trust-stat {
        padding: 14px 12px;
    }

    .sp-trust-stat-number {
        font-size: 26px;
    }

    .sp-trust-stat-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-trust-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-trust-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-trust-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-trust-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-trust-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-trust-item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-trust-item-text {
        font-size: 12px;
    }

    .sp-trust-item-icon {
        font-size: 12px;
    }

    .sp-trust-highlight {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-trust-highlight-text {
        font-size: 14px;
    }

    .sp-trust-conclusion {
        padding: 14px 16px;
        gap: 8px;
    }

    .sp-trust-conclusion-text {
        font-size: 14px;
    }

    .sp-trust-conclusion-highlight {
        font-size: 14px;
        padding: 8px 12px;
    }

    .sp-trust-image-card img {
        max-height: 200px;
    }

    .sp-trust-image-text {
        font-size: 14px;
    }

    .sp-trust-image-icon {
        font-size: 14px;
    }

    .sp-trust-image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-trust-image-card:hover .sp-trust-image-overlay {
        padding: 16px 18px;
    }

    .sp-trust-image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-trust-image-badge span:first-child {
        font-size: 12px;
    }

    .sp-trust-image-badge span:last-child {
        font-size: 10px;
    }

    .sp-trust-image-accent {
        width: 50px;
        height: 50px;
    }

    .sp-trust-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-trust-stat {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-trust-stat-number {
        font-size: 22px;
    }

    .sp-trust-stat-label {
        font-size: 11px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PROBLEM SOLVING - CYCLIC 1
   ============================================================ */

.sp-problem-solving__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-problem-solving__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-problem-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-problem-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-problem-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-problem-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
}

.sp-problem-subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 750px;
    margin: 0 auto;
    text-align: justify;
}

/* ============================================================
   PROBLEM CARDS GRID - 2 columns
   ============================================================ */

.sp-problem-solving__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 36px;
}

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

.sp-problem-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px 22px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* Card Hover Effects - Different for each */
.sp-problem-card--1:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-problem-card--2:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-problem-card--3:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-problem-card--4:hover {
    transform: translateY(-6px) rotate(0.5deg) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

/* Card Header */
.sp-problem-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.sp-problem-card__icon {
    font-size: 28px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-card--1:hover .sp-problem-card__icon { transform: scale(1.2) rotate(-10deg); }
.sp-problem-card--2:hover .sp-problem-card__icon { transform: scale(1.2) rotate(10deg); }
.sp-problem-card--3:hover .sp-problem-card__icon { transform: scale(1.3) translateY(-4px); }
.sp-problem-card--4:hover .sp-problem-card__icon { transform: scale(1.2) rotate(-5deg); }

.sp-problem-card__number {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-card:hover .sp-problem-card__number {
    opacity: 1;
    transform: scale(1.2);
}

/* Card Body */
.sp-problem-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-problem-card__problem {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.sp-problem-card:hover .sp-problem-card__problem {
    color: #84c615;
}

.sp-problem-card__divider {
    width: 40px;
    height: 3px;
    background: #84c615;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-card:hover .sp-problem-card__divider {
    width: 60px;
}

.sp-problem-card__solution {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-card:hover .sp-problem-card__solution {
    background: rgba(132, 198, 21, 0.10);
    transform: translateX(4px);
}

.sp-problem-card__solution-icon {
    color: #84c615;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-card:hover .sp-problem-card__solution-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-problem-card__solution-text {
    font-size: 15px;
    line-height: 1.6;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

/* Card Accent */
.sp-problem-card__accent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: #84c615;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-card:hover .sp-problem-card__accent {
    opacity: 0.06;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-problem-solving__conclusion {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 22px 28px;
    border-bottom: 4px solid #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-solving__conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.10);
    background: #d4f0e0;
}

.sp-problem-conclusion__icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-problem-solving__conclusion:hover .sp-problem-conclusion__icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-problem-conclusion__text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-problem-title {
        font-size: 34px;
    }

    .sp-problem-solving__grid {
        gap: 16px;
    }

    .sp-problem-card {
        padding: 20px 18px;
        min-height: 180px;
    }

    .sp-problem-card__problem {
        font-size: 16px;
    }

    .sp-problem-card__solution-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-problem-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-problem-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-problem-subtitle {
        font-size: 16px;
    }

    .sp-problem-solving__grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .sp-problem-card {
        padding: 18px 16px;
        min-height: 160px;
        border-radius: 14px;
    }

    .sp-problem-card__icon {
        font-size: 24px;
    }

    .sp-problem-card__problem {
        font-size: 15px;
    }

    .sp-problem-card__solution {
        padding: 10px 12px;
    }

    .sp-problem-card__solution-text {
        font-size: 13px;
    }

    .sp-problem-solving__conclusion {
        padding: 18px 20px;
        gap: 14px;
    }

    .sp-problem-conclusion__text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-problem-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-problem-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-problem-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-problem-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    .sp-problem-solving__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sp-problem-card {
        padding: 16px 14px;
        min-height: 140px;
        border-radius: 12px;
    }

    .sp-problem-card__icon {
        font-size: 22px;
    }

    .sp-problem-card__number {
        font-size: 12px;
    }

    .sp-problem-card__problem {
        font-size: 15px;
    }

    .sp-problem-card__divider {
        width: 30px;
        height: 2px;
    }

    .sp-problem-card:hover .sp-problem-card__divider {
        width: 40px;
    }

    .sp-problem-card__solution {
        padding: 8px 10px;
        border-left-width: 3px;
    }

    .sp-problem-card__solution-text {
        font-size: 13px;
    }

    .sp-problem-solving__conclusion {
        padding: 16px 18px;
        gap: 12px;
        border-bottom-width: 3px;
    }

    .sp-problem-conclusion__icon {
        font-size: 16px;
    }

    .sp-problem-conclusion__text {
        font-size: 14px;
        line-height: 1.6;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   VISITOR JOURNEY - CYCLIC 2 (BRANCHING TREE DESIGN)
   ============================================================ */

.sp-visitor-journey__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-visitor-journey__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-journey-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 12px;
}

.sp-journey-badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-journey-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 20px;
}

.sp-journey-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #84c615;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
}

.sp-journey-subtitle {
    font-size: 18px;
    line-height: 1.8;
    color: #a0a8b8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   JOURNEY FLOW - BRANCHING TREE DESIGN
   ============================================================ */

.sp-visitor-journey__flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
    padding: 20px 0;
    position: relative;
}

/* Main vertical trunk line */
.sp-visitor-journey__flow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #84c615, rgba(132, 198, 21, 0.05));
    transform: translateX(-50%);
    opacity: 0.3;
}

/* ============================================================
   JOURNEY NODE - BRANCHING STYLE
   ============================================================ */

.sp-journey-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    position: relative;
}

/* Alternating branch lines */
.sp-journey-node::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: rgba(132, 198, 21, 0.15);
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-journey-node--left::before {
    right: 50%;
    transform: translateY(-50%);
}

.sp-journey-node--right::before {
    left: 50%;
    transform: translateY(-50%);
}

.sp-journey-node:hover::before {
    opacity: 1;
    background: rgba(132, 198, 21, 0.3);
}

/* Node content positioning */
.sp-journey-node--left .sp-journey-node__content {
    margin-right: auto;
    margin-left: 10%;
    padding-right: 50px;
    text-align: right;
}

.sp-journey-node--right .sp-journey-node__content {
    margin-left: auto;
    margin-right: 10%;
    padding-left: 50px;
    text-align: left;
}

/* ============================================================
   JOURNEY NODE CONTENT
   ============================================================ */

.sp-journey-node__content {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    z-index: 2;
    min-width: 280px;
    max-width: 420px;
}

/* Glow effect on hover */
.sp-journey-node__content::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(132, 198, 21, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.sp-journey-node:hover .sp-journey-node__content::before {
    opacity: 1;
}

/* Individual node hover effects */
.sp-journey-node--1:hover .sp-journey-node__content {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-journey-node--2:hover .sp-journey-node__content {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-journey-node--3:hover .sp-journey-node__content {
    transform: translateX(-8px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-journey-node--4:hover .sp-journey-node__content {
    transform: translateX(8px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-journey-node--5:hover .sp-journey-node__content {
    transform: translateX(-10px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-journey-node--6:hover .sp-journey-node__content {
    transform: translateX(10px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-journey-node--7:hover .sp-journey-node__content {
    transform: translateX(-8px) translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.12);
}

/* Node Number */
.sp-journey-node__number {
    font-size: 12px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 28px;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-journey-node--left .sp-journey-node__number {
    order: 0;
}

.sp-journey-node--right .sp-journey-node__number {
    order: 2;
}

.sp-journey-node:hover .sp-journey-node__number {
    opacity: 1;
    transform: scale(1.2);
}

/* Node Icon */
.sp-journey-node__icon {
    font-size: 24px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-journey-node--left .sp-journey-node__icon {
    order: 1;
}

.sp-journey-node--right .sp-journey-node__icon {
    order: 1;
}

/* Different icon hover effects */
.sp-journey-node--1:hover .sp-journey-node__icon { transform: scale(1.2) rotate(-10deg) translateX(-4px); }
.sp-journey-node--2:hover .sp-journey-node__icon { transform: scale(1.3) rotate(10deg) translateX(4px); }
.sp-journey-node--3:hover .sp-journey-node__icon { transform: scale(1.2) translateY(-4px) rotate(-5deg); }
.sp-journey-node--4:hover .sp-journey-node__icon { transform: scale(1.3) rotate(-5deg) translateY(-4px); }
.sp-journey-node--5:hover .sp-journey-node__icon { transform: scale(1.2) rotate(15deg) translateX(-4px); }
.sp-journey-node--6:hover .sp-journey-node__icon { transform: scale(1.3) translateY(-4px) rotate(-5deg) translateX(4px); }
.sp-journey-node--7:hover .sp-journey-node__icon { transform: scale(1.4) rotate(-10deg) translateY(-4px) translateX(-4px); }

/* Node Label */
.sp-journey-node__label {
    font-size: 15px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.4s ease;
    flex: 1;
}

.sp-journey-node--left .sp-journey-node__label {
    order: 2;
    text-align: right;
}

.sp-journey-node--right .sp-journey-node__label {
    order: 0;
    text-align: left;
}

.sp-journey-node:hover .sp-journey-node__label {
    color: #84c615;
}

/* Node Dot on the trunk */
.sp-journey-node__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #000000;
    border: 2px solid #84c615;
    box-shadow: 0 0 0 2px #84c615, 0 0 20px rgba(132, 198, 21, 0.15);
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-journey-node:hover .sp-journey-node__dot {
    transform: translate(-50%, -50%) scale(1.4);
    box-shadow: 0 0 0 4px #84c615, 0 0 40px rgba(132, 198, 21, 0.25);
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-journey-conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 28px 32px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-journey-conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #84c615;
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-journey-conclusion:hover::before {
    opacity: 1;
}

.sp-journey-conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.06);
    border-color: rgba(132, 198, 21, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.sp-journey-conclusion__content {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sp-journey-conclusion__icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-journey-conclusion:hover .sp-journey-conclusion__icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-journey-conclusion__text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-journey-conclusion__highlight {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.sp-journey-conclusion__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-journey-title {
        font-size: 34px;
    }

    .sp-journey-node__content {
        min-width: 220px;
        max-width: 350px;
        padding: 12px 18px;
    }

    .sp-journey-node__icon {
        font-size: 22px;
    }

    .sp-journey-node__label {
        font-size: 14px;
    }

    .sp-journey-node--left .sp-journey-node__content {
        margin-left: 5%;
        padding-right: 40px;
    }

    .sp-journey-node--right .sp-journey-node__content {
        margin-right: 5%;
        padding-left: 40px;
    }

    .sp-journey-conclusion__highlight {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-journey-title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-journey-title::after {
        width: 48px;
        height: 3px;
    }

    .sp-journey-subtitle {
        font-size: 16px;
    }

    .sp-visitor-journey__flow::before {
        left: 20px;
    }

    .sp-journey-node {
        justify-content: flex-start !important;
        padding: 8px 0;
    }

    .sp-journey-node::before {
        display: none;
    }

    .sp-journey-node--left .sp-journey-node__content,
    .sp-journey-node--right .sp-journey-node__content {
        margin-left: 50px !important;
        margin-right: 10px !important;
        padding: 12px 16px !important;
        text-align: left !important;
        min-width: auto;
        max-width: 100%;
        flex: 1;
    }

    .sp-journey-node__label {
        text-align: left !important;
        order: 2 !important;
    }

    .sp-journey-node__number {
        order: 0 !important;
    }

    .sp-journey-node__icon {
        order: 1 !important;
    }

    .sp-journey-node__dot {
        left: 20px;
        width: 12px;
        height: 12px;
    }

    .sp-journey-node:hover .sp-journey-node__dot {
        transform: translate(-50%, -50%) scale(1.3);
    }

    .sp-journey-node--1:hover .sp-journey-node__content,
    .sp-journey-node--2:hover .sp-journey-node__content,
    .sp-journey-node--3:hover .sp-journey-node__content,
    .sp-journey-node--4:hover .sp-journey-node__content,
    .sp-journey-node--5:hover .sp-journey-node__content,
    .sp-journey-node--6:hover .sp-journey-node__content,
    .sp-journey-node--7:hover .sp-journey-node__content {
        transform: translateX(6px) scale(1.02);
    }

    .sp-journey-node--1:hover .sp-journey-node__icon,
    .sp-journey-node--3:hover .sp-journey-node__icon,
    .sp-journey-node--5:hover .sp-journey-node__icon,
    .sp-journey-node--7:hover .sp-journey-node__icon {
        transform: scale(1.2) rotate(-5deg) translateX(0);
    }

    .sp-journey-node--2:hover .sp-journey-node__icon,
    .sp-journey-node--4:hover .sp-journey-node__icon,
    .sp-journey-node--6:hover .sp-journey-node__icon {
        transform: scale(1.2) rotate(5deg) translateX(0);
    }

    .sp-journey-conclusion {
        padding: 20px 22px;
    }

    .sp-journey-conclusion__content {
        gap: 14px;
    }

    .sp-journey-conclusion__highlight {
        font-size: 17px;
        text-align: center;
    }

    .sp-journey-conclusion__text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-journey-badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-journey-title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-journey-title::after {
        width: 40px;
        height: 3px;
    }

    .sp-journey-subtitle {
        font-size: 14px;
    }

    .sp-visitor-journey__flow::before {
        left: 16px;
    }

    .sp-journey-node {
        padding: 6px 0;
    }

    .sp-journey-node--left .sp-journey-node__content,
    .sp-journey-node--right .sp-journey-node__content {
        margin-left: 40px !important;
        margin-right: 6px !important;
        padding: 10px 12px !important;
        border-radius: 10px;
        gap: 10px;
    }

    .sp-journey-node__number {
        font-size: 10px;
        min-width: 20px;
    }

    .sp-journey-node__icon {
        font-size: 18px;
    }

    .sp-journey-node__label {
        font-size: 12px;
    }

    .sp-journey-node__dot {
        left: 16px;
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }

    .sp-journey-conclusion {
        padding: 16px 18px;
        border-radius: 12px;
    }

    .sp-journey-conclusion__content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-journey-conclusion__icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-journey-conclusion__highlight {
        font-size: 15px;
        text-align: center;
    }

    .sp-journey-conclusion__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-journey-node--1:hover .sp-journey-node__content,
    .sp-journey-node--2:hover .sp-journey-node__content,
    .sp-journey-node--3:hover .sp-journey-node__content,
    .sp-journey-node--4:hover .sp-journey-node__content,
    .sp-journey-node--5:hover .sp-journey-node__content,
    .sp-journey-node--6:hover .sp-journey-node__content,
    .sp-journey-node--7:hover .sp-journey-node__content {
        transform: translateX(4px) scale(1.02);
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   JOURNEY FLOW - CYCLIC 2 (PREMIUM ROADMAP DESIGN)
   ============================================================ */

.sp-journey-flow__wrapper {
    max-width: 960px;
    margin: 0 auto;
}

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

.sp-journey-flow__header {
    text-align: center;
    margin-bottom: 52px;
}

.sp-journey-flow__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-journey-flow__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-journey-flow__title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.12;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-journey-flow__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.3));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-journey-flow__subtitle {
    font-size: 19px;
    line-height: 1.8;
    color: #a0a8b8;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   JOURNEY STEPS - PREMIUM ROADMAP
   ============================================================ */

.sp-journey-flow__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
    padding: 16px 0;
    position: relative;
}

/* Vertical timeline line - animated gradient */
.sp-journey-flow__steps::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: linear-gradient(180deg, 
        #84c615 0%, 
        rgba(132, 198, 21, 0.6) 15%,
        rgba(132, 198, 21, 0.3) 35%,
        rgba(132, 198, 21, 0.15) 55%,
        rgba(132, 198, 21, 0.05) 75%,
        rgba(132, 198, 21, 0.01) 100%
    );
    transform: translateX(-50%);
    border-radius: 2px;
    animation: timeline-pulse 3s ease-in-out infinite;
}

@keyframes timeline-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
}

/* ============================================================
   JOURNEY STEP ITEM
   ============================================================ */

.sp-journey-step-item {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 720px;
    padding: 8px 0;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

/* Alternating side alignment */
.sp-journey-step-item--1,
.sp-journey-step-item--3,
.sp-journey-step-item--5,
.sp-journey-step-item--7 {
    flex-direction: row;
}

.sp-journey-step-item--2,
.sp-journey-step-item--4,
.sp-journey-step-item--6 {
    flex-direction: row-reverse;
}

/* ============================================================
   CONNECTOR LINE WITH GLOW
   ============================================================ */

.sp-journey-step-item__connector {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(132, 198, 21, 0.05), 
        rgba(132, 198, 21, 0.12), 
        rgba(132, 198, 21, 0.05)
    );
    margin: 0 14px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 100px;
    position: relative;
    border-radius: 2px;
}

.sp-journey-step-item--2 .sp-journey-step-item__connector {
    background: linear-gradient(270deg, 
        rgba(132, 198, 21, 0.05), 
        rgba(132, 198, 21, 0.12), 
        rgba(132, 198, 21, 0.05)
    );
}

/* Connector glow dot at end */
.sp-journey-step-item__connector::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(132, 198, 21, 0.1);
    border: 1px solid rgba(132, 198, 21, 0.05);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-journey-step-item--2 .sp-journey-step-item__connector::after {
    right: auto;
    left: -4px;
}

.sp-journey-step-item:hover .sp-journey-step-item__connector {
    background: linear-gradient(90deg, 
        rgba(132, 198, 21, 0.2), 
        rgba(132, 198, 21, 0.6), 
        rgba(132, 198, 21, 0.2)
    );
    transform: scaleX(1.1);
}

.sp-journey-step-item--2:hover .sp-journey-step-item__connector {
    background: linear-gradient(270deg, 
        rgba(132, 198, 21, 0.2), 
        rgba(132, 198, 21, 0.6), 
        rgba(132, 198, 21, 0.2)
    );
}

.sp-journey-step-item:hover .sp-journey-step-item__connector::after {
    background: #84c615;
    border-color: #84c615;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.4);
    transform: scale(1.3);
}

/* ============================================================
   CIRCLE NODE - PREMIUM
   ============================================================ */

.sp-journey-step-item__circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.06), 
        rgba(255, 255, 255, 0.01)
    );
    border: 2px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(4px);
}

/* Multi-layer glow on hover */
.sp-journey-step-item__circle::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(132, 198, 21, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.sp-journey-step-item__circle::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.sp-journey-step-item:hover .sp-journey-step-item__circle::before {
    opacity: 1;
}

.sp-journey-step-item:hover .sp-journey-step-item__circle::after {
    border-color: rgba(132, 198, 21, 0.25);
    inset: -10px;
    animation: ring-pulse 1s ease-out;
}

@keyframes ring-pulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Final step - premium highlight */
.sp-journey-step-item__circle--final {
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.15), 
        rgba(132, 198, 21, 0.03)
    );
    box-shadow: 0 0 50px rgba(132, 198, 21, 0.08);
}

.sp-journey-step-item__circle--final::after {
    content: '✦';
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 18px;
    color: #84c615;
    animation: star-rotate 3s linear infinite;
    border: none;
    background: none;
    inset: auto;
}

@keyframes star-rotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Individual Circle Hover Effect */
.sp-journey-step-item--1:hover .sp-journey-step-item__circle {
    transform: scale(1.5) rotate(-3deg) translateY(-1px);
    border-color: #84c615;

    background: radial-gradient(
        circle at 30% 30%,
        rgba(132, 198, 21, 0.15),
        rgba(132, 198, 21, 0.03)
    );

    box-shadow: 0 0 60px rgba(132, 198, 21, 0.12);
}

.sp-journey-step-item--2:hover .sp-journey-step-item__circle {
    transform: scale(1.12) rotate(6deg) translateY(-4px);
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.15), 
        rgba(132, 198, 21, 0.03)
    );
    box-shadow: 0 0 60px rgba(132, 198, 21, 0.12);
}

.sp-journey-step-item--3:hover .sp-journey-step-item__circle {
    transform: scale(1.15) translateY(-6px);
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.15), 
        rgba(132, 198, 21, 0.03)
    );
    box-shadow: 0 0 60px rgba(132, 198, 21, 0.12);
}

.sp-journey-step-item--4:hover .sp-journey-step-item__circle {
    transform: scale(1.12) rotate(-8deg) translateY(-6px);
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.15), 
        rgba(132, 198, 21, 0.03)
    );
    box-shadow: 0 0 60px rgba(132, 198, 21, 0.12);
}

.sp-journey-step-item--5:hover .sp-journey-step-item__circle {
    transform: scale(1.12) rotate(8deg) translateY(-6px);
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.15), 
        rgba(132, 198, 21, 0.03)
    );
    box-shadow: 0 0 60px rgba(132, 198, 21, 0.12);
}

.sp-journey-step-item--6:hover .sp-journey-step-item__circle {
    transform: scale(1.15) translateY(-8px);
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.15), 
        rgba(132, 198, 21, 0.03)
    );
    box-shadow: 0 0 60px rgba(132, 198, 21, 0.12);
}

.sp-journey-step-item--7:hover .sp-journey-step-item__circle {
    transform: scale(1.2) translateY(-8px) rotate(-4deg);
    border-color: #84c615;
    background: radial-gradient(circle at 30% 30%, 
        rgba(132, 198, 21, 0.2), 
        rgba(132, 198, 21, 0.05)
    );
    box-shadow: 0 0 80px rgba(132, 198, 21, 0.18);
}

/* Number inside circle */
.sp-journey-step-item__number {
    font-size: 12px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.35;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.sp-journey-step-item:hover .sp-journey-step-item__number {
    opacity: 1;
    transform: scale(1.2);
}

/* Icon inside circle */
.sp-journey-step-item__icon {
    font-size: 24px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}

.sp-journey-step-item--1:hover .sp-journey-step-item__icon { transform: scale(1.25) rotate(-12deg) translateY(-4px); }
.sp-journey-step-item--2:hover .sp-journey-step-item__icon { transform: scale(1.3) rotate(12deg) translateY(-4px); }
.sp-journey-step-item--3:hover .sp-journey-step-item__icon { transform: scale(1.25) translateY(-6px); }
.sp-journey-step-item--4:hover .sp-journey-step-item__icon { transform: scale(1.3) rotate(-10deg) translateY(-6px); }
.sp-journey-step-item--5:hover .sp-journey-step-item__icon { transform: scale(1.25) rotate(10deg) translateY(-6px); }
.sp-journey-step-item--6:hover .sp-journey-step-item__icon { transform: scale(1.3) translateY(-8px) rotate(-6deg); }
.sp-journey-step-item--7:hover .sp-journey-step-item__icon { transform: scale(1.4) rotate(-12deg) translateY(-8px); }

/* ============================================================
   CONTENT / LABEL - PREMIUM
   ============================================================ */

.sp-journey-step-item__content {
    flex: 1;
    padding: 6px 18px;
    min-width: 140px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.sp-journey-step-item--1 .sp-journey-step-item__content,
.sp-journey-step-item--3 .sp-journey-step-item__content,
.sp-journey-step-item--5 .sp-journey-step-item__content,
.sp-journey-step-item--7 .sp-journey-step-item__content {
    text-align: left;
    padding-left: 24px;
}

.sp-journey-step-item--2 .sp-journey-step-item__content,
.sp-journey-step-item--4 .sp-journey-step-item__content,
.sp-journey-step-item--6 .sp-journey-step-item__content {
    text-align: right;
    padding-right: 24px;
}

.sp-journey-step-item__label {
    font-size: 17px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.4s ease;
    line-height: 1.5;
    position: relative;
    display: inline-block;
}

/* Premium underline effect */
.sp-journey-step-item__label::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.3));
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 2px;
}

.sp-journey-step-item--2 .sp-journey-step-item__label::before,
.sp-journey-step-item--4 .sp-journey-step-item__label::before,
.sp-journey-step-item--6 .sp-journey-step-item__label::before {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, #84c615, rgba(132, 198, 21, 0.3));
}

.sp-journey-step-item:hover .sp-journey-step-item__label {
    color: #84c615;
}

.sp-journey-step-item:hover .sp-journey-step-item__label::before {
    width: 100%;
}

/* Content slide on hover */
.sp-journey-step-item--1:hover .sp-journey-step-item__content { transform: translateX(8px); }
.sp-journey-step-item--2:hover .sp-journey-step-item__content { transform: translateX(-8px); }
.sp-journey-step-item--3:hover .sp-journey-step-item__content { transform: translateX(10px) translateY(-4px); }
.sp-journey-step-item--4:hover .sp-journey-step-item__content { transform: translateX(-10px) translateY(-4px); }
.sp-journey-step-item--5:hover .sp-journey-step-item__content { transform: translateX(12px) translateY(-4px); }
.sp-journey-step-item--6:hover .sp-journey-step-item__content { transform: translateX(-12px) translateY(-4px); }
.sp-journey-step-item--7:hover .sp-journey-step-item__content { transform: translateX(12px) translateY(-6px); }

/* ============================================================
   CONCLUSION - PREMIUM
   ============================================================ */

.sp-journey-flow__conclusion {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 32px 36px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-journey-flow__conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #84c615, rgba(132, 198, 21, 0.2));
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-journey-flow__conclusion::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(132, 198, 21, 0.03), transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp-journey-flow__conclusion:hover::before {
    opacity: 1;
}

.sp-journey-flow__conclusion:hover::after {
    opacity: 1;
}

.sp-journey-flow__conclusion:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(132, 198, 21, 0.06);
    border-color: rgba(132, 198, 21, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.sp-journey-flow__conclusion-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.sp-journey-flow__conclusion-icon {
    font-size: 24px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-journey-flow__conclusion:hover .sp-journey-flow__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-journey-flow__conclusion-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-journey-flow__conclusion-highlight {
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -0.01em;
}

.sp-journey-flow__conclusion-text {
    font-size: 17px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-journey-flow__title {
        font-size: 36px;
    }

    .sp-journey-step-item__circle {
        width: 68px;
        height: 68px;
    }

    .sp-journey-step-item__icon {
        font-size: 22px;
    }

    .sp-journey-step-item__label {
        font-size: 16px;
    }

    .sp-journey-step-item__connector {
        max-width: 60px;
    }

    .sp-journey-flow__conclusion-highlight {
        font-size: 19px;
    }

    .sp-journey-flow__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-journey-flow__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-journey-flow__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-journey-flow__subtitle {
        font-size: 16px;
    }

    .sp-journey-flow__steps::before {
        left: 28px;
        top: 20px;
        bottom: 20px;
        width: 2px;
    }

    .sp-journey-step-item {
        flex-direction: row !important;
        padding: 5px 0;
        max-width: 100%;
    }

    .sp-journey-step-item__connector {
        display: none;
    }

    .sp-journey-step-item__circle {
        width: 56px;
        height: 56px;
        margin-right: 16px;
        flex-shrink: 0;
        border-width: 2px;
    }

    .sp-journey-step-item__number {
        font-size: 10px;
    }

    .sp-journey-step-item__icon {
        font-size: 18px;
    }

    .sp-journey-step-item__content {
        padding: 4px 0 !important;
        text-align: left !important;
        min-width: auto;
        flex: 1;
    }

    .sp-journey-step-item__label {
        font-size: 14px;
    }

    .sp-journey-step-item__label::before {
        left: 0 !important;
        right: auto !important;
        background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.3)) !important;
    }

    .sp-journey-step-item--1 .sp-journey-step-item__content,
    .sp-journey-step-item--2 .sp-journey-step-item__content,
    .sp-journey-step-item--3 .sp-journey-step-item__content,
    .sp-journey-step-item--4 .sp-journey-step-item__content,
    .sp-journey-step-item--5 .sp-journey-step-item__content,
    .sp-journey-step-item--6 .sp-journey-step-item__content,
    .sp-journey-step-item--7 .sp-journey-step-item__content {
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sp-journey-step-item__circle--final::after {
        font-size: 12px;
        top: -8px;
        right: -8px;
    }

    .sp-journey-step-item--1:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--2:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--3:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--4:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--5:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--6:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--7:hover .sp-journey-step-item__circle {
        transform: scale(1.08);
    }

    .sp-journey-step-item--1:hover .sp-journey-step-item__content,
    .sp-journey-step-item--2:hover .sp-journey-step-item__content,
    .sp-journey-step-item--3:hover .sp-journey-step-item__content,
    .sp-journey-step-item--4:hover .sp-journey-step-item__content,
    .sp-journey-step-item--5:hover .sp-journey-step-item__content,
    .sp-journey-step-item--6:hover .sp-journey-step-item__content,
    .sp-journey-step-item--7:hover .sp-journey-step-item__content {
        transform: translateX(4px);
    }

    .sp-journey-flow__conclusion {
        padding: 20px 22px;
        border-radius: 14px;
    }

    .sp-journey-flow__conclusion-content {
        gap: 14px;
    }

    .sp-journey-flow__conclusion-highlight {
        font-size: 17px;
        text-align: center;
    }

    .sp-journey-flow__conclusion-text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-journey-flow__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-journey-flow__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-journey-flow__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-journey-flow__subtitle {
        font-size: 14px;
    }

    .sp-journey-flow__steps::before {
        left: 20px;
        top: 15px;
        bottom: 15px;
        width: 2px;
    }

    .sp-journey-step-item {
        padding: 4px 0;
    }

    .sp-journey-step-item__circle {
        width: 44px;
        height: 44px;
        margin-right: 12px;
        border-width: 1.5px;
    }

    .sp-journey-step-item__number {
        font-size: 8px;
        margin-bottom: 1px;
    }

    .sp-journey-step-item__icon {
        font-size: 14px;
    }

    .sp-journey-step-item__label {
        font-size: 12px;
    }

    .sp-journey-step-item__circle--final::after {
        font-size: 10px;
        top: -6px;
        right: -6px;
    }

    .sp-journey-step-item--1:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--2:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--3:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--4:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--5:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--6:hover .sp-journey-step-item__circle,
    .sp-journey-step-item--7:hover .sp-journey-step-item__circle {
        transform: scale(1.06);
    }

    .sp-journey-flow__conclusion {
        padding: 16px 18px;
        border-radius: 12px;
    }

    .sp-journey-flow__conclusion-content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-journey-flow__conclusion-icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-journey-flow__conclusion-highlight {
        font-size: 15px;
        text-align: center;
    }

    .sp-journey-flow__conclusion-text {
        font-size: 14px;
        line-height: 1.7;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}
/* 


=============================================================================== the above want to change  */




/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   USER INTENT - CYCLIC 1
   ============================================================ */

.sp-user-intent__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-user-intent__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-user-intent__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-user-intent__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-user-intent__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-user-intent__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-user-intent__subtitle {
    font-size: 19px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   INTENT CARDS GRID
   ============================================================ */

.sp-user-intent__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

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

.sp-user-intent__card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px 24px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 90px;
}

/* Card hover effects - different for each */
.sp-user-intent__card--1:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-user-intent__card--2:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-user-intent__card--3:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-user-intent__card--4:hover {
    transform: translateY(-6px) rotate(0.5deg) scale(1.01);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

/* Card glow overlay */
.sp-user-intent__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-user-intent__card:hover::before {
    left: 100%;
}

/* Left accent border */
.sp-user-intent__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #84c615;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sp-user-intent__card:hover::after {
    opacity: 1;
}

/* Card Icon */
.sp-user-intent__card-icon {
    font-size: 34px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 50px;
    text-align: center;
}

.sp-user-intent__card--1:hover .sp-user-intent__card-icon { transform: scale(1.2) rotate(-10deg) translateY(-4px); }
.sp-user-intent__card--2:hover .sp-user-intent__card-icon { transform: scale(1.3) rotate(10deg) translateY(-4px); }
.sp-user-intent__card--3:hover .sp-user-intent__card-icon { transform: scale(1.2) translateY(-6px) rotate(-5deg); }
.sp-user-intent__card--4:hover .sp-user-intent__card-icon { transform: scale(1.3) rotate(-8deg) translateY(-6px); }

/* Card Content */
.sp-user-intent__card-content {
    flex: 1;
}

.sp-user-intent__card-label {
    font-size: 17px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.4s ease;
    line-height: 1.4;
}

.sp-user-intent__card:hover .sp-user-intent__card-label {
    color: #84c615;
}

/* Card Accent Corner */
.sp-user-intent__card-accent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: #84c615;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-user-intent__card:hover .sp-user-intent__card-accent {
    opacity: 0.06;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-user-intent__conclusion {
    background: #f8fafc;
    border-radius: 18px;
    padding: 30px 34px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-user-intent__conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #84c615, rgba(132, 198, 21, 0.1));
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-user-intent__conclusion:hover::before {
    opacity: 1;
}

.sp-user-intent__conclusion:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.08);
    border-color: #84c615;
    background: #ffffff;
}

.sp-user-intent__conclusion-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.sp-user-intent__conclusion-icon {
    font-size: 22px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-user-intent__conclusion:hover .sp-user-intent__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-user-intent__conclusion-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-user-intent__conclusion-highlight {
    font-size: 19px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    line-height: 1.5;
    text-align: justify;
}

.sp-user-intent__conclusion-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5268;
    margin: 0;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-user-intent__title {
        font-size: 34px;
    }

    .sp-user-intent__card {
        padding: 22px 18px;
        min-height: 80px;
    }

    .sp-user-intent__card-icon {
        font-size: 28px;
        width: 40px;
    }

    .sp-user-intent__card-label {
        font-size: 16px;
    }

    .sp-user-intent__conclusion-highlight {
        font-size: 18px;
    }

    .sp-user-intent__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-user-intent__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-user-intent__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-user-intent__subtitle {
        font-size: 16px;
    }

    .sp-user-intent__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sp-user-intent__card {
        padding: 18px 16px;
        min-height: 70px;
        border-radius: 14px;
        gap: 14px;
    }

    .sp-user-intent__card-icon {
        font-size: 26px;
        width: 36px;
    }

    .sp-user-intent__card-label {
        font-size: 15px;
    }

    .sp-user-intent__conclusion {
        padding: 22px 24px;
        border-radius: 14px;
    }

    .sp-user-intent__conclusion-content {
        gap: 14px;
    }

    .sp-user-intent__conclusion-highlight {
        font-size: 17px;
    }

    .sp-user-intent__conclusion-text {
        font-size: 15px;
    }

    /* Simplified hover for mobile */
    .sp-user-intent__card--1:hover,
    .sp-user-intent__card--2:hover,
    .sp-user-intent__card--3:hover,
    .sp-user-intent__card--4:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-user-intent__card--1:hover .sp-user-intent__card-icon,
    .sp-user-intent__card--2:hover .sp-user-intent__card-icon,
    .sp-user-intent__card--3:hover .sp-user-intent__card-icon,
    .sp-user-intent__card--4:hover .sp-user-intent__card-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-user-intent__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-user-intent__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-user-intent__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-user-intent__subtitle {
        font-size: 14px;
    }

    .sp-user-intent__grid {
        gap: 12px;
    }

    .sp-user-intent__card {
        padding: 14px 14px;
        min-height: 60px;
        border-radius: 12px;
        gap: 12px;
    }

    .sp-user-intent__card-icon {
        font-size: 22px;
        width: 32px;
    }

    .sp-user-intent__card-label {
        font-size: 14px;
    }

    .sp-user-intent__card-accent {
        width: 40px;
        height: 40px;
    }

    .sp-user-intent__conclusion {
        padding: 18px 18px;
        border-radius: 12px;
    }

    .sp-user-intent__conclusion-content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-user-intent__conclusion-icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-user-intent__conclusion-highlight {
        font-size: 15px;
        text-align: center;
    }

    .sp-user-intent__conclusion-text {
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   DEVICE DESIGN - CYCLIC 2
   ============================================================ */

.sp-device-design__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-device-design__header {
    text-align: center;
    margin-bottom: 48px;
}

.sp-device-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-device-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-device-design__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-device-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-device-design__subtitle {
    font-size: 19px;
    line-height: 1.8;
    color: #a0a8b8;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   DEVICE CARDS GRID
   ============================================================ */

.sp-device-design__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

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

.sp-device-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 28px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    min-height: 140px;
}

/* Card hover effects - different for each */
.sp-device-card--1:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-device-card--2:hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-device-card--3:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-device-card--4:hover {
    transform: translateY(-6px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-device-card--5:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

/* Glow overlay */
.sp-device-card__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(132, 198, 21, 0.04), transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.sp-device-card:hover .sp-device-card__glow {
    opacity: 1;
}

/* Card Icon */
.sp-device-card__icon {
    font-size: 40px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}

.sp-device-card--1:hover .sp-device-card__icon { transform: scale(1.25) rotate(-10deg) translateY(-4px); }
.sp-device-card--2:hover .sp-device-card__icon { transform: scale(1.3) rotate(10deg) translateY(-4px); }
.sp-device-card--3:hover .sp-device-card__icon { transform: scale(1.2) translateY(-6px) rotate(-5deg); }
.sp-device-card--4:hover .sp-device-card__icon { transform: scale(1.3) rotate(-8deg) translateY(-6px); }
.sp-device-card--5:hover .sp-device-card__icon { transform: scale(1.25) rotate(8deg) translateY(-6px); }

/* Card Label */
.sp-device-card__label {
    font-size: 15px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.4s ease;
    line-height: 1.4;
}

.sp-device-card:hover .sp-device-card__label {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-device-design__conclusion {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 32px 36px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-device-design__conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #84c615, rgba(132, 198, 21, 0.1));
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-device-design__conclusion::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(132, 198, 21, 0.03), transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp-device-design__conclusion:hover::before {
    opacity: 1;
}

.sp-device-design__conclusion:hover::after {
    opacity: 1;
}

.sp-device-design__conclusion:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.06);
    border-color: rgba(132, 198, 21, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.sp-device-design__conclusion-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.sp-device-design__conclusion-icon {
    font-size: 22px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-device-design__conclusion:hover .sp-device-design__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-device-design__conclusion-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-device-design__conclusion-highlight {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
    text-align: justify;
}

.sp-device-design__conclusion-text {
    font-size: 17px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-device-design__title {
        font-size: 34px;
    }

    .sp-device-design__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .sp-device-card {
        min-height: 120px;
        padding: 22px 14px;
    }

    .sp-device-card__icon {
        font-size: 34px;
    }

    .sp-device-card__label {
        font-size: 14px;
    }

    .sp-device-design__conclusion-highlight {
        font-size: 18px;
    }

    .sp-device-design__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-device-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-device-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-device-design__subtitle {
        font-size: 16px;
    }

    .sp-device-design__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .sp-device-card {
        min-height: 100px;
        padding: 18px 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .sp-device-card__icon {
        font-size: 28px;
    }

    .sp-device-card__label {
        font-size: 13px;
    }

    .sp-device-design__conclusion {
        padding: 22px 24px;
        border-radius: 14px;
    }

    .sp-device-design__conclusion-content {
        gap: 14px;
    }

    .sp-device-design__conclusion-highlight {
        font-size: 17px;
    }

    .sp-device-design__conclusion-text {
        font-size: 15px;
    }

    /* Simplified hover for mobile */
    .sp-device-card--1:hover,
    .sp-device-card--2:hover,
    .sp-device-card--3:hover,
    .sp-device-card--4:hover,
    .sp-device-card--5:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-device-card--1:hover .sp-device-card__icon,
    .sp-device-card--2:hover .sp-device-card__icon,
    .sp-device-card--3:hover .sp-device-card__icon,
    .sp-device-card--4:hover .sp-device-card__icon,
    .sp-device-card--5:hover .sp-device-card__icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-device-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-device-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-device-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-device-design__subtitle {
        font-size: 14px;
    }

    .sp-device-design__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sp-device-card {
        min-height: 80px;
        padding: 14px 10px;
        border-radius: 12px;
        gap: 8px;
    }

    .sp-device-card__icon {
        font-size: 24px;
    }

    .sp-device-card__label {
        font-size: 12px;
    }

    .sp-device-design__conclusion {
        padding: 18px 18px;
        border-radius: 12px;
    }

    .sp-device-design__conclusion-content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-device-design__conclusion-icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-device-design__conclusion-highlight {
        font-size: 15px;
        text-align: center;
    }

    .sp-device-design__conclusion-text {
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}



/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   ACCESSIBILITY - CYCLIC 1
   ============================================================ */

.sp-accessibility__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-accessibility__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-accessibility__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-accessibility__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-accessibility__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-accessibility__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-accessibility__subtitle {
    font-size: 19px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 8px 0;
    text-align: center;
}

.sp-accessibility__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   ACCESSIBILITY GRID - 4 COLUMNS
   ============================================================ */

.sp-accessibility__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

/* ============================================================
   ACCESSIBILITY ITEM
   ============================================================ */

.sp-accessibility__item {
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px 16px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    cursor: default;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

/* Individual hover effects */
.sp-accessibility__item--1:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-accessibility__item--2:hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-accessibility__item--3:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-accessibility__item--4:hover {
    transform: translateY(-6px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-accessibility__item--5:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-accessibility__item--6:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

.sp-accessibility__item--7:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

/* Glow overlay */
.sp-accessibility__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-accessibility__item:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-accessibility__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-accessibility__item:hover::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.3);
}

.sp-accessibility__item-icon {
    font-size: 32px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-accessibility__item--1:hover .sp-accessibility__item-icon { transform: scale(1.2) rotate(-10deg); }
.sp-accessibility__item--2:hover .sp-accessibility__item-icon { transform: scale(1.3) rotate(10deg); }
.sp-accessibility__item--3:hover .sp-accessibility__item-icon { transform: scale(1.2) translateY(-4px); }
.sp-accessibility__item--4:hover .sp-accessibility__item-icon { transform: scale(1.3) rotate(-8deg); }
.sp-accessibility__item--5:hover .sp-accessibility__item-icon { transform: scale(1.2) rotate(8deg) translateY(-4px); }
.sp-accessibility__item--6:hover .sp-accessibility__item-icon { transform: scale(1.3) translateY(-6px) rotate(-5deg); }
.sp-accessibility__item--7:hover .sp-accessibility__item-icon { transform: scale(1.3) rotate(-10deg) translateY(-4px); }

.sp-accessibility__item-label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.4s ease;
    line-height: 1.3;
}

.sp-accessibility__item:hover .sp-accessibility__item-label {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-accessibility__conclusion {
    background: #e6f5ef;
    border-radius: 18px;
    padding: 28px 34px;
    border-left: 5px solid #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-accessibility__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-accessibility__conclusion-content {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sp-accessibility__conclusion-icon {
    font-size: 22px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-accessibility__conclusion:hover .sp-accessibility__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-accessibility__conclusion-text-wrapper {
    flex: 1;
}

.sp-accessibility__conclusion-text {
    font-size: 18px;
    line-height: 1.8;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-accessibility__title {
        font-size: 34px;
    }

    .sp-accessibility__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .sp-accessibility__item {
        min-height: 100px;
        padding: 18px 14px;
    }

    .sp-accessibility__item-icon {
        font-size: 28px;
    }

    .sp-accessibility__item-label {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-accessibility__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-accessibility__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-accessibility__subtitle {
        font-size: 17px;
    }

    .sp-accessibility__desc {
        font-size: 15px;
    }

    .sp-accessibility__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sp-accessibility__item {
        min-height: 90px;
        padding: 16px 12px;
        border-radius: 12px;
    }

    .sp-accessibility__item-icon {
        font-size: 26px;
    }

    .sp-accessibility__item-label {
        font-size: 13px;
    }

    .sp-accessibility__conclusion {
        padding: 20px 22px;
        border-left-width: 4px;
    }

    .sp-accessibility__conclusion-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-accessibility__item--1:hover,
    .sp-accessibility__item--2:hover,
    .sp-accessibility__item--3:hover,
    .sp-accessibility__item--4:hover,
    .sp-accessibility__item--5:hover,
    .sp-accessibility__item--6:hover,
    .sp-accessibility__item--7:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-accessibility__item--1:hover .sp-accessibility__item-icon,
    .sp-accessibility__item--2:hover .sp-accessibility__item-icon,
    .sp-accessibility__item--3:hover .sp-accessibility__item-icon,
    .sp-accessibility__item--4:hover .sp-accessibility__item-icon,
    .sp-accessibility__item--5:hover .sp-accessibility__item-icon,
    .sp-accessibility__item--6:hover .sp-accessibility__item-icon,
    .sp-accessibility__item--7:hover .sp-accessibility__item-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-accessibility__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-accessibility__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-accessibility__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-accessibility__subtitle {
        font-size: 15px;
    }

    .sp-accessibility__desc {
        font-size: 14px;
    }

    .sp-accessibility__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-accessibility__item {
        min-height: 80px;
        padding: 14px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .sp-accessibility__item-icon {
        font-size: 22px;
    }

    .sp-accessibility__item-label {
        font-size: 12px;
    }

    .sp-accessibility__conclusion {
        padding: 16px 18px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    .sp-accessibility__conclusion-content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-accessibility__conclusion-icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-accessibility__conclusion-text {
        font-size: 15px;
        text-align: center;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SEO DESIGN - CYCLIC 2
   ============================================================ */

.sp-seo-design__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-seo-design__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-seo-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-seo-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-seo-design__title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-seo-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-seo-design__subtitle {
    font-size: 19px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0 0 6px 0;
    text-align: center;
}

.sp-seo-design__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #84c615;
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   SEO GRID - 4 COLUMNS
   ============================================================ */

.sp-seo-design__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

/* ============================================================
   SEO ITEM
   ============================================================ */

.sp-seo-design__item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 20px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    cursor: default;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

/* Individual hover effects */
.sp-seo-design__item--1:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--2:hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--3:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--4:hover {
    transform: translateY(-6px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--5:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--6:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--7:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-seo-design__item--8:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-seo-design__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-seo-design__item:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-seo-design__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-seo-design__item:hover::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.3);
}

.sp-seo-design__item-icon {
    font-size: 32px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-seo-design__item--1:hover .sp-seo-design__item-icon { transform: scale(1.2) rotate(-10deg); }
.sp-seo-design__item--2:hover .sp-seo-design__item-icon { transform: scale(1.3) rotate(10deg); }
.sp-seo-design__item--3:hover .sp-seo-design__item-icon { transform: scale(1.2) translateY(-4px); }
.sp-seo-design__item--4:hover .sp-seo-design__item-icon { transform: scale(1.3) rotate(-8deg); }
.sp-seo-design__item--5:hover .sp-seo-design__item-icon { transform: scale(1.2) rotate(8deg) translateY(-4px); }
.sp-seo-design__item--6:hover .sp-seo-design__item-icon { transform: scale(1.3) translateY(-6px) rotate(-5deg); }
.sp-seo-design__item--7:hover .sp-seo-design__item-icon { transform: scale(1.3) rotate(-10deg) translateY(-4px); }
.sp-seo-design__item--8:hover .sp-seo-design__item-icon { transform: scale(1.3) rotate(10deg) translateY(-4px); }

.sp-seo-design__item-label {
    font-size: 14px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.4s ease;
    line-height: 1.3;
}

.sp-seo-design__item:hover .sp-seo-design__item-label {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-seo-design__conclusion {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    padding: 32px 36px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-seo-design__conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #84c615, rgba(132, 198, 21, 0.1));
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-seo-design__conclusion::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(132, 198, 21, 0.03), transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp-seo-design__conclusion:hover::before {
    opacity: 1;
}

.sp-seo-design__conclusion:hover::after {
    opacity: 1;
}

.sp-seo-design__conclusion:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.06);
    border-color: rgba(132, 198, 21, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.sp-seo-design__conclusion-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.sp-seo-design__conclusion-icon {
    font-size: 22px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-seo-design__conclusion:hover .sp-seo-design__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-seo-design__conclusion-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-seo-design__conclusion-highlight {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
    text-align: justify;
}

.sp-seo-design__conclusion-text {
    font-size: 17px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-seo-design__title {
        font-size: 34px;
    }

    .sp-seo-design__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .sp-seo-design__item {
        min-height: 100px;
        padding: 18px 14px;
    }

    .sp-seo-design__item-icon {
        font-size: 28px;
    }

    .sp-seo-design__item-label {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-seo-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-seo-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-seo-design__subtitle {
        font-size: 17px;
    }

    .sp-seo-design__desc {
        font-size: 15px;
    }

    .sp-seo-design__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sp-seo-design__item {
        min-height: 90px;
        padding: 16px 12px;
        border-radius: 12px;
    }

    .sp-seo-design__item-icon {
        font-size: 26px;
    }

    .sp-seo-design__item-label {
        font-size: 13px;
    }

    .sp-seo-design__conclusion {
        padding: 22px 24px;
        border-radius: 14px;
    }

    .sp-seo-design__conclusion-content {
        gap: 14px;
    }

    .sp-seo-design__conclusion-highlight {
        font-size: 17px;
    }

    .sp-seo-design__conclusion-text {
        font-size: 15px;
    }

    /* Simplified hover for mobile */
    .sp-seo-design__item--1:hover,
    .sp-seo-design__item--2:hover,
    .sp-seo-design__item--3:hover,
    .sp-seo-design__item--4:hover,
    .sp-seo-design__item--5:hover,
    .sp-seo-design__item--6:hover,
    .sp-seo-design__item--7:hover,
    .sp-seo-design__item--8:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-seo-design__item--1:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--2:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--3:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--4:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--5:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--6:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--7:hover .sp-seo-design__item-icon,
    .sp-seo-design__item--8:hover .sp-seo-design__item-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-seo-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-seo-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-seo-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-seo-design__subtitle {
        font-size: 15px;
    }

    .sp-seo-design__desc {
        font-size: 14px;
    }

    .sp-seo-design__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-seo-design__item {
        min-height: 80px;
        padding: 14px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .sp-seo-design__item-icon {
        font-size: 22px;
    }

    .sp-seo-design__item-label {
        font-size: 12px;
    }

    .sp-seo-design__conclusion {
        padding: 18px 18px;
        border-radius: 12px;
    }

    .sp-seo-design__conclusion-content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-seo-design__conclusion-icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-seo-design__conclusion-highlight {
        font-size: 15px;
        text-align: center;
    }

    .sp-seo-design__conclusion-text {
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}
/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TRICHY DESIGN - CYCLIC 1
   ============================================================ */

.sp-trichy-design__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-trichy-design__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-trichy-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-trichy-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-trichy-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-trichy-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-trichy-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-trichy-design__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trichy-design__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

/* Highlight Box */
.sp-trichy-design__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-trichy-design__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__highlight:hover .sp-trichy-design__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-trichy-design__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* Locations Box */
.sp-trichy-design__locations {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__locations:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border-color: #84c615;
    background: #ffffff;
}

.sp-trichy-design__locations-text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-trichy-design__locations-text strong {
    color: #84c615;
    font-weight: 600;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-trichy-design__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Image Card */
.sp-trichy-design__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-trichy-design__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-trichy-design__image-card img {
    width: 100%;
    height: 100%;
    max-height: 350px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__image-card:hover img {
    transform: scale(1.04);
}

/* Image Overlay */
.sp-trichy-design__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__image-card:hover .sp-trichy-design__image-overlay {
    padding: 22px 26px;
}

.sp-trichy-design__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__image-card:hover .sp-trichy-design__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-trichy-design__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Badge */
.sp-trichy-design__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__image-card:hover .sp-trichy-design__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-trichy-design__image-badge span:first-child {
    font-size: 16px;
}

/* Image Accent */
.sp-trichy-design__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-design__image-card:hover .sp-trichy-design__image-accent {
    opacity: 0.08;
}

/* Stats */
.sp-trichy-design__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-trichy-design__stat {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trichy-design__stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-trichy-design__stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-trichy-design__stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
}

.sp-trichy-design__stat-label {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

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

@media (max-width: 1024px) {
    .sp-trichy-design__title {
        font-size: 34px;
    }

    .sp-trichy-design__grid {
        gap: 40px;
    }

    .sp-trichy-design__stat-number {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-trichy-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-trichy-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-trichy-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-trichy-design__text {
        font-size: 15px;
    }

    .sp-trichy-design__highlight {
        padding: 16px 18px;
    }

    .sp-trichy-design__highlight-text {
        font-size: 15px;
    }

    .sp-trichy-design__locations {
        padding: 14px 18px;
    }

    .sp-trichy-design__locations-text {
        font-size: 15px;
    }

    .sp-trichy-design__image-card img {
        max-height: 280px;
    }

    .sp-trichy-design__image-text {
        font-size: 15px;
    }

    .sp-trichy-design__image-overlay {
        padding: 14px 18px;
    }

    .sp-trichy-design__image-card:hover .sp-trichy-design__image-overlay {
        padding: 18px 22px;
    }

    .sp-trichy-design__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-trichy-design__image-accent {
        width: 60px;
        height: 60px;
    }

    .sp-trichy-design__stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-trichy-design__stat {
        padding: 14px 12px;
    }

    .sp-trichy-design__stat-number {
        font-size: 26px;
    }

    .sp-trichy-design__stat-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-trichy-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-trichy-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-trichy-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-trichy-design__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-trichy-design__highlight {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-trichy-design__highlight-text {
        font-size: 14px;
    }

    .sp-trichy-design__locations {
        padding: 12px 14px;
    }

    .sp-trichy-design__locations-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-trichy-design__image-card img {
        max-height: 200px;
    }

    .sp-trichy-design__image-text {
        font-size: 14px;
    }

    .sp-trichy-design__image-icon {
        font-size: 14px;
    }

    .sp-trichy-design__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-trichy-design__image-card:hover .sp-trichy-design__image-overlay {
        padding: 16px 18px;
    }

    .sp-trichy-design__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-trichy-design__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-trichy-design__image-accent {
        width: 50px;
        height: 50px;
    }

    .sp-trichy-design__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-trichy-design__stat {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-trichy-design__stat-number {
        font-size: 22px;
    }

    .sp-trichy-design__stat-label {
        font-size: 11px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PHILOSOPHY - CYCLIC 2
   ============================================================ */

.sp-philosophy__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-philosophy__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-philosophy__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-philosophy__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-philosophy__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-philosophy__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-philosophy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-philosophy__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-philosophy__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* Questions */
.sp-philosophy__questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-philosophy__question {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-philosophy__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy__question-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__question:hover .sp-philosophy__question-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-philosophy__question-text {
    font-size: 15px;
    color: #e6e8ec;
    transition: all 0.3s ease;
    font-weight: 400;
}

.sp-philosophy__question:hover .sp-philosophy__question-text {
    color: #84c615;
}

/* Highlight */
.sp-philosophy__highlight {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__highlight:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-philosophy__visual {
    display: flex;
    align-items: center;
}

.sp-philosophy__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-philosophy__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-philosophy__image-card img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__image-card:hover img {
    transform: scale(1.04);
}

/* Image Overlay */
.sp-philosophy__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__image-card:hover .sp-philosophy__image-overlay {
    padding: 22px 26px;
}

.sp-philosophy__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__image-card:hover .sp-philosophy__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-philosophy__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Badge */
.sp-philosophy__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__image-card:hover .sp-philosophy__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-philosophy__image-badge span:first-child {
    font-size: 14px;
    color: #84c615;
}

/* Image Accent */
.sp-philosophy__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy__image-card:hover .sp-philosophy__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-philosophy__title {
        font-size: 34px;
    }

    .sp-philosophy__grid {
        gap: 40px;
    }

    .sp-philosophy__question-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-philosophy__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-philosophy__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-philosophy__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-philosophy__text {
        font-size: 15px;
    }

    .sp-philosophy__question {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-philosophy__question-text {
        font-size: 14px;
    }

    .sp-philosophy__highlight {
        padding: 14px 18px;
    }

    .sp-philosophy__highlight-text {
        font-size: 15px;
    }

    .sp-philosophy__image-card img {
        max-height: 300px;
    }

    .sp-philosophy__image-text {
        font-size: 15px;
    }

    .sp-philosophy__image-overlay {
        padding: 14px 18px;
    }

    .sp-philosophy__image-card:hover .sp-philosophy__image-overlay {
        padding: 18px 22px;
    }

    .sp-philosophy__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-philosophy__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-philosophy__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-philosophy__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-philosophy__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-philosophy__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-philosophy__question {
        padding: 8px 12px;
        gap: 8px;
        border-radius: 10px;
    }

    .sp-philosophy__question-text {
        font-size: 13px;
    }

    .sp-philosophy__highlight {
        padding: 12px 14px;
    }

    .sp-philosophy__highlight-text {
        font-size: 14px;
    }

    .sp-philosophy__image-card img {
        max-height: 220px;
    }

    .sp-philosophy__image-text {
        font-size: 14px;
    }

    .sp-philosophy__image-icon {
        font-size: 14px;
    }

    .sp-philosophy__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-philosophy__image-card:hover .sp-philosophy__image-overlay {
        padding: 16px 18px;
    }

    .sp-philosophy__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-philosophy__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-philosophy__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PSYCHOLOGY - CYCLIC 1
   ============================================================ */

.sp-psychology__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-psychology__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-psychology__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-psychology__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-psychology__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-psychology__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-psychology__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-psychology__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-psychology__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-psychology__text--final {
    font-weight: 500;
    color: #000000;
}

/* Decisions List */
.sp-psychology__decisions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-psychology__decision {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-psychology__decision--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-psychology__decision--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-psychology__decision--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-psychology__decision--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-psychology__decision-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__decision:hover .sp-psychology__decision-dot {
    transform: scale(1.5);
    box-shadow: 0 0 16px rgba(132, 198, 21, 0.3);
}

.sp-psychology__decision-text {
    font-size: 15px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-psychology__decision:hover .sp-psychology__decision-text {
    color: #84c615;
}

/* Highlight */
.sp-psychology__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 20px 24px;
    border-bottom: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-psychology__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__highlight:hover .sp-psychology__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-psychology__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-psychology__visual {
    display: flex;
    align-items: center;
}

.sp-psychology__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-psychology__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-psychology__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__image-card:hover img {
    transform: scale(1.04);
}

.sp-psychology__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__image-card:hover .sp-psychology__image-overlay {
    padding: 22px 26px;
}

.sp-psychology__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__image-card:hover .sp-psychology__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-psychology__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-psychology__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__image-card:hover .sp-psychology__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-psychology__image-badge span:first-child {
    font-size: 16px;
}

.sp-psychology__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology__image-card:hover .sp-psychology__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-psychology__title {
        font-size: 34px;
    }

    .sp-psychology__grid {
        gap: 40px;
    }

    .sp-psychology__decision-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-psychology__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-psychology__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-psychology__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-psychology__text {
        font-size: 15px;
    }

    .sp-psychology__decision {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-psychology__decision-text {
        font-size: 14px;
    }

    .sp-psychology__highlight {
        padding: 16px 18px;
    }

    .sp-psychology__highlight-text {
        font-size: 15px;
    }

    .sp-psychology__image-card img {
        max-height: 300px;
    }

    .sp-psychology__image-text {
        font-size: 15px;
    }

    .sp-psychology__image-overlay {
        padding: 14px 18px;
    }

    .sp-psychology__image-card:hover .sp-psychology__image-overlay {
        padding: 18px 22px;
    }

    .sp-psychology__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-psychology__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-psychology__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-psychology__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-psychology__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-psychology__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-psychology__decision {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-psychology__decision-dot {
        width: 6px;
        height: 6px;
    }

    .sp-psychology__decision-text {
        font-size: 13px;
    }

    .sp-psychology__highlight {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-psychology__highlight-text {
        font-size: 14px;
    }

    .sp-psychology__image-card img {
        max-height: 220px;
    }

    .sp-psychology__image-text {
        font-size: 14px;
    }

    .sp-psychology__image-icon {
        font-size: 14px;
    }

    .sp-psychology__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-psychology__image-card:hover .sp-psychology__image-overlay {
        padding: 16px 18px;
    }

    .sp-psychology__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-psychology__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-psychology__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}
/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   BEHAVIOUR - CYCLIC 2
   ============================================================ */

.sp-behaviour__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-behaviour__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-behaviour__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-behaviour__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-behaviour__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-behaviour__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-behaviour__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-behaviour__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-behaviour__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* Questions Grid */
.sp-behaviour__questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-behaviour__question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-behaviour__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    font-family: 'Georgia', serif;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__question:hover .sp-behaviour__question-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-behaviour__question-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-behaviour__question:hover .sp-behaviour__question-text {
    color: #84c615;
}

/* Conclusion */
.sp-behaviour__conclusion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-behaviour__conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-behaviour__conclusion-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__conclusion-highlight:hover {
    transform: translateY(-4px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-behaviour__conclusion-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__conclusion-highlight:hover .sp-behaviour__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-behaviour__conclusion-highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-behaviour__visual {
    display: flex;
    align-items: center;
}

.sp-behaviour__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-behaviour__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-behaviour__image-card img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover img {
    transform: scale(1.04);
}

.sp-behaviour__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-overlay {
    padding: 22px 26px;
}

.sp-behaviour__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-behaviour__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-behaviour__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-behaviour__image-badge span:first-child {
    font-size: 16px;
}

.sp-behaviour__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-behaviour__title {
        font-size: 34px;
    }

    .sp-behaviour__grid {
        gap: 40px;
    }

    .sp-behaviour__question-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-behaviour__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-behaviour__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-behaviour__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-behaviour__text {
        font-size: 15px;
    }

    .sp-behaviour__questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-behaviour__question {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-behaviour__question-text {
        font-size: 13px;
    }

    .sp-behaviour__conclusion-text {
        font-size: 15px;
    }

    .sp-behaviour__conclusion-highlight {
        padding: 14px 18px;
    }

    .sp-behaviour__conclusion-highlight-text {
        font-size: 15px;
    }

    .sp-behaviour__image-card img {
        max-height: 300px;
    }

    .sp-behaviour__image-text {
        font-size: 15px;
    }

    .sp-behaviour__image-overlay {
        padding: 14px 18px;
    }

    .sp-behaviour__image-card:hover .sp-behaviour__image-overlay {
        padding: 18px 22px;
    }

    .sp-behaviour__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-behaviour__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-behaviour__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-behaviour__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-behaviour__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-behaviour__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-behaviour__questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-behaviour__question {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-behaviour__question-text {
        font-size: 13px;
    }

    .sp-behaviour__conclusion-text {
        font-size: 14px;
    }

    .sp-behaviour__conclusion-highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-behaviour__conclusion-highlight-text {
        font-size: 14px;
    }

    .sp-behaviour__image-card img {
        max-height: 220px;
    }

    .sp-behaviour__image-text {
        font-size: 14px;
    }

    .sp-behaviour__image-icon {
        font-size: 14px;
    }

    .sp-behaviour__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-behaviour__image-card:hover .sp-behaviour__image-overlay {
        padding: 16px 18px;
    }

    .sp-behaviour__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-behaviour__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-behaviour__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   BEHAVIOUR - CYCLIC 2
   ============================================================ */

.sp-behaviour__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-behaviour__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-behaviour__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-behaviour__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-behaviour__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-behaviour__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-behaviour__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-behaviour__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-behaviour__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* Questions Grid */
.sp-behaviour__questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-behaviour__question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-behaviour__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behaviour__question-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    font-family: 'Georgia', serif;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__question:hover .sp-behaviour__question-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-behaviour__question-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-behaviour__question:hover .sp-behaviour__question-text {
    color: #84c615;
}

/* Conclusion */
.sp-behaviour__conclusion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-behaviour__conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-behaviour__conclusion-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__conclusion-highlight:hover {
    transform: translateY(-4px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-behaviour__conclusion-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__conclusion-highlight:hover .sp-behaviour__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-behaviour__conclusion-highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-behaviour__visual {
    display: flex;
    align-items: center;
}

.sp-behaviour__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-behaviour__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-behaviour__image-card img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover img {
    transform: scale(1.04);
}

.sp-behaviour__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-overlay {
    padding: 22px 26px;
}

.sp-behaviour__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-behaviour__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-behaviour__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-behaviour__image-badge span:first-child {
    font-size: 16px;
}

.sp-behaviour__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behaviour__image-card:hover .sp-behaviour__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-behaviour__title {
        font-size: 34px;
    }

    .sp-behaviour__grid {
        gap: 40px;
    }

    .sp-behaviour__question-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-behaviour__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-behaviour__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-behaviour__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-behaviour__text {
        font-size: 15px;
    }

    .sp-behaviour__questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-behaviour__question {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-behaviour__question-text {
        font-size: 13px;
    }

    .sp-behaviour__conclusion-text {
        font-size: 15px;
    }

    .sp-behaviour__conclusion-highlight {
        padding: 14px 18px;
    }

    .sp-behaviour__conclusion-highlight-text {
        font-size: 15px;
    }

    .sp-behaviour__image-card img {
        max-height: 300px;
    }

    .sp-behaviour__image-text {
        font-size: 15px;
    }

    .sp-behaviour__image-overlay {
        padding: 14px 18px;
    }

    .sp-behaviour__image-card:hover .sp-behaviour__image-overlay {
        padding: 18px 22px;
    }

    .sp-behaviour__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-behaviour__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-behaviour__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-behaviour__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-behaviour__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-behaviour__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-behaviour__questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-behaviour__question {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-behaviour__question-text {
        font-size: 13px;
    }

    .sp-behaviour__conclusion-text {
        font-size: 14px;
    }

    .sp-behaviour__conclusion-highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-behaviour__conclusion-highlight-text {
        font-size: 14px;
    }

    .sp-behaviour__image-card img {
        max-height: 220px;
    }

    .sp-behaviour__image-text {
        font-size: 14px;
    }

    .sp-behaviour__image-icon {
        font-size: 14px;
    }

    .sp-behaviour__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-behaviour__image-card:hover .sp-behaviour__image-overlay {
        padding: 16px 18px;
    }

    .sp-behaviour__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-behaviour__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-behaviour__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   HIERARCHY - CYCLIC 1
   ============================================================ */

.sp-hierarchy__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-hierarchy__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-hierarchy__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-hierarchy__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-hierarchy__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-hierarchy__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-hierarchy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-hierarchy__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-hierarchy__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-hierarchy__text--final {
    font-weight: 500;
    color: #000000;
}

/* Highlight */
.sp-hierarchy__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 12px 18px;
    border-bottom: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-hierarchy__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__highlight:hover .sp-hierarchy__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-hierarchy__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* List */
.sp-hierarchy__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-hierarchy__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-hierarchy__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-hierarchy__item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__item:hover .sp-hierarchy__item-dot {
    transform: scale(1.5);
    box-shadow: 0 0 16px rgba(132, 198, 21, 0.3);
}

.sp-hierarchy__item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-hierarchy__item:hover .sp-hierarchy__item-text {
    color: #84c615;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-hierarchy__visual {
    display: flex;
    align-items: center;
}

.sp-hierarchy__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-hierarchy__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-hierarchy__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__image-card:hover img {
    transform: scale(1.04);
}

.sp-hierarchy__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__image-card:hover .sp-hierarchy__image-overlay {
    padding: 22px 26px;
}

.sp-hierarchy__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__image-card:hover .sp-hierarchy__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-hierarchy__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-hierarchy__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__image-card:hover .sp-hierarchy__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-hierarchy__image-badge span:first-child {
    font-size: 16px;
}

.sp-hierarchy__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hierarchy__image-card:hover .sp-hierarchy__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-hierarchy__title {
        font-size: 34px;
    }

    .sp-hierarchy__grid {
        gap: 40px;
    }

    .sp-hierarchy__item-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-hierarchy__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-hierarchy__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-hierarchy__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-hierarchy__text {
        font-size: 15px;
    }

    .sp-hierarchy__highlight {
        padding: 10px 14px;
    }

    .sp-hierarchy__highlight-text {
        font-size: 15px;
    }

    .sp-hierarchy__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-hierarchy__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-hierarchy__item-text {
        font-size: 13px;
    }

    .sp-hierarchy__image-card img {
        max-height: 300px;
    }

    .sp-hierarchy__image-text {
        font-size: 15px;
    }

    .sp-hierarchy__image-overlay {
        padding: 14px 18px;
    }

    .sp-hierarchy__image-card:hover .sp-hierarchy__image-overlay {
        padding: 18px 22px;
    }

    .sp-hierarchy__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-hierarchy__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-hierarchy__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-hierarchy__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-hierarchy__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-hierarchy__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-hierarchy__highlight {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-hierarchy__highlight-text {
        font-size: 14px;
    }

    .sp-hierarchy__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-hierarchy__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-hierarchy__item-dot {
        width: 6px;
        height: 6px;
    }

    .sp-hierarchy__item-text {
        font-size: 13px;
    }

    .sp-hierarchy__image-card img {
        max-height: 220px;
    }

    .sp-hierarchy__image-text {
        font-size: 14px;
    }

    .sp-hierarchy__image-icon {
        font-size: 14px;
    }

    .sp-hierarchy__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-hierarchy__image-card:hover .sp-hierarchy__image-overlay {
        padding: 16px 18px;
    }

    .sp-hierarchy__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-hierarchy__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-hierarchy__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   FPATTERN - CYCLIC 2
   ============================================================ */

.sp-fpattern__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-fpattern__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-fpattern__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-fpattern__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-fpattern__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-fpattern__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-fpattern__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-fpattern__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-fpattern__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* ============================================================
   F-PATTERN STEPS
   ============================================================ */

.sp-fpattern__pattern {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-fpattern__step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-fpattern__step--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
}

.sp-fpattern__step--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
}

.sp-fpattern__step--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
}

.sp-fpattern__step--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
}

.sp-fpattern__step--5:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
}

.sp-fpattern__step-number {
    font-size: 13px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 24px;
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__step:hover .sp-fpattern__step-number {
    opacity: 1;
    transform: scale(1.15);
}

.sp-fpattern__step-text {
    font-size: 15px;
    color: #e6e8ec;
    transition: all 0.3s ease;
    flex: 1;
}

.sp-fpattern__step:hover .sp-fpattern__step-text {
    color: #84c615;
}

.sp-fpattern__step-arrow {
    font-size: 16px;
    color: rgba(132, 198, 21, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__step:hover .sp-fpattern__step-arrow {
    color: #84c615;
    transform: translateY(4px);
}

/* ============================================================
   HIGHLIGHT
   ============================================================ */

.sp-fpattern__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__highlight:hover {
    transform: translateY(-3px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.06);
}

.sp-fpattern__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__highlight:hover .sp-fpattern__highlight-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-fpattern__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

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

.sp-fpattern__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-fpattern__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-fpattern__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-fpattern__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-fpattern__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-fpattern__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-fpattern__item--5:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-fpattern__item-check {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__item:hover .sp-fpattern__item-check {
    transform: scale(1.3);
}

.sp-fpattern__item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-fpattern__item:hover .sp-fpattern__item-text {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-fpattern__conclusion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-fpattern__conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-fpattern__conclusion-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__conclusion-highlight:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-fpattern__conclusion-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__conclusion-highlight:hover .sp-fpattern__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-fpattern__conclusion-highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-fpattern__visual {
    display: flex;
    align-items: center;
}

.sp-fpattern__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-fpattern__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-fpattern__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__image-card:hover img {
    transform: scale(1.04);
}

.sp-fpattern__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__image-card:hover .sp-fpattern__image-overlay {
    padding: 22px 26px;
}

.sp-fpattern__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__image-card:hover .sp-fpattern__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-fpattern__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-fpattern__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__image-card:hover .sp-fpattern__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-fpattern__image-badge span:first-child {
    font-size: 16px;
}

.sp-fpattern__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-fpattern__image-card:hover .sp-fpattern__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-fpattern__title {
        font-size: 34px;
    }

    .sp-fpattern__grid {
        gap: 40px;
    }

    .sp-fpattern__step-text {
        font-size: 14px;
    }

    .sp-fpattern__item-text {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-fpattern__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-fpattern__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-fpattern__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-fpattern__text {
        font-size: 15px;
    }

    .sp-fpattern__step {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-fpattern__step-text {
        font-size: 14px;
    }

    .sp-fpattern__step-number {
        font-size: 12px;
        min-width: 20px;
    }

    .sp-fpattern__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-fpattern__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-fpattern__item-text {
        font-size: 13px;
    }

    .sp-fpattern__highlight {
        padding: 10px 14px;
    }

    .sp-fpattern__highlight-text {
        font-size: 15px;
    }

    .sp-fpattern__conclusion-text {
        font-size: 15px;
    }

    .sp-fpattern__conclusion-highlight {
        padding: 14px 18px;
    }

    .sp-fpattern__conclusion-highlight-text {
        font-size: 15px;
    }

    .sp-fpattern__image-card img {
        max-height: 300px;
    }

    .sp-fpattern__image-text {
        font-size: 15px;
    }

    .sp-fpattern__image-overlay {
        padding: 14px 18px;
    }

    .sp-fpattern__image-card:hover .sp-fpattern__image-overlay {
        padding: 18px 22px;
    }

    .sp-fpattern__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-fpattern__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-fpattern__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-fpattern__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-fpattern__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-fpattern__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-fpattern__step {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-fpattern__step-text {
        font-size: 13px;
    }

    .sp-fpattern__step-number {
        font-size: 11px;
        min-width: 18px;
    }

    .sp-fpattern__step-arrow {
        font-size: 14px;
    }

    .sp-fpattern__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-fpattern__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-fpattern__item-text {
        font-size: 13px;
    }

    .sp-fpattern__highlight {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-fpattern__highlight-text {
        font-size: 14px;
    }

    .sp-fpattern__conclusion-text {
        font-size: 14px;
    }

    .sp-fpattern__conclusion-highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-fpattern__conclusion-highlight-text {
        font-size: 14px;
    }

    .sp-fpattern__image-card img {
        max-height: 220px;
    }

    .sp-fpattern__image-text {
        font-size: 14px;
    }

    .sp-fpattern__image-icon {
        font-size: 14px;
    }

    .sp-fpattern__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-fpattern__image-card:hover .sp-fpattern__image-overlay {
        padding: 16px 18px;
    }

    .sp-fpattern__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-fpattern__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-fpattern__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   ZPATTERN - CYCLIC 1
   ============================================================ */

.sp-zpattern__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-zpattern__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-zpattern__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-zpattern__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-zpattern__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-zpattern__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-zpattern__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   Z-PATTERN FLOW - GRID LAYOUT
   ============================================================ */

.sp-zpattern__flow {
    background: #f8fafc;
    border-radius: 18px;
    padding: 30px;
    border: 2px solid #eef2f6;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-zpattern__flow:hover {
    border-color: #84c615;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Z-Pattern Steps - 2x2 Grid */
.sp-zpattern__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sp-zpattern__step {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 18px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects for each step */
.sp-zpattern__step--1:hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
    background: #ffffff;
}

.sp-zpattern__step--2:hover {
    transform: translateY(-6px) rotate(1deg) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
    background: #ffffff;
}

.sp-zpattern__step--3:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
    background: #ffffff;
}

.sp-zpattern__step--4:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.02);
    border-color: #84c615;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
    background: #ffffff;
}

/* Step Content */
.sp-zpattern__step-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-zpattern__step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e6f5ef;
    color: #84c615;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-zpattern__step:hover .sp-zpattern__step-number {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.1);
}

.sp-zpattern__step-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-zpattern__step:hover .sp-zpattern__step-label {
    color: #84c615;
}

.sp-zpattern__step-arrow {
    font-size: 22px;
    color: #84c615;
    margin-left: auto;
    opacity: 0.4;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-zpattern__step:hover .sp-zpattern__step-arrow {
    opacity: 1;
    transform: translateX(4px) scale(1.1);
}

/* ============================================================
   ELEMENTS
   ============================================================ */

.sp-zpattern__elements {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    border: 2px solid #eef2f6;
    margin-bottom: 36px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-zpattern__elements:hover {
    border-color: #84c615;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-zpattern__elements-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sp-zpattern__elements-icon {
    font-size: 18px;
    color: #84c615;
}

.sp-zpattern__elements-text {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.sp-zpattern__elements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sp-zpattern__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-zpattern__element--1:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-zpattern__element--2:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-zpattern__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-zpattern__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-zpattern__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-zpattern__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-zpattern__element-icon {
    font-size: 22px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-zpattern__element:hover .sp-zpattern__element-icon {
    transform: scale(1.2) rotate(-5deg);
}

.sp-zpattern__element-label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-zpattern__element:hover .sp-zpattern__element-label {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-zpattern__conclusion {
    background: #e6f5ef;
    border-radius: 16px;
    padding: 22px 28px;
    border-left: 5px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-zpattern__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-zpattern__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-zpattern__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-zpattern__conclusion:hover .sp-zpattern__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-zpattern__conclusion-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-zpattern__title {
        font-size: 34px;
    }

    .sp-zpattern__elements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-zpattern__step-label {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-zpattern__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-zpattern__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-zpattern__subtitle {
        font-size: 16px;
    }

    .sp-zpattern__flow {
        padding: 20px;
    }

    .sp-zpattern__steps {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sp-zpattern__step {
        padding: 14px 14px;
    }

    .sp-zpattern__step-number {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .sp-zpattern__step-label {
        font-size: 14px;
    }

    .sp-zpattern__step-arrow {
        font-size: 18px;
    }

    .sp-zpattern__elements {
        padding: 18px;
    }

    .sp-zpattern__elements-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-zpattern__element {
        padding: 10px 12px;
    }

    .sp-zpattern__element-label {
        font-size: 13px;
    }

    .sp-zpattern__conclusion {
        padding: 18px 20px;
    }

    .sp-zpattern__conclusion-text {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-zpattern__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-zpattern__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-zpattern__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-zpattern__subtitle {
        font-size: 14px;
    }

    .sp-zpattern__flow {
        padding: 14px;
    }

    .sp-zpattern__steps {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-zpattern__step {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .sp-zpattern__step-content {
        gap: 10px;
    }

    .sp-zpattern__step-number {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .sp-zpattern__step-label {
        font-size: 12px;
    }

    .sp-zpattern__step-arrow {
        font-size: 14px;
    }

    .sp-zpattern__elements {
        padding: 14px;
    }

    .sp-zpattern__elements-header {
        margin-bottom: 12px;
    }

    .sp-zpattern__elements-text {
        font-size: 15px;
    }

    .sp-zpattern__elements-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-zpattern__element {
        padding: 8px 10px;
        border-radius: 8px;
        gap: 8px;
    }

    .sp-zpattern__element-icon {
        font-size: 18px;
    }

    .sp-zpattern__element-label {
        font-size: 12px;
    }

    .sp-zpattern__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
    }

    .sp-zpattern__conclusion-content {
        gap: 12px;
    }

    .sp-zpattern__conclusion-text {
        font-size: 14px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   COLOUR PSYCHOLOGY - CYCLIC 2
   ============================================================ */

.sp-colour-psychology__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-colour-psychology__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-colour-psychology__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-colour-psychology__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-colour-psychology__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-colour-psychology__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-colour-psychology__subtitle {
    font-size: 19px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0 0 6px 0;
    text-align: center;
}

.sp-colour-psychology__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   COLOUR CARDS GRID
   ============================================================ */

.sp-colour-psychology__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

.sp-colour-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
}

/* Card hover effects - different for each colour */
.sp-colour-card--blue:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.06);
}

.sp-colour-card--green:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.06);
}

.sp-colour-card--red:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    box-shadow: 0 12px 40px rgba(239, 68, 68, 0.06);
}

.sp-colour-card--orange:hover {
    transform: translateY(-10px) rotate(-1deg) scale(1.02);
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.06);
}

.sp-colour-card--black:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.06);
    box-shadow: 0 12px 40px rgba(107, 114, 128, 0.06);
}

.sp-colour-card--white:hover {
    transform: translateY(-10px) rotate(1deg) scale(1.02);
    border-color: #e5e7eb;
    background: rgba(229, 231, 235, 0.06);
    box-shadow: 0 12px 40px rgba(229, 231, 235, 0.06);
}

/* Glow overlay */
.sp-colour-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-colour-card:hover::before {
    left: 100%;
}

/* Card Header */
.sp-colour-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.sp-colour-card__swatch {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-colour-card:hover .sp-colour-card__swatch {
    transform: scale(1.1) rotate(-5deg);
}

/* Swatch Colours */
.sp-colour-card__swatch--blue {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.sp-colour-card__swatch--green {
    background: linear-gradient(135deg, #22c55e, #4ade80);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.sp-colour-card__swatch--red {
    background: linear-gradient(135deg, #ef4444, #f87171);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.sp-colour-card__swatch--orange {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}

.sp-colour-card__swatch--black {
    background: linear-gradient(135deg, #1f2937, #4b5563);
    box-shadow: 0 4px 16px rgba(31, 41, 55, 0.2);
}

.sp-colour-card__swatch--white {
    background: linear-gradient(135deg, #f3f4f6, #ffffff);
    box-shadow: 0 4px 16px rgba(229, 231, 235, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Card Name */
.sp-colour-card__name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.3s ease;
}

.sp-colour-card--blue:hover .sp-colour-card__name { color: #3b82f6; }
.sp-colour-card--green:hover .sp-colour-card__name { color: #22c55e; }
.sp-colour-card--red:hover .sp-colour-card__name { color: #ef4444; }
.sp-colour-card--orange:hover .sp-colour-card__name { color: #f59e0b; }
.sp-colour-card--black:hover .sp-colour-card__name { color: #9ca3af; }
.sp-colour-card--white:hover .sp-colour-card__name { color: #e5e7eb; }

/* Card Body */
.sp-colour-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Associations Tags */
.sp-colour-card__associations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-colour-card__tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: #e6e8ec;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-colour-card--blue:hover .sp-colour-card__tag { border-color: #3b82f6; color: #3b82f6; }
.sp-colour-card--green:hover .sp-colour-card__tag { border-color: #22c55e; color: #22c55e; }
.sp-colour-card--red:hover .sp-colour-card__tag { border-color: #ef4444; color: #ef4444; }
.sp-colour-card--orange:hover .sp-colour-card__tag { border-color: #f59e0b; color: #f59e0b; }
.sp-colour-card--black:hover .sp-colour-card__tag { border-color: #9ca3af; color: #9ca3af; }
.sp-colour-card--white:hover .sp-colour-card__tag { border-color: #e5e7eb; color: #e5e7eb; }

/* Uses Section */
.sp-colour-card__uses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.sp-colour-card__use-label {
    font-size: 13px;
    font-weight: 500;
    color: #a0a8b8;
    width: 100%;
}

.sp-colour-card__use {
    font-size: 13px;
    font-weight: 400;
    color: #e6e8ec;
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-colour-card--blue:hover .sp-colour-card__use { border-color: #3b82f6; color: #3b82f6; }
.sp-colour-card--green:hover .sp-colour-card__use { border-color: #22c55e; color: #22c55e; }
.sp-colour-card--red:hover .sp-colour-card__use { border-color: #ef4444; color: #ef4444; }
.sp-colour-card--orange:hover .sp-colour-card__use { border-color: #f59e0b; color: #f59e0b; }
.sp-colour-card--black:hover .sp-colour-card__use { border-color: #9ca3af; color: #9ca3af; }
.sp-colour-card--white:hover .sp-colour-card__use { border-color: #e5e7eb; color: #e5e7eb; }

/* Card Accent Corner */
.sp-colour-card__accent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-colour-card--blue .sp-colour-card__accent { background: #3b82f6; }
.sp-colour-card--green .sp-colour-card__accent { background: #22c55e; }
.sp-colour-card--red .sp-colour-card__accent { background: #ef4444; }
.sp-colour-card--orange .sp-colour-card__accent { background: #f59e0b; }
.sp-colour-card--black .sp-colour-card__accent { background: #4b5563; }
.sp-colour-card--white .sp-colour-card__accent { background: #e5e7eb; }

.sp-colour-card:hover .sp-colour-card__accent {
    opacity: 0.06;
}

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

@media (max-width: 1024px) {
    .sp-colour-psychology__title {
        font-size: 34px;
    }

    .sp-colour-psychology__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .sp-colour-card {
        padding: 20px 18px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-colour-psychology__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-colour-psychology__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-colour-psychology__subtitle {
        font-size: 17px;
    }

    .sp-colour-psychology__desc {
        font-size: 15px;
    }

    .sp-colour-psychology__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sp-colour-card {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .sp-colour-card__name {
        font-size: 18px;
    }

    .sp-colour-card__swatch {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .sp-colour-card__tag {
        font-size: 12px;
        padding: 3px 12px;
    }

    .sp-colour-card__use {
        font-size: 12px;
        padding: 3px 10px;
    }

    .sp-colour-card__accent {
        width: 50px;
        height: 50px;
    }

    /* Simplified hover for mobile */
    .sp-colour-card--blue:hover,
    .sp-colour-card--green:hover,
    .sp-colour-card--red:hover,
    .sp-colour-card--orange:hover,
    .sp-colour-card--black:hover,
    .sp-colour-card--white:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-colour-psychology__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-colour-psychology__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-colour-psychology__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-colour-psychology__subtitle {
        font-size: 15px;
    }

    .sp-colour-psychology__desc {
        font-size: 14px;
    }

    .sp-colour-psychology__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-colour-card {
        padding: 12px 12px;
        border-radius: 12px;
    }

    .sp-colour-card__header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .sp-colour-card__swatch {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .sp-colour-card__name {
        font-size: 15px;
    }

    .sp-colour-card__tag {
        font-size: 10px;
        padding: 2px 8px;
    }

    .sp-colour-card__use-label {
        font-size: 11px;
    }

    .sp-colour-card__use {
        font-size: 10px;
        padding: 2px 8px;
    }

    .sp-colour-card__accent {
        width: 35px;
        height: 35px;
    }

    .sp-colour-card__body {
        gap: 10px;
    }

    .sp-colour-card__associations {
        gap: 6px;
    }

    .sp-colour-card__uses {
        padding-top: 8px;
        gap: 4px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TYPOGRAPHY PSYCHOLOGY - CYCLIC 1
   ============================================================ */

.sp-typography-psychology__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-typography-psychology__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-typography-psychology__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-typography-psychology__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-typography-psychology__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-typography-psychology__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-typography-psychology__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-typography-psychology__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-typography-psychology__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-typography-psychology__text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

/* List */
.sp-typography-psychology__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-typography-psychology__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-typography-psychology__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-typography-psychology__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-typography-psychology__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-typography-psychology__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-typography-psychology__item--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-typography-psychology__item--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-typography-psychology__item-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__item:hover .sp-typography-psychology__item-icon {
    transform: scale(1.3);
}

.sp-typography-psychology__item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-typography-psychology__item:hover .sp-typography-psychology__item-text {
    color: #84c615;
}

/* Highlight */
.sp-typography-psychology__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-typography-psychology__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__highlight:hover .sp-typography-psychology__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-typography-psychology__highlight-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* Conclusion */
.sp-typography-psychology__conclusion {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-typography-psychology__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #1a1f36;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL WITH LOGO
   ============================================================ */

.sp-typography-psychology__visual {
    display: flex;
    align-items: center;
}

.sp-typography-psychology__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-typography-psychology__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-typography-psychology__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__image-card:hover img {
    transform: scale(1.04);
}

/* Logo Overlay - Centered */
.sp-typography-psychology__logo-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 24px 36px;
    border-radius: 16px;
    border: 2px solid #84c615;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__image-card:hover .sp-typography-psychology__logo-wrapper {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sp-typography-psychology__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sp-typography-psychology__logo-brand {
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.02em;
}

.sp-typography-psychology__logo-sub {
    font-size: 14px;
    font-weight: 400;
    color: #4a5268;
    letter-spacing: 0.04em;
}

/* Image Overlay */
.sp-typography-psychology__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__image-card:hover .sp-typography-psychology__image-overlay {
    padding: 22px 26px;
}

.sp-typography-psychology__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__image-card:hover .sp-typography-psychology__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-typography-psychology__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* Image Badge */
.sp-typography-psychology__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__image-card:hover .sp-typography-psychology__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-typography-psychology__image-badge span:first-child {
    font-size: 16px;
}

/* Image Accent */
.sp-typography-psychology__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-typography-psychology__image-card:hover .sp-typography-psychology__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-typography-psychology__title {
        font-size: 34px;
    }

    .sp-typography-psychology__grid {
        gap: 40px;
    }

    .sp-typography-psychology__logo-brand {
        font-size: 24px;
    }

    .sp-typography-psychology__logo-wrapper {
        padding: 18px 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-typography-psychology__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-typography-psychology__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-typography-psychology__subtitle {
        font-size: 16px;
    }

    .sp-typography-psychology__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-typography-psychology__text {
        font-size: 16px;
    }

    .sp-typography-psychology__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-typography-psychology__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-typography-psychology__item-text {
        font-size: 13px;
    }

    .sp-typography-psychology__highlight {
        padding: 14px 18px;
    }

    .sp-typography-psychology__highlight-text {
        font-size: 15px;
    }

    .sp-typography-psychology__conclusion {
        padding: 14px 16px;
    }

    .sp-typography-psychology__conclusion-text {
        font-size: 15px;
    }

    .sp-typography-psychology__image-card img {
        max-height: 350px;
    }

    .sp-typography-psychology__logo-wrapper {
        padding: 16px 24px;
    }

    .sp-typography-psychology__logo-brand {
        font-size: 22px;
    }

    .sp-typography-psychology__logo-sub {
        font-size: 12px;
    }

    .sp-typography-psychology__image-text {
        font-size: 15px;
    }

    .sp-typography-psychology__image-overlay {
        padding: 14px 18px;
    }

    .sp-typography-psychology__image-card:hover .sp-typography-psychology__image-overlay {
        padding: 18px 22px;
    }

    .sp-typography-psychology__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-typography-psychology__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-typography-psychology__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-typography-psychology__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-typography-psychology__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-typography-psychology__subtitle {
        font-size: 14px;
    }

    .sp-typography-psychology__text {
        font-size: 15px;
    }

    .sp-typography-psychology__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-typography-psychology__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-typography-psychology__item-text {
        font-size: 13px;
    }

    .sp-typography-psychology__highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-typography-psychology__highlight-text {
        font-size: 14px;
    }

    .sp-typography-psychology__conclusion {
        padding: 12px 14px;
    }

    .sp-typography-psychology__conclusion-text {
        font-size: 14px;
    }

    .sp-typography-psychology__image-card img {
        max-height: 280px;
    }

    .sp-typography-psychology__logo-wrapper {
        padding: 12px 16px;
        border-width: 1.5px;
    }

    .sp-typography-psychology__logo-brand {
        font-size: 18px;
    }

    .sp-typography-psychology__logo-sub {
        font-size: 10px;
    }

    .sp-typography-psychology__image-text {
        font-size: 14px;
    }

    .sp-typography-psychology__image-icon {
        font-size: 14px;
    }

    .sp-typography-psychology__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-typography-psychology__image-card:hover .sp-typography-psychology__image-overlay {
        padding: 16px 18px;
    }

    .sp-typography-psychology__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-typography-psychology__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-typography-psychology__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}
/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   WHITE SPACE - CYCLIC 2
   ============================================================ */

.sp-white-space__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-white-space__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-white-space__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-white-space__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-white-space__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-white-space__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-white-space__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-white-space__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-white-space__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-white-space__text {
    font-size: 18px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0;
}

/* Benefits */
.sp-white-space__benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-white-space__benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-white-space__benefit--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-white-space__benefit--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-white-space__benefit--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-white-space__benefit--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-white-space__benefit--5:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-white-space__benefit-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__benefit:hover .sp-white-space__benefit-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-white-space__benefit-text {
    font-size: 15px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-white-space__benefit:hover .sp-white-space__benefit-text {
    color: #84c615;
}

/* Conclusion */
.sp-white-space__conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-white-space__conclusion-text {
    font-size: 16px;
    color: #e6e8ec;
    margin: 0 0 6px 0;
    text-align: center;
}

.sp-white-space__conclusion-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-white-space__visual {
    display: flex;
    align-items: center;
}

.sp-white-space__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-white-space__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-white-space__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__image-card:hover img {
    transform: scale(1.04);
}

.sp-white-space__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__image-card:hover .sp-white-space__image-overlay {
    padding: 22px 26px;
}

.sp-white-space__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__image-card:hover .sp-white-space__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-white-space__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-white-space__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__image-card:hover .sp-white-space__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-white-space__image-badge span:first-child {
    font-size: 16px;
}

.sp-white-space__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-white-space__image-card:hover .sp-white-space__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-white-space__title {
        font-size: 34px;
    }

    .sp-white-space__grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-white-space__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-white-space__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-white-space__subtitle {
        font-size: 16px;
    }

    .sp-white-space__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-white-space__text {
        font-size: 17px;
    }

    .sp-white-space__benefit {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-white-space__benefit-text {
        font-size: 14px;
    }

    .sp-white-space__conclusion {
        padding: 14px 18px;
    }

    .sp-white-space__conclusion-text {
        font-size: 15px;
    }

    .sp-white-space__conclusion-highlight {
        font-size: 17px;
    }

    .sp-white-space__image-card img {
        max-height: 350px;
    }

    .sp-white-space__image-text {
        font-size: 15px;
    }

    .sp-white-space__image-overlay {
        padding: 14px 18px;
    }

    .sp-white-space__image-card:hover .sp-white-space__image-overlay {
        padding: 18px 22px;
    }

    .sp-white-space__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-white-space__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-white-space__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-white-space__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-white-space__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-white-space__subtitle {
        font-size: 14px;
    }

    .sp-white-space__text {
        font-size: 16px;
    }

    .sp-white-space__benefit {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-white-space__benefit-text {
        font-size: 13px;
    }

    .sp-white-space__benefit-icon {
        font-size: 12px;
    }

    .sp-white-space__conclusion {
        padding: 12px 14px;
    }

    .sp-white-space__conclusion-text {
        font-size: 14px;
    }

    .sp-white-space__conclusion-highlight {
        font-size: 15px;
    }

    .sp-white-space__image-card img {
        max-height: 280px;
    }

    .sp-white-space__image-text {
        font-size: 14px;
    }

    .sp-white-space__image-icon {
        font-size: 14px;
    }

    .sp-white-space__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-white-space__image-card:hover .sp-white-space__image-overlay {
        padding: 16px 18px;
    }

    .sp-white-space__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-white-space__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-white-space__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SIMPLICITY - CYCLIC 1
   ============================================================ */

.sp-simplicity__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-simplicity__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-simplicity__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-simplicity__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-simplicity__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-simplicity__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-simplicity__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-simplicity__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-simplicity__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-simplicity__text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

/* List */
.sp-simplicity__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-simplicity__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-simplicity__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-simplicity__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-simplicity__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-simplicity__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-simplicity__item-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__item:hover .sp-simplicity__item-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-simplicity__item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-simplicity__item:hover .sp-simplicity__item-text {
    color: #84c615;
}

/* Conclusion */
.sp-simplicity__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-bottom: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-simplicity__conclusion-text {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL WITH LOGO
   ============================================================ */

.sp-simplicity__visual {
    display: flex;
    align-items: center;
}

.sp-simplicity__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-simplicity__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-simplicity__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__image-card:hover img {
    transform: scale(1.04);
}

/* Logo Overlay */
.sp-simplicity__logo-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 32px;
    border-radius: 16px;
    border: 2px solid #84c615;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__image-card:hover .sp-simplicity__logo-wrapper {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sp-simplicity__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sp-simplicity__logo-brand {
    font-size: 26px;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.02em;
}

.sp-simplicity__logo-sub {
    font-size: 13px;
    font-weight: 400;
    color: #4a5268;
    letter-spacing: 0.04em;
}

/* Image Overlay */
.sp-simplicity__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__image-card:hover .sp-simplicity__image-overlay {
    padding: 22px 26px;
}

.sp-simplicity__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__image-card:hover .sp-simplicity__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-simplicity__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-simplicity__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__image-card:hover .sp-simplicity__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-simplicity__image-badge span:first-child {
    font-size: 14px;
    color: #84c615;
}

.sp-simplicity__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-simplicity__image-card:hover .sp-simplicity__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-simplicity__title {
        font-size: 34px;
    }

    .sp-simplicity__grid {
        gap: 40px;
    }

    .sp-simplicity__logo-brand {
        font-size: 22px;
    }

    .sp-simplicity__logo-wrapper {
        padding: 16px 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-simplicity__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-simplicity__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-simplicity__subtitle {
        font-size: 16px;
    }

    .sp-simplicity__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-simplicity__text {
        font-size: 16px;
    }

    .sp-simplicity__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-simplicity__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-simplicity__item-text {
        font-size: 13px;
    }

    .sp-simplicity__conclusion {
        padding: 14px 16px;
    }

    .sp-simplicity__conclusion-text {
        font-size: 16px;
    }

    .sp-simplicity__image-card img {
        max-height: 350px;
    }

    .sp-simplicity__logo-wrapper {
        padding: 14px 20px;
    }

    .sp-simplicity__logo-brand {
        font-size: 20px;
    }

    .sp-simplicity__logo-sub {
        font-size: 11px;
    }

    .sp-simplicity__image-text {
        font-size: 15px;
    }

    .sp-simplicity__image-overlay {
        padding: 14px 18px;
    }

    .sp-simplicity__image-card:hover .sp-simplicity__image-overlay {
        padding: 18px 22px;
    }

    .sp-simplicity__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-simplicity__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-simplicity__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-simplicity__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-simplicity__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-simplicity__subtitle {
        font-size: 14px;
    }

    .sp-simplicity__text {
        font-size: 15px;
    }

    .sp-simplicity__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-simplicity__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-simplicity__item-text {
        font-size: 13px;
    }

    .sp-simplicity__conclusion {
        padding: 12px 14px;
    }

    .sp-simplicity__conclusion-text {
        font-size: 15px;
    }

    .sp-simplicity__image-card img {
        max-height: 280px;
    }

    .sp-simplicity__logo-wrapper {
        padding: 10px 14px;
        border-width: 1.5px;
    }

    .sp-simplicity__logo-brand {
        font-size: 16px;
    }

    .sp-simplicity__logo-sub {
        font-size: 9px;
    }

    .sp-simplicity__image-text {
        font-size: 14px;
    }

    .sp-simplicity__image-icon {
        font-size: 14px;
    }

    .sp-simplicity__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-simplicity__image-card:hover .sp-simplicity__image-overlay {
        padding: 16px 18px;
    }

    .sp-simplicity__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-simplicity__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-simplicity__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   COGNITIVE LOAD - CYCLIC 2
   ============================================================ */

.sp-cognitive-load__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-cognitive-load__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-cognitive-load__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-cognitive-load__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-cognitive-load__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-cognitive-load__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-cognitive-load__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-cognitive-load__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-cognitive-load__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-cognitive-load__text {
    font-size: 17px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0;
}

/* List */
.sp-cognitive-load__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-cognitive-load__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-cognitive-load__item--1:hover {
    transform: translateX(6px);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-cognitive-load__item--2:hover {
    transform: translateX(-6px);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-cognitive-load__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-cognitive-load__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-cognitive-load__item--5:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-cognitive-load__item-icon {
    font-size: 16px;
    font-weight: 700;
    color: #ef4444;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__item:hover .sp-cognitive-load__item-icon {
    transform: scale(1.3) rotate(90deg);
}

.sp-cognitive-load__item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-cognitive-load__item:hover .sp-cognitive-load__item-text {
    color: #ef4444;
}

/* Highlight */
.sp-cognitive-load__highlight {
    background: rgba(239, 68, 68, 0.06);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #ef4444;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__highlight:hover {
    transform: translateX(6px);
    background: rgba(239, 68, 68, 0.10);
}

.sp-cognitive-load__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.sp-cognitive-load__highlight-desc {
    font-size: 16px;
    color: #e6e8ec;
    margin: 0;
}

/* Conclusion */
.sp-cognitive-load__conclusion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-cognitive-load__conclusion-text {
    font-size: 16px;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-cognitive-load__conclusion-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-cognitive-load__visual {
    display: flex;
    align-items: center;
}

.sp-cognitive-load__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-cognitive-load__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-cognitive-load__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__image-card:hover img {
    transform: scale(1.04);
}

.sp-cognitive-load__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__image-card:hover .sp-cognitive-load__image-overlay {
    padding: 22px 26px;
}

.sp-cognitive-load__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__image-card:hover .sp-cognitive-load__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-cognitive-load__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-cognitive-load__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__image-card:hover .sp-cognitive-load__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-cognitive-load__image-badge span:first-child {
    font-size: 16px;
}

.sp-cognitive-load__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-cognitive-load__image-card:hover .sp-cognitive-load__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-cognitive-load__title {
        font-size: 34px;
    }

    .sp-cognitive-load__grid {
        gap: 40px;
    }

    .sp-cognitive-load__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-cognitive-load__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-cognitive-load__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-cognitive-load__subtitle {
        font-size: 16px;
    }

    .sp-cognitive-load__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-cognitive-load__text {
        font-size: 16px;
    }

    .sp-cognitive-load__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-cognitive-load__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-cognitive-load__item-text {
        font-size: 13px;
    }

    .sp-cognitive-load__highlight {
        padding: 14px 18px;
    }

    .sp-cognitive-load__highlight-text {
        font-size: 16px;
    }

    .sp-cognitive-load__conclusion {
        padding: 14px 18px;
    }

    .sp-cognitive-load__conclusion-text {
        font-size: 15px;
    }

    .sp-cognitive-load__conclusion-highlight {
        font-size: 17px;
    }

    .sp-cognitive-load__image-card img {
        max-height: 350px;
    }

    .sp-cognitive-load__image-text {
        font-size: 15px;
    }

    .sp-cognitive-load__image-overlay {
        padding: 14px 18px;
    }

    .sp-cognitive-load__image-card:hover .sp-cognitive-load__image-overlay {
        padding: 18px 22px;
    }

    .sp-cognitive-load__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-cognitive-load__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-cognitive-load__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-cognitive-load__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-cognitive-load__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-cognitive-load__subtitle {
        font-size: 14px;
    }

    .sp-cognitive-load__text {
        font-size: 15px;
    }

    .sp-cognitive-load__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-cognitive-load__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-cognitive-load__item-text {
        font-size: 13px;
    }

    .sp-cognitive-load__highlight {
        padding: 12px 14px;
    }

    .sp-cognitive-load__highlight-text {
        font-size: 15px;
    }

    .sp-cognitive-load__conclusion {
        padding: 12px 14px;
    }

    .sp-cognitive-load__conclusion-text {
        font-size: 14px;
    }

    .sp-cognitive-load__conclusion-highlight {
        font-size: 15px;
    }

    .sp-cognitive-load__image-card img {
        max-height: 280px;
    }

    .sp-cognitive-load__image-text {
        font-size: 14px;
    }

    .sp-cognitive-load__image-icon {
        font-size: 14px;
    }

    .sp-cognitive-load__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-cognitive-load__image-card:hover .sp-cognitive-load__image-overlay {
        padding: 16px 18px;
    }

    .sp-cognitive-load__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-cognitive-load__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-cognitive-load__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TRUST DESIGNED - CYCLIC 1
   ============================================================ */

.sp-trust-designed__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-trust-designed__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-trust-designed__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-trust-designed__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-trust-designed__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-trust-designed__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-trust-designed__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-trust-designed__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-trust-designed__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trust-designed__text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

/* List - 3 columns */
.sp-trust-designed__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sp-trust-designed__item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trust-designed__item--1:hover {
    transform: translateX(4px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--2:hover {
    transform: translateX(-4px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--3:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--4:hover {
    transform: translateX(4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--5:hover {
    transform: translateX(-4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--6:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--7:hover {
    transform: translateX(4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--8:hover {
    transform: translateX(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--9:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--10:hover {
    transform: translateX(4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--11:hover {
    transform: translateX(-4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item--12:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-designed__item-icon {
    font-size: 12px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__item:hover .sp-trust-designed__item-icon {
    transform: scale(1.3);
}

.sp-trust-designed__item-text {
    font-size: 12px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-trust-designed__item:hover .sp-trust-designed__item-text {
    color: #84c615;
}

/* Conclusion */
.sp-trust-designed__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-trust-designed__conclusion-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-trust-designed__visual {
    display: flex;
    align-items: center;
}

.sp-trust-designed__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-trust-designed__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-trust-designed__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__image-card:hover img {
    transform: scale(1.04);
}

.sp-trust-designed__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__image-card:hover .sp-trust-designed__image-overlay {
    padding: 22px 26px;
}

.sp-trust-designed__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__image-card:hover .sp-trust-designed__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-trust-designed__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-trust-designed__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__image-card:hover .sp-trust-designed__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-trust-designed__image-badge span:first-child {
    font-size: 16px;
}

.sp-trust-designed__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-designed__image-card:hover .sp-trust-designed__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-trust-designed__title {
        font-size: 34px;
    }

    .sp-trust-designed__grid {
        gap: 40px;
    }

    .sp-trust-designed__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-trust-designed__item-text {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-trust-designed__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-trust-designed__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-trust-designed__subtitle {
        font-size: 16px;
    }

    .sp-trust-designed__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-trust-designed__text {
        font-size: 16px;
    }

    .sp-trust-designed__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .sp-trust-designed__item {
        padding: 4px 8px;
        gap: 6px;
        border-radius: 6px;
    }

    .sp-trust-designed__item-text {
        font-size: 11px;
    }

    .sp-trust-designed__conclusion {
        padding: 14px 16px;
    }

    .sp-trust-designed__conclusion-text {
        font-size: 15px;
    }

    .sp-trust-designed__image-card img {
        max-height: 350px;
    }

    .sp-trust-designed__image-text {
        font-size: 15px;
    }

    .sp-trust-designed__image-overlay {
        padding: 14px 18px;
    }

    .sp-trust-designed__image-card:hover .sp-trust-designed__image-overlay {
        padding: 18px 22px;
    }

    .sp-trust-designed__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-trust-designed__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-trust-designed__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-trust-designed__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-trust-designed__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-trust-designed__subtitle {
        font-size: 14px;
    }

    .sp-trust-designed__text {
        font-size: 15px;
    }

    .sp-trust-designed__list {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .sp-trust-designed__item {
        padding: 4px 6px;
        gap: 4px;
        border-radius: 4px;
    }

    .sp-trust-designed__item-text {
        font-size: 10px;
    }

    .sp-trust-designed__item-icon {
        font-size: 10px;
    }

    .sp-trust-designed__conclusion {
        padding: 12px 14px;
    }

    .sp-trust-designed__conclusion-text {
        font-size: 14px;
    }

    .sp-trust-designed__image-card img {
        max-height: 280px;
    }

    .sp-trust-designed__image-text {
        font-size: 14px;
    }

    .sp-trust-designed__image-icon {
        font-size: 14px;
    }

    .sp-trust-designed__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-trust-designed__image-card:hover .sp-trust-designed__image-overlay {
        padding: 16px 18px;
    }

    .sp-trust-designed__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-trust-designed__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-trust-designed__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}
/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   EMOTIONAL DESIGN - CYCLIC 2
   ============================================================ */

.sp-emotional-design__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-emotional-design__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-emotional-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-emotional-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-emotional-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-emotional-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-emotional-design__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-emotional-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-emotional-design__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-emotional-design__text {
    font-size: 17px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0;
}

/* Feelings Grid */
.sp-emotional-design__feelings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.sp-emotional-design__feeling {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    text-align: center;
}

.sp-emotional-design__feeling--1:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: #84c615;
    background: rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__feeling--2:hover {
    transform: translateY(-4px) rotate(-1deg) scale(1.05);
    border-color: #84c615;
    background: rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__feeling--3:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: #84c615;
    background: rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__feeling--4:hover {
    transform: translateY(-4px) rotate(1deg) scale(1.05);
    border-color: #84c615;
    background: rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__feeling--5:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: #84c615;
    background: rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__feeling--6:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: #84c615;
    background: rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__feeling-icon {
    font-size: 28px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__feeling:hover .sp-emotional-design__feeling-icon {
    transform: scale(1.15);
}

.sp-emotional-design__feeling-text {
    font-size: 13px;
    color: #e6e8ec;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sp-emotional-design__feeling:hover .sp-emotional-design__feeling-text {
    color: #84c615;
}

/* Conclusion */
.sp-emotional-design__conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-emotional-design__conclusion-text {
    font-size: 17px;
    line-height: 1.7;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-emotional-design__visual {
    display: flex;
    align-items: center;
}

.sp-emotional-design__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-emotional-design__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-emotional-design__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__image-card:hover img {
    transform: scale(1.04);
}

.sp-emotional-design__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__image-card:hover .sp-emotional-design__image-overlay {
    padding: 22px 26px;
}

.sp-emotional-design__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__image-card:hover .sp-emotional-design__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-emotional-design__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-emotional-design__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__image-card:hover .sp-emotional-design__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-emotional-design__image-badge span:first-child {
    font-size: 16px;
}

.sp-emotional-design__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-emotional-design__image-card:hover .sp-emotional-design__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-emotional-design__title {
        font-size: 34px;
    }

    .sp-emotional-design__grid {
        gap: 40px;
    }

    .sp-emotional-design__feelings {
        grid-template-columns: 1fr 1fr;
    }

    .sp-emotional-design__feeling {
        padding: 12px 8px;
    }

    .sp-emotional-design__feeling-icon {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-emotional-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-emotional-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-emotional-design__subtitle {
        font-size: 16px;
    }

    .sp-emotional-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-emotional-design__text {
        font-size: 16px;
    }

    .sp-emotional-design__feelings {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .sp-emotional-design__feeling {
        padding: 10px 6px;
        gap: 4px;
    }

    .sp-emotional-design__feeling-icon {
        font-size: 22px;
    }

    .sp-emotional-design__feeling-text {
        font-size: 12px;
    }

    .sp-emotional-design__conclusion {
        padding: 14px 18px;
    }

    .sp-emotional-design__conclusion-text {
        font-size: 15px;
    }

    .sp-emotional-design__image-card img {
        max-height: 350px;
    }

    .sp-emotional-design__image-text {
        font-size: 15px;
    }

    .sp-emotional-design__image-overlay {
        padding: 14px 18px;
    }

    .sp-emotional-design__image-card:hover .sp-emotional-design__image-overlay {
        padding: 18px 22px;
    }

    .sp-emotional-design__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-emotional-design__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-emotional-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-emotional-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-emotional-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-emotional-design__subtitle {
        font-size: 14px;
    }

    .sp-emotional-design__text {
        font-size: 15px;
    }

    .sp-emotional-design__feelings {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
    }

    .sp-emotional-design__feeling {
        padding: 8px 4px;
        gap: 4px;
        border-radius: 8px;
    }

    .sp-emotional-design__feeling-icon {
        font-size: 18px;
    }

    .sp-emotional-design__feeling-text {
        font-size: 10px;
    }

    .sp-emotional-design__conclusion {
        padding: 12px 14px;
    }

    .sp-emotional-design__conclusion-text {
        font-size: 14px;
    }

    .sp-emotional-design__image-card img {
        max-height: 280px;
    }

    .sp-emotional-design__image-text {
        font-size: 14px;
    }

    .sp-emotional-design__image-icon {
        font-size: 14px;
    }

    .sp-emotional-design__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-emotional-design__image-card:hover .sp-emotional-design__image-overlay {
        padding: 16px 18px;
    }

    .sp-emotional-design__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-emotional-design__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-emotional-design__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   DECISION MAKING - CYCLIC 1
   ============================================================ */

.sp-decision-making__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-decision-making__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-decision-making__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-decision-making__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-decision-making__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-decision-making__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-decision-making__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-decision-making__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

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

.sp-decision-making__question {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 20px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-decision-making__question--1:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-decision-making__question--2:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-decision-making__question--3:hover {
    transform: translateY(-6px) rotate(0.5deg) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-decision-making__question--4:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-decision-making__question--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-decision-making__question::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-decision-making__question:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-decision-making__question::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-decision-making__question:hover::after {
    opacity: 1;
}

.sp-decision-making__question-icon {
    font-size: 24px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Georgia', serif;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-decision-making__question:hover .sp-decision-making__question-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-decision-making__question-text {
    font-size: 16px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-decision-making__question:hover .sp-decision-making__question-text {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-decision-making__conclusion {
    background: #e6f5ef;
    border-radius: 16px;
    padding: 22px 28px;
    border-left: 5px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-decision-making__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-decision-making__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-decision-making__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-decision-making__conclusion:hover .sp-decision-making__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-decision-making__conclusion-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-decision-making__title {
        font-size: 34px;
    }

    .sp-decision-making__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-decision-making__question {
        padding: 14px 16px;
    }

    .sp-decision-making__question-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-decision-making__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-decision-making__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-decision-making__subtitle {
        font-size: 16px;
    }

    .sp-decision-making__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sp-decision-making__question {
        padding: 12px 14px;
        border-radius: 12px;
        gap: 10px;
    }

    .sp-decision-making__question-icon {
        font-size: 20px;
    }

    .sp-decision-making__question-text {
        font-size: 14px;
    }

    .sp-decision-making__conclusion {
        padding: 18px 20px;
        border-left-width: 4px;
    }

    .sp-decision-making__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-decision-making__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-decision-making__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-decision-making__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-decision-making__subtitle {
        font-size: 14px;
    }

    .sp-decision-making__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sp-decision-making__question {
        padding: 10px 12px;
        border-radius: 10px;
        gap: 8px;
    }

    .sp-decision-making__question-icon {
        font-size: 18px;
    }

    .sp-decision-making__question-text {
        font-size: 14px;
    }

    .sp-decision-making__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
    }

    .sp-decision-making__conclusion-content {
        gap: 12px;
    }

    .sp-decision-making__conclusion-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   VISUALTRUST - CYCLIC 2
   ============================================================ */

.sp-visualtrust__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-visualtrust__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-visualtrust__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-visualtrust__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-visualtrust__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-visualtrust__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-visualtrust__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   FRAMEWORK STEPS
   ============================================================ */

.sp-visualtrust__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 10px;
}

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

.sp-visualtrust__step {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-visualtrust__step--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-visualtrust__step--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-visualtrust__step--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-visualtrust__step--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-visualtrust__step--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-visualtrust__step--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-visualtrust__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-visualtrust__step:hover::before {
    left: 100%;
}

/* Step Number */
.sp-visualtrust__step-number {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 36px;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-visualtrust__step:hover .sp-visualtrust__step-number {
    opacity: 1;
    transform: scale(1.15);
}

/* Step Content */
.sp-visualtrust__step-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.sp-visualtrust__step-icon {
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visualtrust__step--1:hover .sp-visualtrust__step-icon { transform: scale(1.2) rotate(-10deg); }
.sp-visualtrust__step--2:hover .sp-visualtrust__step-icon { transform: scale(1.3) rotate(10deg); }
.sp-visualtrust__step--3:hover .sp-visualtrust__step-icon { transform: scale(1.2) translateY(-4px); }
.sp-visualtrust__step--4:hover .sp-visualtrust__step-icon { transform: scale(1.3) rotate(-8deg); }
.sp-visualtrust__step--5:hover .sp-visualtrust__step-icon { transform: scale(1.2) rotate(8deg); }
.sp-visualtrust__step--6:hover .sp-visualtrust__step-icon { transform: scale(1.3) rotate(-5deg) translateY(-4px); }

.sp-visualtrust__step-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-visualtrust__step-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

.sp-visualtrust__step:hover .sp-visualtrust__step-title {
    color: #84c615;
}

.sp-visualtrust__step-desc {
    font-size: 14px;
    color: #a0a8b8;
    line-height: 1.5;
}

/* Step Arrow */
.sp-visualtrust__step-arrow {
    font-size: 20px;
    color: rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    padding: 0 8px;
}

.sp-visualtrust__step:hover .sp-visualtrust__step-arrow {
    color: #84c615;
    transform: translateY(4px);
}

.sp-visualtrust__step--6 .sp-visualtrust__step-arrow {
    display: none;
}

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

@media (max-width: 1024px) {
    .sp-visualtrust__title {
        font-size: 34px;
    }

    .sp-visualtrust__step {
        padding: 14px 18px;
        gap: 14px;
    }

    .sp-visualtrust__step-icon {
        font-size: 24px;
    }

    .sp-visualtrust__step-title {
        font-size: 15px;
    }

    .sp-visualtrust__step-desc {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-visualtrust__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-visualtrust__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-visualtrust__subtitle {
        font-size: 16px;
    }

    .sp-visualtrust__step {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .sp-visualtrust__step-number {
        font-size: 12px;
        min-width: 28px;
    }

    .sp-visualtrust__step-content {
        flex: 1 1 100%;
        gap: 12px;
    }

    .sp-visualtrust__step-icon {
        font-size: 22px;
    }

    .sp-visualtrust__step-title {
        font-size: 14px;
    }

    .sp-visualtrust__step-desc {
        font-size: 12px;
    }

    .sp-visualtrust__step-arrow {
        font-size: 16px;
        width: 100%;
        text-align: center;
    }

    .sp-visualtrust__step--1:hover,
    .sp-visualtrust__step--2:hover,
    .sp-visualtrust__step--3:hover,
    .sp-visualtrust__step--4:hover,
    .sp-visualtrust__step--5:hover,
    .sp-visualtrust__step--6:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-visualtrust__step--1:hover .sp-visualtrust__step-icon,
    .sp-visualtrust__step--2:hover .sp-visualtrust__step-icon,
    .sp-visualtrust__step--3:hover .sp-visualtrust__step-icon,
    .sp-visualtrust__step--4:hover .sp-visualtrust__step-icon,
    .sp-visualtrust__step--5:hover .sp-visualtrust__step-icon,
    .sp-visualtrust__step--6:hover .sp-visualtrust__step-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-visualtrust__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-visualtrust__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-visualtrust__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-visualtrust__subtitle {
        font-size: 14px;
    }

    .sp-visualtrust__step {
        padding: 10px 12px;
        border-radius: 12px;
        gap: 8px;
    }

    .sp-visualtrust__step-number {
        font-size: 10px;
        min-width: 22px;
    }

    .sp-visualtrust__step-content {
        gap: 10px;
    }

    .sp-visualtrust__step-icon {
        font-size: 18px;
    }

    .sp-visualtrust__step-title {
        font-size: 13px;
    }

    .sp-visualtrust__step-desc {
        font-size: 11px;
    }

    .sp-visualtrust__step-arrow {
        font-size: 14px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PSYCHOLOGY TRENDS - CYCLIC 1
   ============================================================ */

.sp-psychology-trends__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-psychology-trends__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-psychology-trends__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-psychology-trends__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-psychology-trends__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-psychology-trends__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-psychology-trends__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-psychology-trends__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-psychology-trends__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-psychology-trends__text--final {
    font-weight: 500;
    color: #000000;
}

/* Comparison */
.sp-psychology-trends__comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-psychology-trends__comparison-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-psychology-trends__comparison-item--trends:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #f59e0b;
    background: #fffbeb;
}

.sp-psychology-trends__comparison-item--psychology:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-psychology-trends__comparison-icon {
    font-size: 24px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__comparison-item:hover .sp-psychology-trends__comparison-icon {
    transform: scale(1.15);
}

.sp-psychology-trends__comparison-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-psychology-trends__comparison-label {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}

.sp-psychology-trends__comparison-item--trends .sp-psychology-trends__comparison-label { color: #f59e0b; }
.sp-psychology-trends__comparison-item--psychology .sp-psychology-trends__comparison-label { color: #84c615; }

.sp-psychology-trends__comparison-desc {
    font-size: 13px;
    color: #4a5268;
}

/* Highlight */
.sp-psychology-trends__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-psychology-trends__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__highlight:hover .sp-psychology-trends__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-psychology-trends__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-psychology-trends__visual {
    display: flex;
    align-items: center;
}

.sp-psychology-trends__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-psychology-trends__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-psychology-trends__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__image-card:hover img {
    transform: scale(1.04);
}

.sp-psychology-trends__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__image-card:hover .sp-psychology-trends__image-overlay {
    padding: 22px 26px;
}

.sp-psychology-trends__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__image-card:hover .sp-psychology-trends__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-psychology-trends__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-psychology-trends__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__image-card:hover .sp-psychology-trends__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-psychology-trends__image-badge span:first-child {
    font-size: 16px;
}

.sp-psychology-trends__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-psychology-trends__image-card:hover .sp-psychology-trends__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-psychology-trends__title {
        font-size: 34px;
    }

    .sp-psychology-trends__grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-psychology-trends__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-psychology-trends__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-psychology-trends__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-psychology-trends__text {
        font-size: 15px;
    }

    .sp-psychology-trends__comparison {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sp-psychology-trends__comparison-item {
        padding: 12px 14px;
    }

    .sp-psychology-trends__highlight {
        padding: 14px 18px;
    }

    .sp-psychology-trends__highlight-text {
        font-size: 15px;
    }

    .sp-psychology-trends__image-card img {
        max-height: 350px;
    }

    .sp-psychology-trends__image-text {
        font-size: 15px;
    }

    .sp-psychology-trends__image-overlay {
        padding: 14px 18px;
    }

    .sp-psychology-trends__image-card:hover .sp-psychology-trends__image-overlay {
        padding: 18px 22px;
    }

    .sp-psychology-trends__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-psychology-trends__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-psychology-trends__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-psychology-trends__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-psychology-trends__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-psychology-trends__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-psychology-trends__comparison-item {
        padding: 10px 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .sp-psychology-trends__comparison-icon {
        font-size: 20px;
    }

    .sp-psychology-trends__comparison-label {
        font-size: 14px;
    }

    .sp-psychology-trends__comparison-desc {
        font-size: 12px;
    }

    .sp-psychology-trends__highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-psychology-trends__highlight-text {
        font-size: 14px;
    }

    .sp-psychology-trends__image-card img {
        max-height: 280px;
    }

    .sp-psychology-trends__image-text {
        font-size: 14px;
    }

    .sp-psychology-trends__image-icon {
        font-size: 14px;
    }

    .sp-psychology-trends__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-psychology-trends__image-card:hover .sp-psychology-trends__image-overlay {
        padding: 16px 18px;
    }

    .sp-psychology-trends__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-psychology-trends__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-psychology-trends__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   VISUAL STORYTELLING - CYCLIC 2
   ============================================================ */

.sp-visual-storytelling__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-visual-storytelling__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-visual-storytelling__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-visual-storytelling__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-visual-storytelling__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-visual-storytelling__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-visual-storytelling__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}


/* ============================================================
   STORY FLOW - VERTICAL STEPS
   ============================================================ */

.sp-visual-storytelling__flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 36px;
    padding: 10px 0;
    position: relative;
}

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

.sp-visual-storytelling__step {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    width: 100%;
    max-width: 600px;
    position: relative;
    overflow: hidden;
}

/* Different hover effects for each step */
.sp-visual-storytelling__step--1:hover {
    transform: translateX(8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-visual-storytelling__step--2:hover {
    transform: translateX(-8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-visual-storytelling__step--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-visual-storytelling__step--4:hover {
    transform: translateX(8px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-visual-storytelling__step--5:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.10);
}

/* Glow overlay */
.sp-visual-storytelling__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-visual-storytelling__step:hover::before {
    left: 100%;
}

/* Step Number */
.sp-visual-storytelling__step-number {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 36px;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-visual-storytelling__step:hover .sp-visual-storytelling__step-number {
    opacity: 1;
    transform: scale(1.15);
}

/* Step Content */
.sp-visual-storytelling__step-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.sp-visual-storytelling__step-icon {
    font-size: 24px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-visual-storytelling__step--1:hover .sp-visual-storytelling__step-icon { transform: scale(1.2) rotate(-10deg); }
.sp-visual-storytelling__step--2:hover .sp-visual-storytelling__step-icon { transform: scale(1.3) rotate(10deg); }
.sp-visual-storytelling__step--3:hover .sp-visual-storytelling__step-icon { transform: scale(1.2) translateY(-4px); }
.sp-visual-storytelling__step--4:hover .sp-visual-storytelling__step-icon { transform: scale(1.3) rotate(-8deg); }
.sp-visual-storytelling__step--5:hover .sp-visual-storytelling__step-icon { transform: scale(1.4) rotate(-10deg) translateY(-4px); }

.sp-visual-storytelling__step-label {
    font-size: 16px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-visual-storytelling__step:hover .sp-visual-storytelling__step-label {
    color: #84c615;
}

/* Step Line */
.sp-visual-storytelling__step-line {
    flex: 1;
    height: 1px;
    background: rgba(132, 198, 21, 0.1);
    max-width: 40px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-storytelling__step:hover .sp-visual-storytelling__step-line {
    background: rgba(132, 198, 21, 0.3);
    transform: scaleX(1.2);
}

/* Step Arrow */
.sp-visual-storytelling__step-arrow {
    font-size: 18px;
    color: rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-visual-storytelling__step:hover .sp-visual-storytelling__step-arrow {
    color: #84c615;
    transform: translateY(4px) scale(1.2);
}

.sp-visual-storytelling__step--5 .sp-visual-storytelling__step-line,
.sp-visual-storytelling__step--5 .sp-visual-storytelling__step-arrow {
    display: none;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-visual-storytelling__conclusion {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-visual-storytelling__conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #84c615;
    opacity: 0;
    transition: all 0.5s ease;
}

.sp-visual-storytelling__conclusion:hover::before {
    opacity: 1;
}

.sp-visual-storytelling__conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.06);
    border-color: rgba(132, 198, 21, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.sp-visual-storytelling__conclusion-content {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sp-visual-storytelling__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 2px;
}

.sp-visual-storytelling__conclusion:hover .sp-visual-storytelling__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-visual-storytelling__conclusion-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-visual-storytelling__conclusion-text {
    font-size: 17px;
    line-height: 1.7;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-visual-storytelling__conclusion-highlight {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-visual-storytelling__title {
        font-size: 34px;
    }

    .sp-visual-storytelling__step {
        padding: 14px 18px;
        max-width: 100%;
    }

    .sp-visual-storytelling__step-label {
        font-size: 15px;
    }

    .sp-visual-storytelling__step-line {
        max-width: 20px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-visual-storytelling__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-visual-storytelling__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-visual-storytelling__subtitle {
        font-size: 16px;
    }

    .sp-visual-storytelling__step {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 12px;
        flex-wrap: wrap;
    }

    .sp-visual-storytelling__step-number {
        font-size: 12px;
        min-width: 28px;
    }

    .sp-visual-storytelling__step-content {
        gap: 10px;
        flex: 1;
        min-width: 140px;
    }

    .sp-visual-storytelling__step-icon {
        font-size: 20px;
    }

    .sp-visual-storytelling__step-label {
        font-size: 14px;
    }

    .sp-visual-storytelling__step-line {
        display: none;
    }

    .sp-visual-storytelling__step-arrow {
        font-size: 16px;
        width: 100%;
        text-align: center;
        padding-top: 4px;
    }

    .sp-visual-storytelling__step--5 .sp-visual-storytelling__step-arrow {
        display: none;
    }

    .sp-visual-storytelling__step--1:hover,
    .sp-visual-storytelling__step--2:hover,
    .sp-visual-storytelling__step--3:hover,
    .sp-visual-storytelling__step--4:hover,
    .sp-visual-storytelling__step--5:hover {
        transform: translateX(4px) scale(1.02);
    }

    .sp-visual-storytelling__step--1:hover .sp-visual-storytelling__step-icon,
    .sp-visual-storytelling__step--2:hover .sp-visual-storytelling__step-icon,
    .sp-visual-storytelling__step--3:hover .sp-visual-storytelling__step-icon,
    .sp-visual-storytelling__step--4:hover .sp-visual-storytelling__step-icon,
    .sp-visual-storytelling__step--5:hover .sp-visual-storytelling__step-icon {
        transform: scale(1.15);
    }

    .sp-visual-storytelling__conclusion {
        padding: 20px 22px;
        border-radius: 14px;
    }

    .sp-visual-storytelling__conclusion-content {
        gap: 14px;
    }

    .sp-visual-storytelling__conclusion-text {
        font-size: 16px;
    }

    .sp-visual-storytelling__conclusion-highlight {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-visual-storytelling__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-visual-storytelling__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-visual-storytelling__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-visual-storytelling__subtitle {
        font-size: 14px;
    }

    .sp-visual-storytelling__step {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 10px;
    }

    .sp-visual-storytelling__step-number {
        font-size: 10px;
        min-width: 22px;
    }

    .sp-visual-storytelling__step-content {
        gap: 8px;
        min-width: 100px;
    }

    .sp-visual-storytelling__step-icon {
        font-size: 18px;
    }

    .sp-visual-storytelling__step-label {
        font-size: 13px;
    }

    .sp-visual-storytelling__step-arrow {
        font-size: 14px;
    }

    .sp-visual-storytelling__conclusion {
        padding: 16px 18px;
        border-radius: 12px;
    }

    .sp-visual-storytelling__conclusion-content {
        gap: 12px;
        flex-direction: column;
    }

    .sp-visual-storytelling__conclusion-icon {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }

    .sp-visual-storytelling__conclusion-text {
        font-size: 15px;
    }

    .sp-visual-storytelling__conclusion-highlight {
        font-size: 16px;
        text-align: center;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SERVICES TRICHY - CYCLIC 1
   ============================================================ */

.sp-services-trichy__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-services-trichy__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-services-trichy__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-services-trichy__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-services-trichy__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-services-trichy__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-services-trichy__subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5268;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

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

.sp-services-trichy__industries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sp-services-trichy__industry {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-services-trichy__industry--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry--2:hover {
    transform: translateY(-8px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry--3:hover {
    transform: translateY(-4px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry-icon {
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__industry:hover .sp-services-trichy__industry-icon {
    transform: scale(1.2) rotate(-5deg);
}

.sp-services-trichy__industry-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    transition: all 0.3s ease;
}

.sp-services-trichy__industry:hover .sp-services-trichy__industry-label {
    color: #84c615;
}

.sp-services-trichy__industry-desc {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

/* ============================================================
   HIGHLIGHT
   ============================================================ */

.sp-services-trichy__highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 14px 20px;
    border-bottom: 3px solid #84c615;
    margin-bottom: 32px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-services-trichy__highlight-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__highlight:hover .sp-services-trichy__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-services-trichy__highlight-text {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    text-align: center;
}

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

.sp-services-trichy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - FEATURES
   ============================================================ */

.sp-services-trichy__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-services-trichy__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__feature:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-services-trichy__feature--highlight {
    background: #e6f5ef;
    border-color: #84c615;
    border-left: 4px solid #84c615;
}

.sp-services-trichy__feature--highlight:hover {
    background: #d4f0e0;
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__feature-icon {
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__feature:hover .sp-services-trichy__feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

.sp-services-trichy__feature--highlight:hover .sp-services-trichy__feature-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-services-trichy__feature-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-services-trichy__feature-title {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
}

.sp-services-trichy__feature-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5268;
    text-align: justify;
}

.sp-services-trichy__feature--highlight .sp-services-trichy__feature-title {
    color: #000000;
}

.sp-services-trichy__feature--highlight .sp-services-trichy__feature-desc {
    color: #1a1f36;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-services-trichy__visual {
    display: flex;
    align-items: center;
}

.sp-services-trichy__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-services-trichy__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-services-trichy__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover img {
    transform: scale(1.04);
}

.sp-services-trichy__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-overlay {
    padding: 22px 26px;
}

.sp-services-trichy__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-services-trichy__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-services-trichy__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-services-trichy__image-badge span:first-child {
    font-size: 16px;
}

.sp-services-trichy__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-services-trichy__title {
        font-size: 34px;
    }

    .sp-services-trichy__industries {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-services-trichy__grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-services-trichy__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-services-trichy__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-services-trichy__subtitle {
        font-size: 15px;
    }

    .sp-services-trichy__industries {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-services-trichy__industry {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .sp-services-trichy__industry-icon {
        font-size: 28px;
        margin-bottom: 6px;
    }

    .sp-services-trichy__industry-label {
        font-size: 14px;
    }

    .sp-services-trichy__industry-desc {
        font-size: 12px;
    }

    .sp-services-trichy__highlight {
        padding: 12px 16px;
    }

    .sp-services-trichy__highlight-text {
        font-size: 16px;
    }

    .sp-services-trichy__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-services-trichy__feature {
        padding: 14px 16px;
        gap: 14px;
    }

    .sp-services-trichy__feature-icon {
        font-size: 24px;
    }

    .sp-services-trichy__feature-title {
        font-size: 16px;
    }

    .sp-services-trichy__feature-desc {
        font-size: 14px;
    }

    .sp-services-trichy__image-card img {
        max-height: 350px;
    }

    .sp-services-trichy__image-text {
        font-size: 15px;
    }

    .sp-services-trichy__image-overlay {
        padding: 14px 18px;
    }

    .sp-services-trichy__image-card:hover .sp-services-trichy__image-overlay {
        padding: 18px 22px;
    }

    .sp-services-trichy__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-services-trichy__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-services-trichy__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-services-trichy__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-services-trichy__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-services-trichy__subtitle {
        font-size: 14px;
    }

    .sp-services-trichy__industries {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-services-trichy__industry {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-services-trichy__industry-icon {
        font-size: 24px;
        margin-bottom: 4px;
    }

    .sp-services-trichy__industry-label {
        font-size: 13px;
    }

    .sp-services-trichy__industry-desc {
        font-size: 11px;
    }

    .sp-services-trichy__highlight {
        padding: 10px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .sp-services-trichy__highlight-text {
        font-size: 15px;
    }

    .sp-services-trichy__feature {
        padding: 12px 14px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-services-trichy__feature-icon {
        font-size: 22px;
    }

    .sp-services-trichy__feature-title {
        font-size: 15px;
    }

    .sp-services-trichy__feature-desc {
        font-size: 14px;
    }

    .sp-services-trichy__image-card img {
        max-height: 280px;
    }

    .sp-services-trichy__image-text {
        font-size: 14px;
    }

    .sp-services-trichy__image-icon {
        font-size: 14px;
    }

    .sp-services-trichy__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-services-trichy__image-card:hover .sp-services-trichy__image-overlay {
        padding: 16px 18px;
    }

    .sp-services-trichy__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-services-trichy__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-services-trichy__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SERVICES TRICHY - CYCLIC 2
   ============================================================ */

.sp-services-trichy__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-services-trichy__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-services-trichy__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-services-trichy__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-services-trichy__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: black;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-services-trichy__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-services-trichy__subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #a0a8b8;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

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

.sp-services-trichy__industries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sp-services-trichy__industry {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-services-trichy__industry--1:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry--2:hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry--3:hover {
    transform: translateY(-10px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

.sp-services-trichy__industry--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-services-trichy__industry::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-services-trichy__industry:hover::before {
    left: 100%;
}

/* Bottom glow bar */
.sp-services-trichy__industry::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-services-trichy__industry:hover::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.3);
}

.sp-services-trichy__industry-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__industry:hover .sp-services-trichy__industry-icon-wrapper {
    background: #84c615;
    border-color: #84c615;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.2);
}

.sp-services-trichy__industry-icon {
    font-size: 28px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__industry:hover .sp-services-trichy__industry-icon {
    transform: scale(1.1);
}

.sp-services-trichy__industry-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

.sp-services-trichy__industry:hover .sp-services-trichy__industry-label {
    color: #84c615;
}

.sp-services-trichy__industry-desc {
    display: block;
    font-size: 13px;
    color: #a0a8b8;
    margin-top: 4px;
    line-height: 1.4;
}

/* ============================================================
   HIGHLIGHT
   ============================================================ */

.sp-services-trichy__highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    margin-bottom: 32px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-services-trichy__highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.06), transparent);
    transition: left 0.6s ease;
}

.sp-services-trichy__highlight:hover::before {
    left: 100%;
}

.sp-services-trichy__highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.06);
    background: rgba(132, 198, 21, 0.12);
}

.sp-services-trichy__highlight-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__highlight:hover .sp-services-trichy__highlight-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-services-trichy__highlight-text {
    font-size: 18px;
    font-weight: 600;
    color: black;
    margin: 0;
    text-align: center;
}

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

.sp-services-trichy__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
   LEFT COLUMN - FEATURES
   ============================================================ */

.sp-services-trichy__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-services-trichy__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-services-trichy__feature--1:hover {
    transform: translateX(8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-services-trichy__feature--2:hover {
    transform: translateX(-8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-services-trichy__feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-services-trichy__feature:hover::before {
    left: 100%;
}

/* Left accent border */
.sp-services-trichy__feature::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-services-trichy__feature:hover::after {
    opacity: 1;
}

.sp-services-trichy__feature-icon {
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__feature--1:hover .sp-services-trichy__feature-icon { transform: scale(1.2) rotate(-10deg); }
.sp-services-trichy__feature--2:hover .sp-services-trichy__feature-icon { transform: scale(1.2) rotate(10deg); }

.sp-services-trichy__feature-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-services-trichy__feature-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

.sp-services-trichy__feature:hover .sp-services-trichy__feature-title {
    color: #84c615;
}

.sp-services-trichy__feature-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #e6e8ec;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-services-trichy__visual {
    display: flex;
    align-items: center;
}

.sp-services-trichy__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.sp-services-trichy__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-services-trichy__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover img {
    transform: scale(1.04);
}

.sp-services-trichy__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-overlay {
    padding: 22px 26px;
}

.sp-services-trichy__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-services-trichy__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-services-trichy__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-services-trichy__image-badge span:first-child {
    font-size: 16px;
}

.sp-services-trichy__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-services-trichy__image-card:hover .sp-services-trichy__image-accent {
    opacity: 0.08;
}

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

@media (max-width: 1024px) {
    .sp-services-trichy__title {
        font-size: 34px;
    }

    .sp-services-trichy__industries {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-services-trichy__grid {
        gap: 40px;
    }

    .sp-services-trichy__industry-icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .sp-services-trichy__industry-icon {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-services-trichy__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-services-trichy__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-services-trichy__subtitle {
        font-size: 15px;
    }

    .sp-services-trichy__industries {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sp-services-trichy__industry {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .sp-services-trichy__industry-icon-wrapper {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
    }

    .sp-services-trichy__industry-icon {
        font-size: 22px;
    }

    .sp-services-trichy__industry-label {
        font-size: 14px;
    }

    .sp-services-trichy__industry-desc {
        font-size: 12px;
    }

    .sp-services-trichy__highlight {
        padding: 12px 16px;
    }

    .sp-services-trichy__highlight-text {
        font-size: 16px;
    }

    .sp-services-trichy__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-services-trichy__feature {
        padding: 16px 18px;
        gap: 14px;
    }

    .sp-services-trichy__feature-icon {
        font-size: 24px;
    }

    .sp-services-trichy__feature-title {
        font-size: 16px;
    }

    .sp-services-trichy__feature-desc {
        font-size: 14px;
    }

    .sp-services-trichy__image-card img {
        max-height: 350px;
    }

    .sp-services-trichy__image-text {
        font-size: 15px;
    }

    .sp-services-trichy__image-overlay {
        padding: 14px 18px;
    }

    .sp-services-trichy__image-card:hover .sp-services-trichy__image-overlay {
        padding: 18px 22px;
    }

    .sp-services-trichy__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-services-trichy__image-accent {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-services-trichy__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-services-trichy__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-services-trichy__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-services-trichy__subtitle {
        font-size: 14px;
    }

    .sp-services-trichy__industries {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-services-trichy__industry {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .sp-services-trichy__industry-icon-wrapper {
        width: 38px;
        height: 38px;
        margin-bottom: 6px;
    }

    .sp-services-trichy__industry-icon {
        font-size: 18px;
    }

    .sp-services-trichy__industry-label {
        font-size: 13px;
    }

    .sp-services-trichy__industry-desc {
        font-size: 11px;
    }

    .sp-services-trichy__highlight {
        padding: 10px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .sp-services-trichy__highlight-text {
        font-size: 15px;
    }

    .sp-services-trichy__feature {
        padding: 14px 14px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-services-trichy__feature-icon {
        font-size: 22px;
    }

    .sp-services-trichy__feature-title {
        font-size: 15px;
    }

    .sp-services-trichy__feature-desc {
        font-size: 14px;
    }

    .sp-services-trichy__image-card img {
        max-height: 280px;
    }

    .sp-services-trichy__image-text {
        font-size: 14px;
    }

    .sp-services-trichy__image-icon {
        font-size: 14px;
    }

    .sp-services-trichy__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-services-trichy__image-card:hover .sp-services-trichy__image-overlay {
        padding: 16px 18px;
    }

    .sp-services-trichy__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-services-trichy__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-services-trichy__image-accent {
        width: 50px;
        height: 50px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   CUSTOM DESIGN - CYCLIC 1
   ============================================================ */

.sp-custom-design__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-custom-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-custom-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-custom-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-custom-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-custom-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-custom-design__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-custom-design__elements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.sp-custom-design__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-custom-design__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__element-icon {
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__element:hover .sp-custom-design__element-icon {
    transform: scale(1.15);
}

.sp-custom-design__element-label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-custom-design__element:hover .sp-custom-design__element-label {
    color: #84c615;
}

/* ============================================================
   HIGHLIGHT
   ============================================================ */

.sp-custom-design__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    margin-bottom: 32px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-custom-design__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__highlight:hover .sp-custom-design__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-custom-design__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

.sp-custom-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 32px;
}

/* ============================================================
   FEATURES - 2 COLUMN GRID
   ============================================================ */

.sp-custom-design__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sp-custom-design__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-custom-design__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-design__feature-icon {
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__feature:hover .sp-custom-design__feature-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-custom-design__feature-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-custom-design__feature:hover .sp-custom-design__feature-label {
    color: #84c615;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-custom-design__visual {
    display: flex;
    align-items: center;
}

.sp-custom-design__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-custom-design__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-custom-design__image-card img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__image-card:hover img {
    transform: scale(1.04);
}

.sp-custom-design__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__image-card:hover .sp-custom-design__image-overlay {
    padding: 22px 26px;
}

.sp-custom-design__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__image-card:hover .sp-custom-design__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-custom-design__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-custom-design__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__image-card:hover .sp-custom-design__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-custom-design__image-badge span:first-child {
    font-size: 14px;
    color: #84c615;
}

.sp-custom-design__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__image-card:hover .sp-custom-design__image-accent {
    opacity: 0.08;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-custom-design__conclusion {
    background: #e6f5ef;
    border-radius: 16px;
    padding: 20px 26px;
    border-left: 5px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-custom-design__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-custom-design__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-design__conclusion:hover .sp-custom-design__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-custom-design__conclusion-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-custom-design__title {
        font-size: 34px;
    }

    .sp-custom-design__elements {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-custom-design__grid {
        gap: 40px;
    }

    .sp-custom-design__features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-custom-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-custom-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-custom-design__subtitle {
        font-size: 16px;
    }

    .sp-custom-design__elements {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-custom-design__element {
        padding: 8px 12px;
    }

    .sp-custom-design__element-label {
        font-size: 13px;
    }

    .sp-custom-design__highlight {
        padding: 14px 18px;
    }

    .sp-custom-design__highlight-text {
        font-size: 15px;
    }

    .sp-custom-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-custom-design__features {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-custom-design__feature {
        padding: 8px 12px;
    }

    .sp-custom-design__feature-label {
        font-size: 12px;
    }

    .sp-custom-design__image-card img {
        max-height: 350px;
    }

    .sp-custom-design__image-text {
        font-size: 15px;
    }

    .sp-custom-design__image-overlay {
        padding: 14px 18px;
    }

    .sp-custom-design__image-card:hover .sp-custom-design__image-overlay {
        padding: 18px 22px;
    }

    .sp-custom-design__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-custom-design__image-accent {
        width: 60px;
        height: 60px;
    }

    .sp-custom-design__conclusion {
        padding: 16px 20px;
        border-left-width: 4px;
    }

    .sp-custom-design__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-custom-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-custom-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-custom-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-custom-design__subtitle {
        font-size: 14px;
    }

    .sp-custom-design__elements {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-custom-design__element {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-custom-design__element-icon {
        font-size: 16px;
    }

    .sp-custom-design__element-label {
        font-size: 12px;
    }

    .sp-custom-design__highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-custom-design__highlight-text {
        font-size: 14px;
    }

    .sp-custom-design__features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-custom-design__feature {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-custom-design__feature-icon {
        font-size: 16px;
    }

    .sp-custom-design__feature-label {
        font-size: 11px;
    }

    .sp-custom-design__image-card img {
        max-height: 280px;
    }

    .sp-custom-design__image-text {
        font-size: 14px;
    }

    .sp-custom-design__image-icon {
        font-size: 14px;
    }

    .sp-custom-design__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-custom-design__image-card:hover .sp-custom-design__image-overlay {
        padding: 16px 18px;
    }

    .sp-custom-design__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-custom-design__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-custom-design__image-accent {
        width: 50px;
        height: 50px;
    }

    .sp-custom-design__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
    }

    .sp-custom-design__conclusion-content {
        gap: 12px;
    }

    .sp-custom-design__conclusion-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}
/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   CORPORATE DESIGN - CYCLIC 2
   ============================================================ */

.sp-corporate-design__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-corporate-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-corporate-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-corporate-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-corporate-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-corporate-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-corporate-design__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #e6e8ec;
    max-width: 700px;
    margin: 0 auto 8px auto;
    text-align: center;
}

.sp-corporate-design__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   SOLUTIONS GRID - 5 COLUMNS
   ============================================================ */

.sp-corporate-design__solutions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sp-corporate-design__solution {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-corporate-design__solution--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--6:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--7:hover {
    transform: translateY(-6px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--8:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--9:hover {
    transform: translateY(-4px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__solution--10:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-corporate-design__solution::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-corporate-design__solution:hover::before {
    left: 100%;
}

/* Bottom glow bar */
.sp-corporate-design__solution::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-corporate-design__solution:hover::after {
    opacity: 1;
}

.sp-corporate-design__solution-icon {
    font-size: 24px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-corporate-design__solution:hover .sp-corporate-design__solution-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-corporate-design__solution-label {
    font-size: 12px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-corporate-design__solution:hover .sp-corporate-design__solution-label {
    color: #84c615;
}

/* ============================================================
   IDEAL FOR
   ============================================================ */

.sp-corporate-design__ideal {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-corporate-design__ideal:hover {
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-corporate-design__ideal-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    text-align: center;
}

.sp-corporate-design__ideal-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.sp-corporate-design__tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: #e6e8ec;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-corporate-design__tag:hover {
    border-color: #84c615;
    color: #84c615;
    background: rgba(132, 198, 21, 0.06);
    transform: translateY(-2px);
}

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

@media (max-width: 1024px) {
    .sp-corporate-design__title {
        font-size: 34px;
    }

    .sp-corporate-design__solutions {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .sp-corporate-design__solution {
        padding: 14px 10px;
    }

    .sp-corporate-design__solution-label {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-corporate-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-corporate-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-corporate-design__subtitle {
        font-size: 17px;
    }

    .sp-corporate-design__desc {
        font-size: 15px;
    }

    .sp-corporate-design__solutions {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sp-corporate-design__solution {
        padding: 14px 12px;
    }

    .sp-corporate-design__solution-icon {
        font-size: 22px;
    }

    .sp-corporate-design__solution-label {
        font-size: 12px;
    }

    .sp-corporate-design__ideal {
        padding: 16px 18px;
    }

    .sp-corporate-design__ideal-label {
        font-size: 14px;
    }

    .sp-corporate-design__tag {
        font-size: 12px;
        padding: 5px 14px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-corporate-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-corporate-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-corporate-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-corporate-design__subtitle {
        font-size: 15px;
    }

    .sp-corporate-design__desc {
        font-size: 14px;
    }

    .sp-corporate-design__solutions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-corporate-design__solution {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-corporate-design__solution-icon {
        font-size: 20px;
    }

    .sp-corporate-design__solution-label {
        font-size: 11px;
    }

    .sp-corporate-design__ideal {
        padding: 14px 14px;
        border-radius: 12px;
    }

    .sp-corporate-design__ideal-label {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .sp-corporate-design__tag {
        font-size: 11px;
        padding: 4px 12px;
    }

    .sp-corporate-design__ideal-tags {
        gap: 6px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SMALL BUSINESS - CYCLIC 1
   ============================================================ */

.sp-small-business__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-small-business__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-small-business__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-small-business__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-small-business__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-small-business__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-small-business__subtitle {
    font-size: 17px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 750px;
    margin: 0 auto;
    text-align: justify;
}

/* ============================================================
   FOCUS AREAS
   ============================================================ */

.sp-small-business__focus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sp-small-business__focus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 12px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-small-business__focus-item--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-small-business__focus-item--2:hover {
    transform: translateY(-4px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-small-business__focus-item--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-small-business__focus-item--4:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-small-business__focus-item--5:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-small-business__focus-item--6:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-small-business__focus-item--7:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-small-business__focus-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-small-business__focus-item:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-small-business__focus-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-small-business__focus-item:hover::after {
    opacity: 1;
}

.sp-small-business__focus-icon {
    font-size: 28px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-small-business__focus-item:hover .sp-small-business__focus-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-small-business__focus-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-small-business__focus-item:hover .sp-small-business__focus-label {
    color: #84c615;
}

/* ============================================================
   SUITABLE FOR
   ============================================================ */

.sp-small-business__suitable {
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px 24px;
    border: 2px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-small-business__suitable:hover {
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-small-business__suitable-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
    text-align: center;
}

.sp-small-business__suitable-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.sp-small-business__tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: #1a1f36;
    background: #ffffff;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-small-business__tag:hover {
    border-color: #84c615;
    color: #84c615;
    background: #e6f5ef;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

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

@media (max-width: 1024px) {
    .sp-small-business__title {
        font-size: 34px;
    }

    .sp-small-business__focus {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-small-business__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-small-business__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-small-business__subtitle {
        font-size: 15px;
    }

    .sp-small-business__focus {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sp-small-business__focus-item {
        padding: 14px 10px;
    }

    .sp-small-business__focus-icon {
        font-size: 24px;
    }

    .sp-small-business__focus-label {
        font-size: 12px;
    }

    .sp-small-business__suitable {
        padding: 16px 18px;
    }

    .sp-small-business__suitable-label {
        font-size: 14px;
    }

    .sp-small-business__tag {
        font-size: 12px;
        padding: 5px 14px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-small-business__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-small-business__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-small-business__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-small-business__subtitle {
        font-size: 14px;
    }

    .sp-small-business__focus {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-small-business__focus-item {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-small-business__focus-icon {
        font-size: 22px;
    }

    .sp-small-business__focus-label {
        font-size: 12px;
    }

    .sp-small-business__suitable {
        padding: 14px 14px;
        border-radius: 12px;
    }

    .sp-small-business__suitable-label {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .sp-small-business__tag {
        font-size: 11px;
        padding: 4px 12px;
    }

    .sp-small-business__suitable-tags {
        gap: 6px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   RESPONSIVE DESIGN - CYCLIC 2
   ============================================================ */

.sp-responsive-design__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-responsive-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-responsive-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-responsive-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-responsive-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-responsive-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-responsive-design__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #e6e8ec;
    max-width: 750px;
    margin: 0 auto 8px auto;
    text-align: center;
}

.sp-responsive-design__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   FEATURES - 4 COLUMNS
   ============================================================ */

.sp-responsive-design__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sp-responsive-design__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-responsive-design__feature--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--6:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--7:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__feature--8:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-responsive-design__feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-responsive-design__feature:hover::before {
    left: 100%;
}

/* Bottom glow bar */
.sp-responsive-design__feature::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-responsive-design__feature:hover::after {
    opacity: 1;
}

.sp-responsive-design__feature-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-responsive-design__feature:hover .sp-responsive-design__feature-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-responsive-design__feature-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-responsive-design__feature:hover .sp-responsive-design__feature-label {
    color: #84c615;
}

/* ============================================================
   BENEFITS - FLEX WRAP
   ============================================================ */

.sp-responsive-design__benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-responsive-design__benefits:hover {
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-responsive-design__benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #e6e8ec;
    padding: 4px 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-responsive-design__benefit:hover {
    color: #84c615;
    transform: translateY(-2px);
}

.sp-responsive-design__benefit-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

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

@media (max-width: 1024px) {
    .sp-responsive-design__title {
        font-size: 34px;
    }

    .sp-responsive-design__features {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-responsive-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-responsive-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-responsive-design__subtitle {
        font-size: 16px;
    }

    .sp-responsive-design__desc {
        font-size: 15px;
    }

    .sp-responsive-design__features {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sp-responsive-design__feature {
        padding: 14px 10px;
    }

    .sp-responsive-design__feature-icon {
        font-size: 22px;
    }

    .sp-responsive-design__feature-label {
        font-size: 12px;
    }

    .sp-responsive-design__benefits {
        padding: 14px 18px;
        gap: 8px;
    }

    .sp-responsive-design__benefit {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-responsive-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-responsive-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-responsive-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-responsive-design__subtitle {
        font-size: 15px;
    }

    .sp-responsive-design__desc {
        font-size: 14px;
    }

    .sp-responsive-design__features {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-responsive-design__feature {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-responsive-design__feature-icon {
        font-size: 20px;
    }

    .sp-responsive-design__feature-label {
        font-size: 11px;
    }

    .sp-responsive-design__benefits {
        padding: 12px 14px;
        gap: 6px;
        flex-direction: column;
        align-items: center;
    }

    .sp-responsive-design__benefit {
        font-size: 13px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   MOBILE-FIRST - CYCLIC 1
   ============================================================ */

.sp-mobile-first__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-mobile-first__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-mobile-first__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-mobile-first__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-mobile-first__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-mobile-first__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-mobile-first__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 6px 0;
    text-align: center;
}

.sp-mobile-first__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   FOCUS - 4 COLUMNS
   ============================================================ */

.sp-mobile-first__focus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sp-mobile-first__focus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 12px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-mobile-first__focus-item--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--6:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--7:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-mobile-first__focus-item--8:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-mobile-first__focus-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-mobile-first__focus-item:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-mobile-first__focus-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-mobile-first__focus-item:hover::after {
    opacity: 1;
}

.sp-mobile-first__focus-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mobile-first__focus-item:hover .sp-mobile-first__focus-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-mobile-first__focus-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-mobile-first__focus-item:hover .sp-mobile-first__focus-label {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-mobile-first__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 24px;
    border-left: 5px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mobile-first__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-mobile-first__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-mobile-first__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mobile-first__conclusion:hover .sp-mobile-first__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-mobile-first__conclusion-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-mobile-first__title {
        font-size: 34px;
    }

    .sp-mobile-first__focus {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-mobile-first__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-mobile-first__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-mobile-first__subtitle {
        font-size: 17px;
    }

    .sp-mobile-first__desc {
        font-size: 15px;
    }

    .sp-mobile-first__focus {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sp-mobile-first__focus-item {
        padding: 14px 10px;
    }

    .sp-mobile-first__focus-icon {
        font-size: 22px;
    }

    .sp-mobile-first__focus-label {
        font-size: 12px;
    }

    .sp-mobile-first__conclusion {
        padding: 16px 20px;
        border-left-width: 4px;
    }

    .sp-mobile-first__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-mobile-first__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-mobile-first__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-mobile-first__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-mobile-first__subtitle {
        font-size: 15px;
    }

    .sp-mobile-first__desc {
        font-size: 14px;
    }

    .sp-mobile-first__focus {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-mobile-first__focus-item {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-mobile-first__focus-icon {
        font-size: 20px;
    }

    .sp-mobile-first__focus-label {
        font-size: 12px;
    }

    .sp-mobile-first__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
    }

    .sp-mobile-first__conclusion-content {
        gap: 12px;
    }

    .sp-mobile-first__conclusion-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}



/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   UI DESIGN - CYCLIC 2
   ============================================================ */

.sp-ui-design__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-ui-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-ui-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-ui-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-ui-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-ui-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-ui-design__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #e6e8ec;
    max-width: 750px;
    margin: 0 auto 6px auto;
    text-align: center;
}

.sp-ui-design__desc {
    font-size: 17px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   UI ELEMENTS - 3 COLUMNS
   ============================================================ */

.sp-ui-design__elements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.sp-ui-design__element {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-ui-design__element--1:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--2:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__element--9:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-ui-design__element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-ui-design__element:hover::before {
    left: 100%;
}

/* Left accent border */
.sp-ui-design__element::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-ui-design__element:hover::after {
    opacity: 1;
}

.sp-ui-design__element-icon {
    font-size: 24px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ui-design__element:hover .sp-ui-design__element-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-ui-design__element-label {
    font-size: 14px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-ui-design__element:hover .sp-ui-design__element-label {
    color: #84c615;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-ui-design__conclusion {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ui-design__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ui-design__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-ui-design__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ui-design__conclusion:hover .sp-ui-design__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-ui-design__conclusion-text {
    font-size: 18px;
    line-height: 1.7;
    color: #e6e8ec;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-ui-design__title {
        font-size: 34px;
    }

    .sp-ui-design__elements {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-ui-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-ui-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-ui-design__subtitle {
        font-size: 17px;
    }

    .sp-ui-design__desc {
        font-size: 15px;
    }

    .sp-ui-design__elements {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sp-ui-design__element {
        padding: 12px 14px;
    }

    .sp-ui-design__element-icon {
        font-size: 22px;
    }

    .sp-ui-design__element-label {
        font-size: 13px;
    }

    .sp-ui-design__conclusion {
        padding: 16px 20px;
    }

    .sp-ui-design__conclusion-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-ui-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-ui-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-ui-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-ui-design__subtitle {
        font-size: 15px;
    }

    .sp-ui-design__desc {
        font-size: 14px;
    }

    .sp-ui-design__elements {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-ui-design__element {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 10px;
    }

    .sp-ui-design__element-icon {
        font-size: 20px;
    }

    .sp-ui-design__element-label {
        font-size: 13px;
    }

    .sp-ui-design__conclusion {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .sp-ui-design__conclusion-content {
        gap: 12px;
    }

    .sp-ui-design__conclusion-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}








/* 30 Website Design Mistakes Businesses Should Avoid */


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   DESIGN MISTAKES - CYCLIC 1
   ============================================================ */

.sp-design-mistakes__wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

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

.sp-design-mistakes__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-design-mistakes__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-design-mistakes__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-design-mistakes__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-design-mistakes__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-design-mistakes__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-design-mistakes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

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

.sp-design-mistakes__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-design-mistakes__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-design-mistakes__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--3:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--4:hover {
    transform: translateX(6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--5:hover {
    transform: translateX(-6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--6:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--9:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--10:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--11:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--12:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--13:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--14:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--15:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--16:hover {
    transform: translateX(6px) translateY(-5px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--17:hover {
    transform: translateX(-6px) translateY(-5px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--18:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--19:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--20:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--21:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--22:hover {
    transform: translateX(6px) translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--23:hover {
    transform: translateX(-6px) translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--24:hover {
    transform: translateY(-7px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--25:hover {
    transform: translateX(6px) translateY(-7px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--26:hover {
    transform: translateX(-6px) translateY(-7px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--27:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--28:hover {
    transform: translateX(6px) translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--29:hover {
    transform: translateX(-6px) translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__item--30:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-design-mistakes__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-design-mistakes__item:hover::before {
    left: 100%;
}

/* Left accent bar */
.sp-design-mistakes__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-design-mistakes__item:hover::after {
    opacity: 1;
}

.sp-design-mistakes__number {
    font-size: 13px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 30px;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sp-design-mistakes__item:hover .sp-design-mistakes__number {
    opacity: 1;
    transform: scale(1.15);
}

.sp-design-mistakes__item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sp-design-mistakes__item-title {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    transition: all 0.3s ease;
}

.sp-design-mistakes__item:hover .sp-design-mistakes__item-title {
    color: #84c615;
}

.sp-design-mistakes__item-desc {
    font-size: 13px;
    color: #4a5268;
    line-height: 1.4;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-design-mistakes__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-design-mistakes__image-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #eef2f6;
}

.sp-design-mistakes__image-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
    border-color: #84c615;
}

.sp-design-mistakes__image-card img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__image-card:hover img {
    transform: scale(1.04);
}

.sp-design-mistakes__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__image-card:hover .sp-design-mistakes__image-overlay {
    padding: 22px 26px;
}

.sp-design-mistakes__image-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__image-card:hover .sp-design-mistakes__image-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-design-mistakes__image-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.sp-design-mistakes__image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__image-card:hover .sp-design-mistakes__image-badge {
    opacity: 1;
    transform: translateY(0);
}

.sp-design-mistakes__image-badge span:first-child {
    color: #84c615;
    font-size: 16px;
}

.sp-design-mistakes__image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__image-card:hover .sp-design-mistakes__image-accent {
    opacity: 0.08;
}

/* Stat */
.sp-design-mistakes__stat {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-design-mistakes__stat:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-design-mistakes__stat-number {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
}

.sp-design-mistakes__stat-label {
    display: block;
    font-size: 14px;
    color: #4a5268;
    margin-top: 4px;
}

/* ============================================================
   CONCLUSION
   ============================================================ */

.sp-design-mistakes__conclusion {
    background: #e6f5ef;
    border-radius: 16px;
    padding: 22px 28px;
    border-left: 5px solid #84c615;
    margin-top: 36px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-design-mistakes__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-design-mistakes__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-design-mistakes__conclusion:hover .sp-design-mistakes__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-design-mistakes__conclusion-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-design-mistakes__title {
        font-size: 34px;
    }

    .sp-design-mistakes__grid {
        gap: 40px;
    }

    .sp-design-mistakes__item {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-design-mistakes__item-title {
        font-size: 13px;
    }

    .sp-design-mistakes__item-desc {
        font-size: 12px;
    }

    .sp-design-mistakes__number {
        font-size: 12px;
        min-width: 26px;
    }

    .sp-design-mistakes__stat-number {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-design-mistakes__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-design-mistakes__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-design-mistakes__subtitle {
        font-size: 16px;
    }

    .sp-design-mistakes__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-design-mistakes__list {
        max-height: 600px;
        overflow-y: auto;
        padding-right: 8px;
    }

    .sp-design-mistakes__list::-webkit-scrollbar {
        width: 4px;
    }

    .sp-design-mistakes__list::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .sp-design-mistakes__list::-webkit-scrollbar-thumb {
        background: #84c615;
        border-radius: 4px;
    }

    .sp-design-mistakes__item {
        padding: 8px 12px;
        gap: 8px;
        border-radius: 10px;
    }

    .sp-design-mistakes__item-title {
        font-size: 13px;
    }

    .sp-design-mistakes__item-desc {
        font-size: 12px;
    }

    .sp-design-mistakes__number {
        font-size: 11px;
        min-width: 22px;
    }

    .sp-design-mistakes__image-card img {
        max-height: 300px;
    }

    .sp-design-mistakes__image-text {
        font-size: 15px;
    }

    .sp-design-mistakes__image-overlay {
        padding: 14px 18px;
    }

    .sp-design-mistakes__image-card:hover .sp-design-mistakes__image-overlay {
        padding: 18px 22px;
    }

    .sp-design-mistakes__image-badge {
        top: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .sp-design-mistakes__image-accent {
        width: 60px;
        height: 60px;
    }

    .sp-design-mistakes__stat {
        padding: 14px 16px;
    }

    .sp-design-mistakes__stat-number {
        font-size: 28px;
    }

    .sp-design-mistakes__stat-label {
        font-size: 13px;
    }

    .sp-design-mistakes__conclusion {
        padding: 18px 20px;
        border-left-width: 4px;
        margin-top: 28px;
    }

    .sp-design-mistakes__conclusion-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-design-mistakes__item--1:hover,
    .sp-design-mistakes__item--2:hover,
    .sp-design-mistakes__item--3:hover,
    .sp-design-mistakes__item--4:hover,
    .sp-design-mistakes__item--5:hover,
    .sp-design-mistakes__item--6:hover,
    .sp-design-mistakes__item--7:hover,
    .sp-design-mistakes__item--8:hover,
    .sp-design-mistakes__item--9:hover,
    .sp-design-mistakes__item--10:hover,
    .sp-design-mistakes__item--11:hover,
    .sp-design-mistakes__item--12:hover,
    .sp-design-mistakes__item--13:hover,
    .sp-design-mistakes__item--14:hover,
    .sp-design-mistakes__item--15:hover,
    .sp-design-mistakes__item--16:hover,
    .sp-design-mistakes__item--17:hover,
    .sp-design-mistakes__item--18:hover,
    .sp-design-mistakes__item--19:hover,
    .sp-design-mistakes__item--20:hover,
    .sp-design-mistakes__item--21:hover,
    .sp-design-mistakes__item--22:hover,
    .sp-design-mistakes__item--23:hover,
    .sp-design-mistakes__item--24:hover,
    .sp-design-mistakes__item--25:hover,
    .sp-design-mistakes__item--26:hover,
    .sp-design-mistakes__item--27:hover,
    .sp-design-mistakes__item--28:hover,
    .sp-design-mistakes__item--29:hover,
    .sp-design-mistakes__item--30:hover {
        transform: translateX(4px) scale(1.01);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-design-mistakes__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-design-mistakes__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-design-mistakes__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-design-mistakes__subtitle {
        font-size: 14px;
    }

    .sp-design-mistakes__list {
        max-height: 500px;
    }

    .sp-design-mistakes__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-design-mistakes__item-title {
        font-size: 12px;
    }

    .sp-design-mistakes__item-desc {
        font-size: 11px;
    }

    .sp-design-mistakes__number {
        font-size: 10px;
        min-width: 18px;
    }

    .sp-design-mistakes__image-card img {
        max-height: 220px;
    }

    .sp-design-mistakes__image-text {
        font-size: 14px;
    }

    .sp-design-mistakes__image-icon {
        font-size: 14px;
    }

    .sp-design-mistakes__image-overlay {
        padding: 12px 16px;
        gap: 8px;
    }

    .sp-design-mistakes__image-card:hover .sp-design-mistakes__image-overlay {
        padding: 16px 18px;
    }

    .sp-design-mistakes__image-badge {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 30px;
    }

    .sp-design-mistakes__image-badge span:first-child {
        font-size: 12px;
    }

    .sp-design-mistakes__image-accent {
        width: 50px;
        height: 50px;
    }

    .sp-design-mistakes__stat-number {
        font-size: 24px;
    }

    .sp-design-mistakes__stat-label {
        font-size: 12px;
    }

    .sp-design-mistakes__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
        margin-top: 20px;
    }

    .sp-design-mistakes__conclusion-content {
        gap: 12px;
    }

    .sp-design-mistakes__conclusion-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}









/* Book Your Free Web Design Consultation */


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   CONSULTATION - CYCLIC 1
   ============================================================ */

.sp-consultation__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-consultation__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-consultation__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-consultation__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-consultation__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-consultation__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-consultation__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   BENEFITS GRID - 4 COLUMNS
   ============================================================ */

.sp-consultation__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.sp-consultation__benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px 16px;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-consultation__benefit--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--6:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--7:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-consultation__benefit--8:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-consultation__benefit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-consultation__benefit:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-consultation__benefit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-consultation__benefit:hover::after {
    opacity: 1;
}

.sp-consultation__benefit-icon {
    font-size: 22px;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-consultation__benefit:hover .sp-consultation__benefit-icon {
    transform: scale(1.2) rotate(90deg);
}

.sp-consultation__benefit-text {
    font-size: 14px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-consultation__benefit:hover .sp-consultation__benefit-text {
    color: #84c615;
}

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

.sp-consultation__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 36px;
}

.sp-consultation__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 2px solid transparent;
    min-height: 56px;
}

.sp-consultation__btn--primary {
    background: #84c615;
    color: #ffffff;
    border-color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-consultation__btn--primary:hover {
    background: #6aaf10;
    border-color: #6aaf10;
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(132, 198, 21, 0.35);
}

.sp-consultation__btn--secondary {
    background: transparent;
    color: #000000;
    border-color: #d1d5db;
}

.sp-consultation__btn--secondary:hover {
    border-color: #84c615;
    color: #84c615;
    background: #e6f5ef;
    transform: translateY(-4px);
}

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

.sp-consultation__brand {
    background: #e6f5ef;
    border-radius: 16px;
    padding: 24px 32px;
    border-left: 5px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-consultation__brand:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-consultation__brand-content {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.sp-consultation__brand-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-consultation__brand:hover .sp-consultation__brand-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-consultation__brand-text {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    text-align: center;
    letter-spacing: -0.01em;
}

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

@media (max-width: 1024px) {
    .sp-consultation__title {
        font-size: 34px;
    }

    .sp-consultation__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sp-consultation__benefit {
        padding: 16px 14px;
    }

    .sp-consultation__brand-text {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-consultation__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-consultation__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-consultation__subtitle {
        font-size: 16px;
    }

    .sp-consultation__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 28px;
    }

    .sp-consultation__benefit {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .sp-consultation__benefit-icon {
        font-size: 20px;
    }

    .sp-consultation__benefit-text {
        font-size: 13px;
    }

    .sp-consultation__actions {
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 28px;
    }

    .sp-consultation__btn {
        padding: 12px 24px;
        font-size: 15px;
        min-height: 48px;
        width: 100%;
    }

    .sp-consultation__brand {
        padding: 18px 20px;
        border-left-width: 4px;
    }

    .sp-consultation__brand-text {
        font-size: 16px;
    }

    .sp-consultation__brand-content {
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Simplified hover for mobile */
    .sp-consultation__benefit--1:hover,
    .sp-consultation__benefit--2:hover,
    .sp-consultation__benefit--3:hover,
    .sp-consultation__benefit--4:hover,
    .sp-consultation__benefit--5:hover,
    .sp-consultation__benefit--6:hover,
    .sp-consultation__benefit--7:hover,
    .sp-consultation__benefit--8:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-consultation__benefit--1:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--2:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--3:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--4:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--5:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--6:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--7:hover .sp-consultation__benefit-icon,
    .sp-consultation__benefit--8:hover .sp-consultation__benefit-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-consultation__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-consultation__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-consultation__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-consultation__subtitle {
        font-size: 14px;
    }

    .sp-consultation__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }

    .sp-consultation__benefit {
        padding: 12px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .sp-consultation__benefit-icon {
        font-size: 18px;
    }

    .sp-consultation__benefit-text {
        font-size: 12px;
    }

    .sp-consultation__btn {
        padding: 10px 18px;
        font-size: 14px;
        min-height: 44px;
        border-radius: 10px;
    }

    .sp-consultation__brand {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
    }

    .sp-consultation__brand-text {
        font-size: 14px;
    }

    .sp-consultation__brand-icon {
        font-size: 16px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* Ready to Design a Website That Represents Your Business? */


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   READY LAUNCH - CYCLIC 2
   ============================================================ */

.sp-ready-launch__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-ready-launch__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-ready-launch__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-ready-launch__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-ready-launch__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-ready-launch__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-ready-launch__subtitle {
    font-size: 19px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-ready-launch__content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sp-ready-launch__text {
    font-size: 17px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: center;
}

/* ============================================================
   TRUST POINTS - 4 COLUMNS
   ============================================================ */

.sp-ready-launch__points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sp-ready-launch__point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 20px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-ready-launch__point--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ready-launch__point--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ready-launch__point--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ready-launch__point--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-ready-launch__point::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-ready-launch__point:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-ready-launch__point::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-ready-launch__point:hover::after {
    opacity: 1;
}

.sp-ready-launch__point-icon {
    font-size: 22px;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ready-launch__point:hover .sp-ready-launch__point-icon {
    transform: scale(1.2) rotate(90deg);
}

.sp-ready-launch__point-text {
    font-size: 14px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-ready-launch__point:hover .sp-ready-launch__point-text {
    color: #84c615;
}

/* ============================================================
   HIGHLIGHT BOX
   ============================================================ */

.sp-ready-launch__highlight {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.06);
    border-radius: 16px;
    padding: 22px 28px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ready-launch__highlight:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.10);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-ready-launch__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ready-launch__highlight:hover .sp-ready-launch__highlight-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-ready-launch__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

.sp-ready-launch__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 28px 32px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ready-launch__cta:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ready-launch__cta-text {
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

.sp-ready-launch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #84c615;
    border-radius: 12px;
    text-decoration: none;
    border: 2px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
    min-height: 54px;
}

.sp-ready-launch__btn:hover {
    background: #6aaf10;
    border-color: #6aaf10;
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(132, 198, 21, 0.35);
}

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

@media (max-width: 1024px) {
    .sp-ready-launch__title {
        font-size: 34px;
    }

    .sp-ready-launch__points {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sp-ready-launch__point {
        padding: 16px 14px;
    }

    .sp-ready-launch__cta {
        padding: 24px 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-ready-launch__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-ready-launch__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-ready-launch__subtitle {
        font-size: 17px;
    }

    .sp-ready-launch__text {
        font-size: 16px;
    }

    .sp-ready-launch__points {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sp-ready-launch__point {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .sp-ready-launch__point-icon {
        font-size: 20px;
    }

    .sp-ready-launch__point-text {
        font-size: 13px;
    }

    .sp-ready-launch__highlight {
        padding: 18px 20px;
        border-left-width: 4px;
    }

    .sp-ready-launch__highlight-text {
        font-size: 16px;
    }

    .sp-ready-launch__cta {
        padding: 20px 24px;
        border-radius: 14px;
    }

    .sp-ready-launch__cta-text {
        font-size: 17px;
    }

    .sp-ready-launch__btn {
        padding: 12px 32px;
        font-size: 15px;
        min-height: 48px;
        width: 100%;
        max-width: 300px;
    }

    /* Simplified hover for mobile */
    .sp-ready-launch__point--1:hover,
    .sp-ready-launch__point--2:hover,
    .sp-ready-launch__point--3:hover,
    .sp-ready-launch__point--4:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-ready-launch__point--1:hover .sp-ready-launch__point-icon,
    .sp-ready-launch__point--2:hover .sp-ready-launch__point-icon,
    .sp-ready-launch__point--3:hover .sp-ready-launch__point-icon,
    .sp-ready-launch__point--4:hover .sp-ready-launch__point-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-ready-launch__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-ready-launch__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-ready-launch__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-ready-launch__subtitle {
        font-size: 15px;
    }

    .sp-ready-launch__text {
        font-size: 15px;
    }

    .sp-ready-launch__points {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-ready-launch__point {
        padding: 12px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .sp-ready-launch__point-icon {
        font-size: 18px;
    }

    .sp-ready-launch__point-text {
        font-size: 12px;
    }

    .sp-ready-launch__highlight {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
        gap: 12px;
    }

    .sp-ready-launch__highlight-text {
        font-size: 15px;
    }

    .sp-ready-launch__cta {
        padding: 16px 18px;
        border-radius: 12px;
    }

    .sp-ready-launch__cta-text {
        font-size: 15px;
    }

    .sp-ready-launch__btn {
        padding: 10px 24px;
        font-size: 14px;
        min-height: 44px;
        border-radius: 10px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}








/* 
RESTAURANT & HOTEL WEBSITE DESIGN */


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   HOSPITALITY DESIGN - CYCLIC 2
   ============================================================ */

.sp-hospitality-design__wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

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

.sp-hospitality-design__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-hospitality-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-hospitality-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-hospitality-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-hospitality-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-hospitality-design__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   FEATURES GRID - 4 COLUMNS
   ============================================================ */

.sp-hospitality-design__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.sp-hospitality-design__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 20px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    min-height: 110px;
}

/* Different hover effects */
.sp-hospitality-design__feature--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--6:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--7:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__feature--8:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-hospitality-design__feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-hospitality-design__feature:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-hospitality-design__feature::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-hospitality-design__feature:hover::after {
    opacity: 1;
}

.sp-hospitality-design__feature-icon {
    font-size: 28px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-design__feature:hover .sp-hospitality-design__feature-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-hospitality-design__feature-label {
    font-size: 14px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.sp-hospitality-design__feature:hover .sp-hospitality-design__feature-label {
    color: #84c615;
}

/* ============================================================
   HIGHLIGHT
   ============================================================ */

.sp-hospitality-design__highlight {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.06);
    border-radius: 16px;
    padding: 22px 28px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-design__highlight:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.10);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-design__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-design__highlight:hover .sp-hospitality-design__highlight-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-hospitality-design__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

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

@media (max-width: 1024px) {
    .sp-hospitality-design__title {
        font-size: 34px;
    }

    .sp-hospitality-design__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sp-hospitality-design__feature {
        padding: 16px 14px;
        min-height: 100px;
    }

    .sp-hospitality-design__feature-icon {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-hospitality-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-hospitality-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-hospitality-design__subtitle {
        font-size: 16px;
    }

    .sp-hospitality-design__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }

    .sp-hospitality-design__feature {
        padding: 14px 12px;
        border-radius: 12px;
        min-height: 90px;
        gap: 8px;
    }

    .sp-hospitality-design__feature-icon {
        font-size: 22px;
    }

    .sp-hospitality-design__feature-label {
        font-size: 13px;
    }

    .sp-hospitality-design__highlight {
        padding: 18px 20px;
        border-left-width: 4px;
        border-radius: 14px;
    }

    .sp-hospitality-design__highlight-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-hospitality-design__feature--1:hover,
    .sp-hospitality-design__feature--2:hover,
    .sp-hospitality-design__feature--3:hover,
    .sp-hospitality-design__feature--4:hover,
    .sp-hospitality-design__feature--5:hover,
    .sp-hospitality-design__feature--6:hover,
    .sp-hospitality-design__feature--7:hover,
    .sp-hospitality-design__feature--8:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-hospitality-design__feature--1:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--2:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--3:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--4:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--5:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--6:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--7:hover .sp-hospitality-design__feature-icon,
    .sp-hospitality-design__feature--8:hover .sp-hospitality-design__feature-icon {
        transform: scale(1.15);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-hospitality-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-hospitality-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-hospitality-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-hospitality-design__subtitle {
        font-size: 14px;
    }

    .sp-hospitality-design__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .sp-hospitality-design__feature {
        padding: 12px 10px;
        border-radius: 10px;
        min-height: 80px;
        gap: 6px;
    }

    .sp-hospitality-design__feature-icon {
        font-size: 20px;
    }

    .sp-hospitality-design__feature-label {
        font-size: 12px;
    }

    .sp-hospitality-design__highlight {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
        gap: 12px;
    }

    .sp-hospitality-design__highlight-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* GREAT DESIGN INFLUENCES BEHAVIOUR */


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   BEHAVIOURAL DESIGN - CYCLIC 2
   ============================================================ */

.sp-behavioural-design__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-behavioural-design__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-behavioural-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-behavioural-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-behavioural-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-behavioural-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-behavioural-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-behavioural-design__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-behavioural-design__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* Questions Grid */
.sp-behavioural-design__questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-behavioural-design__question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-behavioural-design__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behavioural-design__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behavioural-design__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behavioural-design__question--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behavioural-design__question--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behavioural-design__question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-behavioural-design__question-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    font-family: 'Georgia', serif;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behavioural-design__question:hover .sp-behavioural-design__question-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-behavioural-design__question-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-behavioural-design__question:hover .sp-behavioural-design__question-text {
    color: #84c615;
}

/* Conclusion */
.sp-behavioural-design__conclusion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-behavioural-design__conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-behavioural-design__conclusion-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behavioural-design__conclusion-highlight:hover {
    transform: translateY(-4px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-behavioural-design__conclusion-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behavioural-design__conclusion-highlight:hover .sp-behavioural-design__conclusion-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-behavioural-design__conclusion-highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL STATS
   ============================================================ */

.sp-behavioural-design__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stats Grid */
.sp-behavioural-design__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-behavioural-design__stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-behavioural-design__stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-behavioural-design__stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-behavioural-design__stat--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-behavioural-design__stat--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-behavioural-design__stat-number {
    display: block;
    font-size: 34px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.sp-behavioural-design__stat:hover .sp-behavioural-design__stat-number {
    transform: scale(1.05);
}

.sp-behavioural-design__stat-label {
    display: block;
    font-size: 13px;
    color: #a0a8b8;
    margin-top: 6px;
    line-height: 1.4;
}

/* Trust Box */
.sp-behavioural-design__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behavioural-design__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-behavioural-design__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-behavioural-design__trust-box:hover .sp-behavioural-design__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-behavioural-design__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-behavioural-design__title {
        font-size: 34px;
    }

    .sp-behavioural-design__grid {
        gap: 40px;
    }

    .sp-behavioural-design__questions {
        grid-template-columns: 1fr 1fr;
    }

    .sp-behavioural-design__stat-number {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-behavioural-design__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-behavioural-design__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-behavioural-design__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-behavioural-design__text {
        font-size: 15px;
    }

    .sp-behavioural-design__questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-behavioural-design__question {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-behavioural-design__question-text {
        font-size: 13px;
    }

    .sp-behavioural-design__conclusion-text {
        font-size: 15px;
    }

    .sp-behavioural-design__conclusion-highlight {
        padding: 14px 18px;
    }

    .sp-behavioural-design__conclusion-highlight-text {
        font-size: 15px;
    }

    .sp-behavioural-design__stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-behavioural-design__stat {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .sp-behavioural-design__stat-number {
        font-size: 26px;
    }

    .sp-behavioural-design__stat-label {
        font-size: 12px;
    }

    .sp-behavioural-design__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-behavioural-design__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-behavioural-design__question--1:hover,
    .sp-behavioural-design__question--2:hover,
    .sp-behavioural-design__question--3:hover,
    .sp-behavioural-design__question--4:hover,
    .sp-behavioural-design__question--5:hover,
    .sp-behavioural-design__question--6:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-behavioural-design__stat--1:hover,
    .sp-behavioural-design__stat--2:hover,
    .sp-behavioural-design__stat--3:hover,
    .sp-behavioural-design__stat--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-behavioural-design__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-behavioural-design__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-behavioural-design__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-behavioural-design__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-behavioural-design__questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-behavioural-design__question {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-behavioural-design__question-text {
        font-size: 13px;
    }

    .sp-behavioural-design__conclusion-text {
        font-size: 14px;
    }

    .sp-behavioural-design__conclusion-highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-behavioural-design__conclusion-highlight-text {
        font-size: 14px;
    }

    .sp-behavioural-design__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-behavioural-design__stat {
        padding: 14px 12px;
        border-radius: 10px;
    }

    .sp-behavioural-design__stat-number {
        font-size: 22px;
    }

    .sp-behavioural-design__stat-label {
        font-size: 11px;
    }

    .sp-behavioural-design__trust-box {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sp-behavioural-design__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* Why Professional Web Design Matters */

/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PROFESSIONAL IMPACT - CYCLIC 1
   ============================================================ */

.sp-professional-impact__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-professional-impact__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-professional-impact__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-professional-impact__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-professional-impact__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-professional-impact__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-professional-impact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-professional-impact__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-professional-impact__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

/* Highlight */
.sp-professional-impact__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 14px 20px;
    border-bottom: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-professional-impact__highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-professional-impact__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-professional-impact__highlight:hover .sp-professional-impact__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-professional-impact__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* Questions */
.sp-professional-impact__questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-professional-impact__question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-professional-impact__question--1:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-professional-impact__question--2:hover {
    transform: translateX(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-professional-impact__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-professional-impact__question--4:hover {
    transform: translateX(6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-professional-impact__question--5:hover {
    transform: translateX(-6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-professional-impact__question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 4px 16px rgba(132, 198, 21, 0.06);
}

.sp-professional-impact__question-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    font-family: 'Georgia', serif;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-professional-impact__question:hover .sp-professional-impact__question-icon {
    transform: scale(1.3) rotate(10deg);
}

.sp-professional-impact__question-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-professional-impact__question:hover .sp-professional-impact__question-text {
    color: #84c615;
}

/* Conclusion */
.sp-professional-impact__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 22px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 4px;
}

.sp-professional-impact__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-professional-impact__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0 0 10px 0;
    text-align: justify;
}

.sp-professional-impact__conclusion-line {
    width: 40px;
    height: 3px;
    background: #84c615;
    border-radius: 2px;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-professional-impact__conclusion:hover .sp-professional-impact__conclusion-line {
    width: 70px;
}

.sp-professional-impact__conclusion-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-professional-impact__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stats Grid */
.sp-professional-impact__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-professional-impact__stat {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-professional-impact__stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-professional-impact__stat--2:hover {
    transform: translateY(-4px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-professional-impact__stat--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-professional-impact__stat--4:hover {
    transform: translateY(-4px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: #e6f5ef;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-professional-impact__stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.sp-professional-impact__stat:hover .sp-professional-impact__stat-number {
    transform: scale(1.05);
}

.sp-professional-impact__stat-label {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

/* Trust Badge */
.sp-professional-impact__trust {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-professional-impact__trust:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-professional-impact__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-professional-impact__trust:hover .sp-professional-impact__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-professional-impact__trust-text {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-professional-impact__title {
        font-size: 34px;
    }

    .sp-professional-impact__grid {
        gap: 40px;
    }

    .sp-professional-impact__questions {
        grid-template-columns: 1fr 1fr;
    }

    .sp-professional-impact__stat-number {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-professional-impact__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-professional-impact__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-professional-impact__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-professional-impact__text {
        font-size: 15px;
    }

    .sp-professional-impact__highlight {
        padding: 12px 16px;
    }

    .sp-professional-impact__highlight-text {
        font-size: 15px;
    }

    .sp-professional-impact__questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-professional-impact__question {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-professional-impact__question-text {
        font-size: 13px;
    }

    .sp-professional-impact__conclusion {
        padding: 18px 20px;
    }

    .sp-professional-impact__conclusion-text {
        font-size: 15px;
    }

    .sp-professional-impact__conclusion-highlight {
        font-size: 16px;
    }

    .sp-professional-impact__stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-professional-impact__stat {
        padding: 14px 12px;
    }

    .sp-professional-impact__stat-number {
        font-size: 26px;
    }

    .sp-professional-impact__stat-label {
        font-size: 12px;
    }

    .sp-professional-impact__trust {
        padding: 16px 20px;
        gap: 12px;
    }

    .sp-professional-impact__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-professional-impact__question--1:hover,
    .sp-professional-impact__question--2:hover,
    .sp-professional-impact__question--3:hover,
    .sp-professional-impact__question--4:hover,
    .sp-professional-impact__question--5:hover,
    .sp-professional-impact__question--6:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-professional-impact__stat--1:hover,
    .sp-professional-impact__stat--2:hover,
    .sp-professional-impact__stat--3:hover,
    .sp-professional-impact__stat--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-professional-impact__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-professional-impact__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-professional-impact__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-professional-impact__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-professional-impact__highlight {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-professional-impact__highlight-text {
        font-size: 14px;
    }

    .sp-professional-impact__questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-professional-impact__question {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-professional-impact__question-text {
        font-size: 13px;
    }

    .sp-professional-impact__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
    }

    .sp-professional-impact__conclusion-text {
        font-size: 14px;
    }

    .sp-professional-impact__conclusion-highlight {
        font-size: 15px;
    }

    .sp-professional-impact__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-professional-impact__stat {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-professional-impact__stat-number {
        font-size: 22px;
    }

    .sp-professional-impact__stat-label {
        font-size: 11px;
    }

    .sp-professional-impact__trust {
        padding: 14px 16px;
        gap: 10px;
        border-left-width: 4px;
        border-radius: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sp-professional-impact__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}



 /* YOUR WEBSITE IS YOUR DIGITAL SALES REPRESENTATIVE */

 /* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SALES REPRESENTATIVE - CYCLIC 2
   ============================================================ */

.sp-sales-representative__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-sales-representative__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-sales-representative__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-sales-representative__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-sales-representative__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-sales-representative__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-sales-representative__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-sales-representative__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Analogy Box */
.sp-sales-representative__analogy {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__analogy:hover {
    transform: translateX(6px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.08);
    border-left-width: 6px;
}

.sp-sales-representative__analogy-icon {
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__analogy:hover .sp-sales-representative__analogy-icon {
    transform: scale(1.2) rotate(-10deg) translateY(-4px);
}

.sp-sales-representative__analogy-text {
    font-size: 17px;
    line-height: 1.7;
    color: #e6e8ec;
    margin: 0;
    font-weight: 400;
    text-align: justify;
}

/* Text */
.sp-sales-representative__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    position: relative;
    display: block;
    padding: 4px 0;
    text-align: justify;
}

.sp-sales-representative__text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #84c615;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__text:hover::after {
    width: 100%;
}

.sp-sales-representative__text:hover {
    color: #84c615;
}

/* Highlight */
.sp-sales-representative__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sp-sales-representative__highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.1), transparent);
    transition: left 0.6s ease;
}

.sp-sales-representative__highlight:hover::before {
    left: 100%;
}

.sp-sales-representative__highlight:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.10);
    background: rgba(132, 198, 21, 0.14);
}

.sp-sales-representative__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__highlight:hover .sp-sales-representative__highlight-icon {
    transform: rotate(180deg) scale(1.3);
}

.sp-sales-representative__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

/* List */
.sp-sales-representative__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-sales-representative__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Different hover effects */
.sp-sales-representative__item--1:hover {
    transform: translateY(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.10);
}

.sp-sales-representative__item--2:hover {
    transform: scale(1.04) rotate(-1deg);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-representative__item--3:hover {
    transform: translateX(8px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: -6px 0 20px rgba(132, 198, 21, 0.06);
}

.sp-sales-representative__item--4:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.06);
}

.sp-sales-representative__item--5:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-representative__item--6:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.sp-sales-representative__item--7:hover {
    transform: scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.06);
}

.sp-sales-representative__item--8:hover {
    transform: translateY(-4px) rotate(1deg);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-sales-representative__item-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__item--1:hover .sp-sales-representative__item-icon { transform: scale(1.3) rotate(0deg); }
.sp-sales-representative__item--2:hover .sp-sales-representative__item-icon { transform: scale(1.4) rotate(-10deg); }
.sp-sales-representative__item--3:hover .sp-sales-representative__item-icon { transform: scale(1.2) translateX(4px); }
.sp-sales-representative__item--4:hover .sp-sales-representative__item-icon { transform: scale(1.5) rotate(15deg); }
.sp-sales-representative__item--5:hover .sp-sales-representative__item-icon { transform: scale(1.2) rotate(-5deg); }
.sp-sales-representative__item--6:hover .sp-sales-representative__item-icon { transform: scale(1.4) translateY(-4px); }
.sp-sales-representative__item--7:hover .sp-sales-representative__item-icon { transform: scale(1.3) rotate(10deg); }
.sp-sales-representative__item--8:hover .sp-sales-representative__item-icon { transform: scale(1.3) rotate(-15deg); }

.sp-sales-representative__item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.4s ease;
}

.sp-sales-representative__item:hover .sp-sales-representative__item-text {
    color: #84c615;
}

/* Conclusion */
.sp-sales-representative__conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 4px;
    position: relative;
}

.sp-sales-representative__conclusion:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.08);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-representative__conclusion::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, transparent, #84c615, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.sp-sales-representative__conclusion:hover::before {
    opacity: 1;
}

.sp-sales-representative__conclusion-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-sales-representative__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stats Cards Grid */
.sp-sales-representative__stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-sales-representative__stat-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-sales-representative__stat-card--1:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(132, 198, 21, 0.10);
}

.sp-sales-representative__stat-card--2:hover {
    transform: rotate(-2deg) scale(1.04);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-sales-representative__stat-card--3:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(132, 198, 21, 0.08);
}

.sp-sales-representative__stat-card--4:hover {
    transform: translateY(-6px) rotate(2deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

/* Glow overlay */
.sp-sales-representative__stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-sales-representative__stat-card:hover::before {
    left: 100%;
}

.sp-sales-representative__stat-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 6px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__stat-card--1:hover .sp-sales-representative__stat-icon { transform: scale(1.2) rotate(-5deg) translateY(-4px); }
.sp-sales-representative__stat-card--2:hover .sp-sales-representative__stat-icon { transform: scale(1.3) rotate(10deg); }
.sp-sales-representative__stat-card--3:hover .sp-sales-representative__stat-icon { transform: scale(1.2) translateY(-6px); }
.sp-sales-representative__stat-card--4:hover .sp-sales-representative__stat-icon { transform: scale(1.3) rotate(-10deg) translateY(-4px); }

.sp-sales-representative__stat-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.3s ease;
}

.sp-sales-representative__stat-card:hover .sp-sales-representative__stat-number {
    color: #84c615;
}

.sp-sales-representative__stat-label {
    display: block;
    font-size: 13px;
    color: #a0a8b8;
    margin-top: 4px;
}

/* Trust Box */
.sp-sales-representative__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-sales-representative__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-sales-representative__trust-box:hover .sp-sales-representative__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-sales-representative__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-sales-representative__title {
        font-size: 34px;
    }

    .sp-sales-representative__grid {
        gap: 40px;
    }

    .sp-sales-representative__list {
        grid-template-columns: 1fr;
    }

    .sp-sales-representative__analogy-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-sales-representative__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-sales-representative__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-sales-representative__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-sales-representative__analogy {
        padding: 16px 20px;
    }

    .sp-sales-representative__analogy-text {
        font-size: 15px;
    }

    .sp-sales-representative__text {
        font-size: 15px;
    }

    .sp-sales-representative__highlight {
        padding: 12px 16px;
    }

    .sp-sales-representative__highlight-text {
        font-size: 15px;
    }

    .sp-sales-representative__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-sales-representative__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-sales-representative__item-text {
        font-size: 13px;
    }

    .sp-sales-representative__conclusion {
        padding: 14px 18px;
    }

    .sp-sales-representative__conclusion-text {
        font-size: 15px;
    }

    .sp-sales-representative__stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-sales-representative__stat-card {
        padding: 16px 12px;
    }

    .sp-sales-representative__stat-icon {
        font-size: 24px;
    }

    .sp-sales-representative__stat-number {
        font-size: 18px;
    }

    .sp-sales-representative__stat-label {
        font-size: 12px;
    }

    .sp-sales-representative__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-sales-representative__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-sales-representative__item--1:hover,
    .sp-sales-representative__item--2:hover,
    .sp-sales-representative__item--3:hover,
    .sp-sales-representative__item--4:hover,
    .sp-sales-representative__item--5:hover,
    .sp-sales-representative__item--6:hover,
    .sp-sales-representative__item--7:hover,
    .sp-sales-representative__item--8:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-sales-representative__stat-card--1:hover,
    .sp-sales-representative__stat-card--2:hover,
    .sp-sales-representative__stat-card--3:hover,
    .sp-sales-representative__stat-card--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-sales-representative__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-sales-representative__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-sales-representative__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-sales-representative__analogy {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-sales-representative__analogy-icon {
        font-size: 22px;
    }

    .sp-sales-representative__analogy-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-sales-representative__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-sales-representative__highlight {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-sales-representative__highlight-text {
        font-size: 14px;
    }

    .sp-sales-representative__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-sales-representative__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-sales-representative__item-text {
        font-size: 13px;
    }

    .sp-sales-representative__conclusion {
        padding: 12px 14px;
    }

    .sp-sales-representative__conclusion-text {
        font-size: 14px;
    }

    .sp-sales-representative__stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-sales-representative__stat-card {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .sp-sales-representative__stat-icon {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .sp-sales-representative__stat-number {
        font-size: 16px;
    }

    .sp-sales-representative__stat-label {
        font-size: 11px;
    }

    .sp-sales-representative__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-sales-representative__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* FRESHORA'S DESIGN PHILOSOPHY */



/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   PHILOSOPHY CORE - CYCLIC 2
   ============================================================ */

.sp-philosophy-core__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-philosophy-core__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-philosophy-core__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-philosophy-core__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-philosophy-core__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-philosophy-core__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-philosophy-core__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-philosophy-core__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-philosophy-core__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* Questions */
.sp-philosophy-core__questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-philosophy-core__question {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-philosophy-core__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__question-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__question:hover .sp-philosophy-core__question-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-philosophy-core__question-text {
    font-size: 15px;
    color: #e6e8ec;
    transition: all 0.3s ease;
    font-weight: 400;
}

.sp-philosophy-core__question:hover .sp-philosophy-core__question-text {
    color: #84c615;
}

/* Highlight */
.sp-philosophy-core__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__highlight:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__highlight:hover .sp-philosophy-core__highlight-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-philosophy-core__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-philosophy-core__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Philosophy Pillars */
.sp-philosophy-core__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-philosophy-core__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-philosophy-core__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-philosophy-core__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-philosophy-core__pillar:hover::before {
    left: 100%;
}

.sp-philosophy-core__pillar-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__pillar:hover .sp-philosophy-core__pillar-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-philosophy-core__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__pillar--1:hover .sp-philosophy-core__pillar-icon { transform: scale(1.2) rotate(-5deg); }
.sp-philosophy-core__pillar--2:hover .sp-philosophy-core__pillar-icon { transform: scale(1.3) rotate(10deg); }
.sp-philosophy-core__pillar--3:hover .sp-philosophy-core__pillar-icon { transform: scale(1.2) translateY(-4px); }
.sp-philosophy-core__pillar--4:hover .sp-philosophy-core__pillar-icon { transform: scale(1.3) rotate(-10deg) translateY(-4px); }

.sp-philosophy-core__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-philosophy-core__pillar:hover .sp-philosophy-core__pillar-label {
    color: #84c615;
}

/* Trust Box */
.sp-philosophy-core__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-philosophy-core__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-philosophy-core__trust-box:hover .sp-philosophy-core__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-philosophy-core__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-philosophy-core__title {
        font-size: 34px;
    }

    .sp-philosophy-core__grid {
        gap: 40px;
    }

    .sp-philosophy-core__question-text {
        font-size: 14px;
    }

    .sp-philosophy-core__pillars {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-philosophy-core__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-philosophy-core__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-philosophy-core__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-philosophy-core__text {
        font-size: 15px;
    }

    .sp-philosophy-core__question {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-philosophy-core__question-text {
        font-size: 14px;
    }

    .sp-philosophy-core__highlight {
        padding: 16px 18px;
    }

    .sp-philosophy-core__highlight-text {
        font-size: 16px;
    }

    .sp-philosophy-core__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-philosophy-core__pillar {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .sp-philosophy-core__pillar-icon {
        font-size: 22px;
    }

    .sp-philosophy-core__pillar-label {
        font-size: 12px;
    }

    .sp-philosophy-core__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-philosophy-core__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-philosophy-core__question--1:hover,
    .sp-philosophy-core__question--2:hover,
    .sp-philosophy-core__question--3:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-philosophy-core__pillar--1:hover,
    .sp-philosophy-core__pillar--2:hover,
    .sp-philosophy-core__pillar--3:hover,
    .sp-philosophy-core__pillar--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-philosophy-core__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-philosophy-core__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-philosophy-core__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-philosophy-core__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-philosophy-core__question {
        padding: 8px 12px;
        gap: 8px;
        border-radius: 10px;
    }

    .sp-philosophy-core__question-text {
        font-size: 13px;
    }

    .sp-philosophy-core__highlight {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-philosophy-core__highlight-text {
        font-size: 15px;
    }

    .sp-philosophy-core__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-philosophy-core__pillar {
        padding: 14px 10px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-philosophy-core__pillar-number {
        font-size: 10px;
    }

    .sp-philosophy-core__pillar-icon {
        font-size: 20px;
    }

    .sp-philosophy-core__pillar-label {
        font-size: 11px;
    }

    .sp-philosophy-core__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-philosophy-core__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* PSYCHOLOGY OF HIGH-CONVERTING DESIGN */


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   CONVERSION PSYCHOLOGY - CYCLIC 1
   ============================================================ */

.sp-conversion-psychology__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-conversion-psychology__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-conversion-psychology__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-conversion-psychology__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-conversion-psychology__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-conversion-psychology__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-conversion-psychology__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-conversion-psychology__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-conversion-psychology__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-conversion-psychology__text--final {
    font-weight: 500;
    color: #000000;
}

/* Decisions List */
.sp-conversion-psychology__decisions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-conversion-psychology__decision {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-conversion-psychology__decision--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-conversion-psychology__decision--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-conversion-psychology__decision--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-conversion-psychology__decision--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-conversion-psychology__decision-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-conversion-psychology__decision:hover .sp-conversion-psychology__decision-dot {
    transform: scale(1.5);
    box-shadow: 0 0 16px rgba(132, 198, 21, 0.3);
}

.sp-conversion-psychology__decision-text {
    font-size: 15px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-conversion-psychology__decision:hover .sp-conversion-psychology__decision-text {
    color: #84c615;
}

/* Highlight */
.sp-conversion-psychology__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 20px 24px;
    border-bottom: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-conversion-psychology__highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-conversion-psychology__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-conversion-psychology__highlight:hover .sp-conversion-psychology__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-conversion-psychology__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* ============================================================
   RIGHT COLUMN - VISUAL STATS
   ============================================================ */

.sp-conversion-psychology__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stats Grid */
.sp-conversion-psychology__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-conversion-psychology__stat {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-conversion-psychology__stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-conversion-psychology__stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-conversion-psychology__stat--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-conversion-psychology__stat--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-conversion-psychology__stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.sp-conversion-psychology__stat:hover .sp-conversion-psychology__stat-number {
    transform: scale(1.05);
}

.sp-conversion-psychology__stat-label {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 6px;
    line-height: 1.4;
}

/* Trust Box */
.sp-conversion-psychology__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-conversion-psychology__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-conversion-psychology__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-conversion-psychology__trust-box:hover .sp-conversion-psychology__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-conversion-psychology__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-conversion-psychology__title {
        font-size: 34px;
    }

    .sp-conversion-psychology__grid {
        gap: 40px;
    }

    .sp-conversion-psychology__decision-text {
        font-size: 14px;
    }

    .sp-conversion-psychology__stat-number {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-conversion-psychology__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-conversion-psychology__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-conversion-psychology__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-conversion-psychology__text {
        font-size: 15px;
    }

    .sp-conversion-psychology__decision {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-conversion-psychology__decision-text {
        font-size: 14px;
    }

    .sp-conversion-psychology__highlight {
        padding: 16px 18px;
    }

    .sp-conversion-psychology__highlight-text {
        font-size: 16px;
    }

    .sp-conversion-psychology__stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-conversion-psychology__stat {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .sp-conversion-psychology__stat-number {
        font-size: 24px;
    }

    .sp-conversion-psychology__stat-label {
        font-size: 12px;
    }

    .sp-conversion-psychology__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-conversion-psychology__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-conversion-psychology__decision--1:hover,
    .sp-conversion-psychology__decision--2:hover,
    .sp-conversion-psychology__decision--3:hover,
    .sp-conversion-psychology__decision--4:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-conversion-psychology__stat--1:hover,
    .sp-conversion-psychology__stat--2:hover,
    .sp-conversion-psychology__stat--3:hover,
    .sp-conversion-psychology__stat--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-conversion-psychology__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-conversion-psychology__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-conversion-psychology__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-conversion-psychology__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-conversion-psychology__decision {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-conversion-psychology__decision-dot {
        width: 6px;
        height: 6px;
    }

    .sp-conversion-psychology__decision-text {
        font-size: 13px;
    }

    .sp-conversion-psychology__highlight {
        padding: 14px 16px;
        gap: 10px;
    }

    .sp-conversion-psychology__highlight-text {
        font-size: 15px;
    }

    .sp-conversion-psychology__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-conversion-psychology__stat {
        padding: 14px 12px;
        border-radius: 10px;
    }

    .sp-conversion-psychology__stat-number {
        font-size: 22px;
    }

    .sp-conversion-psychology__stat-label {
        font-size: 11px;
    }

    .sp-conversion-psychology__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-conversion-psychology__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}



/* WHY GOOD WEB DESIGN BUILDS TRUST */


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TRUST FOUNDATION - CYCLIC 2
   ============================================================ */

.sp-trust-foundation__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-trust-foundation__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-trust-foundation__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-trust-foundation__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-trust-foundation__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-trust-foundation__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

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

.sp-trust-foundation__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-trust-foundation__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trust-foundation__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

/* List - 2 columns */
.sp-trust-foundation__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-trust-foundation__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trust-foundation__item--1:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--2:hover {
    transform: translateX(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--4:hover {
    transform: translateX(6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--5:hover {
    transform: translateX(-6px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-trust-foundation__item-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-foundation__item:hover .sp-trust-foundation__item-icon {
    transform: scale(1.3);
}

.sp-trust-foundation__item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-trust-foundation__item:hover .sp-trust-foundation__item-text {
    color: #84c615;
}

/* Highlight */
.sp-trust-foundation__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    border: 1px solid rgba(132, 198, 21, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-foundation__highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
    background: rgba(132, 198, 21, 0.12);
}

.sp-trust-foundation__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-foundation__highlight:hover .sp-trust-foundation__highlight-icon {
    transform: rotate(180deg) scale(1.3);
}

.sp-trust-foundation__highlight-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: justify;
}

/* Conclusion */
.sp-trust-foundation__conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-trust-foundation__conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
}

.sp-trust-foundation__conclusion-text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-trust-foundation__conclusion-highlight {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-align: justify;
    padding: 12px 16px;
    background: rgba(132, 198, 21, 0.06);
    border-radius: 10px;
    border-left: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-foundation__conclusion-highlight:hover {
    background: rgba(132, 198, 21, 0.10);
    transform: translateX(4px);
    border-left-width: 5px;
}

/* ============================================================
   RIGHT COLUMN - VISUAL STATS
   ============================================================ */

.sp-trust-foundation__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Trust Stats */
.sp-trust-foundation__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-trust-foundation__stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trust-foundation__stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-foundation__stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-foundation__stat--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-foundation__stat--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.06);
}

.sp-trust-foundation__stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.sp-trust-foundation__stat:hover .sp-trust-foundation__stat-number {
    transform: scale(1.05);
}

.sp-trust-foundation__stat-label {
    display: block;
    font-size: 13px;
    color: #a0a8b8;
    margin-top: 6px;
    line-height: 1.4;
}

/* Trust Box */
.sp-trust-foundation__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-foundation__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-trust-foundation__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-foundation__trust-box:hover .sp-trust-foundation__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-trust-foundation__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-trust-foundation__title {
        font-size: 34px;
    }

    .sp-trust-foundation__grid {
        gap: 40px;
    }

    .sp-trust-foundation__list {
        grid-template-columns: 1fr;
    }

    .sp-trust-foundation__stat-number {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-trust-foundation__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-trust-foundation__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-trust-foundation__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-trust-foundation__text {
        font-size: 15px;
    }

    .sp-trust-foundation__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-trust-foundation__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-trust-foundation__item-text {
        font-size: 13px;
    }

    .sp-trust-foundation__highlight {
        padding: 12px 16px;
    }

    .sp-trust-foundation__highlight-text {
        font-size: 16px;
    }

    .sp-trust-foundation__conclusion {
        padding: 16px 20px;
    }

    .sp-trust-foundation__conclusion-text {
        font-size: 15px;
    }

    .sp-trust-foundation__conclusion-highlight {
        font-size: 16px;
        padding: 10px 14px;
    }

    .sp-trust-foundation__stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-trust-foundation__stat {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .sp-trust-foundation__stat-number {
        font-size: 24px;
    }

    .sp-trust-foundation__stat-label {
        font-size: 12px;
    }

    .sp-trust-foundation__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-trust-foundation__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-trust-foundation__item--1:hover,
    .sp-trust-foundation__item--2:hover,
    .sp-trust-foundation__item--3:hover,
    .sp-trust-foundation__item--4:hover,
    .sp-trust-foundation__item--5:hover,
    .sp-trust-foundation__item--6:hover,
    .sp-trust-foundation__item--7:hover,
    .sp-trust-foundation__item--8:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-trust-foundation__stat--1:hover,
    .sp-trust-foundation__stat--2:hover,
    .sp-trust-foundation__stat--3:hover,
    .sp-trust-foundation__stat--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-trust-foundation__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-trust-foundation__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-trust-foundation__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-trust-foundation__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-trust-foundation__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-trust-foundation__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-trust-foundation__item-text {
        font-size: 12px;
    }

    .sp-trust-foundation__item-icon {
        font-size: 12px;
    }

    .sp-trust-foundation__highlight {
        padding: 10px 14px;
        gap: 10px;
    }

    .sp-trust-foundation__highlight-text {
        font-size: 15px;
    }

    .sp-trust-foundation__conclusion {
        padding: 14px 16px;
        gap: 8px;
    }

    .sp-trust-foundation__conclusion-text {
        font-size: 14px;
    }

    .sp-trust-foundation__conclusion-highlight {
        font-size: 15px;
        padding: 8px 12px;
    }

    .sp-trust-foundation__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-trust-foundation__stat {
        padding: 14px 12px;
        border-radius: 10px;
    }

    .sp-trust-foundation__stat-number {
        font-size: 22px;
    }

    .sp-trust-foundation__stat-label {
        font-size: 11px;
    }

    .sp-trust-foundation__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-trust-foundation__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


     /* SECTION (CYCLIC 1) — VISUAL HIERARCHY */



     /* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   VISUAL FLOW - CYCLIC 1
   ============================================================ */

.sp-visual-flow__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-visual-flow__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-visual-flow__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-visual-flow__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-visual-flow__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-visual-flow__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

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

.sp-visual-flow__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-visual-flow__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-visual-flow__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-visual-flow__text--final {
    font-weight: 500;
    color: #000000;
}

/* Highlight */
.sp-visual-flow__highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 12px 18px;
    border-bottom: 3px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-visual-flow__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__highlight:hover .sp-visual-flow__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-visual-flow__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* List with numbers */
.sp-visual-flow__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-visual-flow__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-visual-flow__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-visual-flow__item-number {
    font-size: 12px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    min-width: 24px;
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__item:hover .sp-visual-flow__item-number {
    opacity: 1;
    transform: scale(1.15);
}

.sp-visual-flow__item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-visual-flow__item:hover .sp-visual-flow__item-text {
    color: #84c615;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-visual-flow__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Hierarchy Cards */
.sp-visual-flow__cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.sp-visual-flow__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-visual-flow__card--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-visual-flow__card--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-visual-flow__card--3:hover {
    transform: translateY(-10px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-visual-flow__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-visual-flow__card:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-visual-flow__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-visual-flow__card:hover::after {
    opacity: 1;
}

.sp-visual-flow__card-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__card:hover .sp-visual-flow__card-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-visual-flow__card-icon {
    font-size: 28px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__card--1:hover .sp-visual-flow__card-icon { transform: scale(1.15) rotate(-5deg); }
.sp-visual-flow__card--2:hover .sp-visual-flow__card-icon { transform: scale(1.2) rotate(5deg); }
.sp-visual-flow__card--3:hover .sp-visual-flow__card-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }

.sp-visual-flow__card-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-visual-flow__card:hover .sp-visual-flow__card-label {
    color: #84c615;
}

/* Trust Box */
.sp-visual-flow__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-visual-flow__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-visual-flow__trust-box:hover .sp-visual-flow__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-visual-flow__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-visual-flow__title {
        font-size: 34px;
    }

    .sp-visual-flow__grid {
        gap: 40px;
    }

    .sp-visual-flow__list {
        grid-template-columns: 1fr 1fr;
    }

    .sp-visual-flow__cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .sp-visual-flow__card {
        padding: 14px 10px;
    }

    .sp-visual-flow__card-icon {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-visual-flow__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-visual-flow__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-visual-flow__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-visual-flow__text {
        font-size: 15px;
    }

    .sp-visual-flow__highlight {
        padding: 10px 14px;
    }

    .sp-visual-flow__highlight-text {
        font-size: 16px;
    }

    .sp-visual-flow__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-visual-flow__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-visual-flow__item-text {
        font-size: 13px;
    }

    .sp-visual-flow__cards {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .sp-visual-flow__card {
        padding: 12px 10px;
        border-radius: 12px;
        gap: 4px;
    }

    .sp-visual-flow__card-icon {
        font-size: 22px;
    }

    .sp-visual-flow__card-label {
        font-size: 12px;
    }

    .sp-visual-flow__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-visual-flow__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-visual-flow__item--1:hover,
    .sp-visual-flow__item--2:hover,
    .sp-visual-flow__item--3:hover,
    .sp-visual-flow__item--4:hover,
    .sp-visual-flow__item--5:hover,
    .sp-visual-flow__item--6:hover,
    .sp-visual-flow__item--7:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-visual-flow__card--1:hover,
    .sp-visual-flow__card--2:hover,
    .sp-visual-flow__card--3:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-visual-flow__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-visual-flow__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-visual-flow__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-visual-flow__text {
        font-size: 14px;
        line-height: 1.7;
    }

    .sp-visual-flow__highlight {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-visual-flow__highlight-text {
        font-size: 15px;
    }

    .sp-visual-flow__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-visual-flow__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-visual-flow__item-number {
        font-size: 10px;
        min-width: 20px;
    }

    .sp-visual-flow__item-text {
        font-size: 13px;
    }

    .sp-visual-flow__cards {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .sp-visual-flow__card {
        padding: 10px 8px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-visual-flow__card-number {
        font-size: 10px;
    }

    .sp-visual-flow__card-icon {
        font-size: 18px;
    }

    .sp-visual-flow__card-label {
        font-size: 11px;
    }

    .sp-visual-flow__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-visual-flow__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


 /* TYPOGRAPHY PSYCHOLOGY */


 /* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   FONT PSYCHOLOGY - CYCLIC 1
   ============================================================ */

.sp-font-psychology__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-font-psychology__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-font-psychology__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-font-psychology__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-font-psychology__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-font-psychology__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-font-psychology__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-font-psychology__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-font-psychology__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-font-psychology__text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

/* List */
.sp-font-psychology__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-font-psychology__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-font-psychology__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-font-psychology__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-font-psychology__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-font-psychology__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-font-psychology__item--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-font-psychology__item--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-font-psychology__item-icon {
    font-size: 16px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__item:hover .sp-font-psychology__item-icon {
    transform: scale(1.3);
}

.sp-font-psychology__item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-font-psychology__item:hover .sp-font-psychology__item-text {
    color: #84c615;
}

/* Highlight */
.sp-font-psychology__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-font-psychology__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__highlight:hover .sp-font-psychology__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-font-psychology__highlight-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* Conclusion */
.sp-font-psychology__conclusion {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-font-psychology__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #1a1f36;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-font-psychology__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Typography Showcase Cards */
.sp-font-psychology__showcase {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.sp-font-psychology__showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-font-psychology__showcase-item--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-font-psychology__showcase-item--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-font-psychology__showcase-item--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-font-psychology__showcase-item--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-font-psychology__showcase-item--5:hover {
    transform: translateY(-6px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-font-psychology__showcase-item--6:hover {
    transform: translateY(-8px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

/* Glow overlay */
.sp-font-psychology__showcase-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-font-psychology__showcase-item:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-font-psychology__showcase-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-font-psychology__showcase-item:hover::after {
    opacity: 1;
}

.sp-font-psychology__showcase-letter {
    font-size: 36px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Georgia', serif;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__showcase-item:hover .sp-font-psychology__showcase-letter {
    transform: scale(1.15) rotate(-5deg);
}

.sp-font-psychology__showcase-label {
    font-size: 12px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-font-psychology__showcase-item:hover .sp-font-psychology__showcase-label {
    color: #84c615;
}

/* Trust Box */
.sp-font-psychology__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-font-psychology__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-font-psychology__trust-box:hover .sp-font-psychology__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-font-psychology__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-font-psychology__title {
        font-size: 34px;
    }

    .sp-font-psychology__grid {
        gap: 40px;
    }

    .sp-font-psychology__showcase {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .sp-font-psychology__showcase-letter {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-font-psychology__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-font-psychology__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-font-psychology__subtitle {
        font-size: 16px;
    }

    .sp-font-psychology__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-font-psychology__text {
        font-size: 16px;
    }

    .sp-font-psychology__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-font-psychology__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-font-psychology__item-text {
        font-size: 13px;
    }

    .sp-font-psychology__highlight {
        padding: 14px 18px;
    }

    .sp-font-psychology__highlight-text {
        font-size: 15px;
    }

    .sp-font-psychology__conclusion {
        padding: 14px 16px;
    }

    .sp-font-psychology__conclusion-text {
        font-size: 15px;
    }

    .sp-font-psychology__showcase {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .sp-font-psychology__showcase-item {
        padding: 14px 10px;
        border-radius: 12px;
    }

    .sp-font-psychology__showcase-letter {
        font-size: 26px;
    }

    .sp-font-psychology__showcase-label {
        font-size: 11px;
    }

    .sp-font-psychology__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-font-psychology__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-font-psychology__item--1:hover,
    .sp-font-psychology__item--2:hover,
    .sp-font-psychology__item--3:hover,
    .sp-font-psychology__item--4:hover,
    .sp-font-psychology__item--5:hover,
    .sp-font-psychology__item--6:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-font-psychology__showcase-item--1:hover,
    .sp-font-psychology__showcase-item--2:hover,
    .sp-font-psychology__showcase-item--3:hover,
    .sp-font-psychology__showcase-item--4:hover,
    .sp-font-psychology__showcase-item--5:hover,
    .sp-font-psychology__showcase-item--6:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-font-psychology__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-font-psychology__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-font-psychology__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-font-psychology__subtitle {
        font-size: 14px;
    }

    .sp-font-psychology__text {
        font-size: 15px;
    }

    .sp-font-psychology__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-font-psychology__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-font-psychology__item-text {
        font-size: 13px;
    }

    .sp-font-psychology__highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-font-psychology__highlight-text {
        font-size: 14px;
    }

    .sp-font-psychology__conclusion {
        padding: 12px 14px;
    }

    .sp-font-psychology__conclusion-text {
        font-size: 14px;
    }

    .sp-font-psychology__showcase {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .sp-font-psychology__showcase-item {
        padding: 10px 8px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-font-psychology__showcase-letter {
        font-size: 22px;
    }

    .sp-font-psychology__showcase-label {
        font-size: 10px;
    }

    .sp-font-psychology__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-font-psychology__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* White Space Creates Better Experiences */


/* ============================================================
   CYCLIC 2 — BLACK BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SPACE MATTERS - CYCLIC 2
   ============================================================ */

.sp-space-matters__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

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

.sp-space-matters__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-space-matters__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-space-matters__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-space-matters__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-space-matters__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-space-matters__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

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

.sp-space-matters__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT COLUMN - CONTENT
   ============================================================ */

.sp-space-matters__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-space-matters__text {
    font-size: 18px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0;
}

/* Benefits */
.sp-space-matters__benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-space-matters__benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-space-matters__benefit--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-space-matters__benefit--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-space-matters__benefit--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-space-matters__benefit--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-space-matters__benefit--5:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-space-matters__benefit-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-space-matters__benefit:hover .sp-space-matters__benefit-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-space-matters__benefit-text {
    font-size: 15px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-space-matters__benefit:hover .sp-space-matters__benefit-text {
    color: #84c615;
}

/* Conclusion */
.sp-space-matters__conclusion {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-space-matters__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-space-matters__conclusion-text {
    font-size: 16px;
    color: #e6e8ec;
    margin: 0 0 6px 0;
    text-align: center;
}

.sp-space-matters__conclusion-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

/* ============================================================
   RIGHT COLUMN - VISUAL
   ============================================================ */

.sp-space-matters__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Space Principle Cards */
.sp-space-matters__principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-space-matters__principle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-space-matters__principle--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-space-matters__principle--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-space-matters__principle--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-space-matters__principle--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

/* Glow overlay */
.sp-space-matters__principle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-space-matters__principle:hover::before {
    left: 100%;
}

/* Bottom accent bar */
.sp-space-matters__principle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-space-matters__principle:hover::after {
    opacity: 1;
}

.sp-space-matters__principle-icon {
    font-size: 28px;
    color: #84c615;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-space-matters__principle:hover .sp-space-matters__principle-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-space-matters__principle-label {
    font-size: 14px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-space-matters__principle:hover .sp-space-matters__principle-label {
    color: #84c615;
}

/* Trust Box */
.sp-space-matters__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-space-matters__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-space-matters__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-space-matters__trust-box:hover .sp-space-matters__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-space-matters__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

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

@media (max-width: 1024px) {
    .sp-space-matters__title {
        font-size: 34px;
    }

    .sp-space-matters__grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-space-matters__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-space-matters__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-space-matters__subtitle {
        font-size: 16px;
    }

    .sp-space-matters__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-space-matters__text {
        font-size: 17px;
    }

    .sp-space-matters__benefit {
        padding: 8px 12px;
        gap: 10px;
    }

    .sp-space-matters__benefit-text {
        font-size: 14px;
    }

    .sp-space-matters__conclusion {
        padding: 14px 18px;
    }

    .sp-space-matters__conclusion-text {
        font-size: 15px;
    }

    .sp-space-matters__conclusion-highlight {
        font-size: 17px;
    }

    .sp-space-matters__principles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-space-matters__principle {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .sp-space-matters__principle-icon {
        font-size: 24px;
    }

    .sp-space-matters__principle-label {
        font-size: 13px;
    }

    .sp-space-matters__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-space-matters__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-space-matters__benefit--1:hover,
    .sp-space-matters__benefit--2:hover,
    .sp-space-matters__benefit--3:hover,
    .sp-space-matters__benefit--4:hover,
    .sp-space-matters__benefit--5:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-space-matters__principle--1:hover,
    .sp-space-matters__principle--2:hover,
    .sp-space-matters__principle--3:hover,
    .sp-space-matters__principle--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-space-matters__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-space-matters__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-space-matters__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-space-matters__subtitle {
        font-size: 14px;
    }

    .sp-space-matters__text {
        font-size: 16px;
    }

    .sp-space-matters__benefit {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-space-matters__benefit-text {
        font-size: 13px;
    }

    .sp-space-matters__benefit-icon {
        font-size: 12px;
    }

    .sp-space-matters__conclusion {
        padding: 12px 14px;
    }

    .sp-space-matters__conclusion-text {
        font-size: 14px;
    }

    .sp-space-matters__conclusion-highlight {
        font-size: 15px;
    }

    .sp-space-matters__principles {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-space-matters__principle {
        padding: 14px 10px;
        border-radius: 10px;
        gap: 6px;
    }

    .sp-space-matters__principle-icon {
        font-size: 20px;
    }

    .sp-space-matters__principle-label {
        font-size: 12px;
    }

    .sp-space-matters__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-space-matters__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}


/* CSS Code - All Three Sections */


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   CLARITY DESIGN - CYCLIC 1
   ============================================================ */

.sp-clarity-design__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-clarity-design__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-clarity-design__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-clarity-design__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-clarity-design__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-clarity-design__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-clarity-design__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.sp-clarity-design__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-clarity-design__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-clarity-design__text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

.sp-clarity-design__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-clarity-design__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-clarity-design__item--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-clarity-design__item--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-clarity-design__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-clarity-design__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-clarity-design__item-icon {
    font-size: 14px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-clarity-design__item:hover .sp-clarity-design__item-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-clarity-design__item-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-clarity-design__item:hover .sp-clarity-design__item-text {
    color: #84c615;
}

.sp-clarity-design__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-bottom: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-clarity-design__conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-clarity-design__conclusion-text {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* Right Column */
.sp-clarity-design__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-clarity-design__principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-clarity-design__principle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-clarity-design__principle--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-clarity-design__principle--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-clarity-design__principle--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-clarity-design__principle--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-clarity-design__principle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-clarity-design__principle:hover::before {
    left: 100%;
}

.sp-clarity-design__principle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-clarity-design__principle:hover::after {
    opacity: 1;
}

.sp-clarity-design__principle-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-clarity-design__principle:hover .sp-clarity-design__principle-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-clarity-design__principle-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-clarity-design__principle--1:hover .sp-clarity-design__principle-icon { transform: scale(1.15) rotate(-5deg); }
.sp-clarity-design__principle--2:hover .sp-clarity-design__principle-icon { transform: scale(1.2) rotate(5deg); }
.sp-clarity-design__principle--3:hover .sp-clarity-design__principle-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-clarity-design__principle--4:hover .sp-clarity-design__principle-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-clarity-design__principle-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-clarity-design__principle:hover .sp-clarity-design__principle-label {
    color: #84c615;
}

.sp-clarity-design__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-clarity-design__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-clarity-design__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-clarity-design__trust-box:hover .sp-clarity-design__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-clarity-design__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   MENTAL LOAD - CYCLIC 2
   ============================================================ */

.sp-mental-load__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-mental-load__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-mental-load__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-mental-load__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-mental-load__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-mental-load__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-mental-load__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.sp-mental-load__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-mental-load__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-mental-load__text {
    font-size: 17px;
    font-weight: 500;
    color: #e6e8ec;
    margin: 0;
}

.sp-mental-load__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-mental-load__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-mental-load__item--1:hover {
    transform: translateX(6px);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__item--2:hover {
    transform: translateX(-6px);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__item--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__item--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__item--5:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__item-icon {
    font-size: 16px;
    font-weight: 700;
    color: #ef4444;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mental-load__item:hover .sp-mental-load__item-icon {
    transform: scale(1.3) rotate(90deg);
}

.sp-mental-load__item-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-mental-load__item:hover .sp-mental-load__item-text {
    color: #ef4444;
}

.sp-mental-load__highlight {
    background: rgba(239, 68, 68, 0.06);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #ef4444;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mental-load__highlight:hover {
    transform: translateX(6px);
    background: rgba(239, 68, 68, 0.10);
}

.sp-mental-load__highlight-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.sp-mental-load__highlight-desc {
    font-size: 16px;
    color: #e6e8ec;
    margin: 0;
}

.sp-mental-load__conclusion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mental-load__conclusion:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-mental-load__conclusion-text {
    font-size: 16px;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-mental-load__conclusion-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

.sp-mental-load__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-mental-load__indicators {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-mental-load__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-mental-load__indicator--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
}

.sp-mental-load__indicator--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__indicator--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
}

.sp-mental-load__indicator--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.sp-mental-load__indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-mental-load__indicator:hover::before {
    left: 100%;
}

.sp-mental-load__indicator-icon {
    font-size: 28px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mental-load__indicator--1:hover .sp-mental-load__indicator-icon { transform: scale(1.15) rotate(-5deg); }
.sp-mental-load__indicator--2:hover .sp-mental-load__indicator-icon { transform: scale(1.2) rotate(5deg); }
.sp-mental-load__indicator--3:hover .sp-mental-load__indicator-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-mental-load__indicator--4:hover .sp-mental-load__indicator-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-mental-load__indicator-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-mental-load__indicator--1:hover .sp-mental-load__indicator-label { color: #22c55e; }
.sp-mental-load__indicator--2:hover .sp-mental-load__indicator-label { color: #ef4444; }
.sp-mental-load__indicator--3:hover .sp-mental-load__indicator-label { color: #22c55e; }
.sp-mental-load__indicator--4:hover .sp-mental-load__indicator-label { color: #ef4444; }

.sp-mental-load__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mental-load__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-mental-load__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-mental-load__trust-box:hover .sp-mental-load__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-mental-load__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   TRUST CREDIBILITY - CYCLIC 1
   ============================================================ */

.sp-trust-credibility__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-trust-credibility__header {
    text-align: center;
    margin-bottom: 44px;
}

.sp-trust-credibility__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-trust-credibility__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-trust-credibility__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-trust-credibility__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-trust-credibility__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.sp-trust-credibility__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-trust-credibility__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trust-credibility__text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

.sp-trust-credibility__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sp-trust-credibility__item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-trust-credibility__item--1:hover {
    transform: translateX(4px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--2:hover {
    transform: translateX(-4px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--3:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--4:hover {
    transform: translateX(4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--5:hover {
    transform: translateX(-4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--6:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--7:hover {
    transform: translateX(4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--8:hover {
    transform: translateX(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--9:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--10:hover {
    transform: translateX(4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--11:hover {
    transform: translateX(-4px) translateY(-3px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item--12:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-trust-credibility__item-icon {
    font-size: 12px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-credibility__item:hover .sp-trust-credibility__item-icon {
    transform: scale(1.3);
}

.sp-trust-credibility__item-text {
    font-size: 12px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-trust-credibility__item:hover .sp-trust-credibility__item-text {
    color: #84c615;
}

.sp-trust-credibility__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-credibility__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-trust-credibility__conclusion-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}

.sp-trust-credibility__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trust-credibility__signals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-trust-credibility__signal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-trust-credibility__signal--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trust-credibility__signal--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trust-credibility__signal--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trust-credibility__signal--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trust-credibility__signal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-trust-credibility__signal:hover::before {
    left: 100%;
}

.sp-trust-credibility__signal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-trust-credibility__signal:hover::after {
    opacity: 1;
}

.sp-trust-credibility__signal-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-credibility__signal--1:hover .sp-trust-credibility__signal-icon { transform: scale(1.15) rotate(-5deg); }
.sp-trust-credibility__signal--2:hover .sp-trust-credibility__signal-icon { transform: scale(1.2) rotate(5deg); }
.sp-trust-credibility__signal--3:hover .sp-trust-credibility__signal-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-trust-credibility__signal--4:hover .sp-trust-credibility__signal-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-trust-credibility__signal-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-trust-credibility__signal:hover .sp-trust-credibility__signal-label {
    color: #84c615;
}

.sp-trust-credibility__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-credibility__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-trust-credibility__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trust-credibility__trust-box:hover .sp-trust-credibility__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-trust-credibility__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   RESPONSIVE DESIGN (All Sections)
   ============================================================ */

@media (max-width: 1024px) {
    .sp-clarity-design__title,
    .sp-mental-load__title,
    .sp-trust-credibility__title {
        font-size: 34px;
    }

    .sp-clarity-design__grid,
    .sp-mental-load__grid,
    .sp-trust-credibility__grid {
        gap: 40px;
    }

    .sp-trust-credibility__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-clarity-design__principles,
    .sp-mental-load__indicators,
    .sp-trust-credibility__signals {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-clarity-design__title,
    .sp-mental-load__title,
    .sp-trust-credibility__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-clarity-design__title::after,
    .sp-mental-load__title::after,
    .sp-trust-credibility__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-clarity-design__subtitle,
    .sp-mental-load__subtitle,
    .sp-trust-credibility__subtitle {
        font-size: 16px;
    }

    .sp-clarity-design__grid,
    .sp-mental-load__grid,
    .sp-trust-credibility__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-clarity-design__text,
    .sp-mental-load__text,
    .sp-trust-credibility__text {
        font-size: 16px;
    }

    .sp-clarity-design__list,
    .sp-mental-load__list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-clarity-design__item,
    .sp-mental-load__item {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-clarity-design__item-text,
    .sp-mental-load__item-text {
        font-size: 13px;
    }

    .sp-trust-credibility__list {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .sp-trust-credibility__item {
        padding: 4px 8px;
        gap: 6px;
        border-radius: 6px;
    }

    .sp-trust-credibility__item-text {
        font-size: 11px;
    }

    .sp-clarity-design__principles,
    .sp-mental-load__indicators,
    .sp-trust-credibility__signals {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-clarity-design__principle,
    .sp-mental-load__indicator,
    .sp-trust-credibility__signal {
        padding: 14px 10px;
        border-radius: 12px;
    }

    .sp-clarity-design__principle-icon,
    .sp-mental-load__indicator-icon,
    .sp-trust-credibility__signal-icon {
        font-size: 22px;
    }

    .sp-clarity-design__principle-label,
    .sp-mental-load__indicator-label,
    .sp-trust-credibility__signal-label {
        font-size: 12px;
    }

    .sp-clarity-design__conclusion,
    .sp-trust-credibility__conclusion {
        padding: 14px 16px;
    }

    .sp-clarity-design__conclusion-text,
    .sp-trust-credibility__conclusion-text {
        font-size: 16px;
    }

    .sp-mental-load__conclusion {
        padding: 14px 18px;
    }

    .sp-mental-load__conclusion-text {
        font-size: 15px;
    }

    .sp-mental-load__conclusion-highlight {
        font-size: 17px;
    }

    .sp-clarity-design__trust-box,
    .sp-mental-load__trust-box,
    .sp-trust-credibility__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-clarity-design__trust-text,
    .sp-mental-load__trust-text,
    .sp-trust-credibility__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-clarity-design__item--1:hover,
    .sp-clarity-design__item--2:hover,
    .sp-clarity-design__item--3:hover,
    .sp-clarity-design__item--4:hover,
    .sp-mental-load__item--1:hover,
    .sp-mental-load__item--2:hover,
    .sp-mental-load__item--3:hover,
    .sp-mental-load__item--4:hover,
    .sp-mental-load__item--5:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-clarity-design__principle--1:hover,
    .sp-clarity-design__principle--2:hover,
    .sp-clarity-design__principle--3:hover,
    .sp-clarity-design__principle--4:hover,
    .sp-mental-load__indicator--1:hover,
    .sp-mental-load__indicator--2:hover,
    .sp-mental-load__indicator--3:hover,
    .sp-mental-load__indicator--4:hover,
    .sp-trust-credibility__signal--1:hover,
    .sp-trust-credibility__signal--2:hover,
    .sp-trust-credibility__signal--3:hover,
    .sp-trust-credibility__signal--4:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-trust-credibility__item--1:hover,
    .sp-trust-credibility__item--2:hover,
    .sp-trust-credibility__item--3:hover,
    .sp-trust-credibility__item--4:hover,
    .sp-trust-credibility__item--5:hover,
    .sp-trust-credibility__item--6:hover,
    .sp-trust-credibility__item--7:hover,
    .sp-trust-credibility__item--8:hover,
    .sp-trust-credibility__item--9:hover,
    .sp-trust-credibility__item--10:hover,
    .sp-trust-credibility__item--11:hover,
    .sp-trust-credibility__item--12:hover {
        transform: translateX(3px) scale(1.01);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-clarity-design__badge,
    .sp-mental-load__badge,
    .sp-trust-credibility__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-clarity-design__title,
    .sp-mental-load__title,
    .sp-trust-credibility__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-clarity-design__title::after,
    .sp-mental-load__title::after,
    .sp-trust-credibility__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-clarity-design__subtitle,
    .sp-mental-load__subtitle,
    .sp-trust-credibility__subtitle {
        font-size: 14px;
    }

    .sp-clarity-design__text,
    .sp-mental-load__text,
    .sp-trust-credibility__text {
        font-size: 15px;
    }

    .sp-clarity-design__list,
    .sp-mental-load__list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-clarity-design__item,
    .sp-mental-load__item {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-clarity-design__item-text,
    .sp-mental-load__item-text {
        font-size: 13px;
    }

    .sp-trust-credibility__list {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .sp-trust-credibility__item {
        padding: 4px 6px;
        gap: 4px;
        border-radius: 4px;
    }

    .sp-trust-credibility__item-text {
        font-size: 10px;
    }

    .sp-trust-credibility__item-icon {
        font-size: 10px;
    }

    .sp-clarity-design__principles,
    .sp-mental-load__indicators,
    .sp-trust-credibility__signals {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-clarity-design__principle,
    .sp-mental-load__indicator,
    .sp-trust-credibility__signal {
        padding: 12px 8px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-clarity-design__principle-number {
        font-size: 10px;
    }

    .sp-clarity-design__principle-icon,
    .sp-mental-load__indicator-icon,
    .sp-trust-credibility__signal-icon {
        font-size: 20px;
    }

    .sp-clarity-design__principle-label,
    .sp-mental-load__indicator-label,
    .sp-trust-credibility__signal-label {
        font-size: 11px;
    }

    .sp-clarity-design__conclusion,
    .sp-trust-credibility__conclusion {
        padding: 12px 14px;
        border-left-width: 4px;
        border-radius: 12px;
    }

    .sp-clarity-design__conclusion-text,
    .sp-trust-credibility__conclusion-text {
        font-size: 15px;
    }

    .sp-mental-load__conclusion {
        padding: 12px 14px;
    }

    .sp-mental-load__conclusion-text {
        font-size: 14px;
    }

    .sp-mental-load__conclusion-highlight {
        font-size: 15px;
    }

    .sp-clarity-design__trust-box,
    .sp-mental-load__trust-box,
    .sp-trust-credibility__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-clarity-design__trust-text,
    .sp-mental-load__trust-text,
    .sp-trust-credibility__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}

/* PROFESSIONAL WEB DESIGN SERVICES TRICHY */


/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ============================================================
   SERVICE SHOWCASE - CYCLIC 1
   ============================================================ */

.sp-service-showcase__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-service-showcase__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-service-showcase__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-service-showcase__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-service-showcase__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-service-showcase__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-service-showcase__subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5268;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
}

/* Industry Cards */
.sp-service-showcase__industries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sp-service-showcase__industry {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    border: 2px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-service-showcase__industry--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__industry--2:hover {
    transform: translateY(-8px) rotate(-1deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__industry--3:hover {
    transform: translateY(-4px) rotate(1deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__industry--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__industry-icon {
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__industry:hover .sp-service-showcase__industry-icon {
    transform: scale(1.2) rotate(-5deg);
}

.sp-service-showcase__industry-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    transition: all 0.3s ease;
}

.sp-service-showcase__industry:hover .sp-service-showcase__industry-label {
    color: #84c615;
}

.sp-service-showcase__industry-desc {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

/* Highlight */
.sp-service-showcase__highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #e6f5ef;
    border-radius: 12px;
    padding: 14px 20px;
    border-bottom: 3px solid #84c615;
    margin-bottom: 32px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-service-showcase__highlight-icon {
    font-size: 18px;
    color: #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__highlight:hover .sp-service-showcase__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-service-showcase__highlight-text {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* Grid */
.sp-service-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-service-showcase__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sp-service-showcase__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__feature--1:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-service-showcase__feature--2 {
    background: #e6f5ef;
    border-color: #84c615;
    border-left: 4px solid #84c615;
}

.sp-service-showcase__feature--2:hover {
    background: #d4f0e0;
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__feature-icon {
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__feature:hover .sp-service-showcase__feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

.sp-service-showcase__feature--2:hover .sp-service-showcase__feature-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-service-showcase__feature-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-service-showcase__feature-title {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
}

.sp-service-showcase__feature-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5268;
    text-align: justify;
}

.sp-service-showcase__feature--2 .sp-service-showcase__feature-title {
    color: #000000;
}

.sp-service-showcase__feature--2 .sp-service-showcase__feature-desc {
    color: #1a1f36;
}

/* Visual */
.sp-service-showcase__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-service-showcase__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-service-showcase__stat {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-service-showcase__stat--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__stat--2:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__stat--3:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__stat--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(132, 198, 21, 0.08);
}

.sp-service-showcase__stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #84c615;
    line-height: 1.2;
}

.sp-service-showcase__stat-label {
    display: block;
    font-size: 13px;
    color: #4a5268;
    margin-top: 4px;
    line-height: 1.4;
}

.sp-service-showcase__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-service-showcase__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-service-showcase__trust-box:hover .sp-service-showcase__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-service-showcase__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   CUSTOM CREATIVE - CYCLIC 1
   ============================================================ */

.sp-custom-creative__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-custom-creative__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-custom-creative__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-custom-creative__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-custom-creative__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-custom-creative__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-custom-creative__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

/* Elements */
.sp-custom-creative__elements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.sp-custom-creative__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-custom-creative__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__element-icon {
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__element:hover .sp-custom-creative__element-icon {
    transform: scale(1.15);
}

.sp-custom-creative__element-label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-custom-creative__element:hover .sp-custom-creative__element-label {
    color: #84c615;
}

/* Highlight */
.sp-custom-creative__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    margin-bottom: 32px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-custom-creative__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__highlight:hover .sp-custom-creative__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-custom-creative__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}

/* Grid */
.sp-custom-creative__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    margin-bottom: 32px;
}

.sp-custom-creative__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sp-custom-creative__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-custom-creative__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-custom-creative__feature-icon {
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__feature:hover .sp-custom-creative__feature-icon {
    transform: scale(1.15) rotate(-5deg);
}

.sp-custom-creative__feature-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-custom-creative__feature:hover .sp-custom-creative__feature-label {
    color: #84c615;
}

/* Visual */
.sp-custom-creative__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-custom-creative__principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-custom-creative__principle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-custom-creative__principle--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-custom-creative__principle--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-custom-creative__principle--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-custom-creative__principle--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-custom-creative__principle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-custom-creative__principle:hover::before {
    left: 100%;
}

.sp-custom-creative__principle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-custom-creative__principle:hover::after {
    opacity: 1;
}

.sp-custom-creative__principle-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__principle:hover .sp-custom-creative__principle-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-custom-creative__principle-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__principle--1:hover .sp-custom-creative__principle-icon { transform: scale(1.15) rotate(-5deg); }
.sp-custom-creative__principle--2:hover .sp-custom-creative__principle-icon { transform: scale(1.2) rotate(5deg); }
.sp-custom-creative__principle--3:hover .sp-custom-creative__principle-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-custom-creative__principle--4:hover .sp-custom-creative__principle-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-custom-creative__principle-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-custom-creative__principle:hover .sp-custom-creative__principle-label {
    color: #84c615;
}

.sp-custom-creative__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-custom-creative__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__trust-box:hover .sp-custom-creative__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-custom-creative__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}

/* Conclusion */
.sp-custom-creative__conclusion {
    background: #e6f5ef;
    border-radius: 16px;
    padding: 20px 26px;
    border-left: 5px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-custom-creative__conclusion-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sp-custom-creative__conclusion-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-custom-creative__conclusion:hover .sp-custom-creative__conclusion-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-custom-creative__conclusion-text {
    font-size: 18px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
    text-align: justify;
}


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

@media (max-width: 1024px) {
    .sp-service-showcase__title,
    .sp-custom-creative__title {
        font-size: 34px;
    }

    .sp-service-showcase__industries {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-service-showcase__grid,
    .sp-custom-creative__grid {
        gap: 40px;
    }

    .sp-custom-creative__elements {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-service-showcase__title,
    .sp-custom-creative__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-service-showcase__title::after,
    .sp-custom-creative__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-service-showcase__subtitle,
    .sp-custom-creative__subtitle {
        font-size: 16px;
    }

    .sp-service-showcase__industries {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sp-service-showcase__industry {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .sp-service-showcase__industry-icon {
        font-size: 28px;
    }

    .sp-service-showcase__industry-label {
        font-size: 14px;
    }

    .sp-service-showcase__industry-desc {
        font-size: 12px;
    }

    .sp-service-showcase__highlight {
        padding: 12px 16px;
    }

    .sp-service-showcase__highlight-text {
        font-size: 16px;
    }

    .sp-service-showcase__grid,
    .sp-custom-creative__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-service-showcase__feature {
        padding: 16px 18px;
        gap: 14px;
    }

    .sp-service-showcase__feature-icon {
        font-size: 24px;
    }

    .sp-service-showcase__feature-title {
        font-size: 16px;
    }

    .sp-service-showcase__feature-desc {
        font-size: 14px;
    }

    .sp-service-showcase__stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-service-showcase__stat {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .sp-service-showcase__stat-number {
        font-size: 24px;
    }

    .sp-service-showcase__stat-label {
        font-size: 12px;
    }

    .sp-service-showcase__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-service-showcase__trust-text {
        font-size: 16px;
    }

    .sp-custom-creative__elements {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-custom-creative__element {
        padding: 8px 12px;
    }

    .sp-custom-creative__element-label {
        font-size: 13px;
    }

    .sp-custom-creative__highlight {
        padding: 14px 18px;
    }

    .sp-custom-creative__highlight-text {
        font-size: 16px;
    }

    .sp-custom-creative__features {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-custom-creative__feature {
        padding: 8px 12px;
    }

    .sp-custom-creative__feature-label {
        font-size: 12px;
    }

    .sp-custom-creative__principles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-custom-creative__principle {
        padding: 14px 10px;
        border-radius: 12px;
    }

    .sp-custom-creative__principle-icon {
        font-size: 22px;
    }

    .sp-custom-creative__principle-label {
        font-size: 12px;
    }

    .sp-custom-creative__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-custom-creative__trust-text {
        font-size: 16px;
    }

    .sp-custom-creative__conclusion {
        padding: 16px 20px;
        border-left-width: 4px;
    }

    .sp-custom-creative__conclusion-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile */
    .sp-service-showcase__industry--1:hover,
    .sp-service-showcase__industry--2:hover,
    .sp-service-showcase__industry--3:hover,
    .sp-service-showcase__industry--4:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-service-showcase__feature--1:hover,
    .sp-service-showcase__feature--2:hover {
        transform: translateY(-3px) scale(1.01);
    }

    .sp-service-showcase__stat--1:hover,
    .sp-service-showcase__stat--2:hover,
    .sp-service-showcase__stat--3:hover,
    .sp-service-showcase__stat--4:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .sp-custom-creative__element--1:hover,
    .sp-custom-creative__element--2:hover,
    .sp-custom-creative__element--3:hover,
    .sp-custom-creative__element--4:hover,
    .sp-custom-creative__element--5:hover,
    .sp-custom-creative__element--6:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-custom-creative__feature--1:hover,
    .sp-custom-creative__feature--2:hover,
    .sp-custom-creative__feature--3:hover,
    .sp-custom-creative__feature--4:hover,
    .sp-custom-creative__feature--5:hover,
    .sp-custom-creative__feature--6:hover,
    .sp-custom-creative__feature--7:hover,
    .sp-custom-creative__feature--8:hover {
        transform: translateX(3px) scale(1.01);
    }

    .sp-custom-creative__principle--1:hover,
    .sp-custom-creative__principle--2:hover,
    .sp-custom-creative__principle--3:hover,
    .sp-custom-creative__principle--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-service-showcase__badge,
    .sp-custom-creative__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-service-showcase__title,
    .sp-custom-creative__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-service-showcase__title::after,
    .sp-custom-creative__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-service-showcase__subtitle,
    .sp-custom-creative__subtitle {
        font-size: 14px;
    }

    .sp-service-showcase__industries {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-service-showcase__industry {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .sp-service-showcase__industry-icon {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .sp-service-showcase__industry-label {
        font-size: 13px;
    }

    .sp-service-showcase__industry-desc {
        font-size: 11px;
    }

    .sp-service-showcase__highlight {
        padding: 10px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .sp-service-showcase__highlight-text {
        font-size: 15px;
    }

    .sp-service-showcase__feature {
        padding: 14px 16px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-service-showcase__feature-icon {
        font-size: 22px;
    }

    .sp-service-showcase__feature-title {
        font-size: 15px;
    }

    .sp-service-showcase__feature-desc {
        font-size: 14px;
    }

    .sp-service-showcase__stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-service-showcase__stat {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .sp-service-showcase__stat-number {
        font-size: 22px;
    }

    .sp-service-showcase__stat-label {
        font-size: 11px;
    }

    .sp-service-showcase__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-service-showcase__trust-text {
        font-size: 15px;
    }

    .sp-custom-creative__elements {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-custom-creative__element {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-custom-creative__element-icon {
        font-size: 16px;
    }

    .sp-custom-creative__element-label {
        font-size: 12px;
    }

    .sp-custom-creative__highlight {
        padding: 12px 14px;
        gap: 10px;
    }

    .sp-custom-creative__highlight-text {
        font-size: 15px;
    }

    .sp-custom-creative__features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-custom-creative__feature {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .sp-custom-creative__feature-icon {
        font-size: 16px;
    }

    .sp-custom-creative__feature-label {
        font-size: 11px;
    }

    .sp-custom-creative__principles {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-custom-creative__principle {
        padding: 12px 8px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-custom-creative__principle-number {
        font-size: 10px;
    }

    .sp-custom-creative__principle-icon {
        font-size: 20px;
    }

    .sp-custom-creative__principle-label {
        font-size: 11px;
    }

    .sp-custom-creative__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-custom-creative__trust-text {
        font-size: 15px;
    }

    .sp-custom-creative__conclusion {
        padding: 14px 16px;
        border-left-width: 4px;
        border-radius: 12px;
    }

    .sp-custom-creative__conclusion-content {
        gap: 12px;
    }

    .sp-custom-creative__conclusion-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ============================================================
   SECTION 1 — UX EXPERIENCE (CYCLIC 1)
   ============================================================ */

.sp-ux-experience__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-ux-experience__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-ux-experience__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-ux-experience__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-ux-experience__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-ux-experience__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-ux-experience__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-ux-experience__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-ux-experience__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-ux-experience__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
}

.sp-ux-experience__text--highlight {
    font-size: 20px;
    font-weight: 600;
    color: #84c615;
    margin: 0 0 8px 0;
}

.sp-ux-experience__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-ux-experience__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-ux-experience__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-experience__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-experience__feature:hover .sp-ux-experience__feature-icon {
    transform: scale(1.3);
}

.sp-ux-experience__feature-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-ux-experience__feature:hover .sp-ux-experience__feature-label {
    color: #84c615;
}

.sp-ux-experience__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-experience__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-ux-experience__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-ux-experience__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-ux-experience__principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-ux-experience__principle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-ux-experience__principle--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-experience__principle--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-experience__principle--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-experience__principle--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-experience__principle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-ux-experience__principle:hover::before {
    left: 100%;
}

.sp-ux-experience__principle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-ux-experience__principle:hover::after {
    opacity: 1;
}

.sp-ux-experience__principle-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-experience__principle:hover .sp-ux-experience__principle-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-ux-experience__principle-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-experience__principle--1:hover .sp-ux-experience__principle-icon { transform: scale(1.15) rotate(-5deg); }
.sp-ux-experience__principle--2:hover .sp-ux-experience__principle-icon { transform: scale(1.2) rotate(5deg); }
.sp-ux-experience__principle--3:hover .sp-ux-experience__principle-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-ux-experience__principle--4:hover .sp-ux-experience__principle-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-ux-experience__principle-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-ux-experience__principle:hover .sp-ux-experience__principle-label {
    color: #84c615;
}

.sp-ux-experience__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-experience__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ux-experience__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-experience__trust-box:hover .sp-ux-experience__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-ux-experience__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 2 — LANDING MASTER (CYCLIC 2)
   ============================================================ */

.sp-landing-master__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-landing-master__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-landing-master__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-landing-master__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-landing-master__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-landing-master__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-landing-master__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-landing-master__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-landing-master__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-landing-master__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-landing-master__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-landing-master__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-landing-master__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-landing-master__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-landing-master__feature:hover .sp-landing-master__feature-icon {
    transform: scale(1.3);
}

.sp-landing-master__feature-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-landing-master__feature:hover .sp-landing-master__feature-label {
    color: #84c615;
}

.sp-landing-master__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-landing-master__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-landing-master__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-landing-master__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-landing-master__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-landing-master__element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-landing-master__element--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-landing-master__element--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-landing-master__element--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-landing-master__element--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-landing-master__element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-landing-master__element:hover::before {
    left: 100%;
}

.sp-landing-master__element::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-landing-master__element:hover::after {
    opacity: 1;
}

.sp-landing-master__element-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-landing-master__element:hover .sp-landing-master__element-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-landing-master__element-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-landing-master__element--1:hover .sp-landing-master__element-icon { transform: scale(1.15) rotate(-5deg); }
.sp-landing-master__element--2:hover .sp-landing-master__element-icon { transform: scale(1.2) rotate(5deg); }
.sp-landing-master__element--3:hover .sp-landing-master__element-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-landing-master__element--4:hover .sp-landing-master__element-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-landing-master__element-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-landing-master__element:hover .sp-landing-master__element-label {
    color: #84c615;
}

.sp-landing-master__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-landing-master__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-landing-master__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-landing-master__trust-box:hover .sp-landing-master__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-landing-master__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 3 — SHOP CRAFT (CYCLIC 1)
   ============================================================ */

.sp-shop-craft__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-shop-craft__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-shop-craft__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-shop-craft__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-shop-craft__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-shop-craft__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-shop-craft__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-shop-craft__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-shop-craft__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-shop-craft__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-shop-craft__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-shop-craft__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--9:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature--10:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-shop-craft__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-shop-craft__feature:hover .sp-shop-craft__feature-icon {
    transform: scale(1.3);
}

.sp-shop-craft__feature-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-shop-craft__feature:hover .sp-shop-craft__feature-label {
    color: #84c615;
}

.sp-shop-craft__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-bottom: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-shop-craft__conclusion:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-shop-craft__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-shop-craft__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-shop-craft__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-shop-craft__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-shop-craft__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-shop-craft__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-shop-craft__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-shop-craft__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-shop-craft__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-shop-craft__pillar:hover::before {
    left: 100%;
}

.sp-shop-craft__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-shop-craft__pillar:hover::after {
    opacity: 1;
}

.sp-shop-craft__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-shop-craft__pillar--1:hover .sp-shop-craft__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-shop-craft__pillar--2:hover .sp-shop-craft__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-shop-craft__pillar--3:hover .sp-shop-craft__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-shop-craft__pillar--4:hover .sp-shop-craft__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-shop-craft__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-shop-craft__pillar:hover .sp-shop-craft__pillar-label {
    color: #84c615;
}

.sp-shop-craft__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-shop-craft__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-shop-craft__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-shop-craft__trust-box:hover .sp-shop-craft__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-shop-craft__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 4 — PORTFOLIO SHOWCASE (CYCLIC 2)
   ============================================================ */

.sp-portfolio-showcase__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-portfolio-showcase__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-portfolio-showcase__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-portfolio-showcase__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-portfolio-showcase__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-portfolio-showcase__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-portfolio-showcase__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-portfolio-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-portfolio-showcase__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-portfolio-showcase__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-portfolio-showcase__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-portfolio-showcase__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-portfolio-showcase__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-portfolio-showcase__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-portfolio-showcase__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-portfolio-showcase__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-portfolio-showcase__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-portfolio-showcase__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-portfolio-showcase__feature:hover .sp-portfolio-showcase__feature-icon {
    transform: scale(1.3);
}

.sp-portfolio-showcase__feature-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-portfolio-showcase__feature:hover .sp-portfolio-showcase__feature-label {
    color: #84c615;
}

.sp-portfolio-showcase__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-portfolio-showcase__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-portfolio-showcase__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-portfolio-showcase__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-portfolio-showcase__types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-portfolio-showcase__type {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-portfolio-showcase__type--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-portfolio-showcase__type--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-portfolio-showcase__type--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-portfolio-showcase__type--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-portfolio-showcase__type::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-portfolio-showcase__type:hover::before {
    left: 100%;
}

.sp-portfolio-showcase__type::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-portfolio-showcase__type:hover::after {
    opacity: 1;
}

.sp-portfolio-showcase__type-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-portfolio-showcase__type--1:hover .sp-portfolio-showcase__type-icon { transform: scale(1.15) rotate(-5deg); }
.sp-portfolio-showcase__type--2:hover .sp-portfolio-showcase__type-icon { transform: scale(1.2) rotate(5deg); }
.sp-portfolio-showcase__type--3:hover .sp-portfolio-showcase__type-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-portfolio-showcase__type--4:hover .sp-portfolio-showcase__type-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-portfolio-showcase__type-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-portfolio-showcase__type:hover .sp-portfolio-showcase__type-label {
    color: #84c615;
}

.sp-portfolio-showcase__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-portfolio-showcase__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-portfolio-showcase__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-portfolio-showcase__trust-box:hover .sp-portfolio-showcase__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-portfolio-showcase__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 5 — EDUCATION CRAFT (CYCLIC 1)
   ============================================================ */

.sp-education-craft__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-education-craft__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-education-craft__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-education-craft__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-education-craft__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-education-craft__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-education-craft__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-education-craft__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-education-craft__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-education-craft__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-education-craft__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-education-craft__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-education-craft__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-education-craft__feature:hover .sp-education-craft__feature-icon {
    transform: scale(1.3);
}

.sp-education-craft__feature-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-education-craft__feature:hover .sp-education-craft__feature-label {
    color: #84c615;
}

.sp-education-craft__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-education-craft__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-education-craft__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-education-craft__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-education-craft__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-education-craft__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-education-craft__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-education-craft__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-education-craft__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-education-craft__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-education-craft__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-education-craft__pillar:hover::before {
    left: 100%;
}

.sp-education-craft__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-education-craft__pillar:hover::after {
    opacity: 1;
}

.sp-education-craft__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-education-craft__pillar--1:hover .sp-education-craft__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-education-craft__pillar--2:hover .sp-education-craft__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-education-craft__pillar--3:hover .sp-education-craft__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-education-craft__pillar--4:hover .sp-education-craft__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-education-craft__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-education-craft__pillar:hover .sp-education-craft__pillar-label {
    color: #84c615;
}

.sp-education-craft__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-education-craft__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-education-craft__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-education-craft__trust-box:hover .sp-education-craft__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-education-craft__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 6 — HEALTHCARE TRUST (CYCLIC 2)
   ============================================================ */

.sp-healthcare-trust__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-healthcare-trust__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-healthcare-trust__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-healthcare-trust__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-healthcare-trust__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-healthcare-trust__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-healthcare-trust__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-healthcare-trust__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-healthcare-trust__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-healthcare-trust__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-healthcare-trust__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-healthcare-trust__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-healthcare-trust__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-healthcare-trust__feature:hover .sp-healthcare-trust__feature-icon {
    transform: scale(1.3);
}

.sp-healthcare-trust__feature-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-healthcare-trust__feature:hover .sp-healthcare-trust__feature-label {
    color: #84c615;
}

.sp-healthcare-trust__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-healthcare-trust__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-healthcare-trust__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-healthcare-trust__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-healthcare-trust__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-healthcare-trust__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-healthcare-trust__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-healthcare-trust__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-healthcare-trust__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-healthcare-trust__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-healthcare-trust__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-healthcare-trust__pillar:hover::before {
    left: 100%;
}

.sp-healthcare-trust__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-healthcare-trust__pillar:hover::after {
    opacity: 1;
}

.sp-healthcare-trust__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-healthcare-trust__pillar--1:hover .sp-healthcare-trust__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-healthcare-trust__pillar--2:hover .sp-healthcare-trust__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-healthcare-trust__pillar--3:hover .sp-healthcare-trust__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-healthcare-trust__pillar--4:hover .sp-healthcare-trust__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-healthcare-trust__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-healthcare-trust__pillar:hover .sp-healthcare-trust__pillar-label {
    color: #84c615;
}

.sp-healthcare-trust__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-healthcare-trust__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-healthcare-trust__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-healthcare-trust__trust-box:hover .sp-healthcare-trust__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-healthcare-trust__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 7 — MANUFACTURE PRO (CYCLIC 1)
   ============================================================ */

.sp-manufacture-pro__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-manufacture-pro__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-manufacture-pro__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-manufacture-pro__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-manufacture-pro__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-manufacture-pro__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-manufacture-pro__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-manufacture-pro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-manufacture-pro__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-manufacture-pro__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-manufacture-pro__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-manufacture-pro__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature--9:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-manufacture-pro__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-manufacture-pro__feature:hover .sp-manufacture-pro__feature-icon {
    transform: scale(1.3);
}

.sp-manufacture-pro__feature-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-manufacture-pro__feature:hover .sp-manufacture-pro__feature-label {
    color: #84c615;
}

.sp-manufacture-pro__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-manufacture-pro__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-manufacture-pro__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-manufacture-pro__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-manufacture-pro__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-manufacture-pro__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-manufacture-pro__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-manufacture-pro__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-manufacture-pro__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-manufacture-pro__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-manufacture-pro__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-manufacture-pro__pillar:hover::before {
    left: 100%;
}

.sp-manufacture-pro__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-manufacture-pro__pillar:hover::after {
    opacity: 1;
}

.sp-manufacture-pro__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-manufacture-pro__pillar--1:hover .sp-manufacture-pro__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-manufacture-pro__pillar--2:hover .sp-manufacture-pro__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-manufacture-pro__pillar--3:hover .sp-manufacture-pro__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-manufacture-pro__pillar--4:hover .sp-manufacture-pro__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-manufacture-pro__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-manufacture-pro__pillar:hover .sp-manufacture-pro__pillar-label {
    color: #84c615;
}

.sp-manufacture-pro__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-manufacture-pro__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-manufacture-pro__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-manufacture-pro__trust-box:hover .sp-manufacture-pro__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-manufacture-pro__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 8 — HOSPITALITY ELEGANCE (CYCLIC 2)
   ============================================================ */

.sp-hospitality-elegance__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-hospitality-elegance__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-hospitality-elegance__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-hospitality-elegance__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-hospitality-elegance__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-hospitality-elegance__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-hospitality-elegance__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-hospitality-elegance__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-hospitality-elegance__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-hospitality-elegance__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-hospitality-elegance__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-hospitality-elegance__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-hospitality-elegance__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-elegance__feature:hover .sp-hospitality-elegance__feature-icon {
    transform: scale(1.3);
}

.sp-hospitality-elegance__feature-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-hospitality-elegance__feature:hover .sp-hospitality-elegance__feature-label {
    color: #84c615;
}

.sp-hospitality-elegance__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-elegance__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-elegance__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-hospitality-elegance__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-hospitality-elegance__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-hospitality-elegance__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-hospitality-elegance__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-elegance__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-elegance__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-elegance__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-elegance__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-hospitality-elegance__pillar:hover::before {
    left: 100%;
}

.sp-hospitality-elegance__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-hospitality-elegance__pillar:hover::after {
    opacity: 1;
}

.sp-hospitality-elegance__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-elegance__pillar--1:hover .sp-hospitality-elegance__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-hospitality-elegance__pillar--2:hover .sp-hospitality-elegance__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-hospitality-elegance__pillar--3:hover .sp-hospitality-elegance__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-hospitality-elegance__pillar--4:hover .sp-hospitality-elegance__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-hospitality-elegance__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-hospitality-elegance__pillar:hover .sp-hospitality-elegance__pillar-label {
    color: #84c615;
}

.sp-hospitality-elegance__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-elegance__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-hospitality-elegance__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-hospitality-elegance__trust-box:hover .sp-hospitality-elegance__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-hospitality-elegance__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 9 — PROPERTY CRAFT (CYCLIC 1)
   ============================================================ */

.sp-property-craft__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-property-craft__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-property-craft__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-property-craft__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-property-craft__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-property-craft__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-property-craft__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-property-craft__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-property-craft__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-property-craft__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-property-craft__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-property-craft__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-property-craft__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-property-craft__feature:hover .sp-property-craft__feature-icon {
    transform: scale(1.3);
}

.sp-property-craft__feature-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-property-craft__feature:hover .sp-property-craft__feature-label {
    color: #84c615;
}

.sp-property-craft__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-property-craft__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-property-craft__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-property-craft__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-property-craft__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-property-craft__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-property-craft__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-property-craft__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-property-craft__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-property-craft__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-property-craft__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-property-craft__pillar:hover::before {
    left: 100%;
}

.sp-property-craft__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-property-craft__pillar:hover::after {
    opacity: 1;
}

.sp-property-craft__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-property-craft__pillar--1:hover .sp-property-craft__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-property-craft__pillar--2:hover .sp-property-craft__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-property-craft__pillar--3:hover .sp-property-craft__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-property-craft__pillar--4:hover .sp-property-craft__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-property-craft__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-property-craft__pillar:hover .sp-property-craft__pillar-label {
    color: #84c615;
}

.sp-property-craft__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-property-craft__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-property-craft__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-property-craft__trust-box:hover .sp-property-craft__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-property-craft__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 10 — CONSTRUCT BUILD (CYCLIC 2)
   ============================================================ */

.sp-construct-build__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-construct-build__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-construct-build__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-construct-build__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-construct-build__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-construct-build__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-construct-build__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-construct-build__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-construct-build__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-construct-build__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-construct-build__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-construct-build__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-construct-build__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-construct-build__feature:hover .sp-construct-build__feature-icon {
    transform: scale(1.3);
}

.sp-construct-build__feature-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-construct-build__feature:hover .sp-construct-build__feature-label {
    color: #84c615;
}

.sp-construct-build__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-construct-build__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-construct-build__conclusion-text {
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-construct-build__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-construct-build__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-construct-build__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-construct-build__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-construct-build__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-construct-build__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-construct-build__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-construct-build__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-construct-build__pillar:hover::before {
    left: 100%;
}

.sp-construct-build__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-construct-build__pillar:hover::after {
    opacity: 1;
}

.sp-construct-build__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-construct-build__pillar--1:hover .sp-construct-build__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-construct-build__pillar--2:hover .sp-construct-build__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-construct-build__pillar--3:hover .sp-construct-build__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-construct-build__pillar--4:hover .sp-construct-build__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-construct-build__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-construct-build__pillar:hover .sp-construct-build__pillar-label {
    color: #84c615;
}

.sp-construct-build__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-construct-build__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-construct-build__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-construct-build__trust-box:hover .sp-construct-build__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-construct-build__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   RESPONSIVE DESIGN (ALL SECTIONS)
   ============================================================ */

@media (max-width: 1024px) {
    .sp-ux-experience__title,
    .sp-landing-master__title,
    .sp-shop-craft__title,
    .sp-portfolio-showcase__title,
    .sp-education-craft__title,
    .sp-healthcare-trust__title,
    .sp-manufacture-pro__title,
    .sp-hospitality-elegance__title,
    .sp-property-craft__title,
    .sp-construct-build__title {
        font-size: 34px;
    }

    .sp-ux-experience__grid,
    .sp-landing-master__grid,
    .sp-shop-craft__grid,
    .sp-portfolio-showcase__grid,
    .sp-education-craft__grid,
    .sp-healthcare-trust__grid,
    .sp-manufacture-pro__grid,
    .sp-hospitality-elegance__grid,
    .sp-property-craft__grid,
    .sp-construct-build__grid {
        gap: 40px;
    }

    .sp-ux-experience__features,
    .sp-landing-master__features,
    .sp-shop-craft__features,
    .sp-portfolio-showcase__features,
    .sp-education-craft__features,
    .sp-healthcare-trust__features,
    .sp-manufacture-pro__features,
    .sp-hospitality-elegance__features,
    .sp-property-craft__features,
    .sp-construct-build__features {
        grid-template-columns: 1fr 1fr;
    }

    .sp-ux-experience__principles,
    .sp-landing-master__elements,
    .sp-shop-craft__pillars,
    .sp-portfolio-showcase__types,
    .sp-education-craft__pillars,
    .sp-healthcare-trust__pillars,
    .sp-manufacture-pro__pillars,
    .sp-hospitality-elegance__pillars,
    .sp-property-craft__pillars,
    .sp-construct-build__pillars {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-ux-experience__title,
    .sp-landing-master__title,
    .sp-shop-craft__title,
    .sp-portfolio-showcase__title,
    .sp-education-craft__title,
    .sp-healthcare-trust__title,
    .sp-manufacture-pro__title,
    .sp-hospitality-elegance__title,
    .sp-property-craft__title,
    .sp-construct-build__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-ux-experience__title::after,
    .sp-landing-master__title::after,
    .sp-shop-craft__title::after,
    .sp-portfolio-showcase__title::after,
    .sp-education-craft__title::after,
    .sp-healthcare-trust__title::after,
    .sp-manufacture-pro__title::after,
    .sp-hospitality-elegance__title::after,
    .sp-property-craft__title::after,
    .sp-construct-build__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-ux-experience__subtitle,
    .sp-landing-master__subtitle,
    .sp-shop-craft__subtitle,
    .sp-portfolio-showcase__subtitle,
    .sp-education-craft__subtitle,
    .sp-healthcare-trust__subtitle,
    .sp-manufacture-pro__subtitle,
    .sp-hospitality-elegance__subtitle,
    .sp-property-craft__subtitle,
    .sp-construct-build__subtitle {
        font-size: 16px;
    }

    .sp-ux-experience__grid,
    .sp-landing-master__grid,
    .sp-shop-craft__grid,
    .sp-portfolio-showcase__grid,
    .sp-education-craft__grid,
    .sp-healthcare-trust__grid,
    .sp-manufacture-pro__grid,
    .sp-hospitality-elegance__grid,
    .sp-property-craft__grid,
    .sp-construct-build__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-ux-experience__text--highlight {
        font-size: 18px;
    }

    .sp-ux-experience__features,
    .sp-landing-master__features,
    .sp-shop-craft__features,
    .sp-portfolio-showcase__features,
    .sp-education-craft__features,
    .sp-healthcare-trust__features,
    .sp-manufacture-pro__features,
    .sp-hospitality-elegance__features,
    .sp-property-craft__features,
    .sp-construct-build__features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-ux-experience__feature,
    .sp-landing-master__feature,
    .sp-shop-craft__feature,
    .sp-portfolio-showcase__feature,
    .sp-education-craft__feature,
    .sp-healthcare-trust__feature,
    .sp-manufacture-pro__feature,
    .sp-hospitality-elegance__feature,
    .sp-property-craft__feature,
    .sp-construct-build__feature {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-ux-experience__feature-label,
    .sp-landing-master__feature-label,
    .sp-shop-craft__feature-label,
    .sp-portfolio-showcase__feature-label,
    .sp-education-craft__feature-label,
    .sp-healthcare-trust__feature-label,
    .sp-manufacture-pro__feature-label,
    .sp-hospitality-elegance__feature-label,
    .sp-property-craft__feature-label,
    .sp-construct-build__feature-label {
        font-size: 13px;
    }

    .sp-ux-experience__conclusion,
    .sp-landing-master__conclusion,
    .sp-shop-craft__conclusion,
    .sp-portfolio-showcase__conclusion,
    .sp-education-craft__conclusion,
    .sp-healthcare-trust__conclusion,
    .sp-manufacture-pro__conclusion,
    .sp-hospitality-elegance__conclusion,
    .sp-property-craft__conclusion,
    .sp-construct-build__conclusion {
        padding: 14px 18px;
    }

    .sp-ux-experience__conclusion-text,
    .sp-landing-master__conclusion-text,
    .sp-shop-craft__conclusion-text,
    .sp-portfolio-showcase__conclusion-text,
    .sp-education-craft__conclusion-text,
    .sp-healthcare-trust__conclusion-text,
    .sp-manufacture-pro__conclusion-text,
    .sp-hospitality-elegance__conclusion-text,
    .sp-property-craft__conclusion-text,
    .sp-construct-build__conclusion-text {
        font-size: 14px;
    }

    .sp-ux-experience__principles,
    .sp-landing-master__elements,
    .sp-shop-craft__pillars,
    .sp-portfolio-showcase__types,
    .sp-education-craft__pillars,
    .sp-healthcare-trust__pillars,
    .sp-manufacture-pro__pillars,
    .sp-hospitality-elegance__pillars,
    .sp-property-craft__pillars,
    .sp-construct-build__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-ux-experience__principle,
    .sp-landing-master__element,
    .sp-shop-craft__pillar,
    .sp-portfolio-showcase__type,
    .sp-education-craft__pillar,
    .sp-healthcare-trust__pillar,
    .sp-manufacture-pro__pillar,
    .sp-hospitality-elegance__pillar,
    .sp-property-craft__pillar,
    .sp-construct-build__pillar {
        padding: 14px 10px;
        border-radius: 12px;
    }

    .sp-ux-experience__principle-icon,
    .sp-landing-master__element-icon,
    .sp-shop-craft__pillar-icon,
    .sp-portfolio-showcase__type-icon,
    .sp-education-craft__pillar-icon,
    .sp-healthcare-trust__pillar-icon,
    .sp-manufacture-pro__pillar-icon,
    .sp-hospitality-elegance__pillar-icon,
    .sp-property-craft__pillar-icon,
    .sp-construct-build__pillar-icon {
        font-size: 22px;
    }

    .sp-ux-experience__principle-label,
    .sp-landing-master__element-label,
    .sp-shop-craft__pillar-label,
    .sp-portfolio-showcase__type-label,
    .sp-education-craft__pillar-label,
    .sp-healthcare-trust__pillar-label,
    .sp-manufacture-pro__pillar-label,
    .sp-hospitality-elegance__pillar-label,
    .sp-property-craft__pillar-label,
    .sp-construct-build__pillar-label {
        font-size: 12px;
    }

    .sp-ux-experience__trust-box,
    .sp-landing-master__trust-box,
    .sp-shop-craft__trust-box,
    .sp-portfolio-showcase__trust-box,
    .sp-education-craft__trust-box,
    .sp-healthcare-trust__trust-box,
    .sp-manufacture-pro__trust-box,
    .sp-hospitality-elegance__trust-box,
    .sp-property-craft__trust-box,
    .sp-construct-build__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-ux-experience__trust-text,
    .sp-landing-master__trust-text,
    .sp-shop-craft__trust-text,
    .sp-portfolio-showcase__trust-text,
    .sp-education-craft__trust-text,
    .sp-healthcare-trust__trust-text,
    .sp-manufacture-pro__trust-text,
    .sp-hospitality-elegance__trust-text,
    .sp-property-craft__trust-text,
    .sp-construct-build__trust-text {
        font-size: 16px;
    }

    /* Simplified hover for mobile - all sections */
    .sp-ux-experience__feature--1:hover,
    .sp-ux-experience__feature--2:hover,
    .sp-ux-experience__feature--3:hover,
    .sp-ux-experience__feature--4:hover,
    .sp-ux-experience__feature--5:hover,
    .sp-ux-experience__feature--6:hover,
    .sp-ux-experience__feature--7:hover,
    .sp-ux-experience__feature--8:hover,
    .sp-landing-master__feature--1:hover,
    .sp-landing-master__feature--2:hover,
    .sp-landing-master__feature--3:hover,
    .sp-landing-master__feature--4:hover,
    .sp-landing-master__feature--5:hover,
    .sp-landing-master__feature--6:hover,
    .sp-landing-master__feature--7:hover,
    .sp-shop-craft__feature--1:hover,
    .sp-shop-craft__feature--2:hover,
    .sp-shop-craft__feature--3:hover,
    .sp-shop-craft__feature--4:hover,
    .sp-shop-craft__feature--5:hover,
    .sp-shop-craft__feature--6:hover,
    .sp-shop-craft__feature--7:hover,
    .sp-shop-craft__feature--8:hover,
    .sp-shop-craft__feature--9:hover,
    .sp-shop-craft__feature--10:hover,
    .sp-portfolio-showcase__feature--1:hover,
    .sp-portfolio-showcase__feature--2:hover,
    .sp-portfolio-showcase__feature--3:hover,
    .sp-portfolio-showcase__feature--4:hover,
    .sp-portfolio-showcase__feature--5:hover,
    .sp-education-craft__feature--1:hover,
    .sp-education-craft__feature--2:hover,
    .sp-education-craft__feature--3:hover,
    .sp-education-craft__feature--4:hover,
    .sp-education-craft__feature--5:hover,
    .sp-education-craft__feature--6:hover,
    .sp-education-craft__feature--7:hover,
    .sp-education-craft__feature--8:hover,
    .sp-healthcare-trust__feature--1:hover,
    .sp-healthcare-trust__feature--2:hover,
    .sp-healthcare-trust__feature--3:hover,
    .sp-healthcare-trust__feature--4:hover,
    .sp-healthcare-trust__feature--5:hover,
    .sp-healthcare-trust__feature--6:hover,
    .sp-healthcare-trust__feature--7:hover,
    .sp-healthcare-trust__feature--8:hover,
    .sp-manufacture-pro__feature--1:hover,
    .sp-manufacture-pro__feature--2:hover,
    .sp-manufacture-pro__feature--3:hover,
    .sp-manufacture-pro__feature--4:hover,
    .sp-manufacture-pro__feature--5:hover,
    .sp-manufacture-pro__feature--6:hover,
    .sp-manufacture-pro__feature--7:hover,
    .sp-manufacture-pro__feature--8:hover,
    .sp-manufacture-pro__feature--9:hover,
    .sp-hospitality-elegance__feature--1:hover,
    .sp-hospitality-elegance__feature--2:hover,
    .sp-hospitality-elegance__feature--3:hover,
    .sp-hospitality-elegance__feature--4:hover,
    .sp-hospitality-elegance__feature--5:hover,
    .sp-hospitality-elegance__feature--6:hover,
    .sp-hospitality-elegance__feature--7:hover,
    .sp-hospitality-elegance__feature--8:hover,
    .sp-property-craft__feature--1:hover,
    .sp-property-craft__feature--2:hover,
    .sp-property-craft__feature--3:hover,
    .sp-property-craft__feature--4:hover,
    .sp-property-craft__feature--5:hover,
    .sp-property-craft__feature--6:hover,
    .sp-property-craft__feature--7:hover,
    .sp-property-craft__feature--8:hover,
    .sp-construct-build__feature--1:hover,
    .sp-construct-build__feature--2:hover,
    .sp-construct-build__feature--3:hover,
    .sp-construct-build__feature--4:hover,
    .sp-construct-build__feature--5:hover,
    .sp-construct-build__feature--6:hover,
    .sp-construct-build__feature--7:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-ux-experience__principle--1:hover,
    .sp-ux-experience__principle--2:hover,
    .sp-ux-experience__principle--3:hover,
    .sp-ux-experience__principle--4:hover,
    .sp-landing-master__element--1:hover,
    .sp-landing-master__element--2:hover,
    .sp-landing-master__element--3:hover,
    .sp-landing-master__element--4:hover,
    .sp-shop-craft__pillar--1:hover,
    .sp-shop-craft__pillar--2:hover,
    .sp-shop-craft__pillar--3:hover,
    .sp-shop-craft__pillar--4:hover,
    .sp-portfolio-showcase__type--1:hover,
    .sp-portfolio-showcase__type--2:hover,
    .sp-portfolio-showcase__type--3:hover,
    .sp-portfolio-showcase__type--4:hover,
    .sp-education-craft__pillar--1:hover,
    .sp-education-craft__pillar--2:hover,
    .sp-education-craft__pillar--3:hover,
    .sp-education-craft__pillar--4:hover,
    .sp-healthcare-trust__pillar--1:hover,
    .sp-healthcare-trust__pillar--2:hover,
    .sp-healthcare-trust__pillar--3:hover,
    .sp-healthcare-trust__pillar--4:hover,
    .sp-manufacture-pro__pillar--1:hover,
    .sp-manufacture-pro__pillar--2:hover,
    .sp-manufacture-pro__pillar--3:hover,
    .sp-manufacture-pro__pillar--4:hover,
    .sp-hospitality-elegance__pillar--1:hover,
    .sp-hospitality-elegance__pillar--2:hover,
    .sp-hospitality-elegance__pillar--3:hover,
    .sp-hospitality-elegance__pillar--4:hover,
    .sp-property-craft__pillar--1:hover,
    .sp-property-craft__pillar--2:hover,
    .sp-property-craft__pillar--3:hover,
    .sp-property-craft__pillar--4:hover,
    .sp-construct-build__pillar--1:hover,
    .sp-construct-build__pillar--2:hover,
    .sp-construct-build__pillar--3:hover,
    .sp-construct-build__pillar--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-ux-experience__badge,
    .sp-landing-master__badge,
    .sp-shop-craft__badge,
    .sp-portfolio-showcase__badge,
    .sp-education-craft__badge,
    .sp-healthcare-trust__badge,
    .sp-manufacture-pro__badge,
    .sp-hospitality-elegance__badge,
    .sp-property-craft__badge,
    .sp-construct-build__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-ux-experience__title,
    .sp-landing-master__title,
    .sp-shop-craft__title,
    .sp-portfolio-showcase__title,
    .sp-education-craft__title,
    .sp-healthcare-trust__title,
    .sp-manufacture-pro__title,
    .sp-hospitality-elegance__title,
    .sp-property-craft__title,
    .sp-construct-build__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-ux-experience__title::after,
    .sp-landing-master__title::after,
    .sp-shop-craft__title::after,
    .sp-portfolio-showcase__title::after,
    .sp-education-craft__title::after,
    .sp-healthcare-trust__title::after,
    .sp-manufacture-pro__title::after,
    .sp-hospitality-elegance__title::after,
    .sp-property-craft__title::after,
    .sp-construct-build__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-ux-experience__subtitle,
    .sp-landing-master__subtitle,
    .sp-shop-craft__subtitle,
    .sp-portfolio-showcase__subtitle,
    .sp-education-craft__subtitle,
    .sp-healthcare-trust__subtitle,
    .sp-manufacture-pro__subtitle,
    .sp-hospitality-elegance__subtitle,
    .sp-property-craft__subtitle,
    .sp-construct-build__subtitle {
        font-size: 14px;
    }

    .sp-ux-experience__text--highlight {
        font-size: 16px;
    }

    .sp-ux-experience__features,
    .sp-landing-master__features,
    .sp-shop-craft__features,
    .sp-portfolio-showcase__features,
    .sp-education-craft__features,
    .sp-healthcare-trust__features,
    .sp-manufacture-pro__features,
    .sp-hospitality-elegance__features,
    .sp-property-craft__features,
    .sp-construct-build__features {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-ux-experience__feature,
    .sp-landing-master__feature,
    .sp-shop-craft__feature,
    .sp-portfolio-showcase__feature,
    .sp-education-craft__feature,
    .sp-healthcare-trust__feature,
    .sp-manufacture-pro__feature,
    .sp-hospitality-elegance__feature,
    .sp-property-craft__feature,
    .sp-construct-build__feature {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-ux-experience__feature-label,
    .sp-landing-master__feature-label,
    .sp-shop-craft__feature-label,
    .sp-portfolio-showcase__feature-label,
    .sp-education-craft__feature-label,
    .sp-healthcare-trust__feature-label,
    .sp-manufacture-pro__feature-label,
    .sp-hospitality-elegance__feature-label,
    .sp-property-craft__feature-label,
    .sp-construct-build__feature-label {
        font-size: 13px;
    }

    .sp-ux-experience__conclusion,
    .sp-landing-master__conclusion,
    .sp-shop-craft__conclusion,
    .sp-portfolio-showcase__conclusion,
    .sp-education-craft__conclusion,
    .sp-healthcare-trust__conclusion,
    .sp-manufacture-pro__conclusion,
    .sp-hospitality-elegance__conclusion,
    .sp-property-craft__conclusion,
    .sp-construct-build__conclusion {
        padding: 12px 14px;
    }

    .sp-ux-experience__conclusion-text,
    .sp-landing-master__conclusion-text,
    .sp-shop-craft__conclusion-text,
    .sp-portfolio-showcase__conclusion-text,
    .sp-education-craft__conclusion-text,
    .sp-healthcare-trust__conclusion-text,
    .sp-manufacture-pro__conclusion-text,
    .sp-hospitality-elegance__conclusion-text,
    .sp-property-craft__conclusion-text,
    .sp-construct-build__conclusion-text {
        font-size: 13px;
    }

    .sp-ux-experience__principles,
    .sp-landing-master__elements,
    .sp-shop-craft__pillars,
    .sp-portfolio-showcase__types,
    .sp-education-craft__pillars,
    .sp-healthcare-trust__pillars,
    .sp-manufacture-pro__pillars,
    .sp-hospitality-elegance__pillars,
    .sp-property-craft__pillars,
    .sp-construct-build__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-ux-experience__principle,
    .sp-landing-master__element,
    .sp-shop-craft__pillar,
    .sp-portfolio-showcase__type,
    .sp-education-craft__pillar,
    .sp-healthcare-trust__pillar,
    .sp-manufacture-pro__pillar,
    .sp-hospitality-elegance__pillar,
    .sp-property-craft__pillar,
    .sp-construct-build__pillar {
        padding: 12px 8px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-ux-experience__principle-number,
    .sp-landing-master__element-number {
        font-size: 10px;
    }

    .sp-ux-experience__principle-icon,
    .sp-landing-master__element-icon,
    .sp-shop-craft__pillar-icon,
    .sp-portfolio-showcase__type-icon,
    .sp-education-craft__pillar-icon,
    .sp-healthcare-trust__pillar-icon,
    .sp-manufacture-pro__pillar-icon,
    .sp-hospitality-elegance__pillar-icon,
    .sp-property-craft__pillar-icon,
    .sp-construct-build__pillar-icon {
        font-size: 20px;
    }

    .sp-ux-experience__principle-label,
    .sp-landing-master__element-label,
    .sp-shop-craft__pillar-label,
    .sp-portfolio-showcase__type-label,
    .sp-education-craft__pillar-label,
    .sp-healthcare-trust__pillar-label,
    .sp-manufacture-pro__pillar-label,
    .sp-hospitality-elegance__pillar-label,
    .sp-property-craft__pillar-label,
    .sp-construct-build__pillar-label {
        font-size: 11px;
    }

    .sp-ux-experience__trust-box,
    .sp-landing-master__trust-box,
    .sp-shop-craft__trust-box,
    .sp-portfolio-showcase__trust-box,
    .sp-education-craft__trust-box,
    .sp-healthcare-trust__trust-box,
    .sp-manufacture-pro__trust-box,
    .sp-hospitality-elegance__trust-box,
    .sp-property-craft__trust-box,
    .sp-construct-build__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-ux-experience__trust-text,
    .sp-landing-master__trust-text,
    .sp-shop-craft__trust-text,
    .sp-portfolio-showcase__trust-text,
    .sp-education-craft__trust-text,
    .sp-healthcare-trust__trust-text,
    .sp-manufacture-pro__trust-text,
    .sp-hospitality-elegance__trust-text,
    .sp-property-craft__trust-text,
    .sp-construct-build__trust-text {
        font-size: 15px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* ============================================================
   CYCLIC 1 — WHITE BACKGROUND DESIGN SYSTEM
   ============================================================ */

.sp-section {
    padding: 80px 0;
}

.sp-section--white {
    background: #ffffff;
}

.sp-section--dark {
    background: #0a0e1a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ============================================================
   SECTION 11 — REFRESH MASTER (CYCLIC 1)
   ============================================================ */

.sp-refresh-master__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-refresh-master__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-refresh-master__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-refresh-master__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-refresh-master__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-refresh-master__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-refresh-master__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #4a5268;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.sp-refresh-master__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-refresh-master__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-refresh-master__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-refresh-master__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-refresh-master__feature--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-refresh-master__feature-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-refresh-master__feature:hover .sp-refresh-master__feature-icon {
    transform: scale(1.3);
}

.sp-refresh-master__feature-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-refresh-master__feature:hover .sp-refresh-master__feature-label {
    color: #84c615;
}

.sp-refresh-master__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-refresh-master__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-refresh-master__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-refresh-master__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-refresh-master__principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-refresh-master__principle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-refresh-master__principle--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-refresh-master__principle--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-refresh-master__principle--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-refresh-master__principle--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-refresh-master__principle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-refresh-master__principle:hover::before {
    left: 100%;
}

.sp-refresh-master__principle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-refresh-master__principle:hover::after {
    opacity: 1;
}

.sp-refresh-master__principle-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-refresh-master__principle:hover .sp-refresh-master__principle-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-refresh-master__principle-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-refresh-master__principle--1:hover .sp-refresh-master__principle-icon { transform: scale(1.15) rotate(-5deg); }
.sp-refresh-master__principle--2:hover .sp-refresh-master__principle-icon { transform: scale(1.2) rotate(5deg); }
.sp-refresh-master__principle--3:hover .sp-refresh-master__principle-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-refresh-master__principle--4:hover .sp-refresh-master__principle-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-refresh-master__principle-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-refresh-master__principle:hover .sp-refresh-master__principle-label {
    color: #84c615;
}

.sp-refresh-master__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-refresh-master__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-refresh-master__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-refresh-master__trust-box:hover .sp-refresh-master__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-refresh-master__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 12 — GOAL DRIVEN (CYCLIC 2)
   ============================================================ */

.sp-goal-driven__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-goal-driven__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-goal-driven__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-goal-driven__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-goal-driven__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-goal-driven__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-goal-driven__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: #a0a8b8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.sp-goal-driven__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-goal-driven__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-goal-driven__questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-goal-driven__question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-goal-driven__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-goal-driven__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-goal-driven__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-goal-driven__question--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-goal-driven__question--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-goal-driven__question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-goal-driven__question-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-goal-driven__question:hover .sp-goal-driven__question-icon {
    transform: scale(1.3);
}

.sp-goal-driven__question-text {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-goal-driven__question:hover .sp-goal-driven__question-text {
    color: #84c615;
}

.sp-goal-driven__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-goal-driven__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-goal-driven__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-goal-driven__conclusion-highlight {
    font-size: 16px;
    line-height: 1.7;
    color: #84c615;
    margin: 4px 0 0 0;
    font-weight: 500;
}

.sp-goal-driven__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-goal-driven__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-goal-driven__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-goal-driven__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-goal-driven__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-goal-driven__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-goal-driven__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-goal-driven__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-goal-driven__pillar:hover::before {
    left: 100%;
}

.sp-goal-driven__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-goal-driven__pillar:hover::after {
    opacity: 1;
}

.sp-goal-driven__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-goal-driven__pillar--1:hover .sp-goal-driven__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-goal-driven__pillar--2:hover .sp-goal-driven__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-goal-driven__pillar--3:hover .sp-goal-driven__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-goal-driven__pillar--4:hover .sp-goal-driven__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-goal-driven__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-goal-driven__pillar:hover .sp-goal-driven__pillar-label {
    color: #84c615;
}

.sp-goal-driven__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-goal-driven__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-goal-driven__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-goal-driven__trust-box:hover .sp-goal-driven__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-goal-driven__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 13 — TRICHY TRUST (CYCLIC 1)
   ============================================================ */

.sp-trichy-trust__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-trichy-trust__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-trichy-trust__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-trichy-trust__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-trichy-trust__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-trichy-trust__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-trichy-trust__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-trichy-trust__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trichy-trust__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-trichy-trust__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #e6f5ef;
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-trust__highlight:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-trichy-trust__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-trust__highlight:hover .sp-trichy-trust__highlight-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-trichy-trust__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-trichy-trust__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-trichy-trust__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-trichy-trust__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-trichy-trust__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trichy-trust__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trichy-trust__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trichy-trust__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-trichy-trust__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-trichy-trust__pillar:hover::before {
    left: 100%;
}

.sp-trichy-trust__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-trichy-trust__pillar:hover::after {
    opacity: 1;
}

.sp-trichy-trust__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-trust__pillar--1:hover .sp-trichy-trust__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-trichy-trust__pillar--2:hover .sp-trichy-trust__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-trichy-trust__pillar--3:hover .sp-trichy-trust__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-trichy-trust__pillar--4:hover .sp-trichy-trust__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-trichy-trust__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-trichy-trust__pillar:hover .sp-trichy-trust__pillar-label {
    color: #84c615;
}

.sp-trichy-trust__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-trust__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-trichy-trust__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-trichy-trust__trust-box:hover .sp-trichy-trust__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-trichy-trust__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 14 — PROCESS MASTER (CYCLIC 2)
   ============================================================ */

.sp-process-master__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-process-master__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-process-master__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-process-master__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-process-master__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-process-master__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-process-master__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-process-master__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-process-master__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-process-master__highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-process-master__highlight:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-process-master__highlight-icon {
    font-size: 18px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-process-master__highlight:hover .sp-process-master__highlight-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-process-master__highlight-text {
    font-size: 17px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-process-master__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-process-master__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-process-master__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-process-master__step--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-process-master__step--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-process-master__step--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-process-master__step--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-process-master__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-process-master__step:hover::before {
    left: 100%;
}

.sp-process-master__step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-process-master__step:hover::after {
    opacity: 1;
}

.sp-process-master__step-number {
    font-size: 11px;
    font-weight: 700;
    color: #84c615;
    font-family: 'Courier New', monospace;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-process-master__step:hover .sp-process-master__step-number {
    opacity: 1;
    transform: scale(1.1);
}

.sp-process-master__step-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-process-master__step--1:hover .sp-process-master__step-icon { transform: scale(1.15) rotate(-5deg); }
.sp-process-master__step--2:hover .sp-process-master__step-icon { transform: scale(1.2) rotate(5deg); }
.sp-process-master__step--3:hover .sp-process-master__step-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-process-master__step--4:hover .sp-process-master__step-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-process-master__step-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-process-master__step:hover .sp-process-master__step-label {
    color: #84c615;
}

.sp-process-master__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-process-master__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-process-master__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-process-master__trust-box:hover .sp-process-master__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-process-master__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 15 — STRATEGY CORE (CYCLIC 1)
   ============================================================ */

.sp-strategy-core__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-strategy-core__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-strategy-core__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-strategy-core__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-strategy-core__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-strategy-core__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-strategy-core__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-strategy-core__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-strategy-core__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-strategy-core__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 4px 0 0 0;
}

.sp-strategy-core__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-strategy-core__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-strategy-core__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-strategy-core__element-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-strategy-core__element:hover .sp-strategy-core__element-icon {
    transform: scale(1.3);
}

.sp-strategy-core__element-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-strategy-core__element:hover .sp-strategy-core__element-label {
    color: #84c615;
}

.sp-strategy-core__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-strategy-core__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-strategy-core__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-strategy-core__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-strategy-core__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-strategy-core__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-strategy-core__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-strategy-core__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-strategy-core__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-strategy-core__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-strategy-core__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-strategy-core__pillar:hover::before {
    left: 100%;
}

.sp-strategy-core__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-strategy-core__pillar:hover::after {
    opacity: 1;
}

.sp-strategy-core__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-strategy-core__pillar--1:hover .sp-strategy-core__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-strategy-core__pillar--2:hover .sp-strategy-core__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-strategy-core__pillar--3:hover .sp-strategy-core__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-strategy-core__pillar--4:hover .sp-strategy-core__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-strategy-core__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-strategy-core__pillar:hover .sp-strategy-core__pillar-label {
    color: #84c615;
}

.sp-strategy-core__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-strategy-core__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-strategy-core__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-strategy-core__trust-box:hover .sp-strategy-core__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-strategy-core__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 16 — DISCOVERY PHASE (CYCLIC 2)
   ============================================================ */

.sp-discovery-phase__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-discovery-phase__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-discovery-phase__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-discovery-phase__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-discovery-phase__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-discovery-phase__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-discovery-phase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-discovery-phase__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-discovery-phase__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-discovery-phase__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #84c615;
    margin: 4px 0 0 0;
}

.sp-discovery-phase__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-discovery-phase__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-discovery-phase__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-discovery-phase__element-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-discovery-phase__element:hover .sp-discovery-phase__element-icon {
    transform: scale(1.3);
}

.sp-discovery-phase__element-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-discovery-phase__element:hover .sp-discovery-phase__element-label {
    color: #84c615;
}

.sp-discovery-phase__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-discovery-phase__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-discovery-phase__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-discovery-phase__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-discovery-phase__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-discovery-phase__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-discovery-phase__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-discovery-phase__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-discovery-phase__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-discovery-phase__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-discovery-phase__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-discovery-phase__pillar:hover::before {
    left: 100%;
}

.sp-discovery-phase__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-discovery-phase__pillar:hover::after {
    opacity: 1;
}

.sp-discovery-phase__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-discovery-phase__pillar--1:hover .sp-discovery-phase__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-discovery-phase__pillar--2:hover .sp-discovery-phase__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-discovery-phase__pillar--3:hover .sp-discovery-phase__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-discovery-phase__pillar--4:hover .sp-discovery-phase__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-discovery-phase__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-discovery-phase__pillar:hover .sp-discovery-phase__pillar-label {
    color: #84c615;
}

.sp-discovery-phase__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-discovery-phase__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-discovery-phase__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-discovery-phase__trust-box:hover .sp-discovery-phase__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-discovery-phase__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 17 — AUDIENCE INSIGHT (CYCLIC 1)
   ============================================================ */

.sp-audience-insight__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-audience-insight__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-audience-insight__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-audience-insight__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-audience-insight__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-audience-insight__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-audience-insight__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-audience-insight__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-audience-insight__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

/* ============================================================
   SECTION 17 — AUDIENCE INSIGHT (CYCLIC 1) - CONTINUED
   ============================================================ */

.sp-audience-insight__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 4px 0 0 0;
}

.sp-audience-insight__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-audience-insight__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-audience-insight__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-audience-insight__element-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-audience-insight__element:hover .sp-audience-insight__element-icon {
    transform: scale(1.3);
}

.sp-audience-insight__element-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-audience-insight__element:hover .sp-audience-insight__element-label {
    color: #84c615;
}

.sp-audience-insight__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-audience-insight__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-audience-insight__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-audience-insight__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-audience-insight__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-audience-insight__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-audience-insight__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-audience-insight__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-audience-insight__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-audience-insight__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-audience-insight__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-audience-insight__pillar:hover::before {
    left: 100%;
}

.sp-audience-insight__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-audience-insight__pillar:hover::after {
    opacity: 1;
}

.sp-audience-insight__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-audience-insight__pillar--1:hover .sp-audience-insight__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-audience-insight__pillar--2:hover .sp-audience-insight__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-audience-insight__pillar--3:hover .sp-audience-insight__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-audience-insight__pillar--4:hover .sp-audience-insight__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-audience-insight__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-audience-insight__pillar:hover .sp-audience-insight__pillar-label {
    color: #84c615;
}

.sp-audience-insight__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-audience-insight__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-audience-insight__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-audience-insight__trust-box:hover .sp-audience-insight__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-audience-insight__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 18 — PLAN MASTER (CYCLIC 2)
   ============================================================ */

.sp-plan-master__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-plan-master__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-plan-master__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-plan-master__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-plan-master__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-plan-master__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-plan-master__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-plan-master__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-plan-master__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-plan-master__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #84c615;
    margin: 4px 0 0 0;
}

.sp-plan-master__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-plan-master__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-plan-master__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--8:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--9:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--10:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element--11:hover {
    transform: translateX(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-plan-master__element-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-plan-master__element:hover .sp-plan-master__element-icon {
    transform: scale(1.3);
}

.sp-plan-master__element-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-plan-master__element:hover .sp-plan-master__element-label {
    color: #84c615;
}

.sp-plan-master__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-plan-master__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-plan-master__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-plan-master__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-plan-master__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-plan-master__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-plan-master__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-plan-master__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-plan-master__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-plan-master__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-plan-master__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-plan-master__pillar:hover::before {
    left: 100%;
}

.sp-plan-master__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-plan-master__pillar:hover::after {
    opacity: 1;
}

.sp-plan-master__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-plan-master__pillar--1:hover .sp-plan-master__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-plan-master__pillar--2:hover .sp-plan-master__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-plan-master__pillar--3:hover .sp-plan-master__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-plan-master__pillar--4:hover .sp-plan-master__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-plan-master__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-plan-master__pillar:hover .sp-plan-master__pillar-label {
    color: #84c615;
}

.sp-plan-master__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-plan-master__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-plan-master__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-plan-master__trust-box:hover .sp-plan-master__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-plan-master__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 19 — INFO STRUCTURE (CYCLIC 1)
   ============================================================ */

.sp-info-structure__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-info-structure__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-info-structure__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-info-structure__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-info-structure__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-info-structure__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-info-structure__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-info-structure__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-info-structure__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-info-structure__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 4px 0 0 0;
}

.sp-info-structure__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-info-structure__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-info-structure__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-info-structure__element-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-info-structure__element:hover .sp-info-structure__element-icon {
    transform: scale(1.3);
}

.sp-info-structure__element-label {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-info-structure__element:hover .sp-info-structure__element-label {
    color: #84c615;
}

.sp-info-structure__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-info-structure__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-info-structure__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-info-structure__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-info-structure__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-info-structure__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-info-structure__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-info-structure__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-info-structure__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-info-structure__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-info-structure__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-info-structure__pillar:hover::before {
    left: 100%;
}

.sp-info-structure__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-info-structure__pillar:hover::after {
    opacity: 1;
}

.sp-info-structure__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-info-structure__pillar--1:hover .sp-info-structure__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-info-structure__pillar--2:hover .sp-info-structure__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-info-structure__pillar--3:hover .sp-info-structure__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-info-structure__pillar--4:hover .sp-info-structure__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-info-structure__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-info-structure__pillar:hover .sp-info-structure__pillar-label {
    color: #84c615;
}

.sp-info-structure__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-info-structure__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-info-structure__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-info-structure__trust-box:hover .sp-info-structure__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-info-structure__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 20 — WIRE MASTER (CYCLIC 2)
   ============================================================ */

.sp-wire-master__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-wire-master__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-wire-master__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: rgba(132, 198, 21, 0.12);
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid rgba(132, 198, 21, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-wire-master__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-wire-master__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-wire-master__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.15);
}

.sp-wire-master__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-wire-master__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-wire-master__text {
    font-size: 16px;
    line-height: 1.8;
    color: #e6e8ec;
    margin: 0;
    text-align: justify;
}

.sp-wire-master__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #84c615;
    margin: 4px 0 0 0;
}

.sp-wire-master__elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-wire-master__element {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-wire-master__element--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element--7:hover {
    transform: translateX(6px) scale(1.02);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
}

.sp-wire-master__element-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-wire-master__element:hover .sp-wire-master__element-icon {
    transform: scale(1.3);
}

.sp-wire-master__element-label {
    font-size: 14px;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-wire-master__element:hover .sp-wire-master__element-label {
    color: #84c615;
}

.sp-wire-master__conclusion {
    background: rgba(132, 198, 21, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-wire-master__conclusion:hover {
    transform: translateX(6px);
    background: rgba(132, 198, 21, 0.12);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.06);
}

.sp-wire-master__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

.sp-wire-master__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-wire-master__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-wire-master__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-wire-master__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-wire-master__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-wire-master__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-wire-master__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-wire-master__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-wire-master__pillar:hover::before {
    left: 100%;
}

.sp-wire-master__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-wire-master__pillar:hover::after {
    opacity: 1;
}

.sp-wire-master__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-wire-master__pillar--1:hover .sp-wire-master__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-wire-master__pillar--2:hover .sp-wire-master__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-wire-master__pillar--3:hover .sp-wire-master__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-wire-master__pillar--4:hover .sp-wire-master__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-wire-master__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e6e8ec;
    transition: all 0.3s ease;
}

.sp-wire-master__pillar:hover .sp-wire-master__pillar-label {
    color: #84c615;
}

.sp-wire-master__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-wire-master__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-wire-master__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-wire-master__trust-box:hover .sp-wire-master__trust-icon {
    transform: rotate(180deg) scale(1.2);
}

.sp-wire-master__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    text-align: center;
}


/* ============================================================
   SECTION 21 — UX JOURNEY (CYCLIC 1)
   ============================================================ */

.sp-ux-journey__wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.sp-ux-journey__header {
    text-align: center;
    margin-bottom: 40px;
}

.sp-ux-journey__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #84c615;
    background: #e6f5ef;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 14px;
}

.sp-ux-journey__badge:hover {
    background: #84c615;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
}

.sp-ux-journey__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    position: relative;
    padding-bottom: 22px;
}

.sp-ux-journey__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #84c615, rgba(132, 198, 21, 0.2));
    border-radius: 2px;
}

.sp-ux-journey__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.sp-ux-journey__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-ux-journey__text {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1f36;
    margin: 0;
    text-align: justify;
}

.sp-ux-journey__text--highlight {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 4px 0 0 0;
}

.sp-ux-journey__questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sp-ux-journey__question {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.sp-ux-journey__question--1:hover {
    transform: translateX(6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-journey__question--2:hover {
    transform: translateX(-6px);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-journey__question--3:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-journey__question--4:hover {
    transform: translateX(6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-journey__question--5:hover {
    transform: translateX(-6px) translateY(-4px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-journey__question--6:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #84c615;
    background: #e6f5ef;
}

.sp-ux-journey__question-icon {
    font-size: 14px;
    font-weight: 700;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-journey__question:hover .sp-ux-journey__question-icon {
    transform: scale(1.3);
}

.sp-ux-journey__question-text {
    font-size: 14px;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-ux-journey__question:hover .sp-ux-journey__question-text {
    color: #84c615;
}

.sp-ux-journey__conclusion {
    background: #e6f5ef;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #84c615;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-journey__conclusion:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
    background: #d4f0e0;
}

.sp-ux-journey__conclusion-text {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.sp-ux-journey__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-ux-journey__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-ux-journey__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 14px;
    border: 1px solid #eef2f6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.sp-ux-journey__pillar--1:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-journey__pillar--2:hover {
    transform: translateY(-8px) rotate(-0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-journey__pillar--3:hover {
    transform: translateY(-4px) rotate(0.5deg) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-journey__pillar--4:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.08);
}

.sp-ux-journey__pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(132, 198, 21, 0.05), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.sp-ux-journey__pillar:hover::before {
    left: 100%;
}

.sp-ux-journey__pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #84c615;
    opacity: 0;
    transition: all 0.4s ease;
}

.sp-ux-journey__pillar:hover::after {
    opacity: 1;
}

.sp-ux-journey__pillar-icon {
    font-size: 26px;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-journey__pillar--1:hover .sp-ux-journey__pillar-icon { transform: scale(1.15) rotate(-5deg); }
.sp-ux-journey__pillar--2:hover .sp-ux-journey__pillar-icon { transform: scale(1.2) rotate(5deg); }
.sp-ux-journey__pillar--3:hover .sp-ux-journey__pillar-icon { transform: scale(1.15) rotate(-5deg) translateY(-4px); }
.sp-ux-journey__pillar--4:hover .sp-ux-journey__pillar-icon { transform: scale(1.2) rotate(5deg) translateY(-4px); }

.sp-ux-journey__pillar-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a1f36;
    transition: all 0.3s ease;
}

.sp-ux-journey__pillar:hover .sp-ux-journey__pillar-label {
    color: #84c615;
}

.sp-ux-journey__trust-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #eef2f6;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-journey__trust-box:hover {
    transform: translateY(-4px);
    border-color: #84c615;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
}

.sp-ux-journey__trust-icon {
    font-size: 20px;
    color: #84c615;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sp-ux-journey__trust-box:hover .sp-ux-journey__trust-icon {
    transform: rotate(90deg) scale(1.2);
}

.sp-ux-journey__trust-text {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    text-align: center;
}


/* ============================================================
   RESPONSIVE DESIGN (ALL SECTIONS 11-21)
   ============================================================ */

@media (max-width: 1024px) {
    .sp-refresh-master__title,
    .sp-goal-driven__title,
    .sp-trichy-trust__title,
    .sp-process-master__title,
    .sp-strategy-core__title,
    .sp-discovery-phase__title,
    .sp-audience-insight__title,
    .sp-plan-master__title,
    .sp-info-structure__title,
    .sp-wire-master__title,
    .sp-ux-journey__title {
        font-size: 34px;
    }

    .sp-refresh-master__grid,
    .sp-goal-driven__grid,
    .sp-trichy-trust__grid,
    .sp-process-master__grid,
    .sp-strategy-core__grid,
    .sp-discovery-phase__grid,
    .sp-audience-insight__grid,
    .sp-plan-master__grid,
    .sp-info-structure__grid,
    .sp-wire-master__grid,
    .sp-ux-journey__grid {
        gap: 40px;
    }

    .sp-refresh-master__features,
    .sp-goal-driven__questions,
    .sp-strategy-core__elements,
    .sp-discovery-phase__elements,
    .sp-audience-insight__elements,
    .sp-plan-master__elements,
    .sp-info-structure__elements,
    .sp-wire-master__elements,
    .sp-ux-journey__questions {
        grid-template-columns: 1fr 1fr;
    }

    .sp-refresh-master__principles,
    .sp-goal-driven__pillars,
    .sp-trichy-trust__pillars,
    .sp-process-master__steps,
    .sp-strategy-core__pillars,
    .sp-discovery-phase__pillars,
    .sp-audience-insight__pillars,
    .sp-plan-master__pillars,
    .sp-info-structure__pillars,
    .sp-wire-master__pillars,
    .sp-ux-journey__pillars {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sp-section {
        padding: 48px 0;
    }

    .sp-container {
        padding: 0 16px;
    }

    .sp-refresh-master__title,
    .sp-goal-driven__title,
    .sp-trichy-trust__title,
    .sp-process-master__title,
    .sp-strategy-core__title,
    .sp-discovery-phase__title,
    .sp-audience-insight__title,
    .sp-plan-master__title,
    .sp-info-structure__title,
    .sp-wire-master__title,
    .sp-ux-journey__title {
        font-size: 28px;
        padding-bottom: 16px;
    }

    .sp-refresh-master__title::after,
    .sp-goal-driven__title::after,
    .sp-trichy-trust__title::after,
    .sp-process-master__title::after,
    .sp-strategy-core__title::after,
    .sp-discovery-phase__title::after,
    .sp-audience-insight__title::after,
    .sp-plan-master__title::after,
    .sp-info-structure__title::after,
    .sp-wire-master__title::after,
    .sp-ux-journey__title::after {
        width: 50px;
        height: 3px;
    }

    .sp-refresh-master__subtitle,
    .sp-goal-driven__subtitle {
        font-size: 16px;
    }

    .sp-refresh-master__grid,
    .sp-goal-driven__grid,
    .sp-trichy-trust__grid,
    .sp-process-master__grid,
    .sp-strategy-core__grid,
    .sp-discovery-phase__grid,
    .sp-audience-insight__grid,
    .sp-plan-master__grid,
    .sp-info-structure__grid,
    .sp-wire-master__grid,
    .sp-ux-journey__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-refresh-master__features,
    .sp-goal-driven__questions,
    .sp-strategy-core__elements,
    .sp-discovery-phase__elements,
    .sp-audience-insight__elements,
    .sp-plan-master__elements,
    .sp-info-structure__elements,
    .sp-wire-master__elements,
    .sp-ux-journey__questions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sp-refresh-master__feature,
    .sp-goal-driven__question,
    .sp-strategy-core__element,
    .sp-discovery-phase__element,
    .sp-audience-insight__element,
    .sp-plan-master__element,
    .sp-info-structure__element,
    .sp-wire-master__element,
    .sp-ux-journey__question {
        padding: 8px 12px;
        gap: 8px;
    }

    .sp-refresh-master__feature-label,
    .sp-goal-driven__question-text,
    .sp-strategy-core__element-label,
    .sp-discovery-phase__element-label,
    .sp-audience-insight__element-label,
    .sp-plan-master__element-label,
    .sp-info-structure__element-label,
    .sp-wire-master__element-label,
    .sp-ux-journey__question-text {
        font-size: 13px;
    }

    .sp-refresh-master__conclusion,
    .sp-goal-driven__conclusion,
    .sp-trichy-trust__highlight,
    .sp-process-master__highlight,
    .sp-strategy-core__conclusion,
    .sp-discovery-phase__conclusion,
    .sp-audience-insight__conclusion,
    .sp-plan-master__conclusion,
    .sp-info-structure__conclusion,
    .sp-wire-master__conclusion,
    .sp-ux-journey__conclusion {
        padding: 14px 18px;
    }

    .sp-refresh-master__conclusion-text,
    .sp-goal-driven__conclusion-text,
    .sp-trichy-trust__highlight-text,
    .sp-process-master__highlight-text,
    .sp-strategy-core__conclusion-text,
    .sp-discovery-phase__conclusion-text,
    .sp-audience-insight__conclusion-text,
    .sp-plan-master__conclusion-text,
    .sp-info-structure__conclusion-text,
    .sp-wire-master__conclusion-text,
    .sp-ux-journey__conclusion-text {
        font-size: 15px;
    }

    .sp-refresh-master__principles,
    .sp-goal-driven__pillars,
    .sp-trichy-trust__pillars,
    .sp-process-master__steps,
    .sp-strategy-core__pillars,
    .sp-discovery-phase__pillars,
    .sp-audience-insight__pillars,
    .sp-plan-master__pillars,
    .sp-info-structure__pillars,
    .sp-wire-master__pillars,
    .sp-ux-journey__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sp-refresh-master__principle,
    .sp-goal-driven__pillar,
    .sp-trichy-trust__pillar,
    .sp-process-master__step,
    .sp-strategy-core__pillar,
    .sp-discovery-phase__pillar,
    .sp-audience-insight__pillar,
    .sp-plan-master__pillar,
    .sp-info-structure__pillar,
    .sp-wire-master__pillar,
    .sp-ux-journey__pillar {
        padding: 14px 10px;
        border-radius: 12px;
    }

    .sp-refresh-master__principle-icon,
    .sp-goal-driven__pillar-icon,
    .sp-trichy-trust__pillar-icon,
    .sp-process-master__step-icon,
    .sp-strategy-core__pillar-icon,
    .sp-discovery-phase__pillar-icon,
    .sp-audience-insight__pillar-icon,
    .sp-plan-master__pillar-icon,
    .sp-info-structure__pillar-icon,
    .sp-wire-master__pillar-icon,
    .sp-ux-journey__pillar-icon {
        font-size: 22px;
    }

    .sp-refresh-master__principle-label,
    .sp-goal-driven__pillar-label,
    .sp-trichy-trust__pillar-label,
    .sp-process-master__step-label,
    .sp-strategy-core__pillar-label,
    .sp-discovery-phase__pillar-label,
    .sp-audience-insight__pillar-label,
    .sp-plan-master__pillar-label,
    .sp-info-structure__pillar-label,
    .sp-wire-master__pillar-label,
    .sp-ux-journey__pillar-label {
        font-size: 12px;
    }

    .sp-refresh-master__trust-box,
    .sp-goal-driven__trust-box,
    .sp-trichy-trust__trust-box,
    .sp-process-master__trust-box,
    .sp-strategy-core__trust-box,
    .sp-discovery-phase__trust-box,
    .sp-audience-insight__trust-box,
    .sp-plan-master__trust-box,
    .sp-info-structure__trust-box,
    .sp-wire-master__trust-box,
    .sp-ux-journey__trust-box {
        padding: 14px 18px;
        gap: 12px;
    }

    .sp-refresh-master__trust-text,
    .sp-goal-driven__trust-text,
    .sp-trichy-trust__trust-text,
    .sp-process-master__trust-text,
    .sp-strategy-core__trust-text,
    .sp-discovery-phase__trust-text,
    .sp-audience-insight__trust-text,
    .sp-plan-master__trust-text,
    .sp-info-structure__trust-text,
    .sp-wire-master__trust-text,
    .sp-ux-journey__trust-text {
        font-size: 16px;
    }

    .sp-goal-driven__conclusion-highlight {
        font-size: 15px;
    }

    .sp-strategy-core__text--highlight,
    .sp-discovery-phase__text--highlight,
    .sp-plan-master__text--highlight,
    .sp-info-structure__text--highlight,
    .sp-wire-master__text--highlight,
    .sp-ux-journey__text--highlight {
        font-size: 17px;
    }

    .sp-trichy-trust__text,
    .sp-process-master__text,
    .sp-strategy-core__text,
    .sp-discovery-phase__text,
    .sp-audience-insight__text,
    .sp-plan-master__text,
    .sp-info-structure__text,
    .sp-wire-master__text,
    .sp-ux-journey__text {
        font-size: 15px;
    }

    /* Simplified hover for mobile */
    .sp-refresh-master__feature--1:hover,
    .sp-refresh-master__feature--2:hover,
    .sp-refresh-master__feature--3:hover,
    .sp-refresh-master__feature--4:hover,
    .sp-refresh-master__feature--5:hover,
    .sp-refresh-master__feature--6:hover,
    .sp-refresh-master__feature--7:hover,
    .sp-goal-driven__question--1:hover,
    .sp-goal-driven__question--2:hover,
    .sp-goal-driven__question--3:hover,
    .sp-goal-driven__question--4:hover,
    .sp-goal-driven__question--5:hover,
    .sp-goal-driven__question--6:hover,
    .sp-strategy-core__element--1:hover,
    .sp-strategy-core__element--2:hover,
    .sp-strategy-core__element--3:hover,
    .sp-strategy-core__element--4:hover,
    .sp-strategy-core__element--5:hover,
    .sp-strategy-core__element--6:hover,
    .sp-strategy-core__element--7:hover,
    .sp-strategy-core__element--8:hover,
    .sp-discovery-phase__element--1:hover,
    .sp-discovery-phase__element--2:hover,
    .sp-discovery-phase__element--3:hover,
    .sp-discovery-phase__element--4:hover,
    .sp-discovery-phase__element--5:hover,
    .sp-discovery-phase__element--6:hover,
    .sp-discovery-phase__element--7:hover,
    .sp-discovery-phase__element--8:hover,
    .sp-audience-insight__element--1:hover,
    .sp-audience-insight__element--2:hover,
    .sp-audience-insight__element--3:hover,
    .sp-audience-insight__element--4:hover,
    .sp-audience-insight__element--5:hover,
    .sp-audience-insight__element--6:hover,
    .sp-audience-insight__element--7:hover,
    .sp-plan-master__element--1:hover,
    .sp-plan-master__element--2:hover,
    .sp-plan-master__element--3:hover,
    .sp-plan-master__element--4:hover,
    .sp-plan-master__element--5:hover,
    .sp-plan-master__element--6:hover,
    .sp-plan-master__element--7:hover,
    .sp-plan-master__element--8:hover,
    .sp-plan-master__element--9:hover,
    .sp-plan-master__element--10:hover,
    .sp-plan-master__element--11:hover,
    .sp-info-structure__element--1:hover,
    .sp-info-structure__element--2:hover,
    .sp-info-structure__element--3:hover,
    .sp-info-structure__element--4:hover,
    .sp-info-structure__element--5:hover,
    .sp-info-structure__element--6:hover,
    .sp-info-structure__element--7:hover,
    .sp-wire-master__element--1:hover,
    .sp-wire-master__element--2:hover,
    .sp-wire-master__element--3:hover,
    .sp-wire-master__element--4:hover,
    .sp-wire-master__element--5:hover,
    .sp-wire-master__element--6:hover,
    .sp-wire-master__element--7:hover,
    .sp-ux-journey__question--1:hover,
    .sp-ux-journey__question--2:hover,
    .sp-ux-journey__question--3:hover,
    .sp-ux-journey__question--4:hover,
    .sp-ux-journey__question--5:hover,
    .sp-ux-journey__question--6:hover {
        transform: translateX(4px) scale(1.01);
    }

    .sp-refresh-master__principle--1:hover,
    .sp-refresh-master__principle--2:hover,
    .sp-refresh-master__principle--3:hover,
    .sp-refresh-master__principle--4:hover,
    .sp-goal-driven__pillar--1:hover,
    .sp-goal-driven__pillar--2:hover,
    .sp-goal-driven__pillar--3:hover,
    .sp-goal-driven__pillar--4:hover,
    .sp-trichy-trust__pillar--1:hover,
    .sp-trichy-trust__pillar--2:hover,
    .sp-trichy-trust__pillar--3:hover,
    .sp-trichy-trust__pillar--4:hover,
    .sp-process-master__step--1:hover,
    .sp-process-master__step--2:hover,
    .sp-process-master__step--3:hover,
    .sp-process-master__step--4:hover,
    .sp-strategy-core__pillar--1:hover,
    .sp-strategy-core__pillar--2:hover,
    .sp-strategy-core__pillar--3:hover,
    .sp-strategy-core__pillar--4:hover,
    .sp-discovery-phase__pillar--1:hover,
    .sp-discovery-phase__pillar--2:hover,
    .sp-discovery-phase__pillar--3:hover,
    .sp-discovery-phase__pillar--4:hover,
    .sp-audience-insight__pillar--1:hover,
    .sp-audience-insight__pillar--2:hover,
    .sp-audience-insight__pillar--3:hover,
    .sp-audience-insight__pillar--4:hover,
    .sp-plan-master__pillar--1:hover,
    .sp-plan-master__pillar--2:hover,
    .sp-plan-master__pillar--3:hover,
    .sp-plan-master__pillar--4:hover,
    .sp-info-structure__pillar--1:hover,
    .sp-info-structure__pillar--2:hover,
    .sp-info-structure__pillar--3:hover,
    .sp-info-structure__pillar--4:hover,
    .sp-wire-master__pillar--1:hover,
    .sp-wire-master__pillar--2:hover,
    .sp-wire-master__pillar--3:hover,
    .sp-wire-master__pillar--4:hover,
    .sp-ux-journey__pillar--1:hover,
    .sp-ux-journey__pillar--2:hover,
    .sp-ux-journey__pillar--3:hover,
    .sp-ux-journey__pillar--4:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 32px 0;
    }

    .sp-container {
        padding: 0 12px;
    }

    .sp-refresh-master__badge,
    .sp-goal-driven__badge,
    .sp-trichy-trust__badge,
    .sp-process-master__badge,
    .sp-strategy-core__badge,
    .sp-discovery-phase__badge,
    .sp-audience-insight__badge,
    .sp-plan-master__badge,
    .sp-info-structure__badge,
    .sp-wire-master__badge,
    .sp-ux-journey__badge {
        font-size: 11px;
        padding: 4px 14px;
    }

    .sp-refresh-master__title,
    .sp-goal-driven__title,
    .sp-trichy-trust__title,
    .sp-process-master__title,
    .sp-strategy-core__title,
    .sp-discovery-phase__title,
    .sp-audience-insight__title,
    .sp-plan-master__title,
    .sp-info-structure__title,
    .sp-wire-master__title,
    .sp-ux-journey__title {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .sp-refresh-master__title::after,
    .sp-goal-driven__title::after,
    .sp-trichy-trust__title::after,
    .sp-process-master__title::after,
    .sp-strategy-core__title::after,
    .sp-discovery-phase__title::after,
    .sp-audience-insight__title::after,
    .sp-plan-master__title::after,
    .sp-info-structure__title::after,
    .sp-wire-master__title::after,
    .sp-ux-journey__title::after {
        width: 40px;
        height: 3px;
    }

    .sp-refresh-master__subtitle,
    .sp-goal-driven__subtitle {
        font-size: 14px;
    }

    .sp-refresh-master__features,
    .sp-goal-driven__questions,
    .sp-strategy-core__elements,
    .sp-discovery-phase__elements,
    .sp-audience-insight__elements,
    .sp-plan-master__elements,
    .sp-info-structure__elements,
    .sp-wire-master__elements,
    .sp-ux-journey__questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sp-refresh-master__feature,
    .sp-goal-driven__question,
    .sp-strategy-core__element,
    .sp-discovery-phase__element,
    .sp-audience-insight__element,
    .sp-plan-master__element,
    .sp-info-structure__element,
    .sp-wire-master__element,
    .sp-ux-journey__question {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }

    .sp-refresh-master__feature-label,
    .sp-goal-driven__question-text,
    .sp-strategy-core__element-label,
    .sp-discovery-phase__element-label,
    .sp-audience-insight__element-label,
    .sp-plan-master__element-label,
    .sp-info-structure__element-label,
    .sp-wire-master__element-label,
    .sp-ux-journey__question-text {
        font-size: 13px;
    }

    .sp-refresh-master__principle-number,
    .sp-process-master__step-number,
    .sp-strategy-core__pillar-number,
    .sp-discovery-phase__pillar-number,
    .sp-audience-insight__pillar-number,
    .sp-plan-master__pillar-number,
    .sp-info-structure__pillar-number,
    .sp-wire-master__pillar-number,
    .sp-ux-journey__pillar-number {
        font-size: 10px;
    }

    .sp-refresh-master__conclusion,
    .sp-goal-driven__conclusion,
    .sp-trichy-trust__highlight,
    .sp-process-master__highlight,
    .sp-strategy-core__conclusion,
    .sp-discovery-phase__conclusion,
    .sp-audience-insight__conclusion,
    .sp-plan-master__conclusion,
    .sp-info-structure__conclusion,
    .sp-wire-master__conclusion,
    .sp-ux-journey__conclusion {
        padding: 12px 14px;
    }

    .sp-refresh-master__conclusion-text,
    .sp-goal-driven__conclusion-text,
    .sp-trichy-trust__highlight-text,
    .sp-process-master__highlight-text,
    .sp-strategy-core__conclusion-text,
    .sp-discovery-phase__conclusion-text,
    .sp-audience-insight__conclusion-text,
    .sp-plan-master__conclusion-text,
    .sp-info-structure__conclusion-text,
    .sp-wire-master__conclusion-text,
    .sp-ux-journey__conclusion-text {
        font-size: 14px;
    }

    .sp-refresh-master__principles,
    .sp-goal-driven__pillars,
    .sp-trichy-trust__pillars,
    .sp-process-master__steps,
    .sp-strategy-core__pillars,
    .sp-discovery-phase__pillars,
    .sp-audience-insight__pillars,
    .sp-plan-master__pillars,
    .sp-info-structure__pillars,
    .sp-wire-master__pillars,
    .sp-ux-journey__pillars {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sp-refresh-master__principle,
    .sp-goal-driven__pillar,
    .sp-trichy-trust__pillar,
    .sp-process-master__step,
    .sp-strategy-core__pillar,
    .sp-discovery-phase__pillar,
    .sp-audience-insight__pillar,
    .sp-plan-master__pillar,
    .sp-info-structure__pillar,
    .sp-wire-master__pillar,
    .sp-ux-journey__pillar {
        padding: 12px 8px;
        border-radius: 10px;
        gap: 4px;
    }

    .sp-refresh-master__principle-icon,
    .sp-goal-driven__pillar-icon,
    .sp-trichy-trust__pillar-icon,
    .sp-process-master__step-icon,
    .sp-strategy-core__pillar-icon,
    .sp-discovery-phase__pillar-icon,
    .sp-audience-insight__pillar-icon,
    .sp-plan-master__pillar-icon,
    .sp-info-structure__pillar-icon,
    .sp-wire-master__pillar-icon,
    .sp-ux-journey__pillar-icon {
        font-size: 20px;
    }

    .sp-refresh-master__principle-label,
    .sp-goal-driven__pillar-label,
    .sp-trichy-trust__pillar-label,
    .sp-process-master__step-label,
    .sp-strategy-core__pillar-label,
    .sp-discovery-phase__pillar-label,
    .sp-audience-insight__pillar-label,
    .sp-plan-master__pillar-label,
    .sp-info-structure__pillar-label,
    .sp-wire-master__pillar-label,
    .sp-ux-journey__pillar-label {
        font-size: 11px;
    }

    .sp-refresh-master__trust-box,
    .sp-goal-driven__trust-box,
    .sp-trichy-trust__trust-box,
    .sp-process-master__trust-box,
    .sp-strategy-core__trust-box,
    .sp-discovery-phase__trust-box,
    .sp-audience-insight__trust-box,
    .sp-plan-master__trust-box,
    .sp-info-structure__trust-box,
    .sp-wire-master__trust-box,
    .sp-ux-journey__trust-box {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
    }

    .sp-refresh-master__trust-text,
    .sp-goal-driven__trust-text,
    .sp-trichy-trust__trust-text,
    .sp-process-master__trust-text,
    .sp-strategy-core__trust-text,
    .sp-discovery-phase__trust-text,
    .sp-audience-insight__trust-text,
    .sp-plan-master__trust-text,
    .sp-info-structure__trust-text,
    .sp-wire-master__trust-text,
    .sp-ux-journey__trust-text {
        font-size: 15px;
    }

    .sp-goal-driven__conclusion-highlight {
        font-size: 14px;
    }

    .sp-strategy-core__text--highlight,
    .sp-discovery-phase__text--highlight,
    .sp-plan-master__text--highlight,
    .sp-info-structure__text--highlight,
    .sp-wire-master__text--highlight,
    .sp-ux-journey__text--highlight {
        font-size: 16px;
    }

    .sp-trichy-trust__text,
    .sp-process-master__text,
    .sp-strategy-core__text,
    .sp-discovery-phase__text,
    .sp-audience-insight__text,
    .sp-plan-master__text,
    .sp-info-structure__text,
    .sp-wire-master__text,
    .sp-ux-journey__text {
        font-size: 14px;
    }
}

.sp-container,
.sp-section {
    overflow: hidden;
}




/* ============================================================
     SECTION 24 — Visual Consistency (CYCLIC 2 - BLACK)
     ============================================================ */
.vcon24-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.vcon24-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.vcon24-content {
    width: 100%;
}

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

/* Badge */
.vcon24-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.vcon24-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.2;
}

.vcon24-title span {
    color: #84c615;
}

/* Description */
.vcon24-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Subtitle */
.vcon24-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

/* Grid */
.vcon24-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 850px;
    margin: 0 auto 24px auto;
}

/* Grid Item */
.vcon24-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.vcon24-item:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.vcon24-item .vcon24-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s ease;
}

.vcon24-item:hover .vcon24-check {
    color: #0a0a0a;
}

/* Accent Box */
.vcon24-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.vcon24-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.vcon24-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .vcon24-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 750px;
    }

    .vcon24-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .vcon24-title {
        font-size: 34px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .vcon24-dark {
        padding: 50px 0;
    }

    .vcon24-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 600px;
    }

    .vcon24-item {
        padding: 11px 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

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

    .vcon24-desc {
        font-size: 15px;
        max-width: 100%;
    }

    .vcon24-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .vcon24-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .vcon24-dark {
        padding: 40px 0;
    }

    .vcon24-wrap {
        padding: 0 16px;
    }

    .vcon24-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .vcon24-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .vcon24-item .vcon24-check {
        font-size: 13px;
    }

    .vcon24-title {
        font-size: 26px;
    }

    .vcon24-desc {
        font-size: 14px;
        line-height: 1.7;
    }

    .vcon24-sub {
        font-size: 13px;
    }

    .vcon24-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
    }

    .vcon24-accent:hover {
        transform: scale(1.01);
    }

    .vcon24-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .vcon24-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .vcon24-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .vcon24-item .vcon24-check {
        font-size: 11px;
        min-width: 16px;
    }

    .vcon24-title {
        font-size: 22px;
    }

    .vcon24-desc {
        font-size: 13px;
    }

    .vcon24-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .vcon24-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}




/* 
.vcon24-circle {
    aspect-ratio: 1;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #2a2a2a;
    transition: all 0.5s ease;
    cursor: default;
}

.vcon24-circle:hover {
    background: #84c615;
    border-color: #84c615;
    transform: scale(1.15) rotate(45deg);
    box-shadow: 0 0 30px rgba(132, 198, 21, 0.3);
}

.vcon24-circle:nth-child(2):hover {
    transform: scale(1.2) rotate(-45deg);
    background: #6aad10;
}

.vcon24-circle:nth-child(3):hover {
    transform: scale(1.1) rotate(90deg);
    background: #9ad62a;
}

.vcon24-circle:nth-child(4):hover {
    transform: scale(1.3) rotate(-90deg);
    background: #84c615;
}

.vcon24-circle:nth-child(5):hover {
    transform: scale(1.15) rotate(180deg);
    background: #6aad10;
}
 */
/* .vcon24-circle:nth-child(6):hover {
    transform: scale(1.25) rotate(0deg);
    background: #9ad62a;
} */

/* .vcon24-label {
    color: #84c615;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 30px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.vcon24-label:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
} */


/* ============================================================
     SECTION 25 — Conversion-Focused Design (CYCLIC 1 - WHITE)
     ============================================================ */
.cfd25-light {
    background: #ffffff;
    padding: 70px 0;
}

.cfd25-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cfd25-content {
    width: 100%;
}

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

/* Pill / Badge */
.cfd25-pill {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Heading */
.cfd25-head {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 14px;
    line-height: 1.2;
}

.cfd25-head span {
    color: #84c615;
}

/* Description */
.cfd25-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Label */
.cfd25-label {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

/* Matrix Grid */
.cfd25-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: 0 auto 24px auto;
}

/* Cell / Item */
.cfd25-cell {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    cursor: default;
}

.cfd25-cell:hover {
    background: #84c615;
    color: #ffffff;
    border-bottom-color: #0a0a0a;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.cfd25-cell .cfd25-tick {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.cfd25-cell:hover .cfd25-tick {
    color: #ffffff;
}

/* Highlight / Accent Box */
.cfd25-highlight {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.cfd25-highlight:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.cfd25-highlight p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .cfd25-matrix {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 750px;
    }

    .cfd25-cell {
        padding: 12px 14px;
        font-size: 13px;
    }

    .cfd25-head {
        font-size: 34px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .cfd25-light {
        padding: 50px 0;
    }

    .cfd25-matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 600px;
    }

    .cfd25-cell {
        padding: 11px 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

    .cfd25-head {
        font-size: 30px;
    }

    .cfd25-desc {
        font-size: 15px;
        max-width: 100%;
    }

    .cfd25-highlight {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .cfd25-pill {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .cfd25-light {
        padding: 40px 0;
    }

    .cfd25-wrap {
        padding: 0 16px;
    }

    .cfd25-matrix {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .cfd25-cell {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .cfd25-cell .cfd25-tick {
        font-size: 14px;
    }

    .cfd25-head {
        font-size: 26px;
    }

    .cfd25-desc {
        font-size: 14px;
        line-height: 1.7;
    }

    .cfd25-label {
        font-size: 13px;
    }

    .cfd25-highlight {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
    }

    .cfd25-highlight:hover {
        transform: scale(1.01);
    }

    .cfd25-pill {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .cfd25-matrix {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .cfd25-cell {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .cfd25-cell .cfd25-tick {
        font-size: 12px;
        min-width: 16px;
    }

    .cfd25-head {
        font-size: 22px;
    }

    .cfd25-desc {
        font-size: 13px;
    }

    .cfd25-highlight {
        padding: 12px 14px;
        font-size: 13px;
    }

    .cfd25-pill {
        font-size: 9px;
        padding: 3px 10px;
    }
}



/* ============================================================
     SECTION 26 — Design Review & Refinement (CYCLIC 2 - BLACK)
     ============================================================ */
.drr26-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.drr26-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.drr26-content {
    width: 100%;
}

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

.drr26-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.drr26-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.2;
}

.drr26-title span {
    color: #84c615;
}

.drr26-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.drr26-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.drr26-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 850px;
    margin: 0 auto 24px auto;
}

.drr26-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    cursor: default;
}

.drr26-item:hover {
    background: #252525;
    border-right-color: #84c615;
    transform: translateX(-4px) scale(1.02);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.drr26-item .drr26-mark {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

.drr26-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.drr26-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.drr26-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 27 — Launch Preparation (CYCLIC 1 - WHITE)
     ============================================================ */
.lp27-light {
    background: #ffffff;
    padding: 70px 0;
}

.lp27-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lp27-content {
    width: 100%;
}

.lp27-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.lp27-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 14px;
    line-height: 1.2;
}

.lp27-title span {
    color: #84c615;
}

.lp27-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.lp27-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.lp27-checklist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 850px;
    margin: 0 auto 24px auto;
}

.lp27-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-top: 3px solid transparent;
    cursor: default;
}

.lp27-item:hover {
    background: #84c615;
    color: #ffffff;
    border-top-color: #0a0a0a;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.lp27-item .lp27-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.lp27-item:hover .lp27-check {
    color: #ffffff;
}

.lp27-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.lp27-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.lp27-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 28 — DesignFlow Framework (CYCLIC 2 - BLACK)
     ============================================================ */
.df28-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.df28-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.df28-content {
    width: 100%;
}

.df28-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.df28-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.2;
}

.df28-title span {
    color: #84c615;
}

.df28-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.df28-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-width: 850px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.df28-step {
    background: #161616;
    color: #e0e0e0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    cursor: default;
}

.df28-step:hover {
    background: #252525;
    border-bottom-color: #84c615;
    transform: translateY(-3px);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.1);
}

.df28-step .df28-num {
    color: #84c615;
    font-weight: 700;
    font-size: clamp(12px, 0.9vw, 14px);
    min-width: 28px;
}

.df28-step strong {
    color: #ffffff;
    transition: color 0.3s ease;
}

.df28-step:hover strong {
    color: #84c615;
}

.df28-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.df28-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.df28-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .drr26-list,
    .lp27-checklist {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 750px;
    }

    .drr26-item,
    .lp27-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .drr26-title,
    .lp27-title,
    .df28-title {
        font-size: 34px;
    }

    .df28-steps {
        max-width: 750px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .drr26-dark,
    .lp27-light,
    .df28-dark {
        padding: 50px 0;
    }

    .drr26-list,
    .lp27-checklist {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 600px;
    }

    .drr26-item,
    .lp27-item {
        padding: 11px 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

    .df28-steps {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 600px;
    }

    .df28-step {
        padding: 10px 14px;
        font-size: 13px;
    }

    .drr26-title,
    .lp27-title,
    .df28-title {
        font-size: 30px;
    }

    .drr26-desc,
    .lp27-desc,
    .df28-desc {
        font-size: 15px;
        max-width: 100%;
    }

    .drr26-accent,
    .lp27-accent,
    .df28-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .drr26-badge,
    .lp27-badge,
    .df28-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .drr26-dark,
    .lp27-light,
    .df28-dark {
        padding: 40px 0;
    }

    .drr26-wrap,
    .lp27-wrap,
    .df28-wrap {
        padding: 0 16px;
    }

    .drr26-list,
    .lp27-checklist {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .drr26-item,
    .lp27-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .drr26-item .drr26-mark,
    .lp27-item .lp27-check {
        font-size: 14px;
    }

    .df28-steps {
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .df28-step {
        padding: 10px 14px;
        font-size: 13px;
    }

    .drr26-title,
    .lp27-title,
    .df28-title {
        font-size: 26px;
    }

    .drr26-desc,
    .lp27-desc,
    .df28-desc {
        font-size: 14px;
        line-height: 1.7;
    }

    .drr26-sub,
    .lp27-sub {
        font-size: 13px;
    }

    .drr26-accent,
    .lp27-accent,
    .df28-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
    }

    .drr26-accent:hover,
    .lp27-accent:hover,
    .df28-accent:hover {
        transform: scale(1.01);
    }

    .drr26-badge,
    .lp27-badge,
    .df28-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .drr26-list,
    .lp27-checklist {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .drr26-item,
    .lp27-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .drr26-item .drr26-mark,
    .lp27-item .lp27-check {
        font-size: 12px;
        min-width: 16px;
    }

    .df28-step {
        padding: 8px 12px;
        font-size: 12px;
    }

    .df28-step .df28-num {
        font-size: 11px;
        min-width: 22px;
    }

    .drr26-title,
    .lp27-title,
    .df28-title {
        font-size: 22px;
    }

    .drr26-desc,
    .lp27-desc,
    .df28-desc {
        font-size: 13px;
    }

    .drr26-accent,
    .lp27-accent,
    .df28-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .drr26-badge,
    .lp27-badge,
    .df28-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}


/* ============================================================
     SECTION 29 — Better Results (CYCLIC 1 - WHITE)
     ============================================================ */
.br29-light {
    background: #ffffff;
    padding: 70px 0;
}

.br29-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.br29-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.br29-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.br29-title {
    font-size: 36px;
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 14px;
    line-height: 1.2;
}

.br29-title span {
    color: #84c615;
}

.br29-desc {
    color: #444444;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.br29-text {
    color: #444444;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.br29-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s ease;
    cursor: default;
}

.br29-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.br29-accent p {
    margin: 0;
}

.br29-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.br29-bars {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.br29-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.br29-bar span {
    font-size: 14px;
    font-weight: 600;
    color: #0a0a0a;
}

.br29-fill {
    height: 12px;
    background: #84c615;
    border-radius: 20px;
    transition: all 0.5s ease;
    position: relative;
}

.br29-bar:hover .br29-fill {
    opacity: 0.7;
    transform: scaleY(1.5);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.br29-tag {
    color: #0a0a0a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 30px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.br29-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}


/* ============================================================
     SECTION 30 — Trust Trichy (CYCLIC 2 - BLACK)
     ============================================================ */
.tt30-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.tt30-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tt30-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.tt30-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tt30-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.2;
}

.tt30-title span {
    color: #84c615;
}

.tt30-desc {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.tt30-text {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.tt30-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s ease;
    cursor: default;
}

.tt30-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.tt30-accent p {
    margin: 0;
}

.tt30-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.tt30-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.tt30-stat {
    background: #161616;
    padding: 25px 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    transition: all 0.4s ease;
    cursor: default;
}

.tt30-stat:hover {
    background: #84c615;
    border-color: #84c615;
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
}

.tt30-stat .tt30-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #84c615;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.tt30-stat:hover .tt30-number {
    color: #0a0a0a;
}

.tt30-stat .tt30-label {
    display: block;
    font-size: 14px;
    color: #cccccc;
    transition: color 0.3s ease;
}

.tt30-stat:hover .tt30-label {
    color: #0a0a0a;
}

.tt30-tag {
    color: #84c615;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 30px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.tt30-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}


/* ============================================================
     RESPONSIVE — ALL SECTIONS
     ============================================================ */
@media (max-width: 992px) {
    .vcon24-layout,
    .cfd25-holder,
    .drr26-grid,
    .lp27-container,
    .df28-layout,
    .br29-grid,
    .tt30-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .vcon24-grid,
    .lp27-checklist,
    .df28-steps {
        grid-template-columns: 1fr 1fr;
    }

    .cfd25-matrix {
        grid-template-columns: 1fr 1fr;
    }

    .drr26-list {
        grid-template-columns: 1fr 1fr;
    }

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

    .df28-flow {
        grid-template-columns: repeat(5, 1fr);
    }

    .tt30-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .vcon24-grid,
    .lp27-checklist,
    .df28-steps {
        grid-template-columns: 1fr;
    }

    .cfd25-matrix,
    .drr26-list {
        grid-template-columns: 1fr;
    }

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

    .df28-flow {
        grid-template-columns: repeat(3, 1fr);
    }

    .tt30-stats {
        grid-template-columns: 1fr 1fr;
    }

    .vcon24-title,
    .cfd25-head,
    .drr26-title,
    .lp27-title,
    .df28-title,
    .br29-title,
    .tt30-title {
        font-size: 28px;
    }

  

  

    .lp27-steps {
        grid-template-columns: repeat(3, 1fr);
        max-width: 250px;
    }

    .lp27-step {
        font-size: 18px;
        padding: 14px 0;
    }

    .drr26-diamond-grid {
        max-width: 250px;
        gap: 8px;
    }

    .df28-node {
        font-size: 18px;
        padding: 14px 0;
    }

    .tt30-stat .tt30-number {
        font-size: 26px;
    }

    .tt30-stat {
        padding: 18px 12px;
    }
}



/* CSS (Sections 31-40) */



/* ============================================================
     SECTION 31 — Mobile-First Web Design (CYCLIC 1 - WHITE)
     ============================================================ */
.mux31-light {
    background: #ffffff;
    padding: 70px 0;
}

.mux31-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.mux31-content {
    width: 100%;
}

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

/* Badge */
.mux31-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.mux31-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.mux31-title span {
    color: #84c615;
}

/* Description */
.mux31-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Text */
.mux31-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.mux31-text strong {
    color: #0a0a0a;
}

/* Accent Box */
.mux31-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
}

.mux31-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.mux31-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .mux31-title {
        font-size: 34px;
    }

    .mux31-desc,
    .mux31-text {
        font-size: 16px;
        max-width: 100%;
    }

    .mux31-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .mux31-light {
        padding: 50px 0;
    }

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

    .mux31-desc,
    .mux31-text {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
    }

    .mux31-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .mux31-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .mux31-light {
        padding: 40px 0;
    }

    .mux31-wrap {
        padding: 0 16px;
    }

    .mux31-title {
        font-size: 26px;
    }

    .mux31-desc,
    .mux31-text {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
    }

    .mux31-text {
        margin-bottom: 20px;
    }

    .mux31-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .mux31-accent:hover {
        transform: scale(1.01);
    }

    .mux31-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .mux31-title {
        font-size: 22px;
    }

    .mux31-desc,
    .mux31-text {
        font-size: 13px;
    }

    .mux31-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .mux31-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}

/* ============================================================
     SECTION 32 — What Is Mobile-First Web Design? (CYCLIC 2 - BLACK)
     ============================================================ */
.wm32-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.wm32-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.wm32-content {
    width: 100%;
}

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

/* Badge */
.wm32-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.wm32-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.wm32-title span {
    color: #84c615;
}

/* Description - Justified */
.wm32-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* Subtitle */
.wm32-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

/* List Grid */
.wm32-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.wm32-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.wm32-item:hover {
    background: #252525;
    border-left-color: #84c615;
    transform: translateX(4px) scale(1.02);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.wm32-item .wm32-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

/* Accent Box */
.wm32-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.wm32-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.wm32-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .wm32-title {
        font-size: 34px;
    }

    .wm32-desc {
        font-size: 16px;
        max-width: 100%;
    }

    .wm32-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 750px;
    }

    .wm32-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .wm32-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .wm32-dark {
        padding: 50px 0;
    }

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

    .wm32-desc {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .wm32-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 100%;
    }

    .wm32-item {
        padding: 11px 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

    .wm32-sub {
        font-size: 14px;
    }

    .wm32-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .wm32-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .wm32-dark {
        padding: 40px 0;
    }

    .wm32-wrap {
        padding: 0 16px;
    }

    .wm32-title {
        font-size: 26px;
    }

    .wm32-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .wm32-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .wm32-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .wm32-item .wm32-check {
        font-size: 14px;
    }

    .wm32-sub {
        font-size: 13px;
    }

    .wm32-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .wm32-accent:hover {
        transform: scale(1.01);
    }

    .wm32-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .wm32-title {
        font-size: 22px;
    }

    .wm32-desc {
        font-size: 13px;
    }

    .wm32-list {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .wm32-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .wm32-item .wm32-check {
        font-size: 12px;
        min-width: 16px;
    }

    .wm32-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .wm32-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}

/* ============================================================
     SECTION 33 — Mobile Matters (CYCLIC 1 - WHITE)
     ============================================================ */
.mm33-light {
    background: #ffffff;
    padding: 70px 0;
}

.mm33-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.mm33-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.mm33-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mm33-title {
    font-size: 36px;
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 14px;
    line-height: 1.2;
}

.mm33-title span {
    color: #84c615;
}

.mm33-desc {
    color: #444444;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.mm33-sub {
    color: #84c615;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
}

.mm33-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.mm33-item {
    background: #f5f5f5;
    color: #222222;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    cursor: default;
}

.mm33-item:hover {
    background: #84c615;
    color: #ffffff;
    border-bottom-color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.2);
}

.mm33-item .mm33-tick {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.mm33-item:hover .mm33-tick {
    color: #ffffff;
}

.mm33-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.4s ease;
    cursor: default;
}

.mm33-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.mm33-accent p {
    margin: 0;
}

.mm33-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.mm33-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.mm33-stat {
    background: #f0f0f0;
    padding: 20px 15px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.4s ease;
    cursor: default;
}

.mm33-stat:hover {
    background: #84c615;
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
}

.mm33-stat .mm33-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #84c615;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.mm33-stat:hover .mm33-number {
    color: #ffffff;
}

.mm33-stat .mm33-label {
    display: block;
    font-size: 13px;
    color: #444444;
    transition: color 0.3s ease;
}

.mm33-stat:hover .mm33-label {
    color: #ffffff;
}

.mm33-tag {
    color: #0a0a0a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 30px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.mm33-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}


/* ============================================================
     BASE TEXT-CENTER CLASS
     ============================================================ */
.text-center {
    text-align: center;
}

/* ============================================================
     SECTION 34 — Responsive Web Design (CYCLIC 2 - BLACK)
     ============================================================ */
.rd34-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.rd34-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.rd34-content {
    width: 100%;
}

.rd34-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.rd34-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.rd34-title span {
    color: #84c615;
}

.rd34-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.rd34-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.rd34-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.rd34-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    cursor: default;
}

.rd34-item:hover {
    background: #252525;
    border-right-color: #84c615;
    transform: translateX(-4px) scale(1.02);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.rd34-item .rd34-dot {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

.rd34-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.rd34-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.rd34-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 35 — Consistent Experience (CYCLIC 1 - WHITE)
     ============================================================ */
.ce35-light {
    background: #ffffff;
    padding: 70px 0;
}

.ce35-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ce35-content {
    width: 100%;
}

.ce35-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ce35-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ce35-title span {
    color: #84c615;
}

.ce35-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ce35-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ce35-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.ce35-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.ce35-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 36 — UX Is More Than Design (CYCLIC 2 - BLACK)
     ============================================================ */
.ux36-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.ux36-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ux36-content {
    width: 100%;
}

.ux36-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ux36-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ux36-title span {
    color: #84c615;
}

.ux36-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ux36-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.ux36-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.ux36-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-top: 2px solid transparent;
    cursor: default;
}

.ux36-item:hover {
    background: #252525;
    border-top-color: #84c615;
    transform: translateY(-3px);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.ux36-item .ux36-arrow {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

.ux36-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.ux36-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.ux36-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 37 — Designing Around User Behaviour (CYCLIC 1 - WHITE)
     ============================================================ */
.ub37-light {
    background: #ffffff;
    padding: 70px 0;
}

.ub37-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ub37-content {
    width: 100%;
}

.ub37-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ub37-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ub37-title span {
    color: #84c615;
}

.ub37-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ub37-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.ub37-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.ub37-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    cursor: default;
}

.ub37-item:hover {
    background: #84c615;
    color: #ffffff;
    border-left-color: #0a0a0a;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.ub37-item .ub37-num {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    min-width: 28px;
    transition: color 0.3s ease;
}

.ub37-item:hover .ub37-num {
    color: #ffffff;
}

.ub37-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.ub37-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.ub37-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 38 — Navigation That Makes Sense (CYCLIC 2 - BLACK)
     ============================================================ */
.nav38-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.nav38-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav38-content {
    width: 100%;
}

.nav38-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.nav38-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.nav38-title span {
    color: #84c615;
}

.nav38-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.nav38-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.nav38-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.nav38-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    cursor: default;
}

.nav38-item:hover {
    background: #252525;
    border-bottom-color: #84c615;
    transform: translateY(-3px);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.nav38-item .nav38-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

.nav38-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.nav38-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.nav38-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 39 — Information Architecture (CYCLIC 1 - WHITE)
     ============================================================ */
.ia39-light {
    background: #ffffff;
    padding: 70px 0;
}

.ia39-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ia39-content {
    width: 100%;
}

.ia39-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ia39-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ia39-title span {
    color: #84c615;
}

.ia39-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ia39-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.ia39-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.ia39-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-right: 4px solid transparent;
    cursor: default;
}

.ia39-item:hover {
    background: #84c615;
    color: #ffffff;
    border-right-color: #0a0a0a;
    transform: translateX(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.ia39-item .ia39-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.ia39-item:hover .ia39-icon {
    color: #ffffff;
}

.ia39-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.ia39-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.ia39-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .rd34-title, .ce35-title, .ux36-title, .ub37-title, .nav38-title, .ia39-title {
        font-size: 34px;
    }

    .rd34-desc, .ce35-desc, .ce35-text, .ux36-desc, .ub37-desc, .nav38-desc, .ia39-desc {
        font-size: 16px;
        max-width: 100%;
    }

    .rd34-list, .rd34-item, .ux36-list, .ub37-grid, .nav38-list, .ia39-grid {
        max-width: 100%;
    }

    .rd34-accent, .ce35-accent, .ux36-accent, .ub37-accent, .nav38-accent, .ia39-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .rd34-dark, .ce35-light, .ux36-dark, .ub37-light, .nav38-dark, .ia39-light {
        padding: 50px 0;
    }

    .rd34-title, .ce35-title, .ux36-title, .ub37-title, .nav38-title, .ia39-title {
        font-size: 30px;
    }

    .rd34-desc, .ce35-desc, .ce35-text, .ux36-desc, .ub37-desc, .nav38-desc, .ia39-desc {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .rd34-list, .rd34-item, .ux36-list, .ub37-grid, .nav38-list, .ia39-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 100%;
    }

    .rd34-item, .ub37-item, .nav38-item, .ia39-item {
        padding: 11px 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

    .ux36-item {
        padding: 11px 14px;
        font-size: 13px;
    }

    .rd34-sub, .ux36-sub, .ub37-sub, .nav38-sub, .ia39-sub {
        font-size: 14px;
    }

    .rd34-accent, .ce35-accent, .ux36-accent, .ub37-accent, .nav38-accent, .ia39-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .rd34-badge, .ce35-badge, .ux36-badge, .ub37-badge, .nav38-badge, .ia39-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .rd34-dark, .ce35-light, .ux36-dark, .ub37-light, .nav38-dark, .ia39-light {
        padding: 40px 0;
    }

    .rd34-wrap, .ce35-wrap, .ux36-wrap, .ub37-wrap, .nav38-wrap, .ia39-wrap {
        padding: 0 16px;
    }

    .rd34-title, .ce35-title, .ux36-title, .ub37-title, .nav38-title, .ia39-title {
        font-size: 26px;
    }

    .rd34-desc, .ce35-desc, .ce35-text, .ux36-desc, .ub37-desc, .nav38-desc, .ia39-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .rd34-list, .rd34-item, .ux36-list, .ub37-grid, .nav38-list, .ia39-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .rd34-item, .ub37-item, .nav38-item, .ia39-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .rd34-item .rd34-dot, .nav38-item .nav38-check, .ia39-item .ia39-icon {
        font-size: 14px;
    }

    .ux36-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .ux36-item .ux36-arrow {
        font-size: 14px;
    }

    .ub37-item .ub37-num {
        font-size: 12px;
        min-width: 24px;
    }

    .rd34-sub, .ux36-sub, .ub37-sub, .nav38-sub, .ia39-sub {
        font-size: 13px;
    }

    .rd34-accent, .ce35-accent, .ux36-accent, .ub37-accent, .nav38-accent, .ia39-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .rd34-accent:hover, .ce35-accent:hover, .ux36-accent:hover, .ub37-accent:hover, .nav38-accent:hover, .ia39-accent:hover {
        transform: scale(1.01);
    }

    .rd34-badge, .ce35-badge, .ux36-badge, .ub37-badge, .nav38-badge, .ia39-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .rd34-title, .ce35-title, .ux36-title, .ub37-title, .nav38-title, .ia39-title {
        font-size: 22px;
    }

    .rd34-desc, .ce35-desc, .ce35-text, .ux36-desc, .ub37-desc, .nav38-desc, .ia39-desc {
        font-size: 13px;
    }

    .rd34-list, .rd34-item, .ux36-list, .ub37-grid, .nav38-list, .ia39-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .rd34-item, .ub37-item, .nav38-item, .ia39-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .rd34-item .rd34-dot, .nav38-item .nav38-check, .ia39-item .ia39-icon {
        font-size: 12px;
        min-width: 16px;
    }

    .ux36-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .ux36-item .ux36-arrow {
        font-size: 12px;
        min-width: 16px;
    }

    .ub37-item .ub37-num {
        font-size: 11px;
        min-width: 20px;
    }

    .rd34-accent, .ce35-accent, .ux36-accent, .ub37-accent, .nav38-accent, .ia39-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .rd34-badge, .ce35-badge, .ux36-badge, .ub37-badge, .nav38-badge, .ia39-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}
/* ============================================================
     BASE TEXT-CENTER CLASS
     ============================================================ */
.text-center {
    text-align: center;
}

/* ============================================================
     SECTION 40 — Fast Experiences (CYCLIC 2 - BLACK)
     ============================================================ */
.sp40-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.sp40-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sp40-content {
    width: 100%;
}

.sp40-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sp40-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.sp40-title span {
    color: #84c615;
}

.sp40-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.sp40-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.sp40-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.sp40-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.sp40-item:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.sp40-item .sp40-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.sp40-item:hover .sp40-check {
    color: #0a0a0a;
}

.sp40-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.sp40-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.sp40-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 41 — Touch-Friendly Design (CYCLIC 1 - WHITE)
     ============================================================ */
.tf41-light {
    background: #ffffff;
    padding: 70px 0;
}

.tf41-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tf41-content {
    width: 100%;
}

.tf41-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tf41-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.tf41-title span {
    color: #84c615;
}

.tf41-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.tf41-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.tf41-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.tf41-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.tf41-item:hover {
    background: #84c615;
    color: #ffffff;
    border-left-color: #0a0a0a;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.tf41-item .tf41-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.tf41-item:hover .tf41-check {
    color: #ffffff;
}

.tf41-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.tf41-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.tf41-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 42 — Readability (CYCLIC 2 - BLACK)
     ============================================================ */
.ra42-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.ra42-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ra42-content {
    width: 100%;
}

.ra42-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ra42-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ra42-title span {
    color: #84c615;
}

.ra42-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ra42-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.ra42-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.ra42-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    cursor: default;
}

.ra42-item:hover {
    background: #252525;
    border-bottom-color: #84c615;
    transform: translateY(-3px);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.ra42-item .ra42-dot {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

.ra42-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.ra42-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.ra42-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 43 — Accessibility (CYCLIC 1 - WHITE)
     ============================================================ */
.ac43-light {
    background: #ffffff;
    padding: 70px 0;
}

.ac43-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ac43-content {
    width: 100%;
}

.ac43-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ac43-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ac43-title span {
    color: #84c615;
}

.ac43-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ac43-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.ac43-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.ac43-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    cursor: default;
}

.ac43-item:hover {
    background: #84c615;
    color: #ffffff;
    border-right-color: #0a0a0a;
    transform: translateX(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.ac43-item .ac43-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.ac43-item:hover .ac43-check {
    color: #ffffff;
}

.ac43-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.ac43-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.ac43-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 44 — User Journey Optimisation (CYCLIC 2 - BLACK)
     ============================================================ */
.uj44-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.uj44-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.uj44-content {
    width: 100%;
}

.uj44-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.uj44-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.uj44-title span {
    color: #84c615;
}

.uj44-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.uj44-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

.uj44-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 750px;
    margin: 0 auto 24px auto;
}

.uj44-step {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.uj44-step:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.uj44-step .uj44-num {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    min-width: 28px;
    transition: color 0.3s ease;
}

.uj44-step:hover .uj44-num {
    color: #0a0a0a;
}

.uj44-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
}

.uj44-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.uj44-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .sp40-title, .tf41-title, .ra42-title, .ac43-title, .uj44-title {
        font-size: 34px;
    }

    .sp40-desc, .tf41-desc, .ra42-desc, .ac43-desc, .uj44-desc {
        font-size: 16px;
        max-width: 100%;
    }

    .sp40-list, .ac43-grid, .tf41-grid, .ra42-list, .uj44-steps {
        max-width: 100%;
    }

    .sp40-accent, .tf41-accent, .ra42-accent, .ac43-accent, .uj44-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .sp40-dark, .tf41-light, .ra42-dark, .ac43-light, .uj44-dark {
        padding: 50px 0;
    }

    .sp40-title, .tf41-title, .ra42-title, .ac43-title, .uj44-title {
        font-size: 30px;
    }

    .sp40-desc, .tf41-desc, .ra42-desc, .ac43-desc, .uj44-desc {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .sp40-list, .ac43-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .tf41-grid, .ra42-list, .uj44-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 100%;
    }

    .sp40-item, .tf41-item, .ra42-item, .ac43-item, .uj44-step {
        padding: 11px 14px;
        font-size: 13px;
    }

    .sp40-item, .ac43-item {
        justify-content: flex-start;
    }

    .tf41-item, .ra42-item, .uj44-step {
        justify-content: center;
    }

    .sp40-sub, .tf41-sub, .ra42-sub, .ac43-sub, .uj44-sub {
        font-size: 14px;
    }

    .sp40-accent, .tf41-accent, .ra42-accent, .ac43-accent, .uj44-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .sp40-badge, .tf41-badge, .ra42-badge, .ac43-badge, .uj44-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .sp40-dark, .tf41-light, .ra42-dark, .ac43-light, .uj44-dark {
        padding: 40px 0;
    }

    .sp40-wrap, .tf41-wrap, .ra42-wrap, .ac43-wrap, .uj44-wrap {
        padding: 0 16px;
    }

    .sp40-title, .tf41-title, .ra42-title, .ac43-title, .uj44-title {
        font-size: 26px;
    }

    .sp40-desc, .tf41-desc, .ra42-desc, .ac43-desc, .uj44-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .sp40-list, .ac43-grid, .tf41-grid, .ra42-list, .uj44-steps {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .sp40-item, .tf41-item, .ra42-item, .ac43-item, .uj44-step {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .sp40-item .sp40-check, .tf41-item .tf41-check, .ra42-item .ra42-dot, .ac43-item .ac43-check {
        font-size: 14px;
    }

    .uj44-step .uj44-num {
        font-size: 12px;
        min-width: 24px;
    }

    .sp40-sub, .tf41-sub, .ra42-sub, .ac43-sub, .uj44-sub {
        font-size: 13px;
    }

    .sp40-accent, .tf41-accent, .ra42-accent, .ac43-accent, .uj44-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .sp40-accent:hover, .tf41-accent:hover, .ra42-accent:hover, .ac43-accent:hover, .uj44-accent:hover {
        transform: scale(1.01);
    }

    .sp40-badge, .tf41-badge, .ra42-badge, .ac43-badge, .uj44-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .sp40-title, .tf41-title, .ra42-title, .ac43-title, .uj44-title {
        font-size: 22px;
    }

    .sp40-desc, .tf41-desc, .ra42-desc, .ac43-desc, .uj44-desc {
        font-size: 13px;
    }

    .sp40-list, .ac43-grid, .tf41-grid, .ra42-list, .uj44-steps {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .sp40-item, .tf41-item, .ra42-item, .ac43-item, .uj44-step {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .sp40-item .sp40-check, .tf41-item .tf41-check, .ra42-item .ra42-dot, .ac43-item .ac43-check {
        font-size: 12px;
        min-width: 16px;
    }

    .uj44-step .uj44-num {
        font-size: 11px;
        min-width: 20px;
    }

    .sp40-accent, .tf41-accent, .ra42-accent, .ac43-accent, .uj44-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .sp40-badge, .tf41-badge, .ra42-badge, .ac43-badge, .uj44-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}

/* ============================================================
     SECTION 45 — Bounce Rates (CYCLIC 1 - WHITE)
     ============================================================ */
.br45-light {
    background: #ffffff;
    padding: 60px 0;
}

.br45-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.br45-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.br45-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.br45-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.br45-title span {
    color: #84c615;
}

.br45-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.br45-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.br45-item {
    background: #f5f5f5;
    color: #222222;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(12px, 1vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-top: 3px solid transparent;
    cursor: default;
}

.br45-item:hover {
    background: #ff4444;
    color: #ffffff;
    border-top-color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 68, 68, 0.2);
}

.br45-item .br45-cross {
    color: #ff4444;
    font-weight: 700;
    font-size: 14px;
    transition: color 0.3s ease;
}

.br45-item:hover .br45-cross {
    color: #ffffff;
}

.br45-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.br45-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.br45-accent p {
    margin: 0;
}

.br45-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.br45-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 380px;
}

.br45-metric {
    background: #f0f0f0;
    padding: 25px 15px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.4s ease;
    cursor: default;
}

.br45-metric:hover {
    background: #84c615;
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
}

.br45-metric .br45-number {
    display: block;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    color: #84c615;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.br45-metric:hover .br45-number {
    color: #ffffff;
}

.br45-metric .br45-label {
    display: block;
    font-size: clamp(12px, 1vw, 14px);
    color: #444444;
    transition: color 0.3s ease;
}

.br45-metric:hover .br45-label {
    color: #ffffff;
}

.br45-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.br45-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 46 — Core Web Vitals (CYCLIC 2 - BLACK)
     ============================================================ */
.cw46-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.cw46-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cw46-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cw46-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cw46-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.cw46-title span {
    color: #84c615;
}

.cw46-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.cw46-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.cw46-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.cw46-item {
    background: #161616;
    color: #e0e0e0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(12px, 1vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.cw46-item:hover {
    background: #252525;
    border-left-color: #84c615;
    transform: translateX(5px);
    color: #84c615;
}

.cw46-item .cw46-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
}

.cw46-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.cw46-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.cw46-accent p {
    margin: 0;
}

.cw46-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.cw46-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 380px;
}

.cw46-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cw46-bar span {
    color: #cccccc;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
}

.cw46-fill {
    height: 12px;
    background: #84c615;
    border-radius: 20px;
    transition: all 0.5s ease;
}

.cw46-bar:hover .cw46-fill {
    background: #9ad62a;
    transform: scaleY(1.3);
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.3);
}

.cw46-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.cw46-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     SECTION 47 — AI-Ready (CYCLIC 1 - WHITE)
     ============================================================ */
.ai47-light {
    background: #ffffff;
    padding: 60px 0;
}

.ai47-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ai47-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ai47-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ai47-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.ai47-title span {
    color: #84c615;
}

.ai47-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.ai47-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.ai47-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.ai47-item {
    background: #f5f5f5;
    color: #222222;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(12px, 1vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    cursor: default;
}

.ai47-item:hover {
    background: #84c615;
    color: #ffffff;
    border-bottom-color: #0a0a0a;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.ai47-item .ai47-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    transition: color 0.3s ease;
}

.ai47-item:hover .ai47-check {
    color: #ffffff;
}

.ai47-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.ai47-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.ai47-accent p {
    margin: 0;
}

.ai47-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.ai47-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 380px;
}

.ai47-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    width: 100%;
}

.ai47-row-1 { width: 20%; }
.ai47-row-2 { width: 50%; }
.ai47-row-3 { width: 80%; }
.ai47-row-4 { width: 100%; }

.ai47-label {
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 700;
    color: #0a0a0a;
    text-align: center;
    flex: 1;
    transition: all 0.3s ease;
    cursor: default;
}

.ai47-label:hover {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.ai47-row-1 .ai47-label {
    background: #84c615;
    color: #ffffff;
    font-size: clamp(13px, 1.1vw, 16px);
}

.ai47-row-1 .ai47-label:hover {
    background: #0a0a0a;
    color: #84c615;
    transform: scale(1.1);
}

.ai47-row-2 .ai47-label {
    background: #e8f5d4;
    color: #0a0a0a;
}

.ai47-row-2 .ai47-label:hover {
    background: #84c615;
    color: #ffffff;
}

.ai47-row-3 .ai47-label {
    background: #d4e8bc;
    color: #0a0a0a;
}

.ai47-row-3 .ai47-label:hover {
    background: #84c615;
    color: #ffffff;
}

.ai47-row-4 .ai47-label {
    background: #c0dba8;
    color: #0a0a0a;
    font-weight: 400;
}

.ai47-row-4 .ai47-label:hover {
    background: #84c615;
    color: #ffffff;
    font-weight: 700;
}

.ai47-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.ai47-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 48 — MobileFirst Framework (CYCLIC 2 - BLACK)
     ============================================================ */
.mf48-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.mf48-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.mf48-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.mf48-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mf48-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.mf48-title span {
    color: #84c615;
}

.mf48-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.mf48-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
}

.mf48-item {
    background: #161616;
    color: #e0e0e0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: clamp(11px, 0.9vw, 13px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.mf48-item:hover {
    background: #252525;
    border-left-color: #84c615;
    transform: translateX(5px);
    color: #84c615;
}

.mf48-item .mf48-check {
    color: #84c615;
    font-weight: 700;
    font-size: 13px;
}

.mf48-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.mf48-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.mf48-accent p {
    margin: 0;
}

.mf48-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.mf48-framework-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 340px;
}

.mf48-card {
    background: #161616;
    color: #cccccc;
    padding: 25px 15px;
    text-align: center;
    border-radius: 12px;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    border: 2px solid #2a2a2a;
    transition: all 0.4s ease;
    cursor: default;
}

.mf48-card:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
}

.mf48-card:nth-child(2):hover {
    background: #6aad10;
}
.mf48-card:nth-child(3):hover {
    background: #9ad62a;
}
.mf48-card:nth-child(4):hover {
    background: #ffffff;
}

.mf48-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.mf48-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     SECTION 49 — Trust Responsive (CYCLIC 1 - WHITE)
     ============================================================ */
.tr49-light {
    background: #ffffff;
    padding: 60px 0;
}

.tr49-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tr49-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.tr49-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.tr49-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.tr49-title span {
    color: #84c615;
}

.tr49-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.tr49-text {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 18px;
}

.tr49-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.tr49-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.tr49-accent p {
    margin: 0;
}

.tr49-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.tr49-testimonials {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 380px;
}

.tr49-testimonial {
    background: #f5f5f5;
    padding: 18px 22px;
    border-radius: 12px;
    position: relative;
    transition: all 0.4s ease;
    cursor: default;
}

.tr49-testimonial:hover {
    background: #84c615;
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
}

.tr49-testimonial .tr49-quote {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 800;
    color: #84c615;
    display: block;
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.tr49-testimonial:hover .tr49-quote {
    color: #ffffff;
}

.tr49-testimonial p {
    font-size: clamp(13px, 1vw, 15px);
    color: #222222;
    margin: 0 0 4px 0;
    transition: color 0.3s ease;
}

.tr49-testimonial:hover p {
    color: #ffffff;
}

.tr49-testimonial .tr49-author {
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 600;
    color: #84c615;
    transition: color 0.3s ease;
}

.tr49-testimonial:hover .tr49-author {
    color: #ffffff;
}

.tr49-testimonial:nth-child(2):hover {
    transform: translateX(-8px) scale(1.02);
}
.tr49-testimonial:nth-child(3):hover {
    transform: translateY(-5px) scale(1.02);
}

.tr49-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.tr49-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 50 — UX Excellence Checklist (CYCLIC 2 - BLACK)
     ============================================================ */
.ux50-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.ux50-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ux50-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ux50-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ux50-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.ux50-title span {
    color: #84c615;
}

.ux50-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.ux50-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
}

.ux50-item {
    background: #161616;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: clamp(11px, 0.9vw, 13px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.ux50-item:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.ux50-item .ux50-check {
    color: #84c615;
    font-weight: 700;
    font-size: 13px;
    transition: color 0.3s ease;
}

.ux50-item:hover .ux50-check {
    color: #0a0a0a;
}

.ux50-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.ux50-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.ux50-accent p {
    margin: 0;
}

.ux50-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.ux50-progress {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 380px;
}

.ux50-progress-item {
    display: grid;
    grid-template-columns: 110px 1fr 45px;
    align-items: center;
    gap: 10px;
}

.ux50-progress-label {
    color: #cccccc;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
}

.ux50-progress-bar {
    height: 9px;
    background: #161616;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: default;
}

.ux50-progress-bar:hover {
    border-color: #84c615;
    transform: scaleX(1.02);
}

.ux50-progress-fill {
    height: 100%;
    background: #84c615;
    border-radius: 20px;
    transition: all 0.5s ease;
}

.ux50-progress-item:hover .ux50-progress-fill {
    background: #9ad62a;
    box-shadow: 0 0 20px rgba(132, 198, 21, 0.3);
}

.ux50-progress-value {
    color: #84c615;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 700;
    text-align: right;
}

.ux50-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.ux50-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     RESPONSIVE BREAKPOINTS - MOBILE FIRST
     ============================================================ */

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    /* All sections - single column */
    .tf41-layout,
    .ra42-grid,
    .ac43-container,
    .uj44-layout,
    .br45-grid,
    .cw46-layout,
    .ai47-container,
    .mf48-layout,
    .tr49-grid,
    .ux50-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* All grids - single column */
    .tf41-grid,
    .ra42-list,
    .ac43-grid,
    .uj44-steps,
    .br45-list,
    .cw46-grid,
    .ai47-grid,
    .mf48-list,
    .ux50-grid {
        grid-template-columns: 1fr;
    }

    /* Visual elements */
    .tf41-touch-grid {
        max-width: 200px;
        gap: 6px;
    }
    
    .ac43-symbols {
        max-width: 200px;
        gap: 6px;
    }
    
    .uj44-pathway {
        grid-template-columns: repeat(3, 1fr);
        max-width: 200px;
        gap: 6px;
    }
    
    .mf48-framework-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 220px;
        gap: 10px;
    }
    
    .mf48-card {
        padding: 18px 10px;
        font-size: 14px;
    }
    
    .br45-metrics {
        grid-template-columns: 1fr 1fr;
        max-width: 220px;
        gap: 10px;
    }
    
    .br45-metric {
        padding: 18px 10px;
    }
    
    .br45-metric .br45-number {
        font-size: 24px;
    }
    
    .cw46-bars {
        max-width: 220px;
    }
    
    .ai47-pyramid {
        max-width: 220px;
    }
    
    .ai47-label {
        font-size: 10px;
        padding: 4px 6px;
    }
    
    .tr49-testimonials {
        max-width: 220px;
    }
    
    .tr49-testimonial {
        padding: 14px 16px;
    }
    
    .tr49-testimonial p {
        font-size: 13px;
    }
    
    .ux50-progress {
        max-width: 220px;
    }
    
    .ux50-progress-item {
        grid-template-columns: 70px 1fr 35px;
        gap: 6px;
    }
    
    .ux50-progress-label {
        font-size: 11px;
    }
    
    .ux50-progress-value {
        font-size: 11px;
    }
    
    /* Tags */
    .tf41-tag,
    .ra42-tag,
    .ac43-tag,
    .uj44-tag,
    .br45-tag,
    .cw46-tag,
    .ai47-tag,
    .mf48-tag,
    .tr49-tag,
    .ux50-tag {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    /* Accent boxes */
    .tf41-accent,
    .ra42-accent,
    .ac43-accent,
    .uj44-accent,
    .br45-accent,
    .cw46-accent,
    .ai47-accent,
    .mf48-accent,
    .tr49-accent,
    .ux50-accent {
        padding: 14px 16px;
        font-size: 14px;
    }
}

/* Mobile Medium (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .tf41-layout,
    .ra42-grid,
    .ac43-container,
    .uj44-layout,
    .br45-grid,
    .cw46-layout,
    .ai47-container,
    .mf48-layout,
    .tr49-grid,
    .ux50-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .tf41-grid,
    .ra42-list,
    .ac43-grid,
    .uj44-steps,
    .br45-list,
    .cw46-grid,
    .ai47-grid,
    .mf48-list,
    .ux50-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tf41-touch-grid {
        max-width: 260px;
    }
    
    .ac43-symbols {
        max-width: 260px;
    }
    
    .uj44-pathway {
        max-width: 320px;
    }
    
    .mf48-framework-grid {
        max-width: 280px;
    }
    
    .br45-metrics {
        max-width: 300px;
    }
    
    .cw46-bars {
        max-width: 300px;
    }
    
    .ai47-pyramid {
        max-width: 300px;
    }
    
    .tr49-testimonials {
        max-width: 300px;
    }
    
    .ux50-progress {
        max-width: 300px;
    }
    
    .ux50-progress-item {
        grid-template-columns: 90px 1fr 40px;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .tf41-layout,
    .ra42-grid,
    .ac43-container,
    .uj44-layout,
    .br45-grid,
    .cw46-layout,
    .ai47-container,
    .mf48-layout,
    .tr49-grid,
    .ux50-layout {
        gap: 40px;
    }

    .tf41-grid,
    .ra42-list,
    .ac43-grid,
    .uj44-steps,
    .br45-list,
    .cw46-grid,
    .ai47-grid,
    .mf48-list,
    .ux50-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
    /* Default styles apply - no changes needed */
}

/* ============================================================
     UTILITY - FIX FOR VERY SMALL SCREENS
     ============================================================ */
@media (max-width: 360px) {
    .tf41-item,
    .ra42-item,
    .ac43-item,
    .uj44-step,
    .br45-item,
    .cw46-item,
    .ai47-item,
    .mf48-item,
    .ux50-item {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }
    
    .tf41-badge,
    .ra42-badge,
    .ac43-badge,
    .uj44-badge,
    .br45-badge,
    .cw46-badge,
    .ai47-badge,
    .mf48-badge,
    .tr49-badge,
    .ux50-badge {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }
}







/* ============================================================
     SECTION 51 — Conversion-Focused Design (CYCLIC 1 - WHITE)
     ============================================================ */
.cf51-light {
    background: #ffffff;
    padding: 60px 0;
}

.cf51-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cf51-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cf51-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cf51-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.cf51-title span {
    color: #84c615;
}

.cf51-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.cf51-text {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 18px;
}

.cf51-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.cf51-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.cf51-accent p {
    margin: 0;
}

.cf51-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.cf51-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.cf51-stat {
    background: #f0f0f0;
    padding: 25px 15px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.4s ease;
    cursor: default;
}

.cf51-stat:hover {
    background: #84c615;
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
}

.cf51-stat .cf51-number {
    display: block;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #84c615;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.cf51-stat:hover .cf51-number {
    color: #ffffff;
}

.cf51-stat .cf51-label {
    display: block;
    font-size: clamp(11px, 0.9vw, 13px);
    color: #444444;
    transition: color 0.3s ease;
}

.cf51-stat:hover .cf51-label {
    color: #ffffff;
}

.cf51-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.cf51-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 52 — What Is Conversion (CYCLIC 2 - BLACK)
     ============================================================ */
.wc52-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.wc52-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.wc52-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.wc52-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.wc52-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.wc52-title span {
    color: #84c615;
}

.wc52-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.wc52-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.wc52-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
}

.wc52-item {
    background: #161616;
    color: #e0e0e0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: clamp(12px, 0.9vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.wc52-item:hover {
    background: #252525;
    border-left-color: #84c615;
    transform: translateX(5px);
    color: #84c615;
}

.wc52-item .wc52-check {
    color: #84c615;
    font-weight: 700;
    font-size: 13px;
}

.wc52-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.wc52-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.wc52-accent p {
    margin: 0;
}

.wc52-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.wc52-path {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.wc52-step {
    background: #161616;
    color: #e0e0e0;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.wc52-step:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.wc52-arrow {
    color: #84c615;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 700;
}

.wc52-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.wc52-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     SECTION 53 — Every Visitor Purpose (CYCLIC 1 - WHITE)
     ============================================================ */
.ep53-light {
    background: #ffffff;
    padding: 60px 0;
}

.ep53-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ep53-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ep53-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ep53-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.ep53-title span {
    color: #84c615;
}

.ep53-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.ep53-text {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 18px;
}

.ep53-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.ep53-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.ep53-accent p {
    margin: 0;
}

.ep53-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.ep53-types {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.ep53-type {
    background: #f0f0f0;
    color: #0a0a0a;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
}

.ep53-type:hover {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.ep53-type:nth-child(2):hover {
    background: #0a0a0a;
    color: #84c615;
}

.ep53-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.ep53-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 54 — Five Questions (CYCLIC 2 - BLACK)
     ============================================================ */
.fq54-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.fq54-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fq54-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.fq54-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.fq54-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.fq54-title span {
    color: #84c615;
}

.fq54-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.fq54-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.fq54-item {
    background: #161616;
    color: #e0e0e0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    cursor: default;
}

.fq54-item:hover {
    background: #252525;
    border-right-color: #84c615;
    transform: translateX(-5px);
    color: #84c615;
}

.fq54-item .fq54-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
}

.fq54-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.fq54-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.fq54-accent p {
    margin: 0;
}

.fq54-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.fq54-questions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 350px;
}

.fq54-q {
    background: #161616;
    color: #e0e0e0;
    padding: 16px 12px;
    text-align: center;
    border-radius: 10px;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 800;
    border: 2px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: default;
}

.fq54-q:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.08);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.fq54-q:nth-child(4) {
    grid-column: 1 / 2;
}
.fq54-q:nth-child(5) {
    grid-column: 2 / 3;
}

.fq54-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.fq54-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     SECTION 55 — Hero Sections (CYCLIC 1 - WHITE)
     ============================================================ */
.hs55-light {
    background: #ffffff;
    padding: 60px 0;
}

.hs55-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hs55-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.hs55-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hs55-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.hs55-title span {
    color: #84c615;
}

.hs55-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.hs55-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.hs55-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.hs55-item {
    background: #f5f5f5;
    color: #222222;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(12px, 1vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    cursor: default;
}

.hs55-item:hover {
    background: #84c615;
    color: #ffffff;
    border-bottom-color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.hs55-item .hs55-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    transition: color 0.3s ease;
}

.hs55-item:hover .hs55-check {
    color: #ffffff;
}

.hs55-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.hs55-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.hs55-accent p {
    margin: 0;
}

.hs55-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.hs55-elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 350px;
}

.hs55-element {
    background: #f0f0f0;
    color: #0a0a0a;
    padding: 16px 20px;
    text-align: center;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
}

.hs55-element:hover {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.hs55-element:nth-child(2):hover {
    background: #0a0a0a;
    color: #84c615;
}

.hs55-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.hs55-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 56 — CTA Placement (CYCLIC 2 - BLACK)
     ============================================================ */
.cp56-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.cp56-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cp56-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cp56-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cp56-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.cp56-title span {
    color: #84c615;
}

.cp56-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.cp56-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.cp56-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.cp56-item {
    background: #161616;
    color: #e0e0e0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(12px, 1vw, 14px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-top: 2px solid transparent;
    cursor: default;
}

.cp56-item:hover {
    background: #252525;
    border-top-color: #84c615;
    transform: translateY(-3px);
    color: #84c615;
}

.cp56-item .cp56-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
}

.cp56-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.cp56-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.cp56-accent p {
    margin: 0;
}

.cp56-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.cp56-positions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.cp56-position {
    background: #161616;
    color: #e0e0e0;
    padding: 18px 30px;
    border-radius: 10px;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    border: 2px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: default;
}

.cp56-position:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.cp56-position:nth-child(2):hover {
    background: #6aad10;
}

.cp56-position:nth-child(3):hover {
    background: #9ad62a;
}

.cp56-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.cp56-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     SECTION 57 — Trust Before (CYCLIC 1 - WHITE)
     ============================================================ */
.tb57-light {
    background: #ffffff;
    padding: 60px 0;
}

.tb57-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tb57-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.tb57-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.tb57-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.tb57-title span {
    color: #84c615;
}

.tb57-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.tb57-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.tb57-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
}

.tb57-item {
    background: #f5f5f5;
    color: #222222;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: clamp(11px, 0.9vw, 13px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.tb57-item:hover {
    background: #84c615;
    color: #ffffff;
    border-color: #0a0a0a;
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.tb57-item .tb57-check {
    color: #84c615;
    font-weight: 700;
    font-size: 12px;
    transition: color 0.3s ease;
}

.tb57-item:hover .tb57-check {
    color: #ffffff;
}

.tb57-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.tb57-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.tb57-accent p {
    margin: 0;
}

.tb57-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.tb57-signals {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.tb57-signal {
    background: #f0f0f0;
    color: #0a0a0a;
    padding: 16px 28px;
    border-radius: 50px;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
}

.tb57-signal:hover {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.tb57-signal:nth-child(2):hover {
    background: #0a0a0a;
    color: #84c615;
}

.tb57-signal:nth-child(3):hover {
    background: #6aad10;
    color: #ffffff;
}

.tb57-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.tb57-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 58 — Simplicity (CYCLIC 2 - BLACK)
     ============================================================ */
.sc58-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.sc58-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sc58-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.sc58-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sc58-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.sc58-title span {
    color: #84c615;
}

.sc58-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.sc58-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.sc58-items {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.sc58-item {
    background: #161616;
    color: #e0e0e0;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.sc58-item:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.sc58-item .sc58-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s ease;
}

.sc58-item:hover .sc58-check {
    color: #0a0a0a;
}

.sc58-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.sc58-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.sc58-accent p {
    margin: 0;
}

.sc58-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.sc58-principles {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.sc58-principle {
    background: #161616;
    color: #e0e0e0;
    padding: 20px 30px;
    border-radius: 12px;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 800;
    border: 2px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: default;
}

.sc58-principle:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.sc58-principle:nth-child(2):hover {
    background: #6aad10;
}

.sc58-principle:nth-child(3):hover {
    background: #9ad62a;
}

.sc58-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.sc58-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     SECTION 59 — Contact Forms (CYCLIC 1 - WHITE)
     ============================================================ */
.ef59-light {
    background: #ffffff;
    padding: 60px 0;
}

.ef59-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ef59-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ef59-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ef59-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.ef59-title span {
    color: #84c615;
}

.ef59-desc {
    color: #444444;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.ef59-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.ef59-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.ef59-item {
    background: #f5f5f5;
    color: #222222;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    cursor: default;
}

.ef59-item:hover {
    background: #84c615;
    color: #ffffff;
    border-left-color: #0a0a0a;
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.ef59-item .ef59-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s ease;
}

.ef59-item:hover .ef59-check {
    color: #ffffff;
}

.ef59-accent {
    background: #84c615;
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.ef59-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #0a0a0a;
    color: #84c615;
}

.ef59-accent p {
    margin: 0;
}

.ef59-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.ef59-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 350px;
}

.ef59-field {
    background: #f0f0f0;
    color: #0a0a0a;
    padding: 14px 18px;
    text-align: center;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
}

.ef59-field:hover {
    background: #84c615;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.ef59-field:nth-child(3) {
    grid-column: 1 / 2;
}
.ef59-field:nth-child(4) {
    grid-column: 2 / 3;
}

.ef59-tag {
    color: #0a0a0a;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #0a0a0a;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.ef59-tag:hover {
    background: #0a0a0a;
    color: #84c615;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.15);
}

/* ============================================================
     SECTION 60 — Visual Trust Signals (CYCLIC 2 - BLACK)
     ============================================================ */
.vt60-dark {
    background: #0a0a0a;
    padding: 60px 0;
}

.vt60-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.vt60-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.vt60-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.vt60-title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.vt60-title span {
    color: #84c615;
}

.vt60-desc {
    color: #cccccc;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    margin-bottom: 14px;
}

.vt60-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: 10px;
}

.vt60-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
}

.vt60-item {
    background: #161616;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: clamp(11px, 0.9vw, 13px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    cursor: default;
}

.vt60-item:hover {
    background: #252525;
    border-right-color: #84c615;
    transform: translateX(-5px);
    color: #84c615;
}

.vt60-item .vt60-check {
    color: #84c615;
    font-weight: 700;
    font-size: 12px;
}

.vt60-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 16px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    transition: all 0.4s ease;
    cursor: default;
}

.vt60-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3);
    background: #ffffff;
}

.vt60-accent p {
    margin: 0;
}

.vt60-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.vt60-signals {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.vt60-signal {
    background: #161616;
    color: #e0e0e0;
    padding: 18px 30px;
    border-radius: 12px;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 700;
    border: 2px solid #2a2a2a;
    transition: all 0.3s ease;
    cursor: default;
}

.vt60-signal:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}

.vt60-signal:nth-child(2):hover {
    background: #6aad10;
}

.vt60-signal:nth-child(3):hover {
    background: #9ad62a;
}

.vt60-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.vt60-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     RESPONSIVE BREAKPOINTS - MOBILE FIRST
     ============================================================ */

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .cf51-layout,
    .wc52-grid,
    .ep53-container,
    .fq54-layout,
    .hs55-grid,
    .cp56-container,
    .tb57-layout,
    .sc58-grid,
    .ef59-container,
    .vt60-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wc52-list,
    .fq54-grid,
    .hs55-list,
    .cp56-grid,
    .tb57-grid,
    .ef59-grid,
    .vt60-grid {
        grid-template-columns: 1fr;
    }

    .cf51-stats {
        grid-template-columns: 1fr;
        max-width: 200px;
    }

    .wc52-path {
        flex-direction: column;
        gap: 6px;
    }
    .wc52-arrow {
        transform: rotate(90deg);
    }

    .fq54-questions {
        grid-template-columns: 1fr 1fr;
        max-width: 200px;
        gap: 8px;
    }
    .fq54-q:nth-child(4) {
        grid-column: 1 / 2;
    }
    .fq54-q:nth-child(5) {
        grid-column: 2 / 3;
    }

    .hs55-elements {
        grid-template-columns: 1fr 1fr;
        max-width: 200px;
        gap: 8px;
    }

    .ef59-fields {
        grid-template-columns: 1fr 1fr;
        max-width: 200px;
        gap: 8px;
    }
    .ef59-field:nth-child(3) {
        grid-column: 1 / 2;
    }
    .ef59-field:nth-child(4) {
        grid-column: 2 / 3;
    }

    .ep53-types,
    .tb57-signals,
    .sc58-items {
        flex-direction: column;
        align-items: center;
    }

    .cp56-positions,
    .sc58-principles,
    .vt60-signals {
        flex-direction: column;
        align-items: center;
    }

    .cf51-tag,
    .wc52-tag,
    .ep53-tag,
    .fq54-tag,
    .hs55-tag,
    .cp56-tag,
    .tb57-tag,
    .sc58-tag,
    .ef59-tag,
    .vt60-tag {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* Mobile Medium (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .cf51-layout,
    .wc52-grid,
    .ep53-container,
    .fq54-layout,
    .hs55-grid,
    .cp56-container,
    .tb57-layout,
    .sc58-grid,
    .ef59-container,
    .vt60-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .wc52-list,
    .fq54-grid,
    .hs55-list,
    .cp56-grid,
    .tb57-grid,
    .ef59-grid,
    .vt60-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cf51-stats {
        max-width: 350px;
    }

    .wc52-path {
        max-width: 350px;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .cf51-layout,
    .wc52-grid,
    .ep53-container,
    .fq54-layout,
    .hs55-grid,
    .cp56-container,
    .tb57-layout,
    .sc58-grid,
    .ef59-container,
    .vt60-layout {
        gap: 40px;
    }
}

/* Desktop (1025px+) - Default styles apply */




/* ============================================================
     SECTION 61 — Reducing Bounce Rates (CYCLIC 1 - WHITE)
     ============================================================ */
.br61-light { background: #ffffff; padding: 60px 0; }
.br61-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.br61-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.br61-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.br61-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.br61-title span { color: #84c615; }
.br61-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.br61-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.br61-item { background: #f5f5f5; color: #222222; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 1vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-left: 3px solid transparent; cursor: default; }
.br61-item:hover { background: #ff6b6b; color: #ffffff; border-left-color: #0a0a0a; transform: translateX(5px); box-shadow: 0 5px 20px rgba(255, 107, 107, 0.2); }
.br61-item .br61-check { color: #ff6b6b; font-weight: 700; font-size: 14px; transition: color 0.3s ease; }
.br61-item:hover .br61-check { color: #ffffff; }
.br61-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.br61-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.br61-accent p { margin: 0; }
.br61-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.br61-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; width: 100%; max-width: 400px; }
.br61-stat { background: #f0f0f0; padding: 25px 15px; text-align: center; border-radius: 12px; transition: all 0.4s ease; cursor: default; }
.br61-stat:hover { background: #84c615; transform: scale(1.05) translateY(-5px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); }
.br61-stat .br61-number { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #84c615; margin-bottom: 4px; transition: color 0.3s ease; }
.br61-stat:hover .br61-number { color: #ffffff; }
.br61-stat .br61-label { display: block; font-size: clamp(11px, 0.9vw, 13px); color: #444444; transition: color 0.3s ease; }
.br61-stat:hover .br61-label { color: #ffffff; }
.br61-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.br61-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 62 — Landing Pages (CYCLIC 2 - BLACK)
     ============================================================ */
.lp62-dark { background: #0a0a0a; padding: 60px 0; }
.lp62-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.lp62-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.lp62-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.lp62-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.lp62-title span { color: #84c615; }
.lp62-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.lp62-sub { color: #84c615; font-weight: 600; font-size: clamp(13px, 1.1vw, 15px); margin-bottom: 10px; }
.lp62-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.lp62-item { background: #161616; color: #e0e0e0; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 1vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-right: 3px solid transparent; cursor: default; }
.lp62-item:hover { background: #252525; border-right-color: #84c615; transform: translateX(-5px); color: #84c615; }
.lp62-item .lp62-check { color: #84c615; font-weight: 700; font-size: 14px; }
.lp62-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.lp62-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.lp62-accent p { margin: 0; }
.lp62-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.lp62-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 450px; }
.lp62-step { background: #161616; color: #e0e0e0; padding: 12px 20px; border-radius: 8px; font-size: clamp(12px, 1vw, 14px); font-weight: 600; transition: all 0.3s ease; cursor: default; border: 1px solid #2a2a2a; }
.lp62-step:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.lp62-arrow { color: #84c615; font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; }
.lp62-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.lp62-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 63 — Local Businesses (CYCLIC 1 - WHITE)
     ============================================================ */
.lb63-light { background: #ffffff; padding: 60px 0; }
.lb63-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.lb63-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.lb63-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.lb63-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.lb63-title span { color: #84c615; }
.lb63-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.lb63-text { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.lb63-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.lb63-item { background: #f5f5f5; color: #222222; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 1vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-bottom: 2px solid transparent; cursor: default; }
.lb63-item:hover { background: #84c615; color: #ffffff; border-bottom-color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.lb63-item .lb63-check { color: #84c615; font-weight: 700; font-size: 14px; transition: color 0.3s ease; }
.lb63-item:hover .lb63-check { color: #ffffff; }
.lb63-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.lb63-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.lb63-accent p { margin: 0; }
.lb63-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.lb63-tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.lb63-tag-item { background: #f0f0f0; color: #0a0a0a; padding: 14px 28px; border-radius: 50px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; transition: all 0.3s ease; cursor: default; }
.lb63-tag-item:hover { background: #84c615; color: #ffffff; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.lb63-tag-item:nth-child(2):hover { background: #0a0a0a; color: #84c615; }
.lb63-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.lb63-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 64 — Business Outcomes (CYCLIC 2 - BLACK)
     ============================================================ */
.bo64-dark { background: #0a0a0a; padding: 60px 0; }
.bo64-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.bo64-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.bo64-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.bo64-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.bo64-title span { color: #84c615; }
.bo64-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.bo64-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.bo64-item { background: #161616; color: #e0e0e0; padding: 8px 12px; border-radius: 6px; font-size: clamp(11px, 0.9vw, 13px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-top: 2px solid transparent; cursor: default; }
.bo64-item:hover { background: #252525; border-top-color: #84c615; transform: translateY(-3px); color: #84c615; }
.bo64-item .bo64-check { color: #84c615; font-weight: 700; font-size: 12px; }
.bo64-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.bo64-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.bo64-accent p { margin: 0; }
.bo64-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.bo64-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; width: 100%; max-width: 400px; }
.bo64-metric { background: #161616; padding: 25px 15px; text-align: center; border-radius: 12px; border: 1px solid #2a2a2a; transition: all 0.4s ease; cursor: default; }
.bo64-metric:hover { background: #84c615; transform: scale(1.05) translateY(-5px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); }
.bo64-metric .bo64-number { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #84c615; margin-bottom: 4px; transition: color 0.3s ease; }
.bo64-metric:hover .bo64-number { color: #0a0a0a; }
.bo64-metric .bo64-label { display: block; font-size: clamp(11px, 0.9vw, 13px); color: #cccccc; transition: color 0.3s ease; }
.bo64-metric:hover .bo64-label { color: #0a0a0a; }
.bo64-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.bo64-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 65 — ConversionCanvas Framework (CYCLIC 1 - WHITE)
     ============================================================ */
.cc65-light { background: #ffffff; padding: 60px 0; }
.cc65-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cc65-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cc65-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.cc65-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.cc65-title span { color: #84c615; }
.cc65-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.cc65-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.cc65-item { background: #f5f5f5; color: #222222; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 0.9vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-left: 3px solid transparent; cursor: default; }
.cc65-item:hover { background: #84c615; color: #ffffff; border-left-color: #0a0a0a; transform: translateX(5px); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.cc65-item .cc65-check { color: #84c615; font-weight: 700; font-size: 13px; transition: color 0.3s ease; }
.cc65-item:hover .cc65-check { color: #ffffff; }
.cc65-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.cc65-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.cc65-accent p { margin: 0; }
.cc65-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.cc65-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 350px; }
.cc65-phase { background: #f0f0f0; color: #0a0a0a; padding: 16px 20px; text-align: center; border-radius: 10px; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; transition: all 0.3s ease; cursor: default; }
.cc65-phase:hover { background: #84c615; color: #ffffff; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.cc65-phase:nth-child(2):hover { background: #0a0a0a; color: #84c615; }
.cc65-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.cc65-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 66 — Measuring Success (CYCLIC 2 - BLACK)
     ============================================================ */
.ms66-dark { background: #0a0a0a; padding: 60px 0; }
.ms66-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ms66-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ms66-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.ms66-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.ms66-title span { color: #84c615; }
.ms66-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.ms66-sub { color: #84c615; font-weight: 600; font-size: clamp(13px, 1.1vw, 15px); margin-bottom: 10px; }
.ms66-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.ms66-item { background: #161616; color: #e0e0e0; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 0.9vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-bottom: 2px solid transparent; cursor: default; }
.ms66-item:hover { background: #252525; border-bottom-color: #84c615; transform: translateY(-3px); color: #84c615; }
.ms66-item .ms66-check { color: #84c615; font-weight: 700; font-size: 13px; }
.ms66-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.ms66-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.ms66-accent p { margin: 0; }
.ms66-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.ms66-questions { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.ms66-q { background: #161616; color: #e0e0e0; padding: 16px 28px; border-radius: 12px; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; border: 2px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.ms66-q:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.ms66-q:nth-child(2):hover { background: #6aad10; }
.ms66-q:nth-child(3):hover { background: #9ad62a; }
.ms66-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.ms66-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 67 — Why Choose Freshora (CYCLIC 1 - WHITE)
     ============================================================ */
.wc67-light { background: #ffffff; padding: 60px 0; }
.wc67-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.wc67-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.wc67-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.wc67-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.wc67-title span { color: #84c615; }
.wc67-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 18px; }
.wc67-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.wc67-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.wc67-accent p { margin: 0; }
.wc67-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.wc67-reasons { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.wc67-reason { background: #f0f0f0; color: #0a0a0a; padding: 18px 30px; border-radius: 12px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; transition: all 0.3s ease; cursor: default; }
.wc67-reason:hover { background: #84c615; color: #ffffff; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.wc67-reason:nth-child(2):hover { background: #0a0a0a; color: #84c615; }
.wc67-reason:nth-child(3):hover { background: #6aad10; color: #ffffff; }
.wc67-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.wc67-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 68 — Conversion Checklist (CYCLIC 2 - BLACK)
     ============================================================ */
.cl68-dark { background: #0a0a0a; padding: 60px 0; }
.cl68-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cl68-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cl68-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.cl68-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.cl68-title span { color: #84c615; }
.cl68-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.cl68-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.cl68-item { background: #161616; color: #e0e0e0; padding: 8px 12px; border-radius: 6px; font-size: clamp(11px, 0.9vw, 13px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border: 1px solid transparent; cursor: default; }
.cl68-item:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.02); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.cl68-item .cl68-check { color: #84c615; font-weight: 700; font-size: 12px; transition: color 0.3s ease; }
.cl68-item:hover .cl68-check { color: #0a0a0a; }
.cl68-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.cl68-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.cl68-accent p { margin: 0; }
.cl68-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.cl68-items { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.cl68-item-label { background: #161616; color: #e0e0e0; padding: 18px 30px; border-radius: 12px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; border: 2px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.cl68-item-label:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.cl68-item-label:nth-child(2):hover { background: #6aad10; }
.cl68-item-label:nth-child(3):hover { background: #9ad62a; }
.cl68-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.cl68-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 69 — Common Mistakes (CYCLIC 1 - WHITE)
     ============================================================ */
.cm69-light { background: #ffffff; padding: 60px 0; }
.cm69-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cm69-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cm69-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.cm69-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.cm69-title span { color: #84c615; }
.cm69-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 12px; }
.cm69-text { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 12px; }
.cm69-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.cm69-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.cm69-accent p { margin: 0; }
.cm69-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.cm69-numbers { background: #f0f0f0; padding: 30px 40px; border-radius: 16px; text-align: center; transition: all 0.4s ease; cursor: default; }
.cm69-numbers:hover { background: #84c615; transform: scale(1.05); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); }
.cm69-numbers .cm69-number { display: block; font-size: clamp(48px, 6vw, 72px); font-weight: 900; color: #84c615; transition: color 0.3s ease; }
.cm69-numbers:hover .cm69-number { color: #ffffff; }
.cm69-numbers .cm69-label { display: block; font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; color: #0a0a0a; transition: color 0.3s ease; }
.cm69-numbers:hover .cm69-label { color: #ffffff; }
.cm69-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.cm69-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 70 — Poor Websites (CYCLIC 2 - BLACK)
     ============================================================ */
.pw70-dark { background: #0a0a0a; padding: 60px 0; }
.pw70-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pw70-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.pw70-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.pw70-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.pw70-title span { color: #84c615; }
.pw70-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.pw70-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.pw70-item { background: #161616; color: #e0e0e0; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 1vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-right: 3px solid transparent; cursor: default; }
.pw70-item:hover { background: #252525; border-right-color: #ff6b6b; transform: translateX(-5px); color: #ff6b6b; }
.pw70-item .pw70-check { color: #ff6b6b; font-weight: 700; font-size: 14px; }
.pw70-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.pw70-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.pw70-accent p { margin: 0; }
.pw70-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.pw70-warnings { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.pw70-warning { background: #161616; color: #e0e0e0; padding: 14px 24px; border-radius: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; border: 2px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.pw70-warning:hover { background: #ff6b6b; color: #0a0a0a; border-color: #ff6b6b; transform: scale(1.05); box-shadow: 0 5px 20px rgba(255, 107, 107, 0.2); }
.pw70-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.pw70-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 71 — 30 Mistakes Detailed (CYCLIC 1 - WHITE)
     ============================================================ */
.dm71-light { background: #ffffff; padding: 60px 0; }
.dm71-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dm71-header { text-align: center; margin-bottom: 30px; }
.dm71-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.dm71-title { font-size: clamp(28px, 3.5vw, 38px); font-weight: 800; color: #0a0a0a; line-height: 1.2; }
.dm71-title span { color: #84c615; }
.dm71-subtitle { color: #666666; font-size: clamp(14px, 1.2vw, 18px); margin-top: 8px; }
.dm71-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
.dm71-item { background: #f5f5f5; padding: 14px 18px; border-radius: 10px; display: flex; gap: 12px; transition: all 0.3s ease; cursor: default; border-left: 3px solid transparent; }
.dm71-item:hover { background: #84c615; border-left-color: #0a0a0a; transform: scale(1.02); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.15); }
.dm71-item .dm71-num { color: #84c615; font-weight: 800; font-size: clamp(14px, 1vw, 16px); min-width: 32px; transition: color 0.3s ease; }
.dm71-item:hover .dm71-num { color: #ffffff; }
.dm71-item .dm71-text { color: #333333; font-size: clamp(12px, 0.9vw, 14px); line-height: 1.5; transition: color 0.3s ease; }
.dm71-item:hover .dm71-text { color: #ffffff; }
.dm71-conclusion { background: #84c615; color: #ffffff; padding: 20px 30px; border-radius: 12px; text-align: center; font-size: clamp(14px, 1.2vw, 18px); font-weight: 600; transition: all 0.4s ease; cursor: default; }
.dm71-conclusion:hover { transform: scale(1.02); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }

/* ============================================================
     SECTION 72 — Design Audit (CYCLIC 2 - BLACK)
     ============================================================ */
.au72-dark { background: #0a0a0a; padding: 60px 0; }
.au72-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.au72-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.au72-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.au72-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.au72-title span { color: #84c615; }
.au72-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.au72-sections { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.au72-section { background: #161616; padding: 12px 16px; border-radius: 8px; transition: all 0.3s ease; cursor: default; border-left: 3px solid transparent; }
.au72-section:hover { border-left-color: #84c615; transform: translateX(5px); background: #252525; }
.au72-section .au72-section-title { color: #84c615; font-weight: 700; font-size: clamp(13px, 1vw, 15px); display: block; margin-bottom: 3px; }
.au72-section .au72-section-desc { color: #cccccc; font-size: clamp(11px, 0.9vw, 13px); line-height: 1.5; }
.au72-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.au72-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.au72-accent p { margin: 0; }
.au72-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.au72-checkmarks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 350px; }
.au72-check { background: #161616; color: #e0e0e0; padding: 14px 18px; text-align: center; border-radius: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; border: 1px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.au72-check:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.au72-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.au72-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 73 — Review Before Launch (CYCLIC 1 - WHITE)
     ============================================================ */
.rl73-light { background: #ffffff; padding: 60px 0; }
.rl73-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.rl73-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.rl73-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.rl73-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.rl73-title span { color: #84c615; }
.rl73-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 12px; }
.rl73-text { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.rl73-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.rl73-item { background: #f5f5f5; color: #222222; padding: 10px 14px; border-radius: 8px; font-size: clamp(12px, 0.9vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-bottom: 2px solid transparent; cursor: default; }
.rl73-item:hover { background: #84c615; color: #ffffff; border-bottom-color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.rl73-item .rl73-check { color: #84c615; font-weight: 700; font-size: 13px; transition: color 0.3s ease; }
.rl73-item:hover .rl73-check { color: #ffffff; }
.rl73-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.rl73-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.rl73-accent p { margin: 0; }
.rl73-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.rl73-steps { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.rl73-step { background: #f0f0f0; color: #0a0a0a; padding: 18px 30px; border-radius: 12px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; transition: all 0.3s ease; cursor: default; }
.rl73-step:hover { background: #84c615; color: #ffffff; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.rl73-step:nth-child(2):hover { background: #0a0a0a; color: #84c615; }
.rl73-step:nth-child(3):hover { background: #6aad10; color: #ffffff; }
.rl73-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.rl73-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 74 — Industries (CYCLIC 2 - BLACK)
     ============================================================ */
.in74-dark { background: #0a0a0a; padding: 60px 0; }
.in74-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.in74-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.in74-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.in74-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.in74-title span { color: #84c615; }
.in74-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 12px; }
.in74-text { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 18px; }
.in74-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.in74-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.in74-accent p { margin: 0; }
.in74-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.in74-sectors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; max-width: 400px; }
.in74-sector { background: #161616; color: #e0e0e0; padding: 14px 10px; text-align: center; border-radius: 10px; font-size: clamp(12px, 0.9vw, 14px); font-weight: 600; border: 1px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.in74-sector:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.in74-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.in74-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 75 — Manufacturing Industry (CYCLIC 1 - WHITE)
     ============================================================ */
.mf75-light { background: #ffffff; padding: 60px 0; }
.mf75-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mf75-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.mf75-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.mf75-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.mf75-title span { color: #84c615; }
.mf75-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.mf75-text { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 18px; }
.mf75-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.mf75-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.mf75-accent p { margin: 0; }
.mf75-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.mf75-features { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 400px; }
.mf75-feature { background: #f0f0f0; color: #0a0a0a; padding: 18px 30px; border-radius: 12px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; transition: all 0.3s ease; cursor: default; }
.mf75-feature:hover { background: #84c615; color: #ffffff; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.mf75-feature:nth-child(2):hover { background: #0a0a0a; color: #84c615; }
.mf75-feature:nth-child(3):hover { background: #6aad10; color: #ffffff; }
.mf75-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.mf75-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     RESPONSIVE BREAKPOINTS
     ============================================================ */
@media (max-width: 768px) {
    .br61-layout, .lp62-grid, .lb63-container, .bo64-layout,
    .cc65-grid, .ms66-container, .wc67-layout, .cl68-grid,
    .cm69-container, .pw70-layout, .au72-grid, .rl73-container,
    .in74-layout, .mf75-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .br61-grid, .lp62-list, .lb63-grid, .bo64-grid,
    .cc65-list, .ms66-grid, .cl68-list, .pw70-grid,
    .rl73-grid, .in74-sectors {
        grid-template-columns: 1fr;
    }
    .br61-stats, .bo64-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .cc65-phases, .au72-checkmarks {
        grid-template-columns: 1fr 1fr;
    }
    .dm71-grid {
        grid-template-columns: 1fr;
    }
    .in74-sectors {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .br61-stats, .bo64-metrics {
        grid-template-columns: 1fr;
    }
    .cc65-phases, .au72-checkmarks {
        grid-template-columns: 1fr;
    }
    .in74-sectors {
        grid-template-columns: 1fr;
    }
    .lp62-steps {
        flex-direction: column;
    }
    .lp62-arrow {
        transform: rotate(90deg);
    }
}








/* ============================================================
     BASE TEXT-CENTER CLASS
     ============================================================ */
.text-center {
    text-align: center;
}

/* ============================================================
     SECTIONS 82-100 — COMMON STYLES
     ============================================================ */

/* SECTION 82 — Retail & eCommerce (CYCLIC 2 - BLACK) */
.re82-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.re82-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.re82-content {
    width: 100%;
}
.re82-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.re82-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.re82-title span {
    color: #84c615;
}
.re82-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.re82-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.re82-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.re82-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.re82-accent p {
    margin: 0;
}

/* SECTION 83 — Professional Services (CYCLIC 1 - WHITE) */
.ps83-light {
    background: #ffffff;
    padding: 70px 0;
}
.ps83-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ps83-content {
    width: 100%;
}
.ps83-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ps83-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ps83-title span {
    color: #84c615;
}
.ps83-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ps83-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ps83-text:last-of-type {
    margin-bottom: 24px;
}
.ps83-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ps83-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ps83-accent p {
    margin: 0;
}

/* SECTION 84 — Travel & Tourism (CYCLIC 2 - BLACK) */
.tt84-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.tt84-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.tt84-content {
    width: 100%;
}
.tt84-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.tt84-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.tt84-title span {
    color: #84c615;
}
.tt84-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tt84-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tt84-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.tt84-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.tt84-accent p {
    margin: 0;
}

/* SECTION 85 — Logistics & Transport (CYCLIC 1 - WHITE) */
.lt85-light {
    background: #ffffff;
    padding: 70px 0;
}
.lt85-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.lt85-content {
    width: 100%;
}
.lt85-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.lt85-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.lt85-title span {
    color: #84c615;
}
.lt85-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.lt85-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.lt85-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.lt85-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.lt85-accent p {
    margin: 0;
}

/* SECTION 86 — Beauty & Wellness (CYCLIC 2 - BLACK) */
.bw86-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.bw86-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.bw86-content {
    width: 100%;
}
.bw86-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.bw86-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.bw86-title span {
    color: #84c615;
}
.bw86-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.bw86-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.bw86-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.bw86-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.bw86-accent p {
    margin: 0;
}

/* SECTION 87 — Gym & Fitness (CYCLIC 1 - WHITE) */
.gf87-light {
    background: #ffffff;
    padding: 70px 0;
}
.gf87-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.gf87-content {
    width: 100%;
}
.gf87-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.gf87-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.gf87-title span {
    color: #84c615;
}
.gf87-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.gf87-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.gf87-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.gf87-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.gf87-accent p {
    margin: 0;
}

/* SECTION 88 — NGO & Non-Profit (CYCLIC 2 - BLACK) */
.ng88-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.ng88-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ng88-content {
    width: 100%;
}
.ng88-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ng88-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ng88-title span {
    color: #84c615;
}
.ng88-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ng88-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ng88-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ng88-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.ng88-accent p {
    margin: 0;
}

/* SECTION 89 — Industry-Specific Design Matters (CYCLIC 1 - WHITE) */
.id89-light {
    background: #ffffff;
    padding: 70px 0;
}
.id89-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.id89-content {
    width: 100%;
}
.id89-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.id89-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.id89-title span {
    color: #84c615;
}
.id89-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.id89-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.id89-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.id89-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.id89-accent p {
    margin: 0;
}

/* SECTION 90 — Industry Experience Framework (CYCLIC 2 - BLACK) */
.ie90-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.ie90-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ie90-content {
    width: 100%;
}
.ie90-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ie90-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ie90-title span {
    color: #84c615;
}
.ie90-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ie90-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ie90-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ie90-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.ie90-accent p {
    margin: 0;
}

/* SECTION 91 — Industries We Serve (CYCLIC 1 - WHITE) */
.is91-light {
    background: #ffffff;
    padding: 70px 0;
}
.is91-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.is91-content {
    width: 100%;
}
.is91-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.is91-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.is91-title span {
    color: #84c615;
}
.is91-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.is91-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.is91-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.is91-accent p {
    margin: 0;
}

/* SECTION 92 — Trends 2026 (CYCLIC 2 - BLACK) */
.tr92-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.tr92-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.tr92-content {
    width: 100%;
}
.tr92-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.tr92-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.tr92-title span {
    color: #84c615;
}
.tr92-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tr92-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tr92-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.tr92-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.tr92-accent p {
    margin: 0;
}

/* SECTION 93 — Evolution (CYCLIC 1 - WHITE) */
.ev93-light {
    background: #ffffff;
    padding: 70px 0;
}
.ev93-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ev93-content {
    width: 100%;
}
.ev93-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ev93-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ev93-title span {
    color: #84c615;
}
.ev93-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ev93-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ev93-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ev93-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ev93-accent p {
    margin: 0;
}

/* SECTION 94 — AI-Ready Trend (CYCLIC 2 - BLACK) */
.ar94-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.ar94-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ar94-content {
    width: 100%;
}
.ar94-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ar94-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ar94-title span {
    color: #84c615;
}
.ar94-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ar94-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ar94-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ar94-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.ar94-accent p {
    margin: 0;
}

/* SECTION 95 — Simplicity Trend (CYCLIC 1 - WHITE) */
.sc95-light {
    background: #ffffff;
    padding: 70px 0;
}
.sc95-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.sc95-content {
    width: 100%;
}
.sc95-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sc95-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.sc95-title span {
    color: #84c615;
}
.sc95-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sc95-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.sc95-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.sc95-accent p {
    margin: 0;
}

/* SECTION 96 — Mobile-First Trend (CYCLIC 2 - BLACK) */
.mf96-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.mf96-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.mf96-content {
    width: 100%;
}
.mf96-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.mf96-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.mf96-title span {
    color: #84c615;
}
.mf96-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.mf96-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.mf96-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.mf96-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.mf96-accent p {
    margin: 0;
}

/* SECTION 97 — Accessibility Trend (CYCLIC 1 - WHITE) */
.ac97-light {
    background: #ffffff;
    padding: 70px 0;
}
.ac97-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ac97-content {
    width: 100%;
}
.ac97-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ac97-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ac97-title span {
    color: #84c615;
}
.ac97-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ac97-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ac97-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ac97-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ac97-accent p {
    margin: 0;
}

/* SECTION 98 — Personalised Trend (CYCLIC 2 - BLACK) */
.pu98-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.pu98-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.pu98-content {
    width: 100%;
}
.pu98-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pu98-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.pu98-title span {
    color: #84c615;
}
.pu98-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.pu98-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.pu98-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.pu98-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.pu98-accent p {
    margin: 0;
}

/* SECTION 99 — Micro-Interactions (CYCLIC 1 - WHITE) */
.mi99-light {
    background: #ffffff;
    padding: 70px 0;
}
.mi99-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.mi99-content {
    width: 100%;
}
.mi99-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.mi99-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.mi99-title span {
    color: #84c615;
}
.mi99-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.mi99-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.mi99-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.mi99-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.mi99-accent p {
    margin: 0;
}

/* SECTION 100 — Storytelling Trend (CYCLIC 2 - BLACK) */
.st100-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.st100-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.st100-content {
    width: 100%;
}
.st100-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.st100-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.st100-title span {
    color: #84c615;
}
.st100-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.st100-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.st100-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.st100-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.st100-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .re82-title, .ps83-title, .tt84-title, .lt85-title,
    .bw86-title, .gf87-title, .ng88-title, .id89-title,
    .ie90-title, .is91-title, .tr92-title, .ev93-title,
    .ar94-title, .sc95-title, .mf96-title, .ac97-title,
    .pu98-title, .mi99-title, .st100-title {
        font-size: 34px;
    }

    .re82-desc, .re82-text, .ps83-desc, .ps83-text,
    .tt84-desc, .tt84-text, .lt85-desc, .lt85-text,
    .bw86-desc, .bw86-text, .gf87-desc, .gf87-text,
    .ng88-desc, .ng88-text, .id89-desc, .id89-text,
    .ie90-desc, .ie90-text, .is91-desc, .tr92-desc,
    .tr92-text, .ev93-desc, .ev93-text, .ar94-desc,
    .ar94-text, .sc95-desc, .mf96-desc, .mf96-text,
    .ac97-desc, .ac97-text, .pu98-desc, .pu98-text,
    .mi99-desc, .mi99-text, .st100-desc, .st100-text {
        font-size: 16px;
        max-width: 100%;
    }

    .re82-accent, .ps83-accent, .tt84-accent, .lt85-accent,
    .bw86-accent, .gf87-accent, .ng88-accent, .id89-accent,
    .ie90-accent, .is91-accent, .tr92-accent, .ev93-accent,
    .ar94-accent, .sc95-accent, .mf96-accent, .ac97-accent,
    .pu98-accent, .mi99-accent, .st100-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .re82-dark, .ps83-light, .tt84-dark, .lt85-light,
    .bw86-dark, .gf87-light, .ng88-dark, .id89-light,
    .ie90-dark, .is91-light, .tr92-dark, .ev93-light,
    .ar94-dark, .sc95-light, .mf96-dark, .ac97-light,
    .pu98-dark, .mi99-light, .st100-dark {
        padding: 50px 0;
    }

    .re82-title, .ps83-title, .tt84-title, .lt85-title,
    .bw86-title, .gf87-title, .ng88-title, .id89-title,
    .ie90-title, .is91-title, .tr92-title, .ev93-title,
    .ar94-title, .sc95-title, .mf96-title, .ac97-title,
    .pu98-title, .mi99-title, .st100-title {
        font-size: 30px;
    }

    .re82-desc, .re82-text, .ps83-desc, .ps83-text,
    .tt84-desc, .tt84-text, .lt85-desc, .lt85-text,
    .bw86-desc, .bw86-text, .gf87-desc, .gf87-text,
    .ng88-desc, .ng88-text, .id89-desc, .id89-text,
    .ie90-desc, .ie90-text, .is91-desc, .tr92-desc,
    .tr92-text, .ev93-desc, .ev93-text, .ar94-desc,
    .ar94-text, .sc95-desc, .mf96-desc, .mf96-text,
    .ac97-desc, .ac97-text, .pu98-desc, .pu98-text,
    .mi99-desc, .mi99-text, .st100-desc, .st100-text {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .re82-text, .ps83-text:last-of-type, .tt84-text,
    .lt85-text, .bw86-text, .gf87-text, .ng88-text,
    .id89-text, .ie90-text, .is91-desc, .tr92-text,
    .ev93-text, .ar94-text, .sc95-desc, .mf96-text,
    .ac97-text, .pu98-text, .mi99-text, .st100-text {
        margin-bottom: 20px;
    }

    .re82-accent, .ps83-accent, .tt84-accent, .lt85-accent,
    .bw86-accent, .gf87-accent, .ng88-accent, .id89-accent,
    .ie90-accent, .is91-accent, .tr92-accent, .ev93-accent,
    .ar94-accent, .sc95-accent, .mf96-accent, .ac97-accent,
    .pu98-accent, .mi99-accent, .st100-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .re82-badge, .ps83-badge, .tt84-badge, .lt85-badge,
    .bw86-badge, .gf87-badge, .ng88-badge, .id89-badge,
    .ie90-badge, .is91-badge, .tr92-badge, .ev93-badge,
    .ar94-badge, .sc95-badge, .mf96-badge, .ac97-badge,
    .pu98-badge, .mi99-badge, .st100-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .re82-dark, .ps83-light, .tt84-dark, .lt85-light,
    .bw86-dark, .gf87-light, .ng88-dark, .id89-light,
    .ie90-dark, .is91-light, .tr92-dark, .ev93-light,
    .ar94-dark, .sc95-light, .mf96-dark, .ac97-light,
    .pu98-dark, .mi99-light, .st100-dark {
        padding: 40px 0;
    }

    .re82-wrap, .ps83-wrap, .tt84-wrap, .lt85-wrap,
    .bw86-wrap, .gf87-wrap, .ng88-wrap, .id89-wrap,
    .ie90-wrap, .is91-wrap, .tr92-wrap, .ev93-wrap,
    .ar94-wrap, .sc95-wrap, .mf96-wrap, .ac97-wrap,
    .pu98-wrap, .mi99-wrap, .st100-wrap {
        padding: 0 16px;
    }

    .re82-title, .ps83-title, .tt84-title, .lt85-title,
    .bw86-title, .gf87-title, .ng88-title, .id89-title,
    .ie90-title, .is91-title, .tr92-title, .ev93-title,
    .ar94-title, .sc95-title, .mf96-title, .ac97-title,
    .pu98-title, .mi99-title, .st100-title {
        font-size: 26px;
    }

    .re82-desc, .re82-text, .ps83-desc, .ps83-text,
    .tt84-desc, .tt84-text, .lt85-desc, .lt85-text,
    .bw86-desc, .bw86-text, .gf87-desc, .gf87-text,
    .ng88-desc, .ng88-text, .id89-desc, .id89-text,
    .ie90-desc, .ie90-text, .is91-desc, .tr92-desc,
    .tr92-text, .ev93-desc, .ev93-text, .ar94-desc,
    .ar94-text, .sc95-desc, .mf96-desc, .mf96-text,
    .ac97-desc, .ac97-text, .pu98-desc, .pu98-text,
    .mi99-desc, .mi99-text, .st100-desc, .st100-text {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .re82-text, .ps83-text:last-of-type, .tt84-text,
    .lt85-text, .bw86-text, .gf87-text, .ng88-text,
    .id89-text, .ie90-text, .is91-desc, .tr92-text,
    .ev93-text, .ar94-text, .sc95-desc, .mf96-text,
    .ac97-text, .pu98-text, .mi99-text, .st100-text {
        margin-bottom: 18px;
    }

    .re82-accent, .ps83-accent, .tt84-accent, .lt85-accent,
    .bw86-accent, .gf87-accent, .ng88-accent, .id89-accent,
    .ie90-accent, .is91-accent, .tr92-accent, .ev93-accent,
    .ar94-accent, .sc95-accent, .mf96-accent, .ac97-accent,
    .pu98-accent, .mi99-accent, .st100-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .re82-accent:hover, .ps83-accent:hover, .tt84-accent:hover,
    .lt85-accent:hover, .bw86-accent:hover, .gf87-accent:hover,
    .ng88-accent:hover, .id89-accent:hover, .ie90-accent:hover,
    .is91-accent:hover, .tr92-accent:hover, .ev93-accent:hover,
    .ar94-accent:hover, .sc95-accent:hover, .mf96-accent:hover,
    .ac97-accent:hover, .pu98-accent:hover, .mi99-accent:hover,
    .st100-accent:hover {
        transform: scale(1.01);
    }

    .re82-badge, .ps83-badge, .tt84-badge, .lt85-badge,
    .bw86-badge, .gf87-badge, .ng88-badge, .id89-badge,
    .ie90-badge, .is91-badge, .tr92-badge, .ev93-badge,
    .ar94-badge, .sc95-badge, .mf96-badge, .ac97-badge,
    .pu98-badge, .mi99-badge, .st100-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .re82-title, .ps83-title, .tt84-title, .lt85-title,
    .bw86-title, .gf87-title, .ng88-title, .id89-title,
    .ie90-title, .is91-title, .tr92-title, .ev93-title,
    .ar94-title, .sc95-title, .mf96-title, .ac97-title,
    .pu98-title, .mi99-title, .st100-title {
        font-size: 22px;
    }

    .re82-desc, .re82-text, .ps83-desc, .ps83-text,
    .tt84-desc, .tt84-text, .lt85-desc, .lt85-text,
    .bw86-desc, .bw86-text, .gf87-desc, .gf87-text,
    .ng88-desc, .ng88-text, .id89-desc, .id89-text,
    .ie90-desc, .ie90-text, .is91-desc, .tr92-desc,
    .tr92-text, .ev93-desc, .ev93-text, .ar94-desc,
    .ar94-text, .sc95-desc, .mf96-desc, .mf96-text,
    .ac97-desc, .ac97-text, .pu98-desc, .pu98-text,
    .mi99-desc, .mi99-text, .st100-desc, .st100-text {
        font-size: 13px;
    }

    .re82-accent, .ps83-accent, .tt84-accent, .lt85-accent,
    .bw86-accent, .gf87-accent, .ng88-accent, .id89-accent,
    .ie90-accent, .is91-accent, .tr92-accent, .ev93-accent,
    .ar94-accent, .sc95-accent, .mf96-accent, .ac97-accent,
    .pu98-accent, .mi99-accent, .st100-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .re82-badge, .ps83-badge, .tt84-badge, .lt85-badge,
    .bw86-badge, .gf87-badge, .ng88-badge, .id89-badge,
    .ie90-badge, .is91-badge, .tr92-badge, .ev93-badge,
    .ar94-badge, .sc95-badge, .mf96-badge, .ac97-badge,
    .pu98-badge, .mi99-badge, .st100-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}




/* ============================================================
     BASE TEXT-CENTER CLASS
     ============================================================ */
.text-center {
    text-align: center;
}

/* ============================================================
     SECTIONS 103-137 — COMMON STYLES
     ============================================================ */

/* SECTION 103 — Data-Informed Design (CYCLIC 1 - WHITE) */
.di103-light {
    background: #ffffff;
    padding: 70px 0;
}
.di103-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.di103-content {
    width: 100%;
}
.di103-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.di103-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.di103-title span {
    color: #84c615;
}
.di103-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.di103-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.di103-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.di103-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.di103-accent p {
    margin: 0;
}

/* SECTION 104 — Conversion-Driven Layouts (CYCLIC 2 - BLACK) */
.cl104-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.cl104-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.cl104-content {
    width: 100%;
}
.cl104-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cl104-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.cl104-title span {
    color: #84c615;
}
.cl104-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.cl104-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.cl104-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.cl104-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.cl104-accent p {
    margin: 0;
}

/* SECTION 105 — Content-Led Design (CYCLIC 1 - WHITE) */
.cl105-light {
    background: #ffffff;
    padding: 70px 0;
}
.cl105-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.cl105-content {
    width: 100%;
}
.cl105-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cl105-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.cl105-title span {
    color: #84c615;
}
.cl105-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.cl105-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.cl105-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.cl105-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.cl105-accent p {
    margin: 0;
}

/* SECTION 106 — Trust-First Websites (CYCLIC 2 - BLACK) */
.tf106-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.tf106-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.tf106-content {
    width: 100%;
}
.tf106-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.tf106-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.tf106-title span {
    color: #84c615;
}
.tf106-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tf106-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tf106-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.tf106-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.tf106-accent p {
    margin: 0;
}

/* SECTION 107 — Sustainable Web Design (CYCLIC 1 - WHITE) */
.sw107-light {
    background: #ffffff;
    padding: 70px 0;
}
.sw107-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.sw107-content {
    width: 100%;
}
.sw107-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sw107-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.sw107-title span {
    color: #84c615;
}
.sw107-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sw107-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sw107-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.sw107-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.sw107-accent p {
    margin: 0;
}

/* SECTION 108 — Voice & Conversational Search (CYCLIC 2 - BLACK) */
.vc108-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.vc108-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.vc108-content {
    width: 100%;
}
.vc108-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.vc108-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.vc108-title span {
    color: #84c615;
}
.vc108-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.vc108-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.vc108-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.vc108-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.vc108-accent p {
    margin: 0;
}

/* SECTION 109 — Experience Over Appearance (CYCLIC 1 - WHITE) */
.eo109-light {
    background: #ffffff;
    padding: 70px 0;
}
.eo109-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.eo109-content {
    width: 100%;
}
.eo109-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.eo109-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.eo109-title span {
    color: #84c615;
}
.eo109-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.eo109-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.eo109-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.eo109-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.eo109-accent p {
    margin: 0;
}

/* SECTION 110 — FutureReady Framework (CYCLIC 2 - BLACK) */
.fr110-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.fr110-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.fr110-content {
    width: 100%;
}
.fr110-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.fr110-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.fr110-title span {
    color: #84c615;
}
.fr110-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fr110-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fr110-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 850px;
    margin: 0 auto 24px auto;
    text-align: left;
}
.fr110-item {
    background: #161616;
    color: #e0e0e0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}
.fr110-item:hover {
    background: #252525;
    border-left-color: #84c615;
    transform: translateX(5px);
    color: #84c615;
}
.fr110-item .fr110-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
    min-width: 22px;
}
.fr110-item strong {
    color: #ffffff;
    transition: color 0.3s ease;
}
.fr110-item:hover strong {
    color: #84c615;
}
.fr110-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.fr110-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.fr110-accent p {
    margin: 0;
}

/* SECTION 111 — Future-Ready Why (CYCLIC 1 - WHITE) */
.fw111-light {
    background: #ffffff;
    padding: 70px 0;
}
.fw111-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.fw111-content {
    width: 100%;
}
.fw111-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.fw111-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.fw111-title span {
    color: #84c615;
}
.fw111-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fw111-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fw111-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.fw111-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.fw111-accent p {
    margin: 0;
}

/* SECTION 112 — Readiness Score (CYCLIC 2 - BLACK) */
.rs112-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.rs112-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.rs112-content {
    width: 100%;
}
.rs112-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.rs112-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.rs112-title span {
    color: #84c615;
}
.rs112-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.rs112-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.rs112-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.rs112-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.rs112-accent p {
    margin: 0;
}

/* ============================================================
     SECTION 113 — AI-Ready Web Design (CYCLIC 1 - WHITE)
     ============================================================ */
.ar113-light {
    background: #ffffff;
    padding: 70px 0;
}
.ar113-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ar113-content {
    width: 100%;
}
.ar113-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ar113-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ar113-title span {
    color: #84c615;
}
.ar113-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ar113-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ar113-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ar113-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ar113-accent p {
    margin: 0;
}

/* SECTION 114 — Search Changed (CYCLIC 2 - BLACK) */
.sc114-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.sc114-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.sc114-content {
    width: 100%;
}
.sc114-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sc114-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.sc114-title span {
    color: #84c615;
}
.sc114-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sc114-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sc114-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.sc114-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.sc114-accent p {
    margin: 0;
}

/* SECTION 115 — What Is AI-Ready (CYCLIC 1 - WHITE) */
.wa115-light {
    background: #ffffff;
    padding: 70px 0;
}
.wa115-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.wa115-content {
    width: 100%;
}
.wa115-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.wa115-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.wa115-title span {
    color: #84c615;
}
.wa115-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.wa115-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.wa115-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.wa115-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.wa115-accent p {
    margin: 0;
}

/* SECTION 116 — Google AI Overviews (CYCLIC 2 - BLACK) */
.go116-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.go116-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.go116-content {
    width: 100%;
}
.go116-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.go116-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.go116-title span {
    color: #84c615;
}
.go116-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.go116-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.go116-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.go116-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.go116-accent p {
    margin: 0;
}

/* SECTION 117 — ChatGPT (CYCLIC 1 - WHITE) */
.cg117-light {
    background: #ffffff;
    padding: 70px 0;
}
.cg117-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.cg117-content {
    width: 100%;
}
.cg117-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cg117-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.cg117-title span {
    color: #84c615;
}
.cg117-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.cg117-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.cg117-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.cg117-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.cg117-accent p {
    margin: 0;
}

/* SECTION 118 — Entity-Based (CYCLIC 2 - BLACK) */
.eb118-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.eb118-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.eb118-content {
    width: 100%;
}
.eb118-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.eb118-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.eb118-title span {
    color: #84c615;
}
.eb118-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.eb118-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.eb118-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.eb118-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.eb118-accent p {
    margin: 0;
}

/* SECTION 119 — Semantic Structure (CYCLIC 1 - WHITE) */
.ss119-light {
    background: #ffffff;
    padding: 70px 0;
}
.ss119-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ss119-content {
    width: 100%;
}
.ss119-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ss119-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ss119-title span {
    color: #84c615;
}
.ss119-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ss119-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ss119-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ss119-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ss119-accent p {
    margin: 0;
}

/* SECTION 120 — Answering Questions (CYCLIC 2 - BLACK) */
.aq120-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.aq120-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.aq120-content {
    width: 100%;
}
.aq120-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.aq120-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.aq120-title span {
    color: #84c615;
}
.aq120-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.aq120-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.aq120-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.aq120-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.aq120-accent p {
    margin: 0;
}

/* SECTION 121 — Voice Search (CYCLIC 1 - WHITE) */
.vs121-light {
    background: #ffffff;
    padding: 70px 0;
}
.vs121-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.vs121-content {
    width: 100%;
}
.vs121-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.vs121-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.vs121-title span {
    color: #84c615;
}
.vs121-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.vs121-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.vs121-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.vs121-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.vs121-accent p {
    margin: 0;
}

/* SECTION 122 — Structured Information (CYCLIC 2 - BLACK) */
.si122-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.si122-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.si122-content {
    width: 100%;
}
.si122-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.si122-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.si122-title span {
    color: #84c615;
}
.si122-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.si122-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.si122-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.si122-accent p {
    margin: 0;
}

/* SECTION 123 — GEO (CYCLIC 1 - WHITE) */
.ge123-light {
    background: #ffffff;
    padding: 70px 0;
}
.ge123-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ge123-content {
    width: 100%;
}
.ge123-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ge123-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ge123-title span {
    color: #84c615;
}
.ge123-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ge123-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ge123-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ge123-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ge123-accent p {
    margin: 0;
}

/* SECTION 124 — Demonstrate Experience (CYCLIC 2 - BLACK) */
.de124-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.de124-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.de124-content {
    width: 100%;
}
.de124-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.de124-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.de124-title span {
    color: #84c615;
}
.de124-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.de124-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.de124-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.de124-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.de124-accent p {
    margin: 0;
}

/* SECTION 125 — Local AI (CYCLIC 1 - WHITE) */
.la125-light {
    background: #ffffff;
    padding: 70px 0;
}
.la125-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.la125-content {
    width: 100%;
}
.la125-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.la125-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.la125-title span {
    color: #84c615;
}
.la125-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.la125-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.la125-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.la125-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.la125-accent p {
    margin: 0;
}

/* SECTION 126 — Age Well (CYCLIC 2 - BLACK) */
.aw126-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.aw126-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.aw126-content {
    width: 100%;
}
.aw126-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.aw126-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.aw126-title span {
    color: #84c615;
}
.aw126-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.aw126-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.aw126-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.aw126-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.aw126-accent p {
    margin: 0;
}

/* SECTION 127 — AIWeb Framework (CYCLIC 1 - WHITE) */
.ai127-light {
    background: #ffffff;
    padding: 70px 0;
}
.ai127-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ai127-content {
    width: 100%;
}
.ai127-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ai127-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ai127-title span {
    color: #84c615;
}
.ai127-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ai127-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 850px;
    margin: 0 auto 24px auto;
    text-align: left;
}
.ai127-item {
    background: #f5f5f5;
    color: #222222;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}
.ai127-item:hover {
    background: #84c615;
    color: #ffffff;
    border-left-color: #0a0a0a;
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}
.ai127-item .ai127-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
    min-width: 22px;
    transition: color 0.3s ease;
}
.ai127-item:hover .ai127-check {
    color: #ffffff;
}
.ai127-item strong {
    color: #0a0a0a;
    transition: color 0.3s ease;
}
.ai127-item:hover strong {
    color: #ffffff;
}
.ai127-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ai127-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ai127-accent p {
    margin: 0;
}

/* SECTION 128 — Future Businesses (CYCLIC 2 - BLACK) */
.fb128-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.fb128-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.fb128-content {
    width: 100%;
}
.fb128-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.fb128-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.fb128-title span {
    color: #84c615;
}
.fb128-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fb128-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fb128-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.fb128-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.fb128-accent p {
    margin: 0;
}

/* SECTION 129 — AI Readiness Checklist (CYCLIC 1 - WHITE) */
.ar129-light {
    background: #ffffff;
    padding: 70px 0;
}
.ar129-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ar129-content {
    width: 100%;
}
.ar129-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ar129-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ar129-title span {
    color: #84c615;
}
.ar129-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ar129-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 850px;
    margin: 0 auto 24px auto;
    text-align: left;
}
.ar129-item {
    background: #f5f5f5;
    color: #222222;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    cursor: default;
}
.ar129-item:hover {
    background: #84c615;
    color: #ffffff;
    border-bottom-color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2);
}
.ar129-item .ar129-check {
    color: #84c615;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s ease;
}
.ar129-item:hover .ar129-check {
    color: #ffffff;
}
.ar129-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ar129-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ar129-accent p {
    margin: 0;
}

/* SECTION 130 — Why Choose Freshora (CYCLIC 2 - BLACK) */
.wc130-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.wc130-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.wc130-content {
    width: 100%;
}
.wc130-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.wc130-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.wc130-title span {
    color: #84c615;
}
.wc130-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.wc130-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.wc130-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.wc130-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.wc130-accent p {
    margin: 0;
}

/* SECTION 131 — Business Goals (CYCLIC 1 - WHITE) */
.bg131-light {
    background: #ffffff;
    padding: 70px 0;
}
.bg131-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.bg131-content {
    width: 100%;
}
.bg131-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.bg131-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.bg131-title span {
    color: #84c615;
}
.bg131-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.bg131-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.bg131-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.bg131-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.bg131-accent p {
    margin: 0;
}

/* SECTION 132 — Unique Design (CYCLIC 2 - BLACK) */
.ud132-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.ud132-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ud132-content {
    width: 100%;
}
.ud132-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ud132-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ud132-title span {
    color: #84c615;
}
.ud132-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ud132-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ud132-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ud132-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.ud132-accent p {
    margin: 0;
}

/* SECTION 133 — UX Before Visual (CYCLIC 1 - WHITE) */
.ux133-light {
    background: #ffffff;
    padding: 70px 0;
}
.ux133-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.ux133-content {
    width: 100%;
}
.ux133-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ux133-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ux133-title span {
    color: #84c615;
}
.ux133-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ux133-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.ux133-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.ux133-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.ux133-accent p {
    margin: 0;
}

/* SECTION 134 — Real Customers (CYCLIC 2 - BLACK) */
.rc134-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.rc134-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.rc134-content {
    width: 100%;
}
.rc134-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.rc134-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.rc134-title span {
    color: #84c615;
}
.rc134-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.rc134-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 12px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.rc134-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.rc134-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.rc134-accent p {
    margin: 0;
}

/* SECTION 135 — Strategy Before Creativity (CYCLIC 1 - WHITE) */
.sb135-light {
    background: #ffffff;
    padding: 70px 0;
}
.sb135-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.sb135-content {
    width: 100%;
}
.sb135-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sb135-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.sb135-title span {
    color: #84c615;
}
.sb135-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sb135-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.sb135-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.sb135-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.sb135-accent p {
    margin: 0;
}

/* SECTION 136 — Future-Ready Design (CYCLIC 2 - BLACK) */
.fr136-dark {
    background: #0a0a0a;
    padding: 70px 0;
}
.fr136-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.fr136-content {
    width: 100%;
}
.fr136-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.fr136-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}
.fr136-title span {
    color: #84c615;
}
.fr136-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fr136-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.fr136-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.fr136-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}
.fr136-accent p {
    margin: 0;
}

/* SECTION 137 — Transparent Process (CYCLIC 1 - WHITE) */
.tp137-light {
    background: #ffffff;
    padding: 70px 0;
}
.tp137-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.tp137-content {
    width: 100%;
}
.tp137-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.tp137-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.tp137-title span {
    color: #84c615;
}
.tp137-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tp137-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.tp137-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.tp137-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}
.tp137-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .di103-title, .cl104-title, .cl105-title, .tf106-title,
    .sw107-title, .vc108-title, .eo109-title, .fr110-title,
    .fw111-title, .rs112-title, .ar113-title, .sc114-title,
    .wa115-title, .go116-title, .cg117-title, .eb118-title,
    .ss119-title, .aq120-title, .vs121-title, .si122-title,
    .ge123-title, .de124-title, .la125-title, .aw126-title,
    .ai127-title, .fb128-title, .ar129-title, .wc130-title,
    .bg131-title, .ud132-title, .ux133-title, .rc134-title,
    .sb135-title, .fr136-title, .tp137-title {
        font-size: 34px;
    }

    .fr110-list, .ai127-list, .ar129-list {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .di103-light, .cl104-dark, .cl105-light, .tf106-dark,
    .sw107-light, .vc108-dark, .eo109-light, .fr110-dark,
    .fw111-light, .rs112-dark, .ar113-light, .sc114-dark,
    .wa115-light, .go116-dark, .cg117-light, .eb118-dark,
    .ss119-light, .aq120-dark, .vs121-light, .si122-dark,
    .ge123-light, .de124-dark, .la125-light, .aw126-dark,
    .ai127-light, .fb128-dark, .ar129-light, .wc130-dark,
    .bg131-light, .ud132-dark, .ux133-light, .rc134-dark,
    .sb135-light, .fr136-dark, .tp137-light {
        padding: 50px 0;
    }

    .di103-title, .cl104-title, .cl105-title, .tf106-title,
    .sw107-title, .vc108-title, .eo109-title, .fr110-title,
    .fw111-title, .rs112-title, .ar113-title, .sc114-title,
    .wa115-title, .go116-title, .cg117-title, .eb118-title,
    .ss119-title, .aq120-title, .vs121-title, .si122-title,
    .ge123-title, .de124-title, .la125-title, .aw126-title,
    .ai127-title, .fb128-title, .ar129-title, .wc130-title,
    .bg131-title, .ud132-title, .ux133-title, .rc134-title,
    .sb135-title, .fr136-title, .tp137-title {
        font-size: 30px;
    }

    .fr110-list, .ai127-list, .ar129-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .fr110-item, .ai127-item, .ar129-item {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .di103-light, .cl104-dark, .cl105-light, .tf106-dark,
    .sw107-light, .vc108-dark, .eo109-light, .fr110-dark,
    .fw111-light, .rs112-dark, .ar113-light, .sc114-dark,
    .wa115-light, .go116-dark, .cg117-light, .eb118-dark,
    .ss119-light, .aq120-dark, .vs121-light, .si122-dark,
    .ge123-light, .de124-dark, .la125-light, .aw126-dark,
    .ai127-light, .fb128-dark, .ar129-light, .wc130-dark,
    .bg131-light, .ud132-dark, .ux133-light, .rc134-dark,
    .sb135-light, .fr136-dark, .tp137-light {
        padding: 40px 0;
    }

    .di103-title, .cl104-title, .cl105-title, .tf106-title,
    .sw107-title, .vc108-title, .eo109-title, .fr110-title,
    .fw111-title, .rs112-title, .ar113-title, .sc114-title,
    .wa115-title, .go116-title, .cg117-title, .eb118-title,
    .ss119-title, .aq120-title, .vs121-title, .si122-title,
    .ge123-title, .de124-title, .la125-title, .aw126-title,
    .ai127-title, .fb128-title, .ar129-title, .wc130-title,
    .bg131-title, .ud132-title, .ux133-title, .rc134-title,
    .sb135-title, .fr136-title, .tp137-title {
        font-size: 26px;
    }

    .fr110-list, .ai127-list, .ar129-list {
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .fr110-item, .ai127-item, .ar129-item {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 8px;
    }
}



/* ============================================================
     SECTION 138 — We Design for Every Industry (CYCLIC 2 - BLACK)
     ============================================================ */
.ei138-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.ei138-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ei138-content {
    width: 100%;
}

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

/* Badge */
.ei138-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.ei138-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.ei138-title span {
    color: #84c615;
}

/* Description - Justified */
.ei138-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* Text - Justified */
.ei138-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.ei138-text strong {
    color: #84c615;
}

/* Accent Box */
.ei138-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.ei138-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.ei138-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .ei138-title {
        font-size: 34px;
    }

    .ei138-desc,
    .ei138-text {
        font-size: 16px;
        max-width: 100%;
    }

    .ei138-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .ei138-dark {
        padding: 50px 0;
    }

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

    .ei138-desc,
    .ei138-text {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .ei138-text {
        margin-bottom: 20px;
    }

    .ei138-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .ei138-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .ei138-dark {
        padding: 40px 0;
    }

    .ei138-wrap {
        padding: 0 16px;
    }

    .ei138-title {
        font-size: 26px;
    }

    .ei138-desc,
    .ei138-text {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .ei138-text {
        margin-bottom: 18px;
    }

    .ei138-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .ei138-accent:hover {
        transform: scale(1.01);
    }

    .ei138-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .ei138-title {
        font-size: 22px;
    }

    .ei138-desc,
    .ei138-text {
        font-size: 13px;
    }

    .ei138-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .ei138-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}
/* ============================================================
     SECTION 139 — Local Expertise with Global Standards (CYCLIC 1 - WHITE)
     ============================================================ */
.lg139-light {
    background: #ffffff;
    padding: 70px 0;
}

.lg139-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lg139-content {
    width: 100%;
}

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

/* Badge */
.lg139-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.lg139-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.lg139-title span {
    color: #84c615;
}

/* Description - Justified */
.lg139-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* Text - Justified */
.lg139-text {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.lg139-text strong {
    color: #0a0a0a;
}

/* Accent Box */
.lg139-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.lg139-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.lg139-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .lg139-title {
        font-size: 34px;
    }

    .lg139-desc,
    .lg139-text {
        font-size: 16px;
        max-width: 100%;
    }

    .lg139-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .lg139-light {
        padding: 50px 0;
    }

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

    .lg139-desc,
    .lg139-text {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .lg139-text {
        margin-bottom: 20px;
    }

    .lg139-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .lg139-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .lg139-light {
        padding: 40px 0;
    }

    .lg139-wrap {
        padding: 0 16px;
    }

    .lg139-title {
        font-size: 26px;
    }

    .lg139-desc,
    .lg139-text {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .lg139-text {
        margin-bottom: 18px;
    }

    .lg139-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .lg139-accent:hover {
        transform: scale(1.01);
    }

    .lg139-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .lg139-title {
        font-size: 22px;
    }

    .lg139-desc,
    .lg139-text {
        font-size: 13px;
    }

    .lg139-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .lg139-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}
/* ============================================================
     SECTION 140 — Long-Term Partnership (CYCLIC 2 - BLACK)
     ============================================================ */
.lp140-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.lp140-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lp140-content {
    width: 100%;
}

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

/* Badge */
.lp140-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.lp140-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.lp140-title span {
    color: #84c615;
}

/* Description - Justified */
.lp140-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* Text - Justified */
.lp140-text {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.lp140-text strong {
    color: #84c615;
}

/* Accent Box */
.lp140-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.lp140-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.lp140-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .lp140-title {
        font-size: 34px;
    }

    .lp140-desc,
    .lp140-text {
        font-size: 16px;
        max-width: 100%;
    }

    .lp140-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .lp140-dark {
        padding: 50px 0;
    }

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

    .lp140-desc,
    .lp140-text {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .lp140-text {
        margin-bottom: 20px;
    }

    .lp140-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .lp140-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .lp140-dark {
        padding: 40px 0;
    }

    .lp140-wrap {
        padding: 0 16px;
    }

    .lp140-title {
        font-size: 26px;
    }

    .lp140-desc,
    .lp140-text {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .lp140-text {
        margin-bottom: 18px;
    }

    .lp140-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .lp140-accent:hover {
        transform: scale(1.01);
    }

    .lp140-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .lp140-title {
        font-size: 22px;
    }

    .lp140-desc,
    .lp140-text {
        font-size: 13px;
    }

    .lp140-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .lp140-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}
/* ============================================================
     SECTION 142 — Trust Framework (CYCLIC 2 - BLACK)
     ============================================================ */
.tf142-dark { background: #0a0a0a; padding: 60px 0; }
.tf142-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tf142-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.tf142-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.tf142-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.tf142-title span { color: #84c615; }
.tf142-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.tf142-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.tf142-item { background: #161616; color: #e0e0e0; padding: 10px 14px; border-radius: 6px; font-size: clamp(12px, 0.9vw, 14px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border-right: 3px solid transparent; cursor: default; }
.tf142-item:hover { background: #252525; border-right-color: #84c615; transform: translateX(-5px); color: #84c615; }
.tf142-item .tf142-check { color: #84c615; font-weight: 700; font-size: 14px; }
.tf142-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.tf142-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.tf142-accent p { margin: 0; }
.tf142-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.tf142-pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; width: 100%; max-width: 350px; }
.tf142-pillar { background: #161616; color: #e0e0e0; padding: 18px 12px; text-align: center; border-radius: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; border: 1px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.tf142-pillar:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.tf142-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.tf142-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }

/* ============================================================
     SECTION 143 — Why Trichy Choose (CYCLIC 1 - WHITE)
     ============================================================ */
.wt143-light { background: #ffffff; padding: 60px 0; }
.wt143-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.wt143-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.wt143-badge { display: inline-block; background: #84c615; color: #ffffff; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.wt143-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #0a0a0a; margin-bottom: 12px; line-height: 1.2; }
.wt143-title span { color: #84c615; }
.wt143-desc { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.wt143-text { color: #444444; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 18px; }
.wt143-accent { background: #84c615; color: #ffffff; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.wt143-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #0a0a0a; color: #84c615; }
.wt143-accent p { margin: 0; }
.wt143-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.wt143-values { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; width: 100%; max-width: 350px; }
.wt143-value { background: #f0f0f0; color: #0a0a0a; padding: 18px 12px; text-align: center; border-radius: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; transition: all 0.3s ease; cursor: default; }
.wt143-value:hover { background: #84c615; color: #ffffff; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.wt143-tag { color: #0a0a0a; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #0a0a0a; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.wt143-tag:hover { background: #0a0a0a; color: #84c615; border-color: #84c615; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.15); }

/* ============================================================
     SECTION 144 — Client Success Checklist (CYCLIC 2 - BLACK)
     ============================================================ */
.cs144-dark { background: #0a0a0a; padding: 60px 0; }
.cs144-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cs144-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cs144-badge { display: inline-block; background: #84c615; color: #0a0a0a; padding: 4px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.cs144-title { font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: #ffffff; margin-bottom: 12px; line-height: 1.2; }
.cs144-title span { color: #84c615; }
.cs144-desc { color: #cccccc; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; margin-bottom: 14px; }
.cs144-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.cs144-item { background: #161616; color: #e0e0e0; padding: 8px 12px; border-radius: 6px; font-size: clamp(11px, 0.9vw, 13px); display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; border: 1px solid transparent; cursor: default; }
.cs144-item:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.02); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.cs144-item .cs144-check { color: #84c615; font-weight: 700; font-size: 12px; transition: color 0.3s ease; }
.cs144-item:hover .cs144-check { color: #0a0a0a; }
.cs144-accent { background: #84c615; color: #0a0a0a; padding: 16px 22px; border-radius: 10px; font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); transition: all 0.4s ease; cursor: default; }
.cs144-accent:hover { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 40px rgba(132, 198, 21, 0.3); background: #ffffff; }
.cs144-accent p { margin: 0; }
.cs144-visual { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.cs144-items { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; width: 100%; max-width: 350px; }
.cs144-item-label { background: #161616; color: #e0e0e0; padding: 18px 12px; text-align: center; border-radius: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; border: 1px solid #2a2a2a; transition: all 0.3s ease; cursor: default; }
.cs144-item-label:hover { background: #84c615; color: #0a0a0a; border-color: #84c615; transform: scale(1.05); box-shadow: 0 5px 20px rgba(132, 198, 21, 0.2); }
.cs144-tag { color: #84c615; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1px; padding: 10px 24px; border: 2px solid #84c615; border-radius: 50px; transition: all 0.4s ease; cursor: default; }
.cs144-tag:hover { background: #84c615; color: #0a0a0a; transform: scale(1.05); box-shadow: 0 0 40px rgba(132, 198, 21, 0.2); }


/* ============================================================
     RESPONSIVE BREAKPOINTS
     ============================================================ */
@media (max-width: 768px) {
    .aw126-layout, .ai127-grid, .fb128-container, .ar129-layout,
    .wc130-grid, .bg131-container, .ud132-layout, .ux133-grid,
    .rc134-container, .sb135-layout, .fr136-grid, .tp137-container,
    .ei138-layout, .lg139-grid, .lp140-container, .fe141-layout,
    .tf142-grid, .wt143-container, .cs144-layout, .fa145-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .ai127-list, .ar129-list, .fe141-list, .tf142-list, .cs144-list {
        grid-template-columns: 1fr;
    }
    .ai127-steps, .tp137-stages, .ei138-sectors {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .aw126-principles, .ai127-steps, .fb128-qualities,
    .ar129-items, .wc130-reasons, .bg131-focus,
    .ud132-elements, .ux133-priorities, .rc134-values,
    .sb135-focus, .fr136-features, .lg139-principles,
    .lp140-services, .fe141-principles, .tf142-pillars,
    .wt143-values, .cs144-items {
        grid-template-columns: 1fr;
    }
    .tp137-stages, .ei138-sectors {
        grid-template-columns: 1fr 1fr;
    }
    .fa145-item {
        font-size: 13px;
        padding: 10px 14px;
    }
}



















 
        /* ============================================================
           GLOBAL STYLES
           ============================================================ */
        .sp-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .sp-block {
            padding: 80px 0;
        }

        .sp-block--light {
            background: #ffffff;
            border-bottom: 1px solid #f0f0f0;
        }

        .sp-block--dark {
            background: #0a0e1a;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        /* ============================================================
           CYCLIC 1 — WHITE THEME
           ============================================================ */
        .sp-block--light .sp-heading {
            font-size: 38px;
            font-weight: 700;
            line-height: 1.15;
            color: #000000;
            letter-spacing: -0.02em;
            margin: 0 0 12px 0;
            position: relative;
            padding-bottom: 18px;
        }

        .sp-block--light .sp-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: #84c615;
            border-radius: 2px;
        }

        .sp-block--light .sp-heading--center::after {
            left: 50%;
            transform: translateX(-50%);
        }

        .sp-block--light .sp-desc {
            font-size: 18px;
            color: #4a5268;
            line-height: 1.7;
            margin: 0 0 20px 0;
        }

        .sp-block--light .sp-para {
            font-size: 16px;
            line-height: 1.8;
            color: #1a1f36;
            margin: 0 0 12px 0;
            text-align: justify;
        }

        .sp-block--light .sp-pill {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #84c615;
            background: #e6f5ef;
            padding: 6px 20px;
            border-radius: 50px;
            border: 1px solid #84c615;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            margin-bottom: 14px;
        }

        .sp-block--light .sp-pill:hover {
            background: #84c615;
            color: #ffffff;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
        }

        .sp-block--light .sp-box {
            background: #f8fafc;
            border-radius: 14px;
            padding: 24px 28px;
            border: 1px solid #eef2f6;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-block--light .sp-box:hover {
            transform: translateY(-4px);
            border-color: #84c615;
            background: #ffffff;
            box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
        }

        .sp-block--light .sp-box--accent {
            background: #e6f5ef;
            border-left: 4px solid #84c615;
        }

        .sp-block--light .sp-box--accent:hover {
            background: #d4f0e0;
            transform: translateX(6px);
        }

        .sp-block--light .sp-grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .sp-block--light .sp-grid3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .sp-block--light .sp-grid4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .sp-block--light .sp-check {
            color: #84c615;
            font-weight: 700;
            margin-right: 8px;
        }

        .sp-block--light .sp-chip {
            display: inline-block;
            font-size: 13px;
            font-weight: 500;
            color: #1a1f36;
            background: #f8fafc;
            padding: 6px 16px;
            border-radius: 50px;
            border: 1px solid #eef2f6;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-block--light .sp-chip:hover {
            border-color: #84c615;
            color: #84c615;
            background: #e6f5ef;
            transform: translateY(-2px);
        }

        .sp-block--light .sp-num {
            font-size: 32px;
            font-weight: 700;
            color: #84c615;
            display: block;
        }

        .sp-block--light .sp-label {
            font-size: 14px;
            color: #4a5268;
        }

        .sp-block--light .sp-items li {
            font-size: 15px;
            color: #1a1f36;
            line-height: 1.6;
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .sp-block--light .sp-items li:hover {
            color: #84c615;
            transform: translateX(4px);
        }

        /* ============================================================
           CYCLIC 2 — BLACK THEME
           ============================================================ */
        .sp-block--dark .sp-heading {
            font-size: 38px;
            font-weight: 700;
            line-height: 1.15;
            color: #ffffff;
            letter-spacing: -0.02em;
            margin: 0 0 12px 0;
            position: relative;
            padding-bottom: 18px;
        }

        .sp-block--dark .sp-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: #84c615;
            border-radius: 2px;
            box-shadow: 0 0 20px rgba(132, 198, 21, 0.2);
        }

        .sp-block--dark .sp-heading--center::after {
            left: 50%;
            transform: translateX(-50%);
        }

        .sp-block--dark .sp-desc {
            font-size: 18px;
            color: #a0a8b8;
            line-height: 1.7;
            margin: 0 0 20px 0;
        }

        .sp-block--dark .sp-para {
            font-size: 16px;
            line-height: 1.8;
            color: #e6e8ec;
            margin: 0 0 12px 0;
            text-align: justify;
        }

        .sp-block--dark .sp-pill {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #84c615;
            background: rgba(132, 198, 21, 0.12);
            padding: 6px 20px;
            border-radius: 50px;
            border: 1px solid rgba(132, 198, 21, 0.2);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            margin-bottom: 14px;
        }

        .sp-block--dark .sp-pill:hover {
            background: #84c615;
            color: #ffffff;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 20px rgba(132, 198, 21, 0.25);
        }

        .sp-block--dark .sp-box {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 14px;
            padding: 24px 28px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-block--dark .sp-box:hover {
            transform: translateY(-4px);
            border-color: #84c615;
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 8px 30px rgba(132, 198, 21, 0.06);
        }

        .sp-block--dark .sp-box--accent {
            background: rgba(132, 198, 21, 0.06);
            border-left: 4px solid #84c615;
        }

        .sp-block--dark .sp-box--accent:hover {
            background: rgba(132, 198, 21, 0.10);
            transform: translateX(6px);
        }

        .sp-block--dark .sp-grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .sp-block--dark .sp-grid3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .sp-block--dark .sp-grid4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .sp-block--dark .sp-check {
            color: #84c615;
            font-weight: 700;
            margin-right: 8px;
        }

        .sp-block--dark .sp-chip {
            display: inline-block;
            font-size: 13px;
            font-weight: 500;
            color: #e6e8ec;
            background: rgba(255, 255, 255, 0.04);
            padding: 6px 16px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-block--dark .sp-chip:hover {
            border-color: #84c615;
            color: #84c615;
            background: rgba(132, 198, 21, 0.06);
            transform: translateY(-2px);
        }

        .sp-block--dark .sp-num {
            font-size: 32px;
            font-weight: 700;
            color: #84c615;
            display: block;
        }

        .sp-block--dark .sp-label {
            font-size: 14px;
            color: #a0a8b8;
        }

        .sp-block--dark .sp-items li {
            font-size: 15px;
            color: #e6e8ec;
            line-height: 1.6;
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .sp-block--dark .sp-items li:hover {
            color: #84c615;
            transform: translateX(4px);
        }

        /* ============================================================
           IMAGE STYLES - Right Side
           ============================================================ */
        .sp-img-card {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 2px solid #eef2f6;
        }

        .sp-block--light .sp-img-card {
            border-color: #eef2f6;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        }

        .sp-block--dark .sp-img-card {
            border-color: rgba(255, 255, 255, 0.06);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        }

        .sp-img-card:hover {
            transform: translateY(-8px);
            border-color: #84c615;
        }

        .sp-block--light .sp-img-card:hover {
            box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
        }

        .sp-block--dark .sp-img-card:hover {
            box-shadow: 0 16px 48px rgba(132, 198, 21, 0.10);
        }

        .sp-img-card img {
            width: 100%;
            height: 100%;
            max-height: 450px;
            object-fit: cover;
            display: block;
            transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-img-card:hover img {
            transform: scale(1.04);
        }

        .sp-img-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 18px 22px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-img-card:hover .sp-img-overlay {
            padding: 22px 26px;
        }

        .sp-img-icon {
            font-size: 18px;
            color: #84c615;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-img-card:hover .sp-img-icon {
            transform: rotate(90deg) scale(1.2);
        }

        .sp-img-text {
            font-size: 17px;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: 0.02em;
        }

        .sp-img-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #ffffff;
            padding: 10px 16px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-img-card:hover .sp-img-badge {
            opacity: 1;
            transform: translateY(0);
        }

        .sp-img-badge span:first-child {
            color: #84c615;
            font-size: 16px;
        }

        .sp-img-accent {
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 80px;
            background: #84c615;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sp-img-card:hover .sp-img-accent {
            opacity: 0.08;
        }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width: 1024px) {

            .sp-block--light .sp-grid4,
            .sp-block--dark .sp-grid4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .sp-block {
                padding: 48px 0;
            }

            .sp-block--light .sp-grid2,
            .sp-block--dark .sp-grid2 {
                grid-template-columns: 1fr;
            }

            .sp-block--light .sp-grid3,
            .sp-block--dark .sp-grid3 {
                grid-template-columns: 1fr 1fr;
            }

            .sp-block--light .sp-grid4,
            .sp-block--dark .sp-grid4 {
                grid-template-columns: 1fr 1fr;
            }

            .sp-block--light .sp-heading,
            .sp-block--dark .sp-heading {
                font-size: 28px;
                padding-bottom: 14px;
            }

            .sp-block--light .sp-heading::after,
            .sp-block--dark .sp-heading::after {
                width: 48px;
                height: 3px;
            }

            .sp-block--light .sp-desc,
            .sp-block--dark .sp-desc {
                font-size: 16px;
            }

            .sp-block--light .sp-para,
            .sp-block--dark .sp-para {
                font-size: 15px;
            }

            .sp-block--light .sp-box,
            .sp-block--dark .sp-box {
                padding: 18px 20px;
            }

            .sp-block--light .sp-num,
            .sp-block--dark .sp-num {
                font-size: 26px;
            }

            .sp-img-card img {
                max-height: 300px;
            }

            .sp-img-text {
                font-size: 15px;
            }

            .sp-img-overlay {
                padding: 14px 18px;
            }

            .sp-img-card:hover .sp-img-overlay {
                padding: 18px 22px;
            }

            .sp-img-badge {
                top: 12px;
                right: 12px;
                padding: 8px 14px;
                font-size: 12px;
            }

            .sp-img-accent {
                width: 60px;
                height: 60px;
            }
        }

        @media (max-width: 480px) {
            .sp-block {
                padding: 32px 0;
            }

            .sp-block--light .sp-grid3,
            .sp-block--dark .sp-grid3 {
                grid-template-columns: 1fr;
            }

            .sp-block--light .sp-grid4,
            .sp-block--dark .sp-grid4 {
                grid-template-columns: 1fr 1fr;
            }

            .sp-block--light .sp-heading,
            .sp-block--dark .sp-heading {
                font-size: 22px;
                padding-bottom: 12px;
            }

            .sp-block--light .sp-heading::after,
            .sp-block--dark .sp-heading::after {
                width: 40px;
                height: 3px;
            }

            .sp-block--light .sp-desc,
            .sp-block--dark .sp-desc {
                font-size: 14px;
            }

            .sp-block--light .sp-para,
            .sp-block--dark .sp-para {
                font-size: 14px;
            }

            .sp-block--light .sp-box,
            .sp-block--dark .sp-box {
                padding: 14px 16px;
                border-radius: 12px;
            }

            .sp-block--light .sp-pill,
            .sp-block--dark .sp-pill {
                font-size: 11px;
                padding: 4px 14px;
            }

            .sp-block--light .sp-chip,
            .sp-block--dark .sp-chip {
                font-size: 11px;
                padding: 4px 12px;
            }

            .sp-block--light .sp-num,
            .sp-block--dark .sp-num {
                font-size: 22px;
            }

            .sp-block--light .sp-label,
            .sp-block--dark .sp-label {
                font-size: 12px;
            }

            .sp-img-card img {
                max-height: 220px;
            }

            .sp-img-text {
                font-size: 14px;
            }

            .sp-img-icon {
                font-size: 14px;
            }

            .sp-img-overlay {
                padding: 12px 16px;
                gap: 8px;
            }

            .sp-img-card:hover .sp-img-overlay {
                padding: 16px 18px;
            }

            .sp-img-badge {
                top: 10px;
                right: 10px;
                padding: 6px 12px;
                font-size: 10px;
                border-radius: 30px;
            }

            .sp-img-badge span:first-child {
                font-size: 12px;
            }

            .sp-img-accent {
                width: 50px;
                height: 50px;
            }
        }

        .sp-wrap,
        .sp-block {
            overflow: hidden;
        }



        .sp-box,
        .sp-check {
            color: black;
        }

        .laptop {
            color: rgb(132, 198, 21) !important;
        }
    


/* ============================================================
     SECTION 144 — Client Success Checklist (CYCLIC 2 - BLACK)
     ============================================================ */
.cs144-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.cs144-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cs144-content {
    width: 100%;
}

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

/* Badge */
.cs144-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.cs144-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.cs144-title span {
    color: #84c615;
}

/* Description - Justified */
.cs144-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* Checklist Grid */
.cs144-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 850px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.cs144-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: default;
}

.cs144-item:hover {
    background: #84c615;
    color: #0a0a0a;
    border-color: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.cs144-item .cs144-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 24px;
    transition: color 0.3s ease;
}

.cs144-item:hover .cs144-check {
    color: #0a0a0a;
}

/* Accent Box */
.cs144-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.cs144-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.cs144-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .cs144-title {
        font-size: 34px;
    }

    .cs144-desc {
        font-size: 16px;
        max-width: 100%;
    }

    .cs144-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 100%;
    }

    .cs144-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .cs144-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .cs144-dark {
        padding: 50px 0;
    }

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

    .cs144-desc {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .cs144-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .cs144-item {
        padding: 11px 14px;
        font-size: 13px;
    }

    .cs144-item .cs144-check {
        font-size: 14px;
        min-width: 20px;
    }

    .cs144-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .cs144-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .cs144-dark {
        padding: 40px 0;
    }

    .cs144-wrap {
        padding: 0 16px;
    }

    .cs144-title {
        font-size: 26px;
    }

    .cs144-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .cs144-list {
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .cs144-item {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 8px;
        gap: 10px;
    }

    .cs144-item .cs144-check {
        font-size: 14px;
        min-width: 20px;
    }

    .cs144-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .cs144-accent:hover {
        transform: scale(1.01);
    }

    .cs144-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .cs144-title {
        font-size: 22px;
    }

    .cs144-desc {
        font-size: 13px;
    }

    .cs144-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .cs144-item {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 6px;
    }

    .cs144-item .cs144-check {
        font-size: 12px;
        min-width: 18px;
    }

    .cs144-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .cs144-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}



/* ============================================================
     SECTION 143 — Why Businesses Choose Freshora (CYCLIC 1 - WHITE)
     ============================================================ */
.wt143-light {
    background: #ffffff;
    padding: 70px 0;
}

.wt143-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.wt143-content {
    width: 100%;
}

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

/* Badge */
.wt143-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.wt143-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.wt143-title span {
    color: #84c615;
}

/* Description - Justified */
.wt143-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* Subtitle */
.wt143-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 14px;
}

/* Grid */
.wt143-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 850px;
    margin: 0 auto 24px auto;
}

.wt143-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.wt143-item:hover {
    background: #84c615;
    color: #ffffff;
    border-left-color: #0a0a0a;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.wt143-item .wt143-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
}

.wt143-item:hover .wt143-check {
    color: #ffffff;
}

/* Accent Box */
.wt143-accent {
    background: #84c615;
    color: #ffffff;
    padding: 20px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 800px;
    margin: 0 auto 20px auto;
    text-align: center;
}

.wt143-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.wt143-accent p {
    margin: 0;
}

/* Conclusion */
.wt143-conclusion {
    color: #444444;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: justify;
}

.wt143-conclusion p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .wt143-title {
        font-size: 34px;
    }

    .wt143-desc {
        font-size: 16px;
        max-width: 100%;
    }

    .wt143-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 100%;
    }

    .wt143-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .wt143-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }

    .wt143-conclusion {
        max-width: 100%;
        font-size: 15px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .wt143-light {
        padding: 50px 0;
    }

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

    .wt143-desc {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .wt143-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-width: 100%;
    }

    .wt143-item {
        padding: 11px 14px;
        font-size: 13px;
        justify-content: flex-start;
    }

    .wt143-item .wt143-check {
        font-size: 14px;
    }

    .wt143-sub {
        font-size: 14px;
    }

    .wt143-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .wt143-conclusion {
        max-width: 100%;
        font-size: 14px;
    }

    .wt143-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .wt143-light {
        padding: 40px 0;
    }

    .wt143-wrap {
        padding: 0 16px;
    }

    .wt143-title {
        font-size: 26px;
    }

    .wt143-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .wt143-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .wt143-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 8px;
    }

    .wt143-item .wt143-check {
        font-size: 14px;
    }

    .wt143-sub {
        font-size: 13px;
    }

    .wt143-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .wt143-accent:hover {
        transform: scale(1.01);
    }

    .wt143-conclusion {
        max-width: 100%;
        font-size: 13px;
        padding: 0 5px;
    }

    .wt143-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .wt143-title {
        font-size: 22px;
    }

    .wt143-desc {
        font-size: 13px;
    }

    .wt143-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .wt143-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .wt143-item .wt143-check {
        font-size: 12px;
        min-width: 16px;
    }

    .wt143-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .wt143-conclusion {
        font-size: 12px;
    }

    .wt143-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}




/* ============================================================
     SECTION 142 — The Freshora Trust Framework™ (CYCLIC 2 - BLACK)
     ============================================================ */
.tf142-dark {
    background: #0a0a0a;
    padding: 70px 0;
}

.tf142-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tf142-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Left Content */
.tf142-content {
    width: 100%;
}

.tf142-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tf142-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.tf142-title span {
    color: #84c615;
}

.tf142-desc {
    color: #cccccc;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

/* List */
.tf142-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.tf142-item {
    background: #161616;
    color: #e0e0e0;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
    text-align: left;
}

.tf142-item:hover {
    background: #252525;
    border-left-color: #84c615;
    transform: translateX(6px);
    color: #84c615;
    box-shadow: 0 4px 20px rgba(132, 198, 21, 0.15);
}

.tf142-item .tf142-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 24px;
    margin-top: 2px;
}

.tf142-item strong {
    color: #ffffff;
    transition: color 0.3s ease;
}

.tf142-item:hover strong {
    color: #84c615;
}

/* Accent Box */
.tf142-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 18px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    text-align: center;
}

.tf142-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.tf142-accent p {
    margin: 0;
}

/* Right Visual - Image */
.tf142-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.tf142-image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #2a2a2a;
    transition: all 0.4s ease;
}

.tf142-image-wrapper:hover {
    border-color: #84c615;
    transform: scale(1.02);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.2);
}

.tf142-image {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.4s ease;
}

.tf142-image-wrapper:hover .tf142-image {
    transform: scale(1.03);
}

/* Tag */
.tf142-tag {
    color: #84c615;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 24px;
    border: 2px solid #84c615;
    border-radius: 50px;
    transition: all 0.4s ease;
    cursor: default;
}

.tf142-tag:hover {
    background: #84c615;
    color: #0a0a0a;
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(132, 198, 21, 0.2);
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .tf142-grid {
        gap: 40px;
    }

    .tf142-title {
        font-size: 34px;
    }

    .tf142-desc {
        font-size: 16px;
    }

    .tf142-item {
        padding: 12px 16px;
        font-size: 13px;
    }

    .tf142-image-wrapper {
        max-width: 400px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .tf142-dark {
        padding: 50px 0;
    }

    .tf142-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

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

    .tf142-desc {
        font-size: 15px;
        text-align: justify;
    }

    .tf142-item {
        padding: 11px 14px;
        font-size: 13px;
    }

    .tf142-item .tf142-check {
        font-size: 14px;
        min-width: 20px;
    }

    .tf142-accent {
        padding: 16px 22px;
        font-size: 15px;
    }

    .tf142-visual {
        flex-direction: column;
        gap: 20px;
    }

    .tf142-image-wrapper {
        max-width: 100%;
        max-height: 300px;
    }

    .tf142-tag {
        font-size: 14px;
        padding: 8px 20px;
    }

    .tf142-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .tf142-dark {
        padding: 40px 0;
    }

    .tf142-wrap {
        padding: 0 16px;
    }

    .tf142-grid {
        gap: 30px;
    }

    .tf142-title {
        font-size: 26px;
    }

    .tf142-desc {
        font-size: 14px;
        text-align: justify;
    }

    .tf142-item {
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 8px;
        gap: 10px;
    }

    .tf142-item .tf142-check {
        font-size: 13px;
        min-width: 18px;
    }

    .tf142-accent {
        padding: 14px 16px;
        font-size: 14px;
        border-radius: 10px;
    }

    .tf142-accent:hover {
        transform: scale(1.01);
    }

    .tf142-image-wrapper {
        max-height: 220px;
        border-radius: 12px;
    }

    .tf142-tag {
        font-size: 13px;
        padding: 8px 16px;
    }

    .tf142-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .tf142-title {
        font-size: 22px;
    }

    .tf142-desc {
        font-size: 13px;
    }

    .tf142-item {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 6px;
    }

    .tf142-item .tf142-check {
        font-size: 12px;
        min-width: 16px;
    }

    .tf142-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .tf142-image-wrapper {
        max-height: 180px;
        border-radius: 10px;
    }

    .tf142-tag {
        font-size: 12px;
        padding: 6px 14px;
    }

    .tf142-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}



/* ============================================================
     SECTION 141 — The Freshora Experience™ (CYCLIC 1 - WHITE)
     ============================================================ */
.fe141-light {
    background: #ffffff;
    padding: 70px 0;
}

.fe141-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fe141-content {
    width: 100%;
}

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

/* Badge */
.fe141-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Title */
.fe141-title {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.fe141-title span {
    color: #84c615;
}

/* Description - Justified */
.fe141-desc {
    color: #444444;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

/* List */
.fe141-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 850px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.fe141-item {
    background: #f5f5f5;
    color: #222222;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: clamp(13px, 1vw, 15px);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    cursor: default;
}

.fe141-item:hover {
    background: #84c615;
    color: #ffffff;
    border-left-color: #0a0a0a;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.25);
}

.fe141-item .fe141-num {
    color: #84c615;
    font-weight: 800;
    font-size: clamp(14px, 1.1vw, 16px);
    min-width: 28px;
    transition: color 0.3s ease;
}

.fe141-item:hover .fe141-num {
    color: #ffffff;
}

.fe141-item strong {
    color: #0a0a0a;
    transition: color 0.3s ease;
}

.fe141-item:hover strong {
    color: #ffffff;
}

/* Accent Box */
.fe141-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.fe141-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.fe141-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .fe141-title {
        font-size: 34px;
    }

    .fe141-desc {
        font-size: 16px;
        max-width: 100%;
    }

    .fe141-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .fe141-item {
        padding: 12px 16px;
        font-size: 13px;
    }

    .fe141-accent {
        max-width: 100%;
        padding: 18px 28px;
        font-size: 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .fe141-light {
        padding: 50px 0;
    }

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

    .fe141-desc {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .fe141-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .fe141-item {
        padding: 11px 14px;
        font-size: 13px;
    }

    .fe141-item .fe141-num {
        font-size: 14px;
        min-width: 24px;
    }

    .fe141-accent {
        padding: 16px 22px;
        font-size: 15px;
        max-width: 100%;
    }

    .fe141-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .fe141-light {
        padding: 40px 0;
    }

    .fe141-wrap {
        padding: 0 16px;
    }

    .fe141-title {
        font-size: 26px;
    }

    .fe141-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
        text-align: justify;
    }

    .fe141-list {
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .fe141-item {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 8px;
        gap: 10px;
    }

    .fe141-item .fe141-num {
        font-size: 14px;
        min-width: 24px;
    }

    .fe141-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
        max-width: 100%;
    }

    .fe141-accent:hover {
        transform: scale(1.01);
    }

    .fe141-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .fe141-title {
        font-size: 22px;
    }

    .fe141-desc {
        font-size: 13px;
    }

    .fe141-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .fe141-item {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 6px;
    }

    .fe141-item .fe141-num {
        font-size: 12px;
        min-width: 20px;
    }

    .fe141-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .fe141-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}




/* ============================================================
     SECTION — Digital Experiences (CYCLIC 1 - WHITE)
     ============================================================ */
.dx-block {
    padding: 70px 0;
}

.dx-white {
    background: #ffffff;
}

.dx-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.dx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ===== LEFT CONTENT ===== */
.dx-content {
    width: 100%;
}

.dx-title {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 20px;
    line-height: 1.2;
}

.dx-title span {
    color: #84c615;
}

.dx-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dx-para {
    color: #444444;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}

.dx-para-highlight {
    background: #f5faf0;
    padding: 16px 22px;
    border-radius: 10px;
    border-left: 4px solid #84c615;
    font-weight: 500;
    color: #0a0a0a;
    margin-top: 4px;
}

/* ===== LIST ===== */
.dx-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.dx-list li {
    color: #444444;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    transition: all 0.3s ease;
    cursor: default;
}

.dx-list li:hover {
    color: #84c615;
    transform: translateX(4px);
}

.dx-check {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

/* ===== RIGHT IMAGE ===== */
.dx-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dx-image-card {
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.dx-image-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(132, 198, 21, 0.15);
}

.dx-image {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.4s ease;
}

.dx-image-card:hover .dx-image {
    transform: scale(1.03);
}

/* Image Overlay */
.dx-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px 20px 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

.dx-overlay-text {
    color: #ffffff;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Image Accent */
.dx-image-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.dx-image-card:hover .dx-image-accent {
    opacity: 0.9;
    width: 100px;
    height: 100px;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .dx-grid {
        gap: 40px;
    }

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

    .dx-image-card {
        max-width: 450px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .dx-block {
        padding: 50px 0;
    }

    .dx-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .dx-title {
        font-size: 28px;
        text-align: center;
    }

    .dx-para {
        font-size: 15px;
        text-align: justify;
    }

    .dx-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }

    .dx-list li {
        font-size: 14px;
    }

    .dx-para-highlight {
        padding: 14px 18px;
        font-size: 15px;
    }

    .dx-image-card {
        max-width: 100%;
    }

    .dx-image-overlay {
        padding: 20px 18px 14px 18px;
    }

    .dx-overlay-text {
        font-size: 18px;
    }

    .dx-image-accent {
        width: 60px;
        height: 60px;
    }

    .dx-image-card:hover .dx-image-accent {
        width: 70px;
        height: 70px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .dx-block {
        padding: 40px 0;
    }

    .dx-wrap {
        padding: 0 16px;
    }

    .dx-grid {
        gap: 28px;
    }

    .dx-title {
        font-size: 24px;
        text-align: center;
    }

    .dx-para {
        font-size: 14px;
        text-align: justify;
    }

    .dx-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .dx-list li {
        font-size: 13px;
        padding: 4px 0;
    }

    .dx-check {
        font-size: 14px;
        min-width: 18px;
    }

    .dx-para-highlight {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 8px;
    }

    .dx-image-card {
        border-radius: 12px;
    }

    .dx-image-overlay {
        padding: 16px 14px 12px 14px;
    }

    .dx-overlay-text {
        font-size: 16px;
    }

    .dx-image-accent {
        width: 50px;
        height: 50px;
    }

    .dx-image-card:hover .dx-image-accent {
        width: 60px;
        height: 60px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .dx-title {
        font-size: 20px;
    }

    .dx-para {
        font-size: 13px;
    }

    .dx-list li {
        font-size: 12px;
    }

    .dx-para-highlight {
        padding: 10px 12px;
        font-size: 13px;
    }

    .dx-overlay-text {
        font-size: 14px;
    }
}




body {
    text-align: justify;
}




/* ============================================================
     SECTION — Why Professional Web Design Matters (CYCLIC 1 - WHITE)
     ============================================================ */
.pw-block {
    padding: 70px 0;
}

.pw-white {
    background: #ffffff;
}

.pw-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.pw-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.pw-header {
    margin-bottom: 40px;
}

.pw-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pw-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1.2;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.pw-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.pw-text {
    color: #444444;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.pw-text:last-of-type {
    margin-bottom: 20px;
}

/* ============================================================
     HIGHLIGHT
     ============================================================ */
.pw-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f5faf0;
    padding: 14px 20px;
    border-radius: 10px;
    border-left: 4px solid #84c615;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.pw-highlight-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

.pw-highlight-text {
    color: #0a0a0a;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 600;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     QUESTIONS
     ============================================================ */
.pw-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.pw-question {
    background: #f5f5f5;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: default;
}

.pw-question:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
}

.pw-q-icon {
    color: #84c615;
    font-weight: 800;
    font-size: 16px;
    min-width: 24px;
    transition: color 0.3s ease;
}

.pw-question:hover .pw-q-icon {
    color: #ffffff;
}

.pw-q-text {
    color: #333333;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.pw-question:hover .pw-q-text {
    color: #ffffff;
}

/* ============================================================
     CONCLUSION
     ============================================================ */
.pw-conclusion {
    background: #0a0a0a;
    padding: 20px 24px;
    border-radius: 12px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 30px;
}

.pw-conclusion-text {
    color: #cccccc;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.8;
    margin: 0 0 10px 0;
    text-align: justify;
}

.pw-conclusion-line {
    width: 60px;
    height: 3px;
    background: #84c615;
    margin: 0 auto 10px auto;
    border-radius: 4px;
}

.pw-conclusion-highlight {
    color: #ffffff;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 600;
    margin: 0;
    text-align: center;
}

/* ============================================================
     STATS
     ============================================================ */
.pw-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.pw-stat {
    background: #f5faf0;
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #e8f0e0;
}

.pw-stat:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.pw-stat-num {
    display: block;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: #0a0a0a;
    transition: color 0.3s ease;
}

.pw-stat:hover .pw-stat-num {
    color: #ffffff;
}

.pw-stat-label {
    display: block;
    font-size: clamp(12px, 0.9vw, 14px);
    color: #555555;
    font-weight: 500;
    transition: color 0.3s ease;
}

.pw-stat:hover .pw-stat-label {
    color: #ffffff;
}

/* ============================================================
     TRUST BADGE
     ============================================================ */
.pw-trust {
    background: #0a0a0a;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
}

.pw-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
}

.pw-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.pw-trust:hover .pw-trust-icon {
    color: #0a0a0a;
}

.pw-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.pw-trust:hover .pw-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .pw-title {
        font-size: 38px;
    }

    .pw-stat-num {
        font-size: 30px;
    }

    .pw-stats {
        gap: 12px;
    }

    .pw-stat {
        padding: 18px 12px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .pw-block {
        padding: 50px 0;
    }

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

    .pw-text {
        font-size: 15px;
        text-align: justify;
    }

    .pw-highlight-text {
        font-size: 15px;
        text-align: justify;
    }

    .pw-questions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pw-question {
        padding: 10px 14px;
    }

    .pw-q-text {
        font-size: 13px;
    }

    .pw-conclusion {
        padding: 18px 20px;
    }

    .pw-conclusion-text {
        font-size: 14px;
        text-align: justify;
    }

    .pw-conclusion-highlight {
        font-size: 15px;
    }

    .pw-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pw-stat {
        padding: 16px 12px;
    }

    .pw-stat-num {
        font-size: 26px;
    }

    .pw-stat-label {
        font-size: 12px;
    }

    .pw-trust {
        padding: 14px 20px;
    }

    .pw-trust-text {
        font-size: 14px;
    }

    .pw-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .pw-block {
        padding: 40px 0;
    }

    .pw-wrap {
        padding: 0 16px;
    }

    .pw-title {
        font-size: 26px;
    }

    .pw-header {
        margin-bottom: 28px;
    }

    .pw-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .pw-highlight {
        padding: 12px 16px;
        gap: 10px;
    }

    .pw-highlight-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .pw-highlight-text {
        font-size: 14px;
        text-align: justify;
    }

    .pw-questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .pw-question {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .pw-q-icon {
        font-size: 14px;
        min-width: 20px;
    }

    .pw-q-text {
        font-size: 13px;
    }

    .pw-conclusion {
        padding: 16px 16px;
        border-radius: 10px;
    }

    .pw-conclusion-text {
        font-size: 13px;
        text-align: justify;
    }

    .pw-conclusion-line {
        width: 40px;
        height: 2px;
        margin: 8px auto;
    }

    .pw-conclusion-highlight {
        font-size: 14px;
    }

    .pw-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .pw-stat {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .pw-stat-num {
        font-size: 22px;
    }

    .pw-stat-label {
        font-size: 11px;
    }

    .pw-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .pw-trust-icon {
        font-size: 15px;
    }

    .pw-trust-text {
        font-size: 13px;
    }

    .pw-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .pw-title {
        font-size: 22px;
    }

    .pw-text {
        font-size: 13px;
    }

    .pw-highlight-text {
        font-size: 13px;
    }

    .pw-q-text {
        font-size: 12px;
    }

    .pw-conclusion-text {
        font-size: 12px;
    }

    .pw-conclusion-highlight {
        font-size: 13px;
    }

    .pw-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pw-stat {
        padding: 10px 8px;
    }

    .pw-stat-num {
        font-size: 18px;
    }

    .pw-stat-label {
        font-size: 10px;
    }

    .pw-trust-text {
        font-size: 12px;
    }
}


/* ============================================================
     SECTION — Your Website Is Your Digital Sales Representative (CYCLIC 2 - BLACK)
     ============================================================ */
.sr-block {
    padding: 70px 0;
}

.sr-dark {
    background: #0a0a0a;
}

.sr-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.sr-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.sr-header {
    margin-bottom: 40px;
}

.sr-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sr-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.sr-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     ANALOGY
     ============================================================ */
.sr-analogy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #161616;
    padding: 18px 24px;
    border-radius: 12px;
    border-left: 4px solid #84c615;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.sr-analogy-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    min-width: 24px;
}

.sr-analogy-text {
    color: #e0e0e0;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     TEXT
     ============================================================ */
.sr-text {
    color: #cccccc;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.sr-text:last-of-type {
    margin-bottom: 20px;
}

/* ============================================================
     HIGHLIGHT
     ============================================================ */
.sr-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #1a1a1a;
    padding: 14px 20px;
    border-radius: 10px;
    border-left: 4px solid #84c615;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.sr-highlight-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

.sr-highlight-text {
    color: #ffffff;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 600;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     LIST
     ============================================================ */
.sr-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.sr-item {
    background: #161616;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.sr-item:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
}

.sr-item-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
    transition: color 0.3s ease;
}

.sr-item:hover .sr-item-icon {
    color: #0a0a0a;
}

.sr-item-text {
    color: #e0e0e0;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.sr-item:hover .sr-item-text {
    color: #0a0a0a;
}

/* ============================================================
     CONCLUSION
     ============================================================ */
.sr-conclusion {
    background: #161616;
    padding: 18px 24px;
    border-radius: 12px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #2a2a2a;
}

.sr-conclusion-text {
    color: #e0e0e0;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.8;
    margin: 0;
    text-align: center;
    font-weight: 500;
}

/* ============================================================
     STATS
     ============================================================ */
.sr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.sr-stat {
    background: #161616;
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.sr-stat:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.sr-stat-num {
    display: block;
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800;
    color: #84c615;
    transition: color 0.3s ease;
}

.sr-stat:hover .sr-stat-num {
    color: #0a0a0a;
}

.sr-stat-label {
    display: block;
    font-size: clamp(12px, 0.9vw, 14px);
    color: #cccccc;
    font-weight: 500;
    transition: color 0.3s ease;
}

.sr-stat:hover .sr-stat-label {
    color: #0a0a0a;
}

/* ============================================================
     TRUST MESSAGE
     ============================================================ */
.sr-trust {
    background: #161616;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
    border: 1px solid #2a2a2a;
}

.sr-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.sr-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.sr-trust:hover .sr-trust-icon {
    color: #0a0a0a;
}

.sr-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.sr-trust:hover .sr-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .sr-title {
        font-size: 38px;
    }

    .sr-stat-num {
        font-size: 28px;
    }

    .sr-stats {
        gap: 12px;
    }

    .sr-stat {
        padding: 18px 12px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .sr-block {
        padding: 50px 0;
    }

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

    .sr-analogy-text {
        font-size: 15px;
        text-align: justify;
    }

    .sr-text {
        font-size: 15px;
        text-align: justify;
    }

    .sr-highlight-text {
        font-size: 15px;
        text-align: justify;
    }

    .sr-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sr-item {
        padding: 10px 14px;
    }

    .sr-item-text {
        font-size: 13px;
    }

    .sr-conclusion {
        padding: 16px 20px;
    }

    .sr-conclusion-text {
        font-size: 15px;
    }

    .sr-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sr-stat {
        padding: 16px 12px;
    }

    .sr-stat-num {
        font-size: 24px;
    }

    .sr-stat-label {
        font-size: 12px;
    }

    .sr-trust {
        padding: 14px 20px;
    }

    .sr-trust-text {
        font-size: 14px;
    }

    .sr-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .sr-block {
        padding: 40px 0;
    }

    .sr-wrap {
        padding: 0 16px;
    }

    .sr-title {
        font-size: 26px;
    }

    .sr-header {
        margin-bottom: 28px;
    }

    .sr-analogy {
        padding: 14px 16px;
        gap: 10px;
    }

    .sr-analogy-icon {
        font-size: 15px;
        min-width: 20px;
    }

    .sr-analogy-text {
        font-size: 14px;
        text-align: justify;
    }

    .sr-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .sr-highlight {
        padding: 12px 16px;
        gap: 10px;
    }

    .sr-highlight-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .sr-highlight-text {
        font-size: 14px;
        text-align: justify;
    }

    .sr-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sr-item {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .sr-item-icon {
        font-size: 14px;
        min-width: 20px;
    }

    .sr-item-text {
        font-size: 13px;
    }

    .sr-conclusion {
        padding: 14px 16px;
        border-radius: 10px;
    }

    .sr-conclusion-text {
        font-size: 14px;
    }

    .sr-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sr-stat {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .sr-stat-num {
        font-size: 20px;
    }

    .sr-stat-label {
        font-size: 11px;
    }

    .sr-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .sr-trust-icon {
        font-size: 15px;
    }

    .sr-trust-text {
        font-size: 13px;
    }

    .sr-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .sr-title {
        font-size: 22px;
    }

    .sr-analogy-text {
        font-size: 13px;
    }

    .sr-text {
        font-size: 13px;
    }

    .sr-highlight-text {
        font-size: 13px;
    }

    .sr-item-text {
        font-size: 12px;
    }

    .sr-conclusion-text {
        font-size: 13px;
    }

    .sr-stat-num {
        font-size: 18px;
    }

    .sr-stat-label {
        font-size: 10px;
    }

    .sr-trust-text {
        font-size: 12px;
    }

    .sr-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sr-stat {
        padding: 10px 8px;
    }
}


/* ============================================================
     SECTION — Web Design Company in Trichy (CYCLIC 1 - WHITE)
     ============================================================ */
.wdco-block {
    padding: 70px 0;
}

.wdco-white {
    background: #ffffff;
}

.wdco-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.wdco-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.wdco-header {
    margin-bottom: 30px;
}

.wdco-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.wdco-title {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 10px;
    line-height: 1.2;
}

.wdco-tagline {
    color: #555555;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
    text-align: justify;
}

/* ============================================================
     TAGS
     ============================================================ */
.wdco-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
}

.wdco-tag {
    background: #f0f8e8;
    color: #0a0a0a;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #e0e8d8;
}

.wdco-tag:hover {
    background: #84c615;
    color: #ffffff;
    border-color: #84c615;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.2);
}

/* ============================================================
     MAIN CONTENT
     ============================================================ */
.wdco-main {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-bottom: 40px;
}

/* Row */
.wdco-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.wdco-row-reverse {
    direction: rtl;
}

.wdco-row-reverse > * {
    direction: ltr;
}

/* ============================================================
     TEXT BLOCK
     ============================================================ */
.wdco-text {
    width: 100%;
}

.wdco-label-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wdco-label-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
}

.wdco-label-text {
    color: #84c615;
    font-weight: 700;
    font-size: clamp(12px, 0.9vw, 14px);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wdco-subtitle {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 14px;
    line-height: 1.3;
}

.wdco-desc {
    color: #444444;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     LIST
     ============================================================ */
.wdco-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
}

.wdco-list li {
    color: #444444;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    transition: all 0.3s ease;
    cursor: default;
}

.wdco-list li:hover {
    color: #84c615;
    transform: translateX(5px);
}

.wdco-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    min-width: 20px;
}

/* ============================================================
     IMAGE
     ============================================================ */
.wdco-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.wdco-image-box {
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.wdco-image-box:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(132, 198, 21, 0.15);
}

.wdco-img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.4s ease;
}

.wdco-image-box:hover .wdco-img {
    transform: scale(1.03);
}

/* Image Overlay */
.wdco-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 20px 16px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

.wdco-img-text {
    color: #ffffff;
    font-size: clamp(16px, 1.3vw, 22px);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Image Accent */
.wdco-img-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.wdco-image-box:hover .wdco-img-accent {
    opacity: 0.8;
    width: 90px;
    height: 90px;
}

/* Image Badge */
.wdco-img-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wdco-img-badge span:first-child {
    color: #84c615;
}

/* ============================================================
     STATS
     ============================================================ */
.wdco-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #f5faf0;
    padding: 30px 20px;
    border-radius: 16px;
    border: 1px solid #e8f0e0;
}

.wdco-stat {
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
    padding: 10px;
    border-radius: 12px;
}

.wdco-stat:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
}

.wdco-stat-num {
    display: block;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: #0a0a0a;
    transition: color 0.3s ease;
}

.wdco-stat:hover .wdco-stat-num {
    color: #ffffff;
}

.wdco-stat-label {
    display: block;
    font-size: clamp(13px, 1vw, 15px);
    color: #555555;
    font-weight: 500;
    transition: color 0.3s ease;
}

.wdco-stat:hover .wdco-stat-label {
    color: #ffffff;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .wdco-row {
        gap: 40px;
    }

    .wdco-title {
        font-size: 38px;
    }

    .wdco-image-box {
        max-width: 450px;
    }

    .wdco-stats {
        gap: 15px;
        padding: 25px 16px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .wdco-block {
        padding: 50px 0;
    }

    .wdco-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wdco-row-reverse {
        direction: ltr;
    }

    .wdco-row-reverse > * {
        direction: ltr;
    }

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

    .wdco-tagline {
        font-size: 16px;
        text-align: justify;
    }

    .wdco-tags {
        gap: 8px;
        margin-bottom: 30px;
    }

    .wdco-tag {
        font-size: 12px;
        padding: 6px 16px;
    }

    .wdco-main {
        gap: 35px;
    }

    .wdco-subtitle {
        font-size: 22px;
    }

    .wdco-desc {
        font-size: 15px;
        text-align: justify;
    }

    .wdco-list {
        grid-template-columns: 1fr 1fr;
        gap: 4px 14px;
    }

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

    .wdco-image-box {
        max-width: 100%;
    }

    .wdco-img-overlay {
        padding: 18px 16px 12px 16px;
    }

    .wdco-img-text {
        font-size: 18px;
    }

    .wdco-img-accent {
        width: 60px;
        height: 60px;
    }

    .wdco-image-box:hover .wdco-img-accent {
        width: 70px;
        height: 70px;
    }

    .wdco-img-badge {
        top: 12px;
        left: 12px;
        padding: 5px 14px;
        font-size: 12px;
    }

    .wdco-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 20px 16px;
    }

    .wdco-stat-num {
        font-size: 28px;
    }

    .wdco-stat-label {
        font-size: 13px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .wdco-block {
        padding: 40px 0;
    }

    .wdco-wrap {
        padding: 0 16px;
    }

    .wdco-title {
        font-size: 26px;
    }

    .wdco-tagline {
        font-size: 14px;
        text-align: justify;
    }

    .wdco-badge {
        font-size: 10px;
        padding: 4px 14px;
    }

    .wdco-tags {
        gap: 6px;
        margin-bottom: 24px;
    }

    .wdco-tag {
        font-size: 11px;
        padding: 5px 14px;
    }

    .wdco-main {
        gap: 28px;
    }

    .wdco-row {
        gap: 24px;
    }

    .wdco-subtitle {
        font-size: 18px;
    }

    .wdco-desc {
        font-size: 14px;
        text-align: justify;
    }

    .wdco-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .wdco-list li {
        font-size: 13px;
        padding: 3px 0;
    }

    .wdco-check {
        font-size: 13px;
        min-width: 18px;
    }

    .wdco-label-box {
        margin-bottom: 8px;
    }

    .wdco-label-icon {
        font-size: 14px;
    }

    .wdco-label-text {
        font-size: 11px;
    }

    .wdco-image-box {
        border-radius: 12px;
    }

    .wdco-img-overlay {
        padding: 14px 12px 10px 12px;
    }

    .wdco-img-text {
        font-size: 15px;
    }

    .wdco-img-accent {
        width: 50px;
        height: 50px;
    }

    .wdco-image-box:hover .wdco-img-accent {
        width: 60px;
        height: 60px;
    }

    .wdco-img-badge {
        top: 10px;
        left: 10px;
        padding: 4px 12px;
        font-size: 10px;
    }

    .wdco-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 16px 12px;
        border-radius: 12px;
    }

    .wdco-stat {
        padding: 8px;
    }

    .wdco-stat-num {
        font-size: 22px;
    }

    .wdco-stat-label {
        font-size: 11px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .wdco-title {
        font-size: 22px;
    }

    .wdco-tagline {
        font-size: 13px;
    }

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

    .wdco-desc {
        font-size: 13px;
    }

    .wdco-list li {
        font-size: 12px;
    }

    .wdco-stat-num {
        font-size: 18px;
    }

    .wdco-stat-label {
        font-size: 10px;
    }

    .wdco-stats {
        gap: 8px;
        padding: 12px 10px;
    }

    .wdco-stat {
        padding: 6px;
    }
}



/* ============================================================
     SECTION — Why Good Web Design Builds Trust (CYCLIC 2 - BLACK)
     ============================================================ */
.tf-block {
    padding: 70px 0;
}

.tf-dark {
    background: #0a0a0a;
}

.tf-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.tf-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.tf-header {
    margin-bottom: 40px;
}

.tf-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tf-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.tf-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     TEXT
     ============================================================ */
.tf-text {
    color: #cccccc;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.tf-text:last-of-type {
    margin-bottom: 20px;
}

/* ============================================================
     LIST
     ============================================================ */
.tf-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.tf-item {
    background: #161616;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.tf-item:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
}

.tf-item-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    min-width: 20px;
    transition: color 0.3s ease;
}

.tf-item:hover .tf-item-icon {
    color: #0a0a0a;
}

.tf-item-text {
    color: #e0e0e0;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.tf-item:hover .tf-item-text {
    color: #0a0a0a;
}

/* ============================================================
     HIGHLIGHT
     ============================================================ */
.tf-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #1a1a1a;
    padding: 14px 20px;
    border-radius: 10px;
    border-left: 4px solid #84c615;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.tf-highlight-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

.tf-highlight-text {
    color: #ffffff;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 500;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     CONCLUSION
     ============================================================ */
.tf-conclusion {
    background: #161616;
    padding: 20px 24px;
    border-radius: 12px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #2a2a2a;
}

.tf-conclusion-text {
    color: #cccccc;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.8;
    margin: 0 0 10px 0;
    text-align: justify;
}

.tf-conclusion-line {
    width: 60px;
    height: 3px;
    background: #84c615;
    margin: 0 auto 12px auto;
    border-radius: 4px;
}

.tf-conclusion-highlight {
    color: #ffffff;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 600;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     STATS
     ============================================================ */
.tf-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.tf-stat {
    background: #161616;
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.tf-stat:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.tf-stat-num {
    display: block;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: #84c615;
    transition: color 0.3s ease;
}

.tf-stat:hover .tf-stat-num {
    color: #0a0a0a;
}

.tf-stat-label {
    display: block;
    font-size: clamp(12px, 0.9vw, 14px);
    color: #cccccc;
    font-weight: 500;
    transition: color 0.3s ease;
}

.tf-stat:hover .tf-stat-label {
    color: #0a0a0a;
}

/* ============================================================
     TRUST MESSAGE
     ============================================================ */
.tf-trust {
    background: #161616;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
    border: 1px solid #2a2a2a;
}

.tf-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.tf-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.tf-trust:hover .tf-trust-icon {
    color: #0a0a0a;
}

.tf-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.tf-trust:hover .tf-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .tf-title {
        font-size: 38px;
    }

    .tf-stat-num {
        font-size: 30px;
    }

    .tf-stats {
        gap: 12px;
    }

    .tf-stat {
        padding: 18px 12px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .tf-block {
        padding: 50px 0;
    }

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

    .tf-text {
        font-size: 15px;
        text-align: justify;
    }

    .tf-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .tf-item {
        padding: 10px 14px;
    }

    .tf-item-text {
        font-size: 13px;
    }

    .tf-highlight-text {
        font-size: 15px;
        text-align: justify;
    }

    .tf-conclusion {
        padding: 18px 20px;
    }

    .tf-conclusion-text {
        font-size: 14px;
        text-align: justify;
    }

    .tf-conclusion-highlight {
        font-size: 15px;
        text-align: justify;
    }

    .tf-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .tf-stat {
        padding: 16px 12px;
    }

    .tf-stat-num {
        font-size: 26px;
    }

    .tf-stat-label {
        font-size: 12px;
    }

    .tf-trust {
        padding: 14px 20px;
    }

    .tf-trust-text {
        font-size: 14px;
    }

    .tf-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .tf-block {
        padding: 40px 0;
    }

    .tf-wrap {
        padding: 0 16px;
    }

    .tf-title {
        font-size: 26px;
    }

    .tf-header {
        margin-bottom: 28px;
    }

    .tf-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .tf-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .tf-item {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .tf-item-icon {
        font-size: 13px;
        min-width: 18px;
    }

    .tf-item-text {
        font-size: 13px;
    }

    .tf-highlight {
        padding: 12px 16px;
        gap: 10px;
    }

    .tf-highlight-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .tf-highlight-text {
        font-size: 14px;
        text-align: justify;
    }

    .tf-conclusion {
        padding: 16px 16px;
        border-radius: 10px;
    }

    .tf-conclusion-text {
        font-size: 13px;
        text-align: justify;
    }

    .tf-conclusion-line {
        width: 40px;
        height: 2px;
        margin: 8px auto;
    }

    .tf-conclusion-highlight {
        font-size: 14px;
        text-align: justify;
    }

    .tf-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .tf-stat {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .tf-stat-num {
        font-size: 22px;
    }

    .tf-stat-label {
        font-size: 11px;
    }

    .tf-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .tf-trust-icon {
        font-size: 15px;
    }

    .tf-trust-text {
        font-size: 13px;
    }

    .tf-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .tf-title {
        font-size: 22px;
    }

    .tf-text {
        font-size: 13px;
    }

    .tf-item-text {
        font-size: 12px;
    }

    .tf-highlight-text {
        font-size: 13px;
    }

    .tf-conclusion-text {
        font-size: 12px;
    }

    .tf-conclusion-highlight {
        font-size: 13px;
    }

    .tf-stat-num {
        font-size: 18px;
    }

    .tf-stat-label {
        font-size: 10px;
    }

    .tf-trust-text {
        font-size: 12px;
    }

    .tf-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .tf-stat {
        padding: 10px 8px;
    }

    .tf-list {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .tf-item {
        padding: 8px 10px;
    }
}



/* ============================================================
     SECTION — Psychology Behind High-Converting Design (CYCLIC 1 - WHITE)
     ============================================================ */
.ps-block {
    padding: 70px 0;
}

.ps-white {
    background: #ffffff;
}

.ps-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.ps-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.ps-header {
    margin-bottom: 40px;
}

.ps-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ps-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1.2;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.ps-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     TEXT
     ============================================================ */
.ps-text {
    color: #444444;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.ps-text:last-of-type {
    margin-bottom: 20px;
}

.ps-text-final {
    margin-bottom: 24px;
}

/* ============================================================
     DECISIONS
     ============================================================ */
.ps-decisions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.ps-decision {
    background: #f5f5f5;
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.3s ease;
    cursor: default;
}

.ps-decision:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
}

.ps-decision-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #84c615;
    border-radius: 50%;
    margin-top: 6px;
    transition: background 0.3s ease;
}

.ps-decision:hover .ps-decision-dot {
    background: #ffffff;
}

.ps-decision-text {
    color: #333333;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.6;
    transition: color 0.3s ease;
}

.ps-decision:hover .ps-decision-text {
    color: #ffffff;
}

/* ============================================================
     HIGHLIGHT
     ============================================================ */
.ps-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f5faf0;
    padding: 18px 22px;
    border-radius: 12px;
    border-left: 4px solid #84c615;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.ps-highlight-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

.ps-highlight-text {
    color: #0a0a0a;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 500;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     STATS
     ============================================================ */
.ps-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.ps-stat {
    background: #f5faf0;
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #e8f0e0;
}

.ps-stat:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.ps-stat-num {
    display: block;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: #0a0a0a;
    transition: color 0.3s ease;
}

.ps-stat:hover .ps-stat-num {
    color: #ffffff;
}

.ps-stat-label {
    display: block;
    font-size: clamp(12px, 0.9vw, 14px);
    color: #555555;
    font-weight: 500;
    transition: color 0.3s ease;
}

.ps-stat:hover .ps-stat-label {
    color: #ffffff;
}

/* ============================================================
     TRUST MESSAGE
     ============================================================ */
.ps-trust {
    background: #0a0a0a;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
}

.ps-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
}

.ps-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.ps-trust:hover .ps-trust-icon {
    color: #0a0a0a;
}

.ps-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.ps-trust:hover .ps-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .ps-title {
        font-size: 38px;
    }

    .ps-stat-num {
        font-size: 28px;
    }

    .ps-stats {
        gap: 12px;
    }

    .ps-stat {
        padding: 18px 12px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .ps-block {
        padding: 50px 0;
    }

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

    .ps-text {
        font-size: 15px;
        text-align: justify;
    }

    .ps-decisions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ps-decision {
        padding: 12px 16px;
    }

    .ps-decision-text {
        font-size: 14px;
    }

    .ps-highlight {
        padding: 16px 20px;
    }

    .ps-highlight-text {
        font-size: 15px;
        text-align: justify;
    }

    .ps-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ps-stat {
        padding: 16px 12px;
    }

    .ps-stat-num {
        font-size: 24px;
    }

    .ps-stat-label {
        font-size: 12px;
    }

    .ps-trust {
        padding: 14px 20px;
    }

    .ps-trust-text {
        font-size: 14px;
    }

    .ps-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .ps-block {
        padding: 40px 0;
    }

    .ps-wrap {
        padding: 0 16px;
    }

    .ps-title {
        font-size: 26px;
    }

    .ps-header {
        margin-bottom: 28px;
    }

    .ps-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .ps-text-final {
        margin-bottom: 20px;
    }

    .ps-decisions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ps-decision {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .ps-decision-dot {
        width: 6px;
        height: 6px;
        min-width: 6px;
        margin-top: 5px;
    }

    .ps-decision-text {
        font-size: 13px;
    }

    .ps-highlight {
        padding: 14px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .ps-highlight-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .ps-highlight-text {
        font-size: 14px;
        text-align: justify;
    }

    .ps-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ps-stat {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .ps-stat-num {
        font-size: 20px;
    }

    .ps-stat-label {
        font-size: 11px;
    }

    .ps-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .ps-trust-icon {
        font-size: 15px;
    }

    .ps-trust-text {
        font-size: 13px;
    }

    .ps-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .ps-title {
        font-size: 22px;
    }

    .ps-text {
        font-size: 13px;
    }

    .ps-decision-text {
        font-size: 12px;
    }

    .ps-highlight-text {
        font-size: 13px;
    }

    .ps-stat-num {
        font-size: 18px;
    }

    .ps-stat-label {
        font-size: 10px;
    }

    .ps-trust-text {
        font-size: 12px;
    }

    .ps-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ps-stat {
        padding: 10px 8px;
    }

    .ps-decisions {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .ps-decision {
        padding: 8px 12px;
    }
}



/* ============================================================
     SECTION — Great Design Influences Human Behaviour (CYCLIC 2 - BLACK)
     ============================================================ */
.bh-block {
    padding: 70px 0;
}

.bh-dark {
    background: #0a0a0a;
}

.bh-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.bh-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.bh-header {
    margin-bottom: 40px;
}

.bh-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.bh-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.bh-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     TEXT
     ============================================================ */
.bh-text {
    color: #cccccc;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.bh-text:last-of-type {
    margin-bottom: 20px;
}

/* ============================================================
     QUESTIONS
     ============================================================ */
.bh-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.bh-question {
    background: #161616;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.bh-question:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
}

.bh-q-icon {
    color: #84c615;
    font-weight: 800;
    font-size: 16px;
    min-width: 24px;
    transition: color 0.3s ease;
}

.bh-question:hover .bh-q-icon {
    color: #0a0a0a;
}

.bh-q-text {
    color: #e0e0e0;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.bh-question:hover .bh-q-text {
    color: #0a0a0a;
}

/* ============================================================
     CONCLUSION
     ============================================================ */
.bh-conclusion {
    background: #161616;
    padding: 20px 24px;
    border-radius: 12px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #2a2a2a;
}

.bh-conclusion-text {
    color: #cccccc;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.8;
    margin: 0 0 14px 0;
    text-align: justify;
}

.bh-conclusion-line {
    width: 60px;
    height: 3px;
    background: #84c615;
    margin: 0 auto 14px auto;
    border-radius: 4px;
}

.bh-conclusion-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bh-conclusion-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

.bh-conclusion-highlight-text {
    color: #ffffff;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 600;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     STATS
     ============================================================ */
.bh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.bh-stat {
    background: #161616;
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.bh-stat:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.bh-stat-num {
    display: block;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: #84c615;
    transition: color 0.3s ease;
}

.bh-stat:hover .bh-stat-num {
    color: #0a0a0a;
}

.bh-stat-label {
    display: block;
    font-size: clamp(12px, 0.9vw, 14px);
    color: #cccccc;
    font-weight: 500;
    transition: color 0.3s ease;
}

.bh-stat:hover .bh-stat-label {
    color: #0a0a0a;
}

/* ============================================================
     TRUST MESSAGE
     ============================================================ */
.bh-trust {
    background: #161616;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
    border: 1px solid #2a2a2a;
}

.bh-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.bh-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.bh-trust:hover .bh-trust-icon {
    color: #0a0a0a;
}

.bh-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.bh-trust:hover .bh-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .bh-title {
        font-size: 38px;
    }

    .bh-stat-num {
        font-size: 30px;
    }

    .bh-stats {
        gap: 12px;
    }

    .bh-stat {
        padding: 18px 12px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .bh-block {
        padding: 50px 0;
    }

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

    .bh-text {
        font-size: 15px;
        text-align: justify;
    }

    .bh-questions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .bh-question {
        padding: 10px 14px;
    }

    .bh-q-text {
        font-size: 13px;
    }

    .bh-conclusion {
        padding: 18px 20px;
    }

    .bh-conclusion-text {
        font-size: 14px;
        text-align: justify;
    }

    .bh-conclusion-highlight-text {
        font-size: 15px;
        text-align: justify;
    }

    .bh-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .bh-stat {
        padding: 16px 12px;
    }

    .bh-stat-num {
        font-size: 26px;
    }

    .bh-stat-label {
        font-size: 12px;
    }

    .bh-trust {
        padding: 14px 20px;
    }

    .bh-trust-text {
        font-size: 14px;
    }

    .bh-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .bh-block {
        padding: 40px 0;
    }

    .bh-wrap {
        padding: 0 16px;
    }

    .bh-title {
        font-size: 26px;
    }

    .bh-header {
        margin-bottom: 28px;
    }

    .bh-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .bh-questions {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .bh-question {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .bh-q-icon {
        font-size: 14px;
        min-width: 20px;
    }

    .bh-q-text {
        font-size: 13px;
    }

    .bh-conclusion {
        padding: 16px 16px;
        border-radius: 10px;
    }

    .bh-conclusion-text {
        font-size: 13px;
        text-align: justify;
    }

    .bh-conclusion-line {
        width: 40px;
        height: 2px;
        margin: 10px auto;
    }

    .bh-conclusion-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .bh-conclusion-highlight-text {
        font-size: 14px;
        text-align: justify;
    }

    .bh-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .bh-stat {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .bh-stat-num {
        font-size: 22px;
    }

    .bh-stat-label {
        font-size: 11px;
    }

    .bh-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .bh-trust-icon {
        font-size: 15px;
    }

    .bh-trust-text {
        font-size: 13px;
    }

    .bh-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .bh-title {
        font-size: 22px;
    }

    .bh-text {
        font-size: 13px;
    }

    .bh-q-text {
        font-size: 12px;
    }

    .bh-conclusion-text {
        font-size: 12px;
    }

    .bh-conclusion-highlight-text {
        font-size: 13px;
    }

    .bh-stat-num {
        font-size: 18px;
    }

    .bh-stat-label {
        font-size: 10px;
    }

    .bh-trust-text {
        font-size: 12px;
    }

    .bh-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .bh-stat {
        padding: 10px 8px;
    }

    .bh-questions {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .bh-question {
        padding: 8px 12px;
    }
}


/* ============================================================
     SECTION — Visual Hierarchy (CYCLIC 1 - WHITE)
     ============================================================ */
.vh-block {
    padding: 70px 0;
}

.vh-white {
    background: #ffffff;
}

.vh-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.vh-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.vh-header {
    margin-bottom: 40px;
}

.vh-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.vh-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1.2;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.vh-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     TEXT
     ============================================================ */
.vh-text {
    color: #444444;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.vh-text:last-of-type {
    margin-bottom: 20px;
}

.vh-text-final {
    margin-bottom: 24px;
}

/* ============================================================
     HIGHLIGHT
     ============================================================ */
.vh-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f5faf0;
    padding: 14px 20px;
    border-radius: 10px;
    border-left: 4px solid #84c615;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.vh-highlight-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
}

.vh-highlight-text {
    color: #0a0a0a;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 600;
    margin: 0;
    text-align: justify;
}

/* ============================================================
     LIST
     ============================================================ */
.vh-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 780px;
    width: 100%;
}

.vh-item {
    background: #f5f5f5;
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: default;
}

.vh-item:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
}

.vh-item-num {
    color: #84c615;
    font-weight: 800;
    font-size: clamp(12px, 0.9vw, 14px);
    min-width: 28px;
    transition: color 0.3s ease;
}

.vh-item:hover .vh-item-num {
    color: #ffffff;
}

.vh-item-text {
    color: #333333;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.vh-item:hover .vh-item-text {
    color: #ffffff;
}

/* ============================================================
     CARDS
     ============================================================ */
.vh-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.vh-card {
    background: #0a0a0a;
    padding: 24px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.vh-card:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.vh-card-num {
    display: block;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;
    color: #84c615;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.vh-card:hover .vh-card-num {
    color: #0a0a0a;
}

.vh-card-label {
    display: block;
    font-size: clamp(14px, 1vw, 16px);
    color: #ffffff;
    font-weight: 500;
    transition: color 0.3s ease;
}

.vh-card:hover .vh-card-label {
    color: #0a0a0a;
}

/* ============================================================
     TRUST MESSAGE
     ============================================================ */
.vh-trust {
    background: #0a0a0a;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
}

.vh-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
}

.vh-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.vh-trust:hover .vh-trust-icon {
    color: #0a0a0a;
}

.vh-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.vh-trust:hover .vh-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .vh-title {
        font-size: 38px;
    }

    .vh-card-num {
        font-size: 24px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .vh-block {
        padding: 50px 0;
    }

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

    .vh-text {
        font-size: 15px;
        text-align: justify;
    }

    .vh-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vh-item {
        padding: 10px 14px;
    }

    .vh-item-text {
        font-size: 13px;
    }

    .vh-highlight-text {
        font-size: 15px;
        text-align: justify;
    }

    .vh-cards {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }

    .vh-card {
        padding: 18px 12px;
    }

    .vh-card-num {
        font-size: 22px;
    }

    .vh-card-label {
        font-size: 14px;
    }

    .vh-trust {
        padding: 14px 20px;
    }

    .vh-trust-text {
        font-size: 14px;
    }

    .vh-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .vh-block {
        padding: 40px 0;
    }

    .vh-wrap {
        padding: 0 16px;
    }

    .vh-title {
        font-size: 26px;
    }

    .vh-header {
        margin-bottom: 28px;
    }

    .vh-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .vh-text-final {
        margin-bottom: 20px;
    }

    .vh-highlight {
        padding: 12px 16px;
        gap: 10px;
    }

    .vh-highlight-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .vh-highlight-text {
        font-size: 14px;
        text-align: justify;
    }

    .vh-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .vh-item {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .vh-item-num {
        font-size: 12px;
        min-width: 24px;
    }

    .vh-item-text {
        font-size: 13px;
    }

    .vh-cards {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    .vh-card {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .vh-card-num {
        font-size: 18px;
    }

    .vh-card-label {
        font-size: 12px;
    }

    .vh-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .vh-trust-icon {
        font-size: 15px;
    }

    .vh-trust-text {
        font-size: 13px;
    }

    .vh-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .vh-title {
        font-size: 22px;
    }

    .vh-text {
        font-size: 13px;
    }

    .vh-highlight-text {
        font-size: 13px;
    }

    .vh-item-text {
        font-size: 12px;
    }

    .vh-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vh-card {
        padding: 12px 10px;
    }

    .vh-card-num {
        font-size: 16px;
    }

    .vh-card-label {
        font-size: 12px;
    }

    .vh-trust-text {
        font-size: 12px;
    }

    .vh-list {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .vh-item {
        padding: 8px 10px;
    }
}


/* ============================================================
     SECTION — White Space Creates Better Experiences (CYCLIC 2 - BLACK)
     ============================================================ */
.ws-block {
    padding: 70px 0;
}

.ws-dark {
    background: #0a0a0a;
}

.ws-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.ws-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.ws-header {
    margin-bottom: 40px;
}

.ws-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ws-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.ws-subtitle {
    color: #aaaaaa;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    max-width: 700px;
    margin: 10px auto 0 auto;
    text-align: justify;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.ws-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     TEXT
     ============================================================ */
.ws-text {
    color: #cccccc;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.9;
    margin-bottom: 24px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
    font-weight: 500;
}

/* ============================================================
     BENEFITS
     ============================================================ */
.ws-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.ws-benefit {
    background: #161616;
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.ws-benefit:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
}

.ws-benefit-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 16px;
    min-width: 22px;
    transition: color 0.3s ease;
}

.ws-benefit:hover .ws-benefit-icon {
    color: #0a0a0a;
}

.ws-benefit-text {
    color: #e0e0e0;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.ws-benefit:hover .ws-benefit-text {
    color: #0a0a0a;
}

/* ============================================================
     CONCLUSION
     ============================================================ */
.ws-conclusion {
    background: #161616;
    padding: 24px 28px;
    border-radius: 12px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #2a2a2a;
    text-align: center;
}

.ws-conclusion-text {
    color: #cccccc;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.8;
    margin: 0 0 12px 0;
    font-weight: 500;
}

.ws-conclusion-line {
    width: 60px;
    height: 3px;
    background: #84c615;
    margin: 0 auto 12px auto;
    border-radius: 4px;
}

.ws-conclusion-highlight {
    color: #ffffff;
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 600;
    margin: 0;
}

/* ============================================================
     PRINCIPLES CARDS
     ============================================================ */
.ws-principles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 100%;
    margin-bottom: 24px;
}

.ws-principle {
    background: #161616;
    padding: 20px 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.ws-principle:hover {
    background: #84c615;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.ws-principle-icon {
    display: block;
    font-size: clamp(24px, 2.5vw, 32px);
    color: #84c615;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.ws-principle:hover .ws-principle-icon {
    color: #0a0a0a;
}

.ws-principle-label {
    display: block;
    font-size: clamp(14px, 1vw, 16px);
    color: #e0e0e0;
    font-weight: 600;
    transition: color 0.3s ease;
}

.ws-principle:hover .ws-principle-label {
    color: #0a0a0a;
}

/* ============================================================
     TRUST MESSAGE
     ============================================================ */
.ws-trust {
    background: #161616;
    padding: 18px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
    border: 1px solid #2a2a2a;
}

.ws-trust:hover {
    background: #84c615;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(132, 198, 21, 0.2);
    border-color: #84c615;
}

.ws-trust-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
    transition: color 0.3s ease;
}

.ws-trust:hover .ws-trust-icon {
    color: #0a0a0a;
}

.ws-trust-text {
    color: #ffffff;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.ws-trust:hover .ws-trust-text {
    color: #0a0a0a;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .ws-title {
        font-size: 38px;
    }

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

    .ws-principles {
        gap: 12px;
    }

    .ws-principle {
        padding: 18px 12px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .ws-block {
        padding: 50px 0;
    }

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

    .ws-subtitle {
        font-size: 15px;
        text-align: justify;
    }

    .ws-text {
        font-size: 16px;
        text-align: justify;
    }

    .ws-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ws-benefit {
        padding: 12px 16px;
    }

    .ws-benefit-text {
        font-size: 14px;
    }

    .ws-conclusion {
        padding: 20px 20px;
    }

    .ws-conclusion-text {
        font-size: 16px;
    }

    .ws-conclusion-highlight {
        font-size: 17px;
    }

    .ws-principles {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ws-principle {
        padding: 16px 12px;
    }

    .ws-principle-icon {
        font-size: 24px;
    }

    .ws-principle-label {
        font-size: 14px;
    }

    .ws-trust {
        padding: 14px 20px;
    }

    .ws-trust-text {
        font-size: 14px;
    }

    .ws-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .ws-block {
        padding: 40px 0;
    }

    .ws-wrap {
        padding: 0 16px;
    }

    .ws-title {
        font-size: 26px;
    }

    .ws-header {
        margin-bottom: 28px;
    }

    .ws-subtitle {
        font-size: 14px;
        text-align: justify;
    }

    .ws-text {
        font-size: 15px;
        text-align: justify;
        margin-bottom: 20px;
    }

    .ws-benefits {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ws-benefit {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .ws-benefit-icon {
        font-size: 14px;
        min-width: 18px;
    }

    .ws-benefit-text {
        font-size: 13px;
    }

    .ws-conclusion {
        padding: 16px 16px;
        border-radius: 10px;
    }

    .ws-conclusion-text {
        font-size: 14px;
    }

    .ws-conclusion-line {
        width: 40px;
        height: 2px;
        margin: 10px auto;
    }

    .ws-conclusion-highlight {
        font-size: 15px;
    }

    .ws-principles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ws-principle {
        padding: 14px 10px;
        border-radius: 10px;
    }

    .ws-principle-icon {
        font-size: 20px;
    }

    .ws-principle-label {
        font-size: 13px;
    }

    .ws-trust {
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
    }

    .ws-trust-icon {
        font-size: 15px;
    }

    .ws-trust-text {
        font-size: 13px;
    }

    .ws-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .ws-title {
        font-size: 22px;
    }

    .ws-subtitle {
        font-size: 13px;
    }

    .ws-text {
        font-size: 14px;
    }

    .ws-benefit-text {
        font-size: 12px;
    }

    .ws-conclusion-text {
        font-size: 13px;
    }

    .ws-conclusion-highlight {
        font-size: 14px;
    }

    .ws-principles {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ws-principle {
        padding: 10px 8px;
    }

    .ws-principle-icon {
        font-size: 18px;
    }

    .ws-principle-label {
        font-size: 12px;
    }

    .ws-trust-text {
        font-size: 12px;
    }

    .ws-benefits {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .ws-benefit {
        padding: 8px 12px;
    }
}



/* ============================================================
     SECTION 22 — User Interface Design (UI) (CYCLIC 2 - BLACK)
     ============================================================ */
.ui-block {
    padding: 70px 0;
}

.ui-dark {
    background: #0a0a0a;
}

.ui-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.ui-inner {
    width: 100%;
}

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

/* ============================================================
     HEADER
     ============================================================ */
.ui-header {
    margin-bottom: 40px;
}

.ui-badge {
    display: inline-block;
    background: #84c615;
    color: #0a0a0a;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ui-title {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.ui-title span {
    color: #84c615;
}

/* ============================================================
     ALL CONTENT CENTERED
     ============================================================ */
.ui-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ============================================================
     TEXT
     ============================================================ */
.ui-text {
    color: #cccccc;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: justify;
    max-width: 780px;
    width: 100%;
}

.ui-text-sub {
    color: #84c615;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 16px;
    text-align: center;
}

/* ============================================================
     GRID
     ============================================================ */
.ui-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    max-width: 780px;
    width: 100%;
}

.ui-item {
    background: #161616;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #2a2a2a;
}

.ui-item:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
}

.ui-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    min-width: 20px;
    transition: color 0.3s ease;
}

.ui-item:hover .ui-check {
    color: #0a0a0a;
}

.ui-item-text {
    color: #e0e0e0;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.ui-item:hover .ui-item-text {
    color: #0a0a0a;
}

/* ============================================================
     ACCENT BOX
     ============================================================ */
.ui-accent {
    background: #84c615;
    color: #0a0a0a;
    padding: 20px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 18px);
    transition: all 0.4s ease;
    cursor: default;
    max-width: 780px;
    width: 100%;
    text-align: center;
}

.ui-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #ffffff;
}

.ui-accent p {
    margin: 0;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .ui-title {
        font-size: 38px;
    }

    .ui-grid {
        gap: 8px;
    }

    .ui-item {
        padding: 10px 14px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .ui-block {
        padding: 50px 0;
    }

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

    .ui-text {
        font-size: 15px;
        text-align: justify;
    }

    .ui-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ui-item {
        padding: 10px 14px;
    }

    .ui-item-text {
        font-size: 13px;
    }

    .ui-accent {
        padding: 16px 22px;
        font-size: 15px;
    }

    .ui-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .ui-block {
        padding: 40px 0;
    }

    .ui-wrap {
        padding: 0 16px;
    }

    .ui-title {
        font-size: 26px;
    }

    .ui-header {
        margin-bottom: 28px;
    }

    .ui-text {
        font-size: 14px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .ui-text-sub {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .ui-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .ui-item {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .ui-check {
        font-size: 13px;
        min-width: 18px;
    }

    .ui-item-text {
        font-size: 13px;
    }

    .ui-accent {
        padding: 14px 18px;
        font-size: 14px;
        border-radius: 10px;
    }

    .ui-accent:hover {
        transform: scale(1.01);
    }

    .ui-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .ui-title {
        font-size: 22px;
    }

    .ui-text {
        font-size: 13px;
    }

    .ui-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .ui-item {
        padding: 8px 10px;
    }

    .ui-item-text {
        font-size: 12px;
    }

    .ui-check {
        font-size: 12px;
        min-width: 16px;
    }

    .ui-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .ui-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}



/* ============================================================
     SECTION 23 — Mobile-First Design (CYCLIC 1 - WHITE)
     ============================================================ */
.mf-block {
    padding: 70px 0;
}

.mf-white {
    background: #ffffff;
}

.mf-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
     GRID — Left Content + Right Image
     ============================================================ */
.mf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* ============================================================
     LEFT COLUMN — CONTENT
     ============================================================ */
.mf-content {
    width: 100%;
}

.mf-header {
    margin-bottom: 16px;
}

.mf-badge {
    display: inline-block;
    background: #84c615;
    color: #ffffff;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mf-title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1.2;
}

.mf-title span {
    color: #84c615;
}

.mf-text {
    color: #444444;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.9;
    margin-bottom: 20px;
    text-align: justify;
}

/* ============================================================
     GRID ITEMS
     ============================================================ */
.mf-grid-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.mf-item {
    background: #f5f5f5;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid #e8e8e8;
}

.mf-item:hover {
    background: #84c615;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(132, 198, 21, 0.15);
    border-color: #84c615;
}

.mf-check {
    color: #84c615;
    font-weight: 700;
    font-size: 14px;
    min-width: 20px;
    transition: color 0.3s ease;
}

.mf-item:hover .mf-check {
    color: #ffffff;
}

.mf-item-text {
    color: #333333;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.mf-item:hover .mf-item-text {
    color: #ffffff;
}

/* ============================================================
     ACCENT BOX
     ============================================================ */
.mf-accent {
    background: #84c615;
    color: #ffffff;
    padding: 18px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(15px, 1.1vw, 17px);
    transition: all 0.4s ease;
    cursor: default;
    text-align: center;
}

.mf-accent:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 10px 45px rgba(132, 198, 21, 0.35);
    background: #0a0a0a;
    color: #84c615;
}

.mf-accent p {
    margin: 0;
}

/* ============================================================
     RIGHT COLUMN — IMAGE
     ============================================================ */
.mf-image-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.mf-img-card {
    position: relative;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.mf-img-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(132, 198, 21, 0.15);
}

.mf-img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.4s ease;
}

.mf-img-card:hover .mf-img {
    transform: scale(1.03);
}

/* Image Overlay */
.mf-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 20px 16px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mf-img-icon {
    color: #84c615;
    font-weight: 700;
    font-size: 18px;
}

.mf-img-text {
    color: #ffffff;
    font-size: clamp(16px, 1.3vw, 22px);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Image Badge */
.mf-img-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mf-img-badge span:first-child {
    color: #84c615;
}

/* Image Accent */
.mf-img-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: #84c615;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.mf-img-card:hover .mf-img-accent {
    opacity: 0.8;
    width: 90px;
    height: 90px;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .mf-grid {
        gap: 40px;
    }

    .mf-title {
        font-size: 34px;
    }

    .mf-img-card {
        max-width: 450px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .mf-block {
        padding: 50px 0;
    }

    .mf-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .mf-text {
        font-size: 15px;
        text-align: justify;
    }

    .mf-grid-items {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mf-item {
        padding: 10px 14px;
    }

    .mf-item-text {
        font-size: 13px;
    }

    .mf-accent {
        padding: 16px 20px;
        font-size: 15px;
    }

    .mf-img-card {
        max-width: 100%;
    }

    .mf-img-overlay {
        padding: 18px 16px 12px 16px;
    }

    .mf-img-text {
        font-size: 18px;
    }

    .mf-img-accent {
        width: 60px;
        height: 60px;
    }

    .mf-img-card:hover .mf-img-accent {
        width: 70px;
        height: 70px;
    }

    .mf-badge {
        font-size: 11px;
        padding: 4px 14px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .mf-block {
        padding: 40px 0;
    }

    .mf-wrap {
        padding: 0 16px;
    }

    .mf-grid {
        gap: 24px;
    }

    .mf-title {
        font-size: 26px;
    }

    .mf-text {
        font-size: 14px;
        text-align: justify;
    }

    .mf-grid-items {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .mf-item {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .mf-check {
        font-size: 13px;
        min-width: 18px;
    }

    .mf-item-text {
        font-size: 13px;
    }

    .mf-accent {
        padding: 14px 16px;
        font-size: 14px;
        border-radius: 10px;
    }

    .mf-accent:hover {
        transform: scale(1.01);
    }

    .mf-img-card {
        border-radius: 12px;
    }

    .mf-img-overlay {
        padding: 14px 12px 10px 12px;
    }

    .mf-img-text {
        font-size: 15px;
    }

    .mf-img-icon {
        font-size: 15px;
    }

    .mf-img-accent {
        width: 50px;
        height: 50px;
    }

    .mf-img-card:hover .mf-img-accent {
        width: 60px;
        height: 60px;
    }

    .mf-img-badge {
        top: 10px;
        left: 10px;
        padding: 4px 12px;
        font-size: 10px;
    }

    .mf-badge {
        font-size: 10px;
        padding: 3px 12px;
        margin-bottom: 8px;
    }
}

/* Extra Small (320px and below) */
@media (max-width: 360px) {
    .mf-title {
        font-size: 22px;
    }

    .mf-text {
        font-size: 13px;
    }

    .mf-grid-items {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .mf-item {
        padding: 8px 10px;
    }

    .mf-item-text {
        font-size: 12px;
    }

    .mf-check {
        font-size: 12px;
        min-width: 16px;
    }

    .mf-accent {
        padding: 12px 14px;
        font-size: 13px;
    }

    .mf-img-text {
        font-size: 13px;
    }

    .mf-img-icon {
        font-size: 13px;
    }

    .mf-badge {
        font-size: 9px;
        padding: 3px 10px;
    }
}