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

body{
    font-family:'Poppins', sans-serif;
    background:#0b0b0f;
    color:#fff;
}

/* NAVBAR */
.lz-navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 60px;
}

.lz-logo{
    font-size:24px;
    font-weight:700;
    color:#f5c542;
    letter-spacing:2px;
}

.lz-btn{
    background:#f5c542;
    border:none;
    padding:10px 20px;
    border-radius:25px;
    font-weight:600;
    cursor:pointer;
}

/* HERO */
.lz-hero{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:80px 60px;
    min-height:90vh;
    overflow:hidden;

    background:
    radial-gradient(circle at 20% 30%, #7a3cff33, transparent 40%),
    radial-gradient(circle at 80% 70%, #00cfff33, transparent 40%),
    linear-gradient(120deg, #050507, #0b0b0f, #111018);
}

/* TEXT */
.lz-content{
    max-width:500px;
}

.lz-content, .qr-box{
    position:relative;
    z-index:2;
}

.lz-content h1{
    font-size:52px;
    line-height:1.2;
}

.lz-content p{
    margin:20px 0;
    color:#ccc;
}

/* BUTTON */
.lz-scan-btn{
    background:linear-gradient(45deg, #f5c542, #ffde7a);
    border:none;
    padding:15px 30px;
    border-radius:30px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.lz-scan-btn:hover{
    transform:scale(1.05);
}

/* SCANNER */
#reader{
    width:350px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 0 40px rgba(245,197,66,0.3);
}

/* RESPONSIVE */
@media(max-width:900px){
    .lz-hero{
        flex-direction:column;
        gap:40px;
        text-align:center;
    }

    #reader{
        width:100%;
    }
}

.qr-note{
    margin-top:20px;
    color:#f5c542;
    font-size:14px;
}

/* QR Box Center */
.qr-box{
    display:flex;
    justify-content:center;
    align-items:center;
}

#qrCanvas{
    background:#fff;
    padding:20px;
    border-radius:20px;
    box-shadow:0 0 60px rgba(245,197,66,0.4);
}

/* AI ORB */
.lz-hero::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle, #f5c54255, transparent 70%);
    top:10%;
    right:10%;
    filter:blur(40px);
    animation:floatOrb 6s ease-in-out infinite;
}

.lz-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:radial-gradient(circle, #00cfff44, transparent 70%);
    bottom:10%;
    left:10%;
    filter:blur(40px);
    animation:floatOrb 8s ease-in-out infinite;
}

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

/* PARTICLES */
.lz-particles{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:0;
}

.lz-particles span{
    position:absolute;
    width:6px;
    height:6px;
    background:#f5c542;
    border-radius:50%;
    opacity:0.6;
    animation:moveParticles 10s linear infinite;
}

@keyframes moveParticles{
    0%{
        transform:translateY(100vh);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-10vh);
        opacity:0;
    }
}

/* QR GLOW */
.qr-box{
    position:relative;
}

.qr-box::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border-radius:20px;
    border:2px solid #f5c542;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{ transform:scale(1); opacity:0.7; }
    100%{ transform:scale(1.2); opacity:0; }
}

.lz-content h1{
    font-size:52px;
    line-height:1.2;
    text-shadow:0 0 20px rgba(255,255,255,0.1);
}

@media(max-width:768px){
    .lz-navbar{
        padding:20px;
    }

    .lz-hero{
        padding:40px 20px;
    }

    .lz-content h1{
        font-size:34px;
    }
}

/* TRAVEL SVG BACKGROUND */
.lz-travel-bg{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:0;
}

/* COMMON */
.lz-travel-bg svg{
    position:absolute;
    opacity:0.18;
}

/* ✈️ FLIGHT PATH */
.lz-flight-path{
    width:100%;
    top:0;
    left:0;
    opacity:0.2;
}

/* ✈️ PLANE FOLLOW PATH */
.lz-plane{
    width:60px;
    position:absolute;
    offset-path: path("M10 250 Q250 50 490 200");
    offset-rotate: auto;
    animation: movePlane 12s linear infinite;
}

@keyframes movePlane{
    0%{ offset-distance: 0%; }
    100%{ offset-distance: 100%; }
}

/* 📍 PIN */
.lz-pin{
    width:50px;
    bottom:12%;
    left:18%;
    animation:pinBounce 3s ease-in-out infinite;
}

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

/* 🧳 BAG */
.lz-bag{
    width:55px;
    top:75%;
    right:12%;
    animation:bagFloat 6s ease-in-out infinite;
}

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

/* 🌍 GLOBE */
.lz-globe{
    width:110px;
    top:12%;
    right:12%;
    animation:globeRotate 25s linear infinite;
    filter:drop-shadow(0 0 10px #f5c54244);
}

@keyframes globeRotate{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}

.lz-travel-bg svg{
    will-change: transform;
}

@media(max-width:768px){

    .lz-navbar{
        padding:20px;
    }

    .lz-hero{
        padding:40px 20px;
        flex-direction:column;
        gap:40px;
        text-align:center;
    }

    .lz-content h1{
        font-size:34px;
    }

    /* Travel SVG sizes */
    .lz-plane{ width:40px; }
    .lz-globe{ width:70px; }
    .lz-pin{ width:35px; }
    .lz-bag{ width:40px; }

}