/* ==========================================================
   KIVANISOFT
   AIBON-STYLE MAIN STYLESHEET
========================================================== */


/* ==========================================================
   1. RESET
========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    background: #08050f;
    color: #ffffff;
    overflow-x: hidden;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   2. VARIABLES
========================================================== */

:root {

    --bg: #08050f;
    --bg-deep: #05030a;

    --white: #ffffff;
    --muted: #aaa5b5;

    --purple: #8d45ff;
    --purple-light: #bd78ff;
    --purple-dark: #6b20e9;

    --pink: #f04dff;

    --border: rgba(255, 255, 255, 0.12);

    --container: 1180px;
}


/* ==========================================================
   3. GLOBAL BACKGROUND
========================================================== */

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(124, 44, 255, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 65%,
            rgba(104, 35, 255, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(225, 51, 255, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #090611 0%,
            #08050f 55%,
            #05030a 100%
        );
}


/* ==========================================================
   4. BACKGROUND GLOW ELEMENTS
========================================================== */

.page-glow {
    position: fixed;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: -1;

    opacity: 0.18;
}

.page-glow-one {
    top: 5%;
    left: -220px;

    background: #762cff;
}

.page-glow-two {
    right: -220px;
    top: 40%;

    background: #c42cff;
}


/* ==========================================================
   5. CONTAINERS
========================================================== */

.nav-container,
.hero-container {
    width: min(var(--container), calc(100% - 50px));
    margin: 0 auto;
}


/* ==========================================================
   6. NAVBAR
========================================================== */

.navbar {
    width: 100%;

    position: relative;
    z-index: 100;

    background: rgba(7, 4, 13, 0.72);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nav-container {
    min-height: 82px;

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


/* ==========================================================
   7. KIVANISOFT LOGO
========================================================== */

.brand {
    display: inline-flex;
    align-items: center;

    font-size: 26px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: -1.4px;

    white-space: nowrap;
}

.brand-kivani {
    color: #ffffff;
}

.brand-soft {
    color: var(--purple-light);
}


/* ==========================================================
   8. NAVIGATION
========================================================== */

.nav-menu {
    display: flex;
    align-items: center;

    gap: 38px;
}

.nav-menu a {
    position: relative;

    color: #c8c3d0;

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

    transition: 0.3s ease;
}

.nav-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--purple-light);

    transition: width 0.3s ease;
}

.nav-menu a:hover {
    color: #ffffff;
}

.nav-menu a:hover::after {
    width: 100%;
}


/* ==========================================================
   9. NAV ACTIONS
========================================================== */

.nav-actions {
    display: flex;
    align-items: center;

    gap: 12px;
}

.nav-login {
    padding: 11px 18px;

    color: #ddd9e5;

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

    transition: 0.3s ease;
}

.nav-login:hover {
    color: #ffffff;
}

.nav-register {
    padding: 12px 20px;

    border: 1px solid rgba(164, 93, 255, 0.65);

    border-radius: 9px;

    background: rgba(128, 48, 255, 0.12);

    color: #ffffff;

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

    box-shadow:
        0 0 18px rgba(123, 44, 255, 0.08);

    transition: 0.3s ease;
}

.nav-register:hover {
    background: rgba(128, 48, 255, 0.22);

    border-color: var(--purple-light);

    transform: translateY(-2px);
}


/* ==========================================================
   10. HERO
========================================================== */

.hero {
    position: relative;

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

    padding: 75px 0 105px;

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

    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 15%;

    width: 700px;
    height: 500px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(137, 53, 255, 0.13),
            transparent 68%
        );

    pointer-events: none;
}

.hero-container {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    z-index: 2;
}


/* ==========================================================
   11. LIVE MEMBERS PILL
========================================================== */

.opportunity-pill {
    position: relative;

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

    gap: 12px;

    min-height: 52px;

    padding: 13px 28px;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            rgba(21, 12, 37, 0.95),
            rgba(17, 9, 31, 0.88)
        );

    border: 1px solid rgba(155, 75, 255, 0.65);

    box-shadow:
        0 0 0 1px rgba(157, 71, 255, 0.05),
        0 0 28px rgba(128, 43, 255, 0.12),
        inset 0 0 22px rgba(135, 52, 255, 0.05);

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

    margin-bottom: 48px;

    overflow: visible;

    animation: pillGlow 3s ease-in-out infinite;
}

@keyframes pillGlow {

    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(157, 71, 255, 0.05),
            0 0 28px rgba(128, 43, 255, 0.12),
            inset 0 0 22px rgba(135, 52, 255, 0.05);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(157, 71, 255, 0.12),
            0 0 38px rgba(128, 43, 255, 0.22),
            inset 0 0 25px rgba(135, 52, 255, 0.08);
    }
}


/* ==========================================================
   12. CURVED SIDE RING EFFECT
========================================================== */

.opportunity-pill::before,
.opportunity-pill::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 35px;
    height: 30px;

    transform: translateY(-50%);

    border-top: 1px solid rgba(180, 100, 255, 0.7);
    border-bottom: 1px solid rgba(180, 100, 255, 0.25);

    opacity: 0.8;

    pointer-events: none;
}

.opportunity-pill::before {
    left: -23px;

    border-right: 0;
    border-radius: 30px 0 0 30px;
}

.opportunity-pill::after {
    right: -23px;

    border-left: 0;
    border-radius: 0 30px 30px 0;
}


/* ==========================================================
   13. LIVE INDICATOR
========================================================== */

.live-indicator {
    position: relative;

    width: 14px;
    height: 14px;

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

    flex-shrink: 0;
}

.live-dot {
    position: relative;

    z-index: 5;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #c66cff;

    box-shadow:
        0 0 7px #c66cff,
        0 0 17px rgba(198, 108, 255, 0.95);

    animation: liveBlink 1.3s ease-in-out infinite;
}

.live-indicator::before,
.live-indicator::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 12px;
    height: 12px;

    border: 1px solid rgba(195, 105, 255, 0.85);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    animation: liveWave 2.2s ease-out infinite;
}

.live-indicator::after {
    animation-delay: 1.1s;
}

@keyframes liveBlink {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.7);
        opacity: 0.6;
    }
}

@keyframes liveWave {

    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    70% {
        opacity: 0.2;
    }

    100% {
        transform: translate(-50%, -50%) scale(3.8);
        opacity: 0;
    }
}


/* ==========================================================
   14. LIVE TEXT
========================================================== */

.pill-text {
    color: #e8e3ed;

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

    letter-spacing: 0.1px;

    white-space: nowrap;
}

.pill-text strong {
    color: #ffffff;

    font-weight: 800;
}


/* ==========================================================
   15. TRUSTED
========================================================== */

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

    gap: 18px;

    margin-bottom: 25px;
}

.trusted-text {
    color: #ffffff;

    font-size: clamp(24px, 3vw, 40px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.7px;
}

.trusted-stars {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}

.star {
    display: inline-block;

    color: var(--purple-light);

    font-size: clamp(26px, 3.3vw, 43px);

    line-height: 1;

    transform-origin: center;

    text-shadow:
        0 0 12px rgba(184, 102, 255, 0.7);

    animation: starPulse 1.8s ease-in-out infinite;
}

.star-two {
    animation-delay: 0.2s;
}

.star-three {
    animation-delay: 0.4s;
}

@keyframes starPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.16) translateY(-2px);
        opacity: 1;
    }
}


/* ==========================================================
   16. HERO TITLE
========================================================== */

.hero-title {
    position: relative;

    margin: 0;

    min-height: 125px;

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

    overflow: hidden;

    font-size: clamp(68px, 9vw, 125px);

    line-height: 0.98;

    letter-spacing: -6px;

    font-weight: 900;
}


/* ==========================================================
   17. CHANGING WORD
========================================================== */

.changing-word {
    display: inline-block;

    background:
        linear-gradient(
            100deg,
            #8e43ff 5%,
            #bd66ff 48%,
            #ee63ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    transform: translateY(0);

    opacity: 1;

    animation: wordRise 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================
   18. WORD ENTERING FROM BELOW
========================================================== */

@keyframes wordRise {

    0% {
        opacity: 0;

        transform:
            translateY(85px)
            scale(0.96);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* Classes JS can use during changing words */

.changing-word.word-exit {
    animation:
        wordExit 0.38s ease-in forwards;
}

.changing-word.word-enter {
    animation:
        wordRise 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wordExit {

    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-35px);
    }
}


/* ==========================================================
   19. HERO DESCRIPTION
========================================================== */

.hero-description {
    width: min(720px, 100%);

    margin-top: 30px;
    margin-bottom: 39px;

    color: #aaa5b5;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 500;
}


/* ==========================================================
   20. BUTTON ROW
========================================================== */

.hero-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 16px;

    width: auto;

    margin-bottom: 50px;
}


/* ==========================================================
   21. BUTTONS
========================================================== */

.hero-button {
    position: relative;

    min-width: 190px;

    min-height: 57px;

    padding: 15px 24px;

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

    gap: 11px;

    border-radius: 10px;

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

    overflow: visible;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* ==========================================================
   22. PRIMARY BUTTON
========================================================== */

.hero-button-primary {
    color: #ffffff;

    border: 1px solid rgba(177, 105, 255, 0.9);

    background:
        linear-gradient(
            110deg,
            #7130d9,
            #8f43ff
        );

    box-shadow:
        0 0 25px rgba(131, 48, 255, 0.25);
}


/* ==========================================================
   23. SECONDARY BUTTON
========================================================== */

.hero-button-secondary {
    color: #e8e3ed;

    background:
        rgba(17, 10, 28, 0.65);

    border: 1px solid rgba(153, 82, 255, 0.48);

    box-shadow:
        0 0 20px rgba(114, 42, 255, 0.07);
}


/* ==========================================================
   ALWAYS-ANIMATED HERO BUTTONS
========================================================== */

.hero-button {
    position: relative;

    overflow: visible;

    /* Continuous gentle movement */
    animation: buttonShake 2.4s ease-in-out infinite;
}


/* ==========================================================
   OUTWARD WAVES
========================================================== */

.hero-button::before,
.hero-button::after {
    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    border: 1px solid rgba(173, 91, 255, 0.65);

    pointer-events: none;

    opacity: 0;

    z-index: -1;
}


/* First wave */

.hero-button::before {
    animation: buttonWave 2.2s ease-out infinite;
}


/* Second wave */

.hero-button::after {
    animation: buttonWave 2.2s ease-out 1.1s infinite;
}


/* ==========================================================
   WAVE ANIMATION
========================================================== */

@keyframes buttonWave {

    0% {
        transform: scale(1);

        opacity: 0.65;
    }

    70% {
        opacity: 0.2;
    }

    100% {
        transform: scale(1.22);

        opacity: 0;
    }
}


/* ==========================================================
   GENTLE SHAKING
========================================================== */

@keyframes buttonShake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    10% {
        transform: translateX(-1px) rotate(-0.5deg);
    }

    20% {
        transform: translateX(1px) rotate(0.5deg);
    }

    30% {
        transform: translateX(-1px) rotate(-0.4deg);
    }

    40% {
        transform: translateX(1px) rotate(0.4deg);
    }

    50% {
        transform: translateX(0) rotate(0deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.hero-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 32px rgba(139, 58, 255, 0.32);
}


/* ==========================================================
   PRIMARY BUTTON — SLIGHTLY STRONGER GLOW
========================================================== */

.hero-button-primary {
    animation-delay: 0s;
}


/* ==========================================================
   SECOND BUTTON — OFFSET ANIMATION
========================================================== */

.hero-button-secondary {
    animation-delay: 0.35s;
}


/* ==========================================================
   27. BUTTON ARROW
========================================================== */

.button-arrow {
    font-size: 19px;

    transition: transform 0.25s ease;
}

.hero-button:hover .button-arrow {
    transform: translateX(5px);
}


/* ==========================================================
   28. SOCIAL PROOF
========================================================== */

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

    gap: 16px;
}


/* ==========================================================
   29. INITIAL CIRCLES
========================================================== */

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

    padding-left: 10px;
}

.initial-circle {
    width: 43px;
    height: 43px;

    margin-left: -10px;

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

    border-radius: 50%;

    border: 2px solid #08050f;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06);

    animation:
        circleFloat 3s ease-in-out infinite;
}


/* Different colors */

.circle-one {
    background:
        linear-gradient(135deg, #5c2cff, #9c5cff);
}

.circle-two {
    background:
        linear-gradient(135deg, #ff5c8a, #ff8b56);

    animation-delay: 0.15s;
}

.circle-three {
    background:
        linear-gradient(135deg, #18a7ff, #554cff);

    animation-delay: 0.3s;
}

.circle-four {
    background:
        linear-gradient(135deg, #14b887, #20d99a);

    animation-delay: 0.45s;
}

.plus-circle {
    background:
        linear-gradient(135deg, #8b42ff, #d157ff);

    font-size: 20px;

    animation-delay: 0.6s;
}

@keyframes circleFloat {

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

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


/* ==========================================================
   30. SOCIAL PROOF TEXT
========================================================== */

.proof-text {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #a9a4b2;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}

.proof-text strong {
    color: #ffffff;

    font-size: 15px;

    font-weight: 800;
}


/* ==========================================================
   31. FUTURE SECTIONS
========================================================== */

.placeholder-section {
    min-height: 1px;
}


/* ==========================================================
   32. TABLET
========================================================== */

@media screen and (max-width: 900px) {

    .nav-menu {
        display: none;
    }

    .hero {
        padding-top: 65px;
    }

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

        letter-spacing: -4px;
    }

    .trusted-text,
    .star {
        font-size: 34px;
    }
}


/* ==========================================================
   MOBILE — COMPACT AIBON-STYLE SPACING
========================================================== */

@media screen and (max-width: 600px) {

    .nav-container,
    .hero-container {
        width: calc(100% - 28px);
    }


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

    .nav-container {
        min-height: 64px;
    }

    .brand {
        font-size: 22px;
    }

    .nav-login {
        font-size: 12px;
        padding: 8px 8px;
    }

    .nav-register {
        font-size: 12px;
        padding: 9px 12px;
    }


    /* ======================================================
       HERO — REDUCE GAP AFTER HEADER
    ====================================================== */

    .hero {
    min-height: auto;

    padding-top: 30px;
    padding-bottom: 25px;
}


    /* ======================================================
       LIVE BANNER
    ====================================================== */

    .opportunity-pill {

        min-height: 46px;

        padding: 10px 17px;

        gap: 8px;

        margin-bottom: 27px;

        max-width: calc(100vw - 45px);
    }

    .pill-text {
        font-size: 11px;
    }


    /* ======================================================
       TRUSTED
    ====================================================== */

    .trusted {

        gap: 10px;

        margin-bottom: 10px;
    }

    .trusted-text,
    .star {
        font-size: 22px;
    }

    .trusted-stars {
        gap: 2px;
    }


    /* ======================================================
   DO MORE / EARN MORE / CASHOUT MORE
   MOBILE — KEEP WORDS ON ONE LINE
====================================================== */

.hero-title {

    width: 100%;
    max-width: 100%;

    min-height: 58px;

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

    margin: 0;

    font-size: 46px;

    line-height: 1;

    letter-spacing: -2px;

    white-space: nowrap;

    overflow: visible;
}

.changing-word {

    display: inline-block;

    width: auto;
    max-width: none;

    white-space: nowrap;

    font-size: inherit;

    line-height: 1;

    letter-spacing: inherit;
}


    /* ======================================================
       DESCRIPTION
    ====================================================== */

    .hero-description {

        width: 100%;

        margin-top: 16px;

        margin-bottom: 22px;

        font-size: 14px;

        line-height: 1.55;
    }


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

    .hero-buttons {

        width: 100%;

        display: flex;

        flex-direction: row;

        gap: 9px;

        margin-bottom: 27px;
    }

    .hero-button {

        width: 50%;

        min-width: 0;

        min-height: 51px;

        padding: 12px 8px;

        font-size: 12px;

        gap: 7px;
    }

    .button-arrow {
        font-size: 16px;
    }


    /* ======================================================
       SOCIAL PROOF
    ====================================================== */

    .social-proof {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 9px;
    }

    .initials {
        padding-left: 8px;
    }

    .initial-circle {

        width: 35px;
        height: 35px;

        margin-left: -8px;

        font-size: 9px;
    }

    .plus-circle {
        font-size: 17px;
    }

    .proof-text {

        font-size: 11px;

        gap: 3px;
    }

    .proof-text strong {
        font-size: 12px;
    }

}

/* ==========================================================
   34. SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .nav-container,
    .hero-container {
        width: calc(100% - 20px);
    }

    .brand {
        font-size: 20px;
    }

    .nav-login {
        padding: 8px 6px;
    }

    .nav-register {
        padding: 9px 9px;
    }


    .opportunity-pill {
        max-width: calc(100vw - 30px);

        padding: 10px 13px;
    }

    .pill-text {
        font-size: 10px;
    }


    .trusted-text,
    .star {
        font-size: 25px;
    }


    .hero-title {
    font-size: 35px;

    letter-spacing: -1.8px;

    white-space: nowrap;
}

.changing-word {
    white-space: nowrap;
}


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


    .hero-button {
        min-height: 49px;

        font-size: 11px;
    }


    .initial-circle {
        width: 32px;
        height: 32px;

        margin-left: -7px;
    }

    .proof-text {
        font-size: 10px;
    }

    .proof-text strong {
        font-size: 11px;
    }
}


/* ==========================================================
   35. VERY SMALL PHONES
========================================================== */

@media screen and (max-width: 340px) {

    .nav-login {
        display: none;
    }

    .brand {
        font-size: 19px;
    }

    .hero-title {
    font-size: 32px;

    letter-spacing: -1.5px;

    white-space: nowrap;
}

    .trusted-text,
    .star {
        font-size: 23px;
    }

    .hero-button {
        padding-left: 5px;
        padding-right: 5px;
    }

    .initial-circle {
        width: 29px;
        height: 29px;
    }
}

/* ==========================================================
   INCOME STREAM — CHAT WITH FOREIGNERS
========================================================== */

.income-stream {
    position: relative;

    width: 100%;

    padding: 90px 0 110px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(132, 42, 255, 0.13),
            transparent 45%
        );
}

.income-container {
    width: min(1080px, calc(100% - 36px));

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(153, 76, 255, 0.35);

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(25, 12, 43, 0.97),
            rgba(10, 6, 20, 0.98)
        );

    box-shadow:
        0 0 50px rgba(110, 35, 255, 0.10),
        inset 0 0 50px rgba(123, 44, 255, 0.03);
}


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

.income-header {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 30px 32px;

    background:
        linear-gradient(
            105deg,
            #46117b,
            #7a1680,
            #a51d80
        );

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

.income-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

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

    border-radius: 17px;

    background: rgba(255,255,255,0.12);

    border: 1px solid rgba(255,255,255,0.18);

    font-size: 30px;

    box-shadow:
        inset 0 0 20px rgba(255,255,255,0.08);
}

.income-heading {
    flex: 1;
}

.income-label {
    display: block;

    margin-bottom: 5px;

    color: #e6cfff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;
}

.income-heading h2 {
    color: white;

    font-size: 32px;

    line-height: 1.1;

    font-weight: 900;

    margin-bottom: 7px;
}

.income-heading p {
    color: rgba(255,255,255,0.75);

    font-size: 15px;
}

.income-status {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 11px 18px;

    border: 1px solid rgba(126,255,91,0.35);

    border-radius: 999px;

    color: #d5ffb9;

    background: rgba(86,255,54,0.08);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}

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

    border-radius: 50%;

    background: #74ff38;

    box-shadow:
        0 0 10px #74ff38;

    animation: statusBlink 1.3s infinite;
}

@keyframes statusBlink {

    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.7);
    }
}


/* ==========================================================
   LIVE CHAT BAR
========================================================== */

.chat-live-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 32px 17px;

    gap: 20px;
}

.chat-live-left {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #a9a2b6;

    font-size: 15px;
}

.chat-live-left strong {
    color: white;

    font-size: 19px;
}

.chat-live-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #30d46b;

    box-shadow:
        0 0 10px rgba(48,212,107,.8);

    animation: chatLivePulse 1.5s infinite;
}

@keyframes chatLivePulse {

    0%,100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.65);
        opacity: .55;
    }
}

.chat-tags {
    display: flex;
    gap: 8px;
}

.chat-tag {
    padding: 8px 13px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.live-tag {
    color: #74ffad;

    border: 1px solid rgba(63,255,139,.35);

    background: rgba(40,255,112,.06);
}

.popular-tag {
    color: #f0cfff;

    border: 1px solid rgba(202,106,255,.30);

    background: rgba(188,72,255,.08);
}


/* ==========================================================
   FOREIGN USERS
========================================================== */

.foreign-users {
    display: grid;

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

    gap: 10px;

    padding: 10px 28px 25px;

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

.foreign-user {
    position: relative;

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

    gap: 7px;

    color: #aaa4b5;

    font-size: 13px;

    font-weight: 700;
}

.foreign-avatar {
    position: relative;

    width: 67px;
    height: 67px;

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

    border-radius: 50%;

    font-size: 29px;

    background: #120b20;

    border: 2px solid #8b42ff;

    box-shadow:
        0 0 18px rgba(139,66,255,.18);

    animation: avatarFloat 3s ease-in-out infinite;
}

.foreign-user:nth-child(2) .foreign-avatar {
    border-color: #bd62ff;
    animation-delay: .15s;
}

.foreign-user:nth-child(3) .foreign-avatar {
    border-color: #ff4da6;
    animation-delay: .3s;
}

.foreign-user:nth-child(4) .foreign-avatar {
    border-color: #7847ff;
    animation-delay: .45s;
}

.foreign-user:nth-child(5) .foreign-avatar {
    border-color: #f04da5;
    animation-delay: .6s;
}

.foreign-user:nth-child(6) .foreign-avatar {
    border-color: #b46cff;
    animation-delay: .75s;
}

@keyframes avatarFloat {

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

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

.user-live-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    right: calc(50% - 31px);
    bottom: 24px;

    border-radius: 50%;

    background: #29c968;

    border: 2px solid #08050f;

    box-shadow:
        0 0 8px rgba(41,201,104,.8);
}


/* ==========================================================
   CHAT FEED
========================================================== */

.chat-feed {
    padding: 24px 28px 15px;

    display: flex;
    flex-direction: column;

    gap: 21px;
}

.chat-row {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    animation: chatAppear .6s ease both;
}

.chat-row:nth-child(2) {
    animation-delay: .15s;
}

.chat-row:nth-child(3) {
    animation-delay: .3s;
}

.chat-row:nth-child(4) {
    animation-delay: .45s;
}

@keyframes chatAppear {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-avatar {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: rgba(109,48,220,.10);

    border: 1px solid rgba(148,76,255,.35);

    font-size: 20px;
}

.chat-message-area {
    flex: 1;

    min-width: 0;
}

.chat-user-line {
    display: flex;
    align-items: baseline;

    gap: 8px;

    margin-bottom: 7px;
}

.chat-user-line strong {
    color: #ffffff;

    font-size: 15px;
}

.chat-user-line span {
    color: #777181;

    font-size: 11px;
}

.chat-bubble {
    max-width: 650px;

    padding: 13px 17px;

    border-radius: 5px 17px 17px 17px;

    color: #c6c0d0;

    background: rgba(28,20,42,.82);

    border: 1px solid rgba(151,83,255,.17);

    font-size: 14px;

    line-height: 1.5;
}

.earning-badge {
    flex-shrink: 0;

    padding: 7px 10px;

    border-radius: 999px;

    color: #c9ff83;

    background: rgba(143,203,36,.08);

    border: 1px solid rgba(168,221,67,.24);

    font-size: 11px;

    font-weight: 800;

    animation: earningGlow 2.2s ease-in-out infinite;
}

@keyframes earningGlow {

    0%,100% {
        box-shadow: 0 0 0 rgba(173,255,69,0);
    }

    50% {
        box-shadow: 0 0 14px rgba(173,255,69,.13);
    }
}


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

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

    padding: 22px 28px;

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

    background: rgba(6,4,13,.45);
}

.just-paid {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #aaa5b4;

    font-size: 14px;
}

.just-paid strong {
    color: #cfff6d;

    font-weight: 900;
}

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

    border-radius: 50%;

    background: #6cce22;

    box-shadow:
        0 0 10px rgba(108,206,34,.8);
}

.chat-now-button {
    position: relative;

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

    gap: 10px;

    min-width: 165px;

    padding: 14px 23px;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            100deg,
            #7134e9,
            #ed3fa5
        );

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 0 25px rgba(153,48,255,.20);

    animation: chatButtonFloat 2.5s ease-in-out infinite;
}

.chat-now-button::before,
.chat-now-button::after {
    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    border: 1px solid rgba(206,113,255,.6);

    opacity: 0;

    pointer-events: none;
}

.chat-now-button::before {
    animation: chatButtonWave 2.2s ease-out infinite;
}

.chat-now-button::after {
    animation: chatButtonWave 2.2s ease-out 1.1s infinite;
}

@keyframes chatButtonWave {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes chatButtonFloat {

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

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


/* ==========================================================
   TRUST INDICATORS
========================================================== */

.chat-trust {
    display: flex;
    justify-content: center;
    gap: 24px;

    padding: 16px 20px 21px;

    color: #777181;

    font-size: 11px;
}


/* ==========================================================
   COMPACT LIVE GLOBAL CHAT — MOBILE
========================================================== */

@media screen and (max-width: 600px) {

    /* Section spacing */
    .income-stream {
        padding: 0 0 50px;
    }


    /* Main dashboard card */
    .income-container {
        width: calc(100% - 28px);
        max-width: 420px;

        margin: 0 auto;

        border-radius: 20px;

        box-shadow:
            0 0 35px rgba(110, 35, 255, 0.10);
    }


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

    .income-header {
        padding: 17px 15px;

        gap: 10px;

        min-height: 86px;
    }

    .income-icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;

        font-size: 20px;
    }

    .income-label {
        font-size: 8px;

        letter-spacing: 1.7px;

        margin-bottom: 3px;
    }

    .income-heading h2 {
        font-size: 20px;

        margin-bottom: 3px;
    }

    .income-heading p {
        font-size: 10px;

        line-height: 1.3;
    }

    .income-status {
        padding: 6px 9px;

        font-size: 8px;

        gap: 5px;
    }

    .status-dot {
        width: 6px;
        height: 6px;
    }


    /* ======================================================
       LIVE CHAT COUNT
    ====================================================== */

    .chat-live-bar {
        padding: 13px 15px 10px;

        gap: 8px;

        flex-direction: row;

        align-items: center;
    }

    .chat-live-left {
        gap: 7px;

        font-size: 10px;
    }

    .chat-live-left strong {
        font-size: 13px;
    }

    .chat-live-dot {
        width: 7px;
        height: 7px;
    }

    .chat-tags {
        gap: 5px;
    }

    .chat-tag {
        padding: 5px 8px;

        font-size: 7px;

        letter-spacing: .6px;
    }


    /* ======================================================
       FOREIGN USERS
    ====================================================== */

    .foreign-users {
        grid-template-columns:
            repeat(6, 1fr);

        gap: 3px;

        padding: 8px 11px 15px;
    }

    .foreign-user {
        gap: 4px;

        font-size: 8px;
    }

    .foreign-avatar {
        width: 42px;
        height: 42px;

        font-size: 19px;

        border-width: 1.5px;
    }

    .user-live-dot {
        width: 7px;
        height: 7px;

        right: calc(50% - 22px);

        bottom: 18px;
    }


    /* ======================================================
       CHAT FEED
    ====================================================== */

    .chat-feed {
        padding: 13px 11px 8px;

        gap: 11px;

        max-height: 300px;

        overflow: hidden;
    }

    .chat-row {
        gap: 7px;
    }

    .chat-avatar {
        width: 29px;
        height: 29px;

        font-size: 14px;
    }

    .chat-user-line {
        gap: 5px;

        margin-bottom: 3px;
    }

    .chat-user-line strong {
        font-size: 10px;
    }

    .chat-user-line span {
        font-size: 7px;
    }

    .chat-bubble {
        padding: 7px 9px;

        font-size: 9px;

        line-height: 1.3;

        border-radius: 4px 10px 10px 10px;
    }

    .earning-badge {
        padding: 4px 5px;

        font-size: 7px;

        white-space: nowrap;
    }


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

    .chat-footer {
        padding: 12px 11px;

        gap: 7px;
    }

    .just-paid {
        gap: 4px;

        font-size: 9px;
    }

    .just-paid strong {
        font-size: 9px;
    }

    .paid-dot {
        width: 6px;
        height: 6px;
    }

    .chat-now-button {
        min-width: 105px;

        padding: 9px 11px;

        font-size: 10px;

        gap: 6px;
    }


    /* ======================================================
       TRUST INDICATORS
    ====================================================== */

    .chat-trust {
        gap: 8px;

        padding: 9px 8px 12px;

        font-size: 7px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .income-header {
        padding: 21px 15px;
    }

    .income-heading h2 {
        font-size: 21px;
    }

    .income-heading p {
        font-size: 11px;
    }

    .income-status {
        display: none;
    }

    .foreign-users {
        gap: 17px 4px;
    }

    .foreign-avatar {
        width: 51px;
        height: 51px;
    }

    .chat-bubble {
        font-size: 11px;
    }

    .earning-badge {
        font-size: 8px;
    }

    .chat-now-button {
        min-width: 115px;

        font-size: 11px;
    }
}

/* ==========================================================
   INCOME STREAMS — INTRODUCTION
========================================================== */

.income-intro {
    position: relative;

    width: 100%;

    padding: 90px 20px 75px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(123, 45, 255, 0.08),
            transparent 60%
        );
}


.income-intro-container {
    position: relative;

    width: min(1100px, 100%);

    margin: 0 auto;

    z-index: 2;
}


/* ==========================================================
   INCOME STREAMS LABEL
========================================================== */

.income-intro-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 35px;

    color: #36e66b;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.income-intro-dot {

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #31e86a;

    box-shadow:
        0 0 10px rgba(49, 232, 106, 0.9),
        0 0 24px rgba(49, 232, 106, 0.45);

    animation:
        incomeDotPulse 1.6s ease-in-out infinite;
}


@keyframes incomeDotPulse {

    0%,
    100% {
        transform: scale(1);

        opacity: 1;

        box-shadow:
            0 0 10px rgba(49, 232, 106, 0.9),
            0 0 24px rgba(49, 232, 106, 0.45);
    }

    50% {
        transform: scale(0.72);

        opacity: 0.65;

        box-shadow:
            0 0 5px rgba(49, 232, 106, 0.7),
            0 0 12px rgba(49, 232, 106, 0.25);
    }
}


/* ==========================================================
   MAIN HEADING
========================================================== */

.income-intro-title {

    max-width: 1000px;

    margin: 0 auto;

    color: #ffffff;

    font-size: clamp(52px, 6.2vw, 88px);

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -4px;
}


.income-intro-title span {

    display: inline-block;

    background:
        linear-gradient(
            100deg,
            #873cff 0%,
            #bd5cff 45%,
            #ee48b4 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.income-intro-description {

    max-width: 900px;

    margin: 38px auto 0;

    color: #aaa5b5;

    font-size: clamp(18px, 2vw, 28px);

    line-height: 1.55;

    font-weight: 400;
}


/* ==========================================================
   SUBTLE INTRO ANIMATION
========================================================== */

.income-intro-container {

    animation:
        incomeIntroAppear 0.9s ease both;
}


@keyframes incomeIntroAppear {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media screen and (max-width: 600px) {

    .income-intro {

        padding:
            55px
            16px
            45px;
    }


    .income-intro-label {

        gap: 8px;

        margin-bottom: 22px;

        font-size: 11px;

        letter-spacing: 3px;
    }


    .income-intro-dot {

        width: 11px;
        height: 11px;
    }


    .income-intro-title {

        max-width: 390px;

        font-size: 43px;

        line-height: 1.04;

        letter-spacing: -2.5px;
    }


    .income-intro-title span {

        white-space: nowrap;
    }


    .income-intro-description {

        max-width: 350px;

        margin-top: 22px;

        font-size: 15px;

        line-height: 1.55;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .income-intro {

        padding:
            45px
            14px
            38px;
    }


    .income-intro-label {

        margin-bottom: 19px;

        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .income-intro-dot {

        width: 9px;
        height: 9px;
    }


    .income-intro-title {

        font-size: 38px;

        letter-spacing: -2px;
    }


    .income-intro-description {

        margin-top: 19px;

        font-size: 14px;
    }

}

/* ==========================================================
   INCOME STREAM 01
   WATCH VIDEOS & EARN
========================================================== */

.watch-earn-section {
    position: relative;

    width: 100%;

    padding: 20px 20px 10px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.watch-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 8, 27, 0.98),
            rgba(12, 7, 20, 0.99)
        );

    border: 1px solid rgba(255, 54, 116, 0.28);

    box-shadow:
        0 0 35px rgba(255, 42, 111, 0.08),
        inset 0 0 35px rgba(255, 42, 111, 0.025);
}


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

.watch-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #43102e,
            #74113f,
            #4a123d
        );

    border-bottom:
        1px solid
        rgba(255, 69, 130, 0.18);
}


.watch-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: white;

    font-size: 20px;

    background:
        linear-gradient(
            145deg,
            #ff285f,
            #ff168d
        );

    box-shadow:
        0 0 18px
        rgba(255, 37, 110, 0.25);

    animation:
        videoIconPulse 2.2s ease-in-out infinite;
}


@keyframes videoIconPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(255, 37, 110, 0.20);
    }

    50% {
        box-shadow:
            0 0 25px
            rgba(255, 37, 110, 0.40);
    }
}


.watch-earn-heading {
    flex: 1;
}


.watch-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #ff9ac0;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.watch-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.watch-earn-heading p {

    color: rgba(255,255,255,0.67);

    font-size: 12px;
}


.watch-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #ffb8d0;

    background:
        rgba(255, 56, 126, 0.08);

    border:
        1px solid
        rgba(255, 83, 145, 0.28);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.watch-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ff3d75;

    box-shadow:
        0 0 8px #ff3d75;

    animation:
        videoLivePulse 1.3s infinite;
}


@keyframes videoLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.65);
    }
}


/* ==========================================================
   PLATFORMS
========================================================== */

.video-platforms {

    display: flex;

    gap: 7px;

    padding: 14px 22px 8px;
}


.platform {

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 800;
}


.active-tiktok {

    color: #ff8eb8;

    border:
        1px solid
        rgba(255, 57, 123, 0.30);

    background:
        rgba(255, 57, 123, 0.07);
}


.active-youtube {

    color: #ff8f8f;

    border:
        1px solid
        rgba(255, 70, 70, 0.28);

    background:
        rgba(255, 70, 70, 0.06);
}


/* ==========================================================
   WATCHING STATUS
========================================================== */

.watching-status {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 6px 22px 12px;

    color: #85808e;

    font-size: 11px;
}


.watching-status strong {

    color: white;

    font-size: 14px;
}


.watching-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #45e36d;

    box-shadow:
        0 0 9px
        rgba(69,227,109,.8);

    animation:
        watchingPulse 1.5s infinite;
}


@keyframes watchingPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   VIDEO ACTIVITY
========================================================== */

.video-activity {

    display: flex;

    align-items: center;

    gap: 14px;

    margin: 0 22px;

    padding: 12px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.07);
}


/* ==========================================================
   VIDEO THUMBNAIL
========================================================== */

.video-thumbnail {

    position: relative;

    width: 105px;
    height: 65px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #301040,
            #8c1458,
            #25112f
        );

    box-shadow:
        inset 0 0 20px
        rgba(255, 35, 125, 0.18);
}


.video-thumbnail::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(255,255,255,.07)
        );

    animation:
        thumbnailShimmer 2.5s linear infinite;
}


@keyframes thumbnailShimmer {

    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}


.play-button {

    position: relative;

    z-index: 2;

    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 2px;

    border-radius: 50%;

    color: white;

    background:
        rgba(255, 43, 120, 0.88);

    font-size: 11px;

    box-shadow:
        0 0 15px
        rgba(255, 43, 120, 0.45);
}


.video-live-badge {

    position: absolute;

    left: 6px;
    top: 6px;

    z-index: 3;

    padding: 3px 5px;

    border-radius: 4px;

    color: white;

    background:
        rgba(255, 39, 101, 0.85);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .5px;
}


/* ==========================================================
   VIDEO INFORMATION
========================================================== */

.video-info {

    flex: 1;

    min-width: 0;
}


.video-platform-name {

    margin-bottom: 3px;

    color: #ff75a7;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;
}


.video-info > strong {

    display: block;

    margin-bottom: 8px;

    color: #e5e0e9;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.video-progress {

    width: 100%;

    height: 4px;

    overflow: hidden;

    border-radius: 999px;

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


.video-progress span {

    display: block;

    width: 48%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ff2f75,
            #ff65ad
        );

    box-shadow:
        0 0 8px
        rgba(255, 47, 117, .45);

    animation:
        videoProgress 4s linear infinite;
}


@keyframes videoProgress {

    0% {
        width: 5%;
    }

    100% {
        width: 100%;
    }
}


.video-time {

    display: flex;

    justify-content: space-between;

    margin-top: 5px;

    color: #716b78;

    font-size: 8px;
}


/* ==========================================================
   EARNING
========================================================== */

.video-earning {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    flex-shrink: 0;
}


.video-earning small {

    color: #77717f;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


.video-earning strong {

    color: #bfff68;

    font-size: 13px;

    white-space: nowrap;

    animation:
        earnedFlash 2.5s infinite;
}


@keyframes earnedFlash {

    0%,
    100% {
        opacity: .75;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(191,255,104,.4);
    }
}


/* ==========================================================
   LIVE EARNING MESSAGE
========================================================== */

.video-live-earning {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 11px 22px 0;

    padding: 8px 11px;

    border-radius: 9px;

    color: #88818f;

    background:
        rgba(105, 255, 88, .035);

    border:
        1px solid
        rgba(105, 255, 88, .10);

    font-size: 9px;
}


.video-live-earning strong {

    margin-left: auto;

    color: #c8ff71;

    font-size: 10px;
}


.earning-pulse {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #65dd39;

    box-shadow:
        0 0 8px
        rgba(101,221,57,.7);

    animation:
        earningPulse 1.2s infinite;
}


@keyframes earningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.watch-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px 22px 18px;
}


.watch-total {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #77717e;

    font-size: 9px;
}


.watch-total strong {

    color: white;

    font-size: 12px;
}


.watch-now-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            100deg,
            #ff285f,
            #e9369b
        );

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 0 18px
        rgba(255, 42, 111, .18);

    animation:
        watchButtonPulse 2.5s ease-in-out infinite;
}


@keyframes watchButtonPulse {

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

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


/* ==========================================================
   ANIMATED SEPARATOR
========================================================== */

.income-separator {

    width: min(920px, calc(100% - 50px));

    margin: 25px auto 10px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.income-separator span {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(170, 76, 255, .55),
            transparent
        );

    position: relative;

    overflow: hidden;
}


.income-separator span::after {

    content: "";

    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;

    height: 1px;

    background: #d25cff;

    box-shadow:
        0 0 8px
        rgba(210,92,255,.8);

    animation:
        separatorSweep 3s linear infinite;
}


@keyframes separatorSweep {

    0% {
        left: -30%;
    }

    100% {
        left: 100%;
    }
}


.separator-star {

    color: #c45cff;

    font-size: 14px;

    text-shadow:
        0 0 12px
        rgba(196,92,255,.75);

    animation:
        separatorStar 2s ease-in-out infinite;
}


@keyframes separatorStar {

    0%,
    100% {
        transform: scale(1) rotate(0deg);

        opacity: .75;
    }

    50% {
        transform: scale(1.3) rotate(8deg);

        opacity: 1;
    }
}


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

@media screen and (max-width: 600px) {

    .watch-earn-section {

        padding:
            10px
            14px
            5px;
    }


    .watch-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .watch-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .watch-earn-icon {

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 17px;
    }


    .watch-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .watch-earn-heading h3 {

        font-size: 18px;
    }


    .watch-earn-heading p {

        font-size: 9px;
    }


    .watch-live-status {

        padding: 5px 7px;

        font-size: 7px;
    }


    .video-platforms {

        padding: 10px 15px 5px;
    }


    .platform {

        padding: 4px 8px;

        font-size: 7px;
    }


    .watching-status {

        padding:
            5px
            15px
            9px;

        font-size: 9px;
    }


    .watching-status strong {

        font-size: 11px;
    }


    .video-activity {

        margin: 0 15px;

        padding: 8px;

        gap: 9px;

        border-radius: 12px;
    }


    .video-thumbnail {

        width: 72px;
        height: 48px;

        border-radius: 8px;
    }


    .play-button {

        width: 24px;
        height: 24px;

        font-size: 8px;
    }


    .video-live-badge {

        font-size: 5px;

        left: 4px;
        top: 4px;
    }


    .video-platform-name {

        font-size: 6px;
    }


    .video-info > strong {

        margin-bottom: 5px;

        font-size: 9px;
    }


    .video-progress {

        height: 3px;
    }


    .video-time {

        margin-top: 3px;

        font-size: 6px;
    }


    .video-earning small {

        font-size: 5px;
    }


    .video-earning strong {

        font-size: 10px;
    }


    .video-live-earning {

        margin:
            8px
            15px
            0;

        padding: 7px 8px;

        font-size: 7px;
    }


    .video-live-earning strong {

        font-size: 8px;
    }


    .watch-action {

        padding:
            10px
            15px
            13px;
    }


    .watch-total {

        font-size: 7px;
    }


    .watch-total strong {

        font-size: 9px;
    }


    .watch-now-button {

        padding:
            8px
            11px;

        font-size: 8px;
    }


    .income-separator {

        width: calc(100% - 30px);

        margin:
            17px auto
            5px;

        gap: 10px;
    }


    .separator-star {

        font-size: 11px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .watch-earn-section {

        padding-left: 10px;
        padding-right: 10px;
    }


    .watch-earn-heading h3 {

        font-size: 17px;
    }


    .watch-live-status {

        display: none;
    }


    .video-thumbnail {

        width: 65px;
        height: 44px;
    }


    .video-earning strong {

        font-size: 9px;
    }

}

/* ==========================================================
   INCOME STREAM 02
   CLICK PAID ADS & EARN
========================================================== */

.ads-earn-section {

    position: relative;

    width: 100%;

    padding: 10px 20px 5px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.ads-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 23, 8, .98),
            rgba(13, 10, 7, .99)
        );

    border:
        1px solid
        rgba(255, 190, 54, .27);

    box-shadow:
        0 0 35px
        rgba(255, 181, 35, .07);
}


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

.ads-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #45300a,
            #76520c,
            #432c07
        );

    border-bottom:
        1px solid
        rgba(255, 196, 61, .16);
}


.ads-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #211700;

    background:
        linear-gradient(
            145deg,
            #ffd84a,
            #ffad22
        );

    font-size: 13px;

    font-weight: 1000;

    box-shadow:
        0 0 20px
        rgba(255, 188, 40, .24);

    animation:
        adIconPulse 2.4s ease-in-out infinite;
}


@keyframes adIconPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(255,188,40,.18);
    }

    50% {
        box-shadow:
            0 0 27px
            rgba(255,188,40,.42);
    }
}


.ads-earn-heading {
    flex: 1;
    min-width: 0;
}


.ads-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #ffe18a;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.ads-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.ads-earn-heading p {

    color:
        rgba(255,255,255,.66);

    font-size: 12px;
}


.ads-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #ffe99f;

    background:
        rgba(255, 199, 50, .07);

    border:
        1px solid
        rgba(255, 207, 69, .25);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.ads-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffca35;

    box-shadow:
        0 0 9px #ffca35;

    animation:
        adLivePulse 1.3s infinite;
}


@keyframes adLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.65);
    }
}


/* ==========================================================
   LIVE BAR
========================================================== */

.ads-live-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        14px
        22px
        9px;

    color: #817b6c;

    font-size: 11px;
}


.ads-live-bar strong {

    color: #fff4c4;

    font-size: 14px;
}


.ads-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #7bea42;

    box-shadow:
        0 0 9px
        rgba(123,234,66,.8);

    animation:
        adWatchingPulse 1.5s infinite;
}


@keyframes adWatchingPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   AD ACTIVITY
========================================================== */

.ad-activity {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        0 22px;

    padding: 12px;

    border-radius: 15px;

    background:
        rgba(255, 190, 50, .035);

    border:
        1px solid
        rgba(255, 196, 52, .10);
}


/* AD BRAND */

.ad-brand-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #2b2100;

    background:
        linear-gradient(
            135deg,
            #ffe66b,
            #ffae24
        );

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 0 15px
        rgba(255,181,36,.14);
}


/* AD INFO */

.ad-info {

    flex: 1;

    min-width: 0;
}


.ad-sponsored {

    display: block;

    margin-bottom: 3px;

    color: #d8ad43;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.ad-info > strong {

    display: block;

    margin-bottom: 8px;

    color: #e7e0cf;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* PROGRESS */

.ad-progress {

    width: 100%;

    height: 4px;

    overflow: hidden;

    border-radius: 999px;

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


.ad-progress span {

    display: block;

    width: 35%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ffae22,
            #ffe15a
        );

    box-shadow:
        0 0 8px
        rgba(255,194,50,.45);

    animation:
        adProgress 3.5s linear infinite;
}


@keyframes adProgress {

    0% {
        width: 5%;
    }

    100% {
        width: 100%;
    }
}


/* REWARD */

.ad-reward {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    flex-shrink: 0;
}


.ad-reward small {

    color: #766e5b;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


.ad-reward strong {

    color: #d6ff70;

    font-size: 13px;

    white-space: nowrap;

    animation:
        adRewardFlash 2.4s infinite;
}


@keyframes adRewardFlash {

    0%,
    100% {
        opacity: .7;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(214,255,112,.45);
    }
}


/* ==========================================================
   LIVE EARNING
========================================================== */

.ad-live-earning {

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        11px 22px 0;

    padding:
        8px 11px;

    border-radius: 9px;

    color: #898170;

    background:
        rgba(177, 255, 76, .025);

    border:
        1px solid
        rgba(177, 255, 76, .09);

    font-size: 9px;
}


.ad-live-earning strong {

    margin-left: auto;

    color: #caff6d;

    font-size: 10px;
}


.ad-earning-pulse {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #76df42;

    box-shadow:
        0 0 8px
        rgba(118,223,66,.7);

    animation:
        adEarningPulse 1.2s infinite;
}


@keyframes adEarningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.ads-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        14px 22px 18px;
}


.ads-tasks {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #77705e;

    font-size: 9px;
}


.ads-tasks strong {

    color: white;

    font-size: 12px;
}


.click-ad-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 999px;

    color: #261a00;

    background:
        linear-gradient(
            100deg,
            #ffd43d,
            #ffae24
        );

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 0 18px
        rgba(255,188,38,.16);

    animation:
        clickAdPulse 2.5s ease-in-out infinite;
}


@keyframes clickAdPulse {

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

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


/* ==========================================================
   SEPARATOR
========================================================== */

.ads-separator {

    margin-top: 25px;
}


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

@media screen and (max-width: 600px) {

    .ads-earn-section {

        padding:
            5px
            14px
            5px;
    }


    .ads-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .ads-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .ads-earn-icon {

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 11px;
    }


    .ads-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .ads-earn-heading h3 {

        font-size: 18px;
    }


    .ads-earn-heading p {

        font-size: 9px;
    }


    .ads-live-status {

        padding:
            5px 7px;

        font-size: 7px;
    }


    .ads-live-bar {

        padding:
            10px
            15px
            7px;

        font-size: 9px;
    }


    .ads-live-bar strong {

        font-size: 11px;
    }


    .ad-activity {

        margin:
            0 15px;

        padding: 8px;

        gap: 9px;

        border-radius: 12px;
    }


    .ad-brand-icon {

        width: 39px;
        height: 39px;

        border-radius: 9px;

        font-size: 14px;
    }


    .ad-sponsored {

        font-size: 5px;
    }


    .ad-info > strong {

        margin-bottom: 5px;

        font-size: 9px;
    }


    .ad-progress {

        height: 3px;
    }


    .ad-reward small {

        font-size: 5px;
    }


    .ad-reward strong {

        font-size: 9px;
    }


    .ad-live-earning {

        margin:
            8px 15px 0;

        padding:
            7px 8px;

        font-size: 7px;
    }


    .ad-live-earning strong {

        font-size: 8px;
    }


    .ads-action {

        padding:
            10px
            15px
            13px;
    }


    .ads-tasks {

        font-size: 7px;
    }


    .ads-tasks strong {

        font-size: 9px;
    }


    .click-ad-button {

        padding:
            8px 12px;

        font-size: 8px;
    }


    .ads-separator {

        margin-top: 17px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .ads-earn-section {

        padding-left: 10px;
        padding-right: 10px;
    }


    .ads-earn-heading h3 {

        font-size: 17px;
    }


    .ads-live-status {

        display: none;
    }


    .ad-brand-icon {

        width: 36px;
        height: 36px;
    }


    .ad-reward strong {

        font-size: 8px;
    }

}

/* ==========================================================
   INCOME STREAM SEPARATOR
========================================================== */

.income-separator {

    width: min(920px, calc(100% - 50px));

    margin: 28px auto 12px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.income-separator span {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(173, 82, 255, 0.65),
            transparent
        );

    position: relative;

    overflow: hidden;
}


/* Moving light across the line */

.income-separator span::after {

    content: "";

    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;
    height: 1px;

    background: #d35cff;

    box-shadow:
        0 0 8px
        rgba(211, 92, 255, 0.9);

    animation:
        separatorSweep 3s linear infinite;
}


@keyframes separatorSweep {

    0% {
        left: -30%;
    }

    100% {
        left: 100%;
    }

}


/* Center star */

.separator-star {

    color: #c65cff;

    font-size: 14px;

    text-shadow:
        0 0 10px
        rgba(198, 92, 255, 0.8);

    animation:
        separatorStar 2s ease-in-out infinite;
}


@keyframes separatorStar {

    0%,
    100% {
        transform: scale(1) rotate(0deg);

        opacity: .75;
    }

    50% {
        transform: scale(1.3) rotate(8deg);

        opacity: 1;
    }

}

/* ==========================================================
   REGISTER NOW BUTTON
   SHAKE + OUTWARD WAVES
========================================================== */

.income-register-wrap {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin: 18px auto 10px;

    padding: 0 15px;

    text-align: center;
}


/* ==========================================================
   MAIN BUTTON
========================================================== */

.income-register-button {

    position: relative;

    isolation: isolate;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-width: 270px;

    padding: 15px 30px;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #762cff,
            #a83aff,
            #e83da9
        );

    border: 1px solid
        rgba(220, 150, 255, .65);

    font-size: 15px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 0 20px
        rgba(145, 48, 255, .25);

    cursor: pointer;

    animation:
        registerButtonShake 2.8s ease-in-out infinite;

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}


/* ==========================================================
   OUTWARD WAVE 1
========================================================== */

.income-register-button::before {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: inherit;

    border: 2px solid
        rgba(184, 91, 255, .65);

    pointer-events: none;

    z-index: -1;

    animation:
        registerWaveOne 2.4s ease-out infinite;
}


/* ==========================================================
   OUTWARD WAVE 2
========================================================== */

.income-register-button::after {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: inherit;

    border: 2px solid
        rgba(238, 72, 180, .55);

    pointer-events: none;

    z-index: -1;

    animation:
        registerWaveTwo 2.4s ease-out infinite;

    animation-delay: 1.2s;
}


/* ==========================================================
   BUTTON SHAKE
========================================================== */

@keyframes registerButtonShake {

    0%,
    72%,
    100% {

        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {

        transform:
            translateX(-2px)
            rotate(-0.8deg);
    }

    78% {

        transform:
            translateX(2px)
            rotate(0.8deg);
    }

    81% {

        transform:
            translateX(-2px)
            rotate(-0.6deg);
    }

    84% {

        transform:
            translateX(2px)
            rotate(0.6deg);
    }

    87% {

        transform:
            translateX(-1px)
            rotate(-0.3deg);
    }

    90% {

        transform:
            translateX(1px)
            rotate(0.3deg);
    }

    93% {

        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   WAVE 1 ANIMATION
========================================================== */

@keyframes registerWaveOne {

    0% {

        transform: scale(1);

        opacity: .7;
    }

    65% {

        opacity: .25;
    }

    100% {

        transform: scale(1.20);

        opacity: 0;
    }
}


/* ==========================================================
   WAVE 2 ANIMATION
========================================================== */

@keyframes registerWaveTwo {

    0% {

        transform: scale(1);

        opacity: .6;
    }

    65% {

        opacity: .20;
    }

    100% {

        transform: scale(1.20);

        opacity: 0;
    }
}


/* ==========================================================
   ARROW
========================================================== */

.income-register-button strong {

    font-size: 20px;

    line-height: 1;

    transition:
        transform .25s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.income-register-button:hover {

    box-shadow:
        0 0 30px
        rgba(164, 61, 255, .45);
}


.income-register-button:hover strong {

    transform:
        translateX(5px);
}


/* ==========================================================
   DESCRIPTION UNDER BUTTON
========================================================== */

.income-register-note {

    margin-top: 7px;

    color: #817b8b;

    font-size: 9px;

    letter-spacing: .3px;
}


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

@media screen and (max-width: 600px) {

    .income-register-wrap {

        margin:
            14px auto 8px;

        padding:
            0 12px;
    }


    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;

        gap: 14px;
    }


    .income-register-button strong {

        font-size: 17px;
    }


    .income-register-note {

        margin-top: 6px;

        font-size: 8px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   WATCH VIDEOS — REGISTER NOW BUTTON
========================================================== */

.watch-register-wrap {
    margin-top: 18px;
    margin-bottom: 8px;
}


/* ==========================================================
   WATCH REGISTER BUTTON
========================================================== */

.watch-register-wrap .income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    background:
        linear-gradient(
            100deg,
            #ff245f,
            #ff357f,
            #e936a5
        );

    border:
        1px solid
        rgba(255, 137, 190, .7);

    box-shadow:
        0 0 22px
        rgba(255, 42, 111, .25);

    animation:
        watchRegisterShake 2.8s ease-in-out infinite;
}


/* ==========================================================
   OUTWARD WAVE 1
========================================================== */

.watch-register-wrap
.income-register-button::before {

    border-color:
        rgba(255, 61, 124, .7);

    animation:
        watchRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


/* ==========================================================
   OUTWARD WAVE 2
========================================================== */

.watch-register-wrap
.income-register-button::after {

    border-color:
        rgba(235, 58, 168, .6);

    animation:
        watchRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay:
        1.2s;
}


/* ==========================================================
   SHAKE
========================================================== */

@keyframes watchRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-0.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(0.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-0.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(0.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-0.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(0.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   WAVE 1
========================================================== */

@keyframes watchRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}


/* ==========================================================
   WAVE 2
========================================================== */

@keyframes watchRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}


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

@media screen and (max-width: 600px) {

    .watch-register-wrap {
        margin-top: 14px;
        margin-bottom: 6px;
    }

    .watch-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding: 13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .watch-register-wrap
    .income-register-button {

        max-width: 290px;

        padding: 12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   INCOME STREAM 02 — REGISTER NOW
   PAID ADS THEME
========================================================== */

.ads-register-wrap {
    margin-top: 18px;
    margin-bottom: 8px;
}


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

.ads-register-wrap .income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    color: #251900;

    background:
        linear-gradient(
            100deg,
            #ffd43d,
            #ffbd2e,
            #ff9f24
        );

    border:
        1px solid
        rgba(255, 225, 112, .8);

    box-shadow:
        0 0 22px
        rgba(255, 188, 38, .25);

    animation:
        adsRegisterShake 2.8s ease-in-out infinite;
}


/* ==========================================================
   WAVE 1
========================================================== */

.ads-register-wrap
.income-register-button::before {

    border-color:
        rgba(255, 207, 55, .75);

    animation:
        adsRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


/* ==========================================================
   WAVE 2
========================================================== */

.ads-register-wrap
.income-register-button::after {

    border-color:
        rgba(255, 157, 36, .65);

    animation:
        adsRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay:
        1.2s;
}


/* ==========================================================
   BUTTON SHAKE
========================================================== */

@keyframes adsRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-0.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(0.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-0.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(0.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-0.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(0.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   OUTWARD WAVE 1
========================================================== */

@keyframes adsRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


/* ==========================================================
   OUTWARD WAVE 2
========================================================== */

@keyframes adsRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


/* ==========================================================
   ARROW
========================================================== */

.ads-register-wrap
.income-register-button strong {

    font-size: 20px;

    transition:
        transform .25s ease;
}


.ads-register-wrap
.income-register-button:hover strong {

    transform:
        translateX(5px);
}


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

@media screen and (max-width: 600px) {

    .ads-register-wrap {

        margin-top: 14px;

        margin-bottom: 6px;
    }


    .ads-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .ads-register-wrap
    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   INCOME STREAM 03
   PAID TRIVIA
   ELECTRIC CYAN THEME
========================================================== */

.trivia-earn-section {

    position: relative;

    width: 100%;

    padding: 10px 20px 5px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.trivia-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 27, 34, .98),
            rgba(6, 12, 19, .99)
        );

    border:
        1px solid
        rgba(36, 220, 255, .28);

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


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

.trivia-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #063e4a,
            #087080,
            #063b49
        );

    border-bottom:
        1px solid
        rgba(53, 223, 255, .18);
}


.trivia-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #06212a;

    background:
        linear-gradient(
            145deg,
            #67f1ff,
            #1dcde9
        );

    font-size: 22px;

    font-weight: 1000;

    box-shadow:
        0 0 20px
        rgba(39, 222, 255, .25);

    animation:
        triviaIconPulse 2.4s ease-in-out infinite;
}


@keyframes triviaIconPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(39,222,255,.18);
    }

    50% {
        box-shadow:
            0 0 28px
            rgba(39,222,255,.45);
    }
}


.trivia-earn-heading {
    flex: 1;
    min-width: 0;
}


.trivia-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #8df4ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.trivia-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.trivia-earn-heading p {

    color:
        rgba(255,255,255,.66);

    font-size: 12px;
}


/* ==========================================================
   LIVE STATUS
========================================================== */

.trivia-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #9df7ff;

    background:
        rgba(35, 222, 255, .07);

    border:
        1px solid
        rgba(61, 226, 255, .28);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.trivia-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #2be3ff;

    box-shadow:
        0 0 9px #2be3ff;

    animation:
        triviaLivePulse 1.3s infinite;
}


@keyframes triviaLivePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.65);
    }
}


/* ==========================================================
   LIVE PLAYERS
========================================================== */

.trivia-live-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        14px 22px 9px;

    color: #778b91;

    font-size: 11px;
}


.trivia-live-bar strong {

    color: #d2fbff;

    font-size: 14px;
}


.trivia-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #55ed79;

    box-shadow:
        0 0 9px
        rgba(85,237,121,.8);

    animation:
        triviaPlayerPulse 1.5s infinite;
}


@keyframes triviaPlayerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   QUESTION CARD
========================================================== */

.trivia-question-card {

    margin:
        0 22px;

    padding: 14px;

    border-radius: 15px;

    background:
        rgba(31, 220, 255, .035);

    border:
        1px solid
        rgba(44, 220, 255, .11);
}


.trivia-question-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;
}


.trivia-question-top span {

    color: #43dff5;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.trivia-question-top strong {

    color: #667d84;

    font-size: 7px;

    letter-spacing: 1px;
}


.trivia-question-card h4 {

    margin: 0 0 12px;

    color: #e3fbff;

    font-size: 14px;

    line-height: 1.35;
}


/* ==========================================================
   OPTIONS
========================================================== */

.trivia-options {

    display: grid;

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

    gap: 7px;
}


.trivia-options button {

    min-width: 0;

    padding: 8px 6px;

    border:
        1px solid
        rgba(67, 222, 247, .13);

    border-radius: 8px;

    color: #8da8ae;

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

    font-family: inherit;

    font-size: 8px;

    cursor: pointer;

    transition:
        .2s ease;
}


.trivia-options button:hover {

    color: #d7fbff;

    border-color:
        rgba(57, 222, 247, .45);

    background:
        rgba(35, 219, 255, .08);
}


/* ==========================================================
   LIVE EARNING
========================================================== */

.trivia-live-earning {

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        11px 22px 0;

    padding:
        8px 11px;

    border-radius: 9px;

    color: #7c898d;

    background:
        rgba(102, 255, 145, .025);

    border:
        1px solid
        rgba(102, 255, 145, .09);

    font-size: 9px;
}


.trivia-live-earning strong {

    margin-left: auto;

    color: #caff6d;

    font-size: 10px;

    white-space: nowrap;
}


.trivia-earning-pulse {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #65e65c;

    box-shadow:
        0 0 8px
        rgba(101,230,92,.7);

    animation:
        triviaEarningPulse 1.2s infinite;
}


@keyframes triviaEarningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.trivia-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        14px 22px 18px;
}


.trivia-tasks {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #687a7e;

    font-size: 9px;
}


.trivia-tasks strong {

    color: white;

    font-size: 12px;
}


.trivia-play-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 999px;

    color: #06252c;

    background:
        linear-gradient(
            100deg,
            #61edff,
            #19cee7
        );

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 0 18px
        rgba(30,218,247,.18);

    animation:
        triviaPlayPulse 2.5s ease-in-out infinite;
}


@keyframes triviaPlayPulse {

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

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


/* ==========================================================
   REGISTER BUTTON — TRIVIA
========================================================== */

.trivia-register-wrap {

    margin-top: 18px;

    margin-bottom: 8px;
}


.trivia-register-wrap
.income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    color: #05242b;

    background:
        linear-gradient(
            100deg,
            #58efff,
            #25d5ec,
            #19bcd7
        );

    border:
        1px solid
        rgba(133, 246, 255, .8);

    box-shadow:
        0 0 23px
        rgba(25, 211, 239, .25);

    animation:
        triviaRegisterShake 2.8s ease-in-out infinite;
}


.trivia-register-wrap
.income-register-button::before {

    border-color:
        rgba(70, 232, 255, .75);

    animation:
        triviaRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


.trivia-register-wrap
.income-register-button::after {

    border-color:
        rgba(24, 183, 218, .65);

    animation:
        triviaRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay: 1.2s;
}


/* ==========================================================
   REGISTER SHAKE
========================================================== */

@keyframes triviaRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   REGISTER WAVES
========================================================== */

@keyframes triviaRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


@keyframes triviaRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


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

@media screen and (max-width: 600px) {

    .trivia-earn-section {

        padding:
            5px 14px 5px;
    }


    .trivia-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .trivia-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .trivia-earn-icon {

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 18px;
    }


    .trivia-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .trivia-earn-heading h3 {

        font-size: 18px;
    }


    .trivia-earn-heading p {

        font-size: 9px;
    }


    .trivia-live-status {

        padding:
            5px 7px;

        font-size: 7px;
    }


    .trivia-live-bar {

        padding:
            10px 15px 7px;

        font-size: 9px;
    }


    .trivia-live-bar strong {

        font-size: 11px;
    }


    .trivia-question-card {

        margin: 0 15px;

        padding: 10px;

        border-radius: 12px;
    }


    .trivia-question-card h4 {

        font-size: 11px;

        margin-bottom: 9px;
    }


    .trivia-options {

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

        gap: 5px;
    }


    .trivia-options button {

        padding: 7px 5px;

        font-size: 7px;
    }


    .trivia-live-earning {

        margin:
            8px 15px 0;

        padding:
            7px 8px;

        font-size: 7px;
    }


    .trivia-live-earning strong {

        font-size: 8px;
    }


    .trivia-action {

        padding:
            10px 15px 13px;
    }


    .trivia-tasks {

        font-size: 7px;
    }


    .trivia-tasks strong {

        font-size: 9px;
    }


    .trivia-play-button {

        padding:
            8px 12px;

        font-size: 8px;
    }


    .trivia-register-wrap {

        margin-top: 14px;

        margin-bottom: 6px;
    }


    .trivia-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .trivia-live-status {

        display: none;
    }


    .trivia-earn-heading h3 {

        font-size: 17px;
    }


    .trivia-register-wrap
    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   AUTOMATIC TRIVIA ANSWER EFFECTS
========================================================== */

.trivia-options button {

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* Question is briefly active */

.trivia-options button.trivia-answer-active {

    border-color:
        rgba(55, 224, 255, .35);

    color: #d9fbff;

    background:
        rgba(35, 220, 255, .06);
}


/* Automatically selected correct answer */

.trivia-options button.trivia-correct {

    color: #061b0c;

    background:
        linear-gradient(
            100deg,
            #55ed79,
            #9aff62
        );

    border-color:
        #8dff78;

    box-shadow:
        0 0 18px
        rgba(91, 241, 104, .35);

    transform:
        scale(1.03);
}


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

@media screen and (max-width: 600px) {

    .trivia-options button.trivia-correct {

        transform:
            scale(1.02);

        box-shadow:
            0 0 12px
            rgba(91, 241, 104, .3);
    }

}

/* ==========================================================
   INCOME STREAM 04
   PAID WHATSAPP STATUS VIEWS
   GREEN THEME
========================================================== */

.status-earn-section {

    position: relative;

    width: 100%;

    padding: 10px 20px 5px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.status-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 31, 23, .98),
            rgba(6, 15, 13, .99)
        );

    border:
        1px solid
        rgba(37, 211, 102, .28);

    box-shadow:
        0 0 35px
        rgba(37, 211, 102, .08);
}


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

.status-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #07502f,
            #087744,
            #064b2d
        );

    border-bottom:
        1px solid
        rgba(52, 224, 111, .18);
}


.status-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #06351f;

    background:
        linear-gradient(
            145deg,
            #71f59b,
            #25d366
        );

    font-size: 22px;

    font-weight: 900;

    box-shadow:
        0 0 20px
        rgba(37, 211, 102, .25);

    animation:
        statusIconPulse 2.4s ease-in-out infinite;
}


@keyframes statusIconPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(37,211,102,.18);
    }

    50% {
        box-shadow:
            0 0 28px
            rgba(37,211,102,.45);
    }
}


.status-earn-heading {

    flex: 1;

    min-width: 0;
}


.status-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #8dffb1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.status-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.status-earn-heading p {

    color:
        rgba(255,255,255,.66);

    font-size: 12px;
}


/* ==========================================================
   LIVE STATUS
========================================================== */

.status-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #9cffb8;

    background:
        rgba(37, 211, 102, .07);

    border:
        1px solid
        rgba(63, 224, 119, .28);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.status-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #39ed76;

    box-shadow:
        0 0 9px #39ed76;

    animation:
        statusLivePulse 1.3s infinite;
}


@keyframes statusLivePulse {

    0%,
    100% {
        opacity: 1;

        transform: scale(1);
    }

    50% {
        opacity: .4;

        transform: scale(.65);
    }
}


/* ==========================================================
   LIVE VIEWERS
========================================================== */

.status-live-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        14px 22px 9px;

    color: #70867a;

    font-size: 11px;
}


.status-live-bar strong {

    color: #d9ffe5;

    font-size: 14px;
}


.status-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #52ed7c;

    box-shadow:
        0 0 9px
        rgba(82,237,124,.8);

    animation:
        statusViewerPulse 1.5s infinite;
}


@keyframes statusViewerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   STATUS ACTIVITY
========================================================== */

.status-activity {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        0 22px;

    padding: 12px;

    border-radius: 15px;

    background:
        rgba(37, 211, 102, .035);

    border:
        1px solid
        rgba(37, 211, 102, .11);
}


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

.status-profile {

    position: relative;

    flex-shrink: 0;
}


.status-profile-ring {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    padding: 3px;

    background:
        conic-gradient(
            #25d366,
            #7dff9d,
            #25d366
        );

    animation:
        statusRingRotate 4s linear infinite;
}


@keyframes statusRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.status-profile-letter {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #d8ffe4;

    background:
        #12382a;

    font-size: 18px;

    font-weight: 900;
}


.status-online-dot {

    position: absolute;

    right: 0;
    bottom: 2px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #42f276;

    border: 2px solid #071710;

    box-shadow:
        0 0 7px
        rgba(66,242,118,.8);
}


/* ==========================================================
   STATUS INFO
========================================================== */

.status-info {

    flex: 1;

    min-width: 0;
}


.status-label {

    display: block;

    margin-bottom: 3px;

    color: #50df7c;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.status-info > strong {

    display: block;

    margin-bottom: 8px;

    color: #e1f8e8;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================
   VIEW PROGRESS
========================================================== */

.status-view-progress {

    width: 100%;

    height: 4px;

    overflow: hidden;

    border-radius: 999px;

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


.status-view-progress span {

    display: block;

    width: 45%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #1fcf64,
            #72f796
        );

    box-shadow:
        0 0 8px
        rgba(37,211,102,.45);

    animation:
        statusProgress 4s linear infinite;
}


@keyframes statusProgress {

    0% {
        width: 5%;
    }

    100% {
        width: 100%;
    }
}


.status-meta {

    display: flex;

    justify-content: space-between;

    margin-top: 5px;

    color: #63756b;

    font-size: 7px;
}


.status-meta strong {

    color: #9ad9ae;

    font-size: 8px;
}


/* ==========================================================
   REWARD
========================================================== */

.status-reward {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    flex-shrink: 0;
}


.status-reward small {

    color: #68776d;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


.status-reward strong {

    color: #caff70;

    font-size: 13px;

    white-space: nowrap;

    animation:
        statusRewardFlash 2.4s infinite;
}


@keyframes statusRewardFlash {

    0%,
    100% {
        opacity: .7;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(202,255,112,.45);
    }
}


/* ==========================================================
   LIVE EARNING
========================================================== */

.status-live-earning {

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        11px 22px 0;

    padding:
        8px 11px;

    border-radius: 9px;

    color: #77877d;

    background:
        rgba(90,255,130,.025);

    border:
        1px solid
        rgba(90,255,130,.09);

    font-size: 9px;
}


.status-live-earning strong {

    margin-left: auto;

    color: #caff6d;

    font-size: 10px;

    white-space: nowrap;
}


.status-earning-pulse {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #65e65c;

    box-shadow:
        0 0 8px
        rgba(101,230,92,.7);

    animation:
        statusEarningPulse 1.2s infinite;
}


@keyframes statusEarningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.status-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        14px 22px 18px;
}


.status-tasks {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #66766c;

    font-size: 9px;
}


.status-tasks strong {

    color: white;

    font-size: 12px;
}


.view-status-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 999px;

    color: #07351e;

    background:
        linear-gradient(
            100deg,
            #67f593,
            #25d366
        );

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 0 18px
        rgba(37,211,102,.18);

    animation:
        viewStatusPulse 2.5s ease-in-out infinite;
}


@keyframes viewStatusPulse {

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

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


/* ==========================================================
   REGISTER BUTTON
========================================================== */

.status-register-wrap {

    margin-top: 18px;

    margin-bottom: 8px;
}


.status-register-wrap
.income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    color: #06331e;

    background:
        linear-gradient(
            100deg,
            #67f593,
            #25d366,
            #16b957
        );

    border:
        1px solid
        rgba(145, 255, 174, .8);

    box-shadow:
        0 0 23px
        rgba(37,211,102,.25);

    animation:
        statusRegisterShake 2.8s ease-in-out infinite;
}


/* WAVE 1 */

.status-register-wrap
.income-register-button::before {

    border-color:
        rgba(62, 237, 115, .75);

    animation:
        statusRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


/* WAVE 2 */

.status-register-wrap
.income-register-button::after {

    border-color:
        rgba(23, 184, 80, .65);

    animation:
        statusRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay: 1.2s;
}


/* ==========================================================
   REGISTER SHAKE
========================================================== */

@keyframes statusRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   REGISTER WAVES
========================================================== */

@keyframes statusRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


@keyframes statusRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


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

@media screen and (max-width: 600px) {

    .status-earn-section {

        padding:
            5px 14px 5px;
    }


    .status-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .status-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .status-earn-icon {

        width: 40px;
        height: 40px;

        font-size: 18px;
    }


    .status-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .status-earn-heading h3 {

        font-size: 18px;
    }


    .status-earn-heading p {

        font-size: 9px;
    }


    .status-live-status {

        padding:
            5px 7px;

        font-size: 7px;
    }


    .status-live-bar {

        padding:
            10px 15px 7px;

        font-size: 9px;
    }


    .status-live-bar strong {

        font-size: 11px;
    }


    .status-activity {

        margin:
            0 15px;

        padding: 8px;

        gap: 9px;

        border-radius: 12px;
    }


    .status-profile-ring {

        width: 42px;
        height: 42px;
    }


    .status-profile-letter {

        font-size: 14px;
    }


    .status-online-dot {

        width: 8px;
        height: 8px;
    }


    .status-label {

        font-size: 5px;
    }


    .status-info > strong {

        font-size: 9px;

        margin-bottom: 5px;
    }


    .status-view-progress {

        height: 3px;
    }


    .status-meta {

        font-size: 6px;
    }


    .status-meta strong {

        font-size: 7px;
    }


    .status-reward small {

        font-size: 5px;
    }


    .status-reward strong {

        font-size: 9px;
    }


    .status-live-earning {

        margin:
            8px 15px 0;

        padding:
            7px 8px;

        font-size: 7px;
    }


    .status-live-earning strong {

        font-size: 8px;
    }


    .status-action {

        padding:
            10px 15px 13px;
    }


    .status-tasks {

        font-size: 7px;
    }


    .status-tasks strong {

        font-size: 9px;
    }


    .view-status-button {

        padding:
            8px 12px;

        font-size: 8px;
    }


    .status-register-wrap {

        margin-top: 14px;

        margin-bottom: 6px;
    }


    .status-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .status-live-status {

        display: none;
    }


    .status-earn-heading h3 {

        font-size: 17px;
    }


    .status-register-wrap
    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   INCOME STREAM 05
   LISTEN TO PAID MUSIC
   VIOLET / INDIGO MUSIC THEME
========================================================== */

.music-earn-section {

    position: relative;

    width: 100%;

    padding: 10px 20px 5px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.music-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 12, 48, .98),
            rgba(11, 8, 23, .99)
        );

    border:
        1px solid
        rgba(171, 89, 255, .30);

    box-shadow:
        0 0 35px
        rgba(164, 76, 255, .09);
}


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

.music-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #321268,
            #571b91,
            #30105f
        );

    border-bottom:
        1px solid
        rgba(199, 115, 255, .18);
}


.music-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #24103d;

    background:
        linear-gradient(
            145deg,
            #d99aff,
            #a948ff
        );

    font-size: 25px;

    font-weight: 1000;

    box-shadow:
        0 0 20px
        rgba(181, 77, 255, .28);

    animation:
        musicIconPulse 2.4s ease-in-out infinite;
}


@keyframes musicIconPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(181,77,255,.18);
    }

    50% {
        box-shadow:
            0 0 29px
            rgba(181,77,255,.48);
    }
}


.music-earn-heading {

    flex: 1;

    min-width: 0;
}


.music-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #e0b4ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.music-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.music-earn-heading p {

    color:
        rgba(255,255,255,.66);

    font-size: 12px;
}


/* ==========================================================
   LIVE STATUS
========================================================== */

.music-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #e5c4ff;

    background:
        rgba(191, 88, 255, .07);

    border:
        1px solid
        rgba(204, 113, 255, .28);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.music-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c66aff;

    box-shadow:
        0 0 9px #c66aff;

    animation:
        musicLivePulse 1.3s infinite;
}


@keyframes musicLivePulse {

    0%,
    100% {
        opacity: 1;

        transform: scale(1);
    }

    50% {
        opacity: .4;

        transform: scale(.65);
    }
}


/* ==========================================================
   LIVE LISTENERS
========================================================== */

.music-live-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        14px 22px 9px;

    color: #857a94;

    font-size: 11px;
}


.music-live-bar strong {

    color: #eadcff;

    font-size: 14px;
}


.music-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #baff62;

    box-shadow:
        0 0 9px
        rgba(186,255,98,.8);

    animation:
        musicListenerPulse 1.5s infinite;
}


@keyframes musicListenerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   MUSIC PLAYER
========================================================== */

.music-player {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        0 22px;

    padding: 12px;

    border-radius: 15px;

    background:
        linear-gradient(
            110deg,
            rgba(177, 77, 255, .075),
            rgba(255, 65, 180, .035)
        );

    border:
        1px solid
        rgba(187, 91, 255, .13);
}


/* ==========================================================
   COVER
========================================================== */

.music-cover {

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #a33dff,
            #ff43b7
        );

    box-shadow:
        0 0 18px
        rgba(174, 62, 255, .20);

    animation:
        musicCoverPulse 3s ease-in-out infinite;
}


@keyframes musicCoverPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}


.music-note {

    color: white;

    font-size: 25px;

    font-weight: 900;

    text-shadow:
        0 0 10px
        rgba(255,255,255,.45);
}


/* ==========================================================
   MUSIC INFO
========================================================== */

.music-info {

    flex: 1;

    min-width: 0;
}


.music-playing {

    display: block;

    margin-bottom: 3px;

    color: #b96aff;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.music-info > strong {

    display: block;

    color: #f2e7ff;

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.music-info > small {

    display: block;

    margin-top: 2px;

    color: #877a94;

    font-size: 8px;
}


/* ==========================================================
   EQUALIZER
========================================================== */

.music-equalizer {

    display: flex;

    align-items: flex-end;

    gap: 3px;

    height: 17px;

    margin:
        7px 0 6px;
}


.music-equalizer i {

    display: block;

    width: 3px;

    height: 8px;

    border-radius: 3px;

    background:
        linear-gradient(
            to top,
            #9d45ff,
            #ff5ec4
        );

    animation:
        musicEqualizer .9s ease-in-out infinite alternate;
}


.music-equalizer i:nth-child(1) {
    animation-delay: -.1s;
    height: 9px;
}

.music-equalizer i:nth-child(2) {
    animation-delay: -.4s;
    height: 15px;
}

.music-equalizer i:nth-child(3) {
    animation-delay: -.2s;
    height: 11px;
}

.music-equalizer i:nth-child(4) {
    animation-delay: -.6s;
    height: 17px;
}

.music-equalizer i:nth-child(5) {
    animation-delay: -.3s;
    height: 12px;
}

.music-equalizer i:nth-child(6) {
    animation-delay: -.7s;
    height: 16px;
}

.music-equalizer i:nth-child(7) {
    animation-delay: -.2s;
    height: 10px;
}

.music-equalizer i:nth-child(8) {
    animation-delay: -.5s;
    height: 14px;
}


@keyframes musicEqualizer {

    from {
        transform: scaleY(.35);
    }

    to {
        transform: scaleY(1);
    }
}


/* ==========================================================
   MUSIC PROGRESS
========================================================== */

.music-progress {

    width: 100%;

    height: 4px;

    overflow: hidden;

    border-radius: 999px;

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


.music-progress span {

    display: block;

    width: 42%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #9b45ff,
            #ff58bf
        );

    box-shadow:
        0 0 8px
        rgba(178,68,255,.45);

    animation:
        musicProgress 5s linear infinite;
}


@keyframes musicProgress {

    0% {
        width: 3%;
    }

    100% {
        width: 100%;
    }
}


/* ==========================================================
   REWARD
========================================================== */

.music-reward {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    flex-shrink: 0;
}


.music-reward small {

    color: #776c82;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


.music-reward strong {

    color: #caff70;

    font-size: 13px;

    white-space: nowrap;

    animation:
        musicRewardFlash 2.4s infinite;
}


@keyframes musicRewardFlash {

    0%,
    100% {
        opacity: .7;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(202,255,112,.45);
    }
}


/* ==========================================================
   LIVE EARNING
========================================================== */

.music-live-earning {

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        11px 22px 0;

    padding:
        8px 11px;

    border-radius: 9px;

    color: #817789;

    background:
        rgba(202, 255, 112, .025);

    border:
        1px solid
        rgba(202, 255, 112, .09);

    font-size: 9px;
}


.music-live-earning strong {

    margin-left: auto;

    color: #caff6d;

    font-size: 10px;

    white-space: nowrap;
}


.music-earning-pulse {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #76e85c;

    box-shadow:
        0 0 8px
        rgba(118,232,92,.7);

    animation:
        musicEarningPulse 1.2s infinite;
}


@keyframes musicEarningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.music-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        14px 22px 18px;
}


.music-tasks {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #71677d;

    font-size: 9px;
}


.music-tasks strong {

    color: white;

    font-size: 12px;
}


.listen-music-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 999px;

    color: #260c3d;

    background:
        linear-gradient(
            100deg,
            #d28aff,
            #a944ff
        );

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 0 18px
        rgba(169,68,255,.18);

    animation:
        listenMusicPulse 2.5s ease-in-out infinite;
}


@keyframes listenMusicPulse {

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

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


/* ==========================================================
   REGISTER NOW
========================================================== */

.music-register-wrap {

    margin-top: 18px;

    margin-bottom: 8px;
}


.music-register-wrap
.income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    color: #260b3c;

    background:
        linear-gradient(
            100deg,
            #d18aff,
            #a947ff,
            #e94caf
        );

    border:
        1px solid
        rgba(231, 168, 255, .8);

    box-shadow:
        0 0 23px
        rgba(174, 67, 255, .25);

    animation:
        musicRegisterShake 2.8s ease-in-out infinite;
}


/* WAVE 1 */

.music-register-wrap
.income-register-button::before {

    border-color:
        rgba(207, 92, 255, .75);

    animation:
        musicRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


/* WAVE 2 */

.music-register-wrap
.income-register-button::after {

    border-color:
        rgba(241, 70, 174, .65);

    animation:
        musicRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay: 1.2s;
}


/* ==========================================================
   REGISTER SHAKE
========================================================== */

@keyframes musicRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   REGISTER WAVES
========================================================== */

@keyframes musicRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


@keyframes musicRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


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

@media screen and (max-width: 600px) {

    .music-earn-section {

        padding:
            5px 14px 5px;
    }


    .music-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .music-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .music-earn-icon {

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 20px;
    }


    .music-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .music-earn-heading h3 {

        font-size: 18px;
    }


    .music-earn-heading p {

        font-size: 9px;
    }


    .music-live-status {

        padding:
            5px 7px;

        font-size: 7px;
    }


    .music-live-bar {

        padding:
            10px 15px 7px;

        font-size: 9px;
    }


    .music-live-bar strong {

        font-size: 11px;
    }


    .music-player {

        margin:
            0 15px;

        padding: 8px;

        gap: 9px;

        border-radius: 12px;
    }


    .music-cover {

        width: 42px;
        height: 42px;

        border-radius: 10px;
    }


    .music-note {

        font-size: 19px;
    }


    .music-playing {

        font-size: 5px;
    }


    .music-info > strong {

        font-size: 9px;
    }


    .music-info > small {

        font-size: 7px;
    }


    .music-equalizer {

        height: 13px;

        margin:
            5px 0;
    }


    .music-equalizer i {

        width: 2px;
    }


    .music-progress {

        height: 3px;
    }


    .music-reward small {

        font-size: 5px;
    }


    .music-reward strong {

        font-size: 9px;
    }


    .music-live-earning {

        margin:
            8px 15px 0;

        padding:
            7px 8px;

        font-size: 7px;
    }


    .music-live-earning strong {

        font-size: 8px;
    }


    .music-action {

        padding:
            10px 15px 13px;
    }


    .music-tasks {

        font-size: 7px;
    }


    .music-tasks strong {

        font-size: 9px;
    }


    .listen-music-button {

        padding:
            8px 12px;

        font-size: 8px;
    }


    .music-register-wrap {

        margin-top: 14px;

        margin-bottom: 6px;
    }


    .music-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .music-live-status {

        display: none;
    }


    .music-earn-heading h3 {

        font-size: 17px;
    }


    .music-register-wrap
    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   INCOME STREAM 06
   WHEEL SPIN & WIN
   RED / ORANGE / GOLD GAME THEME
========================================================== */

.wheel-earn-section {

    position: relative;

    width: 100%;

    padding: 10px 20px 5px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.wheel-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(45, 12, 7, .98),
            rgba(18, 8, 7, .99)
        );

    border:
        1px solid
        rgba(255, 132, 39, .30);

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


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

.wheel-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #6b180b,
            #a52c0c,
            #661608
        );

    border-bottom:
        1px solid
        rgba(255, 150, 53, .18);
}


.wheel-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #4a1600;

    background:
        linear-gradient(
            145deg,
            #ffe56b,
            #ffae24
        );

    font-size: 23px;

    font-weight: 1000;

    box-shadow:
        0 0 20px
        rgba(255, 174, 36, .28);

    animation:
        wheelIconPulse 2.4s ease-in-out infinite;
}


@keyframes wheelIconPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px
            rgba(255,174,36,.18);
    }

    50% {
        box-shadow:
            0 0 29px
            rgba(255,174,36,.48);
    }
}


.wheel-earn-heading {

    flex: 1;

    min-width: 0;
}


.wheel-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #ffd681;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.wheel-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.wheel-earn-heading p {

    color:
        rgba(255,255,255,.66);

    font-size: 12px;
}


/* ==========================================================
   LIVE STATUS
========================================================== */

.wheel-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #ffe29b;

    background:
        rgba(255, 167, 42, .07);

    border:
        1px solid
        rgba(255, 181, 57, .28);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.wheel-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffbd38;

    box-shadow:
        0 0 9px #ffbd38;

    animation:
        wheelLivePulse 1.3s infinite;
}


@keyframes wheelLivePulse {

    0%,
    100% {
        opacity: 1;

        transform: scale(1);
    }

    50% {
        opacity: .4;

        transform: scale(.65);
    }
}


/* ==========================================================
   LIVE PLAYERS
========================================================== */

.wheel-live-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        14px 22px 9px;

    color: #8f776f;

    font-size: 11px;
}


.wheel-live-bar strong {

    color: #ffe3c8;

    font-size: 14px;
}


.wheel-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #72ef61;

    box-shadow:
        0 0 9px
        rgba(114,239,97,.8);

    animation:
        wheelPlayerPulse 1.5s infinite;
}


@keyframes wheelPlayerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   WHEEL GAME
========================================================== */

.wheel-game {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px 0 15px;
}


/* ==========================================================
   POINTER
========================================================== */

.wheel-pointer {

    position: absolute;

    top: 4px;

    z-index: 5;

    color: #fff4b0;

    font-size: 20px;

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,184,40,.8)
        );
}


/* ==========================================================
   WHEEL
========================================================== */

.spin-wheel {

    position: relative;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        conic-gradient(
            #ff3d24 0deg 45deg,
            #ffb321 45deg 90deg,
            #ff5733 90deg 135deg,
            #ffd43b 135deg 180deg,
            #e93222 180deg 225deg,
            #ff9d1e 225deg 270deg,
            #ff4930 270deg 315deg,
            #ffc72d 315deg 360deg
        );

    border:
        6px solid
        #ffce4a;

    box-shadow:
        0 0 0 3px
        rgba(255, 121, 25, .35),

        0 0 30px
        rgba(255, 105, 20, .20);

    animation:
        demoWheelSpin 6s
        cubic-bezier(.12,.72,.16,1)
        infinite;
}


@keyframes demoWheelSpin {

    0% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(1120deg);
    }

    84% {
        transform: rotate(1190deg);
    }

    92% {
        transform: rotate(1175deg);
    }

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


/* ==========================================================
   WHEEL SEGMENTS
========================================================== */

.wheel-segment {

    position: absolute;

    color: white;

    font-size: 10px;

    font-weight: 1000;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.5);
}


/* Positions */

.segment-1 {
    top: 13px;
    left: 61px;
}

.segment-2 {
    top: 35px;
    right: 22px;
}

.segment-3 {
    top: 67px;
    right: 11px;
}

.segment-4 {
    bottom: 34px;
    right: 21px;
}

.segment-5 {
    bottom: 13px;
    left: 64px;
}

.segment-6 {
    bottom: 34px;
    left: 20px;
}

.segment-7 {
    top: 67px;
    left: 11px;
}

.segment-8 {
    top: 34px;
    left: 21px;
}


/* ==========================================================
   WHEEL CENTER
========================================================== */

.wheel-center {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #5a1600;

    background:
        radial-gradient(
            circle,
            #fff1a5,
            #ffbf31
        );

    border:
        3px solid
        #fff0a0;

    font-size: 9px;

    font-weight: 1000;

    box-shadow:
        0 0 14px
        rgba(255, 203, 51, .55);
}


/* ==========================================================
   LIVE RESULT
========================================================== */

.wheel-result {

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        0 22px;

    padding:
        9px 11px;

    border-radius: 9px;

    color: #927f73;

    background:
        rgba(255, 183, 42, .025);

    border:
        1px solid
        rgba(255, 177, 44, .09);

    font-size: 9px;
}


.wheel-result strong {

    margin-left: auto;

    color: #caff6d;

    font-size: 10px;

    white-space: nowrap;

    animation:
        wheelRewardFlash 2.2s infinite;
}


.wheel-result-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #76e85c;

    box-shadow:
        0 0 8px
        rgba(118,232,92,.7);

    animation:
        wheelRewardPulse 1.2s infinite;
}


@keyframes wheelRewardPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


@keyframes wheelRewardFlash {

    0%,
    100% {
        opacity: .7;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 9px
            rgba(202,255,112,.45);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.wheel-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        14px 22px 18px;
}


.wheel-spins {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #7f7069;

    font-size: 9px;
}


.wheel-spins strong {

    color: white;

    font-size: 12px;
}


.spin-now-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 999px;

    color: #481400;

    background:
        linear-gradient(
            100deg,
            #ffe26a,
            #ffae22
        );

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 0 18px
        rgba(255,174,34,.20);

    animation:
        spinButtonPulse 2.5s ease-in-out infinite;
}


@keyframes spinButtonPulse {

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

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


/* ==========================================================
   REGISTER NOW
========================================================== */

.wheel-register-wrap {

    margin-top: 18px;

    margin-bottom: 8px;
}


.wheel-register-wrap
.income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    color: #421200;

    background:
        linear-gradient(
            100deg,
            #ffe05a,
            #ffad22,
            #ff7130
        );

    border:
        1px solid
        rgba(255, 226, 115, .85);

    box-shadow:
        0 0 23px
        rgba(255, 130, 28, .28);

    animation:
        wheelRegisterShake 2.8s ease-in-out infinite;
}


/* WAVE 1 */

.wheel-register-wrap
.income-register-button::before {

    border-color:
        rgba(255, 194, 44, .75);

    animation:
        wheelRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


/* WAVE 2 */

.wheel-register-wrap
.income-register-button::after {

    border-color:
        rgba(255, 94, 43, .65);

    animation:
        wheelRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay: 1.2s;
}


/* ==========================================================
   REGISTER SHAKE
========================================================== */

@keyframes wheelRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   REGISTER WAVES
========================================================== */

@keyframes wheelRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


@keyframes wheelRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


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

@media screen and (max-width: 600px) {

    .wheel-earn-section {

        padding:
            5px 14px 5px;
    }


    .wheel-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .wheel-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .wheel-earn-icon {

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 19px;
    }


    .wheel-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .wheel-earn-heading h3 {

        font-size: 18px;
    }


    .wheel-earn-heading p {

        font-size: 9px;
    }


    .wheel-live-status {

        padding:
            5px 7px;

        font-size: 7px;
    }


    .wheel-live-bar {

        padding:
            10px 15px 7px;

        font-size: 9px;
    }


    .wheel-live-bar strong {

        font-size: 11px;
    }


    .wheel-game {

        padding:
            10px 0 13px;
    }


    .spin-wheel {

        width: 125px;
        height: 125px;

        border-width: 5px;
    }


    .wheel-pointer {

        top: 1px;

        font-size: 17px;
    }


    .wheel-center {

        width: 40px;
        height: 40px;

        font-size: 8px;
    }


    .wheel-segment {

        font-size: 8px;
    }


    .segment-1 {
        top: 11px;
        left: 52px;
    }

    .segment-2 {
        top: 30px;
        right: 18px;
    }

    .segment-3 {
        top: 57px;
        right: 8px;
    }

    .segment-4 {
        bottom: 29px;
        right: 18px;
    }

    .segment-5 {
        bottom: 11px;
        left: 54px;
    }

    .segment-6 {
        bottom: 29px;
        left: 17px;
    }

    .segment-7 {
        top: 57px;
        left: 8px;
    }

    .segment-8 {
        top: 29px;
        left: 18px;
    }


    .wheel-result {

        margin:
            0 15px;

        padding:
            7px 8px;

        font-size: 7px;
    }


    .wheel-result strong {

        font-size: 8px;
    }


    .wheel-action {

        padding:
            10px 15px 13px;
    }


    .wheel-spins {

        font-size: 7px;
    }


    .wheel-spins strong {

        font-size: 9px;
    }


    .spin-now-button {

        padding:
            8px 12px;

        font-size: 8px;
    }


    .wheel-register-wrap {

        margin-top: 14px;

        margin-bottom: 6px;
    }


    .wheel-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .wheel-live-status {

        display: none;
    }


    .wheel-earn-heading h3 {

        font-size: 17px;
    }


    .wheel-register-wrap
    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   INCOME STREAM 07
   DAILY LOGIN BONUS
   ROYAL BLUE / GOLD THEME
========================================================== */

.login-earn-section {

    position: relative;

    width: 100%;

    padding: 10px 20px 5px;

    overflow: hidden;
}


/* ==========================================================
   COMPACT CARD
========================================================== */

.login-earn-container {

    width: min(920px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 24, 57, .98),
            rgba(6, 11, 27, .99)
        );

    border:
        1px solid
        rgba(76, 148, 255, .30);

    box-shadow:
        0 0 35px
        rgba(42, 111, 255, .10);
}


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

.login-earn-header {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 20px 22px;

    background:
        linear-gradient(
            105deg,
            #123d91,
            #195bc4,
            #102f76
        );

    border-bottom:
        1px solid
        rgba(91, 158, 255, .20);
}


.login-earn-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ffe88a,
            #ffc52f
        );

    font-size: 23px;

    box-shadow:
        0 0 22px
        rgba(255, 200, 48, .30);

    animation:
        loginGiftPulse 2.4s ease-in-out infinite;
}


@keyframes loginGiftPulse {

    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 12px
            rgba(255,200,48,.18);
    }

    50% {
        transform: scale(1.05);

        box-shadow:
            0 0 30px
            rgba(255,200,48,.48);
    }
}


.login-earn-heading {

    flex: 1;

    min-width: 0;
}


.login-earn-label {

    display: block;

    margin-bottom: 4px;

    color: #bcd5ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.login-earn-heading h3 {

    margin: 0 0 4px;

    color: white;

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;
}


.login-earn-heading p {

    color:
        rgba(255,255,255,.66);

    font-size: 12px;
}


/* ==========================================================
   LIVE STATUS
========================================================== */

.login-live-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    color: #c7dbff;

    background:
        rgba(83, 147, 255, .08);

    border:
        1px solid
        rgba(107, 169, 255, .30);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.login-live-status span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #64ff7b;

    box-shadow:
        0 0 9px #64ff7b;

    animation:
        loginLivePulse 1.3s infinite;
}


@keyframes loginLivePulse {

    0%,
    100% {
        opacity: 1;

        transform: scale(1);
    }

    50% {
        opacity: .4;

        transform: scale(.65);
    }
}


/* ==========================================================
   LIVE MEMBERS
========================================================== */

.login-live-bar {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        14px 22px 9px;

    color: #74839e;

    font-size: 11px;
}


.login-live-bar strong {

    color: #dce8ff;

    font-size: 14px;
}


.login-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #62ed75;

    box-shadow:
        0 0 9px
        rgba(98,237,117,.8);

    animation:
        loginMemberPulse 1.5s infinite;
}


@keyframes loginMemberPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}


/* ==========================================================
   DAILY REWARD CARD
========================================================== */

.daily-reward-card {

    display: flex;

    align-items: center;

    gap: 14px;

    margin:
        0 22px;

    padding: 13px;

    border-radius: 16px;

    background:
        linear-gradient(
            110deg,
            rgba(41, 106, 255, .08),
            rgba(255, 197, 47, .035)
        );

    border:
        1px solid
        rgba(77, 144, 255, .14);
}


/* ==========================================================
   REWARD CALENDAR
========================================================== */

.reward-calendar {

    width: 64px;
    height: 64px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ffd94d,
            #f7a91c
        );

    color: #17315e;

    box-shadow:
        0 0 20px
        rgba(255, 193, 43, .18);

    animation:
        rewardCalendarPulse 2.8s infinite;
}


@keyframes rewardCalendarPulse {

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

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


.reward-calendar small {

    font-size: 7px;

    font-weight: 1000;

    letter-spacing: 1px;
}


.reward-calendar strong {

    margin-top: 2px;

    font-size: 8px;
}


.reward-calendar span {

    font-size: 17px;

    font-weight: 1000;

    line-height: 1;
}


/* ==========================================================
   REWARD INFO
========================================================== */

.reward-info {

    flex: 1;

    min-width: 0;
}


.reward-status {

    display: block;

    margin-bottom: 4px;

    color: #5c9dff;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.reward-info > strong {

    display: block;

    color: #e5edff;

    font-size: 12px;

    margin-bottom: 3px;
}


.reward-info p {

    margin: 0 0 7px;

    color: #71809a;

    font-size: 8px;
}


.login-streak {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        4px 8px;

    border-radius: 999px;

    background:
        rgba(255, 171, 40, .07);

    border:
        1px solid
        rgba(255, 181, 49, .15);

    color: #ffdc69;

    font-size: 8px;
}


/* ==========================================================
   JUST CLAIMED
========================================================== */

.reward-live {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;

    flex-shrink: 0;
}


.reward-live small {

    color: #687791;

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1px;
}


.reward-live strong {

    color: #caff70;

    font-size: 13px;

    white-space: nowrap;

    animation:
        rewardFlash 2s infinite;
}


@keyframes rewardFlash {

    0%,
    100% {
        opacity: .7;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(202,255,112,.45);
    }
}


/* ==========================================================
   LIVE CLAIM
========================================================== */

.login-live-earning {

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        11px 22px 0;

    padding:
        8px 11px;

    border-radius: 9px;

    color: #78859a;

    background:
        rgba(104, 156, 255, .025);

    border:
        1px solid
        rgba(104, 156, 255, .09);

    font-size: 9px;
}


.login-live-earning strong {

    margin-left: auto;

    color: #caff6d;

    font-size: 10px;

    white-space: nowrap;
}


.login-earning-pulse {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #67eb65;

    box-shadow:
        0 0 8px
        rgba(103,235,101,.7);

    animation:
        loginEarningPulse 1.2s infinite;
}


@keyframes loginEarningPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


/* ==========================================================
   ACTION
========================================================== */

.login-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        14px 22px 18px;
}


.login-tasks {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #6f7e95;

    font-size: 9px;
}


.login-tasks strong {

    color: white;

    font-size: 12px;
}


.claim-bonus-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 16px;

    border-radius: 999px;

    color: #132e61;

    background:
        linear-gradient(
            100deg,
            #ffe579,
            #ffc331
        );

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 0 18px
        rgba(255,195,49,.18);

    animation:
        claimBonusPulse 2.5s ease-in-out infinite;
}


@keyframes claimBonusPulse {

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

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


/* ==========================================================
   REGISTER NOW
========================================================== */

.login-register-wrap {

    margin-top: 18px;

    margin-bottom: 8px;
}


.login-register-wrap
.income-register-button {

    min-width: 280px;

    padding: 15px 30px;

    color: #10285b;

    background:
        linear-gradient(
            100deg,
            #ffe472,
            #ffc42f,
            #5593ff
        );

    border:
        1px solid
        rgba(255, 230, 123, .85);

    box-shadow:
        0 0 23px
        rgba(70, 132, 255, .24);

    animation:
        loginRegisterShake 2.8s ease-in-out infinite;
}


/* WAVE 1 */

.login-register-wrap
.income-register-button::before {

    border-color:
        rgba(255, 208, 59, .75);

    animation:
        loginRegisterWaveOne
        2.4s
        ease-out
        infinite;
}


/* WAVE 2 */

.login-register-wrap
.income-register-button::after {

    border-color:
        rgba(67, 138, 255, .65);

    animation:
        loginRegisterWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay: 1.2s;
}


/* ==========================================================
   REGISTER SHAKE
========================================================== */

@keyframes loginRegisterShake {

    0%,
    72%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-2px)
            rotate(-.8deg);
    }

    78% {
        transform:
            translateX(2px)
            rotate(.8deg);
    }

    81% {
        transform:
            translateX(-2px)
            rotate(-.6deg);
    }

    84% {
        transform:
            translateX(2px)
            rotate(.6deg);
    }

    87% {
        transform:
            translateX(-1px)
            rotate(-.3deg);
    }

    90% {
        transform:
            translateX(1px)
            rotate(.3deg);
    }

    93% {
        transform:
            translateX(0)
            rotate(0deg);
    }
}


/* ==========================================================
   REGISTER WAVES
========================================================== */

@keyframes loginRegisterWaveOne {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    65% {
        opacity: .25;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


@keyframes loginRegisterWaveTwo {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    65% {
        opacity: .20;
    }

    100% {
        transform: scale(1.20);
        opacity: 0;
    }
}


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

@media screen and (max-width: 600px) {

    .login-earn-section {

        padding:
            5px 14px 5px;
    }


    .login-earn-container {

        width: 100%;

        border-radius: 18px;
    }


    .login-earn-header {

        padding: 15px;

        gap: 9px;
    }


    .login-earn-icon {

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 19px;
    }


    .login-earn-label {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .login-earn-heading h3 {

        font-size: 18px;
    }


    .login-earn-heading p {

        font-size: 9px;
    }


    .login-live-status {

        padding:
            5px 7px;

        font-size: 7px;
    }


    .login-live-bar {

        padding:
            10px 15px 7px;

        font-size: 9px;
    }


    .login-live-bar strong {

        font-size: 11px;
    }


    .daily-reward-card {

        margin:
            0 15px;

        padding: 8px;

        gap: 9px;

        border-radius: 12px;
    }


    .reward-calendar {

        width: 50px;
        height: 50px;

        border-radius: 10px;
    }


    .reward-calendar small {

        font-size: 5px;
    }


    .reward-calendar strong {

        font-size: 6px;
    }


    .reward-calendar span {

        font-size: 14px;
    }


    .reward-status {

        font-size: 5px;
    }


    .reward-info > strong {

        font-size: 9px;
    }


    .reward-info p {

        font-size: 6px;

        margin-bottom: 5px;
    }


    .login-streak {

        padding:
            3px 6px;

        font-size: 6px;
    }


    .reward-live small {

        font-size: 5px;
    }


    .reward-live strong {

        font-size: 9px;
    }


    .login-live-earning {

        margin:
            8px 15px 0;

        padding:
            7px 8px;

        font-size: 7px;
    }


    .login-live-earning strong {

        font-size: 8px;
    }


    .login-action {

        padding:
            10px 15px 13px;
    }


    .login-tasks {

        font-size: 7px;
    }


    .login-tasks strong {

        font-size: 9px;
    }


    .claim-bonus-button {

        padding:
            8px 12px;

        font-size: 8px;
    }


    .login-register-wrap {

        margin-top: 14px;

        margin-bottom: 6px;
    }


    .login-register-wrap
    .income-register-button {

        width: 100%;

        max-width: 320px;

        min-width: 0;

        padding:
            13px 22px;

        font-size: 13px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 390px) {

    .login-live-status {

        display: none;
    }


    .login-earn-heading h3 {

        font-size: 17px;
    }


    .login-register-wrap
    .income-register-button {

        max-width: 290px;

        padding:
            12px 20px;

        font-size: 12px;
    }

}

/* ==========================================================
   COMMUNITY TESTIMONIALS
========================================================== */

.community-section {

    position: relative;

    width: 100%;

    padding: 55px 0 45px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(137, 53, 255, .08),
            transparent 55%
        );
}


.community-container {

    width: min(1000px, 100%);

    margin: 0 auto;
}


/* ==========================================================
   INTRO
========================================================== */

.community-heading {

    text-align: center;

    padding:
        0 20px 25px;
}


.community-kicker {

    display: inline-block;

    margin-bottom: 8px;

    color: #a96cff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.community-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(26px, 4vw, 40px);

    font-weight: 950;

    line-height: 1.1;
}


.community-heading p {

    max-width: 560px;

    margin: 10px auto 0;

    color: rgba(255,255,255,.58);

    font-size: 12px;

    line-height: 1.6;
}


/* ==========================================================
   TESTIMONIAL WINDOW
========================================================== */

.testimonial-window {

    width: 100%;

    overflow: hidden;

    position: relative;
}


.testimonial-window::before,
.testimonial-window::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 80px;

    z-index: 3;

    pointer-events: none;
}


.testimonial-window::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            #08080f,
            transparent
        );
}


.testimonial-window::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            #08080f,
            transparent
        );
}


/* ==========================================================
   MOVING TRACK
========================================================== */

.testimonial-track {

    display: flex;

    width: max-content;

    gap: 14px;

    animation:
        testimonialScroll
        35s
        linear
        infinite;
}


.testimonial-track:hover {

    animation-play-state: paused;
}


@keyframes testimonialScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* ==========================================================
   CARD
========================================================== */

.testimonial-card {

    width: 285px;

    min-height: 175px;

    flex-shrink: 0;

    padding: 15px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    border:
        1px solid
        rgba(255,255,255,.09);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.22);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.testimonial-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(169,108,255,.35);
}


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

.testimonial-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.testimonial-person {

    display: flex;

    align-items: center;

    gap: 9px;
}


/* ==========================================================
   AVATAR
========================================================== */

.testimonial-avatar {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    font-size: 11px;

    font-weight: 950;

    border:
        2px solid
        rgba(255,255,255,.14);

    box-shadow:
        0 0 15px
        rgba(255,255,255,.06);

    animation:
        testimonialAvatarPulse
        3s
        ease-in-out
        infinite;
}


@keyframes testimonialAvatarPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}


.avatar-purple {

    background:
        linear-gradient(
            145deg,
            #a855f7,
            #6325b8
        );
}


.avatar-blue {

    background:
        linear-gradient(
            145deg,
            #3b9cff,
            #2453bc
        );
}


.avatar-green {

    background:
        linear-gradient(
            145deg,
            #38d996,
            #15835d
        );
}


.avatar-orange {

    background:
        linear-gradient(
            145deg,
            #ffae4b,
            #c45c16
        );
}


.avatar-pink {

    background:
        linear-gradient(
            145deg,
            #ff67b5,
            #b52f72
        );
}


/* ==========================================================
   NAME + COUNTRY
========================================================== */

.testimonial-person strong {

    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 850;
}


.testimonial-person span {

    display: block;

    margin-top: 3px;

    color: #8d8d9b;

    font-size: 9px;
}


/* ==========================================================
   STARS
========================================================== */

.testimonial-stars {

    color: #ffd34e;

    font-size: 9px;

    letter-spacing: 1px;

    white-space: nowrap;

    animation:
        testimonialStars
        2.5s
        ease-in-out
        infinite;
}


@keyframes testimonialStars {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 10px
            rgba(255,211,78,.55);
    }
}


/* ==========================================================
   TESTIMONIAL TEXT
========================================================== */

.testimonial-text {

    margin:
        13px 0 12px;

    color:
        rgba(255,255,255,.70);

    font-size: 10px;

    line-height: 1.6;
}


/* ==========================================================
   BOTTOM
========================================================== */

.testimonial-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding-top: 9px;

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

    color: #656572;

    font-size: 7px;
}


.testimonial-live {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #7e8890;

    font-size: 7px;

    font-weight: 800;
}


.testimonial-live i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #48e878;

    box-shadow:
        0 0 7px
        rgba(72,232,120,.8);

    animation:
        testimonialLivePulse
        1.2s
        infinite;
}


@keyframes testimonialLivePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}


/* ==========================================================
   COMMUNITY ACTIVE
========================================================== */

.community-active {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 20px;

    color: #6f6f7c;

    font-size: 9px;
}


.community-active strong {

    color: #a96cff;

    font-size: 10px;
}


.community-active > span:first-child {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #4bea78;

    box-shadow:
        0 0 8px
        rgba(75,234,120,.7);

    animation:
        communityPulse
        1.3s
        infinite;
}


@keyframes communityPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(.65);
    }
}


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

@media screen and (max-width: 600px) {

    .community-section {

        padding:
            35px 0 32px;
    }


    .community-heading {

        padding:
            0 18px 20px;
    }


    .community-kicker {

        font-size: 7px;

        letter-spacing: 1.6px;
    }


    .community-heading h2 {

        font-size: 26px;
    }


    .community-heading p {

        font-size: 10px;

        line-height: 1.5;
    }


    .testimonial-track {

        gap: 10px;

        animation-duration:
            30s;
    }


    .testimonial-card {

        width: 255px;

        min-height: 160px;

        padding: 13px;

        border-radius: 16px;
    }


    .testimonial-avatar {

        width: 38px;
        height: 38px;

        font-size: 10px;
    }


    .testimonial-person strong {

        font-size: 10px;
    }


    .testimonial-person span {

        font-size: 8px;
    }


    .testimonial-stars {

        font-size: 8px;
    }


    .testimonial-text {

        margin:
            11px 0 10px;

        font-size: 9px;

        line-height: 1.55;
    }


    .testimonial-bottom {

        font-size: 6px;
    }


    .testimonial-live {

        font-size: 6px;
    }


    .community-active {

        margin-top: 15px;

        font-size: 8px;
    }

}

/* ==========================================================
   PREMIUM FAQ SECTION
========================================================== */

.faq-section {

    position: relative;

    width: 100%;

    padding: 65px 20px 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(139, 65, 255, .10),
            transparent 48%
        );
}


.faq-section::before {

    content: "";

    position: absolute;

    top: 80px;
    left: 50%;

    width: 600px;
    height: 400px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(150, 68, 255, .08),
            transparent 70%
        );

    pointer-events: none;
}


.faq-container {

    position: relative;

    width: min(820px, 100%);

    margin: 0 auto;

    z-index: 2;
}


/* ==========================================================
   HEADING
========================================================== */

.faq-heading {

    text-align: center;

    margin-bottom: 30px;
}


.faq-kicker {

    display: inline-block;

    margin-bottom: 9px;

    color: #a66bff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.faq-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(27px, 4vw, 41px);

    line-height: 1.08;

    font-weight: 950;

    letter-spacing: -.7px;
}


.faq-heading p {

    max-width: 560px;

    margin:
        11px auto 0;

    color:
        rgba(255,255,255,.55);

    font-size: 12px;

    line-height: 1.6;
}


/* ==========================================================
   FAQ LIST
========================================================== */

.faq-list {

    display: flex;

    flex-direction: column;

    gap: 9px;
}


/* ==========================================================
   FAQ ITEM
========================================================== */

.faq-item {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    border:
        1px solid
        rgba(255,255,255,.075);

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.faq-item:hover {

    border-color:
        rgba(166, 107, 255, .28);

    background:
        linear-gradient(
            110deg,
            rgba(143,75,255,.065),
            rgba(255,255,255,.018)
        );
}


.faq-item.active {

    border-color:
        rgba(166,107,255,.34);

    background:
        linear-gradient(
            110deg,
            rgba(142,72,255,.075),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 10px 35px
        rgba(91,40,160,.09);
}


/* ==========================================================
   QUESTION
========================================================== */

.faq-question {

    width: 100%;

    min-height: 66px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        10px 16px;

    border: 0;

    outline: none;

    cursor: pointer;

    color: white;

    background: transparent;

    text-align: left;
}


/* ==========================================================
   NUMBER
========================================================== */

.faq-number {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #c59aff;

    background:
        rgba(156, 78, 255, .10);

    border:
        1px solid
        rgba(170, 96, 255, .16);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.faq-item.active
.faq-number {

    color: #281040;

    background:
        linear-gradient(
            145deg,
            #d4a0ff,
            #934cff
        );

    border-color: transparent;

    box-shadow:
        0 0 15px
        rgba(154,76,255,.20);
}


/* ==========================================================
   QUESTION TEXT
========================================================== */

.faq-question-text {

    flex: 1;

    color:
        rgba(255,255,255,.88);

    font-size: 12px;

    font-weight: 800;

    line-height: 1.35;
}


.faq-item.active
.faq-question-text {

    color: #ffffff;
}


/* ==========================================================
   PLUS ICON
========================================================== */

.faq-icon {

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ad70ff;

    background:
        rgba(160,82,255,.08);

    border:
        1px solid
        rgba(160,82,255,.16);

    font-size: 18px;

    font-weight: 300;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


.faq-item.active
.faq-icon {

    transform:
        rotate(45deg);

    color: #281040;

    background:
        #bd7aff;

    border-color: transparent;
}


/* ==========================================================
   ANSWER
========================================================== */

.faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .4s
        cubic-bezier(.4,0,.2,1);
}


.faq-answer p {

    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding:
        0 60px 0 63px;

    color:
        rgba(255,255,255,.57);

    font-size: 10px;

    line-height: 1.7;

    opacity: 0;

    transition:
        opacity .25s ease,
        padding .4s ease;
}


.faq-item.active
.faq-answer {

    grid-template-rows: 1fr;
}


.faq-item.active
.faq-answer p {

    padding:
        0 60px 18px 63px;

    opacity: 1;
}


/* ==========================================================
   FAQ CTA
========================================================== */

.faq-cta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 24px;

    padding:
        14px 16px;

    border-radius: 16px;

    background:
        linear-gradient(
            105deg,
            rgba(130,64,255,.09),
            rgba(255,255,255,.025)
        );

    border:
        1px solid
        rgba(161,95,255,.16);
}


.faq-cta-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #291041;

    background:
        linear-gradient(
            145deg,
            #d19aff,
            #964eff
        );

    font-size: 17px;

    font-weight: 900;
}


.faq-cta-text {

    flex: 1;

    min-width: 0;
}


.faq-cta-text strong {

    display: block;

    color: #ffffff;

    font-size: 11px;

    margin-bottom: 3px;
}


.faq-cta-text span {

    color:
        rgba(255,255,255,.45);

    font-size: 8px;
}


.faq-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        9px 15px;

    border-radius: 999px;

    color: #26103d;

    background:
        linear-gradient(
            100deg,
            #d19aff,
            #9b50ff
        );

    text-decoration: none;

    font-size: 9px;

    font-weight: 900;

    white-space: nowrap;

    box-shadow:
        0 0 17px
        rgba(155,80,255,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.faq-cta-button:hover {

    transform:
        translateY(-2px);

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


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

@media screen and (max-width: 600px) {

    .faq-section {

        padding:
            42px 14px 48px;
    }


    .faq-heading {

        margin-bottom: 22px;
    }


    .faq-kicker {

        font-size: 7px;

        letter-spacing: 1.8px;
    }


    .faq-heading h2 {

        font-size: 27px;
    }


    .faq-heading p {

        margin-top: 9px;

        font-size: 9px;
    }


    .faq-list {

        gap: 7px;
    }


    .faq-item {

        border-radius: 13px;
    }


    .faq-question {

        min-height: 58px;

        gap: 9px;

        padding:
            8px 10px;
    }


    .faq-number {

        width: 30px;
        height: 30px;

        border-radius: 8px;

        font-size: 7px;
    }


    .faq-question-text {

        font-size: 10px;

        line-height: 1.35;
    }


    .faq-icon {

        width: 26px;
        height: 26px;

        font-size: 16px;
    }


    .faq-answer p {

        padding:
            0 42px 0 49px;

        font-size: 8px;

        line-height: 1.65;
    }


    .faq-item.active
    .faq-answer p {

        padding:
            0 42px 15px 49px;
    }


    .faq-cta {

        margin-top: 17px;

        padding:
            11px;

        gap: 9px;

        border-radius: 13px;
    }


    .faq-cta-icon {

        width: 32px;
        height: 32px;

        border-radius: 9px;

        font-size: 14px;
    }


    .faq-cta-text strong {

        font-size: 9px;
    }


    .faq-cta-text span {

        font-size: 7px;
    }


    .faq-cta-button {

        padding:
            8px 11px;

        font-size: 7px;
    }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media screen and (max-width: 370px) {

    .faq-cta-text span {

        display: none;
    }


    .faq-cta-button {

        padding:
            8px 10px;

        font-size: 7px;
    }

}

/* ==========================================================
   KIVANISOFT — COUNTRIES NETWORK
========================================================== */

.countries-section {

    position: relative;

    width: 100%;

    padding: 65px 18px 60px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(83, 176, 255, .07),
            transparent 45%
        );
}


.countries-container {

    position: relative;

    width: min(900px, 100%);

    margin: 0 auto;

    z-index: 2;
}


/* ==========================================================
   HEADING
========================================================== */

.countries-heading {

    text-align: center;

    margin-bottom: 25px;
}


.countries-kicker {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

    color: #5ecfff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.countries-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(28px, 4.5vw, 43px);

    line-height: 1.08;

    font-weight: 950;

    letter-spacing: -.8px;
}


.countries-heading h2 span {

    background:
        linear-gradient(
            90deg,
            #78d8ff,
            #a76cff,
            #d879ff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.countries-heading p {

    max-width: 540px;

    margin:
        10px auto 14px;

    color:
        rgba(255,255,255,.48);

    font-size: 11px;

    line-height: 1.6;
}


/* ==========================================================
   30+ BADGE
========================================================== */

.countries-count {

    display: inline-flex;

    align-items: baseline;

    gap: 7px;

    padding:
        8px 16px;

    border-radius: 999px;

    background:
        rgba(60, 203, 255, .045);

    border:
        1px solid
        rgba(69, 213, 255, .18);

    box-shadow:
        0 0 20px
        rgba(62, 198, 255, .05);
}


.countries-count strong {

    color: #69d8ff;

    font-size: 16px;

    font-weight: 950;
}


.countries-count span {

    color:
        rgba(255,255,255,.45);

    font-size: 8px;
}


/* ==========================================================
   REGION CARD
========================================================== */

.region-card {

    position: relative;

    margin-bottom: 13px;

    padding: 15px 17px;

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.012)
        );

    border:
        1px solid
        rgba(112, 167, 255, .14);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.16);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.region-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(112, 184, 255, .28);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.23);
}


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

.region-header {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 11px;
}


.region-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(112, 70, 185, .32),
            rgba(54, 30, 102, .55)
        );

    border:
        1px solid
        rgba(168, 111, 255, .15);

    font-size: 15px;

    box-shadow:
        0 0 18px
        rgba(126, 67, 255, .08);
}


.region-title {

    flex: 1;
}


.region-title strong {

    display: block;

    color:
        rgba(255,255,255,.90);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.region-title span {

    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.30);

    font-size: 7px;
}


/* ==========================================================
   ACTIVE STATUS
========================================================== */

.region-status {

    padding:
        5px 8px;

    border-radius: 999px;

    color: #69d8ff;

    background:
        rgba(54, 195, 255, .045);

    border:
        1px solid
        rgba(70, 208, 255, .18);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: .5px;
}


.region-status.expanding {

    color: #e88cff;

    background:
        rgba(216, 105, 255, .045);

    border-color:
        rgba(216, 105, 255, .18);
}


/* ==========================================================
   COUNTRY LIST
========================================================== */

.country-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.country-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    border-radius: 10px;

    color:
        rgba(255,255,255,.68);

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

    border:
        1px solid
        rgba(255,255,255,.075);

    font-size: 8px;

    white-space: nowrap;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.country-pill:hover {

    transform:
        translateY(-2px);

    background:
        rgba(112, 162, 255, .07);

    border-color:
        rgba(112, 184, 255, .22);
}


.country-pill i {

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #4ee77c;

    box-shadow:
        0 0 7px
        rgba(78,231,124,.7);

    animation:
        countryPulse
        1.8s
        ease-in-out
        infinite;
}


@keyframes countryPulse {

    0%,
    100% {
        opacity: .65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}


/* ==========================================================
   BOTTOM STATUS
========================================================== */

.countries-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 23px;
}


.countries-bottom span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #41d8ff;

    box-shadow:
        0 0 10px
        rgba(65,216,255,.7);

    animation:
        countryBottomPulse
        1.5s
        infinite;
}


@keyframes countryBottomPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


.countries-bottom p {

    margin: 0;

    color:
        rgba(255,255,255,.35);

    font-size: 8px;
}


.countries-bottom strong {

    font-size: 13px;

    animation:
        globeFloat
        3s
        ease-in-out
        infinite;
}


@keyframes globeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(8deg);
    }
}


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

@media screen and (max-width: 600px) {

    .countries-section {

        padding:
            42px 14px 45px;
    }


    .countries-heading {

        margin-bottom: 19px;
    }


    .countries-kicker {

        font-size: 7px;

        letter-spacing: 1.6px;
    }


    .countries-heading h2 {

        font-size: 27px;

        line-height: 1.12;
    }


    .countries-heading p {

        margin-top: 8px;

        font-size: 9px;
    }


    .countries-count {

        padding:
            7px 13px;
    }


    .countries-count strong {

        font-size: 14px;
    }


    .countries-count span {

        font-size: 7px;
    }


    .region-card {

        margin-bottom: 9px;

        padding:
            11px 12px;

        border-radius: 15px;
    }


    .region-header {

        gap: 8px;

        margin-bottom: 9px;
    }


    .region-icon {

        width: 34px;
        height: 34px;

        border-radius: 9px;

        font-size: 12px;
    }


    .region-title strong {

        font-size: 10px;

        letter-spacing: 1px;
    }


    .region-title span {

        font-size: 6px;
    }


    .region-status {

        padding:
            4px 6px;

        font-size: 5px;
    }


    .country-list {

        gap: 5px;
    }


    .country-pill {

        padding:
            6px 8px;

        border-radius: 8px;

        font-size: 7px;

        gap: 5px;
    }


    .country-pill i {

        width: 4px;
        height: 4px;
    }


    .countries-bottom {

        margin-top: 17px;
    }


    .countries-bottom p {

        font-size: 7px;
    }


    .countries-bottom strong {

        font-size: 11px;
    }

}

/* ==========================================================
   FINAL CTA
========================================================== */

.final-cta-section {

    position: relative;

    width: 100%;

    padding: 80px 20px 75px;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            ellipse at center,
            rgba(141, 61, 255, .18),
            transparent 62%
        );
}


.final-cta-glow {

    position: absolute;

    left: 50%;
    top: 30%;

    width: 500px;
    height: 300px;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            ellipse,
            rgba(187, 67, 255, .12),
            transparent 70%
        );

    pointer-events: none;

    filter: blur(5px);
}


.final-cta-container {

    position: relative;

    width: min(700px, 100%);

    margin: 0 auto;

    z-index: 2;
}


.final-cta-kicker {

    display: inline-block;

    margin-bottom: 12px;

    color: #a66bff;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.final-cta-container h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(34px, 6vw, 58px);

    font-weight: 950;

    line-height: 1.02;

    letter-spacing: -1.5px;
}


.final-cta-container h2 span {

    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #8d4cff,
            #bd62ff,
            #f05acb
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.final-cta-container p {

    max-width: 550px;

    margin:
        15px auto 24px;

    color:
        rgba(255,255,255,.55);

    font-size: 12px;

    line-height: 1.7;
}


/* ==========================================================
   FINAL REGISTER BUTTON
========================================================== */

.final-register-wrap {

    position: relative;

    display: inline-block;

    margin: 5px auto 18px;
}


.final-register-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 260px;

    padding:
        16px 32px;

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #7628ff,
            #a438ff,
            #e1289b
        );

    border:
        1px solid
        rgba(210,151,255,.55);

    box-shadow:
        0 0 28px
        rgba(139,54,255,.30);

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    overflow: visible;

    animation:
        finalButtonShake
        3s
        ease-in-out
        infinite;

    z-index: 2;
}


.final-register-button strong {

    font-size: 20px;

    line-height: 1;
}


.final-register-button::before,
.final-register-button::after {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    border:
        1px solid
        rgba(177,103,255,.65);

    pointer-events: none;

    z-index: -1;
}


.final-register-button::before {

    animation:
        finalWaveOne
        2.4s
        ease-out
        infinite;
}


.final-register-button::after {

    animation:
        finalWaveTwo
        2.4s
        ease-out
        infinite;

    animation-delay:
        1.2s;
}


/* ==========================================================
   BUTTON SHAKE
========================================================== */

@keyframes finalButtonShake {

    0%,
    72%,
    100% {

        transform:
            translateX(0)
            rotate(0);
    }

    75% {

        transform:
            translateX(-2px)
            rotate(-.8deg);
    }

    78% {

        transform:
            translateX(2px)
            rotate(.8deg);
    }

    81% {

        transform:
            translateX(-2px)
            rotate(-.6deg);
    }

    84% {

        transform:
            translateX(2px)
            rotate(.6deg);
    }

    87% {

        transform:
            translateX(-1px)
            rotate(-.3deg);
    }

    90% {

        transform:
            translateX(1px)
            rotate(.3deg);
    }

    93% {

        transform:
            translateX(0)
            rotate(0);
    }
}


/* ==========================================================
   OUTWARD WAVES
========================================================== */

@keyframes finalWaveOne {

    0% {

        transform:
            scale(1);

        opacity: .7;
    }

    65% {

        opacity: .25;
    }

    100% {

        transform:
            scale(1.22);

        opacity: 0;
    }
}


@keyframes finalWaveTwo {

    0% {

        transform:
            scale(1);

        opacity: .65;
    }

    65% {

        opacity: .20;
    }

    100% {

        transform:
            scale(1.22);

        opacity: 0;
    }
}


/* ==========================================================
   FINAL TRUST
========================================================== */

.final-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    color:
        rgba(255,255,255,.38);

    font-size: 9px;
}


.final-trust strong {

    color:
        rgba(255,255,255,.78);

    font-size: 10px;
}


.final-live-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #52eb79;

    box-shadow:
        0 0 9px
        rgba(82,235,121,.75);

    animation:
        finalLivePulse
        1.4s
        infinite;
}


@keyframes finalLivePulse {

    0%,
    100% {

        transform: scale(1);

        opacity: 1;
    }

    50% {

        transform: scale(.65);

        opacity: .45;
    }
}


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

.site-footer {

    position: relative;

    width: 100%;

    background:
        #07070e;

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

    overflow: hidden;
}


.site-footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 600px;
    height: 250px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(125,58,255,.09),
            transparent 70%
        );

    pointer-events: none;
}


.footer-container {

    position: relative;

    width: min(1100px, 100%);

    margin: 0 auto;

    padding:
        55px 25px 25px;

    z-index: 2;
}


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

.footer-main {

    display: grid;

    grid-template-columns:
        1.8fr
        1fr
        1fr
        1fr;

    gap: 45px;
}


/* ==========================================================
   BRAND
========================================================== */

.footer-logo {

    display: inline-block;

    color: #ffffff;

    font-size: 25px;

    font-weight: 950;

    letter-spacing: -1.2px;

    text-decoration: none;
}


.footer-logo span {

    color: #a15cff;

    background:
        linear-gradient(
            90deg,
            #8f45ff,
            #d660ff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.footer-brand p {

    max-width: 310px;

    margin:
        12px 0 17px;

    color:
        rgba(255,255,255,.40);

    font-size: 9px;

    line-height: 1.7;
}


.footer-live {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        rgba(255,255,255,.35);

    font-size: 7px;

    letter-spacing: .6px;
}


.footer-live span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #55ed79;

    box-shadow:
        0 0 7px
        rgba(85,237,121,.7);

    animation:
        footerLivePulse
        1.3s
        infinite;
}


.footer-live strong {

    color:
        rgba(255,255,255,.62);

    font-size: 8px;
}


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

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}


.footer-column h4 {

    margin:
        0 0 5px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .8px;
}


.footer-column a {

    color:
        rgba(255,255,255,.40);

    font-size: 8px;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.footer-column a:hover {

    color: #b978ff;

    transform:
        translateX(3px);
}


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

.footer-divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        38px 0 20px;
}


.footer-divider span {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(151,89,255,.28)
        );
}


.footer-divider span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(151,89,255,.28),
            transparent
        );
}


.footer-divider div {

    color: #9d5cff;

    font-size: 9px;

    text-shadow:
        0 0 10px
        rgba(157,92,255,.55);

    animation:
        footerStar
        2.5s
        ease-in-out
        infinite;
}


@keyframes footerStar {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .65;
    }

    50% {

        transform:
            scale(1.25);

        opacity: 1;
    }
}


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

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.footer-copy {

    color:
        rgba(255,255,255,.28);

    font-size: 7px;
}


.footer-copy strong {

    color:
        rgba(255,255,255,.55);
}


.footer-legal {

    display: flex;

    gap: 15px;
}


.footer-legal a {

    color:
        rgba(255,255,255,.28);

    font-size: 7px;

    text-decoration: none;

    transition:
        color .25s ease;
}


.footer-legal a:hover {

    color: #ad6aff;
}


/* ==========================================================
   SOCIAL
========================================================== */

.footer-social {

    display: flex;

    align-items: center;

    gap: 6px;
}


.footer-social a {

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        rgba(255,255,255,.55);

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

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

    font-size: 10px;

    font-weight: 900;

    text-decoration: none;

    transition:
        transform .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.footer-social a:hover {

    transform:
        translateY(-3px);

    color: #ffffff;

    border-color:
        rgba(164,93,255,.45);
}


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

.footer-status {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 25px;

    color:
        rgba(255,255,255,.22);

    font-size: 7px;
}


.footer-status span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #50df77;

    box-shadow:
        0 0 7px
        rgba(80,223,119,.7);

    animation:
        footerLivePulse
        1.4s
        infinite;
}


.footer-status b {

    font-size: 10px;
}


@keyframes footerLivePulse {

    0%,
    100% {

        opacity: 1;
    }

    50% {

        opacity: .35;
    }
}


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

@media screen and (max-width: 600px) {

    .final-cta-section {

        padding:
            55px 16px 50px;
    }


    .final-cta-kicker {

        font-size: 7px;

        letter-spacing: 1.7px;
    }


    .final-cta-container h2 {

        font-size: 39px;

        line-height: 1.02;
    }


    .final-cta-container p {

        margin:
            12px auto 20px;

        font-size: 9px;

        line-height: 1.6;
    }


    .final-register-button {

        min-width: 230px;

        padding:
            14px 25px;

        font-size: 12px;
    }


    .final-register-button strong {

        font-size: 17px;
    }


    .final-trust {

        font-size: 7px;
    }


    .final-trust strong {

        font-size: 8px;
    }


    .footer-container {

        padding:
            40px 18px 20px;
    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px 20px;
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }


    .footer-logo {

        font-size: 22px;
    }


    .footer-brand p {

        max-width: 330px;

        font-size: 8px;
    }


    .footer-column {

        gap: 8px;
    }


    .footer-column h4 {

        font-size: 9px;
    }


    .footer-column a {

        font-size: 7px;
    }


    .footer-divider {

        margin:
            30px 0 17px;
    }


    .footer-bottom {

        flex-direction: column;

        align-items: center;

        gap: 13px;

        text-align: center;
    }


    .footer-copy {

        font-size: 7px;
    }


    .footer-legal {

        gap: 12px;
    }


    .footer-legal a {

        font-size: 7px;
    }


    .footer-social {

        order: -1;
    }


    .footer-status {

        margin-top: 20px;

        font-size: 6px;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 380px) {

    .final-cta-container h2 {

        font-size: 35px;
    }


    .final-register-button {

        min-width: 215px;

        padding:
            13px 21px;

        font-size: 11px;
    }


    .footer-main {

        gap:
            25px 15px;
    }

}

/* ==========================================================
   WHATSAPP CHANNEL FLOATING BUTTON
========================================================== */

.whatsapp-channel-button {

    position: fixed;

    left: 20px;
    bottom: 22px;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #25d366,
            #12a94b
        );

    border:
        2px solid
        rgba(255,255,255,.25);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.35),

        0 0 20px
        rgba(37,211,102,.35);

    text-decoration: none;

    z-index: 9999;

    animation:
        whatsappShake
        3.5s
        ease-in-out
        infinite;
}


/* ==========================================================
   WHATSAPP ICON
========================================================== */

.whatsapp-icon {

    width: 32px;
    height: 32px;

    display: flex;

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

    position: relative;

    z-index: 3;
}


.whatsapp-icon svg {

    width: 100%;
    height: 100%;

    fill: #ffffff;

    display: block;
}


/* ==========================================================
   99+ NOTIFICATION BADGE
========================================================== */

.whatsapp-badge {

    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 28px;
    height: 28px;

    padding: 0 6px;

    display: flex;

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

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            #ff3030,
            #d90000
        );

    color: #ffffff;

    border:
        2px solid
        #09070f;

    font-size: 9px;

    font-weight: 950;

    line-height: 1;

    box-shadow:
        0 3px 12px
        rgba(255,0,0,.45);

    z-index: 5;

    animation:
        badgePulse
        1.5s
        ease-in-out
        infinite;
}


/* ==========================================================
   OUTWARD WAVES
========================================================== */

.whatsapp-wave {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        2px solid
        rgba(37,211,102,.65);

    pointer-events: none;

    z-index: 1;
}


.whatsapp-wave-one {

    animation:
        whatsappWave
        2.4s
        ease-out
        infinite;
}


.whatsapp-wave-two {

    animation:
        whatsappWave
        2.4s
        ease-out
        infinite;

    animation-delay:
        1.2s;
}


@keyframes whatsappWave {

    0% {

        transform:
            scale(1);

        opacity: .75;
    }

    65% {

        opacity: .25;
    }

    100% {

        transform:
            scale(1.8);

        opacity: 0;
    }
}


/* ==========================================================
   BUTTON SHAKE
========================================================== */

@keyframes whatsappShake {

    0%,
    72%,
    100% {

        transform:
            translateX(0)
            rotate(0deg);
    }

    75% {

        transform:
            translateX(-2px)
            rotate(-3deg);
    }

    78% {

        transform:
            translateX(2px)
            rotate(3deg);
    }

    81% {

        transform:
            translateX(-2px)
            rotate(-2deg);
    }

    84% {

        transform:
            translateX(2px)
            rotate(2deg);
    }

    87% {

        transform:
            translateX(-1px)
            rotate(-1deg);
    }

    90% {

        transform:
            translateX(1px)
            rotate(1deg);
    }

    93% {

        transform:
            translateX(0)
            rotate(0);
    }
}


/* ==========================================================
   BADGE PULSE
========================================================== */

@keyframes badgePulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.12);
    }
}


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .whatsapp-channel-button:hover {

        transform:
            scale(1.08);

        box-shadow:
            0 10px 30px
            rgba(0,0,0,.4),

            0 0 28px
            rgba(37,211,102,.5);
    }

}


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

@media screen and (max-width: 600px) {

    .whatsapp-channel-button {

        left: 14px;
        bottom: 18px;

        width: 54px;
        height: 54px;
    }


    .whatsapp-icon {

        width: 29px;
        height: 29px;
    }


    .whatsapp-badge {

        top: -6px;
        right: -6px;

        min-width: 26px;
        height: 26px;

        font-size: 8px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .whatsapp-channel-button,
    .whatsapp-wave,
    .whatsapp-badge {

        animation: none;
    }

}