:root {
            --bg-black: #010500;
            --accent-green: #54CE31;
            --accent-glow: rgba(74, 222, 128, 0.5);
            --input-bg: #18181b;
            --text-gray: #a1a1aa;
            --modal-bg: #121212;
            --card-bg: rgba(255, 255, 255, 0.05);
            --card-border: rgba(255, 255, 255, 0.05);
            --text-gray: #D5D5D5;
            --card-glass: rgba(255, 255, 255, 0.03);
            --border-glass: rgba(255, 255, 255, 0.1);
            --brand-green: #54CE31;
            --brand-dark: #050505;
            --card-bg: #0d0d0d;
            --asset-card-bg: #08070E;
            --asset-card-border: #1a1a1c;
            --heading: clamp(26px, 4vw, 36px);
            --heading-line-spacing: -2.13px;
            --heading-line-height: 64px;
            --heading-font-weight: medium;
            --heading-color: #fff;
            --sub-heading: 30px;
            --text: 22px;
            --px-card-border: #292A2B;
            --accent-green: #54CE31;
            --border-color: #111111;
            --border-hover: #222222;
            --text-muted: #999999;
            --item-bg-active: #0a0a0a;
            --border-thickness: 10px;

        }

        /* ===============================
            GLOBAL FONT SYSTEM – DM SANS
            ================================ */

        html,
        body {
            font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #010500;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }



        .hero-section {
            background-color: var(--bg-black);
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 50px 0;
            font-family: "DM Sans";
            padding-top: 0;
        }

        /* Constraint: 85% width */
        .hero-container {
            width: 70%;
            margin: 0 auto;
        }

        .hero-title {
            font-size: clamp(26px, 6vw, 56px);
            color: #FFF;
            font-style: normal;
            font-weight: 500;
            line-height: 60.667px;
            /* 111.111% */
            letter-spacing: -.72px;
            margin-bottom: 32px;
        }

        .hero-title span {
            color: var(--accent-green);
            display: block;
        }

        .hero-subtitle {
            color: rgba(255, 255, 255, 0.60);
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 33.333px;
            /* 156.25% */
            letter-spacing: -0.427px;
            margin-bottom: 32px;
        }

        /* Form Styling updated to match screenshot exactly */
        .cta-form {
            display: flex;
            align-items: center;
            gap: 20px;
            max-width: 600px;
        }

        .input-wrapper {
            background: var(--input-bg);
            border-radius: 50px;
            padding: 4px;
            flex-grow: 1;
            max-width: 350px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

 .cta-form input {
    background: transparent;
    border: none;
    color: white;
    padding: 14px 25px;
    width: 100%;
    outline: none;
    font-size: 1rem;
}

/* Chrome Autofill Fix */
.cta-form input:-webkit-autofill,
.cta-form input:-webkit-autofill:hover,
.cta-form input:-webkit-autofill:focus,
.cta-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #18181b inset !important; /* use your dark bg */
    -webkit-text-fill-color: white !important;
    caret-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
    border-radius: 50px;
}

        .btn-signup {
            color: #000;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: -0.36px;
            display: flex;
            height: 56.333px;
            padding: 13px 42px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            transition: all 0.3s ease;
            white-space: nowrap;
            position: relative;
            border-radius: 46px;
            border: 1px solid #54CE31;
            background: #54CE31; 
}
.btn-signup:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 50px rgba(57, 211, 83, 0.6);
            color: #000;
        }


        /* Mockup Image Styling */
        .hero-image-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*.main-mockup {*/
        /*    max-width: 100%;*/
        /*    height: auto;*/
        /*    z-index: 2;*/
        /*}*/
          .main-mockup {
            max-width: 100%;
            height: auto;
            object-fit: contain;
            z-index: 2;
            display: block;
        } 


        /* Custom Modal Styling */
        .modal-content {
            background-color: var(--modal-bg);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
        }

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

        @media (max-width: 1199px) {
            .hero-title {
                font-size: clamp(34px, 5vw, 60px);
                line-height: 1;
            }
            .hero-container{
                width: 90%;
            }
        }

        @media (max-width: 991px) {

            .hero-section {
                text-align: center;
            }

            .hero-subtitle {
                margin-left: auto;
                margin-right: auto;
            }

            .cta-form {
                margin: 0 auto;
                justify-content: center;
            }

            .hero-image-container {
                margin-top: clamp(40px, 6vw, 80px);
            }
        }

        @media (max-width: 768px) {

            .cta-form {
                flex-direction: column;
                gap: 15px;
            }

            .input-wrapper {
                width: 100% !important;
                max-width: 100%;
            }

            .btn-signup {
                width: 100% !important;
            }

            .main-mockup {
                max-width: 450px;
            }
        }

        @media (max-width: 480px) {

            .hero-section {
                padding: 50px 15px;
            }

            .hero-title {
                font-size: clamp(28px, 8vw, 42px);
                letter-spacing: -1px;
            }

            .main-mockup {
                max-width: 100%;
            }
            .hero-container{
                width: 100%;
            }
            .cta-form input{
               
        font-size: 14px;
        padding: 10px 25px;
            }
            .cta-form input::placeholder {
  font-size: 14px;
}
        }


.hero-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;                                        /* ← center horizontally */
    transform: translate(-50%, -50%);                 /* ← offset both axes */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 10;
}

.hero-play-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%) scale(1.08);     /* ← keep centering on hover */
}

.hero-play-btn svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.hero-play-btn .play-icon {
    margin-left: 3px;
}

        /*=========================================================================================================================
===========================================================================================================================
=================================================== Section Wrapper =======================================================*/
.crypto-features-section {
    padding: 0;
    background-color: var(--bg-black);
    overflow: hidden;
    width: 100%;
    padding: 50px 0;
}

.section-title-feature {
    text-align: center;
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 500;
    margin-bottom: 20px;
    color: white;
    letter-spacing: -0.72px;
}

.section-title-feature span {
    color: var(--accent-green);
}

.slider-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.slider-track {
    display: flex;
    width: max-content;
    animation: scroll 35s linear infinite;
}

.slider-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.crypto-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 13.333px;
    box-shadow: 0 0 4px 0 #54CE31;
    padding: 15px;
    width: 340px;
    height: 125px;
    margin: 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.crypto-card:hover {
    border-color: rgba(74, 222, 128, 0.4);
    transform: translateY(-5px);
    background: #121214;
}

.card-title {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    color: white;
}

.card-subtitle {
    font-size: 14px;
    color: var(--text-gray);
}

.card-subtitle span {
    font-weight: 500;
    margin-left: 6px;
}

.card-desc {
    color: var(--text-gray);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.373px;
    width: 190px;
}

.card-icon {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* Change colors */
.card-subtitle .change-pos { color: #00c853; }
.card-subtitle .change-neg { color: #ff3d00; }

/* ─── Skeleton shimmer for price loading state ─── */
.price-skeleton {
    display: inline-block;
    width: 110px;
    height: 13px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Typewriter */
.intro-text-container.reveal-section {
    position: relative;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.intro-text.typewriter-paragraph {
    width: 100%;
    font-size: inherit;
    line-height: 1.5;
    text-align: center;
    padding: 0;
    font-weight: 400;
    margin-bottom: 0;
}

.typewriter-line {
    display: inline;
    white-space: normal;
    font-size: clamp(18px, 3.5vw, 32px);
    line-height: 1.4;
    background: linear-gradient(90deg, #fff 0 0) 0 / 0% 100% no-repeat,
                rgba(255, 255, 255, 0.15);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 500;
    transition: background-size 0.2s linear;
    will-change: background-size;
}

.typewriter-line strong { font-weight: 900; }

.cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 50px rgba(57, 211, 83, 0.6);
    color: #000;
}

@media (max-width: 767px) {
    .intro-text.typewriter-paragraph { font-size: inherit; }
}

@media (max-width: 768px) {
    .section-title-feature { font-size: 1.75rem; }
    .crypto-card { width: 280px; height: 130px; padding: 20px; }
    .card-icon { width: 70px; height: 70px; right: 15px; }
    .card-title { font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .section-title-feature { font-size: 24px; }
    .card-desc { font-size: 0.9rem; }
    .crypto-features-section { padding: 0; }
}
        /*=========================================================================================================================
===========================================================================================================================
=================================================== Section Wrapper =======================================================*/

        .traders-section {
            padding: 50px 0;
            position: relative;
            background-color: var(--bg-black);
            height: 100%;
        }

        .traders-section-inner {
            max-width: 70%;
        }

        /* Top Introductory Text */
        .intro-text-container {
            max-width: 1400px;
            margin: 0 auto 80px;
            text-align: center;
        }

        .intro-text {
            color: #FFF;
            text-align: center;

            font-size: clamp(18px, 4vw, 42.667px);
            line-height: clamp(28px, 6vw, 70.667px);
            letter-spacing: clamp(-1px, -0.12vw, -2.133px);

            font-style: normal;
            font-weight: 500;
        }

        /* Main Content Styling */
        .traders-section-title {
            font-size: 20px;
            font-weight: 400;
            margin-bottom: 20px;
            color: white;
            letter-spacing: 0;
        }

        .traders-section-title span {
            color: var(--accent-green);
        }

        .section-heading {
            font-size: clamp(22px, 4vw, 36px);
            font-weight: medium;
            margin-bottom: 40px;
            letter-spacing: -0.72px;
            color: #FFF;
        }

        /* Features Grid */
        .feature-item-home {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 40px;
        }

        .feature-icon-box {
            width: 62px;
            height: 62px;
            background: rgba(74, 222, 128, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            /* border: 1px solid rgba(74, 222, 128, 0.2); */
        }

        .feature-icon-box img {
            width: 46px;
            height: 46px;
            color: var(--accent-green);
        }

        .feature-content h4 {
            font-size: var(--text);
            font-weight: 500;
            margin-bottom: 4px;
            color: #e4e4e7;
        }

        .feature-content p {
            font-size: 21.33px;
            color: var(--text-gray);
            margin: 0;
            line-height: 1.4;
        }

        /* Portfolio Glass Card */
        .portfolio-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-glass);
            border-radius: 24px;
            padding: 30px;
            width: 100%;
            max-width: 471px;
            height: 436px;
            margin-left: auto;
            position: relative;
            z-index: 2;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .portfolio-header {
            display: flex;
            gap: 20px;
            align-items: center;
            margin-bottom: 25px;
        }

        .portfolio-header span:first-child {
            font-size: 20px;
            color: #fff;
        }

        .portfolio-header .percentage {
            color: var(--accent-green);
            font-weight: 600;
        }

        .coin-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .coin-row:last-child {
            border-bottom: none;
        }

        .coin-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .coin-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        .coin-names {
            display: flex;
            flex-direction: column;
        }

        .coin-name {
            font-size: 17px;
            font-weight: 500;
            color: #fff;
        }

        .coin-symbol {
            font-size: 15px;
            color: var(--text-gray);
        }

        .coin-stats {
            text-align: right;
        }

        .coin-change {
            font-size: 17px;
            color: var(--accent-green);
            display: flex;
            align-items: center;
            gap: 4px;
            justify-content: flex-end;
        }

        /* Decorative Sparkline Background */
        .sparkline-bg {
            position: absolute;
            right: -65px;
            top: 50%;
            transform: translateY(-50%);
            /* width: 60%; */
            height: 100%;
            /* opacity: 0.3; */
            z-index: 1;
            pointer-events: none;
        }


        @media (max-width: 1199px) {
            .portfolio-card {
                margin-left: 0;
            }
            .traders-section-inner{
                max-width: 90%;
            }
        }

        @media (max-width: 991px) {

            .portfolio-card {
                margin: clamp(40px, 6vw, 60px) auto 0;
            }

            .sparkline-bg {
                width: clamp(180px, 60vw, 400px);
                top: 55%;
                left: 10%;
                /* opacity:0.25; */
            }


            .sparkline-bg {
                /* display:none; */
            }

        }

        @media (max-width: 768px) {

            .feature-item-home {
                margin-bottom: 25px;
            }

            .section-heading {
                text-align: center;
            }

            .traders-section-title {
                text-align: center;
            }

            .sparkline-bg {
                width: clamp(180px, 60vw, 400px);
                top: 55%;
                left: 3%;
                /* opacity:0.25; */
            }

        }

        @media (max-width: 480px) {
            
            .traders-section {
                padding: 50px 15px;
                
            }
            .traders-section-title{
                font-size: 15px;
            }
            .feature-icon-box{
                width: 45px;
                height: 45px;
            }
            .feature-icon-box img{ 
                width: 34px;
                height: 34px;
            }
            .coin-icon{
                height: 34px;
                width: 34px;
            }



            .portfolio-card {
                padding: 20px;
                height: 380px;
            }

            .sparkline-bg {
                width: clamp(180px, 60vw, 400px);
                top: 55%;
                left: -5%;
                /* opacity:0.25; */
            }
            .traders-section-inner{
                max-width: 100%;
                width: 100%;
            }
        }





/*=========================================================================================================================
===========================================================================================================================
=================================================== Globe Wrapper =======================================================*/

/* Fluid Hero Section */
        .predictive-hero-section {
            padding: 50px 0px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-black);
        }

        .predictive-hero-section-inner {
            width: 70%;
            /* max-width: 1400px; */
            margin: 0 auto;
        }

        .hero-card {
            background: var(--bg-black);
            border: 4px solid var(--card-border);
            border-radius: clamp(20px, 4vw, 40px);
            padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 3rem);
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
        }

        /* Background Glow Effect */
        .hero-card::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -10%;
            width: 60%;
            height: 60%;
            background: radial-gradient(circle, rgba(84, 206, 49, 0.08) 0%, transparent 70%);
            pointer-events: none;
            z-index: 1;
        }

        .predictive-hero-section-inner h2 {
            font-size: clamp(22px, 4vw, 36px);
            font-weight: 500;
            color: #fff;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .predictive-hero-section-inner .hero-subtext {
            color: #fff;
            font-size: clamp(1rem, 1.2vw, 1.25rem);
            max-width: 520px;
            margin-top: 1.5rem;
        }

        .green-text {
            color: var(--accent-green);
        }

        .feature-list {
            margin-top: 3rem;
        }

        .feature-item-home {
            transition: transform 0.3s ease;
        }

        .feature-icon-wrapper {
            background-color: transparent;
            border: 2px solid var(--accent-green);
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 4px;
            flex-shrink: 0;
        }

        .feature-item-home h5 {
            font-weight: 600;
            margin-bottom: 4px;
            font-size: clamp(1.1rem, 1.5vw, 20px);
            color: #fff;
        }

        .feature-item-home p {
            color: rgb(255, 255, 255, 0.6);
            font-size: clamp(0.9rem, 1.1vw, 16px);
            margin-bottom: 0;
            line-height: 1.4;
        }
        p{
            color: rgb(255, 255, 255, 0.6);
        }

        .cta-btn {
            color: #000;
            text-decoration: none;
            display: flex;
            height: 56.333px;
            padding: 13px 42px;
            justify-content: center;
            align-items: center;
            border-radius: 46px;
            border: 1px solid #54CE31;
            background: #54CE31;
            color: #000;
            text-align: center;
            font-family: "DM Sans";
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: -0.36px;
        }

        .cta-btn:hover {
            transform: translateY(-2px);
            color: #000;
        }
        .cta-btn-globe{
            display: flex;
            height: 56.333px;
            width: 305px;
            padding: 13px 42px;
            justify-content: center;
            align-items: center;
            border-radius: 46px;
            border: 1px solid #54CE31;
            background: #54CE31;
            color: #000;
            text-decoration: none;
            text-align: center;
            font-family: "DM Sans";
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: -0.36px;
        }
        .cta-btn-globe:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 50px rgba(57, 211, 83, 0.6);
            color: #000;
        }

#globe-wrapper {
    width: 100%;
    height: clamp(340px, 45vw, 580px); /* sweet spot between previous two */
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    #globe-wrapper {
        height: clamp(300px, 70vw, 500px);
        /* margin-top: 1.5rem; */
    }
}

@media (max-width: 480px) {
    #globe-wrapper {
        /* height: clamp(260px, 88vw, 380px); */
    }
}

canvas {
    display: block !important;
    max-width: 100% !important;
    outline: none;
}
         @media (max-width: 1440px) {
            /* canvas {
            width: 470px !important;
            height: auto !important;
            outline: none;
        } */
        }
        @media (max-width: 1280px) {
            /* canvas {
            width: 420px !important;
            height: auto !important;
            outline: none;
        } */
        .predictive-hero-section-inner{
            width: 90%;
        }
        }

        @media (max-width: 991.98px) {
            .predictive-hero-section {
                padding: 2rem 0;
            }
            .hero-card {
                text-align: center;
                padding: 40px 24px;
            }
            .predictive-hero-section-inner .hero-subtext {
                margin-left: auto;
                margin-right: auto;
            }
            .feature-item-home {
                text-align: left;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            .cta-btn {
                margin-left: auto;
                margin-right: auto;
            }
            #globe-wrapper {
                /* height: 400px; */
                /* margin-top: 2rem; */
            }
            /* canvas {
            width: 640px !important;
            height: auto !important;
            outline: none;
        } */
        }
        @media (max-width: 768px) {
           
            /* canvas {
            width: 300px !important;
            height: auto !important;
            outline: none;
        } */
        }
         @media (max-width: 480px) {
           
            /* canvas {
            width: 220px !important;
            height: auto !important;
            outline: none;
        } */
        .predictive-hero-section{
                padding: 25px 15px !important;
            }
        .predictive-hero-section-inner{
            width: 100%;
        }
        .cta-btn-globe{
            width: 100% !important;
        }
        }

        /*=========================================================================================================================
===========================================================================================================================
=================================================== crypto Wrapper =======================================================*/

     /* ============================= */
        /* PLATFORM SECTION */
        /* ============================= */
        .platform-section {
            /* padding: clamp(80px, 8vw, 120px) 0; */
            padding: 50px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background: #000; */
        }
        
        .platform-section-inner {
            width: 70%;
        }
        
        .platform-section-inner-left {
            display: flex;
            justify-content: center;
            /* flex-direction: column; */
            gap: clamp(50px, 8vw, 120px);
        }
        .platform-section-inner-left-left{
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 50%;
        }
        
        .platform-section-inner-left h2 {
            font-size: clamp(22px, 4vw, 36px);
            color: #fff;
        }
        
        .platform-section-inner-left p {
            font-size: clamp(14px, 1.1vw, var(--text));
            color: var(--text-gray);
        }
        
        /* ============================= */
        /* NEON BUTTON */
        /* ============================= */
        .trade-btn {
            display: flex;
            height: 56.333px;
            width: 175px;
            padding: 13px 42px;
            justify-content: center;
            align-items: center;
            border-radius: 46px;
            border: 1px solid #54CE31;
            background: #54CE31;
            color: #000;
            text-decoration: none;
            text-align: center;
            font-family: "DM Sans";
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: -0.36px;
        }
        
        .trade-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 50px rgba(57, 211, 83, 0.6);
            color: #000;
        }
        
        .trade-btn svg {
            transition: transform .3s ease;
            width: clamp(20px, 1.4vw, 26px);
            height: clamp(20px, 1.4vw, 26px);
        }
        
        .trade-btn:hover svg {
            transform: translate(2px, -2px);
        }
        
        /* ============================= */
        /* MARQUEE WRAPPER */
        /* ============================= */
        .marquee-wrapper {
            position: relative;
            width: 100%;
            height: clamp(320px, 35vw, 500px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: clamp(14px, 2vw, 20px);
            justify-content: center;
            width: 50%;
        }
        
        /* .marquee-wrapper::before,
        .marquee-wrapper::after {
            content: "";
            position: absolute;
            z-index: 2;
            top: 0;
            width: 15%;
            height: 100%;
            pointer-events: none;
        }
        
        .marquee-wrapper::before {
            left: -50px;
            background: linear-gradient(to right, var(--brand-dark), transparent);
        }
        
        .marquee-wrapper::after {
            right: -50px;
            background: linear-gradient(to left, var(--brand-dark), transparent);
        } */
        
        .marquee-row {
            display: flex;
            gap: clamp(14px, 2vw, 20px);
            width: max-content;
        }
        
        /* ============================= */
        /* ANIMATIONS */
        /* ============================= */
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        @keyframes scroll-reverse {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }
        
        .marquee-row.left {
            animation: scroll 40s linear infinite;
        }
        
        .marquee-row.right {
            animation: scroll-reverse 45s linear infinite;
        }
        
        /* ============================= */
        /* ASSET CARD */
        /* ============================= */
        .asset-card {
            background: var(--asset-card-bg);
            border: 1px solid var(--asset-card-border);
            border-radius: clamp(30px, 3vw, 50px);
            padding: clamp(8px, 1vw, 10px) clamp(18px, 2vw, 24px) clamp(8px, 1vw, 10px) clamp(8px, 1vw, 10px);
            display: flex;
            align-items: center;
            gap: clamp(12px, 1.5vw, 16px);
            min-width: clamp(160px, 16vw, 230px);
            transition: background .3s ease;
        }
        
        .asset-card:hover {
            background: #121214;
            border-color: #2a2a2c;
        }
        
        .icon-circle {
            width: clamp(40px, 3vw, 48px);
            height: clamp(40px, 3vw, 48px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(18px, 1.4vw, 24px);
            flex-shrink: 0;
        }
        
        .asset-info {
            display: flex;
            flex-direction: column;
        }
        
        .asset-name {
            font-weight: 500;
            font-size: clamp(14px, 1.2vw, 18.67px);
            color: #F5F5F5;
        }
        
        .asset-stats {
            display: flex;
            gap: 8px;
            font-size: 0.85rem;
            /* font-family: monospace; */
        }
        
        .price {
            font-size: clamp(12px, 1vw, 14.67px);
            color: var(--text-gray);
        }
        
        .change-pos {
            color: var(--brand-green);
        }
        
        .change-neg {
            color: #FF0066;
        }
        
        /* Loading indicator */
        .loading-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(84, 206, 49, 0.1);
            border: 1px solid rgba(84, 206, 49, 0.3);
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            color: var(--brand-green);
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .loading-indicator.active {
            opacity: 1;
        }
        
         @media (max-width: 1199px) {
        .platform-section-inner{
            width: 90%;
        }
         }
        @media (max-width: 991.98px) {
            .platform-section-inner-left {
                gap: 0px;
                margin-bottom: 20px;
            }
        }
        @media (max-width: 768px) {
            .platform-section-inner-left {
                flex-direction: column;
            }
            .platform-section-inner-left-left{
                width: 100%;
            }
            .marquee-wrapper{
                width: 100%;
            }
        }
 @media (max-width: 480px) {
    .platform-section{
        padding: 50px 15px;
    }
        .platform-section-inner{
            width: 100%;
        }
 }


        /* ============================= */
/* CRYPTO LOGO STYLING */
/* ============================= */

.crypto-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(6px, 0.6vw, 8px);
}

/* Fallback for missing images */
.crypto-logo:not([src]),
.crypto-logo[src=""] {
    display: none;
}

/* Optional: Add a subtle animation on hover */
.asset-card:hover .crypto-logo {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Ensure icon-circle maintains aspect ratio */
.icon-circle {
    position: relative;
    overflow: hidden;
}

.icon-circle img {
    display: block;
}
/*=========================================================================================================================
===========================================================================================================================
===================================================px Wrapper =======================================================*/
        .why-choose-section {
            padding: 50px 0px;
            /* background: #000; */
            position: relative;
            overflow: hidden;
        }

        /* ===== PIXEL PERFECT PHONE BACKGROUND ===== */
        /* .phone-bg-mockup {
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translate(-50%, -50%);
            width: 1300px;
            max-width: 95vw;
            pointer-events: none;
            user-select: none;
            z-index: 0;
           
            filter: drop-shadow(0 80px 160px rgba(0, 0, 0, .95));
            opacity: 1;
        } */
        .phone-bg-mockup {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    width: 920px;
    max-width: 95vw;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    object-fit: contain; /* IMPORTANT */
    /* filter: drop-shadow(0 80px 160px rgba(0, 0, 0, .95)); */
    opacity: 1;
}


        .section-header {
            margin-bottom: 95px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .section-label {
            font-size: 20px;
            letter-spacing: .3px;
            margin-bottom: 18px;
            color: rgba(255, 255, 255, .9);
        }

        .section-label .highlight {
            color: var(--accent-green)
        }

        .section-title-home {
             font-size: clamp(22px, 4vw, 36px); 
            line-height: 1.25;
            max-width: 1200px;
            margin: 0 auto;
            letter-spacing: -.8px;
            color: #fff;
        }

        /* ===== GRID MATCH SCREENSHOT POSITIONS ===== */
        .content-grid {
            display: grid;
            grid-template-columns: 420px 1fr 420px;
            grid-template-areas: "left center right";
            gap: 40px;
            align-items: center;
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 2;
            /* above mockup */
        }

        .center-slot {
            grid-area: center;
            min-height: 600px;
            /* holds the middle space like the screenshot */
        }

        .left-features {
            grid-area: left;
            align-items: flex-end;
            text-align: right
        }

        .right-features {
            grid-area: right;
            align-items: flex-start;
            text-align: left
        }

        .features-column {
            display: flex;
            flex-direction: column;
            gap: 100px;
        }

        .left-features {
            align-items: flex-end;
            text-align: right
        }

        .right-features {
            align-items: flex-start;
            text-align: left
        }

        /* ===== PREMIUM ROUND ICONS ===== */
        .feature-card {
            display: flex;
            gap: 22px;
            max-width: 420px;
            align-items: flex-start;
        }

        .left-features .feature-card {
            flex-direction: row-reverse
        }

        .feature-icon {
            width: 53px;
            height: 53px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .15);
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .feature-icon img {
            width: 50px;
            height: auto;
        }

        .feature-title {
            font-size: clamp(16px, 4vw, 24px);
            font-weight: 500;
            margin-bottom: 8px;
            color: #fff;
        }

        .feature-description {
            font-size: clamp(14px, 3.5vw, 18px);
            color: rgb(255, 255, 255, 0.6);
            line-height: 1.55
        }

       /* ===== UNIFORM SCALING FOR ALL SCREENS ===== */
    @media(max-width: 1200px) {
        .content-grid {
            grid-template-columns: 260px 1fr 260px;
            padding: 0 15px;
            gap: 10px;
        }
        .center-slot {
            min-height: 450px;
        }
    }

    @media(max-width: 992px) {
        .content-grid {
            grid-template-columns: 200px 1fr 200px;
        }
        .feature-title {
            font-size: 16px;
        }
        .feature-description {
            font-size: 12px;
        }
        .center-slot {
            min-height: 350px;
        }
        .section-title-home {
            font-size: 30px;
            line-height: 30px;
        }
    }

    @media(max-width: 768px) {
        .content-grid {
            grid-template-columns: 140px 1fr 140px;
            padding: 0 10px;
        }
        .section-title-home {
            font-size: 22px;
            line-height: 30px;
        }
        .features-column {
            gap: 40px;
        }
        .feature-icon {
            width: 36px;
            height: auto;
        }
        .feature-icon img {
            width: 25px;
            height: auto;
        }
        .center-slot {
            min-height: 250px;
        }
    }

    @media(max-width: 480px) {
        .section-label{
            font-size: 15px;
        }
        .why-choose-section{
            padding: 0px;
        }
        .content-grid {
            grid-template-columns: 110px 1fr 110px;
            gap: 5px;
        }
        .feature-title {
            font-size: 11px;
            margin-bottom: 2px;
        }
        .feature-description {
            display: none; /* Hide descriptions on very small mobile to keep layout */
        }
        .section-title-home {
            font-size: 24px;
        }
        .center-slot {
            min-height: 180px;
        }
        .phone-bg-mockup{
            top: 70%;
        }
    }

   .why-play-btn {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 10;
}

.why-play-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%) scale(1.08);
}

.why-play-btn svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.why-play-btn .play-icon {
    margin-left: 3px;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .why-play-btn {
        width: 48px;
        height: 48px;
    }
    .why-play-btn svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 768px) {
    .why-play-btn {
        width: 42px;
        height: 42px;
        top: 40%;        /* shift up slightly — video sits higher on mobile */
    }
    .why-play-btn svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 480px) {
    .why-play-btn {
        width: 36px;
        height: 36px;
        top: 70%;        /* video is smaller on mobile, keep button centered on it */
    }
    .why-play-btn svg {
        width: 13px;
        height: 13px;
    }
    .why-play-btn .play-icon {
        margin-left: 2px;
    }
}
        /*=========================================================================================================================
===========================================================================================================================
===================================================HOW Wrapper =======================================================*/

.px-how-section {
    color: #ffffff;
    padding: 50px 0;
    padding-top: 100px;
    overflow-x: hidden;
    text-align: center;
}

.px-how-eyebrow {
    font-size: 14px;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    color: #fff;
    font-weight: 400;
}

.section-label span {
    color: var(--accent-green);
}

.px-how-main-title {
    font-size: clamp(22px, 4vw, 36px);
    font-weight: var(--heading-font-weight);
    line-height: 50px;
    margin-bottom: 24px;
    letter-spacing: var(--heading-line-spacing);
}

.px-how-sub-title {
    color: #A8A8A8;
    font-size: 18px;
    margin-bottom: 34px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    opacity: 0.8;
}

.px-how-steps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 34px;
}

.px-how-step-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 332px;
    height: 354px;
}

.px-how-step-card {
    width: 332px;
    height: 354px;
    border-radius: 40px;
    border: 1px solid var(--px-card-border);
    padding: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 2;
    transition: transform 0.3s ease;
}

.px-how-step-card1 {
    background: url(../images/how/card1.png) no-repeat center / cover;
}
.px-how-step-card2 {
    background: url(../images/how/card2.png) no-repeat center / cover;
}
.px-how-step-card3 {
    background: url(../images/how/card3.png) no-repeat center / cover;
}
.px-how-step-card4 {
    background: url(../images/how/card2.png) no-repeat center / cover;
}
.px-how-step-card5 {
    background: url(../images/how/card5.png) no-repeat center / cover;
}

/* White/green anchor dots */
.px-how-step-card::after {
    content: '';
    position: absolute;
    right: -5.5px;
    top: 153px;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.9);
    z-index: 10;
}

.px-how-step-wrapper:not(:first-child) .px-how-step-card::before {
    content: '';
    position: absolute;
    left: -5.5px;
    top: 202px;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    background: #54CE31;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgb(84,206,49,0.9);
    z-index: 10;
}

.px-how-step-wrapper:last-child .px-how-step-card::after {
    display: none;
}

.px-how-card-content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.px-how-step-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
    line-height: 38px;
    letter-spacing: -1.28px;
}

.px-how-step-desc {
    font-size: 16px;
    color: #A8A8A8;
    line-height: 32px;
    margin-bottom: 0;
}

.px-how-card-visual {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* GIF sizing — same as your original static image sizes */
.px-how-card-visual img.fund  { width: 100%; height: auto; margin-top: 0px; }
.px-how-card-visual img.kyc   { width: 100%; height: auto; margin-top: -50px; }
.px-how-card-visual img.trade { width: 100%; height: auto; margin-top: -40px; }
.px-how-card-visual img.track { width: 100%; height: auto; margin-left: -32px; margin-top: -85px; }

/* Connector */
.px-how-connector {
    width: 54px;
    height: 66px;
    position: relative;
    z-index: 1;
    margin: 0 -2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.px-how-connector img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 12px rgba(89,211,83,0.4));
}

.how-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Responsive ── */
@media (max-width: 1540px) {
    .px-how-steps-container { padding: 0 15px; }
    .px-how-step-wrapper  { width: 290px; height: 310px; }
    .px-how-step-card     { width: 290px; height: 310px; padding: 18px; border-radius: 36px; }
    .px-how-connector     { width: 46px; margin: 0 -3px; }
    .px-how-step-title    { font-size: 26px; line-height: 34px; letter-spacing: -1px; }
    .px-how-step-desc     { font-size: 16px; line-height: 28px; }
    .px-how-step-card::after { top: 135px; }
    .px-how-step-wrapper:not(:first-child) .px-how-step-card::before { top: 176px; }
}

@media (max-width: 1440px) {
    .px-how-steps-container { padding: 0 10px; }
    .px-how-step-wrapper  { width: 260px; height: 280px; }
    .px-how-step-card     { width: 260px; height: 280px; padding: 16px; border-radius: 32px; }
    .px-how-connector     { width: 40px; height: 56px; margin: 0 -4px; }
    .px-how-step-title    { font-size: 23px; line-height: 30px; letter-spacing: -0.8px; }
    .px-how-step-desc     { font-size: 14px; line-height: 24px; }
    .px-how-step-card::after { top: 120px; }
    .px-how-step-wrapper:not(:first-child) .px-how-step-card::before { top: 158px; }
    .px-how-card-visual img.track{margin-top: -70px;}
}

@media (max-width: 1366px) {
    .px-how-step-wrapper  { width: 245px; height: 265px; }
    .px-how-step-card     { width: 245px; height: 265px; padding: 15px; border-radius: 30px; }
    .px-how-connector     { width: 36px; margin: 0 -5px; }
    .px-how-step-title    { font-size: 21px; line-height: 28px; }
    .px-how-step-desc     { font-size: 13px; line-height: 22px; }
}

@media (max-width: 1280px) {
    .px-how-steps-container { flex-wrap: wrap; padding: 0 20px; }
    .px-how-step-wrapper  { width: 332px; height: 354px; }
    .px-how-step-card     { width: 332px; height: 354px; padding: 20px; border-radius: 40px; }
    .px-how-connector     { width: 54px; margin: 0 -2px; }
    .px-how-step-title    { font-size: 30px; line-height: 38px; letter-spacing: -1.28px; }
    .px-how-step-desc     { font-size: 18px; line-height: 32px; }
    .px-how-step-card::after { top: 153px; }
    .px-how-step-wrapper:not(:first-child) .px-how-step-card::before { top: 202px; }
}

@media (max-width: 767px) {
    .px-how-connector,
    .px-how-step-card::after,
    .px-how-step-card::before { display: none !important; }
    .px-how-main-title { font-size: 32px; }
    .px-how-steps-container { gap: 30px; }
}

@media (max-width: 480px) {
    .px-how-main-title  { font-size: 24px; line-height: 30px; letter-spacing: -1px; }
    .px-how-step-title  { font-size: 24px; }
    .px-how-step-desc   { font-size: 0.9rem; line-height: 1.5; }
    .px-how-sub-title   { font-size: 0.9rem; }
    .px-how-card-visual img.fund{margin-top: -42px;}
    .px-how-card-visual img.track{margin-top: -85px;}
}
        /*=========================================================================================================================
===========================================================================================================================
===================================================faq Wrapper =======================================================*/

        /* Fluid Section Styling */
        .faq-section {
            padding: 50px 0px;
            width: 100%;
            overflow-x: hidden;
            display: flex;
            justify-content: center;

        }

        .faq-section-inner {
            width: 60%;
            height: 60vh;
        }

        .faq-header-content {
            text-align: center;
            /* margin-bottom: clamp(40px, 8vh, 80px); */
            padding: 0 20px;
        }

        .faq-badge {
            color: var(--accent-green);
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
            line-height: 29.3px;
            letter-spacing: 0;
            margin-bottom: 16px;
            display: inline-block;
        }

        .faq-title {
             font-size: clamp(22px, 4vw, 36px);
            color: var(--heading-color);
            font-weight: var(--heading-font-weight);
            letter-spacing: 0;
            line-height: var(--heading-line-height);
            margin-bottom: 30px;
        }

        /* Fluid Grid */
        .faq-grid-container {
            /* max-width: 1400px; */
            margin: 0 auto;
            /* padding: 0 24px; */
        }

        .faq-item {
            background-color: transparent;
            border: 1px solid var(--border-color);
            border-radius: clamp(30px, 4vw, 40px);
            padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px);
            cursor: pointer;
            transition:
                background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
            margin-bottom: 20px;
            height: auto;
            will-change: transform, background-color;
        }

        .faq-item:hover {
            border-color: var(--border-hover);
            background-color: #080808;
            transform: translateY(-2px);
        }

        .faq-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .faq-question {
            font-size: 18px;
            font-weight: 500;
            color: #ffffff;
            line-height: 1.4;
        }

        /* Icon Styling */
        .faq-icon-wrapper {
            position: relative;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .icon-line {
            position: absolute;
            background-color: #ffffff;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
            border-radius: 2px;
        }

        .line-h {
            width: 16px;
            height: 2px;
        }

        .line-v {
            width: 2px;
            height: 16px;
        }

        /* Fluid Animation Logic */
      .faq-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-content-wrapper {
    grid-template-rows: 1fr;
}

.faq-content {
    overflow: hidden;
    color: var(--text-muted);
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
        filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.faq-item.active .faq-content {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
    padding-top: 24px;
    padding-bottom: 10px;
    transition-delay: 0.1s;
}
        .faq-item.active {
            background-color: var(--item-bg-active);
            border-color: #333333;
        }

        .faq-item.active .line-v {
            transform: rotate(90deg);
            opacity: 0;
        }

        .faq-item.active .line-h {
            transform: rotate(180deg);
        }
        @media (max-width: 1480px) {
            .faq-section-inner{
            width: 70%;
        }
        }
         @media (max-width: 1199px) {
        .faq-section-inner{
            width: 90%;
        }
    }
        /* Fluid Responsiveness for Mobile */
        @media (max-width: 991px) {
            .faq-grid-container {
                max-width: 720px;
            }
        }

        @media (max-width: 576px) {
            .faq-section {
                padding: 50px 0;
            }

            .faq-item {
                border-radius: 28px;
                padding: 20px 24px;
            }
            .faq-badge{
                font-size: 15px;
            }
            .faq-title{
                font-size: 24px;
                letter-spacing: -1px;
            }
            .faq-header-content{
                padding: 0;
            }
            .faq-question{
                font-size: 20px;
            }

            .faq-section-inner{
                width: 95%;
            }
        }





        /*=========================================================================================================================
===========================================================================================================================
===================================================cta Wrapper =======================================================*/



        /* CTA Section Styling */
        .cta-section {
            padding-bottom: 120px;
            padding-left: 20px;
            padding-right: 20px;
            display: flex;
            justify-content: center;
        }

        .cta-card-wrapper {
            width: 70%;
            margin: 0 auto;
            position: relative;
            padding: var(--border-thickness);
            border-radius: 80px;
            background: #111111;
            overflow: hidden;
        }

        /* 360 Full Perimeter Border Animation */
        .cta-card-wrapper::before,
        .cta-card-wrapper::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            z-index: 1;
        }

        /* Snake 1: Full 360 rotation starting from Top-Left */
        .cta-card-wrapper::before {
            background: conic-gradient(from 0deg,
                    transparent 0deg,
                    transparent 45deg,
                    var(--accent-green) 90deg,
                    transparent 135deg,
                    transparent 360deg);
            animation: rotate360 4s linear infinite;
        }

        /* Snake 2: Full 360 rotation starting from Bottom-Right (Opposite) */
        .cta-card-wrapper::after {
            background: conic-gradient(from 180deg,
                    transparent 0deg,
                    transparent 45deg,
                    var(--accent-green) 90deg,
                    transparent 135deg,
                    transparent 360deg);
            animation: rotate360 4s linear infinite;
        }

        @keyframes rotate360 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .cta-card {
            position: relative;
            z-index: 2;
            background: #000;
            border-radius: 70px;
            /* padding: clamp(40px, 8vw, 40px) clamp(30px, 6vw, 100px); */
            padding: 0px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            background-image: url(../images/cta/cta_bg.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .cta-info {
            max-width: 560px;
            position: relative;
            z-index: 3;
        }

        .cta-title {
            font-size: var(--heading);
            font-weight: var(--heading-font-weight);
            letter-spacing: var(--heading-line-spacing);
            /* margin-bottom: 24px; */
            line-height: var(--heading-line-height);
            color: var(--heading-color);
        }

        .cta-desc {
            color: #A8A8A8;
            font-size: 18px;
            line-height: 1.3;
            /* margin-bottom: 48px; */
            
        }



        .cta-visual {
            position: relative;
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cta-visual img{
            width: 100%;
            height: auto;
        }

        .coin-stack {
            width: 100%;
            max-width: 550px;
            /* filter: drop-shadow(0 0 50px rgba(0, 255, 0, 0.25)); */
            user-select: none;
            pointer-events: none;
        }
        @media (max-width: 1199px) {
            .cta-card-wrapper{
                width: 90%;
            }
        }
        @media (max-width: 991px) {
            .cta-card-wrapper {
                border-radius: 50px;
                padding: 8px;
            }

            .cta-card {
                flex-direction: column;
                text-align: center;
                padding: 60px 30px;
                border-radius: 42px;
            }

            .cta-info {
                max-width: 100%;
                margin-bottom: 60px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .cta-visual {
                width: 90%;
            }
        }
        @media (max-width: 480px) {
        .cta-title{
            font-size: 24px !important;
            letter-spacing: -1px;
        }
        .cta-desc{
            font-size: 1rem !important;
            line-height: 1 !important;
        }
        .cta-section{
            padding: 60px 0 !important;
        }
            .cta-visual img{
                width: 300px;
            }
            .cta-card-wrapper{
                width: 95%;
            }

    }

        /*=========================================================================================================================
===========================================================================================================================
===================================================sub form Wrapper =======================================================*/

      /* CTA Section - Fluid */
.cta-section { 
    padding: clamp(50px, 6.94vw, 50px) 0; 
    display: flex;
    justify-content: center;
}

.cta-container { 
    /* width: clamp(85%, 80vw, 80%); */
    width: 70%;
    margin: 0 auto; 
    padding: 0 clamp(15px, 1.39vw, 20px); 
    display: grid; 
    grid-template-columns: 1.2fr 1fr; 
    gap: clamp(25px, 2.78vw, 40px); 
    align-items: center; 
}

.cta-newsletter h2 { 
    font-size: clamp(32px, 4.17vw, var(--heading)); 
    font-weight: var(--heading-font-weight); 
    letter-spacing: clamp(-1px, -0.148vw, var(--heading-line-spacing));
    color: var(--heading-color); 
    /* margin-bottom: clamp(16px, 1.67vw, 24px); */
    line-height: 1.2;
}

.cta-newsletter p { 
    font-size: clamp(16px, 1.67vw, 18px); 
    color: #A8A8A8; 
    /* margin-bottom: clamp(25px, 2.78vw, 40px);  */
    line-height: 1.5;
    width: 80%;
}

/* Subscribe Form - Fluid */
.input-group-custom { 
    display: flex; 
    gap: clamp(10px, 0.83vw, 12px); 
    align-items: center; 
    width: 80%;
    position: relative; 
}

.email-input { 
    background: var(--input-bg); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 100px; 
    padding: clamp(14px, 1.25vw, 18px) clamp(20px, 1.94vw, 28px); 
    color: white; 
    flex-grow: 1; 
    font-size: clamp(14px, 1.11vw, 16px); 
    outline: none; 
    transition: border-color 0.3s ease;
    min-height: clamp(48px, 4.17vw, 60px);
}

.email-input::placeholder {
    color: #A8A8A8; 
    font-size: clamp(14px, 1.11vw, var(--text));
}

.email-input:focus { 
    border-color: rgba(99, 230, 78, 0.3); 
}

.btn-subscribe { 
    display: flex;
    height: 56.333px;
    width: 160px;
    padding: 13px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 46px;
    border: 1px solid #54CE31;
    text-decoration: none;
    background: #54CE31;
    color: #000;
    text-align: center;
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.36px;
}

.btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(99, 230, 78, 0.6);
}

.btn-subscribe:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
}

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

.custom-toast {
    background: #333;
    color: white;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
    pointer-events: auto;
    font-size: 15px;
    line-height: 1.5;
}

.custom-toast.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.custom-toast.error {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.custom-toast.warning {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #000;
}

.custom-toast.info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.custom-toast span {
    flex: 1;
    margin-right: 10px;
}

.custom-toast button {
    background: none !important;
    border: none !important;
    color: white !important;
    cursor: pointer;
    font-size: 20px !important;
    padding: 0 5px !important;
    margin-left: 15px !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.custom-toast button:hover {
    opacity: 1;
}

/* Email input invalid state */
.email-input.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Support Card Style - Fluid */
.support-card { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.12); 
    border-radius: clamp(24px, 2.78vw, 40px); 
    padding: clamp(25px, 2.78vw, 40px); 
    display: flex; 
    justify-content: center;
    align-items: center; 
    gap: clamp(18px, 1.74vw, 25px); 
}

.chat-icons { 
    position: relative; 
    width: clamp(180px, 9.72vw, 231px);  
    flex-shrink: 0; 
}

.chat-icons img { 
    width: 100%; 
    height: auto; 
}

.support-info { 
    flex-grow: 1; 
}

.support-info p { 
    font-size: clamp(14px, 1.39vw, 16px); 
    color: #ffffff; 
    line-height: 1.5; 
    margin-bottom: clamp(16px, 1.67vw, 24px); 
    font-weight: 400;
}

.btn-signup-cta {   
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.10);
    background-blend-mode: plus-lighter;
    box-shadow: 3px 3px 10.5px -3.5px #FFF inset, 
                2px 3px 1px -2px #262626 inset, 
                -2px -2px 12.5px -2px #262626 inset, 
                0 0 0 1px #A6A6A6 inset, 
                0 0 8px 0 #F2F2F2 inset, 
                0 0 2px 0 rgba(0, 0, 0, 0.10), 
                0 1px 8px 0 rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(6px);
    display: inline-flex;
    color: #fff;
    text-decoration: none;
    width: clamp(140px, 11.11vw, 160px);
    height: clamp(50px, 4.17vw, 60px);
    padding: clamp(14px, 1.39vw, 20px) clamp(30px, 2.92vw, 42px);
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 1.11vw, 16px);
    font-weight: 500;
    transition: all 0.3s ease;
} 

 .btn-signup-cta:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Laptop & Tablet Landscape (1024px - 1366px) */
@media (max-width: 1366px) {
    .cta-container {
        width: 85%;
        gap: 30px;
    }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) {
    .cta-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cta-newsletter h2 {
        font-size: clamp(32px, 5vw, 44px);
    }
    
    .cta-newsletter p {
        font-size: clamp(16px, 2.2vw, 20px);
    
    }
    
    .support-card {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Mobile Landscape & Below (991px) */
@media (max-width: 991px) {
    .cta-section {
        padding: clamp(50px, 8vw, 70px) 0;
    }
    
    .cta-container {
        width: 90%;
        gap: 35px;
    }
    
    .input-group-custom {
        flex-direction: column;
        gap: 15px;
    }
    
    .email-input {
        width: 100%;
    }
    
    .btn-subscribe {
        width: 100%;
        justify-content: center;
    }
    
    .support-card {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    
    .chat-icons {
        width: clamp(120px, 25vw, 160px);
    }
}

/* Mobile Portrait (576px - 767px) */
@media (max-width: 767px) {
    .cta-section {
        padding: 50px 0;
    }
    
    .cta-container {
        width: 92%;
        padding: 0 15px;
    }
    
    .cta-newsletter h2 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 16px;
        letter-spacing: -1px;
    }
    
    .cta-newsletter p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 25px;
    }
    
    .input-group-custom {
        gap: 12px;
    }
    
    .email-input {
        padding: 16px 24px;
        font-size: 15px;
        min-height: 54px;
        border-radius: 100px;
    }
    
    .btn-subscribe {
        padding: 14px 35px;
        font-size: 17px;
        border-radius: 100px;
    }
    
    .support-card {
        padding: 30px 25px;
        border-radius: 28px;
    }
    
    .chat-icons {
        width: 140px;
    }
    
    .support-info p {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    .btn-signup {
        width: 150px;
        height: 54px;
        font-size: 15px;
    }
    
    /* Toast responsive */
    #toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
    }
    
    .custom-toast {
        min-width: auto;
        width: 100%;
        max-width: 100%;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .cta-section {
        padding: 25px 0 !important;
    }
    
    .cta-container {
        width: 94%;
        padding: 0 10px;
    }
    
    .cta-newsletter h2 {
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 14px;
        letter-spacing: -0.8px;
    }
    
    .cta-newsletter p {
        font-size: 14px;
        margin-bottom: 22px;
    }
    
    .input-group-custom {
        gap: 10px;

    }
    
    .email-input {
        padding: 14px 20px;
        font-size: 14px;
        min-height: 50px;
    }
    
    .email-input::placeholder {
        font-size: 14px;
    }
    
    .btn-subscribe {
        padding: 12px 30px;
        font-size: 16px;
        width: 100%;
        max-width: 100%;
    }
    
    .support-card {
        padding: 25px 20px;
        border-radius: 24px;
        gap: 20px;
    }
    
    .chat-icons {
        width: 120px;
    }
    
    .support-info p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
    
    .btn-signup {
        width: 100%;
        /* max-width: 200px; */
        height: 50px;
        font-size: 14px;
        padding: 12px 25px;
    }
    .cta-newsletter{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .cta-newsletter h2 {
        font-size: 24px;
        letter-spacing: -0.6px;
    }
    
    .cta-newsletter p {
        font-size: 13px;
    }
    
    .email-input {
        padding: 12px 18px;
        font-size: 13px;
        min-height: 48px;
    }
    
    .btn-subscribe {
        padding: 12px 18px;
        font-size: 13px;
        min-height: 48px;
    }
    
    .support-card {
        padding: 22px 18px;
    }
    
    .chat-icons {
        width: 110px;
    }
    
    .support-info p {
        font-size: 13px;
    }
    
    .btn-signup {
        width: 100%;
        /* max-width: 180px; */
        height: 48px;
        font-size: 13px;
    }
}

/* Ensure form elements are touch-friendly on mobile */
@media (max-width: 767px) {
    .email-input,
    .btn-subscribe,
    .btn-signup {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

.btn-join{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.btn-join button{
    width: auto !important;
}







@media (max-width: 480px) {
a{
    width: 120px !important;
    height: 40px !important;
    padding: 13px 24px !important;
    font-size: 14px !important;
}
}