:root {
        --navy: #0b1120;
        --navy2: #111827;
        --navy3: #060d1f;
        --blue: #075DAC;
        --bluel: #60a5fa;
        --bluep: #eff6ff;
        --bluem: #dbeafe;
        --text: #1e293b;
        --muted: #64748b;
        --mutedd: #94a3b8;
        --border: #e2e8f0;
        --gray: #f8fafc;
        --gray2: #f1f5f9;
        --green: #16a34a;
        --amber: #d97706;
        --red: #dc2626;
        --card: #1e3a5f;
    }

    /* ── HERO ── */
    .hero {
		position: relative;
        background: url("https://www.solulab.com/wp-content/uploads/2026/07/Hero-banner-Best-Crypto-MLM-Software-Development-Company-1-scaled.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
        padding: 40px;
        overflow: hidden;
    }

    .hero-inner {
		position: relative;
		z-index: 2;
        max-width: 1280px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 55% 45%;
        align-items: center;
    }

    .hero-inner>div {
        max-width: 600px;
    }

    .hero h1 {
        font-size: 36px;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .hero h1 em {
        color: var(--bluel);
        font-style: normal;
    }

    .hero-sub {
        font-size: 18px;
        line-height: 1.7;
        color: #fff;
        margin-bottom: 32px;
    }

    .hero-ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .btn-slblue {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        background: var(--blue);
        color: #fff;
        text-decoration: none;

        padding: 14px 28px;
        border: 1px solid #fff;
        border-radius: 999px;

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

        min-width: 220px;
    }

    .btn-slblue:hover {
        cursor: pointer;
        background: transparent;
    }

    @media (max-width: 992px) {

        .hero {
            background-position: center bottom;

            background-size: cover;

            padding: 40px 0 60px;
        }
		
		.hero::before {
			content: "";

            position: absolute;

            inset: 0;

            background: linear-gradient(rgba(10, 15, 30, 0.85), rgba(10, 15, 30, 0.85));

            z-index: 1
		}

        .hero-inner {
            grid-template-columns: 1fr;
        }

        .hero-inner>div {
            max-width: 100%;
        }

        .hero h1 {
            font-size: 32px;
        }
    }

    @media (max-width: 576px) {

        .hero {
            background-position: 80% center;
            padding: 48px 20px;
        }

        .hero h1 {
            font-size: 28px;
        }

        .hero-sub {
            font-size: 16px;
        }

        .btn-slblue {
            width: 100%;
            min-width: unset;
        }
    }

    .trust-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 16px;
        color: var(--mutedd)
    }

    .trust-check {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #1F94FF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
    }

    .trust-check svg,
    .trust-check i {
        width: 10px;
        height: 10px;
    }

    /* ── SOCIAL PROOF ── */
    .sl-social-proof {
        background: #fff;
    }

    .sl-social-proof__inner {

        display: flex;
        gap: 40px;
        align-items: stretch;
    }

    .sl-social-proof__stats {
        display: flex;
        flex-direction: row;
        text-align: center;
        width: 100%;
    }

    .sl-social-proof__stat {
        flex-grow: 3;
        padding: 40px 0;
    }

    .sl-social-proof__stat:nth-child(2n) {
        border-right: none;
    }

    .sl-social-proof__stat:nth-child(n+3) {
        border-bottom: none;
    }

    .sl-social-proof__stat-number {
        font-size: 52px;
        font-weight: 800;
        color: #075DAC;
        line-height: 1;
        margin-bottom: 14px;
    }

    .sl-social-proof__stat-label {
        font-size: 17px;
        font-weight: 600;
        color: #075DAC;
        line-height: 1.35;
        margin: 0;
    }

    .sl-social-proof__testimonial {
        width: 560px;
        flex-shrink: 0;
        background: linear-gradient(145deg, #1272cc 0%, #075DAC 60%, #064f96 100%);
        border-radius: 20px;
        padding: 36px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    /* Decorative circle */
    .sl-social-proof__testimonial::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .sl-social-proof__testimonial::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: -40px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

    .sl-social-proof__quote-icon {
        opacity: 0.55;
        position: relative;
        z-index: 1;
    }

    .sl-social-proof__quote-text {
        font-size: 16px;
        line-height: 1.75;
        color: #fff;
        margin: 0;
        flex: 1;
        position: relative;
        z-index: 1;
    }

    .sl-social-proof__attribution {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 4px;
        position: relative;
        z-index: 1;
    }

    .sl-social-proof__attribution-logo {
        width: 46px;
        height: 46px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }

    .sl-social-proof__attribution-name {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.01em;
    }

    .sl-social-proof__media-wrap {
        border-top: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
    }

    .sl-social-proof__media {

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .sl-social-proof__media-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        padding: 16px 32px;
        border-radius: 8px;

    }

    @media (max-width: 900px) {
        .sl-social-proof__inner {
            flex-direction: column;
            padding: 0 20px 40px;
        }

        .sl-social-proof__testimonial {
            width: 100%;
        }

        .sl-social-proof__media {
            padding: 24px 20px;
            gap: 24px;
        }

        .sl-social-proof__stat-number {
            font-size: 40px;
        }
    }

    @media (max-width: 480px) {
        .sl-social-proof__stats {
            flex-direction: column;
            flex-grow: 3;

        }

       .sl-social-proof__stat {
            border-right: none;
            /* border-bottom: 1px solid #e2e8f0; */
        } */

         .sl-social-proof__stat:last-child {
            border-bottom: none;
        }
    }

    .sl-header {
        margin: 0 auto 60px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .sl-header h2 {
        margin: 0 auto 20px;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;

        color: #0b1120;

        position: relative;
        display: inline-block;
    }

    .sl-header h2::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        margin: 15px auto 0;
        background: #075DAC;
    }

    .sl-header p {
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.7;
        text-align: center;
        color: var(--color-slblack);
    }


    .section {
        background-color: var(--navy2);
        display: flex;
        align-items: center;
        gap: 60px;
        max-width: 1300px;
        margin: 0 auto;
        padding: 60px 40px;
        min-height: 60vh;
        border-radius: 0.4rem;
    }

    .section2 {
        background-color: var(--navy2);
        display: flex;
        align-items: center;
        gap: 60px;
        max-width: 1300px;
        margin: 80px auto;
        padding: 60px 40px;
        min-height: 60vh;
        border-radius: 0.4rem;
    }

    /* ---------- LEFT: static content ---------- */
    .left {
        flex: 1 1 45%;
    }

    .left h2 {
        color: #ffffff;
        /* font-size: 42px; */
        line-height: 1.2;
        font-weight: 800;
        margin: 0 0 24px;
    }

    .divider {
        width: 60px;
        height: 3px;
        background: var(--blue);
        margin-bottom: 24px;
    }

    .left p {
        color: rgba(255, 255, 255, 0.75);
        font-size: 16px;
        line-height: 1.75;
        margin: 0 0 32px;
    }

    .cta-btn {
        display: inline-block;
        background: var(--blue);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        padding: 16px 34px;
        border-radius: 999px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: transform .2s ease, background .2s ease;
    }

    .cta-btn:hover {
        transform: translateY(-3px);
        background: #094f8f;
    }

    /* ---------- RIGHT: user-scrollable card column ---------- */
    .right {
        flex: 1 1 45%;
        height: 480px;
        /* fixed viewport height for the panel */
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        /* no scroll-behavior/snap here on purpose — the panel should move
       exactly as much (and only when) the user scrolls it, never on its own */

        /* fade the top and bottom edges so cards clip softly instead of a hard cut line */
/*         -webkit-mask-image: linear-gradient(to bottom,
                transparent 0%,
                black 10%,
                black 90%,
                transparent 100%);
        mask-image: linear-gradient(to bottom,
                transparent 0%,
                black 10%,
                black 90%,
                transparent 100%); */

        /* thin, quiet scrollbar instead of the browser default */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    }

    .right::-webkit-scrollbar {
        width: 6px;
    }

    .right::-webkit-scrollbar-track {
        background: transparent;
    }

    .right::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 999px;
    }

    .right::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.55);
    }

    .track {
        display: flex;
        flex-direction: column;
        gap: 22px;
        /* breathing room so the fade mask doesn't clip the first/last card's content */
        padding: 40px 4px;
    }

    .card {
        background: var(--color-sloffwhite);
        border: 1px solid var(--blue);
        border-radius: 14px;
        padding: 26px 30px;
        flex-shrink: 0;
    }

    .card h3 {
        margin: 0 0 10px;
        color: var(--color-slblack);
        font-size: 22px;
        font-weight: 700;
    }

    .card p {
        margin: 0;
        color: #33415c;
        font-size: 15px;
        line-height: 1.65;
    }

    .card a {
        color: var(--blue);
        font-weight: 600;
        text-decoration: none;
    }

    @media (max-width: 900px) {

        .section,
        .section2 {
            flex-direction: column;
            padding: 60px 24px;
        }

        .left h2 {
            font-size: 32px;
        }

        .right {
            width: 100%;
            height: 400px;
        }
    }

    /* ── GRID SYSTEM ── */
    .sl-grid-1 {
        display: grid;
        /* Desktop: 3 columns */
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* ── CARD STYLING ── */
    .card-1-wrapper {
        position: relative;
        background: #ffffff;
        border-radius: 12px;
        padding: 40px 30px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #f1f5f9;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 8.107px;
        background: linear-gradient(101deg, rgba(255, 255, 255, 0.08) 58.83%, rgba(7, 93, 172, 0.08) 128.72%), #FFF;
        overflow: hidden;
    }

    .card-1-wrapper::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, #075DAC 0%, rgba(255, 255, 255, 0) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;

        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;

    }

    .card-1-wrapper:hover::before {
        opacity: 1;
    }

    .card-1-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 28px;

        margin: 24px 0 0;
        padding: 0;

        list-style: none;
    }

    .card-1-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;

        color: #0f172a;

        font-size: 15px;
        line-height: 1.5;
        font-weight: 600;
    }

    .card-1-list li::before {
        content: "✓";

        flex-shrink: 0;

        width: 22px;
        height: 22px;

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

        margin-top: 1px;

        border-radius: 50%;

        border: 1.5px solid #075dac;

        color: #075dac;

        font-size: 11px;
        font-weight: 700;

        background: #f4f9ff;
    }

    @media(max-width:768px) {

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

    }


    .card-1-wrapper svg {
        margin-bottom: 24px;
        width: 48px;
        height: 48px;
    }
    .card-1-wrapper img  {
        margin-bottom: 24px;
        width: 48px;
        height: 48px;
        filter: invert(18%) sepia(100%) saturate(2000%) hue-rotate(200deg) brightness(65%) contrast(110%);


    }

    .card-1-wrapper h3 {
        font-size: 18px;
        font-weight: 700;
        color: #0b1120;
        margin-bottom: 12px;
    }

    .card-1-wrapper p {
        font-size: 14px;
        color: var(--color-slblack);
        line-height: 1.6;
        /* Clamping text if it gets too long, matching the image look */

        overflow: hidden;
    }

    /* ── RESPONSIVE OVERRIDES ── */

    /* Tablet: 2 Columns */
    @media (max-width: 992px) {
        .sl-grid-1 {
            grid-template-columns: repeat(2, 1fr);
        }

        .sl-header h2 {
            font-size: 28px;
        }
    }

    /* Mobile: 1 Column */
    @media (max-width: 640px) {
        .sl-wrapper {
            padding: 50px 20px;
        }

        .sl-grid-1 {
            grid-template-columns: 1fr;
        }

        .sl-header h2 {
            font-size: 24px;
        }

        .card-1-wrapper {
            padding: 30px 20px;
            align-items: center;
            text-align: center;
        }
    }

    /* Responsive Rules for Mobile and Tablet */
    @media (max-width: 991px) {
        .sl-cta-banner__container {
            flex-direction: column;
            text-align: center;
        }

        .sl-cta-banner__content {
            max-width: 100%;
        }

        /* Center the list on mobile */
        .sl-cta-banner__list-item {
            justify-content: center;
            padding-left: 0;
        }

        /* Adjust checkmark position for centered text */
        .sl-check-icon {
            position: relative;
            margin-right: 12px;
        }

        .sl-cta-banner__image {
            justify-content: center;
            margin-top: 40px;
            width: 100%;
        }
    }

    @media (max-width: 480px) {
        .sl-cta-banner {
            padding: 48px 16px;
        }

        .sl-cta-banner__title {
            font-size: 26px;
        }

        .sl-cta-banner__desc {
            font-size: 14px;
        }

        .sl-cta-banner__btn {
            width: 100%;
            text-align: center;
            padding: 14px 20px;
        }
    }

    .sl-portfolio__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 100px;
        margin-bottom: 150px;
    }

    .sl-portfolio__content {
        width: 500px;
        flex-shrink: 1;
    }

    .sl-portfolio__content li {
        position: relative;
        padding-left: 18px;
        margin-bottom: 6px;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-slblack);
    }

    .sl-portfolio__content li::before {
        content: "•";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--color-slblack);
        font-size: 18px;
        font-weight: 700;
    }

    .sl-portfolio__content a {
        text-decoration: none;
        padding: 0;
        border-radius: 0;
        background: none;
        font-size: 16px;
        text-decoration: none;
        transition: 0.3s;
    }

    .sl-portfolio__content a:hover {
        background: none;
    }

    /*.sl-portfolio__content span {
        font-size: 18px;
        font-weight: 500;
        color: #223547;
        margin-bottom: 8px;
        display: block;
    }

    .sl-portfolio__content h3 {
        font-size: 24px;
        font-weight: 700;
        color: #223547;
        font-style: italic;
        line-height: 1.25;
        letter-spacing: -0.2px;
        margin-bottom: 14px;
    }

    .sl-portfolio__content p {
        font-size: 16px;
        font-weight: 400;
        color: var(--color-slblack);
        line-height: 1.7;
        margin-bottom: 14px;
    } */

    .sl-portfolio__image {
        width: 800px;
    }

    .sl-portfolio__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    @media (max-width: 1399px) {
        .sl-portfolio__row {
            gap: 80px;
        }

    }

    @media (max-width: 992px) {
        .sl-portfolio__row {
            flex-direction: column;
            gap: 40px;
            margin-bottom: 80px;
        }

        .sl-portfolio__content,
        .sl-portfolio__image {
            width: 100%;
        }
    }

    @media (max-width: 576px) {
        .sl-portfolio__content span {
            font-size: 16px;
        }

        .sl-portfolio__content h3 {
            font-size: 20px;
        }

        .sl-portfolio__content p {
            font-size: 14px;
        }

        .sl-btn {
            padding: 14px 28px;
            font-size: 14px;
        }
    }



    .sl-why-title {
        font-size: 32px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 12px;
        position: relative;
    }

    .sl-why-title::after {
        content: "";
        width: 140px;
        height: 3px;
        background: #075dac;
        display: block;
        margin: 10px auto 0;
        border-radius: 2px;
    }

    @media (max-width: 640px) {
        .sl-why-title {
            font-size: 24px;
        }
    }

    .sl-industry-title {
        max-width: 900px;
        margin: 0 auto;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.3;
        color: #1f2937;
    }

    .sl-industry-line {
        width: 80px;
        height: 3px;
        background: #075dac;
        margin: 14px auto 18px;
        border-radius: 2px;
    }

    .sl-industry-desc {
        max-width: 1200px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-slblack);
    }

    @media (max-width: 640px) {
        .sl-industry-title {
            font-size: 24px;
        }
    }


    .sl-grid-0 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .card-0-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 30px;
        background: linear-gradient(101deg, rgba(255, 255, 255, 0.08) 58.83%, rgba(7, 93, 172, 0.08) 128.72%), #FFF;
        color: #000000;
        border-radius: 12px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        overflow: hidden;
    }

    .card-0-wrapper::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, #075DAC 0%, rgba(255, 255, 255, 0) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .card-0-wrapper:hover {
        transform: translateY(-5px);
        border-radius: 8.107px;
        border: 0.811px solid #075DAC;
        background: linear-gradient(101deg, rgba(255, 255, 255, 0.26) 58.83%, rgba(7, 93, 172, 0.26) 128.72%), #FFF;
        box-shadow: 0 4px 33px 0 rgba(34, 53, 71, 0.08);


    }

    .card-0-wrapper:hover::before {
        opacity: 1;
    }

    .card-0-wrapper img {
        margin-bottom: 24px;
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: invert(18%) sepia(100%) saturate(2000%) hue-rotate(200deg) brightness(65%) contrast(110%);
    }

    .card-0-wrapper h3 {
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }

    .card-0-wrapper p {
        font-size: 14px;
        text-align: center;
    }

    @media (max-width: 1200px) {
        .sl-grid-0 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 900px) {
        .sl-grid-0 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 560px) {
        .sl-grid-0 {
            grid-template-columns: 1fr;
        }

        .card-0-wrapper {
            padding: 30px 20px;
        }
    }

    .whitelabel-crypto {
        background: #F1F5F9;
    }

    .whitelabel-crypto__content {
        display: flex;
        align-items: center;
        gap: 60px;
        max-width: 1300px;
        margin: 0 auto;
        padding: 50px 40px;
        min-height: 60vh;
    }

    .whitelabel-crypto__content p {
        color: var(--color-slblack);
        font-size: 16px;
        line-height: 1.75;
        margin: 0 0 32px;
    }

    .whitelabel-crypto__content .card {
        padding: 20px 28px;
        transition: all 0.5s ease;
    }

    .whitelabel-crypto__content .card:hover {
        background:

            linear-gradient(135deg,

                rgba(11, 26, 58, 0.98),

                rgba(30, 58, 95, 0.92));

        box-shadow: inset 0 0 25px rgba(96, 165, 250, 0.08);
        transform: scale(0.97);
        border-color: #3b82f6;

    }

    .whitelabel-crypto__content .card:hover li {
        color: var(--color-sloffwhite);
    }

    .whitelabel-crypto__content .card li {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-slblack);
        list-style-type: disc;
    }

    .whitelabel-crypto__content li::marker {
        color: #075dac;
    }

    .left-content {
        flex: 1 1 45%;
    }

    @media (max-width: 900px) {
        .whitelabel-crypto__content {
            flex-direction: column;
            padding: 18px 18px;
        }

        .left h2 {
            font-size: 32px;
        }

        .right {
            width: 100%;
            height: 400px;
        }
    }

    /*sl-cta section*/
    .sl-cta {
        position: relative;
        overflow: hidden;

        margin-top: 56px;

        padding: 60px;

        background: #061a67;
    }

    /* BG IMAGE */
    .sl-cta__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 1;
        opacity: .9;
    }


    /* CONTAINER */
    .sl-cta__container {
        position: relative;
        z-index: 3;

        max-width: 1280px;
        min-height: 400px;
        margin: 0 auto;
        padding: 0 24px;

        display: flex;
        align-items: center;
    }

    /* CONTENT */
    .sl-cta__content {
        max-width: 640px;
    }

    /* TITLE */
    .sl-cta__title {
        margin: 0 0 24px;
        color: #ffffff;

        font-size: 38px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: -1.6px;
    }

    /* DESCRIPTION */
    .sl-cta__desc {
        margin: 0 0 28px;
        max-width: 620px;
        color: #fff;
        font-size: 20px;
        line-height: 1.7;
        font-weight: 400;
    }

    /* FEATURES */
    .sl-cta__features {
        display: flex;
        flex-direction: column;
        gap: 18px;

        margin-bottom: 34px;
    }

    /* FEATURE ITEM */
    .sl-cta__feature {
        display: flex;
        align-items: center;
        gap: 14px;

        color: #ffffff;

        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
    }

    /* SVG ICON */
    .sl-cta__feature-icon {
        flex-shrink: 0;

        width: 22px;
        height: 22px;

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

    .sl-cta__feature-icon svg {
        width: 22px;
        height: 22px;
    }

    /* BUTTON */
    .sl-cta__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 54px;
        padding: 14px 28px;

        border-radius: 999px;

        background: var(--blue);

        color: #ffffff;

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

        text-decoration: none;

        transition: all .3s ease;
    }

    .sl-cta__btn:hover {
        background: #0a66c8;
        transform: translateY(-2px);
    }

    /* TABLET */
    @media (max-width:1024px) {

        .sl-cta {
            padding: 64px 0;
        }

        .sl-cta__title {
            font-size: 44px;
        }

        .sl-cta__desc {
            font-size: 18px;
        }
    }

    /* MOBILE */
    @media (max-width:768px) {

        .sl-cta {
            padding: 52px 0;
        }

        .sl-cta__bg {
            object-position: 70% center;
        }

        .sl-cta::before {
            background:
                linear-gradient(180deg,
                    rgba(6, 26, 103, .95) 0%,
                    rgba(6, 26, 103, .88) 100%);
        }

        .sl-cta__container {
            padding: 0 18px;
        }

        .sl-cta__title {
            font-size: 34px;
            line-height: 1.2;
            letter-spacing: -1px;
        }

        .sl-cta__desc {
            font-size: 16px;
            line-height: 1.7;
        }

        .sl-cta__features {
            gap: 14px;
        }

        .sl-cta__feature {
            font-size: 16px;
            align-items: flex-start;
        }

        .sl-cta__btn {
            width: 100%;
        }
    }

    @media (max-width: 480px) {
        .sl-cta {
            margin-top: 32px;
            padding: 40px 0;
        }

        .sl-cta__title {
            font-size: 26px;
            letter-spacing: -0.5px;
        }

        .sl-cta__desc {
            font-size: 15px;
        }

        .sl-cta__feature {
            font-size: 14px;
        }
    }

    .sl-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 10px;
    }

    .card-2-wrapper {
        position: relative;
        background: #ffffff;
        border-radius: 16px;
        padding: 40px 30px;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        border: 2px solid #f1f5f9;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .card-2-wrapper::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, #075DAC 0%, rgba(255, 255, 255, 0) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .card-2-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(34, 53, 71, 0.08);
        border-color: transparent;
    }

    .card-2-wrapper:hover::before {
        opacity: 1;
    }

    .card-2-wrapper img,
    .card-2-wrapper svg {
        margin-bottom: 24px;
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: invert(18%) sepia(100%) saturate(2000%) hue-rotate(200deg) brightness(65%) contrast(110%);
    }

    .card-2-wrapper h3 {
        font-size: 20px;
        font-weight: 700;
        color: #0b1120;
        margin-bottom: 16px;
        line-height: 1.3;
        text-align: center;
    }

    .card-2-wrapper p {
        font-size: 15px;
        color: var(--color-slblack, #475569);
        line-height: 1.7;
        margin: 0;
        text-align: center;
    }

    @media (max-width: 640px) {
        .sl-grid-2 {
            grid-template-columns: 1fr;
        }

        .card-2-wrapper {
            padding: 30px 20px;
        }
    }


    .sl-blockchain-platforms {
        position: relative;
        padding: 100px 0;
        background: radial-gradient(circle at top left, rgba(7, 93, 172, 0.05), transparent 30%), radial-gradient(circle at bottom right, rgba(7, 93, 172, 0.04), transparent 30%), #ffffff;
        overflow: hidden;
    }

    .sl-blockchain-platforms__container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .sl-blockchain-platforms__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .sl-blockchain-platforms__card {
        width: calc(12.5% - 18px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 150px;
        padding: 20px 12px;
        border-radius: 22px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid rgba(7, 93, 172, 0.08);
        transition: all .35s ease;
        text-align: center;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .sl-blockchain-platforms__card:hover {
        transform: translateY(-5px);
        border-color: rgba(7, 93, 172, 0.14);
        box-shadow: 0 20px 40px rgba(7, 93, 172, 0.08);
    }

    .sl-blockchain-platforms__card img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        margin-bottom: 16px;
        transition: .35s ease;
    }

    .sl-blockchain-platforms__card h3 {
        margin: 0;
        color: #111827;
        font-size: 15px;
        line-height: 1.4;
        font-weight: 700;
    }

    .sl-blockchain-platforms__card p {
        margin: 0;
        color: #111827;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 500;
    }

    @media (max-width: 1200px) {
        .sl-blockchain-platforms__card {
            width: calc(25% - 15px);
        }
    }

    @media (max-width: 768px) {
        .sl-blockchain-platforms__card {
            width: calc(33.33% - 14px);
        }
    }

    @media (max-width: 480px) {
        .sl-blockchain-platforms__card {
            width: calc(50% - 10px);
        }
    }

    @media (max-width: 360px) {
        .sl-blockchain-platforms {
            padding: 60px 0;
        }

        .sl-blockchain-platforms__card {
            width: 100%;
            min-height: 120px;
        }
    }


    .sl-process {
        padding: 80px 0;
    }

    .timeline-wrap {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
    }

    .sl-process ul {
        list-style: none;
        padding: 0;
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
    }

    .sl-process ul::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e0e0e0;
        transform: translateX(-50%);
        z-index: 0;
    }

    .line-fill {
        position: absolute;
        left: 50%;
        top: 0;
        width: 2px;
        height: 0%;
        background: #075DAC;
        transform: translateX(-50%);
        z-index: 1;
        border-radius: 2px;
        will-change: height;
        pointer-events: none;
    }

    .sl-process li {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        position: relative;
    }

    .sl-process li:nth-child(odd) {
        flex-direction: row;
    }

    .sl-process li:nth-child(even) {
        flex-direction: row-reverse;
    }

    .process-card {
        width: 44%;
        border: 1.5px solid #e0e0e0;
        border-radius: 12px;
        padding: 28px 30px;
        background: #fff;
        position: relative;
        z-index: 1;
        transition: border-color .35s, box-shadow .35s;
    }

    .process-card.lit {
        border-color: #075DAC;
        box-shadow: 0 0 0 4px rgba(7, 93, 172, .08);
    }

    .sl-process li:nth-child(odd) .process-card {
        text-align: right;
    }

    .sl-process li:nth-child(even) .process-card {
        text-align: left;
    }

    .process-card h3 {
        font-size: 20px;
        font-weight: 700;
        color: #111;
        margin-bottom: 10px;
    }

    .process-card p {
        font-size: 14px;
        color: #555;
        line-height: 1.7;
    }

    .process-icon {
        width: 12%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }

    .icon-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #075DAC;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background .35s, box-shadow .35s;
    }

    .icon-circle.lit {
        background: #075DAC;
        box-shadow: 0 0 0 6px rgba(7, 93, 172, .12);
    }

    .icon-circle svg {
        width: 48px;
        height: 48px;
        overflow: visible;
    }

    .icon-circle svg .sp {
        fill: none;
        stroke: #075DAC;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        will-change: stroke-dashoffset;
        transition: stroke .35s;
    }

    .icon-circle.lit svg .sp {
        stroke: #ffffff;
    }

    .icon-circle svg .fp {
        fill: #075DAC;
        stroke: none;
        transition: fill .35s;
    }

    .icon-circle.lit svg .fp {
        fill: #ffffff;
    }


    .icon-circle::after {
        content: '';
        position: absolute;
        bottom: -22px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #075DAC;
        z-index: 3;
    }

    .process-spacer {
        width: 44%;
    }


    @media (max-width: 1024px) {
        .sl-header h2 {
            font-size: 28px;
        }

        .process-card {
            width: 43%;
            padding: 20px;
        }

        .process-icon {
            width: 14%;
        }

        .process-spacer {
            width: 43%;
        }

        .icon-circle {
            width: 68px;
            height: 68px;
        }

        .icon-circle svg {
            width: 32px;
            height: 32px;
        }
    }

    @media (max-width: 767px) {
        .sl-process ul::before {
            left: 20px;
        }

        .line-fill {
            left: 20px;
            transform: none;
        }

        .sl-process li,
        .sl-process li:nth-child(even) {
            flex-direction: column;
            align-items: flex-start;
            padding-left: 50px;
        }

        .process-icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
        }

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

        .icon-circle::after {
            bottom: -16px;
            width: 8px;
            height: 8px;
        }

        .process-card,
        .process-spacer {
            width: 100%;
        }

        .process-spacer {
            display: none;
        }

        .sl-process li:nth-child(odd) .process-card,
        .sl-process li:nth-child(even) .process-card {
            text-align: left;
        }

        .sl-header h2 {
            font-size: 22px;
        }

        .process-card h3 {
            font-size: 16px;
        }

        .process-card p {
            font-size: 13px;
        }
    }




    @media (max-width: 1024px) {

        .hero-inner {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        .metrics-inner {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .cards-3 {
            grid-template-columns: repeat(2, 1fr);
        }

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

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

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

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

        .process {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .process::before {
            display: none;
        }

        .footer-grid {
            grid-template-columns: 1fr 1fr;
        }

        .problem-grid {
            grid-template-columns: 1fr;
        }

        .risk-box {
            grid-template-columns: 1fr;
        }
    }

    /* Mobile */
    @media (max-width: 640px) {

        .nav {
            padding: 0 16px;
        }

        .nav-links {
            display: none;
            /* simple approach */
        }

        .hero {
            padding: 40px 16px;
        }

        .section {
            padding: 40px 16px;
        }

        .hero h1 {
            font-size: 26px;
        }

        .st {
            font-size: 18px;
        }

        .ss {
            font-size: 12px;
        }

        .metrics-inner {
            grid-template-columns: 1fr 1fr;
        }

        .cards-3 {
            grid-template-columns: 1fr;
        }

        .case-grid {
            grid-template-columns: 1fr;
        }

        .team-grid {
            grid-template-columns: 1fr;
        }

        .juris-grid {
            grid-template-columns: 1fr;
        }

        .security-grid {
            grid-template-columns: 1fr;
        }

        .process {
            grid-template-columns: 1fr;
        }

        .footer-grid {
            grid-template-columns: 1fr;
        }

        .cta-banner {
            padding: 28px 16px;
        }

        .cta-banner h2 {
            font-size: 20px;
        }

        .def-bar {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px 16px;
        }
    }

    /* BUTTON CTA */
    .btn-cta,
    .btn-cta:link,
    .btn-cta:visited,
    .btn-cta:hover,
    .btn-cta:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 32px;
        border-radius: 999px;
        border: 1px solid #075DAC;
        background: #075DAC;
        color: #fff !important;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: none !important;

        transition: all 0.3s ease;
    }

    .btn-cta:hover {
        background: #054a88;
        border-color: #054a88;
    }


    .capabilities {
        padding: 80px 0;
    }

    .cap-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap;
    }

    .cap-btn a {
        text-decoration: none;
        border: 1px solid #000000;
        border-radius: 999px;
        padding: 14px 20px;
        background: #075DAC;
        color: #ffffff;
        transition: 0.3s all ease;
    }

    .cap-btn a:hover {
        background: transparent;
        color: #075DAC;
    }

    /* ==========================
Large Tablets (1024px)
========================== */
    @media (max-width: 1024px) {
        .capabilities {
            padding: 70px 20px;
        }

        .cap-btn {
            gap: 24px;
            flex-wrap: wrap;
        }
    }

    /* ==========================
Tablets (768px)
========================== */
    @media (max-width: 768px) {
        .capabilities {
            padding: 60px 20px;
        }

        .cap-btn {
            gap: 18px;
            flex-wrap: wrap;
        }

        .cap-btn a {
            padding: 12px 18px;
            font-size: 15px;
        }
    }

    /* ==========================
Mobile (576px)
========================== */
    @media (max-width: 576px) {
        .capabilities {
            padding: 50px 16px;
        }

        .cap-btn {
            flex-direction: column;
            gap: 16px;
            width: 100%;
        }

        .cap-btn a {
            width: 100%;
            max-width: 320px;
            text-align: center;
            padding: 14px 20px;
            font-size: 15px;
        }
    }

    /* ==========================
Small Mobile (400px)
========================== */
    @media (max-width: 400px) {
        .capabilities {
            padding: 40px 12px;
        }

        .cap-btn {
            gap: 12px;
        }

        .cap-btn a {
            max-width: 100%;
            padding: 12px 16px;
            font-size: 14px;
        }
    }

    /* ==========================
   Extra small phones (360px)
========================== */
    @media (max-width: 360px) {
        .hero h1 {
            font-size: 22px;
        }

        .hero-sub {
            font-size: 15px;
        }

        .btn-slblue,
        .btn-secondary {
            min-width: 100%;
        }
    }