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

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


html {
    width: 100%;
    min-height: 100%;

    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    background: #ffffff;

    color: #111222;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


/* ==========================================================
   INTRO SECTION
========================================================== */

.intro-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 82%,
            #faf7ff 100%
        );
}


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

.intro-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 520px;

    margin: 0 auto;

    padding:
        16px
        15px
        48px;
}


/* ==========================================================
   TOP BAR
========================================================== */

.intro-top {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 20px;
}


/* ==========================================================
   BRAND
========================================================== */

.brand {

    display: flex;

    align-items: center;

    gap: 8px;
}


.brand-logo {

    position: relative;

    width: 41px;
    height: 41px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #7128e8;

    font-size: 21px;

    font-weight: 900;

    font-style: italic;

    background: #ffffff;

    border: 2px solid transparent;

    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(
            135deg,
            #5d16d9,
            #c34dff,
            #39108f,
            #f18aff,
            #5d16d9
        );

    background-origin: border-box;

    background-clip:
        padding-box,
        border-box;

    box-shadow:
        0 0 0 4px
        rgba(112,40,232,.05),

        0 6px 20px
        rgba(112,40,232,.13);
}


.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand-name strong {

    color: #121421;

    font-size: 11px;

    font-weight: 900;
}


.brand-name em {

    margin-top: 4px;

    color: #7026dc;

    font-family:
        Georgia,
        serif;

    font-size: 9px;

    font-weight: 600;
}


/* ==========================================================
   ONLINE STATUS
========================================================== */

.online-status {

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        7px
        10px;

    border-radius: 999px;

    border:
        1px solid
        rgba(40,190,91,.16);

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

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.06);

    color: #8b9098;

    white-space: nowrap;

    font-size: 7px;
}


.online-status strong {

    color: #18a84d;

    font-size: 7px;

    letter-spacing: .5px;
}


.online-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #20c65c;

    box-shadow:
        0 0 0 3px
        rgba(32,198,92,.12),

        0 0 12px
        rgba(32,198,92,.55);

    animation:
        onlinePulse
        1.5s
        ease-in-out
        infinite;
}


@keyframes onlinePulse {

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

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


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

.profile-area {

    position: relative;

    width: 100%;

    height: 235px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 3px;

    margin-bottom: 8px;
}


/* ==========================================================
   PURPLE OUTER GLOW
========================================================== */

.profile-glow {

    position: absolute;

    width: 205px;
    height: 205px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(129,42,255,.32),
            rgba(129,42,255,.15) 42%,
            transparent 72%
        );

    filter: blur(8px);

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


@keyframes purpleGlow {

    0%,
    100% {
        transform: scale(.94);

        opacity: .7;
    }

    50% {
        transform: scale(1.06);

        opacity: 1;
    }
}


/* ==========================================================
   OUTER ORBIT RING
========================================================== */

.profile-orbit {

    position: absolute;

    width: 205px;
    height: 205px;

    border-radius: 50%;

    border:
        2px solid
        rgba(117,36,232,.35);

    box-shadow:
        0 0 18px
        rgba(115,36,230,.25);

    animation:
        orbitSpin
        9s
        linear
        infinite;
}


@keyframes orbitSpin {

    from {
        transform: rotate(0deg);
    }

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


/* ==========================================================
   MAIN PROFILE RING
========================================================== */

.profile-ring {

    position: relative;

    width: 190px;
    height: 190px;

    padding: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            from 215deg,

            #39108e 0deg,

            #7622e8 55deg,

            #c94dff 105deg,

            #f49cff 145deg,

            #7321e4 205deg,

            #3b0e8d 270deg,

            #7526e7 320deg,

            #c34bff 350deg,

            #39108e 360deg
        );

    box-shadow:

        0 0 0 2px
        rgba(101,28,203,.10),

        0 0 20px
        rgba(118,35,235,.42),

        0 0 45px
        rgba(118,35,235,.18);
}


/* ==========================================================
   PROFILE DARK INNER BACKGROUND
========================================================== */

.profile-picture {

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 40%,
            #251044,
            #0b0617 75%
        );

    border:
        2px solid
        rgba(255,255,255,.13);
}


.profile-picture img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ==========================================================
   BRIGHT MOVING RING HIGHLIGHT
========================================================== */

.profile-highlight {

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    pointer-events: none;

    border:
        4px solid transparent;

    border-top-color: #f4a4ff;

    border-left-color: #8d31ff;

    filter:
        drop-shadow(
            0 0 7px
            rgba(205,71,255,.9)
        );

    animation:
        highlightSpin
        5s
        linear
        infinite;
}


@keyframes highlightSpin {

    from {
        transform: rotate(0deg);
    }

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


/* ==========================================================
   FLOATING DOTS
========================================================== */

.floating-dot {

    position: absolute;

    border-radius: 50%;

    background:
        #8b38ed;

    box-shadow:
        0 0 13px
        rgba(129,45,237,.45);

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


.dot-one {

    width: 8px;
    height: 8px;

    top: 30px;
    left: 12%;
}


.dot-two {

    width: 12px;
    height: 12px;

    top: 52px;
    right: 8%;

    animation-delay: .7s;
}


.dot-three {

    width: 7px;
    height: 7px;

    bottom: 27px;
    right: 15%;

    animation-delay: 1.2s;
}


.dot-four {

    width: 5px;
    height: 5px;

    top: 15px;
    right: 29%;

    animation-delay: 1.8s;
}


@keyframes dotFloat {

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

        opacity: .55;
    }

    50% {
        transform: translateY(-8px);

        opacity: 1;
    }
}


/* ==========================================================
   INTRO TEXT
========================================================== */

.intro-content {

    width: 100%;

    text-align: center;
}


/* ==========================================================
   SMALL LABEL
========================================================== */

.intro-label {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-bottom: 9px;

    color: #7224df;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.intro-label span {

    color: #a17bd0;
}


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

.intro-content h1 {

    width: 100%;

    color: #111426;

    font-size:
        clamp(39px, 12vw, 56px);

    line-height: .98;

    letter-spacing:
        -2px;

    font-weight: 950;
}


.intro-content h1 span {

    color: #7623e7;

    position: relative;
}


/* ==========================================================
   HEADING UNDERLINE
========================================================== */

.intro-content h1 span::after {

    content: "";

    position: absolute;

    left: 4px;
    right: 4px;

    bottom: -6px;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #7222e3,
            #c04cff,
            transparent
        );

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


@keyframes underlinePulse {

    0%,
    100% {
        opacity: .45;

        transform: scaleX(.75);
    }

    50% {
        opacity: 1;

        transform: scaleX(1);
    }
}


/* ==========================================================
   PURPLE LINE
========================================================== */

.purple-line {

    width: 58px;

    height: 3px;

    margin:
        16px auto 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #6517d5,
            #c64dff
        );

    box-shadow:
        0 0 10px
        rgba(122,36,231,.25);
}


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

.intro-description {

    width: 100%;

    max-width: 345px;

    margin: 0 auto;

    color: #697080;

    font-size: 10px;

    line-height: 1.7;
}


/* ==========================================================
   TRUST CARDS
========================================================== */

.trust-cards {

    width: 100%;

    display: grid;

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

    gap: 7px;

    margin-top: 21px;
}


.trust-card {

    min-width: 0;

    padding:
        9px 5px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border:
        1px solid
        rgba(116,35,226,.10);

    border-radius: 13px;

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

    box-shadow:
        0 8px 25px
        rgba(43,23,75,.07);

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


.trust-card:active {

    transform:
        scale(.97);
}


/* ==========================================================
   ANIMATED TRUST ICONS
========================================================== */

.trust-icon {

    position: relative;

    width: 31px;
    height: 31px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #a044f5,
            #5714c9
        );

    box-shadow:
        0 6px 14px
        rgba(104,27,207,.22);

    font-size: 13px;

    font-weight: 900;

    z-index: 1;

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


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

.trust-icon::before,
.trust-icon::after {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border:
        1.5px solid
        rgba(143,54,245,.55);

    pointer-events: none;

    z-index: -1;

    opacity: 0;

    animation:
        trustWave
        2.4s
        ease-out
        infinite;
}


.trust-icon::after {

    animation-delay:
        1.2s;
}


/* ==========================================================
   CENTER LIGHT
========================================================== */

.trust-icon::marker {
    display: none;
}


/* ==========================================================
   PULSE
========================================================== */

@keyframes trustPulse {

    0%,
    100% {

        transform: scale(1);

        box-shadow:
            0 6px 14px
            rgba(104,27,207,.22),

            0 0 0
            rgba(143,54,245,.0);
    }

    50% {

        transform: scale(1.08);

        box-shadow:
            0 7px 17px
            rgba(104,27,207,.28),

            0 0 14px
            rgba(143,54,245,.35);
    }
}


/* ==========================================================
   EXPANDING WAVE
========================================================== */

@keyframes trustWave {

    0% {

        transform: scale(.8);

        opacity: .75;
    }

    65% {

        opacity: .25;
    }

    100% {

        transform: scale(1.8);

        opacity: 0;
    }
}


/* ==========================================================
   STAGGER EACH TRUST ITEM
========================================================== */

.trust-card:nth-child(1) .trust-icon {

    animation-delay: 0s;
}


.trust-card:nth-child(1) .trust-icon::before {

    animation-delay: 0s;
}


.trust-card:nth-child(1) .trust-icon::after {

    animation-delay: 1.2s;
}



.trust-card:nth-child(2) .trust-icon {

    animation-delay: .4s;
}


.trust-card:nth-child(2) .trust-icon::before {

    animation-delay: .4s;
}


.trust-card:nth-child(2) .trust-icon::after {

    animation-delay: 1.6s;
}



.trust-card:nth-child(3) .trust-icon {

    animation-delay: .8s;
}


.trust-card:nth-child(3) .trust-icon::before {

    animation-delay: .8s;
}


.trust-card:nth-child(3) .trust-icon::after {

    animation-delay: 2s;
}


.trust-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.trust-text strong {

    color: #141728;

    font-size: 8px;

    font-weight: 900;
}


.trust-text span {

    margin-top: 3px;

    color: #737b8c;

    font-size: 6px;
}


/* ==========================================================
   BOTTOM PURPLE WAVE
========================================================== */

.bottom-wave {

    position: absolute;

    left: -10%;
    right: -10%;

    bottom: -85px;

    height: 150px;

    background:
        linear-gradient(
            135deg,
            #d8b8ff,
            #9c4af0
        );

    border-radius:
        50% 50% 0 0;

    transform:
        rotate(-3deg);

    z-index: 1;

    opacity: .85;
}


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

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


    .intro-container {

        padding-left: 11px;

        padding-right: 11px;
    }


    .intro-top {

        margin-bottom: 17px;
    }


    .brand-logo {

        width: 37px;
        height: 37px;

        font-size: 19px;
    }


    .brand-name strong {

        font-size: 10px;
    }


    .brand-name em {

        font-size: 8px;
    }


    .online-status {

        padding:
            6px 8px;

        font-size: 6px;
    }


    .online-status strong {

        font-size: 6px;
    }


    .profile-area {

        height: 220px;
    }


    .profile-ring {

        width: 175px;
        height: 175px;
    }


    .profile-orbit {

        width: 190px;
        height: 190px;
    }


    .profile-highlight {

        width: 175px;
        height: 175px;
    }


    .profile-glow {

        width: 190px;
        height: 190px;
    }


    .intro-content h1 {

        font-size: 37px;

        letter-spacing:
            -1.7px;
    }


    .intro-description {

        font-size: 9px;
    }


    .trust-card {

        padding:
            8px 3px;
    }


    .trust-icon {

        width: 27px;
        height: 27px;

        font-size: 11px;
    }


    .trust-text strong {

        font-size: 7px;
    }


    .trust-text span {

        font-size: 5.5px;
    }

}


/* ==========================================================
   TABLET / DESKTOP
========================================================== */

@media screen and (min-width: 601px) {


    .intro-container {

        max-width: 1000px;

        padding:
            25px
            25px
            75px;
    }


    .intro-top {

        margin-bottom: 35px;
    }


    .profile-area {

        height: 390px;

        margin-bottom: 20px;
    }


    .profile-ring {

        width: 330px;
        height: 330px;
    }


    .profile-orbit {

        width: 355px;
        height: 355px;
    }


    .profile-highlight {

        width: 330px;
        height: 330px;
    }


    .profile-glow {

        width: 355px;
        height: 355px;
    }


    .intro-content h1 {

        font-size: 72px;
    }


    .intro-description {

        max-width: 600px;

        font-size: 15px;
    }


    .trust-cards {

        max-width: 650px;

        margin-left: auto;

        margin-right: auto;

        gap: 12px;
    }


    .trust-card {

        padding: 16px;
    }


    .trust-icon {

        width: 48px;
        height: 48px;

        font-size: 19px;
    }


    .trust-text strong {

        font-size: 13px;
    }


    .trust-text span {

        font-size: 10px;
    }

}

/* ==========================================================
   LIVE PROFILE BADGE
========================================================== */

.profile-live-badge {

    position: absolute;

    left: 50%;

    bottom: 2px;

    transform: translateX(-50%);

    min-width: 82px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        0 14px;

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            #210b43,
            #0b0617
        );

    border:
        2px solid
        #7929e9;

    color: #ffffff;

    box-shadow:

        0 0 0 3px
        rgba(119,39,229,.08),

        0 0 16px
        rgba(119,39,229,.55),

        0 7px 18px
        rgba(30,12,55,.25);

    z-index: 20;

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


/* ==========================================================
   LIVE TEXT
========================================================== */

.profile-live-badge strong {

    position: relative;

    z-index: 5;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    line-height: 1;
}


/* ==========================================================
   GREEN LIVE DOT
========================================================== */

.live-dot {

    position: relative;

    z-index: 5;

    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #25df62;

    box-shadow:

        0 0 0 3px
        rgba(37,223,98,.13),

        0 0 10px
        rgba(37,223,98,.9);

    animation:
        liveDotBlink
        1.2s
        ease-in-out
        infinite;
}


@keyframes liveDotBlink {

    0%,
    100% {

        transform: scale(1);

        opacity: 1;

        box-shadow:

            0 0 0 3px
            rgba(37,223,98,.13),

            0 0 10px
            rgba(37,223,98,.9);
    }

    50% {

        transform: scale(.68);

        opacity: .65;

        box-shadow:

            0 0 0 5px
            rgba(37,223,98,.05),

            0 0 5px
            rgba(37,223,98,.55);
    }
}


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

.live-wave {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    border-radius: 999px;

    border:
        2px solid
        rgba(128,48,239,.75);

    transform:
        translate(-50%, -50%)
        scale(.85);

    pointer-events: none;

    opacity: 0;

    z-index: 1;
}


.live-wave-one {

    animation:
        liveWave
        2.4s
        ease-out
        infinite;
}


.live-wave-two {

    animation:
        liveWave
        2.4s
        ease-out
        infinite;

    animation-delay:
        1.2s;
}


@keyframes liveWave {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.85);

        opacity: .8;
    }

    60% {

        opacity: .3;
    }

    100% {

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

        opacity: 0;
    }
}


/* ==========================================================
   SMALL FLOATING MOTION
========================================================== */

@keyframes liveBadgeFloat {

    0%,
    100% {

        margin-bottom: 0;
    }

    50% {

        margin-bottom: 2px;
    }
}


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

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

    .profile-live-badge {

        min-width: 75px;

        height: 28px;

        padding:
            0 11px;

        gap: 6px;
    }


    .profile-live-badge strong {

        font-size: 9px;

        letter-spacing: .8px;
    }


    .live-dot {

        width: 8px;
        height: 8px;
    }

}


/* ==========================================================
   PREMIUM ANIMATED SECTION SEPARATOR
========================================================== */

.section-separator {

    position: relative;

    width: 100%;

    max-width: 430px;

    height: 42px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    overflow: visible;

    background: #ffffff;
}


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

.separator-line {

    position: relative;

    height: 1px;

    flex: 1;

    max-width: 160px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(119, 38, 226, .35),
            #8a36ed,
            rgba(119, 38, 226, .35),
            transparent
        );

    overflow: visible;

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


.separator-left {

    transform-origin: right center;
}


.separator-right {

    transform-origin: left center;
}


/* ==========================================================
   MOVING LIGHT ACROSS THE LINES
========================================================== */

.separator-line::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 35px;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d26aff,
            #ffffff,
            transparent
        );

    filter:
        blur(.3px);

    box-shadow:
        0 0 9px
        rgba(190, 70, 255, .7);

    transform:
        translateY(-50%);

    animation:
        separatorTravel
        2.5s
        linear
        infinite;
}


.separator-left::after {

    right: 0;
}


.separator-right::after {

    left: 0;

    animation-delay:
        1.25s;
}


/* ==========================================================
   CENTER STAR
========================================================== */

.separator-star {

    position: relative;

    z-index: 5;

    width: 27px;
    height: 27px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #c55aff;

    font-size: 17px;

    line-height: 1;

    background:
        #ffffff;

    text-shadow:
        0 0 6px
        rgba(177, 61, 255, .8),

        0 0 15px
        rgba(132, 36, 235, .45);

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


/* ==========================================================
   STAR HALO
========================================================== */

.separator-star::before {

    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 50%;

    border:
        1px solid
        rgba(137, 45, 235, .35);

    box-shadow:
        0 0 12px
        rgba(138, 48, 239, .25);

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


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes separatorGlow {

    0%,
    100% {

        opacity: .55;

        transform:
            scaleX(.88);
    }

    50% {

        opacity: 1;

        transform:
            scaleX(1);
    }
}


@keyframes separatorTravel {

    0% {

        opacity: 0;

        transform:
            translateY(-50%)
            translateX(0);
    }

    15% {

        opacity: 1;
    }

    70% {

        opacity: .8;
    }

    100% {

        opacity: 0;

        transform:
            translateY(-50%)
            translateX(-120px);
    }
}


@keyframes starPulse {

    0%,
    100% {

        transform:
            scale(.9)
            rotate(0deg);

        opacity: .75;
    }

    50% {

        transform:
            scale(1.12)
            rotate(12deg);

        opacity: 1;
    }
}


@keyframes starHalo {

    0%,
    100% {

        transform:
            scale(.8);

        opacity: .35;
    }

    50% {

        transform:
            scale(1.25);

        opacity: .9;
    }
}


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

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

    .section-separator {

        height: 36px;

        gap: 9px;

        padding:
            0 10px;
    }


    .separator-star {

        width: 23px;
        height: 23px;

        font-size: 14px;
    }


    .separator-line {

        max-width: 125px;
    }

}

/* ==========================================================
   GOOGLE FIND NETCLICKPAY
   PREMIUM DARK BLUE + GOOGLE COLORS
========================================================== */

.google-find-section {

    position: relative;

    width: 100%;

    padding:
        30px 12px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #030816 0%,
            #061329 50%,
            #030915 100%
        );
}


/* ==========================================================
   SOFT BLUE / PURPLE LIGHT
========================================================== */

.google-find-section::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 170px;

    top: -80px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(43,111,255,.18),
            transparent 70%
        );

    filter: blur(18px);

    pointer-events: none;
}


/* ==========================================================
   MAIN CARD
========================================================== */

.google-find-card {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 430px;

    margin: 0 auto;

    padding:
        17px 14px 14px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #060b1c,
            #08152b
        );

    border:
        1px solid
        rgba(72,121,221,.38);

    box-shadow:

        0 15px 40px
        rgba(0,0,0,.35),

        inset 0 1px 0
        rgba(255,255,255,.05);
}


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

.google-find-header {

    text-align: center;

    margin-bottom: 17px;
}


.google-find-header h2 {

    margin: 0;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(20px, 6vw, 27px);

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 800;
}


.google-find-header h2 span {

    color: #9850ff;

    text-shadow:
        0 0 15px
        rgba(139,67,255,.28);
}


.google-find-header p {

    margin:
        7px auto 0;

    max-width: 320px;

    color: #8c9aae;

    font-size: 8px;

    line-height: 1.5;
}


/* ==========================================================
   MAIN AREA
========================================================== */

.google-find-main {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


/* ==========================================================
   GOOGLE DISPLAY
========================================================== */

.google-display {

    position: relative;

    width: 100%;

    min-height: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        15px 12px;

    border-radius: 15px;

    border:
        1px solid
        rgba(82,118,193,.32);

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(42,78,144,.22),
            transparent 65%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04);
}


/* ==========================================================
   GOOGLE WORDMARK
========================================================== */

.google-wordmark {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 16px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(38px, 12vw, 53px);

    line-height: .9;

    font-weight: 500;

    letter-spacing: -3px;

    text-shadow:
        0 3px 12px
        rgba(0,0,0,.25);
}


.google-blue {
    color: #4285F4;
}


.google-red {
    color: #EA4335;
}


.google-yellow {
    color: #FBBC05;
}


.google-green {
    color: #34A853;
}


/* ==========================================================
   GOOGLE SEARCH BAR
========================================================== */

.google-fake-search {

    width: 100%;

    max-width: 330px;

    height: 43px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        4px 9px 4px 13px;

    border-radius: 999px;

    background:
        #ffffff;

    border:
        1px solid
        #d8dce2;

    box-shadow:

        0 5px 18px
        rgba(0,0,0,.3),

        0 0 0 1px
        rgba(255,255,255,.05);
}


/* ==========================================================
   SEARCH GLASS
========================================================== */

.google-search-glass {

    position: relative;

    width: 17px;
    height: 17px;

    flex-shrink: 0;
}


.google-search-glass span {

    position: absolute;

    top: 1px;
    left: 1px;

    width: 11px;
    height: 11px;

    border:
        2px solid
        #5f6368;

    border-radius: 50%;
}


.google-search-glass span::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 2px;

    right: -5px;
    bottom: -3px;

    border-radius: 999px;

    background:
        #5f6368;

    transform:
        rotate(45deg);
}


/* ==========================================================
   SEARCH TEXT
========================================================== */

.google-search-value {

    flex: 1;

    min-width: 0;

    color: #202124;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;
}


/* ==========================================================
   MICROPHONE
========================================================== */

.google-mic {

    flex-shrink: 0;

    font-size: 13px;

    line-height: 1;

    filter:
        saturate(.8);
}


/* ==========================================================
   INSTRUCTIONS
========================================================== */

.google-instructions {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.google-instruction {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 36px;

    padding:
        4px 2px;

    border-bottom:
        1px solid
        rgba(93,124,181,.12);
}


.google-instruction:last-child {

    border-bottom:
        none;
}


/* ==========================================================
   NUMBER CIRCLE
========================================================== */

.google-step-circle {

    position: relative;

    width: 26px;
    height: 26px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 35% 30%,
            #9d55ff,
            #5613a8
        );

    border:
        1px solid
        rgba(186,122,255,.45);

    box-shadow:

        0 0 10px
        rgba(128,52,235,.3),

        inset 0 1px 2px
        rgba(255,255,255,.2);

    font-size: 9px;

    font-weight: 900;

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


.google-instruction:nth-child(2)
.google-step-circle {

    animation-delay: .45s;
}


.google-instruction:nth-child(3)
.google-step-circle {

    animation-delay: .9s;
}


.google-instruction:nth-child(4)
.google-step-circle {

    animation-delay: 1.35s;
}


@keyframes googleStepPulse {

    0%,
    100% {

        transform: scale(1);

        box-shadow:
            0 0 8px
            rgba(128,52,235,.25);
    }

    50% {

        transform: scale(1.08);

        box-shadow:
            0 0 16px
            rgba(155,78,255,.55);
    }
}


/* ==========================================================
   INSTRUCTION TEXT
========================================================== */

.google-instruction-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;

    min-width: 0;

    color: #d7deea;

    font-size: 8px;

    line-height: 1.3;
}


.google-instruction-text strong {

    color: #ffffff;

    font-size: 8px;

    font-weight: 700;
}


.google-instruction-text b {

    color: #fbbc05;

    font-weight: 800;
}


/* ==========================================================
   SAFETY BOX
========================================================== */

.google-safety {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 13px;

    padding:
        10px;

    border-radius: 10px;

    border:
        1px solid
        rgba(143,78,255,.4);

    background:
        linear-gradient(
            145deg,
            rgba(32,25,67,.75),
            rgba(10,18,40,.8)
        );

    box-shadow:

        0 0 18px
        rgba(105,45,208,.08),

        inset 0 1px 0
        rgba(255,255,255,.04);
}


/* ==========================================================
   SHIELD
========================================================== */

.google-shield {

    position: relative;

    width: 31px;
    height: 35px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #bd7aff;

    font-size: 15px;

    font-weight: 900;

    clip-path:
        polygon(
            50% 0%,
            94% 16%,
            88% 65%,
            50% 100%,
            12% 65%,
            6% 16%
        );

    background:
        linear-gradient(
            145deg,
            #291451,
            #10091f
        );

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

    filter:
        drop-shadow(
            0 0 8px
            rgba(162,82,255,.35)
        );

    animation:
        shieldPulse
        2.7s
        ease-in-out
        infinite;
}


@keyframes shieldPulse {

    0%,
    100% {

        filter:
            drop-shadow(
                0 0 6px
                rgba(162,82,255,.25)
            );
    }

    50% {

        filter:
            drop-shadow(
                0 0 14px
                rgba(162,82,255,.65)
            );
    }
}


/* ==========================================================
   SAFETY TEXT
========================================================== */

.google-safety-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.google-safety-text strong {

    color: #d7c2ff;

    font-size: 8px;

    line-height: 1.3;

    font-weight: 800;
}


.google-safety-text span {

    color: #7f8ca1;

    font-size: 7px;

    line-height: 1.35;
}


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

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

    .google-find-section {

        padding:
            23px 10px;
    }


    .google-find-card {

        padding:
            14px 11px 12px;

        border-radius: 15px;
    }


    .google-find-header h2 {

        font-size: 18px;
    }


    .google-find-header p {

        font-size: 7px;
    }


    .google-display {

        min-height: 132px;

        padding:
            13px 9px;
    }


    .google-wordmark {

        font-size: 42px;

        margin-bottom: 13px;
    }


    .google-fake-search {

        height: 40px;
    }


    .google-search-value {

        font-size: 11px;
    }


    .google-instruction-text,
    .google-instruction-text strong {

        font-size: 7px;
    }


    .google-step-circle {

        width: 24px;
        height: 24px;

        font-size: 8px;
    }


    .google-safety-text strong {

        font-size: 7px;
    }


    .google-safety-text span {

        font-size: 6px;
    }

}

/* ==========================================================
   GOOGLE SECTION — LIVE ANIMATION UPGRADE
========================================================== */


/* ==========================================================
   1. CARD BREATHING GLOW
========================================================== */

.google-find-card {

    animation:
        googleCardBreath
        4s
        ease-in-out
        infinite;
}


@keyframes googleCardBreath {

    0%,
    100% {

        box-shadow:
            0 15px 40px
            rgba(0,0,0,.35),

            0 0 0
            rgba(60,130,255,0);
    }

    50% {

        box-shadow:
            0 15px 40px
            rgba(0,0,0,.35),

            0 0 22px
            rgba(49,119,255,.16);
    }
}


/* ==========================================================
   2. GOOGLE LOGO — INDIVIDUAL LETTER GLOW
========================================================== */

.google-wordmark span {

    display: inline-block;

    animation:
        googleLetterPulse
        3.5s
        ease-in-out
        infinite;
}


/* Different timing makes the logo feel alive */

.google-wordmark .google-blue {
    animation-delay: 0s;
}

.google-wordmark .google-red {
    animation-delay: .25s;
}

.google-wordmark .google-yellow {
    animation-delay: .5s;
}

.google-wordmark .google-green {
    animation-delay: .75s;
}


@keyframes googleLetterPulse {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

    }

    50% {

        transform:
            translateY(-2px)
            scale(1.035);

        filter:
            brightness(1.18)
            drop-shadow(
                0 0 5px
                rgba(91,145,255,.25)
            );
    }
}


/* ==========================================================
   3. GOOGLE SEARCH BAR — MOVING LIGHT
========================================================== */

.google-fake-search {

    position: relative;

    overflow: hidden;

    animation:
        searchBarPulse
        3.5s
        ease-in-out
        infinite;
}


.google-fake-search::after {

    content: "";

    position: absolute;

    top: -20%;

    left: -80px;

    width: 45px;

    height: 140%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform:
        skewX(-20deg);

    pointer-events: none;

    animation:
        searchShine
        4s
        ease-in-out
        infinite;
}


@keyframes searchShine {

    0% {

        left: -80px;

        opacity: 0;
    }

    15% {

        opacity: 1;
    }

    45% {

        left: 110%;

        opacity: 0;
    }

    100% {

        left: 110%;

        opacity: 0;
    }
}


@keyframes searchBarPulse {

    0%,
    100% {

        box-shadow:
            0 5px 18px
            rgba(0,0,0,.3);
    }

    50% {

        box-shadow:
            0 5px 18px
            rgba(0,0,0,.3),

            0 0 15px
            rgba(70,140,255,.18);
    }
}


/* ==========================================================
   4. SEARCH TEXT GENTLE MOTION
========================================================== */

.google-search-value {

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


@keyframes searchTextGlow {

    0%,
    100% {

        opacity: .88;
    }

    50% {

        opacity: 1;
    }
}


/* ==========================================================
   5. SEARCH ICON PULSE
========================================================== */

.google-search-glass {

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


@keyframes searchIconPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .8;
    }

    50% {

        transform:
            scale(1.13);

        opacity: 1;
    }
}


/* ==========================================================
   6. MICROPHONE PULSE
========================================================== */

.google-mic {

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


@keyframes micPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .75;
    }

    50% {

        transform:
            scale(1.12);

        opacity: 1;
    }
}


/* ==========================================================
   7. STEP NUMBERS — OUTWARD WAVES
========================================================== */

.google-step-circle {

    position: relative;
}


/* First expanding ring */

.google-step-circle::before {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 50%;

    border:
        1px solid
        rgba(157,78,255,.7);

    opacity: 0;

    pointer-events: none;

    animation:
        googleStepWave
        2.8s
        ease-out
        infinite;
}


/* Second expanding ring */

.google-step-circle::after {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 50%;

    border:
        1px solid
        rgba(75,139,255,.5);

    opacity: 0;

    pointer-events: none;

    animation:
        googleStepWave
        2.8s
        ease-out
        infinite;

    animation-delay:
        1.4s;
}


@keyframes googleStepWave {

    0% {

        transform:
            scale(.85);

        opacity: .8;
    }

    55% {

        opacity: .25;
    }

    100% {

        transform:
            scale(1.9);

        opacity: 0;
    }
}


/* ==========================================================
   8. STAGGER THE WAVES
========================================================== */

.google-instruction:nth-child(1)
.google-step-circle::before {

    animation-delay:
        0s;
}

.google-instruction:nth-child(1)
.google-step-circle::after {

    animation-delay:
        1.4s;
}


.google-instruction:nth-child(2)
.google-step-circle::before {

    animation-delay:
        .45s;
}

.google-instruction:nth-child(2)
.google-step-circle::after {

    animation-delay:
        1.85s;
}


.google-instruction:nth-child(3)
.google-step-circle::before {

    animation-delay:
        .9s;
}

.google-instruction:nth-child(3)
.google-step-circle::after {

    animation-delay:
        2.3s;
}


.google-instruction:nth-child(4)
.google-step-circle::before {

    animation-delay:
        1.35s;
}

.google-instruction:nth-child(4)
.google-step-circle::after {

    animation-delay:
        2.75s;
}


/* ==========================================================
   9. STEP TEXT — ACTIVE HIGHLIGHT
========================================================== */

.google-instruction-text {

    animation:
        instructionGlow
        4s
        ease-in-out
        infinite;
}


.google-instruction:nth-child(1)
.google-instruction-text {
    animation-delay: 0s;
}

.google-instruction:nth-child(2)
.google-instruction-text {
    animation-delay: .7s;
}

.google-instruction:nth-child(3)
.google-instruction-text {
    animation-delay: 1.4s;
}

.google-instruction:nth-child(4)
.google-instruction-text {
    animation-delay: 2.1s;
}


@keyframes instructionGlow {

    0%,
    100% {

        transform:
            translateX(0);

        opacity: .82;
    }

    50% {

        transform:
            translateX(2px);

        opacity: 1;
    }
}


/* ==========================================================
   10. SAFETY BOX GLOW
========================================================== */

.google-safety {

    animation:
        safetyBoxPulse
        3.5s
        ease-in-out
        infinite;
}


@keyframes safetyBoxPulse {

    0%,
    100% {

        border-color:
            rgba(143,78,255,.35);

        box-shadow:
            0 0 12px
            rgba(105,45,208,.06);
    }

    50% {

        border-color:
            rgba(143,78,255,.62);

        box-shadow:
            0 0 20px
            rgba(105,45,208,.17);
    }
}


/* ==========================================================
   11. SAFETY TEXT GENTLE PULSE
========================================================== */

.google-safety-text strong {

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


@keyframes safetyTextPulse {

    0%,
    100% {

        opacity: .85;
    }

    50% {

        opacity: 1;
    }
}


/* ==========================================================
   12. WHOLE SECTION LIGHT SWEEP
========================================================== */

.google-find-section::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 45%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72,145,255,.035),
            transparent
        );

    pointer-events: none;

    animation:
        sectionLightSweep
        8s
        ease-in-out
        infinite;
}


@keyframes sectionLightSweep {

    0% {

        left: -100%;
    }

    35% {

        left: 120%;
    }

    100% {

        left: 120%;
    }
}

/* ==========================================================
   CHANNELS + WHY PEOPLE
   PREMIUM DARK NEON DESIGN
========================================================== */

.community-contact-section {

    position: relative;

    width: 100%;

    padding:
        26px 12px 35px;

    background:
        #030713;

    overflow: hidden;
}


.community-contact-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 440px;

    margin: 0 auto;
}


/* ==========================================================
   CHANNELS CARD
========================================================== */

.channels-premium-card {

    position: relative;

    width: 100%;

    min-height: 128px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        17px 13px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #07152c 0%,
            #050c1d 100%
        );

    border:
        1px solid
        rgba(74,119,197,.45);

    box-shadow:

        0 15px 35px
        rgba(0,0,0,.35),

        inset 0 1px 0
        rgba(255,255,255,.05);

    overflow: visible;
}


/* ==========================================================
   CARD TOP LIGHT
========================================================== */

.channels-premium-card::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 15%;

    width: 70%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(75,148,255,.7),
            transparent
        );

    box-shadow:
        0 0 9px
        rgba(72,140,255,.5);
}


/* ==========================================================
   MEGAPHONE
========================================================== */

.channels-mega {

    width: 54px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #24192f,
            #120d20
        );

    border:
        1px solid
        rgba(255,178,73,.45);

    box-shadow:

        0 0 20px
        rgba(255,163,56,.12),

        inset 0 1px 0
        rgba(255,255,255,.05);
}


.mega-icon {

    font-size: 29px;

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,184,78,.7)
        );

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


@keyframes megaLive {

    0%,
    100% {

        transform:
            scale(1)
            rotate(0deg);
    }

    50% {

        transform:
            scale(1.08)
            rotate(-4deg);
    }
}


/* ==========================================================
   CHANNEL TEXT
========================================================== */

.channels-premium-content {

    flex: 1;

    min-width: 0;

    padding-right: 3px;
}


.channels-premium-content h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(10px, 3vw, 14px);

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.2px;
}


.whatsapp-text {

    color: #52dc78;

    text-shadow:
        0 0 9px
        rgba(47,215,102,.18);
}


.telegram-text {

    color: #59baff;

    text-shadow:
        0 0 9px
        rgba(64,170,255,.18);
}


.channels-premium-content p {

    margin:
        7px 0 0;

    color: #8493a8;

    font-size: 7px;

    line-height: 1.55;
}


/* ==========================================================
   CHANNEL ICON AREA
========================================================== */

.premium-channel-icons {

    position: relative;

    width: 83px;
    height: 72px;

    flex-shrink: 0;
}


/* ==========================================================
   WHATSAPP
========================================================== */

.premium-whatsapp,
.premium-telegram {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 51px;
    height: 51px;

    border-radius: 50%;

    text-decoration: none;

    z-index: 3;
}


.premium-whatsapp {

    left: 0;
    top: 9px;

    background:
        #25D366;

    box-shadow:

        0 0 0 3px
        rgba(37,211,102,.12),

        0 0 20px
        rgba(37,211,102,.45);

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


.premium-telegram {

    right: 0;
    top: 0;

    background:
        #2AABEE;

    box-shadow:

        0 0 0 3px
        rgba(42,171,238,.12),

        0 0 20px
        rgba(42,171,238,.45);

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

    animation-delay:
        .4s;
}


.premium-whatsapp svg,
.premium-telegram svg {

    width: 100%;
    height: 100%;

    display: block;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.3)
        );
}


/* ==========================================================
   CHANNEL WAVES
========================================================== */

.premium-whatsapp::before,
.premium-whatsapp::after,
.premium-telegram::before,
.premium-telegram::after {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;
}


.premium-whatsapp::before {

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

    animation:
        channelWave
        2.8s
        ease-out
        infinite;
}


.premium-whatsapp::after {

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

    animation:
        channelWave
        2.8s
        ease-out
        infinite;

    animation-delay:
        1.4s;
}


.premium-telegram::before {

    border:
        1px solid
        rgba(42,171,238,.75);

    animation:
        channelWave
        2.8s
        ease-out
        infinite;

    animation-delay:
        .5s;
}


.premium-telegram::after {

    border:
        1px solid
        rgba(42,171,238,.4);

    animation:
        channelWave
        2.8s
        ease-out
        infinite;

    animation-delay:
        1.9s;
}


@keyframes channelWave {

    0% {

        transform:
            scale(.9);

        opacity: .7;
    }

    60% {

        opacity: .2;
    }

    100% {

        transform:
            scale(1.75);

        opacity: 0;
    }
}


@keyframes whatsappFloat {

    0%,
    100% {

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

    50% {

        transform:
            translateY(-3px)
            rotate(-2deg);
    }
}


@keyframes telegramFloat {

    0%,
    100% {

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

    50% {

        transform:
            translateY(3px)
            rotate(2deg);
    }
}


/* ==========================================================
   CLICKING CURSOR
========================================================== */

.channel-click-cursor {

    position: absolute;

    right: -3px;

    bottom: -6px;

    z-index: 8;

    color: #ffffff;

    font-size: 21px;

    filter:
        drop-shadow(
            0 2px 5px
            rgba(0,0,0,.8)
        );

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


@keyframes cursorClick {

    0%,
    100% {

        transform:
            translate(0,0)
            scale(1);
    }

    25% {

        transform:
            translate(-5px,-4px)
            scale(.88);
    }

    42% {

        transform:
            translate(0,0)
            scale(1);
    }

    65% {

        transform:
            translate(-6px,-3px)
            scale(.9);
    }

    82% {

        transform:
            translate(0,0)
            scale(1);
    }
}


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

.why-separator {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        27px 4px 17px;
}


.why-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8b45ff,
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(137,65,255,.55);

    position: relative;

    overflow: hidden;
}


.why-line::after {

    content: "";

    position: absolute;

    top: 0;

    left: -20%;

    width: 25%;

    height: 100%;

    background:
        #d89aff;

    box-shadow:
        0 0 7px
        #c06aff;

    animation:
        lineTravel
        3s
        linear
        infinite;
}


.why-line:last-child::after {

    animation-delay:
        1.5s;
}


@keyframes lineTravel {

    0% {
        left: -25%;
    }

    100% {
        left: 110%;
    }
}


.why-star {

    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: #c875ff;

    font-size: 23px;

    text-shadow:
        0 0 10px
        rgba(184,93,255,.9),

        0 0 22px
        rgba(135,54,255,.55);

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


@keyframes starLive {

    0%,
    100% {

        transform:
            scale(1)
            rotate(0deg);
    }

    50% {

        transform:
            scale(1.18)
            rotate(10deg);
    }
}


/* ==========================================================
   WHY HEADING
========================================================== */

.why-heading {

    text-align: center;

    margin-bottom: 17px;
}


.why-heading h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(18px, 5vw, 25px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.5px;
}


/* ==========================================================
   FOUR REASON CARDS
========================================================== */

.why-reasons-grid {

    display: grid;

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

    gap: 6px;

    width: 100%;
}


/* ==========================================================
   BASE CARD
========================================================== */

.why-reason-card {

    position: relative;

    min-width: 0;

    min-height: 152px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding:
        12px 5px 10px;

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #07152b,
            #050d1c
        );

    border:
        1px solid
        rgba(85,119,178,.3);

    box-shadow:

        0 8px 20px
        rgba(0,0,0,.22),

        inset 0 1px 0
        rgba(255,255,255,.035);

    overflow: visible;

    transition:
        transform .25s ease;
}


.why-reason-card:hover {

    transform:
        translateY(-4px);
}


/* ==========================================================
   UNIQUE CARD BORDER COLORS
========================================================== */

.guidance-card {

    border-color:
        rgba(39,208,93,.32);
}


.opportunity-card {

    border-color:
        rgba(157,73,255,.34);
}


.growth-card {

    border-color:
        rgba(56,143,255,.34);
}


.support-card {

    border-color:
        rgba(242,163,55,.34);
}


/* ==========================================================
   REASON ICON
========================================================== */

.reason-icon {

    position: relative;

    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 11px;

    border-radius: 50%;

    font-size: 25px;

    background:
        #101b31;

    box-shadow:
        inset 0 1px 4px
        rgba(255,255,255,.12);
}


.reason-icon::before {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border:
        2px solid
        currentColor;

    opacity: .75;

    box-shadow:
        0 0 10px
        currentColor;
}


.reason-icon::after {

    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border:
        1px solid
        currentColor;

    opacity: .25;

    animation:
        reasonWave
        2.7s
        ease-out
        infinite;
}


@keyframes reasonWave {

    0% {

        transform:
            scale(.9);

        opacity: .5;
    }

    100% {

        transform:
            scale(1.5);

        opacity: 0;
    }
}


/* ==========================================================
   ICON COLORS
========================================================== */

.guidance-card .reason-icon {

    color: #42dd69;

    background:
        radial-gradient(
            circle,
            #1eac49,
            #08391e
        );

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


.opportunity-card .reason-icon {

    color: #c06cff;

    background:
        radial-gradient(
            circle,
            #7629c5,
            #2b0c55
        );

    animation:
        iconFloat
        3s
        ease-in-out
        infinite;

    animation-delay: .4s;
}


.growth-card .reason-icon {

    color: #56a9ff;

    background:
        radial-gradient(
            circle,
            #2678c7,
            #0b315f
        );

    animation:
        iconFloat
        3s
        ease-in-out
        infinite;

    animation-delay: .8s;
}


.support-card .reason-icon {

    color: #ffbd57;

    background:
        radial-gradient(
            circle,
            #a7651f,
            #4c2a0c
        );

    animation:
        iconFloat
        3s
        ease-in-out
        infinite;

    animation-delay: 1.2s;
}


@keyframes iconFloat {

    0%,
    100% {

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

    50% {

        transform:
            translateY(-3px)
            scale(1.05);
    }
}


/* ==========================================================
   ICON SYMBOLS
========================================================== */

.people-symbol,
.money-symbol,
.rocket-symbol,
.star-symbol {

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 0 5px
            currentColor
        );
}


.star-symbol {

    font-size: 28px;
}


/* ==========================================================
   REASON HEADINGS
========================================================== */

.why-reason-card h3 {

    margin: 0;

    font-size: 8px;

    line-height: 1.25;

    font-weight: 800;
}


.guidance-card h3 {
    color: #58df77;
}


.opportunity-card h3 {
    color: #c17aff;
}


.growth-card h3 {
    color: #5daeff;
}


.support-card h3 {
    color: #ffc15e;
}


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

.why-reason-card p {

    margin:
        8px 2px 0;

    color: #8492a6;

    font-size: 6px;

    line-height: 1.5;
}


/* ==========================================================
   MOBILE — PHONE FIRST
========================================================== */

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

    .community-contact-section {

        padding:
            23px 10px 30px;
    }


    .channels-premium-card {

        min-height: 116px;

        padding:
            14px 9px;

        gap: 8px;

        border-radius: 15px;
    }


    .channels-mega {

        width: 45px;
        height: 51px;

        border-radius: 12px;
    }


    .mega-icon {

        font-size: 24px;
    }


    .channels-premium-content h2 {

        font-size: 9px;
    }


    .channels-premium-content p {

        font-size: 6px;

        line-height: 1.5;
    }


    .premium-channel-icons {

        width: 70px;
        height: 62px;
    }


    .premium-whatsapp,
    .premium-telegram {

        width: 44px;
        height: 44px;
    }


    .channel-click-cursor {

        font-size: 18px;

        right: -2px;

        bottom: -5px;
    }


    .why-separator {

        margin:
            23px 2px 15px;

        gap: 9px;
    }


    .why-heading {

        margin-bottom: 14px;
    }


    .why-heading h2 {

        font-size: 17px;
    }


    .why-reasons-grid {

        gap: 4px;
    }


    .why-reason-card {

        min-height: 132px;

        padding:
            9px 3px 8px;

        border-radius: 10px;
    }


    .reason-icon {

        width: 42px;
        height: 42px;

        font-size: 19px;

        margin-bottom: 9px;
    }


    .star-symbol {

        font-size: 22px;
    }


    .why-reason-card h3 {

        font-size: 6.5px;
    }


    .why-reason-card p {

        font-size: 5px;

        line-height: 1.4;

        margin-top: 6px;
    }

}


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

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

    .channels-premium-card {

        min-height: 108px;

        padding:
            12px 7px;
    }


    .channels-mega {

        width: 40px;
        height: 47px;
    }


    .mega-icon {

        font-size: 21px;
    }


    .channels-premium-content h2 {

        font-size: 8px;
    }


    .channels-premium-content p {

        font-size: 5.5px;
    }


    .premium-channel-icons {

        width: 63px;
    }


    .premium-whatsapp,
    .premium-telegram {

        width: 39px;
        height: 39px;
    }


    .why-reason-card {

        min-height: 123px;
    }


    .reason-icon {

        width: 38px;
        height: 38px;

        font-size: 17px;
    }


    .why-reason-card h3 {

        font-size: 6px;
    }


    .why-reason-card p {

        font-size: 4.7px;
    }

}

/* ==========================================================
   CHANNELS SECTION — LARGER TEXT ONLY
========================================================== */

.channels-premium-content h2 {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}

.channels-premium-content p {
    font-size: 9px;
    line-height: 1.55;
}


/* PHONE */

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

    .channels-premium-content h2 {
        font-size: 12px;
        line-height: 1.35;
    }

    .channels-premium-content p {
        font-size: 8px;
        line-height: 1.55;
    }

}


/* SMALL PHONES */

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

    .channels-premium-content h2 {
        font-size: 11px;
    }

    .channels-premium-content p {
        font-size: 7.5px;
    }

}

/* ==========================================================
   GOOGLE SECTION — LARGER MOBILE-FRIENDLY TEXT
========================================================== */

/* Main heading */

.google-find-header h2 {
    font-size: 27px;
    line-height: 1.2;
}


/* Subtitle */

.google-find-header p {
    font-size: 11px;
    line-height: 1.5;
}


/* Search text */

.google-search-value {
    font-size: 14px;
}


/* Instructions */

.google-instruction-text,
.google-instruction-text strong {
    font-size: 11px;
    line-height: 1.4;
}


/* Smaller secondary text inside instructions */

.google-instruction-text span {
    font-size: 9px;
    line-height: 1.4;
}


/* Safety message */

.google-safety-text strong {
    font-size: 10px;
    line-height: 1.4;
}


.google-safety-text span {
    font-size: 8px;
    line-height: 1.4;
}


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

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

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

    .google-find-header p {
        font-size: 9px;
    }

    .google-search-value {
        font-size: 12px;
    }

    .google-instruction-text,
    .google-instruction-text strong {
        font-size: 9px;
    }

    .google-instruction-text span {
        font-size: 7.5px;
    }

    .google-safety-text strong {
        font-size: 8.5px;
    }

    .google-safety-text span {
        font-size: 7px;
    }

}


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

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

    .google-find-header h2 {
        font-size: 20px;
    }

    .google-find-header p {
        font-size: 8px;
    }

    .google-search-value {
        font-size: 11px;
    }

    .google-instruction-text,
    .google-instruction-text strong {
        font-size: 8.5px;
    }

    .google-instruction-text span {
        font-size: 7px;
    }

    .google-safety-text strong {
        font-size: 8px;
    }

    .google-safety-text span {
        font-size: 6.5px;
    }

}

/* ==========================================================
   WHY PEOPLE REACH OUT — LARGER TEXT
========================================================== */

.why-heading h2 {
    font-size: 24px;
    line-height: 1.25;
}

.why-reason-card h3 {
    font-size: 11px;
    line-height: 1.3;
}

.why-reason-card p {
    font-size: 8px;
    line-height: 1.5;
}


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

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

    .why-heading h2 {
        font-size: 20px;
    }

    .why-reason-card h3 {
        font-size: 9px;
    }

    .why-reason-card p {
        font-size: 7px;
        line-height: 1.5;
    }

}


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

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

    .why-heading h2 {
        font-size: 18px;
    }

    .why-reason-card h3 {
        font-size: 8px;
    }

    .why-reason-card p {
        font-size: 6.5px;
    }

}

/* ==========================================================
   WHATSAPP HELP — PREMIUM GREEN
========================================================== */

.whatsapp-help-section {

    position: relative;

    width: 100%;

    padding:
        28px 12px 30px;

    background:
        #03100a;

    overflow: hidden;
}


/* ==========================================================
   GREEN BACKGROUND GLOW
========================================================== */

.whatsapp-help-section::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 220px;

    top: -80px;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(37,211,102,.13),
            transparent 70%
        );

    filter:
        blur(20px);

    pointer-events: none;
}


/* ==========================================================
   MAIN CARD
========================================================== */

.whatsapp-help-card {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 430px;

    margin: 0 auto;

    padding:
        16px 13px 14px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #061c0e,
            #031108
        );

    border:
        1px solid
        rgba(52,215,103,.55);

    box-shadow:

        0 12px 35px
        rgba(0,0,0,.4),

        0 0 18px
        rgba(37,211,102,.08),

        inset 0 1px 0
        rgba(255,255,255,.05);
}


/* ==========================================================
   CARD BORDER ANIMATION
========================================================== */

.whatsapp-help-card::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

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

    pointer-events: none;

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


@keyframes whatsappBorderPulse {

    0%,
    100% {

        opacity: .35;
    }

    50% {

        opacity: 1;
    }
}


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

.whatsapp-help-header {

    text-align: center;

    margin-bottom: 15px;
}


.whatsapp-help-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.2;
}


.whatsapp-help-header h3 {

    margin:
        4px 0 0;

    color: #58e47c;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.2;
}


.whatsapp-help-header p {

    max-width: 320px;

    margin:
        7px auto 0;

    color: #91a79a;

    font-size: 8px;

    line-height: 1.5;
}


/* ==========================================================
   NUMBER AREA
========================================================== */

.whatsapp-number-area {

    text-align: center;

    margin-bottom: 17px;
}


.whatsapp-number-label {

    margin-bottom: 6px;

    color: #a6dcb5;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .5px;
}


/* ==========================================================
   NUMBER BOX
========================================================== */

.whatsapp-number-box {

    position: relative;

    width: 100%;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        4px 45px 4px 12px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #0b5d25,
            #063717
        );

    border:
        1px solid
        #35d866;

    box-shadow:

        0 0 15px
        rgba(37,211,102,.2),

        inset 0 1px 4px
        rgba(255,255,255,.08);

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


@keyframes numberGlow {

    0%,
    100% {

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

    50% {

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


.whatsapp-number-box strong {

    color: #ffffff;

    font-size: 17px;

    letter-spacing: .4px;

    white-space: nowrap;
}


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

.copy-whatsapp {

    position: absolute;

    right: 9px;

    top: 50%;

    transform:
        translateY(-50%);

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 7px;

    color: #ffffff;

    background:
        rgba(0,0,0,.18);

    font-size: 16px;

    cursor: pointer;

    transition:
        .2s ease;
}


.copy-whatsapp:hover {

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

    transform:
        translateY(-50%)
        scale(1.08);
}


/* ==========================================================
   ONLINE STATUS
========================================================== */

.whatsapp-online-status {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 8px;

    padding:
        4px 10px;

    border-radius: 999px;

    color: #58e47c;

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

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .2px;

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


.online-dot {

    position: relative;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #38e86d;

    box-shadow:
        0 0 7px
        #38e86d;
}


.online-dot::after {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border:
        1px solid
        rgba(56,232,109,.65);

    animation:
        onlineWave
        1.8s
        ease-out
        infinite;
}


@keyframes onlineWave {

    0% {

        transform:
            scale(.7);

        opacity: .8;
    }

    100% {

        transform:
            scale(2.2);

        opacity: 0;
    }
}


.status-247 {

    margin-left: 2px;

    color: #b4ffca;
}


@keyframes statusFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-2px);
    }
}


/* ==========================================================
   HOW TO WHATSAPP
========================================================== */

.whatsapp-how {

    margin-top: 5px;
}


.whatsapp-how > h3 {

    margin:
        0 0 11px;

    text-align: center;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;
}


/* ==========================================================
   WHATSAPP STEPS
========================================================== */

.whatsapp-step {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 47px;

    padding:
        5px 2px;

    border-bottom:
        1px solid
        rgba(67,202,105,.12);
}


.whatsapp-step:last-child {

    border-bottom:
        none;
}


/* ==========================================================
   STEP ICON
========================================================== */

.whatsapp-step-icon {

    position: relative;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 50%;

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

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


.whatsapp-step:nth-child(3)
.whatsapp-step-icon {

    animation-delay:
        .5s;
}


.whatsapp-step:nth-child(4)
.whatsapp-step-icon {

    animation-delay:
        1s;
}


.whatsapp-step-icon svg {

    width: 100%;
    height: 100%;

    display: block;
}


.whatsapp-step-icon::after {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 50%;

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

    animation:
        stepWave
        3s
        ease-out
        infinite;
}


@keyframes whatsappStepPulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.06);
    }
}


@keyframes stepWave {

    0% {

        transform:
            scale(.9);

        opacity: .65;
    }

    100% {

        transform:
            scale(1.6);

        opacity: 0;
    }
}


/* ==========================================================
   STEP TEXT
========================================================== */

.whatsapp-step-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.whatsapp-step-text strong {

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;
}


.whatsapp-step-text span {

    color: #8fa396;

    font-size: 7px;

    line-height: 1.45;
}


/* ==========================================================
   MESSAGE EXAMPLE
========================================================== */

.whatsapp-message-example {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 13px;

    padding:
        8px 9px;

    border-radius: 9px;

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

    background:
        linear-gradient(
            145deg,
            rgba(13,80,34,.65),
            rgba(5,35,16,.75)
        );

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


.message-example-icon {

    width: 29px;
    height: 29px;

    flex-shrink: 0;
}


.message-example-icon svg {

    width: 100%;
    height: 100%;

    display: block;

    filter:
        drop-shadow(
            0 0 5px
            rgba(37,211,102,.35)
        );
}


.whatsapp-message-example > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.whatsapp-message-example strong {

    color: #62e984;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .3px;
}


.whatsapp-message-example span {

    color: #d0ddd4;

    font-size: 7px;

    line-height: 1.4;
}


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

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

    .whatsapp-help-section {

        padding:
            23px 10px 28px;
    }


    .whatsapp-help-card {

        padding:
            15px 11px 13px;

        border-radius: 13px;
    }


    .whatsapp-help-header h2 {

        font-size: 17px;
    }


    .whatsapp-help-header h3 {

        font-size: 12px;
    }


    .whatsapp-help-header p {

        font-size: 8px;
    }


    .whatsapp-number-box {

        height: 44px;
    }


    .whatsapp-number-box strong {

        font-size: 16px;
    }


    .whatsapp-online-status {

        font-size: 7px;
    }


    .whatsapp-how > h3 {

        font-size: 11px;
    }


    .whatsapp-step-text strong {

        font-size: 9px;
    }


    .whatsapp-step-text span {

        font-size: 7px;
    }

}


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

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

    .whatsapp-help-header h2 {

        font-size: 15px;
    }


    .whatsapp-help-header h3 {

        font-size: 10px;
    }


    .whatsapp-help-header p {

        font-size: 7px;
    }


    .whatsapp-number-box strong {

        font-size: 14px;
    }


    .whatsapp-step-text strong {

        font-size: 8px;
    }


    .whatsapp-step-text span {

        font-size: 6.5px;
    }


    .whatsapp-message-example span {

        font-size: 6.5px;
    }

}

/* Prevent phone-number auto-link styling */
.whatsapp-number-box,
.whatsapp-number-box strong {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}

.whatsapp-number-box a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ==========================================================
   WHATSAPP NUMBER — PREVENT PHONE AUTO-LINK / UNDERLINE
========================================================== */

.whatsapp-number-text {

    display: inline-block;

    color: #ffffff !important;

    text-decoration: none !important;

    -webkit-text-decoration: none !important;

    border: none !important;

    outline: none !important;

    user-select: none;

    -webkit-user-select: none;

    cursor: default;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: .4px;

    line-height: 1;

}


/* Every individual number segment */

.whatsapp-number-text span {

    color: #ffffff !important;

    text-decoration: none !important;

    -webkit-text-decoration: none !important;

    border: none !important;

}


/* In case the browser still creates a phone link */

.whatsapp-number-box a,
.whatsapp-number-box a:link,
.whatsapp-number-box a:visited,
.whatsapp-number-box a:hover,
.whatsapp-number-box a:active {

    color: #ffffff !important;

    text-decoration: none !important;

    -webkit-text-decoration: none !important;

    border-bottom: none !important;
}


/* ==========================================================
   WHATSAPP TEXT — MAKE IT MORE READABLE
========================================================== */


/* Main introductory paragraph */

.whatsapp-help-header p {

    font-size: 10px;

    line-height: 1.55;

    color: #a5b7aa;

    max-width: 350px;

}


/* "MY WHATSAPP NUMBER" */

.whatsapp-number-label {

    font-size: 10px;

    line-height: 1.3;

}


/* Online status */

.whatsapp-online-status {

    font-size: 8px;

}


/* How to WhatsApp */

.whatsapp-how > h3 {

    font-size: 13px;

    line-height: 1.3;

}


/* Step titles */

.whatsapp-step-text strong {

    font-size: 11px;

    line-height: 1.35;

}


/* Step descriptions */

.whatsapp-step-text span {

    font-size: 9px;

    line-height: 1.5;

    color: #9daf9f;

}


/* Message example heading */

.whatsapp-message-example strong {

    font-size: 9px;

    line-height: 1.3;

}


/* Message example text */

.whatsapp-message-example span {

    font-size: 9px;

    line-height: 1.45;

}


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

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

    .whatsapp-help-header p {

        font-size: 9px;

        line-height: 1.55;

    }


    .whatsapp-number-text {

        font-size: 16px;

    }


    .whatsapp-number-label {

        font-size: 9px;

    }


    .whatsapp-online-status {

        font-size: 8px;

    }


    .whatsapp-how > h3 {

        font-size: 12px;

    }


    .whatsapp-step-text strong {

        font-size: 10px;

    }


    .whatsapp-step-text span {

        font-size: 8.5px;

        line-height: 1.5;

    }


    .whatsapp-message-example strong {

        font-size: 8px;

    }


    .whatsapp-message-example span {

        font-size: 8px;

    }

}


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

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

    .whatsapp-help-header p {

        font-size: 8.5px;

    }


    .whatsapp-number-text {

        font-size: 14px;

    }


    .whatsapp-number-label {

        font-size: 8px;

    }


    .whatsapp-step-text strong {

        font-size: 9px;

    }


    .whatsapp-step-text span {

        font-size: 8px;

    }


    .whatsapp-message-example strong {

        font-size: 7.5px;

    }


    .whatsapp-message-example span {

        font-size: 7.5px;

    }

}

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

.site-footer {

    width: 100%;

    padding:
        28px 15px 25px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #06101b,
            #02070d
        );

    border-top:
        1px solid
        rgba(67,129,205,.25);

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


/* BRAND */

.footer-brand {

    color: #ffffff;

    font-size: 20px;

    font-weight: 900;

    letter-spacing: -.4px;

    text-shadow:
        0 0 12px
        rgba(69,145,255,.35);
}


/* TAGLINE */

.footer-tagline {

    margin:
        6px 0 0;

    color: #9aabba;

    font-size: 10px;

    line-height: 1.5;
}


/* DIVIDER */

.footer-divider {

    width: 70px;

    height: 1px;

    margin:
        14px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #5b9dff,
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(75,145,255,.55);
}


/* COPYRIGHT */

.footer-copy {

    margin: 0;

    color: #d3dce6;

    font-size: 9px;

    font-weight: 600;
}


/* FINAL MESSAGE */

.footer-note {

    margin:
        6px 0 0;

    color: #6f8295;

    font-size: 8px;

    line-height: 1.5;
}


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

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

    .site-footer {

        padding:
            25px 12px 22px;
    }

    .footer-brand {
        font-size: 19px;
    }

    .footer-tagline {
        font-size: 9px;
    }

    .footer-copy {
        font-size: 8px;
    }

    .footer-note {
        font-size: 7.5px;
    }

}