/* =========================================================
   LEAN NOW — WHY CHOOSE US
   PURPLE / BLUE BRAND THEME
   NO GOLD COLORS
   ALL SELECTORS PREFIXED WITH wcu-
========================================================= */

.wcu-section{

    --wcu-primary:#24216B;
    --wcu-primary-light:#302C80;
    --wcu-primary-soft:#46429A;

    --wcu-background:#050508;

    --wcu-white:#FFFFFF;
    --wcu-text:#EDEDF5;
    --wcu-gray:#9FA1B2;
    --wcu-muted:#72758A;

    position:relative;

    width:100%;

    min-height:760px;

    overflow:hidden;

    padding:30px 20px 70px;

    color:var(--wcu-white);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(36,33,107,.28) 0%,
            rgba(36,33,107,.10) 25%,
            rgba(0,0,0,0) 50%
        ),
        var(--wcu-background);

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

    isolation:isolate;
}


/* =========================================================
   GRID
========================================================= */

.wcu-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(255,255,255,.025) 50%,
            transparent 50.2%
        ),
        linear-gradient(
            0deg,
            transparent 49.8%,
            rgba(255,255,255,.025) 50%,
            transparent 50.2%
        );

    background-size:80px 80px;

    opacity:.30;

    pointer-events:none;

    z-index:-1;
}


/* =========================================================
   ORBIT AREA
========================================================= */

.wcu-orbit-area{

    position:relative;

    width:700px;

    height:700px;

    max-width:95vw;

    max-height:95vw;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;
}


/* =========================================================
   RINGS
========================================================= */

.wcu-ring{

    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


/* OUTER PURPLE RING */

.wcu-ring-main{

    width:600px;

    height:600px;

    border:1px solid rgba(36,33,107,.55);

    box-shadow:
        0 0 40px rgba(36,33,107,.08);
}


.wcu-ring-main::before{

    content:"";

    position:absolute;

    inset:10%;

    border:1px dashed rgba(255,255,255,.07);

    border-radius:50%;
}


/* INNER PURPLE RING */

.wcu-ring-inner{

    width:456px;

    height:456px;

    border:1px solid rgba(48,44,128,.45);
}


/* =========================================================
   ROTATING PURPLE GLOW
========================================================= */

.wcu-glow{

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:
        conic-gradient(
            from 0deg,

            transparent 0deg,
            transparent 285deg,

            rgba(36,33,107,.05) 300deg,

            rgba(48,44,128,.85) 330deg,

            rgba(36,33,107,.10) 350deg,

            transparent 360deg
        );

    -webkit-mask:
        radial-gradient(
            transparent calc(100% - 2px),
            #000 calc(100% - 1px)
        );

    mask:
        radial-gradient(
            transparent calc(100% - 2px),
            #000 calc(100% - 1px)
        );

    animation:wcu-glow-rotate 12s linear infinite;

    pointer-events:none;
}


@keyframes wcu-glow-rotate{

    from{
        transform:rotate(0deg);
    }

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


/* =========================================================
   CENTER CIRCLE
========================================================= */

.wcu-center{

    position:relative;

    z-index:10;

    width:220px;

    height:220px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
        radial-gradient(
            circle at 35% 30%,
            #3C388B,
            #24216B 55%,
            #10102C 100%
        );

    border:2px solid rgba(72,68,155,.90);

    box-shadow:
        0 0 0 12px rgba(36,33,107,.08),
        0 0 60px rgba(36,33,107,.55),
        inset 0 0 40px rgba(0,0,0,.55);

    animation:wcu-center-pulse 4s ease-in-out infinite;
}


@keyframes wcu-center-pulse{

    0%,
    100%{

        box-shadow:
            0 0 0 12px rgba(36,33,107,.08),
            0 0 60px rgba(36,33,107,.55),
            inset 0 0 40px rgba(0,0,0,.55);
    }

    50%{

        box-shadow:
            0 0 0 18px rgba(36,33,107,.14),
            0 0 90px rgba(48,44,128,.75),
            inset 0 0 40px rgba(0,0,0,.55);
    }
}


/* =========================================================
   CENTER CONTENT
========================================================= */

.wcu-center-small{

    color:#9C99E0;

    font-size:10px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:8px;
}


.wcu-center h3{

    margin:0 0 9px;

    padding:0;

    color:#FFFFFF;

    font-size:25px;

    line-height:1.05;

    font-weight:700;
}


.wcu-center-line{

    width:45px;

    height:2px;

    background:#5A56B1;

    margin-bottom:10px;
}


.wcu-center-bottom{

    color:#B8BAC9;

    font-size:10px;

    letter-spacing:1px;
}


/* =========================================================
   ROTATING ITEMS
========================================================= */

.wcu-items{

    position:absolute;

    inset:0;

    z-index:5;

    animation:wcu-orbit-rotate 35s linear infinite;

    transform-origin:center center;
}


.wcu-section[data-wcu-pause="yes"]
.wcu-items:hover{

    animation-play-state:paused;
}


@keyframes wcu-orbit-rotate{

    from{
        transform:rotate(0deg);
    }

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


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

.wcu-item{

    position:absolute;

    width:186px;

    min-width:186px;

    height:186px;

    min-height:186px;

    padding:24px 18px;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(20,20,32,.98),
            rgba(7,7,12,.99)
        );

    border:1px solid rgba(36,33,107,.60);

    box-shadow:
        0 15px 35px rgba(0,0,0,.50),
        0 0 25px rgba(36,33,107,.05);

    cursor:pointer;

    transform-origin:center center;

    overflow:hidden;

    will-change:transform;

    animation:wcu-counter-rotate 35s linear infinite;
}


/* =========================================================
   COUNTER ROTATION
========================================================= */

@keyframes wcu-counter-rotate{

    from{
        transform:rotate(0deg);
    }

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


/* =========================================================
   CARD POSITIONS
========================================================= */

.wcu-item-1{

    top:-30px;

    left:50%;

    margin-left:-93px;
}


.wcu-item-2{

    top:18%;

    right:-43px;
}


.wcu-item-3{

    bottom:18%;

    right:-43px;
}


.wcu-item-4{

    bottom:-30px;

    left:50%;

    margin-left:-93px;
}


.wcu-item-5{

    bottom:18%;

    left:-43px;
}


.wcu-item-6{

    top:18%;

    left:-43px;
}


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

.wcu-icon{

    width:46px;

    height:46px;

    min-width:46px;

    margin-bottom:12px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#7773D0;

    background:rgba(36,33,107,.18);

    border:1px solid rgba(72,68,155,.65);

    font-size:20px;

    font-weight:600;

    line-height:1;

    box-shadow:
        0 0 20px rgba(36,33,107,.10);
}


/* =========================================================
   CARD TITLE
========================================================= */

.wcu-item h4{

    margin:0 0 8px;

    padding:0;

    color:#FFFFFF;

    font-size:14px;

    line-height:1.3;

    letter-spacing:.7px;

    font-weight:700;
}


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

.wcu-item p{

    max-width:145px;

    margin:0;

    padding:0;

    color:#999BAA;

    font-size:12px;

    line-height:1.5;
}


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

.wcu-item:hover{

    border-color:#514DA4;

    background:
        linear-gradient(
            145deg,
            rgba(36,33,107,.55),
            rgba(10,10,18,.99)
        );

    box-shadow:
        0 0 35px rgba(36,33,107,.35),
        0 20px 45px rgba(0,0,0,.75);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.wcu-bottom{

    position:relative;

    z-index:20;

    margin-top:0;

    text-align:center;

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;
}


.wcu-bottom span{

    color:#4E4AA0;

    margin:0 5px;
}


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

@media(max-width:1100px){

    .wcu-orbit-area{

        width:650px;

        height:650px;
    }


    .wcu-ring-main,
    .wcu-glow{

        width:550px;

        height:550px;
    }


    .wcu-ring-inner{

        width:418px;

        height:418px;
    }


    .wcu-item{

        width:170px;

        min-width:170px;

        height:170px;

        min-height:170px;

        padding:20px 14px;
    }


    .wcu-item-1{

        top:-20px;

        margin-left:-85px;
    }


    .wcu-item-4{

        bottom:-20px;

        margin-left:-85px;
    }


    .wcu-item-2,
    .wcu-item-3{

        right:-25px;
    }


    .wcu-item-5,
    .wcu-item-6{

        left:-25px;
    }


    .wcu-icon{

        width:42px;

        height:42px;

        min-width:42px;

        font-size:18px;

        margin-bottom:10px;
    }


    .wcu-item h4{

        font-size:13px;
    }


    .wcu-item p{

        font-size:10px;
    }
}


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

@media(max-width:767px){

    .wcu-section{

        min-height:650px;

        padding:20px 15px 60px;
    }


    .wcu-orbit-area{

        width:440px;

        height:440px;

        max-width:95vw;

        max-height:none;
    }


    .wcu-ring-main,
    .wcu-glow{

        width:410px;

        height:410px;
    }


    .wcu-ring-inner{

        width:312px;

        height:312px;
    }


    .wcu-center{

        width:145px;

        height:145px;
    }


    .wcu-center h3{

        font-size:18px;
    }


    .wcu-center-small,
    .wcu-center-bottom{

        font-size:7px;
    }


    .wcu-item{

        width:150px;

        min-width:150px;

        height:150px;

        min-height:150px;

        padding:18px 12px;

        border-radius:15px;
    }


    .wcu-icon{

        width:36px;

        height:36px;

        min-width:36px;

        font-size:16px;

        margin-bottom:8px;
    }


    .wcu-item h4{

        font-size:11px;

        margin-bottom:5px;
    }


    .wcu-item p{

        font-size:9px;

        line-height:1.4;
    }


    .wcu-item-1{

        top:-15px;

        left:50%;

        margin-left:-75px;
    }


    .wcu-item-2{

        top:18%;

        right:-5px;
    }


    .wcu-item-3{

        bottom:18%;

        right:-5px;
    }


    .wcu-item-4{

        bottom:-15px;

        left:50%;

        margin-left:-75px;
    }


    .wcu-item-5{

        bottom:18%;

        left:-5px;
    }


    .wcu-item-6{

        top:18%;

        left:-5px;
    }


    .wcu-bottom{

        font-size:9px;
    }
}


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

@media(max-width:480px){

    .wcu-section{

        padding-top:15px;

        padding-bottom:50px;
    }


    .wcu-orbit-area{

        width:350px;

        height:350px;
    }


    .wcu-ring-main,
    .wcu-glow{

        width:325px;

        height:325px;
    }


    .wcu-ring-inner{

        width:247px;

        height:247px;
    }


    .wcu-center{

        width:125px;

        height:125px;
    }


    .wcu-center h3{

        font-size:15px;
    }


    .wcu-center-small,
    .wcu-center-bottom{

        font-size:6px;

        letter-spacing:1.5px;
    }


    .wcu-center-line{

        width:30px;

        height:1px;

        margin-bottom:6px;
    }


    .wcu-item{

        width:125px;

        min-width:125px;

        height:125px;

        min-height:125px;

        padding:14px 9px;

        border-radius:14px;
    }


    .wcu-icon{

        width:30px;

        height:30px;

        min-width:30px;

        font-size:13px;

        margin-bottom:6px;
    }


    .wcu-item h4{

        font-size:9px;

        line-height:1.25;

        margin-bottom:5px;
    }


    .wcu-item p{

        font-size:8px;

        line-height:1.35;
    }


    .wcu-item-1{

        top:-12px;

        margin-left:-62.5px;
    }


    .wcu-item-2,
    .wcu-item-3{

        right:-8px;
    }


    .wcu-item-4{

        bottom:-12px;

        margin-left:-62.5px;
    }


    .wcu-item-5,
    .wcu-item-6{

        left:-8px;
    }


    .wcu-bottom{

        margin-top:0;

        font-size:9px;

        letter-spacing:.7px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:360px){

    .wcu-section{

        padding-left:8px;

        padding-right:8px;
    }


    .wcu-orbit-area{

        width:320px;

        height:320px;
    }


    .wcu-ring-main,
    .wcu-glow{

        width:300px;

        height:300px;
    }


    .wcu-ring-inner{

        width:228px;

        height:228px;
    }


    .wcu-center{

        width:110px;

        height:110px;
    }


    .wcu-center h3{

        font-size:13px;
    }


    .wcu-item{

        width:112px;

        min-width:112px;

        height:112px;

        min-height:112px;

        padding:10px 7px;
    }


    .wcu-item-1,
    .wcu-item-4{

        margin-left:-56px;
    }


    .wcu-item-2,
    .wcu-item-3{

        right:-5px;
    }


    .wcu-item-5,
    .wcu-item-6{

        left:-5px;
    }


    .wcu-icon{

        width:27px;

        height:27px;

        min-width:27px;

        font-size:11px;

        margin-bottom:5px;
    }


    .wcu-item h4{

        font-size:8px;
    }


    .wcu-item p{

        font-size:7px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .wcu-items,
    .wcu-glow,
    .wcu-center,
    .wcu-item{

        animation:none !important;
    }
}