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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Manrope', Arial, sans-serif;
            background: #f8f9fa;
            color: #1a1a2e;
            min-height: 100vh;
            display: flex;
            justify-content: center;
        }


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

        .container {
            width: 100%;
            max-width: 460px;
            padding: 28px 16px 45px;

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


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

        .top-bar {
            background: #e8f5e9;
            color: #2e7d32;

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

            padding: 9px 18px;

            border-radius: 50px;

            margin-bottom: 25px;

            display: flex;
            align-items: center;
            gap: 8px;

            text-align: center;
        }


        .online-dot {
            width: 8px;
            height: 8px;

            background: #2e7d32;

            border-radius: 50%;

            animation: blink 1.2s infinite;
        }


        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .3;
            }

        }


        /* =====================================
           PROFILE IMAGE
        ===================================== */

        .avatar {
            width: 120px;
            height: 120px;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    #0066ff,
                    #00c6ff
                );

            position: relative;

            border: 4px solid #ffffff;

            box-shadow:
                0 5px 20px rgba(0, 0, 0, .12);

            overflow: hidden;

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

            margin-bottom: 8px;
        }


        .avatar img {
            width: 100%;
            height: 100%;

            object-fit: cover;
        }


        .verified {
            position: absolute;

            width: 28px;
            height: 28px;

            right: calc(50% - 58px);

            margin-top: 92px;

            background: #0066ff;
            color: #ffffff;

            border: 3px solid #f8f9fa;

            border-radius: 50%;

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

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

            z-index: 3;
        }


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

        .name {
            font-size: 25px;
            font-weight: 800;

            text-align: center;

            margin: 15px 0 5px;

            color: #1a1a2e;
        }


        .tagline {
            color: #0066ff;

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

            text-align: center;

            margin-bottom: 8px;
        }


        .rating {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 4px;

            margin-bottom: 22px;
        }


        .rating b {
            color: #ff9800;

            font-size: 16px;

            letter-spacing: 1px;
        }


        .rating small {
            color: #777;

            font-size: 11px;

            margin-left: 4px;
        }


        /* =====================================
           BLUE CTA BUTTON
        ===================================== */

        .btn {
            width: 100%;
            max-width: 380px;

            display: flex;

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

            gap: 8px;

            background:
                linear-gradient(
                    135deg,
                    #0066ff,
                    #0052cc
                );

            color: #ffffff;

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

            padding: 16px 18px;

            border-radius: 14px;

            text-align: center;

            text-decoration: none;

            box-shadow:
                0 5px 18px rgba(0, 102, 255, .28);

            transition:
                transform .15s,
                box-shadow .15s;
        }


        .btn:hover {
            transform: translateY(-2px);

            box-shadow:
                0 8px 24px rgba(0, 102, 255, .35);
        }


        .telegram-icon {
            width: 22px;
            height: 22px;

            display: flex;

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


        .telegram-icon svg {
            width: 21px;
            height: 21px;

            fill: currentColor;
        }


        .top-button {
            margin-bottom: 0;
        }


        .free-text {
            color: #777;

            font-size: 11px;

            margin-top: 9px;
            margin-bottom: 23px;

            text-align: center;
        }


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

        .stats {
            display: flex;

            gap: 9px;

            width: 100%;
            max-width: 380px;

            margin-bottom: 26px;
        }


        .stat {
            flex: 1;

            background: #ffffff;

            border-radius: 14px;

            padding: 15px 6px;

            text-align: center;

            box-shadow:
                0 2px 10px rgba(0, 0, 0, .06);

            border: 1px solid #f0f0f0;
        }


        .stat-num {
            font-size: 17px;

            font-weight: 800;

            color: #0066ff;
        }


        .stat-lbl {
            font-size: 10px;

            color: #888;

            margin-top: 3px;
        }


        /* =====================================
           HEADLINE
        ===================================== */

        .pitch {
            max-width: 390px;

            font-size: 20px;

            font-weight: 800;

            text-align: center;

            line-height: 1.45;

            margin-bottom: 8px;
        }


        .pitch span {
            color: #0066ff;
        }


        .sub {
            max-width: 370px;

            color: #777;

            font-size: 13px;

            line-height: 1.65;

            text-align: center;

            margin-bottom: 21px;
        }


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

        .urgency {
            background: #fff3e0;

            color: #e65100;

            border-radius: 50px;

            padding: 10px 18px;

            display: flex;

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

            text-align: center;

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 20px;

            width: 100%;
            max-width: 380px;
        }


        /* =====================================
           FEATURES
        ===================================== */

        .features {
            width: 100%;
            max-width: 380px;

            margin-top: 24px;
            margin-bottom: 20px;
        }


        .feat {
            background: #ffffff;

            border-radius: 12px;

            padding: 14px 16px;

            margin-bottom: 9px;

            display: flex;

            align-items: center;

            gap: 12px;

            box-shadow:
                0 2px 8px rgba(0, 0, 0, .04);

            border: 1px solid #f1f1f1;
        }


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

            background: #e3f2fd;

            border-radius: 9px;

            display: flex;

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

            font-size: 17px;

            flex-shrink: 0;
        }


        .feat-text {
            font-size: 13px;

            font-weight: 700;

            color: #1a1a2e;
        }


        .feat-text small {
            display: block;

            color: #888;

            font-weight: 500;

            margin-top: 3px;

            line-height: 1.4;
        }


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

        .trust {
            display: flex;

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

            gap: 6px;

            margin-bottom: 20px;

            font-size: 11px;

            color: #888;

            text-align: center;
        }


        .trust b {
            color: #2e7d32;
        }


        /* =====================================
           DARK BUTTON
        ===================================== */

        .btn-dark {
            width: 100%;
            max-width: 380px;

            display: block;

            background: #1a1a2e;

            color: #ffffff;

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

            padding: 15px;

            border-radius: 14px;

            text-align: center;

            text-decoration: none;

            transition:
                transform .15s,
                opacity .2s;
        }


        .btn-dark:hover {
            opacity: .92;

            transform: translateY(-1px);
        }


        .free-tag {
            color: #0066ff;

            font-size: 11px;

            font-weight: 700;

            margin-top: 8px;
            margin-bottom: 27px;
        }


        /* =====================================
           DISCLAIMER
        ===================================== */

        .disc {
            width: 100%;
            max-width: 380px;

            text-align: center;

            color: #999;

            font-size: 10px;

            line-height: 1.7;

            padding-top: 20px;

            border-top: 1px solid #e6e6e6;
        }


        .agency {
            margin-top: 13px;

            color: #777;

            font-size: 10px;

            font-weight: 700;
        }


        /* =====================================
           FLOATING TELEGRAM BUTTON
        ===================================== */

        .float {
            position: fixed;

            right: 18px;
            bottom: 18px;

            width: 56px;
            height: 56px;

            border-radius: 50%;

            background: #229ed9;

            color: #ffffff;

            display: flex;

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

            box-shadow:
                0 8px 25px rgba(34, 158, 217, .35);

            z-index: 100;
        }


        .float svg {
            width: 27px;

            fill: currentColor;
        }


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

        @media(max-width: 480px) {

            .container {
                padding-top: 23px;
            }


            .top-bar {
                margin-bottom: 22px;
            }


            .avatar {
                width: 110px;
                height: 110px;
            }


            .verified {
                right: calc(50% - 53px);

                margin-top: 85px;
            }


            .name {
                font-size: 23px;
            }


            .pitch {
                font-size: 18px;
            }


            .btn {
                font-size: 15px;
            }


            .stat-num {
                font-size: 15px;
            }


            .stat-lbl {
                font-size: 9px;
            }

        }