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

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

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

.hero{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 0 90px;
    background:
        radial-gradient(circle at top left,#193320 0%,transparent 35%),
        radial-gradient(circle at bottom right,#14273c 0%,transparent 40%),
        #070707;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(to bottom,
    rgba(255,255,255,.02),
    rgba(255,255,255,0));
    pointer-events:none;
}

/*==================================================
  GLOW EFFECTS
==================================================*/

.heroGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.28;
    z-index:0;
    pointer-events:none;
}

.heroGlowOne{
    width:500px;
    height:500px;
    background:#25d366;
    left:-180px;
    top:-140px;
}

.heroGlowTwo{
    width:420px;
    height:420px;
    background:#1f6bff;
    right:-160px;
    bottom:-150px;
}

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

.heroContent{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:90px;
    align-items:center;
}

/*==================================================
  LEFT
==================================================*/

.heroLeft{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

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

.heroBadge{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    padding:11px 20px;
    margin-bottom:32px;
    color:#d9d9d9;
    font-size:14px;
    backdrop-filter:blur(18px);
}

.badgeDot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:
        0 0 0 5px rgba(37,211,102,.12),
        0 0 18px rgba(37,211,102,.9);
}

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

.heroLeft h1{
    font-size:66px;
    line-height:1.04;
    font-weight:800;
    letter-spacing:-2px;
    max-width:700px;
}

.heroLeft h1 span{
    display:block;
    color:var(--primary);
}

/*==================================================
  PARAGRAPH
==================================================*/

.heroLeft p{
    margin-top:30px;
    max-width:620px;
    color:var(--text-light);
    font-size:19px;
    line-height:1.8;
}

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

.heroButtons{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:42px;
}

.heroBtnPrimary,
.heroBtnSecondary{
    height:60px;
    padding:0 34px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
    transition:var(--transition);
    cursor:pointer;
}

.heroBtnPrimary{
    background:var(--primary);
    color:#fff;
    gap:14px;
    box-shadow:
        0 18px 40px rgba(37,211,102,.28);
}

.heroBtnPrimary:hover{
    background:var(--primary-dark);
    transform:translateY(-4px);
    box-shadow:
        0 28px 55px rgba(37,211,102,.35);
}

.heroBtnPrimary svg{
    width:18px;
    height:18px;
    transition:.3s;
}

.heroBtnPrimary:hover svg{
    transform:translateX(5px);
}

.heroBtnSecondary{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#fff;
    backdrop-filter:blur(18px);
}

.heroBtnSecondary:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-4px);
}



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

.heroTrusted{
    margin-top:48px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.heroTrusted>span{
    font-size:14px;
    color:var(--muted);
    font-weight:600;
    letter-spacing:.4px;
}

.trustedList{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.trustedList div{
    padding:12px 20px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    color:#f3f3f3;
    font-size:14px;
    font-weight:600;
    transition:var(--transition);
    backdrop-filter:blur(14px);
}

.trustedList div:hover{
    transform:translateY(-4px);
    background:rgba(37,211,102,.12);
    border-color:rgba(37,211,102,.4);
    color:#fff;
}

/*==================================================
  RIGHT COLUMN
==================================================*/

.heroRight{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:760px;
}

/*==================================================
  FLOATING STATUS CARDS
==================================================*/

.statusCard{
    position:absolute;
    display:flex;
    align-items:center;
    gap:16px;
    width:245px;
    padding:18px;
    background:rgba(16,16,16,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    backdrop-filter:blur(22px);
    box-shadow:
        0 18px 40px rgba(0,0,0,.45);
    z-index:5;
    animation:floatCard 5.5s ease-in-out infinite;
}

.statusCard strong{
    display:block;
    font-size:15px;
    color:#fff;
    margin-bottom:3px;
}

.statusCard small{
    color:#b5b5b5;
    font-size:13px;
}

.statusTop{
    top:40px;
    right:-10px;
    animation-delay:.4s;
}

.statusLeft{
    left:-45px;
    top:250px;
    animation-delay:1.3s;
}

.statusBottom{
    bottom:65px;
    right:-35px;
    animation-delay:2.2s;
}

/*==================================================
  STATUS ICONS
==================================================*/

.statusIcon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:700;
    flex-shrink:0;
}

.statusIcon.green{
    background:rgba(37,211,102,.15);
    color:#25d366;
}

.statusIcon.red{
    background:rgba(255,77,77,.12);
    color:#ff5a5a;
}

.statusIcon.blue{
    background:rgba(72,136,255,.12);
    color:#6aa7ff;
}

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

.phone{
    position:relative;
    width:365px;
    height:730px;
    border-radius:42px;
    padding:14px;
    background:
        linear-gradient(145deg,#2a2a2a,#0b0b0b);
    box-shadow:
        0 50px 100px rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(255,255,255,.05);
}

.phone::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:42px;
    border:1px solid rgba(255,255,255,.06);
    pointer-events:none;
}

.phoneIsland{
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    width:130px;
    height:32px;
    border-radius:999px;
    background:#050505;
    z-index:20;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.08);
}

.phoneScreen{
    position:relative;
    width:100%;
    height:100%;
    border-radius:30px;
    overflow:hidden;
    background:
        linear-gradient(180deg,#fafafa,#ececec);
    color:#181818;
    padding:58px 24px 24px;
    display:flex;
    flex-direction:column;
}

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

.phoneHeader{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:28px;
}

.phoneHeader span{
    font-size:15px;
    color:#555;
    font-weight:700;
    letter-spacing:.3px;
}

/*==================================================
  CALLER
==================================================*/

.caller{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.callerAvatar{
    width:92px;
    height:92px;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:700;
    margin-bottom:18px;
    box-shadow:
        0 18px 35px rgba(37,211,102,.35);
}

.caller h3{
    font-size:24px;
    font-weight:700;
    color:#1b1b1b;
}

.caller small{
    margin-top:6px;
    color:#888;
    font-size:14px;
}



/*==================================================
  TIMELINE
==================================================*/

.timeline{
    margin-top:36px;
    display:flex;
    flex-direction:column;
    gap:22px;
    position:relative;
}

.timeline::before{
    content:"";
    position:absolute;
    left:11px;
    top:10px;
    bottom:10px;
    width:2px;
    background:#d8d8d8;
}

.timelineItem{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:18px;
    z-index:2;
}

.timelineDot{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#ffffff;
    border:3px solid #cfcfcf;
    flex-shrink:0;
    transition:var(--transition);
}

.timelineItem.active .timelineDot{
    border-color:var(--primary);
    background:var(--primary);
    box-shadow:
        0 0 0 6px rgba(37,211,102,.18);
}

.timelineContent{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.timelineContent strong{
    font-size:15px;
    color:#1d1d1d;
}

.timelineContent span{
    color:#8b8b8b;
    font-size:13px;
    text-align: left;
}

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

.chatCard{
    margin-top:auto;
    background:#ffffff;
    border-radius:26px;
    padding:22px;
    box-shadow:
        0 18px 45px rgba(0,0,0,.12);
    display:flex;
    flex-direction:column;
    gap:14px;
}

.chatTitle{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    color:#1d1d1d;
}

.chatTitle::before{
    content:"";
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 12px rgba(37,211,102,.45);
}

/*==================================================
  CHAT BUBBLES
==================================================*/

.bubble{
    align-self:flex-start;
    max-width:88%;
    padding:14px 18px;
    border-radius:18px 18px 18px 6px;
    background:#dcf8c6;
    color:#222;
    font-size:14px;
    line-height:1.6;
    box-shadow:
        0 6px 18px rgba(0,0,0,.08);
    animation:messageAppear .45s ease both;
}

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

.bubble:nth-child(3){
    animation-delay:.35s;
}

.bubble:nth-child(4){
    animation-delay:.55s;
}

.chatStatus{
    margin-top:8px;
    text-align:right;
    font-size:13px;
    color:#7a7a7a;
    font-weight:600;
}

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

.phone{
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.phone:hover{
    transform:
        translateY(-10px)
        rotate(-1deg);
    box-shadow:
        0 70px 120px rgba(0,0,0,.68);
}

/*==================================================
  STATUS CARD HOVER
==================================================*/

.statusCard{
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.statusCard:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.18);
    box-shadow:
        0 24px 50px rgba(0,0,0,.55);
}

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

.trustedList div{
    cursor:default;
}

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

.heroBtnPrimary:active,
.heroBtnSecondary:active{
    transform:scale(.97);
}

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

.phone::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );
    transform:skewX(-25deg);
    animation:phoneShine 7s linear infinite;
    pointer-events:none;
    border-radius:42px;
}

/*==================================================
  SOFT BACKGROUND CIRCLES
==================================================*/

.hero::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.03);
    top:-300px;
    right:-260px;
    pointer-events:none;
}

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

.heroRight::before,
.heroRight::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.heroRight::before{
    width:560px;
    height:560px;
    border:1px solid rgba(255,255,255,.04);
}

.heroRight::after{
    width:680px;
    height:680px;
    border:1px solid rgba(255,255,255,.025);
}

/*==================================================
  Z-INDEX FIXES
==================================================*/

.heroLeft,
.heroRight{
    position:relative;
    z-index:2;
}

.phoneScreen,
.chatCard,
.timeline,
.caller{
    position:relative;
    z-index:2;
}



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

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes messageAppear{

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

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

}

@keyframes phoneShine{

    0%{
        left:-140%;
    }

    100%{
        left:170%;
    }

}

@keyframes pulse{

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

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

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

}

.badgeDot{
    animation:pulse 2s infinite;
}

/*==================================================
  LARGE DESKTOP
==================================================*/

@media (max-width:1400px){

    .heroContent{
        gap:70px;
    }

    .heroLeft h1{
        font-size:58px;
    }

    .phone{
        transform:scale(.94);
    }

}

/*==================================================
  LAPTOP
==================================================*/

@media (max-width:1200px){

    .hero{
        padding:110px 0 80px;
    }

    .heroContent{
        gap:45px;
    }

    .heroLeft h1{
        font-size:50px;
    }

    .heroLeft p{
        font-size:17px;
    }

    .phone{
        transform:scale(.86);
    }

    .statusTop{
        right:-5px;
    }

    .statusLeft{
        left:-20px;
    }

    .statusBottom{
        right:-15px;
    }

}

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

@media (max-width:992px){

    .hero{
        min-height:auto;
        padding:120px 0 90px;
    }

    .heroContent{
        grid-template-columns:1fr;
        gap:70px;
        text-align:center;
    }

    .heroLeft{
        align-items:center;
    }

    .heroLeft h1{
        max-width:700px;
        font-size:48px;
    }

    .heroLeft p{
        max-width:650px;
    }

    .heroButtons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .heroTrusted{
        align-items:center;
    }

    .trustedList{
        justify-content:center;
    }

    .heroRight{
        min-height:680px;
    }

    .phone{
        transform:scale(.9);
    }

    .statusTop{
        top:10px;
        right:40px;
    }

    .statusLeft{
        left:40px;
        top:250px;
    }

    .statusBottom{
        right:20px;
        bottom:20px;
    }

}

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

@media (max-width:768px){

    .container{
        width:calc(100% - 34px);
    }

    .hero{
        padding:100px 0 70px;
    }

    .heroLeft h1{
        font-size:40px;
        letter-spacing:-1px;
    }

    .heroLeft p{
        font-size:16px;
        line-height:1.8;
    }

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

    .heroBtnPrimary,
    .heroBtnSecondary{
        width:100%;
    }

    .heroTrusted{
        margin-top:40px;
    }

    .trustedList{
        gap:10px;
    }

    .trustedList div{
        font-size:13px;
        padding:10px 16px;
    }

    .heroRight{
        min-height:560px;
    }

    .phone{
        width:310px;
        height:620px;
        transform:scale(.82);
    }

    .statusCard{
        width:185px;
        padding:14px;
        gap:12px;
    }

    .statusIcon{
        width:42px;
        height:42px;
        font-size:17px;
    }

    .statusCard strong{
        font-size:13px;
    }

    .statusCard small{
        font-size:11px;
    }

    .statusTop{
        top:0;
        right:0;
    }

    .statusLeft{
        left:0;
        top:205px;
    }

    .statusBottom{
        right:0;
        bottom:0;
    }

}

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

@media (max-width:480px){

    .hero{
        padding-top:90px;
    }

    .heroBadge{
        font-size:13px;
        padding:10px 18px;
    }

    .heroLeft h1{
        font-size:34px;
    }

    .heroLeft p{
        font-size:15px;
    }

    .phone{
        width:270px;
        height:545px;
        padding:11px;
        border-radius:34px;
    }

    .phoneIsland{
        width:100px;
        height:26px;
    }

    .phoneScreen{
        padding:48px 18px 18px;
    }

    .callerAvatar{
        width:72px;
        height:72px;
        font-size:22px;
        margin-bottom:14px;
    }

    .caller h3{
        font-size:20px;
    }

    .timeline{
        gap:18px;
        margin-top:28px;
    }

    .timelineDot{
        width:18px;
        height:18px;
    }

    .timeline::before{
        left:8px;
    }

    .timelineContent strong{
        font-size:13px;
    }

    .timelineContent span{
        font-size:11px;
    }

    .chatCard{
        padding:16px;
        gap:10px;
        border-radius:18px;
    }

    .bubble{
        font-size:12px;
        padding:10px 14px;
    }

    .chatStatus{
        font-size:11px;
    }

    .statusCard{
        display:none;
    }

    .heroGlowOne{
        width:260px;
        height:260px;
    }

    .heroGlowTwo{
        width:240px;
        height:240px;
    }

}

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

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

    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }

}























/*==================================================
  HOW IT WORKS
==================================================*/

.howWorks{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:#080808;
}

.howWorks::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(37,211,102,.05),transparent 35%),
        radial-gradient(circle at bottom right,rgba(58,117,255,.05),transparent 40%);
    pointer-events:none;
}

.howWorks::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.18;
    mask-image:radial-gradient(circle at center,black 45%,transparent 100%);
    pointer-events:none;
}

/*==================================================
  GLOW EFFECTS
==================================================*/

.howGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    pointer-events:none;
    opacity:.25;
}

.howGlowOne{
    width:420px;
    height:420px;
    background:#25d366;
    left:-180px;
    top:120px;
}

.howGlowTwo{
    width:450px;
    height:450px;
    background:#245bff;
    right:-180px;
    bottom:-120px;
}

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

.sectionHeading{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:0 auto 90px;
    text-align:center;
}

.sectionBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    color:#d7d7d7;
    font-size:14px;
    font-weight:600;
    margin-bottom:28px;
}

.sectionHeading h2{
    font-size:56px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-2px;
    color:#fff;
}

.sectionHeading h2 span{
    display:block;
    color:#25d366;
}

.sectionHeading p{
    margin:30px auto 0;
    max-width:680px;
    color:#b8b8b8;
    font-size:18px;
    line-height:1.9;
}

/*==================================================
  STEPS WRAPPER
==================================================*/

.steps{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:30px;
}

/*==================================================
  STEP ARROWS
==================================================*/

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

.stepArrow svg{
    width:120px;
    height:24px;
    overflow:visible;
}

.stepArrow path{
    fill:none;
    stroke:#25d366;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.75;
}




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

.stepCard{
    position:relative;
    padding:42px 34px;
    min-height:360px;
    border-radius:28px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
    overflow:hidden;
    transition:.35s ease;
    display:flex;
    flex-direction:column;
}

.stepCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            transparent 60%
        );
    pointer-events:none;
}

.stepCard::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(37,211,102,.08);
    filter:blur(70px);
    top:-90px;
    right:-90px;
    opacity:0;
    transition:.4s;
}

.stepCard:hover{
    transform:translateY(-10px);
    border-color:rgba(37,211,102,.25);
    box-shadow:
        0 30px 60px rgba(0,0,0,.45);
}

.stepCard:hover::after{
    opacity:1;
}

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

.stepCard.active{
    border-color:rgba(37,211,102,.35);
    box-shadow:
        0 30px 70px rgba(37,211,102,.12);
}

.stepCard.active::after{
    opacity:1;
}

/*==================================================
  STEP NUMBER
==================================================*/

.stepNumber{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:26px;
    font-size:16px;
    font-weight:700;
    color:#25d366;
    background:rgba(37,211,102,.10);
    border:1px solid rgba(37,211,102,.18);
}

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

.stepIcon{
    width:82px;
    height:82px;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:38px;
    margin-bottom:28px;
    background:#121212;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.stepCard:hover .stepIcon{
    transform:scale(1.08) rotate(-4deg);
}

.stepCard.active .stepIcon{
    background:rgba(37,211,102,.12);
    border-color:rgba(37,211,102,.25);
}

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

.stepCard h3{
    font-size:28px;
    color:#fff;
    margin-bottom:18px;
    font-weight:700;
    line-height:1.2;
}

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

.stepCard p{
    color:#bdbdbd;
    font-size:16px;
    line-height:1.8;
    margin-bottom:auto;
}

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

.stepStatus{
    margin-top:34px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    padding:12px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    color:#e7e7e7;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}

.stepStatus.success{
    color:#25d366;
    border-color:rgba(37,211,102,.18);
    background:rgba(37,211,102,.08);
}

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

.statusPulse{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#25d366;
    position:relative;
    flex-shrink:0;
}

.statusPulse::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25d366;
    animation:statusPulse 2s infinite;
}

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

.stepCard:nth-child(1){
    transform:rotate(-2deg);
}

.stepCard:nth-child(3){
    transform:translateY(-18px);
}

.stepCard:nth-child(5){
    transform:rotate(2deg);
}

.stepCard:nth-child(1):hover{
    transform:rotate(-2deg) translateY(-10px);
}

.stepCard:nth-child(3):hover{
    transform:translateY(-28px);
}

.stepCard:nth-child(5):hover{
    transform:rotate(2deg) translateY(-10px);
}



/*==================================================
  HOW BOTTOM
==================================================*/

.howBottom{
    position:relative;
    z-index:2;
    margin-top:90px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:45px;
}

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

.howStats{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
}

.howStat{
    min-width:210px;
    padding:28px;
    text-align:center;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    transition:.35s;
}

.howStat:hover{
    transform:translateY(-8px);
    border-color:rgba(37,211,102,.25);
    box-shadow:0 22px 45px rgba(0,0,0,.35);
}

.howStat strong{
    display:block;
    font-size:42px;
    font-weight:800;
    color:#25d366;
    margin-bottom:10px;
}

.howStat span{
    color:#bdbdbd;
    font-size:15px;
}

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

.howButton{
    display:inline-flex;
    align-items:center;
    gap:14px;
    height:60px;
    padding:0 34px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:.35s;
    box-shadow:
        0 18px 45px rgba(37,211,102,.28);
}

.howButton:hover{
    transform:translateY(-4px);
    background:#1fb85a;
    box-shadow:
        0 24px 60px rgba(37,211,102,.35);
}

.howButton svg{
    width:18px;
    height:18px;
    transition:.3s;
}

.howButton:hover svg{
    transform:translateX(5px);
}

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

@keyframes statusPulse{

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

    70%{
        transform:scale(2.8);
        opacity:0;
    }

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

}

@keyframes floatArrow{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(8px);
    }

    100%{
        transform:translateX(0);
    }

}

.stepArrow{
    animation:floatArrow 3s ease-in-out infinite;
}

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

@media(max-width:1100px){

    .steps{
        grid-template-columns:1fr;
        gap:30px;
        max-width:650px;
        margin:auto;
    }

    .stepArrow{
        transform:rotate(90deg);
        justify-content:center;
    }

    .stepCard,
    .stepCard:nth-child(1),
    .stepCard:nth-child(3),
    .stepCard:nth-child(5){
        transform:none;
    }

    .stepCard:hover,
    .stepCard:nth-child(1):hover,
    .stepCard:nth-child(3):hover,
    .stepCard:nth-child(5):hover{
        transform:translateY(-10px);
    }

}

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

@media(max-width:768px){

    .howWorks{
        padding:90px 0;
    }

    .sectionHeading{
        margin-bottom:60px;
    }

    .sectionHeading h2{
        font-size:40px;
        letter-spacing:-1px;
    }

    .sectionHeading p{
        font-size:16px;
    }

    .stepCard{
        min-height:auto;
        padding:30px;
    }

    .stepIcon{
        width:68px;
        height:68px;
        font-size:30px;
    }

    .stepCard h3{
        font-size:24px;
    }

    .stepCard p{
        font-size:15px;
    }

    .stepStatus{
        font-size:13px;
    }

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

    .howStat{
        width:100%;
    }

    .howButton{
        width:100%;
        justify-content:center;
    }

}

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

@media(max-width:480px){

    .sectionBadge{
        font-size:13px;
        padding:10px 18px;
    }

    .sectionHeading h2{
        font-size:32px;
    }

    .sectionHeading p{
        font-size:15px;
        line-height:1.8;
    }

    .stepCard{
        padding:26px;
        border-radius:22px;
    }

    .stepNumber{
        width:48px;
        height:48px;
        font-size:14px;
        margin-bottom:20px;
    }

    .stepIcon{
        width:60px;
        height:60px;
        border-radius:18px;
        font-size:26px;
        margin-bottom:20px;
    }

    .stepCard h3{
        font-size:22px;
    }

    .stepStatus{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .howStat strong{
        font-size:34px;
    }

}

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

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

    .stepArrow,
    .statusPulse::before{
        animation:none!important;
    }

}






















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

.features{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:#090909;
}

.features::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(37,211,102,.05),transparent 38%),
        radial-gradient(circle at bottom right,rgba(70,120,255,.05),transparent 40%);
    pointer-events:none;
}

.features::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.15;
    mask-image:radial-gradient(circle at center,black 45%,transparent 100%);
    pointer-events:none;
}

/*==================================================
  GLOWS
==================================================*/

.featuresGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    pointer-events:none;
    opacity:.22;
}

.featuresGlowOne{
    width:430px;
    height:430px;
    background:#25d366;
    top:-80px;
    left:-180px;
}

.featuresGlowTwo{
    width:460px;
    height:460px;
    background:#3d73ff;
    right:-180px;
    bottom:-120px;
}

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

.featuresGrid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:80px;
}

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

.featureCard{
    position:relative;
    overflow:hidden;
    padding:36px;
    border-radius:28px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
    transition:.35s ease;
    display:flex;
    flex-direction:column;
    min-height:300px;
}

.featureCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            transparent 65%
        );
    pointer-events:none;
}

.featureCard::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(37,211,102,.08);
    filter:blur(70px);
    top:-90px;
    right:-90px;
    opacity:0;
    transition:.4s ease;
}

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

.featureIcon{
    width:78px;
    height:78px;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:28px;
    font-size:34px;
    background:#131313;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s ease;
}

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

.featureCard h3{
    color:#fff;
    font-size:28px;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.2;
}

.featureCard p{
    color:#bdbdbd;
    font-size:16px;
    line-height:1.8;
    margin-top:auto;
}




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

.featureCard:hover{
    transform:translateY(-12px);
    border-color:rgba(37,211,102,.22);
    box-shadow:
        0 28px 60px rgba(0,0,0,.42);
}

.featureCard:hover::after{
    opacity:1;
}

.featureCard:hover .featureIcon{
    transform:scale(1.08) rotate(-5deg);
    background:rgba(37,211,102,.12);
    border-color:rgba(37,211,102,.25);
}

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

.featureHighlight{
    border-color:rgba(37,211,102,.18);
    background:
        linear-gradient(
            180deg,
            rgba(37,211,102,.08),
            rgba(255,255,255,.04)
        );
    box-shadow:
        0 25px 70px rgba(37,211,102,.08);
}

.featureHighlight::after{
    opacity:1;
    background:rgba(37,211,102,.14);
}

.featureHighlight .featureIcon{
    background:rgba(37,211,102,.14);
    border-color:rgba(37,211,102,.24);
}

.featureHighlight h3{
    color:#25d366;
}

/*==================================================
  FEATURE LINK
==================================================*/

.featureLink{
    margin-top:34px;
    display:inline-flex;
    align-items:center;
    gap:14px;
    width:fit-content;
    height:54px;
    padding:0 24px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:.35s ease;
    box-shadow:
        0 16px 36px rgba(37,211,102,.28);
}

.featureLink:hover{
    background:#1fb85a;
    transform:translateY(-4px);
    box-shadow:
        0 22px 50px rgba(37,211,102,.36);
}

.featureLink svg{
    width:18px;
    height:18px;
    transition:.3s;
}

.featureLink:hover svg{
    transform:translateX(5px);
}

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

.featureCard .featureIcon::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent
        );
    opacity:.6;
    pointer-events:none;
}

/*==================================================
  DECORATIVE CORNER
==================================================*/

.featureCard span{
    display:inline-flex;
}

.featureCard::before{
    z-index:0;
}

.featureCard>*{
    position:relative;
    z-index:2;
}

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

.featureCard:nth-child(1){
    transform:rotate(-2deg);
}

.featureCard:nth-child(2){
    transform:translateY(18px);
}

.featureCard:nth-child(3){
    transform:rotate(2deg);
}

.featureCard:nth-child(4){
    transform:translateY(-12px);
}

.featureCard:nth-child(5){
    transform:rotate(-2deg);
}

.featureCard:nth-child(6){
    transform:translateY(16px);
}

.featureCard:nth-child(1):hover{
    transform:rotate(-2deg) translateY(-12px);
}

.featureCard:nth-child(2):hover{
    transform:translateY(6px);
}

.featureCard:nth-child(3):hover{
    transform:rotate(2deg) translateY(-12px);
}

.featureCard:nth-child(4):hover{
    transform:translateY(-24px);
}

.featureCard:nth-child(5):hover{
    transform:rotate(-2deg) translateY(-12px);
}

.featureCard:nth-child(6):hover{
    transform:translateY(4px);
}




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

@keyframes featureFloat{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes featurePulse{

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

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

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

}

.featureHighlight .featureIcon{
    animation:featurePulse 2.5s infinite;
}

.featuresGrid:hover .featureCard{
    animation-play-state:paused;
}

.featureCard{
    animation:featureFloat 6s ease-in-out infinite;
}

.featureCard:nth-child(2){
    animation-delay:.4s;
}

.featureCard:nth-child(3){
    animation-delay:.8s;
}

.featureCard:nth-child(4){
    animation-delay:1.2s;
}

.featureCard:nth-child(5){
    animation-delay:1.6s;
}

.featureCard:nth-child(6){
    animation-delay:2s;
}

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

@media(max-width:1100px){

    .features{
        padding:110px 0;
    }

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

    .featureCard,
    .featureCard:nth-child(n){
        transform:none;
    }

    .featureCard:hover{
        transform:translateY(-10px);
    }

}

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

@media(max-width:768px){

    .features{
        padding:90px 0;
    }

    .featuresGrid{
        display:flex;
        overflow-x:auto;
        gap:22px;
        padding-bottom:10px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .featuresGrid::-webkit-scrollbar{
        display:none;
    }

    .featureCard{
        flex:0 0 88%;
        min-height:330px;
        scroll-snap-align:center;
        animation:none;
    }

    .featureIcon{
        width:68px;
        height:68px;
        font-size:30px;
        border-radius:20px;
    }

    .featureCard h3{
        font-size:24px;
    }

    .featureCard p{
        font-size:15px;
    }

    .featureLink{
        width:100%;
        justify-content:center;
    }

}

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

@media(max-width:480px){

    .featuresGrid{
        gap:18px;
    }

    .featureCard{
        flex:0 0 92%;
        padding:28px;
        border-radius:24px;
    }

    .featureIcon{
        width:60px;
        height:60px;
        border-radius:18px;
        font-size:26px;
        margin-bottom:22px;
    }

    .featureCard h3{
        font-size:22px;
    }

    .featureCard p{
        font-size:14px;
        line-height:1.8;
    }

    .featureLink{
        height:52px;
        font-size:14px;
    }

}

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

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

    .featureCard,
    .featureHighlight .featureIcon{
        animation:none!important;
    }

    .featureCard,
    .featureLink,
    .featureIcon{
        transition:none!important;
    }

}






















/*==================================================
  PRICING
==================================================*/

.pricing{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:#080808;
}

.pricing::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(37,211,102,.05),transparent 38%),
        radial-gradient(circle at bottom right,rgba(61,115,255,.05),transparent 40%);
    pointer-events:none;
}

.pricing::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.15;
    mask-image:radial-gradient(circle at center,black 45%,transparent 100%);
    pointer-events:none;
}

/*==================================================
  GLOWS
==================================================*/

.pricingGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    opacity:.22;
    pointer-events:none;
}

.pricingGlowOne{
    width:420px;
    height:420px;
    background:#25d366;
    left:-180px;
    top:-120px;
}

.pricingGlowTwo{
    width:470px;
    height:470px;
    background:#3d73ff;
    right:-180px;
    bottom:-160px;
}

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

.pricingGrid{
    position:relative;
    z-index:2;
    margin-top:90px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

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

.planCard{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:42px 36px;
    min-height:650px;
    border-radius:30px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
    transition:.35s ease;
}

.planCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            transparent 65%
        );
    pointer-events:none;
}

.planCard::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(37,211,102,.08);
    filter:blur(80px);
    top:-120px;
    right:-120px;
    opacity:0;
    transition:.4s ease;
}

/*==================================================
  PLAN TOP
==================================================*/

.planTop{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:40px;
}

.planName{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#d9d9d9;
    font-size:14px;
    font-weight:600;
    margin-bottom:26px;
}

.planTop h3{
    color:#fff;
    font-size:64px;
    font-weight:800;
    line-height:1;
    letter-spacing:-2px;
}

.planTop small{
    display:block;
    margin-top:14px;
    color:#9b9b9b;
    font-size:15px;
}

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

.planFeatures{
    position:relative;
    z-index:2;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:auto;
}

.planFeatures li{
    display:flex;
    align-items:center;
    color:#d4d4d4;
    font-size:16px;
    line-height:1.7;
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.planFeatures li:last-child{
    border-bottom:none;
}




/*==================================================
  FEATURED PLAN
==================================================*/

.featuredPlan{
    transform:scale(1.05);
    border-color:rgba(37,211,102,.28);
    background:
        linear-gradient(
            180deg,
            rgba(37,211,102,.10),
            rgba(255,255,255,.04)
        );
    box-shadow:
        0 35px 80px rgba(37,211,102,.12);
}

.featuredPlan::after{
    opacity:1;
    background:rgba(37,211,102,.14);
}

/*==================================================
  POPULAR BADGE
==================================================*/

.popularBadge{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
    padding:10px 18px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
    text-align: center;
    box-shadow:
        0 14px 30px rgba(37,211,102,.35);
}

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

.planButton{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:60px;
    margin-top:42px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:.35s ease;
    box-shadow:
        0 18px 45px rgba(37,211,102,.28);
}

.planButton:hover{
    background:#1fb85a;
    transform:translateY(-4px);
    box-shadow:
        0 26px 60px rgba(37,211,102,.36);
}

.planButton.secondary{
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:none;
}

.planButton.secondary:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.18);
}

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

.planCard:hover{
    transform:translateY(-12px);
    border-color:rgba(37,211,102,.22);
    box-shadow:
        0 32px 70px rgba(0,0,0,.45);
}

.featuredPlan:hover{
    transform:scale(1.05) translateY(-12px);
}

.planCard:hover::after{
    opacity:1;
}

/*==================================================
  STAGGERED LAYOUT
==================================================*/

.planCard:first-child{
    transform:rotate(-2deg);
}

.planCard:last-child{
    transform:rotate(2deg);
}

.planCard:first-child:hover{
    transform:rotate(-2deg) translateY(-12px);
}

.planCard:last-child:hover{
    transform:rotate(2deg) translateY(-12px);
}

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

.pricingFooter{
    position:relative;
    z-index:2;
    margin-top:90px;
}

.pricingInfo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.pricingItem{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:240px;
    padding:18px 26px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#d8d8d8;
    font-size:15px;
    font-weight:500;
    transition:.35s ease;
}

.pricingItem:hover{
    transform:translateY(-6px);
    border-color:rgba(37,211,102,.22);
    background:rgba(255,255,255,.06);
}

/*==================================================
  Z-INDEX FIX
==================================================*/

.planCard>*{
    position:relative;
    z-index:2;
}




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

@keyframes planFloat{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes featuredGlow{

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

    50%{
        box-shadow:
            0 40px 100px rgba(37,211,102,.22);
    }

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

}

.featuredPlan{
    animation:featuredGlow 4s ease-in-out infinite;
}

.planCard{
    animation:planFloat 6s ease-in-out infinite;
}

.planCard:nth-child(1){
    animation-delay:0s;
}

.planCard:nth-child(2){
    animation-delay:.5s;
}

.planCard:nth-child(3){
    animation-delay:1s;
}

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

@media(max-width:1100px){

    .pricing{
        padding:110px 0;
    }

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

    .featuredPlan{
        order:-1;
        transform:none;
    }

    .planCard,
    .planCard:first-child,
    .planCard:last-child{
        transform:none;
    }

    .planCard:hover,
    .planCard:first-child:hover,
    .planCard:last-child:hover,
    .featuredPlan:hover{
        transform:translateY(-10px);
    }

}

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

@media(max-width:768px){

    .pricing{
        padding:90px 0;
    }

    .pricingGrid{
        display:flex;
        overflow-x:auto;
        gap:22px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        padding-bottom:10px;
    }

    .pricingGrid::-webkit-scrollbar{
        display:none;
    }

    .planCard{
        flex:0 0 88%;
        min-height:620px;
        scroll-snap-align:center;
        animation:none;
    }

    .featuredPlan{
        transform:none;
    }

    .planTop h3{
        font-size:56px;
    }

    .planFeatures li{
        font-size:15px;
    }

    .pricingInfo{
        flex-direction:column;
    }

    .pricingItem{
        width:100%;
    }

}

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

@media(max-width:480px){

    .pricingGrid{
        gap:18px;
    }

    .planCard{
        flex:0 0 92%;
        padding:30px 26px;
        border-radius:24px;
        min-height:580px;
    }

    .popularBadge{
        top:18px;
        right:18px;
        font-size:11px;
        padding:8px 14px;
    }

    .planTop h3{
        font-size:46px;
    }

    .planTop small{
        font-size:14px;
    }

    .planFeatures li{
        font-size:14px;
        padding-bottom:16px;
    }

    .planButton{
        height:56px;
        font-size:14px;
    }

    .pricingItem{
        padding:16px 20px;
        font-size:14px;
    }

}

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

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

    .planCard,
    .featuredPlan{
        animation:none!important;
    }

    .planCard,
    .planButton,
    .pricingItem{
        transition:none!important;
    }

}






















/*==================================================
  FAQ
==================================================*/

.faq{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:#090909;
}

.faq::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(37,211,102,.05),transparent 38%),
        radial-gradient(circle at bottom right,rgba(61,115,255,.05),transparent 40%);
    pointer-events:none;
}

.faq::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.15;
    mask-image:radial-gradient(circle at center,black 45%,transparent 100%);
    pointer-events:none;
}

/*==================================================
  GLOWS
==================================================*/

.faqGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    opacity:.22;
    pointer-events:none;
}

.faqGlowOne{
    width:430px;
    height:430px;
    background:#25d366;
    left:-180px;
    top:-100px;
}

.faqGlowTwo{
    width:470px;
    height:470px;
    background:#3d73ff;
    right:-180px;
    bottom:-140px;
}

/*==================================================
  WRAPPER
==================================================*/

.faqWrapper{
    position:relative;
    z-index:2;
    margin-top:90px;
    display:grid;
    grid-template-columns:360px 1fr;
    gap:45px;
    align-items:start;
}

/*==================================================
  LEFT SIDE
==================================================*/

.faqLeft{
    position:sticky;
    top:120px;
}

.faqInfoCard{
    position:relative;
    overflow:hidden;
    padding:40px;
    border-radius:30px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
}

.faqInfoCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            transparent 70%
        );
    pointer-events:none;
}

.faqInfoCard::after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(37,211,102,.08);
    filter:blur(70px);
    top:-100px;
    right:-100px;
}

.faqInfoCard>*{
    position:relative;
    z-index:2;
}

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

.faqInfoIcon{
    width:80px;
    height:80px;
    border-radius:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#121212;
    border:1px solid rgba(255,255,255,.08);
    font-size:34px;
    margin-bottom:28px;
}

.faqInfoCard h3{
    color:#fff;
    font-size:30px;
    margin-bottom:18px;
}

.faqInfoCard p{
    color:#bdbdbd;
    font-size:16px;
    line-height:1.8;
    margin-bottom:34px;
}

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

.faqContactButton{
    display:flex;
    justify-content:center;
    align-items:center;
    height:58px;
    width:100%;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:.35s;
    box-shadow:
        0 18px 40px rgba(37,211,102,.28);
}

.faqContactButton:hover{
    background:#1fb85a;
    transform:translateY(-4px);
    box-shadow:
        0 24px 55px rgba(37,211,102,.35);
}




/*==================================================
  FAQ RIGHT
==================================================*/

.faqRight{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/*==================================================
  FAQ ITEM
==================================================*/

.faqItem{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    transition:.35s ease;
}

.faqItem::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            transparent 70%
        );
    pointer-events:none;
}

.faqItem::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    top:-120px;
    right:-120px;
    border-radius:50%;
    background:rgba(37,211,102,.08);
    filter:blur(70px);
    opacity:0;
    transition:.4s;
}

/*==================================================
  ACTIVE
==================================================*/

.faqItem.active{
    border-color:rgba(37,211,102,.22);
    box-shadow:
        0 22px 55px rgba(37,211,102,.08);
}

.faqItem.active::after{
    opacity:1;
}

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

.faqQuestion{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:28px 34px;
    border:none;
    background:none;
    color:#fff;
    cursor:pointer;
    text-align:left;
}

.faqQuestion span{
    font-size:19px;
    font-weight:600;
    line-height:1.5;
}

/*==================================================
  PLUS
==================================================*/

.faqPlus{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#25d366;
    font-size:28px;
    font-weight:300;
    transition:.35s ease;
}

.faqItem.active .faqPlus{
    transform:rotate(45deg);
    background:rgba(37,211,102,.12);
    border-color:rgba(37,211,102,.25);
}

/*==================================================
  ANSWER
==================================================*/

.faqAnswer{
    position:relative;
    z-index:2;
    max-height:0;
    overflow:hidden;
    transition:
        max-height .45s ease,
        padding .35s ease;
}

.faqItem.active .faqAnswer{
    max-height:300px;
    padding:0 34px 30px;
}

.faqAnswer p{
    color:#bdbdbd;
    font-size:16px;
    line-height:1.9;
    max-width:95%;
}

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

.faqItem:hover{
    border-color:rgba(37,211,102,.18);
    transform:translateY(-4px);
}

.faqItem:hover::after{
    opacity:.6;
}

.faqItem:hover .faqPlus{
    transform:scale(1.08);
}

.faqItem.active:hover .faqPlus{
    transform:rotate(45deg) scale(1.08);
}




/*==================================================
  FINAL CTA
==================================================*/

.finalCta{
    position:relative;
    z-index:2;
    margin-top:120px;
    padding:80px 60px;
    border-radius:36px;
    overflow:hidden;
    text-align:center;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(24px);
}

.finalCta::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top center,
        rgba(37,211,102,.12),
        transparent 65%);
    pointer-events:none;
}

.finalCta>*{
    position:relative;
    z-index:2;
}

.finalCta h2{
    color:#fff;
    font-size:54px;
    font-weight:800;
    letter-spacing:-2px;
    line-height:1.1;
}

.finalCta p{
    max-width:700px;
    margin:28px auto 0;
    color:#bdbdbd;
    font-size:18px;
    line-height:1.8;
}

.finalButtons{
    margin-top:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

/*==================================================
  FLOATING ANIMATION
==================================================*/

@keyframes faqFloat{

    0%{
        transform:translateY(0px);
    }

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

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

}

.faqInfoCard{
    animation:faqFloat 6s ease-in-out infinite;
}

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

@media(max-width:1100px){

    .faq{
        padding:110px 0;
    }

    .faqWrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .faqLeft{
        position:static;
    }

    .faqInfoCard{
        max-width:650px;
        margin:auto;
    }

}

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

@media(max-width:768px){

    .faq{
        padding:90px 0;
    }

    .faqWrapper{
        margin-top:60px;
    }

    .faqInfoCard{
        padding:34px;
    }

    .faqInfoIcon{
        width:68px;
        height:68px;
        font-size:30px;
        border-radius:20px;
    }

    .faqInfoCard h3{
        font-size:26px;
    }

    .faqInfoCard p{
        font-size:15px;
    }

    .faqQuestion{
        padding:24px;
    }

    .faqQuestion span{
        font-size:17px;
    }

    .faqPlus{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:24px;
    }

    .faqItem.active .faqAnswer{
        padding:0 24px 24px;
    }

    .faqAnswer p{
        max-width:100%;
        font-size:15px;
    }

    .finalCta{
        margin-top:90px;
        padding:60px 30px;
    }

    .finalCta h2{
        font-size:40px;
        letter-spacing:-1px;
    }

    .finalCta p{
        font-size:16px;
    }

    .finalButtons{
        flex-direction:column;
    }

    .finalButtons .heroBtnPrimary,
    .finalButtons .heroBtnSecondary{
        width:100%;
    }

}

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

@media(max-width:480px){

    .faqInfoCard{
        padding:28px;
        border-radius:24px;
    }

    .faqInfoIcon{
        width:60px;
        height:60px;
        font-size:26px;
        border-radius:18px;
    }

    .faqInfoCard h3{
        font-size:22px;
    }

    .faqInfoCard p{
        font-size:14px;
        line-height:1.8;
    }

    .faqQuestion{
        padding:20px;
    }

    .faqQuestion span{
        font-size:16px;
    }

    .faqPlus{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:22px;
    }

    .faqItem.active .faqAnswer{
        padding:0 20px 20px;
    }

    .faqAnswer p{
        font-size:14px;
    }

    .finalCta{
        padding:50px 24px;
        border-radius:28px;
    }

    .finalCta h2{
        font-size:32px;
    }

    .finalCta p{
        font-size:15px;
        line-height:1.8;
    }

}

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

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

    .faqInfoCard{
        animation:none!important;
    }

    .faqItem,
    .faqPlus,
    .faqContactButton{
        transition:none!important;
    }

}