/*==================================================
        LEGAL PAGE
==================================================*/

.legal-page{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding:8rem 0 4rem;

    background:
        linear-gradient(
            180deg,
            #F8FCFF 0%,
            #EEF7FF 45%,
            #E6F2FF 100%
        );

}


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

.legal-page .container{

    position:relative;

    z-index:2;

}


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

.legal-hero{

    max-width:820px;

    margin:0 auto 5rem;

    text-align:center;

}


.legal-hero h1{

    margin:.5rem 0 1.2rem;

    font-size:clamp(3rem,5vw,4.5rem);

    font-weight:800;

    line-height:1;

    color:var(--heading-color);

}


.legal-hero h1 span{



    background:
        linear-gradient(
            135deg,
            #4BA8FF,
            #6FC7FF
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


.legal-description{

    max-width:700px;

    margin:0 auto;

    font-size:1.08rem;

    line-height:1.9;

    color:var(--text-color);

}


.legal-updated{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-top:1rem;

    padding:.8rem 1.4rem;

    background:#fff;

    border:1px solid rgba(74,169,255,.12);

    border-radius:999px;

    box-shadow:
        0 10px 30px rgba(74,169,255,.08);

    color:var(--text-color);

    font-size:.95rem;

}


.legal-updated i{

    color:var(--primary-color);

    font-size:1rem;

}


.legal-updated strong{

    color:var(--heading-color);

}


/*==================================================
        FLOATING DECORATIONS
==================================================*/

.legal-moon{

    position:absolute;

    top:95px;

    left:5%;

    width:95px;

    pointer-events:none;

    user-select:none;

    animation:legalFloat 6s ease-in-out infinite;

}


.legal-stars{

    position:absolute;

    width:65px;

    pointer-events:none;

    user-select:none;

    animation:legalTwinkle 5s ease-in-out infinite;

}


.legal-stars-left{

    top:180px;

    left:14%;

}


.legal-stars-right{

    top:220px;

    right:12%;

}


.legal-cloud{

    position:absolute;

    pointer-events:none;

    user-select:none;

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

}


.legal-cloud-top{

    width:140px;

    top:110px;

    right:6%;

}


.legal-cloud-bottom{

    width:140px;

    bottom:120px;

    left:4%;

}


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

.legal-hero{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.legal-hero.revealed{

    opacity:1;

    transform:none;

}
/*==================================================
        LEGAL CONTENT
==================================================*/

.legal-content{

    margin-bottom:5rem;

}

.legal-grid{

    display:grid;

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

    gap:2rem;

}


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

.legal-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:2.2rem;

    background:#fff;

    border:1px solid rgba(74,169,255,.10);

    border-radius:28px;

    box-shadow:
        0 18px 45px rgba(74,169,255,.08);

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

}


.legal-card:hover{

    transform:translateY(-6px);

    border-color:rgba(74,169,255,.22);

    box-shadow:
        0 26px 60px rgba(74,169,255,.14);

}


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

.legal-card-icon{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1.4rem;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #4BA8FF,
            #6FC7FF
        );

    color:#fff;

    font-size:1.55rem;

    box-shadow:
        0 12px 28px rgba(74,169,255,.22);

    transition:
        transform .35s ease;

}


.legal-card:hover .legal-card-icon{

    transform:rotate(-6deg) scale(1.05);

}


/*==================================================
        HEADING
==================================================*/

.legal-card h2{

    margin:0 0 1rem;

    font-size:1.45rem;

    font-weight:700;

    color:var(--heading-color);

}


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

.legal-card p{

    margin:0 0 1.2rem;

    font-size:.96rem;

    line-height:1.9;

    color:var(--text-color);

}


.legal-card strong{

    color:var(--heading-color);

}


/*==================================================
        LIST
==================================================*/

.legal-card ul{

    margin:0;

    padding:0;

    list-style:none;

}

.legal-card li{

    position:relative;

    padding-left:1.8rem;

    margin-bottom:.9rem;

    font-size:.93rem;

    line-height:1.7;

    color:var(--text-color);

}

.legal-card li:last-child{

    margin-bottom:0;

}

.legal-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:.55rem;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#4BA8FF;

    box-shadow:
        0 0 0 4px rgba(74,169,255,.12);

}


/*==================================================
        CONTACT CARD
==================================================*/

.legal-contact-card{

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F9FCFF
        );

}


.legal-contact-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:.5rem;

}


.legal-contact-list div{

    display:flex;

    align-items:flex-start;

    gap:.9rem;

}


.legal-contact-list i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:14px;

    background:#EEF7FF;

    color:var(--primary-color);

    font-size:1rem;

}


.legal-contact-list span{

    line-height:1.7;

    color:var(--text-color);

}


/*==================================================
        CARD REVEAL
==================================================*/

.legal-card{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.legal-card.revealed{

    opacity:1;

    transform:none;

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

@media (max-width:992px){

    .legal-page{

        padding:7rem 0 3rem;

    }

    .legal-hero{

        margin-bottom:4rem;

    }

    .legal-grid{

        grid-template-columns:1fr;

        gap:1.75rem;

    }

    .legal-card{

        padding:2rem;

    }

    .legal-card h2{

        font-size:1.35rem;

    }

    .legal-moon{

        width:75px;

        top:80px;

        left:2%;

    }

    .legal-stars{

        width:50px;

    }

    .legal-cloud-top{

        width:90px;

    }

    .legal-cloud-bottom{

        width:110px;

    }

}



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

@media (max-width:768px){

    .legal-page{

        padding:6.5rem 0 2.5rem;

    }

    .legal-hero{

        margin-bottom:3rem;

    }

    .legal-hero h1{

        font-size:2.6rem;

    }

    .legal-description{

        font-size:1rem;

        line-height:1.8;

    }

    .legal-updated{

        padding:.75rem 1.15rem;

        font-size:.9rem;

    }

    .legal-grid{

        gap:1.5rem;

    }

    .legal-card{

        padding:1.6rem;

        border-radius:24px;

    }

    .legal-card-icon{

        width:60px;

        height:60px;

        font-size:1.35rem;

        border-radius:18px;

    }

    .legal-card h2{

        font-size:1.25rem;

    }

    .legal-card p{

        font-size:.95rem;

    }

    .legal-card li{

        font-size:.92rem;

    }

    .legal-contact-list i{

        width:38px;

        height:38px;

        font-size:.95rem;

    }

    .legal-moon{

        width:60px;

        top:75px;

        left:10px;

    }

    .legal-stars{

        width:42px;

    }

    .legal-stars-right{

        right:8px;

    }

    .legal-stars-left{

        left:8px;

    }

    .legal-cloud-top{

        width:75px;

        right:8px;

    }

    .legal-cloud-bottom{

        width:95px;

        left:8px;

    }

}



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

@media (max-width:576px){

    .legal-hero h1{

        font-size:2.2rem;

    }

    .legal-description{

        font-size:.95rem;

    }

    .legal-updated{

        width:100%;

        justify-content:center;

    }

    .legal-card{

        padding:1.4rem;

    }

    .legal-card-icon{

        width:56px;

        height:56px;

        font-size:1.25rem;

    }

    .legal-card h2{

        font-size:1.18rem;

    }

    .legal-card p{

        font-size:.9rem;

    }

    .legal-card li{

        font-size:.88rem;

        padding-left:1.5rem;

    }

    .legal-contact-list{

        gap:.8rem;

    }

}



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

@keyframes legalFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}



@keyframes legalCloud{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(12px);

    }

}



@keyframes legalTwinkle{

    0%,100%{

        transform:scale(1);

        opacity:.9;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

}



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

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

    .legal-card,

    .legal-hero,

    .legal-moon,

    .legal-cloud,

    .legal-stars{

        animation:none !important;

        transition:none !important;

        transform:none !important;

        opacity:1 !important;

    }

}