*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html{
    font-size:16px;
}

body{
    min-height:100vh;

    background:
        linear-gradient(
            rgba(15,15,15,0.58),
            rgba(15,15,15,0.74)
        ),
        url('background.png');


   background-size:120%;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;

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

    padding:20px;

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

    overflow-x:hidden;

    animation:
        bgZoom 18s ease-in-out infinite alternate;
}

/* =========================
   AMBIENT LIGHT
========================= */

.bg-overlay{
    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,210,120,0.14),
            transparent 30%
        );

    animation:
        ambientGlow 8s ease-in-out infinite;

    pointer-events:none;
}

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

.container{

    width:100%;
    max-width:430px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.88),
            rgba(255,255,255,0.74)
        );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-radius:36px;

    padding:
        clamp(30px, 5vw, 44px)
        clamp(20px, 5vw, 34px);

    text-align:center;

    box-shadow:
        0 24px 70px rgba(0,0,0,0.34),
        inset 0 1px 1px rgba(255,255,255,0.75),
        inset 0 -1px 1px rgba(255,255,255,0.22);

    border:
        1px solid rgba(255,255,255,0.45);

    position:relative;

    overflow:hidden;

    animation:
        pageEnter 1s ease,
        floating 5s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.container:hover{

    transform:
        translateY(-4px)
        scale(1.005);

    box-shadow:
        0 28px 80px rgba(0,0,0,0.38);
}

/* LIGHT EFFECT */

.container::before{

    content:"";

    position:absolute;

    top:-120px;
    left:-120px;

    width:260px;
    height:260px;

    background:
        radial-gradient(
            circle,
            rgba(255,215,120,0.32),
            transparent 72%
        );

    pointer-events:none;
}

/* NOISE */

.container::after{

    content:"";

    position:absolute;
    inset:0;

    opacity:0.04;

    background-image:
        url("https://grainy-gradients.vercel.app/noise.svg");

    pointer-events:none;
}

/* =========================
   LOGO
========================= */

.logo-wrapper{

    position:relative;

    display:flex;
    justify-content:center;

    margin-bottom:26px;
}

.logo-wrapper::before{

    content:"";

    position:absolute;

    width:210px;
    height:210px;

    background:
        radial-gradient(
            circle,
            rgba(255,210,120,0.28),
            transparent 70%
        );

    filter:blur(24px);

    z-index:0;
}

.logo{

    position:relative;
    z-index:1;

    width:min(74vw, 300px);

    max-width:100%;

    transform:
        scale(1.05);

    mix-blend-mode:multiply;

    filter:
        drop-shadow(
            0 14px 28px rgba(0,0,0,0.14)
        );

    animation:fadeIn 1s ease;
}

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

h1{

    font-size:
        clamp(2.4rem, 7vw, 2.9rem);

    margin-bottom:14px;

    color:#2d1c11;

    font-weight:800;

    letter-spacing:-1.5px;
}

.subtitle{

    color:#6f5c48;

    margin-bottom:36px;

    font-size:
        clamp(1rem, 3.8vw, 1.08rem);

    line-height:1.8;

    font-weight:500;

    max-width:320px;

    margin-left:auto;
    margin-right:auto;
}

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

button{
    appearance:none;
    -webkit-appearance:none;
}

.btn{

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

    gap:12px;

    width:100%;

    min-height:68px;

    padding:18px;

    margin-bottom:18px;

    border:none;
    border-radius:24px;

    text-decoration:none;

    font-size:1.08rem;
    font-weight:700;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;

    cursor:pointer;

    user-select:none;

    transform-style:preserve-3d;
}

.btn:hover{

    transform:
        translateY(-4px)
        scale(1.01);
}

.btn:active{
    transform:scale(0.98);
}

/* MAPS BUTTON */

.maps-btn{

    background:
        linear-gradient(
            135deg,
            #dcb276,
            #c79253
        );

    color:white;

    border:
        1px solid rgba(255,255,255,0.18);

    box-shadow:
        0 12px 28px rgba(217,176,123,0.35);
}

/* LED BUTTON */

.led-btn{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #111,
            #242424
        );

    color:#fff7e7;

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.34),
        0 0 28px rgba(255,196,0,0.16);

    animation:
        pulse 2s infinite;
}

.led-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.22),
            transparent
        );

    transform:skewX(-20deg);

    animation:
        shine 3s infinite;
}

.icon{
    font-size:1.35rem;
}

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

.status{

    display:flex;
    flex-direction:column;

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

    gap:10px;

    margin-top:14px;
    margin-bottom:14px;
}

.dot{

    width:15px;
    height:15px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 22px #22c55e,
        0 0 42px rgba(34,197,94,0.45);

    animation:
        pulseDot 1.5s infinite;
}

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

.counter{

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

    gap:12px;

    width:100%;

    padding:
        18px 22px;

    margin-top:2px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.72),
            rgba(255,255,255,0.42)
        );

    border:
        1px solid rgba(255,255,255,0.8);

    backdrop-filter:blur(16px);

    box-shadow:
        0 12px 32px rgba(0,0,0,0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.counter:hover{

    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 16px 36px rgba(0,0,0,0.12);
}

.counter-emoji{

    font-size:1.8rem;

    filter:
        drop-shadow(
            0 0 14px rgba(255,196,0,0.45)
        );
}

.counter-number{

    font-size:2rem;

    font-weight:800;

    color:#c58d45;

    letter-spacing:-1px;

    text-shadow:
        0 0 14px rgba(197,141,69,0.22);
}

.counter-text{

    font-size:1rem;

    font-weight:700;

    color:#5f5144;
}

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

.footer{

    margin-top:22px;

    font-size:0.88rem;

    color:#7b7b7b;

    font-weight:600;
}

/* =========================
   OVERLAY
========================= */

.smile-overlay{

    position:fixed;
    inset:0;

    z-index:9999;

    background:
        radial-gradient(
            circle,
            rgba(255,190,11,0.22),
            rgba(15,23,42,0.96)
        );

    backdrop-filter:blur(10px);

    display:flex;
    flex-direction:column;

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

    overflow:hidden;

    animation:
        overlayFadeIn 0.3s ease;
}

.smile-overlay.hide{
    animation:fadeOut 0.6s ease forwards;
}

.smile-emoji{

    font-size:120px;

    animation:pop 0.6s ease;

    filter:
        drop-shadow(
            0 0 30px rgba(255,200,0,0.7)
        );
}

.smile-text{

    margin-top:20px;

    font-size:30px;

    font-weight:800;

    text-align:center;

    color:white;

    padding:0 20px;

    animation:slideUp 0.7s ease;
}

/* =========================
   CONFETTI
========================= */

.confetti{

    position:absolute;

    width:10px;
    height:18px;

    top:-20px;

    border-radius:4px;

    opacity:0.9;

    animation:
        confettiFall 2.5s linear forwards;
}
/* =========================
   LIVE BADGE
========================= */

.live-badge{

    display:flex;
    align-items:center;
    gap:8px;

    padding:
        8px 14px;

    border-radius:999px;

    background:
        rgba(34,197,94,0.12);

    border:
        1px solid rgba(34,197,94,0.22);

    backdrop-filter:blur(10px);

    box-shadow:
        0 0 20px rgba(34,197,94,0.14);
}

.live-text{

    color:#22c55e;

    font-size:0.82rem;

    font-weight:800;

    letter-spacing:1px;
}

.status-text{

    font-size:1rem;

    font-weight:700;

    color:#5f5144;
}

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

.led-btn.disabled{

    opacity:0.6;

    pointer-events:none;

    animation:none;

    transform:none !important;

    filter:
        grayscale(0.1);

    box-shadow:
        0 4px 14px rgba(0,0,0,0.22);
}

/* =========================
   EXTRA PREMIUM
========================= */

.maps-btn:hover{

    box-shadow:
        0 16px 32px rgba(217,176,123,0.45);
}

.led-btn:hover{

    box-shadow:
        0 16px 36px rgba(0,0,0,0.4),
        0 0 30px rgba(255,196,0,0.24);
}

/* GLASS SHINE */

.counter::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.35),
            transparent
        );

    transform:skewX(-20deg);

    animation:
        shine 5s infinite;
}

.counter{

    position:relative;

    overflow:hidden;
}
/* =========================
   ANIMATIONS
========================= */

@keyframes shine{

    0%{
        left:-120%;
    }

    100%{
        left:140%;
    }
}

@keyframes ambientGlow{

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

    50%{
        opacity:1;
        transform:scale(1.08);
    }

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

@keyframes bgZoom{

    from{
        background-size:100%;
    }

    to{
        background-size:108%;
    }
}

@keyframes pageEnter{

    from{
        opacity:0;

        transform:
            translateY(40px)
            scale(0.96);
    }

    to{
        opacity:1;

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

@keyframes floating{

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

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

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

@keyframes pulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(255,196,0,0.5);
    }

    70%{
        box-shadow:
            0 0 0 16px rgba(255,196,0,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(255,196,0,0);
    }
}

@keyframes pulseDot{

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

    50%{
        transform:scale(1.3);
        opacity:0.7;
    }

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

@keyframes overlayFadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes fadeIn{

    from{
        opacity:0;

        transform:
            translateY(-20px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }
}

@keyframes fadeOut{

    from{
        opacity:1;
    }

    to{
        opacity:0;
    }
}

@keyframes pop{

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

    70%{
        transform:scale(1.15);
    }

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

@keyframes slideUp{

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

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

@keyframes confettiFall{

    0%{
        transform:
            translateY(-10vh)
            rotate(0deg);

        opacity:1;
    }

    100%{
        transform:
            translateY(110vh)
            rotate(720deg);

        opacity:0;
    }
}

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

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

@media (max-width:480px){

    body{

        align-items:flex-start;

        padding-top:14px;
        padding-bottom:14px;
    }

    .container{

        max-width:100%;

        border-radius:28px;

        padding:
            20px 16px;
    }

    .logo-wrapper{

        margin-bottom:14px;
    }

    .logo{

        width:min(48vw, 180px);

        transform:scale(1);
    }

    h1{

        font-size:
            clamp(1.9rem, 6vw, 2.2rem);

        margin-bottom:8px;
    }

    .subtitle{

        font-size:0.94rem;

        line-height:1.6;

        margin-bottom:20px;

        max-width:280px;
    }

    .btn{

        min-height:56px;

        padding:14px;

        font-size:0.98rem;

        border-radius:20px;

        margin-bottom:14px;
    }

    .icon{
        font-size:1.15rem;
    }

    .status{

        gap:8px;

        margin-top:8px;
        margin-bottom:10px;
    }

    .live-badge{

        padding:
            6px 12px;
    }

    .counter{

        gap:8px;

        padding:
            12px 14px;

        border-radius:18px;
    }

    .counter-emoji{

        font-size:1.4rem;
    }

    .counter-number{

        font-size:1.5rem;
    }

    .counter-text{

        font-size:0.92rem;
    }

    .footer{

        margin-top:14px;

        font-size:0.78rem;
    }

    .smile-emoji{

        font-size:88px;
    }

    .smile-text{

        font-size:22px;
    }
}


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

@media (max-height:740px){

    body{

        align-items:flex-start;

        padding-top:10px;
        padding-bottom:10px;
    }

    .container{

        padding:
            18px 14px;
    }

    .logo{

        width:min(42vw, 150px);
    }

    h1{

        font-size:1.8rem;
    }

    .subtitle{

        font-size:0.88rem;

        margin-bottom:16px;
    }

    .btn{

        min-height:52px;

        font-size:0.92rem;

        margin-bottom:12px;
    }

    .counter{

        padding:
            10px 12px;
    }

    .counter-number{

        font-size:1.35rem;
    }

    .counter-text{

        font-size:0.84rem;
    }

    .footer{

        margin-top:10px;
    }
}
/* =========================
   MOBILE BACKGROUND FIX
========================= */

@media (max-width:480px){

    body{

        background:
            linear-gradient(
                rgba(15,15,15,0.58),
                rgba(15,15,15,0.74)
            ),
            url('background.png');

        background-size:220% !important;

        background-position:center center !important;

        background-repeat:no-repeat;

        background-attachment:scroll !important;

        animation:none;
    }
}