/* ==========================================
            REPORT VIEWER
========================================== */

.hero-content,
.hero-visual{

    min-width:0;

}

.report-viewer{

    width:100%;

    max-width:560px;

    margin:0 auto;

    position:relative;

    overflow:hidden;

    border-radius:24px;

}
.report-track{

    display:flex;

    width:100%;

    transition:transform .6s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

.report-page::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:220px;

    height:220px;

    background:

    radial-gradient(circle,
        rgba(79,125,255,.08),
        transparent 70%);

    pointer-events:none;

}

.report-page{

    background:#ffffff;

    border:1px solid #ececec;


    height: clamp(520px, 70vh, 680px);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:32px;

    box-shadow:

    0 30px 60px rgba(0,0,0,.06);

    flex:0 0 100%;

    width:100%;

    box-sizing:border-box;

    user-select:none;

    cursor:grab;

    position:relative;

    overflow:hidden;

}

.report-viewer{

    transition:.35s;

}

.report-viewer:hover{

    transform:translateY(-6px);


}

.report-header::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--orange);

}

.report-header{

    font-size:12px;

    letter-spacing:.25em;

    color:#888;

    text-transform:uppercase;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

}
.report-body{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    display:flex;

    flex-direction:column;

    gap:24px;

    padding-right:8px;

    min-height:0;

}

.report-body h3{

    font-size:42px;

    font-weight:800;

}

.report-body p{

    color:#666;

    max-width:320px;

}
.report-footer{

    border-top:1px solid #efefef;

    padding-top:22px;

    color:#888;

    font-size:13px;

}
.report-pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:28px;

}
.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d7d7d7;

    cursor:pointer;

    transition:.35s;

}

.dot.active{

    width:38px;

    border-radius:999px;

    background:var(--orange);

}
@media(max-width:992px){

    .report-page{

        height:520px;

        padding:24px;

    }

    .report-body h3{

        font-size:32px;

    }

    .hero-visual{

        width:100%;

        display:flex;

        justify-content:center;

    }

    .hero-artboard{

        width:100%;

        padding-inline:16px;

    }

    .report-viewer{

        max-width:100%;

    }

    .op-grid{

        grid-template-columns:1fr;

    }

    .op-item{

        flex-direction:column;

    }

    .impact{

        align-self:flex-start;

    }

    .asset-item{

        flex-direction:column;

    }

    .status{

        align-self:flex-start;

    }

    .roi-metrics{

        grid-template-columns:1fr;

    }

}


/* ==========================================
            REPORT COVER
========================================== */

.report-cover{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    gap:34px;

    height:100%;

}



.cover-company{

    width:100%;

}

.cover-company{

    text-transform:uppercase;

    letter-spacing:.22em;

    color:#999;

    font-size:12px;

}

.cover-company h2{

    margin-top:14px;

    font-size:clamp(2.3rem,4vw,3.4rem);

    font-weight:800;

    letter-spacing:-1px;

    color:#111;

}

.cover-divider{

    width:100%;

    height:1px;

    background:#ececec;

}

.cover-sections{

    width:100%;

    list-style:none;

    padding:0;

    margin:0;

}

.cover-sections li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px dashed #efefef;

    color:#444;

    font-size:15px;

}

.cover-sections li:last-child{

    border:none;

}


.cover-sections li::after{

    content:"→";

    color:var(--orange);

    font-size:18px;

}

.cover-brand{

    width:100%;

}

.cover-brand span{

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:11px;

    color:#999;

}

.cover-brand h3{

    margin-top:10px;

    margin-bottom:6px;

    font-size:28px;

    font-weight:700;

}

.cover-brand p{

    margin:0;

    color:#777;

    font-size:14px;

}

/* ==========================================
        OPPORTUNITY PAGE
========================================== */

.opportunity-page{

    align-items:stretch;

    gap:28px;

}

.op-label{

    display:block;

    text-transform:uppercase;

    font-size:11px;

    letter-spacing:.18em;

    color:#999;

    margin-bottom:18px;

}

.op-grid{

    display:grid;

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

    gap:16px;

}

.op-stat{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:14px;

    padding:18px;

}

.op-stat span{

    display:block;

    font-size:11px;

    text-transform:uppercase;

    color:#999;

    letter-spacing:.15em;

    margin-bottom:8px;

}

.op-stat strong{

    font-size:20px;

    color:#111;

}

.op-divider{

    height:1px;

    background:#ececec;

}


.op-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.op-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding-bottom:18px;

    border-bottom:1px dashed #ececec;

}

.op-item:last-child{

    border:none;

}

.op-item h4{

    margin:0;

    font-size:18px;

}

.op-item p{

    margin-top:8px;

    color:#666;

    font-size:14px;

    line-height:1.6;

    max-width:none;

}

.impact{

    padding:6px 12px;

    border-radius:999px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.15em;

}

.impact.high{

    background:#fff3ec;

    color:#d86b2c;

}

.impact.medium{

    background:#f4f4f4;

    color:#666;

}

.consultant-note{

    margin-top:auto;

    background:#fafafa;

    border-left:4px solid var(--orange);

    padding:18px;

    border-radius:10px;

    color:#555;

    line-height:1.7;

    font-size:14px;

}

.consultant-note span{

    display:block;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:11px;

    color:#888;

}
/* ==========================================
        SOLUTIONS PAGE
========================================== */

.solutions-page{

    align-items:stretch;

    gap:22px;

}

.solution-card{

    border:1px solid #ececec;

    border-radius:18px;

    background:#fff;

    flex-shrink:0;

}

.solution-title{

    padding:16px 20px;

    font-weight:700;

    font-size:17px;

    border-bottom:1px solid #ececec;

    background:#fafafa;

}

.solution-flow{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:20px;

    align-items:stretch;

}

.flow-step{

    border-left:4px solid #ddd;

    padding-left:14px;

}

.flow-step span{

    display:block;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.15em;

    color:#888;

    margin-bottom:6px;

}

.flow-step.challenge{

    border-color:#bdbdbd;

}

.flow-step.ai{

    border-color:var(--orange);

}

.flow-step.outcome{

    border-color:#4f7dff;

}

.flow-arrow{

    text-align:center;

    font-size:22px;

    color:#bbb;

}

/* ==========================================
        READINESS PAGE
========================================== */

.readiness-page{

    align-items:stretch;

    gap:24px;

}

.readiness-intro h3{

    margin:0 0 10px;

    font-size:28px;

    font-weight:700;

}

.readiness-intro p{

    color:#666;

    line-height:1.7;

    max-width:none;

}

.asset-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.asset-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    padding:18px;

    border:1px solid #ececec;

    border-radius:16px;

    background:#fff;

}

.asset-info{

    flex:1;

}

.asset-info h4{

    margin:0;

    font-size:17px;

}

.asset-info p{

    margin-top:8px;

    color:#666;

    line-height:1.6;

    font-size:14px;

    max-width:none;

}

.status{

    white-space:nowrap;

    padding:7px 14px;

    border-radius:999px;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-weight:600;

}

.available{

    background:#eef9f1;

    color:#2f8f55;

}

.missing{

    background:#fff3ec;

    color:#d86b2c;

}

.recommended{

    background:#eef4ff;

    color:#4f7dff;

}

/* ==========================================
            ROI PAGE
========================================== */

.roi-page{

    align-items:stretch;

    gap:26px;

}

.roi-intro h3{

    margin:0;

    font-size:28px;

}

.roi-intro p{

    margin-top:10px;

    color:#666;

    line-height:1.7;

    max-width:none;

}

.roi-metrics{

    display:grid;

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

    gap:16px;

}



.roi-card{

    border:1px solid #ececec;

    border-radius:16px;

    padding:20px;

    background:#fff;

}

.roi-card span{

    display:block;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:#888;

    margin-bottom:10px;

}

.roi-card strong{

    font-size:28px;

    color:#111;

}

.highlight{

    background:#fff8f2;

    border-color:#ffd9bf;

}

.roi-comparison{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.bar label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    color:#666;

}

.bar-track{

    height:10px;

    border-radius:999px;

    background:#efefef;

    overflow:hidden;

}

.bar-fill{

    height:100%;

    border-radius:999px;

}

.before{

    width:90%;

    background:#d3d3d3;

}

.after{

    width:35%;

    background:var(--orange);

}

/* ==========================================
        ROADMAP PAGE
========================================== */

.roadmap-page{

    align-items:stretch;

    gap:26px;

}

.roadmap-intro h3{

    margin:0;

    font-size:28px;

}

.roadmap-intro p{

    margin-top:10px;

    color:#666;

    line-height:1.7;

    max-width:none;

}

.timeline{

    display:flex;

    flex-direction:column;

    gap:18px;

}
.timeline-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.timeline-number{

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--orange);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

}

.timeline-content{

    flex:1;

    border-left:2px solid #ececec;

    padding-left:18px;

    padding-bottom:20px;

}

.timeline-item:last-child .timeline-content{

    border:none;

    padding-bottom:0;

}

.timeline-content h4{

    margin:0;

    font-size:17px;

}

.timeline-content p{

    margin-top:8px;

    color:#666;

    line-height:1.6;

    font-size:14px;

    max-width:none;

}

/* ==========================================
        BLUEPRINT PAGE
========================================== */

.blueprint-page{

    align-items:stretch;

    gap:24px;

}

.blueprint-intro h3{

    margin:0;

    font-size:28px;

}

.blueprint-intro p{

    margin-top:10px;

    color:#666;

    line-height:1.7;

    max-width:none;

}

.blueprint-flow{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.flow-box{

    border:1px solid #ececec;

    border-radius:16px;

    padding:18px;

    background:#fff;

}

.flow-box h4{

    margin:0;

    font-size:17px;

}

.flow-box p{

    margin-top:8px;

    font-size:14px;

    color:#666;

    line-height:1.6;

    max-width:none;

}

.ai-layer{

    border-color:#ffd7be;

    background:#fff8f2;

}

.flow-line{

    width:2px;

    height:26px;

    background:#ddd;

    margin:auto;

}

.technology-stack{

    margin-top:8px;

}

.technology-stack>span{

    display:block;

    text-transform:uppercase;

    letter-spacing:.15em;

    color:#888;

    font-size:11px;

    margin-bottom:12px;

}

.stack-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.stack-tags span{

    padding:8px 14px;

    border-radius:999px;

    background:#f6f6f6;

    border:1px solid #ececec;

    font-size:12px;

}

.report-body::-webkit-scrollbar{

    width:6px;

}

.report-body::-webkit-scrollbar-track{

    background:transparent;

}

.report-body::-webkit-scrollbar-thumb{

    background:#dddddd;

    border-radius:999px;

}

.report-body::-webkit-scrollbar-thumb:hover{

    background:#bdbdbd;

}

.solutions-page,
.readiness-page,
.roi-page,
.roadmap-page,
.blueprint-page{

    justify-content:flex-start;

    align-items:stretch;

}