/* ===========================
RESET
=========================== */

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

html{
    scroll-behavior:smooth;box-shadow:0 12px 30px rgba(0,0,0,.05);
}

body{

   background:
        radial-gradient(circle at top left,
            rgba(223,212,255,.45) 0%,
            transparent 35%),

        radial-gradient(circle at top right,
            rgba(255,230,215,.35) 0%,
            transparent 40%),

        linear-gradient(
            180deg,
            #FCFBF9 0%,
            #F6F1EA 100%
        );

    color:#1C1C1C;

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

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ===========================
LAYOUT
=========================== */

.container{

    max-width:430px;

    margin:0 auto;

    padding:24px 20px 70px;

}

section{

    margin-bottom:64px;

}

/* ===========================
HEADER
=========================== */

.header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.logo-circle{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    font-weight:700;.header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:42px;

}

}

.header-text{

    display:flex;

    flex-direction:column;

}

.header-name{

    font-size:20px;

    font-weight:700;

}

.header-role{

    font-size:14px;

    color:#7a7a7a;

}

.report-preview{

    padding:60px 20px;
    text-align:center;

}

.report-preview h2{

    font-size:32px;
    margin-bottom:10px;

}

.preview-text{

    color:#666;
    margin-bottom:30px;

}

.preview-slider{

    display:flex;
    gap:16px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    padding-bottom:10px;

}

.preview-slider::-webkit-scrollbar{

    display:none;

}

.preview-slider img{

    width:240px;

    flex-shrink:0;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    scroll-snap-align:center;

}

.preview-note{

    margin-top:20px;

    font-size:13px;

    color:#8A8A8A;

    text-align:center;

    line-height:1.6;

}

.report-preview{

    padding:60px 20px;
    text-align:center;

}

.report-preview h2{

    font-size:32px;
    margin-bottom:10px;
    color:#1f2937;

}

.preview-text{

    color:#6b7280;
    margin-bottom:30px;
    font-size:16px;

}

.preview-slider{

    display:flex;
    gap:16px;

    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    padding:10px 0 20px;

}

.preview-slider::-webkit-scrollbar{

    display:none;

}

.preview-slider img{

    width:240px;
    flex-shrink:0;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    scroll-snap-align:center;

    transition:.3s;

}

.preview-slider img:hover{

    transform:scale(1.03);

}

.preview-note{

    margin-top:15px;

    font-size:13px;

    color:#8A8A8A;

    line-height:1.6;

}

/* ===========================
TYPOGRAPHY
=========================== */

h1{

    font-size:34px;

    line-height:1.15;

    font-weight:800;

    text-align:center;

    margin-bottom:22px;

    margin-top:0;

}

.subtitle{

    font-size:17px;

    line-height:1.65;

    text-align:center;

    color:#666;

    margin-bottom:36px;

}

h2{

    font-size:30px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:24px;

}

h3{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

}

p{

    font-size:17px;

    line-height:1.7;

}

/* ===========================
WHAT YOU GET
=========================== */

.what-you-get{

    background:#ffffff;

    border-radius:24px;

    padding:26px;

    border:1px solid rgba(255,255,255,.8);

box-shadow:
    0 12px 40px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.8);

    margin-bottom:36px;

}

.what-you-get ul{

    list-style:none;

}

.what-you-get li{

    font-size:19px;

    padding:14px 0;

    border-bottom:1px solid #EFEFEF;

}

.what-you-get li:last-child{

    border-bottom:none;

}
/* ===========================
ORDER FORM
=========================== */

.order-card{

    background:#ffffff;

    border-radius:24px;

    padding:28px;

    box-shadow:0 16px 40px rgba(0,0,0,.06);

}

.order-card h2{

    text-align:center;

    margin-bottom:30px;

}

.order-card form{

    display:flex;

    flex-direction:column;

}

.order-card label{

    font-size:15px;

    font-weight:600;

    margin-bottom:10px;

    color:#444;

}

.optional{

    color:#999;

    font-weight:400;

}

.order-card input{

    width:100%;

    height:58px;

    border:1px solid #E7E7E7;

    border-radius:14px;

    padding:0 18px;

    font-size:17px;

    margin-bottom:22px;

    background:#FAFAFA;

    transition:.2s;

}

.order-card input:focus{

    outline:none;

    border-color:#111;

    background:#fff;

}

.price-box{

    text-align:center;

    margin:10px 0 26px;

}

.old-price{

    font-size:24px;

    color:#A0A0A0;

    text-decoration:line-through;

    margin-bottom:8px;

}

.offer{

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#666;

    margin-bottom:8px;

}

.new-price{

    font-size:52px;

    font-weight:800;

    line-height:1;

    margin-bottom:18px;

}

.cta-button{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    background:#111;

    color:#fff;

    font-size:19px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.cta-button:active{

    transform:scale(.98);

}

.secure{

    margin-top:18px;

    text-align:center;

    font-size:15px;

    color:#777;

}

/* ===========================
SECTION SUBTITLE
=========================== */

.section-subtitle{

    text-align:center;

    color:#777;

    margin-bottom:24px;

    font-size:17px;

    line-height:1.6;

}
/* ===========================
REVIEWS
=========================== */

.reviews-slider{

    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    padding-bottom:10px;

    margin-top:28px;

}

.reviews-slider::-webkit-scrollbar{

    display:none;

}

.reviews-slider img{

    width:290px;

    border-radius:22px;

    flex-shrink:0;

    scroll-snap-align:start;

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    background:#fff;

}

/* ===========================
REPORT EXAMPLES
=========================== */

.report-slider{

    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    padding-bottom:10px;

    margin-top:28px;

}

.report-slider::-webkit-scrollbar{

    display:none;

}

.report-slider img{

    width:220px;

    border-radius:18px;

    flex-shrink:0;

    scroll-snap-align:start;

    background:#fff;

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

}

/* ===========================
BENEFITS
=========================== */

.benefits{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.benefit-card{

    background:#ffffff;

    border-radius:20px;

    padding:24px;

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.benefit-card h3{

    margin-bottom:12px;

    font-size:21px;

}

.benefit-card p{

    color:#666;

    font-size:16px;

    line-height:1.7;

}

.benefits .cta-button{

    margin-top:16px;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

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

footer{

    margin-top:70px;

    padding-top:34px;

    border-top:1px solid #E8E8E8;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:30px;

}

.footer-links a{

    color:#555;

    text-decoration:none;

    font-size:16px;

    transition:.2s;

}

.footer-links a:hover{

    color:#111;

}

.copyright{

    text-align:center;

    color:#999;

    font-size:14px;

    line-height:1.6;

}

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

@media (max-width:390px){

    .container{

        padding:22px 18px 60px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:19px;

    }

    .subtitle{

        font-size:18px;

    }

    .what-you-get li{

        font-size:18px;

    }

    .order-card{

        padding:22px;

    }

    .new-price{

        font-size:46px;

    }

    .cta-button{

        font-size:18px;

        height:60px;

    }

    .reviews-slider img{

        width:260px;

    }

    .report-slider img{

        width:200px;

    }

    .loading-overlay{
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.96);

    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    z-index: 9999;
}



}

.loading-overlay.show{
    display:flex;
}

.loader{

    width:52px;
    height:52px;

    border:4px solid #e5e5e5;
    border-top:4px solid #111;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin-bottom:24px;

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.loading-overlay h2{

    font-size:24px;
    margin-bottom:10px;

}

.loading-overlay p{

    color:#666;

}