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

body{
    background:#f5f2fa;
    font-family:Arial, sans-serif;
    color:#111;
}

/* =========================
   INTRO PAGE
========================= */

.intro-wrapper{
    max-width:700px;
    margin:auto;
    padding:12px;
}

.intro-logo{
    background:#fff;
    height:60px;
    border-radius:22px;
    display:flex;
    align-items:center;
    padding:0 22px;
    font-size:20px;
    font-weight:600;
    margin-bottom:18px;
    box-shadow:0 4px 15px rgba(0,0,0,0.05);
}

.intro-card{
    background:#fff;
    border-radius:32px;
    padding:28px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.intro-content{
    text-align:center;
}

.brain-icon{
    font-size:65px;
    margin-bottom:18px;
}

.intro-content h1{
    font-size:52px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:35px;
}

.intro-content h1 span{
    color:#36b85d;
}

.intro-rules{
    max-width:650px;
    margin:auto;
    text-align:left;
}

.rule{
    font-size:24px;
    line-height:1.6;
    margin-bottom:20px;
    color:#666;
}

.rule b,
.rule strong{
    color:#111;
}

.gender-title{
    margin-top:45px;
    margin-bottom:25px;
    font-size:30px;
    font-weight:600;
}

.gender-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
}

.gender-buttons button{
    width:180px;
    height:65px;
    border:none;
    border-radius:18px;
    color:#fff;
    font-size:22px;
    font-weight:700;
    cursor:pointer;
    transition:0.2s;
}

.gender-buttons button:hover{
    transform:translateY(-2px);
}

.male-btn{
    background:linear-gradient(
        45deg,
        #4b86db,
        #5ea2ff
    );
}

.female-btn{
    background:linear-gradient(
        45deg,
        #9346ff,
        #d45cff
    );
}

.avg-score{
    margin-top:35px;
    font-size:18px;
    color:#777;
}

.intro-footer{
    text-align:center;
    margin-top:25px;
    color:#888;
    line-height:1.6;
    font-size:15px;
}

/* =========================
   QUESTION PAGE
========================= */

.question-container{
    max-width:900px;
    margin:auto;
    padding:12px;
}

.card{
    
    border-radius:32px;
    padding:25px;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* =========================
   QUESTION TITLE
========================= */

.question-title{

    font-family:Arial, sans-serif;

    font-weight:500;

    font-size:34px;

    line-height:1.2;

    text-align:center;

    color:#111;

    max-width:700px;

    margin:0 auto 40px auto;

    letter-spacing:-1px;

}

/* MOBILE */

@media(max-width:768px){

    .question-title{

        font-size:24px;

        line-height:1.3;

        margin-bottom:55px;

        padding:0 10px;

    }

}

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

.text-options{

    display:flex;

    flex-direction:column;

    gap:16px;

    max-width:700px;

    margin:auto;

}

.text-option{

    background:#ffffff;

    border-radius:24px;

    padding:22px 26px;

    font-size:15px;

    font-weight:500;

    color:#111;

    cursor:pointer;

    transition:all 0.2s ease;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-height:82px;

    box-shadow:0 2px 10px rgba(0,0,0,0.03);

}

.text-option:hover{

    transform:scale(0.98);

    background:#f3edff;

    border:2px solid #8b5cf6;

}

/* MOBILE */

@media(max-width:768px){

    .text-option{

        font-size:16px;

        padding:18px 20px;

        border-radius:20px;

        min-height:72px;

    }

}
/* =========================
   IMAGE QUESTIONS
========================= */

/* =========================
   IMAGE QUESTIONS
========================= */

.question-image{

    width:100%;

    max-width:520px;

    display:block;

    margin:0 auto 28px auto;

    border-radius:24px;

    background:#fff;

    padding:14px;

    box-shadow:0 4px 20px rgba(0,0,0,0.04);

}

/* ANSWER TITLE */

.answer-title{

    text-align:center;

    font-size:24px;

    font-weight:600;

    margin-bottom:25px;

    color:#111;

}

/* OPTIONS GRID */

.options-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    max-width:520px;

    margin:auto;

}
/* OPTION CARD */

.option-card{

    background:#ffffff;

    border-radius:22px;

    padding:12px;

    cursor:pointer;

    transition:all 0.2s ease;

    border:2px solid transparent;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:120px;

    box-shadow:0 2px 10px rgba(0,0,0,0.03);

}

.option-card:hover{

    border-color:#8b5cf6;

    transform:scale(0.98);

    background:#f5f0ff;

}

/* OPTION IMAGE */

.option-card img{

    width:100%;

    max-width:130px;

    display:block;

    border-radius:12px;

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

@media(max-width:768px){

    .question-image{

        max-width:100%;

        border-radius:20px;

        padding:12px;

    }

    .options-grid{

        max-width:100%;

        gap:14px;

    }

     .option-card{

        min-height:110px;

        border-radius:18px;

    }

    .option-card img{

        max-width:120px;

    }

}

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

@media(max-width:768px){

    .intro-wrapper,
    .question-container{
        padding:10px;
    }

    .intro-card,
    .card{
        border-radius:24px;
        padding:20px;
    }

    .intro-logo{
        height:52px;
        font-size:18px;
        border-radius:18px;
    }

    .brain-icon{
        font-size:52px;
    }

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

    .rule{
        font-size:18px;
    }

    .gender-title{
        font-size:24px;
    }

    .gender-buttons{
        gap:12px;
    }

    .gender-buttons button{
        width:48%;
        height:58px;
        font-size:18px;
        border-radius:15px;
    }

    .avg-score{
        font-size:15px;
    }

   
   

    .options-grid{
        gap:14px;
    }

    .option-card{
        border-radius:16px;
        padding:10px;
    }

}

.speed-screen{

    padding:20px;
    text-align:center;

}

.speed-image img{

    width:160px;
    margin:30px auto;

}

.speed-screen h2{

    font-size:25px;
    line-height:1.2;
    font-weight:600;
    margin-bottom:20px;

}

.speed-screen h2 span{

    color:#8b5cf6;

}

.speed-screen p{

    font-size:16px;
    color:#777;
    line-height:1.5;
    max-width:700px;
    margin:auto;

}

.speed-screen button{

    margin-top:80px;
    height:40px;
    width:120px;
    border:none;
    border-radius:25px;
    background:linear-gradient(
        45deg,
        #8b5cf6,
        #a855f7
    );

    color:#fff;
    font-size:18px;
    font-weight:500;

}

/* =========================
   TOP BAR
========================= */

.quiz-topbar{

    max-width:900px;

    margin:0 auto 25px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#ffffff;

    border-radius:26px;

    padding:12px 18px;

    box-shadow:0 4px 20px rgba(0,0,0,0.04);

}

/* BACK BUTTON */

.back-button{

    width:55px;

    height:55px;

    border:none;

    background:transparent;

    font-size:30px;

    font-weight:700;

    cursor:pointer;

    color:#111;

}

/* QUESTION COUNT */

.question-progress{

    background:#f3ecff;

    padding:14px 28px;

    border-radius:18px;

    font-size:22px;

    font-weight:700;

    color:#777;

}

.question-progress span:first-child{

    color:#8b5cf6;

}

/* TIMER */

.quiz-timer{

    

    padding:14px 24px;

    border-radius:18px;

    font-size:22px;

    font-weight:700;

    color:#111;

}

/* MOBILE */

@media(max-width:768px){

    .quiz-topbar{

        padding:10px 12px;

        border-radius:20px;

    }

    .back-button{

        width:45px;

        height:45px;

        font-size:24px;

    }

    .question-progress{

        font-size:16px;

        padding:12px 18px;

        border-radius:14px;

    }

    .quiz-timer{

        font-size:16px;

        padding:12px 16px;

        border-radius:14px;

    }

}


/* LAST RESULT BUTTON */

.result-button{

    width:100%;

    margin-top:30px;

    height:72px;

    border:none;

    border-radius:24px;

    background:linear-gradient(
        90deg,
        #8b5cf6,
        #9f67ff
    );

    color:#fff;

    font-size:26px;

    font-weight:700;

    cursor:pointer;

}

/* ACTIVE OPTION */

.selected{

    background:#8b5cf6 !important;

    color:#fff !important;

    border-color:#8b5cf6 !important;

}

/* =========================
   SOCIAL PROOF SCREEN
========================= */

.social-proof-screen{

    text-align:center;

    padding-top:20px;

}

.social-proof-image{

    width:100%;

    max-width:650px;

    margin:auto;

    display:block;

}

.social-proof-screen h2{

    font-size:44px;

    line-height:1.25;

    margin-top:40px;

    margin-bottom:40px;

    font-weight:700;

    color:#111;

}

.social-proof-screen h2 span{

    color:#7c5cff;

}

.social-stats{

    max-width:650px;

    margin:0 auto 40px auto;

    display:flex;

    flex-direction:column;

    gap:24px;

}

.social-stat{

    font-size:28px;

    color:#555;

    text-align:left;

    line-height:1.5;

}

.social-stat span{

    color:#7c5cff;

    font-weight:700;

}

/* MOBILE */

@media(max-width:768px){

    .social-proof-screen h2{

        font-size:28px;

        margin-top:30px;

        margin-bottom:30px;

    }

    .social-stat{

        font-size:20px;

    }

}

/* =========================
   NEW CALCULATION SCREEN
========================= */

.new-calculation-screen{

    max-width:760px;

    margin:auto;

}

.new-calculation-screen h1{

    font-size:72px;

    line-height:1.05;

    text-align:center;

    margin-bottom:30px;

    color:#111;

}

.new-calculation-screen h1 span{

    color:#7c5cff;

}

.calc-description{

    max-width:650px;

    margin:0 auto 50px auto;

    text-align:center;

    font-size:24px;

    line-height:1.6;

    color:#666;

}

.calc-steps{

    display:flex;

    flex-direction:column;

    gap:35px;

}

.step-top{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    font-size:28px;

    font-weight:600;

    color:#222;

}

.step-percent{

    color:#7c5cff;

}

.step-bar{

    width:100%;

    height:18px;

    background:#e8e4f3;

    border-radius:50px;

    overflow:hidden;

}

.step-fill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #8b5cf6,
        #a855f7
    );

    border-radius:50px;

    transition:0.2s;

}

.calc-review-box{

    background:#fff;

    border-radius:34px;

    padding:40px 30px;

    margin-top:60px;

}

.review-users{

    display:flex;

    justify-content:center;

    margin-bottom:25px;

}

.review-users img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #fff;

    margin-left:-12px;

}

.calc-review-box h3{

    text-align:center;

    font-size:42px;

    line-height:1.3;

    margin-bottom:35px;

}

.calc-review-box h3 span{

    color:#7c5cff;

}

.review-card{

    background:#fff;

    border:2px solid #eee;

    border-radius:28px;

    padding:25px;

}

.review-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}

.review-header img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.review-header strong{

    display:block;

    font-size:28px;

}

.review-header small{

    font-size:20px;

    color:#777;

}

.review-stars{

    color:#ffcc00;

    font-size:30px;

    margin-bottom:15px;

}

.review-card p{

    font-size:26px;

    line-height:1.6;

    color:#444;

}

/* MOBILE */

@media(max-width:768px){

    .new-calculation-screen h1{

        font-size:42px;

    }

    .calc-description{

        font-size:18px;

    }

    .step-top{

        font-size:20px;

    }

    .calc-review-box h3{

        font-size:28px;

    }

    .review-header strong{

        font-size:20px;

    }

    .review-header small{

        font-size:15px;

    }

    .review-card p{

        font-size:18px;

    }

}
/* =========================
   WARNING POPUP
========================= */

.warning-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.65);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    padding:20px;

}

.warning-popup{

    background:#fff;

    max-width:520px;

    width:100%;

    border-radius:32px;

    padding:40px 30px;

    text-align:center;

    animation:popupShow 0.3s ease;

}

.warning-icon{

    font-size:70px;

    margin-bottom:20px;

}

.warning-popup h2{

    font-size:42px;

    line-height:1.2;

    margin-bottom:20px;

}

.warning-popup p{

    font-size:22px;

    line-height:1.5;

    color:#666;

    margin-bottom:40px;

}

@keyframes popupShow{

    from{

        transform:scale(0.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* MOBILE */

@media(max-width:768px){

    .warning-popup{

        border-radius:24px;

        padding:30px 22px;

    }

    .warning-popup h2{

        font-size:30px;

    }

    .warning-popup p{

        font-size:18px;

    }

}

/* =========================
   EMAIL CAPTURE
========================= */

.email-capture{

    max-width:650px;

    margin:auto;

    text-align:center;

}

.result-preview-card{

    background:linear-gradient(
        135deg,
        #8b5cf6,
        #b06cff
    );

    border-radius:32px;

    padding:40px 30px;

    color:#fff;

    margin-bottom:40px;

}

.preview-badge{

    background:#fff;

    color:#8b5cf6;

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

}

.result-preview-card h2{

    font-size:42px;

    line-height:1.2;

    margin-bottom:30px;

}

.preview-stats{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.preview-stat{

    font-size:22px;

}

.email-capture h3{

    font-size:32px;

    margin-bottom:30px;

}

.email-capture input{

    width:100%;

    height:70px;

    border:none;

    border-radius:20px;

    padding:0 24px;

    font-size:22px;

    margin-bottom:20px;

    background:#fff;

    box-sizing:border-box;

}

/* MOBILE */

@media(max-width:768px){

    .result-preview-card h2{

        font-size:30px;

    }

    .preview-stat{

        font-size:18px;

    }

    .email-capture h3{

        font-size:24px;

    }

    .email-capture input{

        height:60px;

        font-size:18px;

    }

}

/* =========================
   FINAL RESULT
========================= */

.final-result{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.iq-card{

    background:linear-gradient(
        135deg,
        #8b5cf6,
        #b06cff
    );

    border-radius:36px;

    padding:50px 30px;

    color:#fff;

    margin-bottom:40px;

}

.iq-badge{

    background:#fff;

    color:#8b5cf6;

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

}

.iq-card h2{

    font-size:42px;

    margin-bottom:20px;

}

.iq-score{

    font-size:120px;

    font-weight:800;

    line-height:1;

    margin-bottom:15px;

}

.iq-level{

    font-size:32px;

    font-weight:600;

}

.result-details{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-bottom:40px;

}

.result-item{

    background:#fff;

    padding:24px;

    border-radius:22px;

    font-size:24px;

    text-align:left;

}

.result-item span{

    color:#8b5cf6;

    font-weight:700;

}

.unlock-box{

    background:#fff3cd;

    padding:24px;

    border-radius:22px;

    margin-bottom:30px;

}

.unlock-box h3{

    font-size:28px;

    line-height:1.4;

}

.unlock-box span{

    color:#ff3b30;

}

/* MOBILE */

@media(max-width:768px){

    .iq-card h2{

        font-size:30px;

    }

    .iq-score{

        font-size:80px;

    }

    .iq-level{

        font-size:24px;

    }

    .result-item{

        font-size:18px;

    }

    .unlock-box h3{

        font-size:22px;

    }

}


/* =========================
   OFFER RESULT PAGE
========================= */

.offer-result-page{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.offer-top{

    background:#efe7ff;

    border-radius:26px;

    padding:24px;

    margin-bottom:40px;

}

.offer-badge{

    display:inline-block;

    background:#8b5cf6;

    color:#fff;

    padding:10px 20px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    margin-bottom:15px;

}

.offer-top p{

    font-size:24px;

    line-height:1.5;

    color:#333;

}

.offer-top span{

    color:#16a34a;

    font-weight:700;

}

.offer-result-page h1{

    font-size:64px;

    line-height:1.1;

    margin-bottom:40px;

}

.result-preview-image img{

    width:100%;

    max-width:650px;

    margin:auto;

    display:block;

    margin-bottom:40px;

}

.email-capture-box input{

    width:100%;

    height:72px;

    border:none;

    border-radius:24px;

    padding:0 24px;

    font-size:22px;

    margin-bottom:25px;

    box-sizing:border-box;

}

.locked-result-button{

    width:100%;

    height:76px;

    border:none;

    border-radius:24px;

    background:#b8b8b8;

    color:#fff;

    font-size:28px;

    font-weight:700;

    cursor:not-allowed;

    transition:0.3s;

}

.active-result-button{

    background:linear-gradient(
        90deg,
        #16a34a,
        #22c55e
    );

    cursor:pointer;

}

/* MOBILE */

@media(max-width:768px){

    .offer-top p{

        font-size:18px;

    }

    .offer-result-page h1{

        font-size:38px;

    }

    .email-capture-box input{

        height:62px;

        font-size:18px;

    }

    .locked-result-button{

        height:64px;

        font-size:22px;

    }

}

/* =========================
   RESULT PAGE
========================= */

.result-page{

    max-width:900px;

    margin:auto;

    padding:20px;

}

.result-hero{

    background:linear-gradient(
        135deg,
        #8b5cf6,
        #b06cff
    );

    border-radius:40px;

    padding:60px 30px;

    text-align:center;

    color:#fff;

    margin-bottom:40px;

}

.result-percentile{

    display:inline-block;

    background:#fff;

    color:#8b5cf6;

    padding:12px 22px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    margin-bottom:25px;

}

.result-hero h1{

    font-size:44px;

    margin-bottom:20px;

}

.real-iq-number{

    font-size:140px;

    font-weight:800;

    line-height:1;

    margin-bottom:15px;

}

.iq-category{

    font-size:34px;

    font-weight:600;

}

.result-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.result-box{

    background:#fff;

    border-radius:30px;

    padding:35px;

    text-align:center;

}

.result-box span{

    display:block;

    font-size:20px;

    color:#777;

    margin-bottom:12px;

}

.result-box strong{

    font-size:34px;

    color:#111;

}

/* MOBILE */

@media(max-width:768px){

    .result-hero{

        padding:40px 20px;

    }

    .result-hero h1{

        font-size:32px;

    }

    .real-iq-number{

        font-size:90px;

    }

    .iq-category{

        font-size:24px;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

    .result-box strong{

        font-size:28px;

    }

}

/* =========================
   RESULT DETAILS
========================= */

.result-description{

    max-width:650px;

    margin:25px auto 0 auto;

    font-size:22px;

    line-height:1.7;

    opacity:0.95;

}

.category-detail-card{

    background:#fff;

    border-radius:32px;

    padding:45px;

    margin-top:35px;

}

.category-detail-card h2{

    font-size:38px;

    margin-bottom:25px;

    color:#111;

}

.category-detail-card p{

    font-size:22px;

    line-height:1.9;

    color:#555;

}

.result-note{

    margin-top:30px;

    background:#f8f8f8;

    border-radius:24px;

    padding:28px;

    font-size:18px;

    line-height:1.8;

    color:#666;

}

/* MOBILE */

@media(max-width:768px){

    .result-description{

        font-size:18px;

    }

    .category-detail-card{

        padding:30px 24px;

    }

    .category-detail-card h2{

        font-size:28px;

    }

    .category-detail-card p{

        font-size:18px;

    }

    .result-note{

        font-size:16px;

    }

}