/* ==================================================
   CELEBSO Landing Page - Stylesheet
   File: css/style.css
   ================================================== */

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

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img,
video{
    max-width:100%;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 70% 15%,#17103b 0%,transparent 27%),
        radial-gradient(circle at 20% 65%,#160d2a 0%,transparent 25%),
        #070812;
    color:#fff;
    overflow-x:hidden;
}

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

.container{
    width:100%;
    max-width:1100px;
    margin:auto;
}

section[id],
footer[id]{
    scroll-margin-top:80px;
}

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

.navbar{
    height:72px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(7,8,18,.94);
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.nav-inner{
    max-width:1100px;
    height:100%;
    margin:auto;
    position:relative;
    display:flex;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:22px;
    font-weight:800;
    letter-spacing:2px;
    cursor:pointer;
    transition:.2s;
}

.logo:hover{
    opacity:.85;
}

.logo .main-icon{
    width:165px;
    height:auto;
    border-radius:12px;
    background:transparent;
}

.logo .logo-text{
    display:flex;
    align-items:center;
}

.logo .logo-text .mini-icon{
    height:21px;
    width:auto;
    margin:0 4px 0 1px;
}

.logo .link{
    stroke:#ffca05;
    stroke-width:14;
    stroke-linecap:round;
}

.logo .node{
    fill:#ffca05;
}

.logo .node-white{
    fill:#fff;
}

.logo span{
    color:#ffca05;
}

.menu{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    padding:5px;
    border-radius:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

.menu a{
    font-size:14px;
    font-weight:600;
    color:#c8c8d0;
    transition:all .25s;
    position:relative;
    padding:9px 18px;
    border-radius:24px;
    letter-spacing:.3px;
}

.menu a:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:6px;
    width:0;
    height:2px;
    background:#ffca05;
    transition:all .25s;
    transform:translateX(-50%);
}

.menu a:hover{
    color:#fff;
    background:linear-gradient(90deg,rgba(255,202,5,.14),rgba(255,176,0,.10));
    box-shadow:0 0 18px rgba(255,202,5,.18), inset 0 0 0 1px rgba(255,202,5,.22);
}

.menu a:hover:after{
    width:22px;
}

.menu a.active{
    color:#ffca05;
    background:linear-gradient(90deg,rgba(255,202,5,.14),rgba(255,176,0,.10));
    box-shadow:0 0 18px rgba(255,202,5,.18), inset 0 0 0 1px rgba(255,202,5,.22);
}

.menu a.active:after{
    width:22px;
}

.nav-inner .install{
    margin-left:auto;
}

.install{
    background:linear-gradient(90deg,#ffb700,#ffd000);
    color:#171717;
    border:0;
    padding:12px 22px;
    border-radius:24px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

.install:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,202,5,.35);
}

.nav-toggle{
    display:none;
    width:42px;
    height:42px;
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    transition:.25s;
}

.nav-toggle span{
    width:20px;
    height:2px;
    background:#ffca05;
    border-radius:2px;
    transition:.3s;
}

.nav-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
    opacity:0;
}

.nav-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu{
    display:none;
    position:fixed;
    top:76px;
    right:14px;
    width:min(300px, calc(100vw - 28px));
    flex-direction:column;
    gap:6px;
    padding:12px 16px 16px;
    background:rgba(10,11,24,.98);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:99;
    animation:menuDrop .3s ease;
}

@keyframes menuDrop{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.mobile-menu a{
    font-size:15px;
    color:#d5d5dd;
    padding:13px 14px;
    border-radius:10px;
    transition:.2s;
    border:1px solid transparent;
}

.mobile-menu a:hover{
    background:rgba(255,202,5,.12);
    color:#ffca05;
    border-color:rgba(255,202,5,.25);
}

.mobile-menu a.active{
    color:#ffca05;
    border-color:rgba(255,202,5,.25);
}

.mobile-menu .install{
    margin-top:8px;
}

.mobile-menu.open{
    display:flex;
}

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

.hero{
    min-height:calc(100vh - 72px);
    position:relative;
    background:#070812;
    border-radius:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:0;
    margin-bottom:60px;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:url("../images/banner_image_panel.png") center / cover no-repeat;
    z-index:0;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,8,18,.72) 0%,rgba(7,8,18,.32) 30%,rgba(7,8,18,0) 55%);
    z-index:1;
    pointer-events:none;
}

.hero-left{
    width:100%;
    max-width:1100px;
    padding:0 40px;
    position:relative;
    z-index:2;
    flex:none;
}

@keyframes floatIn{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

.hero-title{
    font-size:58px;
    font-weight:700;
    line-height:1;
    margin-bottom:15px;
}

.hero-logo{
    height:75px;
    width:auto;
    display:block;
    margin-bottom:15px;
}

.hero-title span{
    background:linear-gradient(90deg,#ffca05,#ff36a7,#ffca05);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 3.2s linear infinite;
}

@keyframes shimmer{
    0%{
        background-position:0% 0;
    }
    100%{
        background-position:220% 0;
    }
}

.hero-heading{
    font-size:35px;
    font-weight:800;
    line-height:1.25;
    margin-bottom:18px;
    letter-spacing:.3px;
    text-shadow:0 2px 22px rgba(0,0,0,.45);
}

.hero-heading span{
    background:linear-gradient(90deg,#ff36a7,#ffca05,#ff36a7);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 3.2s linear infinite;
}

.hero-text{
    width:520px;
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    line-height:1.6;
    margin-bottom:30px;
}

.stores{
    display:flex;
    gap:13px;
}

.store{
    width:150px;
    height:46px;
    border:1px solid #888;
    border-radius:8px;
    background:#030409;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 12px;
    transition:.2s;
    cursor:pointer;
}

.store:hover{
    border-color:#ffca05;
    transform:translateY(-2px);
}

.store svg{
    width:20px;
    height:20px;
    flex-shrink:0;
}

.store .stext{
    text-align:left;
    line-height:1.15;
}

.store .stext small{
    display:block;
    color:#aaa;
    font-size:9px;
}

.store .stext strong{
    display:block;
    color:#fff;
    font-size:13px;
    letter-spacing:.5px;
}

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

.banner{
    aspect-ratio:2108/468;
    width:100%;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:60px;
    background:#070812;
    border:1px solid rgba(255,255,255,.18);
}

.banner img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

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

.live{
    display:grid;
    grid-template-columns:245px 245px 1fr;
    gap:30px;
    margin-bottom:60px;
}

.live-card{
    min-height:280px;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(145deg,#25263a,#10111d);
    padding:18px;
}

.creator{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:18px;
}

.avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
}

.creator strong{
    display:block;
    font-size:15px;
}

.creator small{
    color:#999;
    font-size:12px;
}

.live-tag{
    display:inline-block;
    background:#ffca05;
    font-size:10px;
    font-weight:bold;
    padding:4px 9px;
    border-radius:4px;
    margin-bottom:15px;
}

.live-card h3{
    font-size:18px;
    margin-bottom:14px;
}

.live-card p{
    color:#a9a9b3;
    font-size:14px;
    line-height:1.55;
    margin-bottom:14px;
}

.watch{
    border:1px solid #a27c19;
    background:transparent;
    color:white;
    padding:9px 15px;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
    transition:.25s;
}

.watch:hover{
    background:#a27c19;
    color:#171717;
}

.live-info{
    padding-top:6px;
    text-align:left;
    padding-left:45px;
}

.live-info h2{
    font-size:28px;
    margin-bottom:8px;
}

.live-info h2 span{
    background:linear-gradient(90deg,#fff,#ff42ad);
    -webkit-background-clip:text;
    color:transparent;
}

.live-info>p{
    font-size:13px;
    color:#c0c0ca;
    line-height:1.5;
    margin-bottom:20px;
}

.stats{
    display:flex;
    justify-content:flex-start;
    gap:55px;
}

.stat-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#29155c;
    font-size:17px;
    margin-bottom:8px;
}

.stat-number{
    color:#ffca05;
    font-size:19px;
    margin-bottom:3px;
}

.stat-label{
    font-size:10px;
    color:#bbb;
}

/* ================= COMMUNITY ================= */

.community{
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    text-align:center;
    padding:24px 20px;
    margin-bottom:60px;
}

.community h2{
    font-size:30px;
    margin-bottom:10px;
}

.community p{
    color:#c9c9d1;
    font-size:15px;
    line-height:1.6;
}

.tags{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}

.tag{
    border:1px solid #765e17;
    color:#d4a900;
    padding:8px 18px;
    border-radius:24px;
    font-size:13px;
}

/* ================= REELS ================= */

.reel-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

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

.view{
    color:#ddd;
    border:1px solid #555;
    background:transparent;
    padding:8px 16px;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
    transition:.25s;
}

.view:hover{
    border-color:#ffca05;
    color:#ffca05;
}

.reels{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
    margin-bottom:60px;
}

.reel{
    aspect-ratio:9/16;
    position:relative;
    overflow:hidden;
    border-radius:11px;
    background:#151622;
}

.reel.extra{
    display:none;
}

.reels.show-all .reel.extra{
    display:block;
}

.reel>img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.reel video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#151622;
}

.reel:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 40%,rgba(0,0,0,.75));
}

.reel-mute{
    position:absolute;
    z-index:6;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.reel-mute:hover{
    border-color:#ffca05;
    background:rgba(0,0,0,.75);
}

.play{
    position:absolute;
    z-index:3;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
}

.reel-user{
    position:absolute;
    z-index:4;
    bottom:25px;
    left:8px;
    display:flex;
    align-items:center;
    gap:5px;
}

.reel-user img{
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid white;
    object-fit:cover;
}

.reel-user span{
    font-size:12px;
}

.reel-user small{
    display:block;
    color:#ddd;
    font-size:10px;
}

.reel-stats{
    position:absolute;
    z-index:4;
    left:9px;
    right:9px;
    bottom:7px;
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#ddd;
}

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

.founding-banner{
    margin-bottom:60px;
}

.founding-banner.mt{
    margin-top:60px;
}

.founding-banner .fb-wrapper{
    position:relative;
    width:100%;
    border-radius:16px;
    border:1px solid rgba(245,207,116,.3);
    background:linear-gradient(180deg,rgba(17,15,25,.9) 0%,rgba(10,9,14,.9) 100%);
    padding:30px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,.5);
    isolation:isolate;
    transition:border-color .3s ease, box-shadow .3s ease;
}

.founding-banner .fb-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 50%,rgba(138,43,226,.22),transparent 45%),
        radial-gradient(circle at 88% 50%,rgba(245,207,116,.14),transparent 45%);
    pointer-events:none;
    z-index:1;
    animation:fbPulseBg 5s ease-in-out infinite;
}

.founding-banner .fb-wrapper:hover{
    border-color:rgba(245,207,116,.6);
    box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 34px rgba(138,43,226,.18);
}

@keyframes fbPulseBg{
    0%,100%{ opacity:.7; }
    50%{ opacity:1; }
}

.founding-banner .fb-bg-x{
    position:absolute;
    right:32%;
    top:50%;
    transform:translateY(-50%);
    font-size:140px;
    font-weight:300;
    color:#f5cf74;
    opacity:.04;
    pointer-events:none;
    user-select:none;
    line-height:1;
    font-family:serif;
    animation:fbBgX 5s ease-in-out infinite;
}

@keyframes fbBgX{
    0%,100%{ opacity:.03; }
    50%{ opacity:.07; }
}

.founding-banner .fb-glow-top{
    position:absolute;
    top:-1px;
    left:35%;
    width:15%;
    height:2px;
    background:#fff;
    box-shadow:0 0 20px 6px rgba(123,66,246,.8),0 0 8px 2px #fff;
    border-radius:50%;
    z-index:2;
    animation:fbGlowTop 3.5s linear infinite;
}

.founding-banner .fb-glow-bottom{
    position:absolute;
    bottom:-1px;
    left:48%;
    width:10%;
    height:2px;
    background:#fff;
    box-shadow:0 0 20px 6px rgba(245,207,116,.6),0 0 8px 2px #fff;
    border-radius:50%;
    z-index:2;
    animation:fbGlowBottom 3.5s linear infinite;
}

@keyframes fbGlowTop{
    0%{ left:0; transform:translateX(-100%); }
    50%{ left:50%; transform:translateX(-50%); }
    100%{ left:100%; transform:translateX(0); }
}

@keyframes fbGlowBottom{
    0%{ left:100%; transform:translateX(0); }
    50%{ left:50%; transform:translateX(-50%); }
    100%{ left:0; transform:translateX(-100%); }
}

.founding-banner .fb-left{
    display:flex;
    align-items:center;
    gap:15px;
    min-width:max-content;
    z-index:10;
}

.founding-banner .fb-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    animation:fbPulse 2.4s ease-in-out infinite;
    filter:drop-shadow(0 0 10px rgba(245,207,116,.55));
}

@keyframes fbPulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.12); }
}

.founding-banner .fb-title{
    color:#f5cf74;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
}

.founding-banner .fb-divider{
    width:1px;
    height:50px;
    background:linear-gradient(to bottom,transparent,rgba(245,207,116,.55),transparent);
    margin:0 10px;
    z-index:10;
    box-shadow:0 0 8px rgba(245,207,116,.35);
}

.founding-banner .fb-middle{
    flex-grow:1;
    z-index:10;
}

.founding-banner .fb-middle h2{
    color:transparent;
    background:linear-gradient(90deg,#f5cf74 0%,#fff6df 25%,#f5cf74 50%,#fff6df 75%,#f5cf74 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    font-size:26px;
    font-weight:700;
    margin-bottom:8px;
    letter-spacing:-.5px;
    animation:fbShimmer 4s linear infinite;
}

@keyframes fbShimmer{
    0%{ background-position:200% center; }
    100%{ background-position:-200% center; }
}

.founding-banner .fb-middle p{
    color:#a3a3a3;
    font-size:14px;
    font-weight:400;
}

.founding-banner .fb-right{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    min-width:max-content;
    z-index:10;
}

.founding-banner .fb-btn{
    position:relative;
    overflow:hidden;
    background:linear-gradient(90deg,#e6b84c,#f9d575,#e6b84c);
    background-size:200% auto;
    border:1px solid rgba(245,207,116,.7);
    border-radius:30px;
    padding:14px 28px;
    color:#1a1405;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    transition:all .3s ease;
    text-transform:uppercase;
    box-shadow:0 0 18px rgba(245,207,116,.35);
    animation:fbShimmer 3s linear infinite;
}

.founding-banner .fb-btn::after{
    content:"";
    position:absolute;
    top:0;
    left:-80%;
    width:50%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
    transform:skewX(-20deg);
    animation:fbShine 2.6s ease-in-out infinite;
    pointer-events:none;
}

@keyframes fbShine{
    0%{ left:-80%; }
    60%,100%{ left:140%; }
}

.founding-banner .fb-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 0 30px rgba(245,207,116,.6);
}

.founding-banner .fb-btn:hover::after{
    animation-duration:.9s;
}

.founding-banner .fb-btn svg{
    transition:transform .3s ease;
}

.founding-banner .fb-btn:hover svg{
    transform:translateX(4px);
}

.founding-banner .fb-info{
    display:flex;
    align-items:center;
    gap:8px;
    color:#9d8ab8;
    font-size:13px;
    font-weight:500;
}

.founding-banner .fb-info svg{
    opacity:.8;
}

@media(max-width:850px){
    .founding-banner .fb-wrapper{
        flex-direction:column;
        text-align:center;
        gap:20px;
        padding:40px 20px;
    }
    .founding-banner .fb-divider{
        display:none;
    }
    .founding-banner .fb-bg-x{
        right:50%;
        transform:translate(50%,-50%);
    }
    .founding-banner .fb-left{
        min-width:0;
    }
    .founding-banner .fb-right{
        min-width:0;
    }
}

.steps{
    margin-bottom:60px;
}

.steps-image{
    width:100%;
    display:block;
    height:auto;
    border-radius:18px;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
}

html.light-mode .steps-image{
    box-shadow:0 14px 40px rgba(15,20,40,.15);
}

.step{
    display:flex;
    align-items:center;
    gap:11px;
}

.step-icon{
    width:49px;
    height:49px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.step:nth-child(1) .step-icon{
    background:linear-gradient(140deg,#8139eb,#4d24a5);
}

.step:nth-child(3) .step-icon{
    background:linear-gradient(140deg,#ee3970,#c8205a);
}

.step:nth-child(5) .step-icon{
    background:linear-gradient(140deg,#ffc51a,#ff8211);
}

.step h3{
    font-size:14px;
    margin-bottom:4px;
}

.step p{
    color:#aaaab4;
    font-size:9px;
    line-height:1.4;
}

.arrow{
    font-size:26px;
    color:#bbb;
}

/* ================= DOWNLOAD ================= */

.download{
    border:1px solid rgba(255,202,5,.25);
    border-radius:20px;
    background:
        radial-gradient(circle at 10% 20%,rgba(146,32,76,.55),transparent 45%),
        radial-gradient(circle at 90% 15%,rgba(255,202,5,.18),transparent 40%),
        radial-gradient(circle at 50% 120%,rgba(255,54,167,.3),transparent 55%),
        linear-gradient(110deg,#22112b,#11111d);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:44px 30px;
    margin-bottom:60px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(146,32,76,.25);
}

.download::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 20%,rgba(255,202,5,.09) 40%,rgba(255,54,167,.12) 50%,transparent 72%);
    background-size:250% 100%;
    animation:dlSweep 6s ease-in-out infinite;
    pointer-events:none;
}

@keyframes dlSweep{
    0%,100%{
        background-position:0% 0;
    }
    50%{
        background-position:100% 0;
    }
}

.download::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    top:-90px;
    right:-70px;
    background:radial-gradient(circle,rgba(255,54,167,.3),transparent 62%);
    pointer-events:none;
    animation:dlOrb 6s ease-in-out infinite;
}

.download h2{
    font-size:34px;
    margin-bottom:12px;
    position:relative;
    animation:dlTitle 3s ease-in-out infinite;
}

@keyframes dlTitle{
    0%,100%{
        text-shadow:0 0 14px rgba(255,202,5,.25);
        transform:scale(1);
    }
    50%{
        text-shadow:0 0 30px rgba(255,54,167,.6);
        transform:scale(1.02);
    }
}

.download h2 span{
    background:linear-gradient(90deg,#ffb700,#ff36a7);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 3.2s linear infinite;
}

.download p{
    color:#d6d6de;
    font-size:15px;
    margin-bottom:22px;
    position:relative;
}

.download-buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    position:relative;
}

.download-buttons .install{
    background:linear-gradient(90deg,#ffb700,#ffd000,#ffb700);
    background-size:200% 100%;
    color:#171717;
    border:0;
    padding:14px 34px;
    border-radius:30px;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 6px 24px rgba(255,202,5,.4);
    animation:btnGlow 2.4s ease-in-out infinite, btnShift 3.5s ease-in-out infinite;
}

@keyframes btnShift{
    0%,100%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
}

.download-buttons .install:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 34px rgba(255,202,5,.55);
}

.learn{
    background:rgba(255,255,255,.05);
    color:white;
    border:1px solid rgba(255,255,255,.35);
    border-radius:30px;
    padding:14px 30px;
    font-size:14px;
    cursor:pointer;
    transition:.25s;
    backdrop-filter:blur(4px);
}

.learn:hover{
    border-color:#ffca05;
    color:#ffca05;
    transform:translateY(-3px);
}

@keyframes dlOrb{
    0%,100%{
        transform:translate(0,0) scale(1);
        opacity:.55;
    }
    50%{
        transform:translate(-24px,16px) scale(1.25);
        opacity:1;
    }
}

.download > div{
    position:relative;
    z-index:2;
}

.dl-orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    animation:dlFloat 8s ease-in-out infinite;
}

.dl-orb-1{
    width:220px;
    height:220px;
    top:-60px;
    left:-50px;
    background:radial-gradient(circle,rgba(255,202,5,.35),transparent 60%);
}

.dl-orb-2{
    width:260px;
    height:260px;
    bottom:-80px;
    right:-60px;
    background:radial-gradient(circle,rgba(255,54,167,.3),transparent 60%);
    animation-delay:2s;
}

.dl-orb-3{
    width:150px;
    height:150px;
    top:20%;
    right:15%;
    background:radial-gradient(circle,rgba(129,57,235,.35),transparent 60%);
    animation-delay:4s;
}

.dl-orb-4{
    width:90px;
    height:90px;
    bottom:25%;
    left:12%;
    background:radial-gradient(circle,rgba(255,202,5,.4),transparent 60%);
    animation-delay:1s;
}

.dl-orb-5{
    width:60px;
    height:60px;
    top:55%;
    left:48%;
    background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%);
    animation-delay:3s;
}

@keyframes dlFloat{
    0%,100%{
        transform:translate(0,0) scale(1);
        opacity:.55;
    }
    50%{
        transform:translate(22px,-26px) scale(1.15);
        opacity:1;
    }
}

.dl-part{
    position:absolute;
    bottom:-12px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,202,5,.85);
    box-shadow:0 0 8px rgba(255,202,5,.85);
    z-index:1;
    pointer-events:none;
    animation:dlRise 7s linear infinite;
}

.p1{ left:10%; }
.p2{ left:24%; background:rgba(255,54,167,.85); box-shadow:0 0 8px rgba(255,54,167,.85); animation-delay:1.2s; }
.p3{ left:40%; animation-delay:2.4s; }
.p4{ left:58%; background:rgba(129,57,235,.85); box-shadow:0 0 8px rgba(129,57,235,.85); animation-delay:.6s; }
.p5{ left:74%; animation-delay:3.2s; }
.p6{ left:88%; background:rgba(255,54,167,.85); box-shadow:0 0 8px rgba(255,54,167,.85); animation-delay:1.8s; }

@keyframes dlRise{
    0%{
        transform:translateY(0) scale(1);
        opacity:0;
    }
    12%{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    100%{
        transform:translateY(-240px) scale(.4);
        opacity:0;
    }
}

@media(prefers-reduced-motion:reduce){
    .dl-orb,
    .dl-part{
        animation:none;
        opacity:.3;
    }
}

/* ================= MEDIA ================= */

.media{
    width:100%;
    height:80px;
    background:
        radial-gradient(circle at 20% 50%,rgba(255,202,5,.25),transparent 40%),
        radial-gradient(circle at 50% 50%,rgba(255,54,167,.2),transparent 40%),
        radial-gradient(circle at 80% 50%,rgba(255,255,255,.3),transparent 40%),
        #ffffff;
    overflow:hidden;
    margin-bottom:60px;
    display:flex;
    align-items:center;
}

.media-track{
    display:flex;
    width:max-content;
    animation:mediaScroll 22s linear infinite;
}

.media:hover .media-track{
    animation-play-state:paused;
}

@keyframes mediaScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.media-set{
    display:flex;
    align-items:center;
    gap:50px;
    padding:0 25px;
    flex-shrink:0;
}

.media-set img{
    height:44px;
    width:auto;
    object-fit:contain;
    flex-shrink:0;
    filter:grayscale(0%);
    opacity:1;
    transition:.3s;
}

.media-set img:hover{
    transform:scale(1.08);
}

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

footer{
    background:#090a13;
    text-align:center;
    padding:0;
}

.footer-hero{
    position:relative;
    width:100%;
    margin:0 auto;
    overflow:hidden;
    box-shadow:0 -12px 40px rgba(0,0,0,.35);
}

.footer-hero img{
    width:100%;
    height:auto;
    max-height:360px;
    display:block;
    object-fit:cover;
}

.footer-hero .footer-hero-dark{
    display:block;
}

.footer-text{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px 20px;
    background:rgba(7,8,18,.45);
    color:#ffffff;
}

.footer-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    font-size:34px;
    font-weight:800;
    letter-spacing:5px;
    margin-bottom:25px;
}

.footer-logo .main-icon{
    width:clamp(140px, 45vw, 250px);
    max-width:80%;
    height:auto;
    border-radius:14px;
    background:transparent;
}

.footer-logo .logo-text{
    display:flex;
    align-items:center;
}

.footer-logo .logo-text .mini-icon{
    height:24px;
    width:auto;
    margin:0 5px 0 2px;
}

.footer-logo .link{
    stroke:#ffca05;
    stroke-width:14;
    stroke-linecap:round;
}

.footer-logo .node{
    fill:#ffca05;
}

.footer-logo .node-white{
    fill:#fff;
}

.footer-logo span{
    color:#ffca05;
}

.footer-menu{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:27px;
    margin-bottom:20px;
}

.footer-menu a{
    font-size:16px;
    color:#cfcfd8;
    transition:color .25s;
}

.footer-menu a:hover{
    color:#ffca05;
}

.email{
    color:#c9c9d1;
    font-size:18px;
    margin-bottom:17px;
}

.social{
    display:flex;
    justify-content:center;
    gap:25px;
    font-size:27px;
    margin-bottom:17px;
    color:#fff;
}

.copy{
    color:#e6e6ee;
    font-size:16px;
    border-top:1px solid rgba(255,255,255,.3);
    padding-top:17px;
    margin-top:10px;
    width:100%;
    max-width:700px;
}

/* ================= VIEW ALL MODAL ================= */

.reels-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(7,8,18,.85);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:20px;
}

.reels-modal.open{
    display:flex;
}

.reels-modal-box{
    width:100%;
    max-width:900px;
    max-height:88vh;
    overflow-y:auto;
    background:#0e0f1c;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:20px;
    animation:modalIn .35s ease;
}

@keyframes modalIn{
    from{
        opacity:0;
        transform:scale(.92) translateY(20px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.reels-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.reels-modal-head h3{
    font-size:20px;
}

.reels-modal-close{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    cursor:pointer;
    transition:.25s;
    display:flex;
    align-items:center;
    justify-content:center;
}

.reels-modal-close:hover{
    border-color:#ffca05;
    color:#ffca05;
    transform:rotate(90deg);
}

.reels-modal-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.reels-modal-grid .reel{
    aspect-ratio:9/16;
}

@media(max-width:700px){
    .reels-modal-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:400px){
    .reels-modal-grid{
        grid-template-columns:1fr;
    }
}

/* ================= SCROLL REVEAL ================= */

.reveal{
    opacity:0;
}

.reveal.visible{
    animation:revealIn .6s ease both;
}

@keyframes revealIn{
    from{
        opacity:0;
        transform:translateY(26px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.reel.reveal.visible{animation-delay:.05s}
.reel.reveal:nth-child(2).visible{animation-delay:.12s}
.reel.reveal:nth-child(3).visible{animation-delay:.19s}
.reel.reveal:nth-child(4).visible{animation-delay:.26s}
.reel.reveal:nth-child(5).visible{animation-delay:.33s}

@media(prefers-reduced-motion:reduce){
    .reveal{
        opacity:1;
    }
}

.live-card,
.community,
.steps,
.download{
    transition:transform .25s ease, box-shadow .25s ease;
}

.live-card{
    transform-style:preserve-3d;
    transition:transform .12s ease-out, box-shadow .25s ease;
    will-change:transform;
}

.live-card:hover,
.community:hover,
.steps:hover,
.download:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.reel{
    transition:transform .3s ease;
}

.reel:hover{
    transform:scale(1.04);
}

.tag{
    transition:.25s;
    cursor:default;
}

.tag:hover{
    background:#ffca05;
    color:#171717;
}

.banner img{
    animation:none;
}

.download{
    animation:cardGlow 3.5s ease-in-out infinite;
}

@keyframes cardGlow{
    0%,100%{
        box-shadow:0 10px 40px rgba(146,32,76,.25);
        border-color:rgba(255,202,5,.25);
    }
    50%{
        box-shadow:0 10px 55px rgba(255,54,167,.4);
        border-color:rgba(255,202,5,.55);
    }
}

.live-card.reveal.visible:nth-child(2){
    animation-delay:.15s;
}

.community.reveal.visible{
    animation-delay:.1s;
}

.download.reveal.visible{
    animation-delay:.1s;
}

.steps.reveal.visible{
    animation-delay:.1s;
}

@media(prefers-reduced-motion:reduce){
    .reveal{
        opacity:1;
    }

    .banner img,
    .download{
        animation:none;
    }
}

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

.live-tag{
    animation:livePulse 1.6s ease-in-out infinite;
}

@keyframes livePulse{
    0%,100%{
        box-shadow:0 0 0 0 rgba(255,49,80,.55);
    }
    50%{
        box-shadow:0 0 0 8px rgba(255,49,80,0);
    }
}

.stat-icon{
    animation:floatY 3.2s ease-in-out infinite;
}

.stats div:nth-child(2) .stat-icon{
    animation-delay:.4s;
}

.stats div:nth-child(3) .stat-icon{
    animation-delay:.8s;
}

@keyframes floatY{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-6px);
    }
}

.download-buttons .install{
    position:relative;
    overflow:hidden;
    animation:btnGlow 2.4s ease-in-out infinite;
}

@keyframes btnGlow{
    0%,100%{
        box-shadow:0 6px 24px rgba(255,202,5,.4);
    }
    50%{
        box-shadow:0 6px 38px rgba(255,202,5,.8);
    }
}

.download-buttons .install::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:55%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);
    transform:skewX(-20deg);
    animation:shine 2.8s ease-in-out infinite;
}

@keyframes shine{
    0%{
        left:-120%;
    }
    60%,100%{
        left:150%;
    }
}

.install .arrow-down{
    display:inline-block;
    animation:bounceDown 1.6s ease-in-out infinite;
}

@keyframes bounceDown{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(6px);
    }
}

.watch{
    animation:watchGlow 2.2s ease-in-out infinite;
}

@keyframes watchGlow{
    0%,100%{
        box-shadow:0 0 0 0 rgba(162,124,25,.5);
    }
    50%{
        box-shadow:0 0 0 6px rgba(162,124,25,0);
    }
}

@media(prefers-reduced-motion:reduce){
    .live-tag,
    .stat-icon,
    .download-buttons .install::after,
    .install .arrow-down,
    .watch,
    .tag,
    .download-buttons .install,
    .hero-title span,
    .hero-heading span{
        animation:none;
    }
}

/* ================= MOUSE RESPONSIVE ================= */

.store{
    transition:transform .25s, border-color .25s, box-shadow .25s;
}

.store:hover{
    transform:translateY(-4px) scale(1.03);
    border-color:#ffca05;
    box-shadow:0 10px 24px rgba(255,202,5,.22);
}

.store:hover svg{
    animation:storeBounce .4s ease;
}

@keyframes storeBounce{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-3px); }
    100%{ transform:translateY(0); }
}

.watch{
    transition:transform .25s, background .25s, color .25s;
}

.watch:hover{
    transform:translateY(-2px);
}

.navbar .install:hover{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 8px 24px rgba(255,202,5,.5);
}

.reel{
    transition:transform .3s ease, box-shadow .3s ease;
}

.reel:hover{
    transform:scale(1.04);
    box-shadow:0 14px 34px rgba(0,0,0,.5);
}

.reel:hover .reel-mute{
    border-color:#ffca05;
}

.reel .reel-user span{
    transition:color .25s;
}

.reel:hover .reel-user span{
    color:#ffca05;
}

.view{
    transition:border-color .25s, color .25s, background .25s, box-shadow .25s;
}

.view:hover{
    border-color:#ffca05;
    color:#ffca05;
    box-shadow:0 0 18px rgba(255,202,5,.25);
}

.avatar{
    transition:border-color .25s, transform .25s;
    border:1px solid transparent;
}

.live-card:hover .avatar{
    border-color:#ffca05;
    transform:scale(1.12);
}

.footer-menu a{
    transition:color .25s;
    position:relative;
}

.footer-menu a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:#ffca05;
    transition:width .25s;
}

.footer-menu a:hover{
    color:#ffca05;
}

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

.email{
    transition:color .25s;
}

.email:hover{
    color:#ffca05;
}

.social a{
    cursor:pointer;
    transition:transform .25s, color .25s, text-shadow .25s;
    display:inline-block;
    color:#fff;
}

.social a svg{
    width:27px;
    height:27px;
    fill:currentColor;
}

.social a:hover{
    color:#ffca05;
    transform:translateY(-4px) scale(1.2);
    text-shadow:0 0 16px rgba(255,202,5,.6);
}

.footer-logo{
    cursor:pointer;
    transition:opacity .25s, transform .25s;
}

.footer-logo:hover{
    opacity:.85;
    transform:scale(1.03);
}

.reels-modal-grid .reel{
    transition:transform .3s ease, box-shadow .3s ease;
}

.reels-modal-grid .reel:hover{
    transform:scale(1.02);
    box-shadow:0 14px 34px rgba(0,0,0,.55);
}

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

@media(max-width:850px){

    .container,
    .nav-inner{
        width:94%;
    }

    .navbar{
        height:auto;
        min-height:60px;
    }

    .nav-inner{
        flex-wrap:wrap;
        padding:8px 0;
        gap:8px;
        position:relative;
        justify-content:flex-end;
    }

    /* Centered logo on mobile */
    .logo{
        font-size:18px;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }

    .logo .main-icon{
        width:96px;
        height:auto;
        border-radius:8px;
    }

    .logo .logo-text .mini-icon{
        height:17px;
    }

    .menu{
        display:none;
    }

    .nav-toggle{
        display:flex;
        margin-left:auto;
    }

    .nav-inner .install{
        display:none;
    }

    .hero{
        height:auto;
        min-height:calc(100vh - 72px);
        width:100vw;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
        padding:52px 20px;
        text-align:center;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        border-radius:0;
        background:
            linear-gradient(180deg,rgba(7,8,18,.9) 0%,rgba(7,8,18,.82) 100%),
            url("../images/banner_image_panel.png");
        background-size:cover;
        background-position:center;
        box-shadow:inset 0 -60px 80px -30px #070812;
    }

    .hero::before,
    .hero::after{
        display:none;
    }

    .hero-left{
        padding:0 20px;
        min-width:0;
        width:100%;
        flex:none;
    }

    .hero-title{
        font-size:44px;
        margin-bottom:12px;
    }

    .hero-logo{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-heading{
        font-size:26px;
        margin-bottom:14px;
    }

    .hero-text{
        width:100%;
        max-width:440px;
        margin:0 auto 24px;
        font-size:15px;
        line-height:1.6;
    }

    .stores{
        justify-content:center;
        flex-wrap:wrap;
        gap:11px;
    }

    .store{
        width:150px;
    }

    .live{
        grid-template-columns:1fr;
        gap:14px;
        margin-bottom:36px;
    }

    .live-card{
        height:auto;
        padding:18px;
    }

    .live-info{
        text-align:center;
        padding-top:10px;
        padding-right:0;
        padding-left:0;
    }

    .live-info h2{
        font-size:26px;
        padding-right:0;
    }

    .stats{
        justify-content:center;
        gap:30px;
        padding-right:0;
        padding-bottom:10px;
    }

    .reels{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .reel:nth-child(4){
        display:none;
    }

    .steps{
        padding:0;
        gap:0;
        margin-bottom:45px;
    }

    .steps-image{
        border-radius:14px;
    }

    .arrow{
        display:none;
    }

    .download{
        padding:28px 20px;
        height:auto;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .download-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .media{
        margin-left:0;
        justify-content:flex-start;
        padding:15px 0;
        gap:22px;
        height:auto;
    }

    .media-set{
        gap:22px;
    }

    .media-set img{
        height:34px;
    }

    .footer-text{
        padding:24px 16px;
    }

    .footer-logo{
        font-size:26px;
        margin-bottom:18px;
    }

    .footer-menu{
        gap:14px 20px;
        margin-bottom:16px;
    }

    .social{
        gap:20px;
        font-size:25px;
    }

    .footer-hero{
        display:flex;
        flex-direction:column;
        box-shadow:none;
    }

    .footer-hero img{
        max-height:none;
        height:auto;
        aspect-ratio:auto;
        object-fit:contain;
    }

    .footer-text{
        position:static;
        inset:auto;
        background:#0c0d18;
        padding:28px 18px 24px;
    }

    .footer-menu a{
        font-size:15px;
        padding:6px 4px;
    }
}

@media(max-width:550px){

    .container{
        padding:0 10px;
    }

    .hero{
        padding:44px 18px;
    }

    .hero-title{
        font-size:38px;
    }

    .hero-heading{
        font-size:23px;
    }

    .hero-text{
        font-size:14px;
    }

    .store{
        width:47%;
        height:46px;
    }

    .store .stext strong{
        font-size:12px;
    }

    .store .stext small{
        font-size:8px;
    }

    .banner{
        aspect-ratio:2108/468;
        margin-bottom:36px;
    }

    .live{
        gap:16px;
    }

    .live-card{
        padding:18px;
    }

    .community{
        height:auto;
        padding:20px 15px;
    }

    .community h2{
        font-size:26px;
    }

    .tags{
        flex-wrap:wrap;
        gap:8px;
    }

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

    .reels{
        grid-template-columns:repeat(2,1fr);
        gap:9px;
    }

    .reel:nth-child(3),
    .reel:nth-child(4){
        display:none;
    }

    .reel{
        aspect-ratio:9/16;
    }

    .stats{
        gap:22px;
    }

    .stat-icon{
        width:34px;
        height:34px;
        font-size:15px;
    }

    .stat-number{
        font-size:16px;
    }

    .live-card{
        height:auto;
    }

    .download{
        padding:24px 20px;
    }

    .download p{
        max-width:100%;
    }

    .footer-menu a{
        font-size:16px;
    }
}

@media(max-width:360px){

    .logo{
        font-size:16px;
        letter-spacing:1px;
    }

    .logo .main-icon{
        width:88px;
        height:auto;
        border-radius:8px;
    }

    .logo .logo-text .mini-icon{
        height:15px;
    }

    .nav-inner .install{
        font-size:11px;
        padding:9px 14px;
    }

    .nav-toggle{
        width:38px;
        height:38px;
    }

    .hero{
        padding:34px 15px;
    }

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

    .hero-heading{
        font-size:21px;
    }

    .store{
        width:46%;
    }

    .stores{
        gap:10px;
    }

    .reels{
        grid-template-columns:1fr;
        gap:10px;
    }

    .reel:nth-child(2),
    .reel:nth-child(3),
    .reel:nth-child(4){
        display:none;
    }

    .reel{
        aspect-ratio:9/16;
        max-height:70vh;
    }

    .stats{
        gap:15px;
    }

    .footer-logo{
        font-size:20px;
        letter-spacing:2px;
    }

    .footer-logo .logo-text .mini-icon{
        height:18px;
    }

    .media{
        gap:16px;
    }

    .media-set img{
        height:28px;
    }

    .community{
        padding:16px 12px;
    }

    .community h2{
        font-size:23px;
    }

    .download h2{
        font-size:28px;
    }

    .download-buttons .install,
    .learn{
        padding:12px 22px;
        font-size:13px;
    }

    .live-info h2{
        font-size:22px;
    }

    .stats{
        gap:14px;
    }
}

/* ================= EXTRA SMALL SCREENS ================= */

@media(max-width:480px){

    .nav-inner{
        padding:6px 0;
        gap:6px;
    }

    .logo .main-icon{
        width:88px;
    }

    .nav-toggle{
        width:38px;
        height:38px;
    }

    .mobile-menu a{
        font-size:15px;
        padding:14px 12px;
    }

    .mobile-menu .install{
        font-size:13px;
        padding:13px 14px;
    }

    .hero-title{
        font-size:34px;
    }

    .hero-heading{
        font-size:24px;
    }

    .hero-text{
        font-size:14px;
    }

    .stores{
        gap:10px;
    }

    .store{
        width:48%;
        min-width:0;
        padding:0 10px;
    }

    .store svg{
        width:18px;
        height:18px;
    }

    .store .stext strong{
        font-size:12px;
    }

    .store .stext small{
        font-size:8px;
    }

    .banner{
        aspect-ratio:auto;
        margin-bottom:30px;
    }

    .banner img{
        height:auto;
        object-fit:contain;
    }

    .live{
        padding:12px;
        gap:14px;
    }

    .live-card{
        padding:16px;
        min-height:0;
    }

    .live-info h2{
        font-size:24px;
    }

    .stats{
        gap:18px;
    }

    .stat-icon{
        width:34px;
        height:34px;
        font-size:15px;
    }

    .stat-number{
        font-size:16px;
    }

    .community{
        padding:18px 14px;
        margin-bottom:40px;
    }

    .community h2{
        font-size:24px;
    }

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

    .reel-heading h2{
        font-size:17px;
    }

    .reel-heading .view{
        padding:9px 16px;
        font-size:12px;
    }

    .founding-banner .fb-wrapper{
        padding:30px 16px;
    }

    .founding-banner .fb-middle h2{
        font-size:22px;
    }

    .founding-banner .fb-middle p{
        font-size:13px;
    }

    .founding-banner .fb-btn{
        padding:13px 20px;
        font-size:12px;
        width:100%;
        justify-content:center;
    }

    .founding-banner .fb-info{
        font-size:12px;
    }

    .download h2{
        font-size:26px;
    }

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

    .download-buttons{
        gap:10px;
        flex-direction:column;
        align-items:center;
    }

    .download-buttons .install,
    .download-buttons .learn{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .media{
        gap:14px;
        padding:14px 0;
    }

    .media-set{
        gap:14px;
        padding:0 12px;
    }

    .media-set img{
        height:26px;
    }

    .footer-logo{
        font-size:22px;
        letter-spacing:2px;
    }

    .footer-logo .main-icon{
        width:140px;
    }

    .footer-menu{
        gap:12px 16px;
    }

    .footer-menu a{
        font-size:14px;
        padding:4px;
    }

    .email{
        font-size:16px;
    }

    .copy{
        font-size:14px;
    }

    .reels-modal-box{
        padding:14px;
    }

    .reels-modal-grid{
        gap:8px;
    }
}