/* =========================================================
           ROOT
        ========================================================= */

        :root {
            --dark: #050b16;
            --dark-2: #08111f;
            --dark-3: #101c2d;

            --white: #ffffff;
            --black: #101828;

            --text: #182235;
            --muted: #687386;
            --light: #f7f9fc;

            --purple: #9747ff;
            --purple-2: #6c4dff;
            --blue: #1da1ff;
            --cyan: #00d8ff;
            --green: #20d9a1;

            --border: #e5e9f1;
            --dark-border: rgba(255,255,255,.09);

            --container: 1180px;

            --radius: 20px;

            --shadow:
                0 20px 60px rgba(24, 39, 75, .08);
        }


        /* =========================================================
           RESET
        ========================================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", sans-serif;
            color: var(--text);
            background: var(--white);
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
        }

        .container {
            width: min(var(--container), calc(100% - 40px));
            margin: auto;
        }


        /* =========================================================
           COMMON
        ========================================================= */

        .section {
            padding: 100px 0;
        }

        .section-tag {
            color: var(--purple-2);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .section-title {
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.08;
            letter-spacing: -2px;
            font-weight: 800;
        }

        .section-description {
            color: var(--muted);
            line-height: 1.75;
            font-size: 15px;
            max-width: 650px;
        }

        .gradient-text {
            background:
                linear-gradient(
                    90deg,
                    #8c3dff,
                    #bb4cff,
                    #3d9cff
                );

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

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

        .center-heading .section-description {
            margin: 15px auto 0;
        }


        /* =========================================================
           BUTTONS
        ========================================================= */

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            min-height: 48px;
            padding: 0 22px;

            border-radius: 50px;

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

            transition: .3s ease;
        }

        .btn-primary {
            color: white;

            background:
                linear-gradient(
                    100deg,
                    var(--purple),
                    var(--blue)
                );

            box-shadow:
                0 10px 30px rgba(116, 70, 255, .25);
        }

        .btn-primary:hover {
            color: white;
            transform: translateY(-3px);
            box-shadow:
                0 15px 35px rgba(116, 70, 255, .4);
        }

        .btn-dark {
            color: white;
            background: #0c1422;
            border: 1px solid rgba(255,255,255,.08);
        }

        .btn-dark:hover {
            color: white;
            transform: translateY(-3px);
        }

        .btn-light {
            color: var(--text);
            border: 1px solid var(--border);
            background: white;
        }

        .btn-light:hover {
            color: var(--text);
            border-color: var(--purple);
        }


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

        .header {
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;

            width: 100%;

            background: rgba(4, 10, 19, .82);

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

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

        .nav {
            /* height: 70px; */

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

        .logo {
            display: flex;
            align-items: center;
            gap: 9px;

            color: white;

            font-size: 20px;
            font-weight: 900;
            letter-spacing: -.8px;
        }

        .logo-icon {
            width: 34px;
            height: 34px;

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

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    #a43cff,
                    #168dff
                );

            box-shadow:
                0 0 25px rgba(130, 60, 255, .5);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 28px;

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

        .nav-links a {
            color: #aab3c2;
            font-size: 12px;
            font-weight: 600;

            transition: .25s;
        }

        .nav-links a:hover {
            color: white;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .search-btn {
            width: 38px;
            height: 38px;

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

            color: #b9c2d0;

            border: 0;
            background: transparent;

            cursor: pointer;
        }

        .mobile-toggle {
            display: none;

            width: 42px;
            height: 42px;

            border: 1px solid rgba(255,255,255,.1);
            border-radius: 10px;

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

            color: white;
            font-size: 22px;

            cursor: pointer;
        }


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

        .mobile-menu {
            position: fixed;
            z-index: 999;

            top: 70px;
            right: -100%;

            width: min(340px, 88%);

            min-height: calc(100vh - 70px);

            padding: 25px;

            background:
                linear-gradient(
                    180deg,
                    #08111f,
                    #050a14
                );

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

            transition: .35s ease;
        }

        .mobile-menu.active {
            right: 0;
        }

        .mobile-menu-inner {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mobile-menu a {
            display: flex;
            align-items: center;
            gap: 14px;

            padding: 15px;

            color: #bfc7d5;

            border-radius: 12px;

            font-size: 14px;
            font-weight: 600;
        }

        .mobile-menu a:hover {
            color: white;
            background: rgba(255,255,255,.05);
        }

        .mobile-menu .mobile-cta {
            margin-top: 15px;
            color: white;
            justify-content: center;
        }


        /* =========================================================
           SECTION 1 — HERO
        ========================================================= */

        .hero {
            position: relative;

            min-height: 780px;

            padding-top: 130px;
            padding-bottom: 70px;

            color: white;

            background:
                radial-gradient(
                    circle at 70% 35%,
                    rgba(61, 106, 255, .23),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 40% 70%,
                    rgba(143, 43, 255, .15),
                    transparent 30%
                ),

                linear-gradient(
                    115deg,
                    #040912,
                    #071426 55%,
                    #030711
                );

            overflow: hidden;
        }

        .hero::after {
            content: "";

            position: absolute;

            left: -10%;
            right: -10%;
            bottom: -170px;

            height: 350px;

            border-radius: 50%;

            background:
                radial-gradient(
                    ellipse,
                    rgba(27, 129, 255, .45),
                    transparent 60%
                );

            filter: blur(30px);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: .95fr 1.05fr;

            align-items: center;

            gap: 40px;
        }

        .hero-content {
            position: relative;
            z-index: 5;
        }

        .hero-tag {
            color: #8b7bff;

            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2px;

            margin-bottom: 16px;
        }

        .hero-title {
            max-width: 620px;

            font-size: clamp(45px, 6vw, 72px);

            line-height: .98;
            letter-spacing: -4px;

            font-weight: 900;
        }

        .hero-title span {
            display: block;
        }

        .hero-description {
            max-width: 500px;

            margin-top: 25px;

            color: #a9b3c2;

            font-size: 14px;
            line-height: 1.75;
        }

        .hero-buttons {
            display: flex;
            flex-wrap: wrap;

            gap: 12px;

            margin-top: 28px;
        }

        .watch-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            color: white;

            font-size: 13px;
            font-weight: 600;
        }

        .play {
            width: 42px;
            height: 42px;

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

            border: 1px solid rgba(255,255,255,.25);
            border-radius: 50%;

            background: rgba(255,255,255,.04);
        }

        .hero-stats {
            display: flex;
            gap: 45px;

            margin-top: 48px;
        }

        .hero-stat strong {
            display: block;

            font-size: 21px;
            font-weight: 800;
        }

        .hero-stat span {
            color: #8d98a9;

            font-size: 10px;
        }


        /* =========================================================
           HERO PHONE
        ========================================================= */

        .hero-visual {
            position: relative;

            min-height: 560px;
        }

        .phone-glow {
            position: absolute;

            width: 430px;
            height: 430px;

            top: 60px;
            left: 50%;

            transform: translateX(-50%);

            background:
                radial-gradient(
                    circle,
                    rgba(71, 105, 255, .35),
                    transparent 65%
                );

            filter: blur(20px);
        }

        .phone {
            position: absolute;

            z-index: 3;

            top: 5px;
            left: 50%;

            width: 245px;
            height: 490px;

            transform:
                translateX(-50%)
                rotate(1deg);

            border-radius: 40px;

            background:
                linear-gradient(
                    145deg,
                    #1b2434,
                    #050912
                );

            border: 5px solid #252f40;

            box-shadow:
                0 40px 80px rgba(0,0,0,.6),
                0 0 0 1px rgba(255,255,255,.08);
        }

        .phone::before {
            content: "";

            position: absolute;

            width: 90px;
            height: 22px;

            top: 7px;
            left: 50%;

            transform: translateX(-50%);

            border-radius: 20px;

            background: #02050a;

            z-index: 5;
        }

        .phone-screen {
            position: absolute;

            inset: 10px;

            padding: 35px 15px 15px;

            border-radius: 32px;

            overflow: hidden;

            background:
                linear-gradient(
                    160deg,
                    #071326,
                    #07101d
                );
        }

        .phone-small {
            color: #8995a9;
            font-size: 9px;
        }

        .phone-balance {
            margin-top: 5px;

            font-size: 22px;
            font-weight: 800;
        }

        .phone-growth {
            color: var(--green);

            font-size: 9px;
            margin-top: 4px;
        }

        .mini-chart {
            height: 100px;
            margin: 15px 0;

            position: relative;
        }

        .mini-chart svg {
            width: 100%;
            height: 100%;
        }

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

            padding: 9px 0;

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

        .asset-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .asset-icon {
            width: 25px;
            height: 25px;

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

            border-radius: 50%;

            font-size: 12px;
            font-weight: 800;
        }

        .btc {
            background: #ff9e18;
        }

        .eth {
            background: #686cff;
        }

        .sol {
            background: #20d8c5;
            color: #06100e;
        }

        .asset-name strong {
            display: block;
            font-size: 8px;
        }

        .asset-name small {
            color: #798497;
            font-size: 7px;
        }

        .asset-price {
            text-align: right;
        }

        .asset-price strong {
            display: block;
            font-size: 8px;
        }

        .asset-price span {
            color: var(--green);
            font-size: 7px;
        }


        /* FLOATING COINS */

        .floating-coin {
            position: absolute;

            z-index: 4;

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

            border-radius: 50%;

            font-weight: 900;

            box-shadow:
                0 25px 50px rgba(0,0,0,.4);
        }

        .bitcoin {
            width: 90px;
            height: 90px;

            left: 12%;
            top: 150px;

            font-size: 38px;

            color: #fff;

            background:
                linear-gradient(
                    145deg,
                    #ffbd3d,
                    #f27418
                );

            animation: float 5s ease-in-out infinite;
        }

        .ethereum {
            width: 82px;
            height: 82px;

            left: 8%;
            top: 265px;

            font-size: 36px;

            background:
                linear-gradient(
                    145deg,
                    #8175ff,
                    #4335d6
                );

            animation: float 4s ease-in-out infinite reverse;
        }

        .solana {
            width: 72px;
            height: 72px;

            right: 4%;
            bottom: 100px;

            color: #00e6ca;

            background:
                linear-gradient(
                    145deg,
                    #102a35,
                    #07141d
                );

            border: 1px solid #1fd8c4;

            animation: float 4.5s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-18px);
            }
        }


        /* =========================================================
           SECTION 2 — FEATURES
        ========================================================= */

        .features {
            background: white;
        }

        .feature-grid {
            display: grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap: 18px;

            margin-top: 45px;
        }

        .feature-card {
            padding: 28px 24px;

            border: 1px solid var(--border);
            border-radius: 18px;

            background: white;

            transition: .3s ease;
        }

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

            box-shadow: var(--shadow);

            border-color: #d7ccff;
        }

        .feature-icon {
            width: 45px;
            height: 45px;

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

            margin-bottom: 22px;

            border-radius: 14px;

            color: white;

            font-size: 19px;

            background:
                linear-gradient(
                    135deg,
                    #8652ff,
                    #5f61ff
                );
        }

        .feature-card:nth-child(2) .feature-icon {
            background:
                linear-gradient(
                    135deg,
                    #20d8a0,
                    #16a980
                );
        }

        .feature-card h3 {
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .feature-card p {
            color: var(--muted);

            font-size: 12px;
            line-height: 1.65;
        }


        /* =========================================================
           SECTION 3 — MARKET
        ========================================================= */

        .market-section {
            background: var(--dark);
            color: white;
        }

        .market-section .section-description {
            color: #8290a4;
        }

        .market-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;

            gap: 20px;
        }

        .market-grid {
            display: grid;

            grid-template-columns:
                repeat(5, 1fr);

            gap: 12px;

            margin-top: 35px;
        }

        .market-card {
            padding: 18px;

            border: 1px solid var(--dark-border);
            border-radius: 14px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.07),
                    rgba(255,255,255,.025)
                );
        }

        .market-card-top {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .market-icon {
            width: 36px;
            height: 36px;

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

            border-radius: 50%;

            font-size: 16px;
            font-weight: 800;
        }

        .market-name strong {
            display: block;
            font-size: 11px;
        }

        .market-name span {
            color: #748196;
            font-size: 9px;
        }

        .market-price {
            margin-top: 20px;
        }

        .market-price strong {
            display: block;
            font-size: 14px;
        }

        .market-price span {
            color: var(--green);
            font-size: 10px;
            font-weight: 600;
        }

        .market-chart {
            height: 40px;

            margin-top: 10px;
        }

        .market-chart svg {
            width: 100%;
            height: 100%;
        }


        /* =========================================================
           SECTION 4 — HOW IT WORKS
        ========================================================= */

        .steps-section {
            background: white;
        }

        .steps {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 50px;

            margin-top: 55px;

            position: relative;
        }

        .steps::before {
            content: "";

            position: absolute;

            left: 18%;
            right: 18%;
            top: 34px;

            border-top: 2px dashed #d9dff0;
        }

        .step {
            position: relative;
            z-index: 2;

            text-align: center;
        }

        .step-number {
            width: 40px;
            height: 40px;

            margin: auto;

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

            border-radius: 50%;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    #8a4dff,
                    #665cff
                );

            font-size: 12px;
            font-weight: 800;

            box-shadow:
                0 5px 20px rgba(112,76,255,.3);
        }

        .step-icon {
            width: 68px;
            height: 68px;

            margin: 18px auto;

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

            border-radius: 50%;

            background: #f1f4f9;

            font-size: 24px;
            color: #111a2b;
        }

        .step h3 {
            font-size: 14px;
            font-weight: 800;
        }

        .step p {
            max-width: 230px;

            margin: 8px auto 0;

            color: var(--muted);

            font-size: 11px;
            line-height: 1.7;
        }


        /* =========================================================
           SECTION 5 — SECURITY
        ========================================================= */

        .security-section {
            background: var(--dark);

            color: white;

            overflow: hidden;
        }

        .security-grid {
            display: grid;

            grid-template-columns:
                .8fr 1.2fr .8fr;

            align-items: center;

            gap: 30px;
        }

        .security-section .section-description {
            color: #8591a3;
        }

        .security-list {
            display: flex;
            flex-direction: column;

            gap: 18px;
        }

        .security-item {
            display: flex;
            align-items: center;

            gap: 10px;

            color: #dce2ea;

            font-size: 12px;
            font-weight: 600;
        }

        .security-check {
            width: 23px;
            height: 23px;

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

            border-radius: 50%;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    #7454ff,
                    #319cff
                );

            font-size: 10px;
        }

        .shield {
            position: relative;

            width: 260px;
            height: 290px;

            margin: auto;

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

            clip-path: polygon(
                50% 0%,
                90% 18%,
                86% 65%,
                50% 100%,
                14% 65%,
                10% 18%
            );

            background:
                linear-gradient(
                    145deg,
                    #237aff,
                    #713dff 60%,
                    #172a70
                );

            box-shadow:
                0 0 80px rgba(69, 116, 255, .35);
        }

        .shield-inner {
            width: 225px;
            height: 255px;

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

            clip-path: inherit;

            background:
                linear-gradient(
                    145deg,
                    #14284b,
                    #091325
                );
        }

        .shield-inner i {
            font-size: 70px;
            color: #6eb4ff;

            filter:
                drop-shadow(
                    0 0 20px rgba(76, 159, 255, .8)
                );
        }


        /* =========================================================
           SECTION 6 — TESTIMONIALS
        ========================================================= */

        .testimonials {
            background: white;
        }

        .testimonial-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 18px;

            margin-top: 45px;
        }

        .testimonial {
            padding: 28px;

            border: 1px solid var(--border);
            border-radius: 18px;

            background: white;

            box-shadow:
                0 10px 40px rgba(25, 40, 70, .035);
        }

        .quote {
            color: #d9def1;
            font-size: 35px;
            line-height: .7;
        }

        .testimonial p {
            margin-top: 12px;

            color: #5e6879;

            font-size: 12px;
            line-height: 1.7;
        }

        .user {
            display: flex;
            align-items: center;

            gap: 10px;

            margin-top: 22px;
        }

        .user-avatar {
            width: 38px;
            height: 38px;

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

            border-radius: 50%;

            color: white;
            font-weight: 800;

            background:
                linear-gradient(
                    135deg,
                    #8e4aff,
                    #319aff
                );
        }

        .user strong {
            display: block;
            font-size: 11px;
        }

        .user span {
            color: #8a94a4;
            font-size: 9px;
        }


        /* =========================================================
           SECTION 7 — CTA
        ========================================================= */

        .cta-section {
            position: relative;

            padding: 110px 0 130px;

            color: white;

            text-align: center;

            overflow: hidden;

            background:
                radial-gradient(
                    ellipse at 50% 100%,
                    rgba(38, 137, 255, .55),
                    transparent 45%
                ),

                linear-gradient(
                    180deg,
                    #050b15,
                    #02050a
                );
        }

        .earth {
            position: absolute;

            left: 50%;
            bottom: -300px;

            transform: translateX(-50%);

            width: 1000px;
            height: 420px;

            border-radius: 50%;

            border-top:
                3px solid #31a6ff;

            box-shadow:
                0 -15px 100px rgba(31, 157, 255, .5);

            background:
                radial-gradient(
                    ellipse at center top,
                    rgba(18, 102, 190, .5),
                    transparent 60%
                );
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-section .section-tag {
            color: #aa8bff;
        }

        .cta-title {
            font-size: clamp(38px, 5vw, 58px);

            letter-spacing: -2px;

            font-weight: 900;
        }

        .cta-description {
            max-width: 560px;

            margin: 15px auto 0;

            color: #8996a8;

            font-size: 13px;
            line-height: 1.7;
        }

        .cta-section .btn {
            margin-top: 28px;
        }


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

        .footer {
            padding: 65px 0 25px;

            background: #040911;

            color: white;
        }

        .footer-grid {
            display: grid;

            grid-template-columns:
                1.7fr
                repeat(3, 1fr)
                1.3fr;

            gap: 35px;
        }

        .footer-description {
            max-width: 230px;

            margin-top: 15px;

            color: #697586;

            font-size: 11px;
            line-height: 1.7;
        }

        .footer-title {
            margin-bottom: 17px;

            font-size: 11px;
            font-weight: 800;
        }

        .footer-links {
            display: flex;
            flex-direction: column;

            gap: 11px;
        }

        .footer-links a {
            color: #697586;

            font-size: 10px;

            transition: .2s;
        }

        .footer-links a:hover {
            color: white;
        }

        .socials {
            display: flex;
            gap: 8px;
        }

        .social {
            width: 34px;
            height: 34px;

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

            color: #9ba5b5;

            border-radius: 50%;

            background: #111b2a;

            transition: .25s;
        }

        .social:hover {
            color: white;

            transform: translateY(-3px);

            background:
                linear-gradient(
                    135deg,
                    #704dff,
                    #219cff
                );
        }

        .copyright {
            display: flex;
            justify-content: space-between;

            margin-top: 50px;
            padding-top: 20px;

            border-top: 1px solid rgba(255,255,255,.07);

            color: #596474;

            font-size: 9px;
        }


        /* =========================================================
           RESPONSIVE — 1100
        ========================================================= */

        @media (max-width: 1100px) {

            .nav-links {
                gap: 17px;
                margin-right: 15px;
            }

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

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

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

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

            .security-list:last-child {
                grid-column: 1 / -1;

                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;
            }

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

            .footer-grid > div:first-child {
                grid-column: 1 / -1;
            }
        }


        /* =========================================================
           RESPONSIVE — 768
        ========================================================= */

        @media (max-width: 768px) {

            .container {
                width: min(
                    var(--container),
                    calc(100% - 30px)
                );
            }

            .section {
                padding: 75px 0;
            }

            .nav {
                /* height: 64px; */
            }

            .nav-links,
            .nav-actions .search-btn,
            .nav-actions .btn {
                display: none;
            }

            .mobile-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mobile-menu {
                top: 64px;
                min-height: calc(100vh - 64px);
            }

            .hero {
                min-height: auto;

                padding-top: 115px;
                padding-bottom: 80px;
            }

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

                text-align: center;
            }

            .hero-content {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .hero-title {
                font-size: clamp(
                    42px,
                    11vw,
                    60px
                );

                letter-spacing: -3px;
            }

            .hero-description {
                font-size: 13px;
            }

            .hero-stats {
                gap: 25px;
            }

            .hero-visual {
                min-height: 510px;
            }

            .phone {
                width: 220px;
                height: 445px;
            }

            .bitcoin {
                left: 4%;
                top: 130px;
            }

            .ethereum {
                left: 0;
                top: 260px;
            }

            .solana {
                right: 0;
                bottom: 80px;
            }

            .market-heading {
                align-items: flex-start;
                flex-direction: column;
            }

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

            .steps {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            .steps::before {
                display: none;
            }

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

                text-align: center;
            }

            .security-section .section-description {
                margin: 15px auto;
            }

            .security-list:last-child {
                grid-column: auto;

                flex-direction: column;
                align-items: center;
            }

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

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

            .copyright {
                flex-direction: column;
                gap: 8px;
            }
        }


        /* =========================================================
           RESPONSIVE — 480
        ========================================================= */

        @media (max-width: 480px) {

            .hero-title {
                font-size: 43px;
            }

            .hero-buttons {
                flex-direction: column;
                width: 100%;
            }

            .hero-buttons .btn,
            .watch-btn {
                width: 100%;
            }

            .hero-stats {
                width: 100%;
                justify-content: space-between;
                gap: 10px;
            }

            .hero-stat strong {
                font-size: 18px;
            }

            .hero-visual {
                min-height: 440px;
            }

            .phone {
                width: 195px;
                height: 400px;
            }

            .bitcoin {
                width: 65px;
                height: 65px;

                font-size: 28px;
            }

            .ethereum {
                width: 60px;
                height: 60px;

                font-size: 25px;
            }

            .solana {
                width: 55px;
                height: 55px;

                font-size: 20px;
            }

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

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

            .market-card {
                padding: 20px;
            }

            .shield {
                width: 210px;
                height: 235px;
            }

            .shield-inner {
                width: 180px;
                height: 205px;
            }

            .shield-inner i {
                font-size: 55px;
            }

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

            .footer-grid > div:first-child {
                grid-column: 1 / -1;
            }
        }