/* =========================================
   SIXPIT NEXT GEN HOME
========================================= */

body{

    margin:0;
    padding:0;

    background:#ffffff;

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

    color:#071029;

    overflow-x:hidden;

}

a{
    text-decoration:none;
}

.sx-next-home{

    width:100%;

    overflow:hidden;

}

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

.sx-topbar{

    height:52px;

    background:#071029;

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

    overflow:hidden;

}

.sx-topbar-inner{

    display:flex;
    align-items:center;

    gap:50px;

    color:#fff;

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

}

/* =========================
   NAVBAR
========================= */

.sx-navbar{

    height:90px;

    max-width:1400px;

    margin:0 auto;

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

    padding:0 24px;

}

.sx-logo{

    display:flex;
    align-items:center;

    gap:14px;

}

.sx-logo-icon{

    width:48px;
    height:48px;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

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

    color:#fff;

    font-size:22px;
    font-weight:900;

    box-shadow:
    0 12px 30px rgba(37,99,235,.20);

}

.sx-logo span{

    font-size:34px;
    font-weight:900;

    letter-spacing:-2px;

}

.sx-menu{

    display:flex;
    align-items:center;

    gap:40px;

}

.sx-menu a{

    color:#071029;

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

    transition:.3s;

}

.sx-menu a.active,
.sx-menu a:hover{

    color:#2563eb;

}

.sx-nav-btns{

    display:flex;
    align-items:center;

    gap:14px;

}

.sx-login-btn{

    height:48px;

    padding:0 24px;

    border-radius:14px;

    border:
    1px solid #dce7ff;

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

    color:#071029;

    font-weight:700;

}

.sx-signup-btn{

    height:48px;

    padding:0 28px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

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

    color:#fff;

    font-weight:800;

    box-shadow:
    0 18px 40px rgba(37,99,235,.18);

}

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

.sx-hero{

    position:relative;

    padding:70px 24px 180px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #ffe6e9,
        #fff8dc
    );

    border-bottom-left-radius:180px;
    border-bottom-right-radius:180px;

}

.sx-hero:before{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
        rgba(0,0,0,.03) 1px,
        transparent 1px
    );

    background-size:22px 22px;

    pointer-events:none;

}

.sx-hero-content{

    position:relative;
    z-index:2;

    max-width:1000px;

    margin:0 auto;

    text-align:center;

}

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

.sx-platform-badge{

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

    gap:14px;

    background:#fff;

    border-radius:24px;

    padding:14px 24px;

    border:
    1px solid #f0d7dc;

    box-shadow:
    0 12px 40px rgba(0,0,0,.06);

    margin-bottom:34px;

}

.sx-platform-badge img{

    width:42px;
    height:42px;

}

.sx-platform-badge span{

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

    background:
    linear-gradient(
        135deg,
        #ff4d6d,
        #9333ea
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

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

.sx-hero h1{

    margin:0 0 24px;

    font-size:96px;
    line-height:96px;

    letter-spacing:-5px;

    font-weight:900;

    color:#071029;

}

.sx-hero h1 span{

    display:block;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #ff8a00
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.sx-hero p{

    max-width:760px;

    margin:0 auto 40px;

    color:#475569;

    font-size:24px;
    line-height:42px;

}

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

.sx-hero-buttons{

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

    gap:18px;

    margin-bottom:34px;

}

.sx-main-btn{

    height:68px;

    padding:0 40px;

    border-radius:20px;

    background:#071029;

    color:#fff;

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

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

    box-shadow:
    0 20px 50px rgba(0,0,0,.16);

}

.sx-second-btn{

    height:68px;

    padding:0 40px;

    border-radius:20px;

    border:
    1px solid #dce7ff;

    background:#fff;

    color:#071029;

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

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

}

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

.sx-mini-features{

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

    flex-wrap:wrap;

    gap:26px;

    margin-bottom:40px;

}

.sx-mini-features div{

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

    color:#071029;

}

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

.sx-users{

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

    gap:18px;

    margin-bottom:50px;

}

.sx-user-images{

    display:flex;

}

.sx-user-images img{

    width:54px;
    height:54px;

    border-radius:999px;

    border:4px solid #fff;

    margin-left:-12px;

    object-fit:cover;

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

}

.sx-user-images img:first-child{

    margin-left:0;

}

.sx-user-text{

    text-align:left;

}

.sx-user-text strong{

    display:block;

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

}

.sx-user-text span{

    color:#64748b;

    font-size:14px;

}

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

.sx-profile-card{

    width:520px;

    margin:0 auto;

    background:#fff;

    border-radius:34px;

    padding:34px;

    border:
    1px solid #f1d9dc;

    box-shadow:
    0 40px 100px rgba(0,0,0,.10);

    text-align:left;

    position:relative;

    overflow:hidden;

}

.sx-profile-card:before{

    content:'';

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:34px;

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #ff5f6d,
        #ff8a00
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;

}

.sx-profile-top{

    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:28px;

}

.sx-profile-top img{

    width:72px;
    height:72px;

    border-radius:999px;

}

.sx-profile-top h3{

    margin:0 0 6px;

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

}

.sx-profile-top span{

    color:#64748b;

}

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

.sx-stats-row{

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

    gap:18px;

    margin-bottom:34px;

}

.sx-stats-row div{

    background:#f8fbff;

    border-radius:20px;

    padding:20px;

    text-align:center;

}

.sx-stats-row strong{

    display:block;

    margin-bottom:8px;

    font-size:28px;
    font-weight:900;

    color:#2563eb;

}

.sx-stats-row span{

    color:#64748b;

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

}

/* =========================
   CHART
========================= */

.sx-chart-bars{

    height:140px;

    display:flex;
    align-items:flex-end;

    gap:14px;

}

.sx-chart-bars span{

    flex:1;

    border-radius:999px;

    background:
    linear-gradient(
        to top,
        #2563eb,
        #9333ea
    );

}

.b1{height:40%;}
.b2{height:60%;}
.b3{height:82%;}
.b4{height:72%;}
.b5{height:100%;}
.b6{height:85%;}

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

.sx-feature-grid{

    max-width:1400px;

    margin:-80px auto 0;

    padding:0 24px;

    position:relative;
    z-index:5;

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

    gap:24px;

}

.sx-feature-card{

    background:#fff;

    border-radius:30px;

    padding:38px;

    text-align:center;

    border:
    1px solid #edf2ff;

    box-shadow:
    0 24px 60px rgba(0,0,0,.06);

}

.sx-feature-icon{

    width:80px;
    height:80px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        rgba(255,95,109,.12),
        rgba(37,99,235,.12)
    );

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

    margin:0 auto 24px;

    font-size:34px;

}

.sx-feature-card h3{

    margin:0 0 14px;

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

}

.sx-feature-card p{

    margin:0;

    color:#64748b;

    font-size:17px;
    line-height:32px;

}

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

@media(max-width:1100px){

    .sx-menu{

        display:none;

    }

    .sx-hero{

        border-bottom-left-radius:60px;
        border-bottom-right-radius:60px;

        padding-bottom:120px;

    }

    .sx-hero h1{

        font-size:58px;
        line-height:58px;

    }

    .sx-hero p{

        font-size:18px;
        line-height:34px;

    }

    .sx-profile-card{

        width:100%;

    }

    .sx-feature-grid{

        grid-template-columns:1fr;

        margin-top:-40px;

    }

    .sx-hero-buttons{

        flex-direction:column;

    }

}
/* =========================================
   SIXPIT ULTRA PREMIUM THEME
========================================= */

body{

    margin:0;
    padding:0;

    background:#ffffff;

    font-family:
    Inter,
    sans-serif;

    color:#071029;

    overflow-x:hidden;

}

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

.sx-topbar{

    height:52px;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

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

}

.sx-topbar-inner{

    display:flex;
    gap:40px;

    color:#fff;

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

}

/* =========================================
   NAVBAR
========================================= */

.sx-navbar{

    height:92px;

    background:#fff;

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

    padding:0 80px;

    border-bottom:
    1px solid #eef2ff;

    position:sticky;
    top:0;

    z-index:999;

}

.sx-logo{

    display:flex;
    align-items:center;

    gap:14px;

}

.sx-logo-icon{

    width:48px;
    height:48px;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

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

    color:#fff;

    font-size:22px;
    font-weight:900;

}

.sx-logo span{

    font-size:34px;
    font-weight:900;

    letter-spacing:-2px;

}

.sx-menu{

    display:flex;
    gap:36px;

}

.sx-menu a{

    color:#071029;

    text-decoration:none;

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

    transition:.3s;

}

.sx-menu a:hover,
.sx-menu a.active{

    color:#2563eb;

}

.sx-nav-btns{

    display:flex;
    gap:16px;

}

.sx-login-btn{

    height:52px;

    padding:0 24px;

    border-radius:16px;

    border:
    1px solid #e5e7eb;

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

    color:#071029;

    font-weight:700;

    text-decoration:none;

}

.sx-signup-btn{

    height:52px;

    padding:0 26px;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

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

    color:#fff;

    font-weight:700;

    text-decoration:none;

    box-shadow:
    0 18px 40px rgba(37,99,235,.20);

}

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

.sx-hero{

    position:relative;

    padding:120px 24px 220px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #fff4f5,
        #f3f7ff
    );

}

.sx-hero:before{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(
        rgba(7,16,41,.05) 1px,
        transparent 1px
    );

    background-size:24px 24px;

    opacity:.5;

}

.sx-hero-content{

    position:relative;
    z-index:2;

    max-width:1200px;

    margin:0 auto;

    text-align:center;

}

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

.sx-platform-badge{

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

    gap:16px;

    background:#fff;

    border-radius:28px;

    padding:18px 28px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    margin-bottom:40px;

}

.sx-platform-badge img{

    width:56px;
    height:56px;

}

.sx-platform-badge span{

    font-size:44px;
    font-weight:900;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #9333ea
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

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

.sx-animated-title{

    margin-bottom:40px;

}

.sx-title-main{

    margin:0;

    font-size:120px;
    line-height:120px;

    letter-spacing:-7px;

    font-weight:900;

    color:#071029;

}

.sx-rotating-words{

    position:relative;

    height:140px;

    overflow:hidden;

}

.sx-rotating-words span{

    position:absolute;

    left:0;
    right:0;

    opacity:0;

    transform:
    translateY(100px);

    transition:
    .8s cubic-bezier(.22,1,.36,1);

    font-size:120px;
    line-height:120px;

    letter-spacing:-7px;

    font-weight:900;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #ff8a00
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.sx-rotating-words span.active{

    opacity:1;

    transform:
    translateY(0px);

}

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

.sx-hero-desc{

    max-width:900px;

    margin:0 auto 50px;

    color:#475569;

    font-size:28px;
    line-height:48px;

}

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

.sx-hero-buttons{

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

    gap:20px;

    margin-bottom:50px;

}

.sx-main-btn{

    height:72px;

    padding:0 40px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

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

    color:#fff;

    text-decoration:none;

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

    box-shadow:
    0 24px 60px rgba(37,99,235,.20);

}

.sx-second-btn{

    height:72px;

    padding:0 40px;

    border-radius:22px;

    border:
    1px solid #e5e7eb;

    background:#fff;

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

    color:#071029;

    text-decoration:none;

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

}

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

.sx-mini-features{

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

    flex-wrap:wrap;

    gap:28px;

    margin-bottom:50px;

}

.sx-mini-features div{

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

    color:#071029;

}

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

.sx-users{

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

    gap:20px;

    margin-bottom:60px;

}

.sx-user-images{

    display:flex;

}

.sx-user-images img{

    width:60px;
    height:60px;

    border-radius:999px;

    border:4px solid #fff;

    margin-left:-14px;

}

.sx-user-text{

    text-align:left;

}

.sx-user-text strong{

    display:block;

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

}

.sx-user-text span{

    color:#64748b;

    font-size:15px;

}

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

.sx-profile-card{

    max-width:640px;

    margin:0 auto;

    background:#fff;

    border-radius:38px;

    padding:40px;

    border:
    4px solid transparent;

    background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(
        135deg,
        #9333ea,
        #ff5f6d,
        #ff8a00
    );

    background-origin:border-box;

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

    box-shadow:
    0 40px 90px rgba(0,0,0,.08);

}

.sx-profile-top{

    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:40px;

}

.sx-profile-top img{

    width:90px;
    height:90px;

    border-radius:999px;

}

.sx-profile-top h3{

    margin:0 0 6px;

    font-size:34px;
    font-weight:900;

}

.sx-profile-top span{

    color:#64748b;

    font-size:16px;

}

.sx-stats-row{

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

    gap:20px;

}

.sx-stats-row div{

    background:#f8fafc;

    border-radius:24px;

    padding:28px;

}

.sx-stats-row strong{

    display:block;

    margin-bottom:8px;

    font-size:38px;
    font-weight:900;

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #2563eb
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.sx-stats-row span{

    color:#64748b;

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

}

/* =========================================
   CHART BARS
========================================= */

.sx-chart-bars{

    height:120px;

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

    gap:14px;

    margin-top:40px;

}

.sx-chart-bars span{

    width:36px;

    border-radius:999px;

    background:
    linear-gradient(
        180deg,
        #ff5f6d,
        #2563eb
    );

    animation:
    bars 2s infinite ease-in-out;

}

.sx-chart-bars .b1{height:60px;}
.sx-chart-bars .b2{height:100px;}
.sx-chart-bars .b3{height:80px;}
.sx-chart-bars .b4{height:120px;}
.sx-chart-bars .b5{height:70px;}
.sx-chart-bars .b6{height:95px;}

@keyframes bars{

    50%{
        transform:scaleY(.7);
    }

}

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

@media(max-width:1100px){

    .sx-navbar{

        padding:0 24px;

    }

    .sx-menu{

        display:none;

    }

    .sx-title-main,
    .sx-rotating-words span{

        font-size:64px;
        line-height:64px;

    }

    .sx-platform-badge span{

        font-size:28px;

    }

    .sx-hero-desc{

        font-size:20px;
        line-height:36px;

    }

    .sx-hero-buttons{

        flex-direction:column;

    }

    .sx-stats-row{

        grid-template-columns:1fr;

    }

}
/* =========================================
   SMOOTH THEME TRANSITIONS
========================================= */

.sx-hero,
.sx-main-btn,
.sx-profile-card,
.sx-platform-name,
.sx-chart-bars span,
.sx-rotating-words span{

    transition:
    all .8s cubic-bezier(.22,1,.36,1);

}

/* TIKTOK SPECIAL DARK MODE */

.sx-hero.dark-theme{

    color:#fff;

}

/* FLOATING GLOW */

.sx-profile-card{

    transition:
    all .8s cubic-bezier(.22,1,.36,1);

}

/* HERO BACKGROUND ANIMATION */

.sx-hero{

    transition:
    background 1s ease;

}
/* =====================================
   THEME SWITCHING
===================================== */

.sx-hero{

    transition:
    all .8s ease;

}

/* INSTAGRAM */

.sx-hero.instagram-theme{

    background:
    linear-gradient(
        135deg,
        #fff1f5,
        #f5edff
    );

}

.sx-hero.instagram-theme .sx-main-btn,
.sx-hero.instagram-theme .sx-chart-bars span{

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #9333ea
    );

}

.sx-hero.instagram-theme .sx-platform-badge span,
.sx-hero.instagram-theme .sx-rotating-words span{

    background:
    linear-gradient(
        135deg,
        #ff5f6d,
        #9333ea
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

/* FACEBOOK */

.sx-hero.facebook-theme{

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );

}

.sx-hero.facebook-theme .sx-main-btn,
.sx-hero.facebook-theme .sx-chart-bars span{

    background:
    linear-gradient(
        135deg,
        #1877f2,
        #2563eb
    );

}

.sx-hero.facebook-theme .sx-platform-badge span,
.sx-hero.facebook-theme .sx-rotating-words span{

    background:
    linear-gradient(
        135deg,
        #1877f2,
        #2563eb
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

/* TIKTOK */

.sx-hero.tiktok-theme{

    background:
    linear-gradient(
        135deg,
        #0f0f0f,
        #1f1f1f
    );

}

.sx-hero.tiktok-theme .sx-title-main,
.sx-hero.tiktok-theme .sx-hero-desc,
.sx-hero.tiktok-theme .sx-mini-features div,
.sx-hero.tiktok-theme .sx-user-text strong,
.sx-hero.tiktok-theme .sx-user-text span{

    color:#fff;

}

.sx-hero.tiktok-theme .sx-main-btn,
.sx-hero.tiktok-theme .sx-chart-bars span{

    background:
    linear-gradient(
        135deg,
        #000,
        #ff0050
    );

}

.sx-hero.tiktok-theme .sx-platform-badge span,
.sx-hero.tiktok-theme .sx-rotating-words span{

    background:
    linear-gradient(
        135deg,
        #25f4ee,
        #ff0050
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

/* YOUTUBE */

.sx-hero.youtube-theme{

    background:
    linear-gradient(
        135deg,
        #fff1f2,
        #ffe4e6
    );

}

.sx-hero.youtube-theme .sx-main-btn,
.sx-hero.youtube-theme .sx-chart-bars span{

    background:
    linear-gradient(
        135deg,
        #ff0000,
        #ff5f6d
    );

}

.sx-hero.youtube-theme .sx-platform-badge span,
.sx-hero.youtube-theme .sx-rotating-words span{

    background:
    linear-gradient(
        135deg,
        #ff0000,
        #ff5f6d
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}
.live-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#00d26a;
    display:inline-block;
    position:relative;
}

.live-dot::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#00d26a;
    transform:translate(-50%,-50%);
    animation:liveBlink 1.5s infinite;
}

@keyframes liveBlink{
    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:.8;
    }
    100%{
        transform:translate(-50%,-50%) scale(2.8);
        opacity:0;
    }
}