/* ---------- GENERAL ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    background:
radial-gradient(circle at top left,#EAF7FF 0%,transparent 35%),
radial-gradient(circle at bottom right,#FFDDF1 0%,transparent 40%),
linear-gradient(135deg,#F8FBFF,#FFF5FB);

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

}

main{

    opacity:0;

    transition:opacity .6s ease;

}

/* ---------- HERO ---------- */

.hero h1{

    font-family:'Pacifico', cursive;

    font-size:92px;

    font-weight:400;

    color:#6B67F6;

    margin-bottom:10px;

}

.hero h2{

    font-size:34px;

    color:#5F73E5;

    margin-bottom:25px;

}

.hero p{

    font-size:20px;

    color:#666;

    line-height:1.8;

    max-width:500px;

    margin-bottom:35px;

}

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    max-width:1400px;

    margin:auto;

    padding:80px;

    position:relative;
    
    overflow:hidden;

    gap:40px;

}

.hero-left{

    margin-top:80px;

}

.hero-right{

    flex:1;

}

.hero-left{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image{

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

    transition:transform .18s ease-out;
    will-change:transform;

}

.hero-float{

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

}

@keyframes float{

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

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

}

/* ---------- BUTTONS ---------- */

.button{

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

    gap:10px;

    padding:20px 48px;

    border-radius:999px;

    text-decoration:none;

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

    color:white;

    background:
        linear-gradient(
            135deg,
            #8FAEFF 0%,
            #B7A7FF 50%,
            #F8A9D7 100%
        );

    background-size:200% 200%;

    box-shadow:
        0 12px 28px rgba(107,103,246,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-position .45s ease;

    position:relative;

    overflow:hidden;

}

.button:hover{

    background-position:right center;

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

    box-shadow:
        0 20px 40px rgba(107,103,246,.30);

}

.button:active{

    transform:
        translateY(-1px)
        scale(.97);

    box-shadow:
        0 8px 18px rgba(107,103,246,.20);

}

.button::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.28) 50%,
            transparent 75%
        );

    transform:translateX(-150%);

    transition:transform .6s ease;

}

.button:hover::before{

    transform:translateX(150%);

}

/* ---------- PRICES ---------- */

.prices{

    max-width:1200px;

    margin:120px auto;

    padding:120px 60px;

    text-align:center;

}

.prices h2{

    font-size:54px;

    color:#6B67F6;

    margin-bottom:15px;

}

.section-subtitle{

    font-size:20px;

    color:#666;

    margin-bottom:50px;

}

.price-card{

    position:relative;
    
    overflow:hidden;

    background:white;

    display:inline-block;

    padding:18px;

    border-radius:30px;

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

    transition:.35s ease;

}

.price-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.18);

    opacity:0;

    transition:.3s ease;

    pointer-events:none;

}

.price-card::after{

    content:"🔍";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%) scale(.8);

    font-size:54px;

    opacity:0;

    transition:.3s ease;

    pointer-events:none;

}

.price-card:hover::before{

    opacity:1;

}

.price-card:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

.price-card:hover{

    cursor:pointer;
    
    transform:translateY(-6px);

    box-shadow:0 30px 60px rgba(110,110,255,.18);

}

.price-image{

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

    border-radius:20px;

    transition:all .35s ease;

    border-radius:18px;

    border:2px solid rgba(255,255,255,.7);
}

.price-info{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:40px;

    font-weight:600;

    color:#666;

}

/* ---------- IMAGE MODAL ---------- */

.image-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

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

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

    z-index:2000;

}

.image-modal.show{

    opacity:1;
    visibility:visible;

}

.modal-image{

    max-width:90%;
    max-height:90%;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

    transform:scale(.9);

    transition:.3s ease;

}

.image-modal.show .modal-image{

    transform:scale(1);

}

.close-modal{

    position:absolute;

    top:30px;
    right:40px;

    color:white;

    font-size:48px;

    cursor:pointer;

    transition:.25s;

    user-select:none;

}

.close-modal:hover{

    transform:scale(1.15);

}

/* ---------- ORDER ---------- */

.order{

    max-width:1200px;
    margin:140px auto;
    padding:0 40px;
    text-align:center;

}

.order h2{

    font-size:54px;
    color:#6B67F6;
    margin-bottom:15px;

}

.order .section-subtitle{

    color:#666;
    font-size:20px;
    margin-bottom:70px;

}

/* Row */

.order-flow{

    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:70px;

}

/* Each step */

.order-step{

    width:200px;

}

.step-number{

    width:38px;
    height:38px;

    margin:0 auto 18px;

    border-radius:50%;

    background:white;

    color:#6B67F6;

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

    font-weight:bold;

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

}

.step-card{

    background:white;

    border-radius:22px;

    padding:24px 18px;

    box-shadow:0 18px 40px rgba(0,0,0,.07);

    transition:.3s;

}

.step-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(120,120,255,.18);

}

.step-icon{

    font-size:40px;

    margin-bottom:18px;

}

.step-card h3{

    color:#5F73E5;

    font-size:24px;

    margin-bottom:15px;

}

.step-card p{

    color:#666;

    line-height:1.6;

    font-size:16px;

}

/* Arrows */

.step-arrow{

    font-size:34px;

    color:#A8A3FF;

    margin-top:120px;

}

/* Button */

.order-button{

    padding:24px 60px;

    font-size:24px;
}

.order-button:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(120,120,255,.28);

}

/* ---------- SUPPORT ---------- */

.support-section{

    max-width:1100px;
    margin:140px auto;
    padding:0 40px;

}

.support-card{

    background:white;

    border-radius:30px;

    padding:45px;

    display:flex;

    align-items:center;

    gap:50px;

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

}

.support-chibi-wrapper{

    position:relative;

    width:380px;

    flex-shrink:0;

}

.support-chibi{

    width:380px;

    flex-shrink:0;

    transition:.35s;

}

.support-chibi:hover{

    transform:translateY(-10px) rotate(-3deg);

}

.support-content{

    flex:1;

}

.support-content h2{

    font-size:40px;

    color:#6B67F6;

    margin-bottom:20px;

}

.support-content p{

    font-size:18px;

    color:#666;

    line-height:1.8;

    margin-bottom:18px;

}

.support-button{

    margin-top:25px;

    padding:16px 38px;
}

.support-button:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 38px rgba(107,103,246,.35);

}

.heart-particle{

    position:absolute;

    pointer-events:none;

    opacity:0;

    animation:heartFloat 1.8s ease-out forwards;

}

.heart-particle img{

    width:100%;
    height:100%;
    display:block;

}

@keyframes heartFloat{

    0%{
        transform:
            translateY(0)
            scale(.5)
            rotate(0deg);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        transform:
            translateY(-80px)
            translateX(var(--drift))
            scale(1.15)
            rotate(var(--rotate));

        opacity:0;
    }

}

/* ---------- FOOTER ---------- */

.footer{

    position:relative;

    margin-top:170px;

    padding:90px 40px 70px;

    overflow:hidden;

}

.footer-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.footer h2{

    font-family:'Pacifico',cursive;

    font-size:56px;

    color:#6B67F6;

    margin-bottom:12px;

}

.footer-subtitle{

    font-size:22px;

    color:#5F73E5;

    font-weight:600;

}

.footer-text{

    margin-top:22px;

    color:#666;

    font-size:18px;

    line-height:1.8;

}

.footer-divider{

    width:220px;

    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #D6C8FF,
        transparent
    );

    margin:45px auto;

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

}

.footer-links a{

    color:#666;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.footer-links a:hover{

    color:#6B67F6;

}

.copyright{

    margin-top:40px;

    color:#999;

    font-size:14px;

}

.footer-chibi{

    position:absolute;

    right:35px;

    bottom:0;

    width:170px;

    height:210px;

}

.footer-body{

    position:absolute;

    bottom:0;

    right:0;

    width:170px;

}

.footer-arm{
    position:absolute;

    width:30px;
    
    right:90px;
    bottom:30px;

    transform-origin:90% 90%;

    animation:wave 3.5s ease-in-out infinite;
}

@keyframes wave{

    0%,100%{
        transform:rotate(0deg);
    }

    15%{
        transform:rotate(-10deg);
    }

    30%{
        transform:rotate(8deg);
    }

    45%{
        transform:rotate(-8deg);
    }

    60%{
        transform:rotate(5deg);
    }

    75%{
        transform:rotate(-3deg);
    }
}

/* ===========================
   TABLETS
=========================== */

@media (max-width: 1100px){

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

.hero-right{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-left{
    margin-top:30px;
}

.hero-left img{
    max-width:550px;
}

.hero h1{
    font-size:72px;
}

.hero h2{
    font-size:30px;
}

.hero p{
    max-width:700px;
}

.support-card{
    flex-direction:column;
    text-align:center;
}

.support-chibi{
    width:300px;
}

.footer-wave{
    width:130px;
}

}

/* ===========================
   PHONES
=========================== */

@media (max-width: 700px){

.hero{
    padding:40px 20px;
}

.hero h1{
    font-size:54px;
}

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

.hero p{
    font-size:17px;
}

.hero-left img{
    max-width:360px;
}

button,
.order-button,
.support-button{

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

}

.prices{
    padding:80px 20px;
}

.prices h2,
.order h2{
    font-size:40px;
}

.price-image{
    max-width:100%;
}

.price-info{
    flex-direction:column;
    gap:14px;
}

.order-flow{
    flex-direction:column;
    align-items:center;
}

.step-arrow{
    transform:rotate(90deg);
    margin:0;
}

.support-section{
    padding:0 20px;
}

.support-card{
    padding:30px 20px;
}

.support-chibi{
    width:220px;
}

.footer-wave{
    width:95px;
    right:10px;
    bottom:10px;
}

.footer-links{
    flex-direction:column;
    gap:12px;
}

    .loader-chibi{

        width:130px;

    }

    .loader-text{

        font-size:20px;

    }

    .loader-paws{

        font-size:20px;

    }

}

/* ---------- SCROLL REVEAL ---------- */

.reveal{

    opacity:0;
    transform:translateY(30px);

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

    will-change:opacity, transform;

}

.reveal.visible{

    opacity:1;
    transform:translateY(0);

}

/* ---------- BACK TO TOP ---------- */

.back-to-top{

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

    line-height:1;

    position:fixed;

    left:28px;
    bottom:28px;

    width:64px;
    height:64px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    font-size:28px;

    background:linear-gradient(
        135deg,
        #8FAEFF,
        #F8A9D7
    );

    color:white;

    box-shadow:
        0 12px 30px rgba(107,103,246,.25);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(20px)
        scale(.85);

    transition:
        .35s ease;

    z-index:999;

}

.back-to-top.show{

    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}

.back-to-top:hover{

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

    box-shadow:
        0 18px 40px rgba(107,103,246,.35);

}

.back-to-top:active{

    transform:scale(.95);

}

/* ---------- CUSTOM SCROLLBAR ---------- */

/* Chrome, Edge, Opera */

::-webkit-scrollbar{

    width:14px;

}

::-webkit-scrollbar-track{

    background:rgba(255,255,255,.45);

    border-radius:999px;

}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #8FAEFF,
            #B7A7FF,
            #F8A9D7
        );

    border-radius:999px;

    border:3px solid rgba(255,255,255,.65);

    transition:.3s;

}

::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            #7A9EFF,
            #A88FFF,
            #F48CCB
        );

}

html{

    scrollbar-width:thin;

    scrollbar-color:#B7A7FF rgba(255,255,255,.4);

}

::-webkit-scrollbar-track{

    background:rgba(255,255,255,.25);

    backdrop-filter:blur(6px);

    border-radius:999px;

}

/* ---------- BACKGROUND PAWS ---------- */

.bg-paw{

    position:absolute;

    pointer-events:none;

    user-select:none;

    z-index:0;

    opacity:.06;

}

.hero-left,
.hero-right{

    position:relative;
    z-index:2;

}

.hero-paw-big{

    width:clamp(280px,38vw,650px);

    left:-8%;
    top:6%;

}

.hero-paw-top{

    width:clamp(55px,5vw,95px);

    right:6%;
    top:18%;

}

.hero-paw-bottom{

    width:clamp(55px,5vw,95px);

    left:5%;
    bottom:8%;

}

.prices{

    position:relative;

}

.prices-paw{

    width:clamp(220px,28vw,420px);

    left:-6%;
    top:180px;

    opacity:.04;

}

.order{

    position:relative;

}

.order-paw1{

    width:70px;

    left:8%;
    top:120px;

}

.order-paw2{

    width:60px;

    right:12%;
    top:340px;

}

.order-paw3{

    width:80px;

    left:48%;
    bottom:40px;

}

.support-section{

    position:relative;

}

.support-paw{

    width:clamp(240px,30vw,460px);

    right:-5%;
    top:60px;

    opacity:.04;

}

.footer-paw1{

    width:40px;

    left:20%;
    bottom:80px;

}

.footer-paw2{

    width:30px;

    left:24%;
    bottom:40px;

}

/* Decorative paws on phones */

.hero-paw-big{

    width:240px;

    left:-18%;
    top:10%;

}

.hero-paw-top{

    width:55px;

    right:5%;
    top:10%;

}

.hero-paw-bottom{

    width:45px;

    left:5%;
    bottom:5%;

}

.prices-paw,
.support-paw{

    width:180px;

    opacity:.025;

}

.order-paw1,
.order-paw2,
.order-paw3{

    width:40px;

    opacity:.05;

}

.footer{
    position:relative;
}

@media (max-width: 480px){

    .footer-chibi{
        display: none;
    }

}

/* ---------- TEXT SELECTION ---------- */

::selection{

    background:#BFD9FF;

    color:#4A4A4A;

}

::-moz-selection{

    background:#BFD9FF;

    color:#4A4A4A;

}

/* ---------- FOOTER HEARTS ---------- */

.footer-heart{

    position:absolute;

    pointer-events:none;

    opacity:0;

    animation:footerHeartFloat 3s ease-out forwards;

}

.footer-heart img{

    width:100%;
    height:100%;
    display:block;

}

@keyframes footerHeartFloat{

    0%{

        transform:
            translateY(0)
            scale(.4)
            rotate(0deg);

        opacity:0;

    }

    15%{

        opacity:.8;

    }

    80%{

        opacity:.5;

    }

    100%{

        transform:
            translateY(-90px)
            translateX(var(--drift))
            scale(.9)
            rotate(var(--rotate));

        opacity:0;

    }

}

/* ---------- LOADER ---------- */

.loader{

    position:fixed;

    inset:0;

    display:flex;

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

    background:
    linear-gradient(135deg,#F8FBFF,#FFF5FB);

    z-index:9999;

    transition:
        opacity .6s ease,
        visibility .6s ease;

    cursor:progress;
}

.loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    text-align:center;

    opacity:0;

    transition:opacity .35s ease;

}

.loader-chibi{

    object-fit:contain;

    width:270px;
    height:auto;

    user-select:none;

    pointer-events:none;

    opacity:0;

    transition:opacity .25s ease;

    animation:loaderFloat 3s ease-in-out infinite;

}

.loader-text{

    margin-top:15px;

    color:#6B67F6;

    font-weight:600;

    font-size:18px;

}

.loader-paws{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:18px;

    margin:25px 0;

}

.loader-paw{

    width:26px;

    opacity:0;

    transform:translateY(10px) scale(.8);

    animation:loaderStep 1.2s infinite;

}

.loader-paw:nth-child(2){

    animation-delay:.2s;

}

.loader-paw:nth-child(3){

    animation-delay:.4s;

}

.loader-paw:nth-child(4){

    animation-delay:.6s;

}

@keyframes loaderStep{

    0%,100%{

        opacity:0;

        transform:translateY(10px) scale(.8);

    }

    40%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

    70%{

        opacity:.5;

    }

}

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

    .loader-chibi,
    .loader-paw{

        animation:none;

    }

}

@keyframes loaderFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}