/* REVLO INTELLIGENCE™ — PRODUCTION CSS
   Generated from the supplied 2,779-line Revlo Intelligence stylesheet.
   Existing selectors are preserved; the production layer below provides
   the final visual system and responsive polish.
*/

/*==========================================================
                REVLO INTELLIGENCE™
                HERO SECTION
==========================================================*/

.intel-hero{

    position:relative;

    padding:130px 0 100px;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,rgba(37,99,235,.13),transparent 35%),
    radial-gradient(circle at bottom left,rgba(59,130,246,.08),transparent 30%),
    linear-gradient(to bottom,#ffffff,#F6F9FF);

}

.intel-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.45;

    pointer-events:none;

}

.intel-hero .container{

    position:relative;

    z-index:2;

}

.intel-hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}

/*==========================================================
                    LEFT
==========================================================*/

.intel-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:28px;

}

.intel-content h1{

    font-size:4.2rem;

    line-height:1.08;

    font-weight:800;

    color:#1A1815;

    margin-bottom:28px;

    max-width:700px;

}

.intel-content h1 span{

    color:#1D4ED8;

}

.intel-content p{

    font-size:1.15rem;

    line-height:1.9;

    color:#666;

    max-width:640px;

    margin-bottom:42px;

}

.intel-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

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

.intel-card{

    position:relative;

    background:#fff;

    border-radius:30px;

    padding:36px;

    border:1px solid rgba(37,99,235,.10);

    box-shadow:

    0 35px 80px rgba(37,99,235,.12);

    overflow:hidden;

}

.intel-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(37,99,235,.08),

    transparent 60%);

    pointer-events:none;

}

.intel-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.intel-card-header h3{

    margin:0;

    color:#1A1815;

    font-size:1.4rem;

}

.intel-card-header span{

    background:#EAFBF2;

    color:#16A34A;

    padding:8px 18px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:700;

}

.intel-grid{

    display:grid;

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

    gap:18px;

}

.intel-grid div{

    background:#fafafa;

    border:1px solid #ECECEC;

    border-radius:18px;

    padding:24px;

    transition:.35s;

}

.intel-grid div:hover{

    transform:translateY(-6px);

    border-color:#2563EB;

    box-shadow:0 20px 40px rgba(37,99,235,.08);

}

.intel-grid small{

    display:block;

    color:#888;

    margin-bottom:10px;

}

.intel-grid h2{

    margin:0;

    font-size:2rem;

    color:#2563EB;

}

.intel-score{

    margin-top:30px;

    padding:20px 24px;

    background:linear-gradient(135deg,#EFF6FF,#ffffff);

    border-radius:18px;

    border:1px solid #E5DEFF;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.intel-score strong{

    color:#2563EB;

    font-size:1.4rem;

}

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

.intel-section-header{

    max-width:840px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.intel-section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#EFF6FF;

    color:#2563EB;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:22px;

}

.intel-section-header h2{

    font-size:3rem;

    color:#1A1815;

    margin-bottom:24px;

}

.intel-section-header h2 span{

    color:#2563EB;

}

.intel-section-header p{

    font-size:1.08rem;

    color:#666;

    line-height:1.9;

}

/*==========================================================
                AI COPILOT
==========================================================*/

.ai-copilot{

    padding:120px 0;

    background:#ffffff;

}

.copilot-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:45px;

    align-items:start;

}

.chat-window{

    background:#fff;

    border-radius:28px;

    padding:35px;

    border:1px solid #ececec;

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

}

.chat{

    display:flex;

    gap:18px;

    margin-bottom:30px;

}

.chat:last-child{

    margin-bottom:0;

}

.chat-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

}

.ai-avatar{

    background:#2563EB;

}

.chat-bubble{

    flex:1;

    background:#fafafa;

    border-radius:20px;

    padding:24px;

    line-height:1.9;

    color:#555;

    border:1px solid #ECECEC;

}

.chat-bubble strong{

    color:#16A34A;

}

.copilot-actions{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.action-card{

    background:#fff;

    padding:30px;

    border-radius:22px;

    border:1px solid #ECECEC;

    transition:.35s;

}

.action-card:hover{

    transform:translateY(-6px);

    border-color:#2563EB;

    box-shadow:0 25px 50px rgba(37,99,235,.10);

}

.action-card i{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    color:#2563EB;

    font-size:1.5rem;

    margin-bottom:20px;

}

.action-card h3{

    margin-bottom:14px;

}

.action-card p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*==========================================================
                AI DECISION ENGINE
==========================================================*/

.ai-engine{

    padding:120px 0;

    background:#F6F9FF;

}

.engine-flow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    margin-top:70px;

}

.engine-node{

    width:180px;

    min-height:180px;

    background:#fff;

    border-radius:24px;

    border:1px solid #ECECEC;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:25px;

    transition:.35s;

}

.engine-node:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    box-shadow:0 25px 45px rgba(37,99,235,.10);

}

.engine-node i{

    width:70px;

    height:70px;

    border-radius:20px;

    background:#EFF6FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    margin-bottom:20px;

}

.engine-node h3{

    margin:0;

    font-size:1.15rem;

}

.ai-core{

    background:linear-gradient(135deg,#2563EB,#60A5FA);

    color:#fff;

    border:none;

}

.ai-core i{

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

    color:#fff;

}

.ai-core h3{

    color:#fff;

}

.engine-arrow{

    font-size:2rem;

    color:#2563EB;

}

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

@media(max-width:1024px){

.intel-hero-grid,
.copilot-grid{

grid-template-columns:1fr;

gap:50px;

}

.intel-content{

text-align:center;

}

.intel-content h1{

font-size:3.3rem;

margin-inline:auto;

}

.intel-content p{

margin-inline:auto;

}

.intel-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.intel-hero{

padding:90px 0 70px;

}

.intel-content h1{

font-size:2.5rem;

}

.intel-grid{

grid-template-columns:1fr;

}

.engine-flow{

flex-direction:column;

}

.engine-arrow{

transform:rotate(90deg);

}

}

@media(max-width:480px){

.intel-content h1{

font-size:2rem;

}

.intel-content p{

font-size:1rem;

}

.intel-buttons{

flex-direction:column;

}

.intel-buttons .btn{

width:100%;

text-align:center;

}

}


/*==========================================================
                    WHY REVLO AI
==========================================================*/

.why-ai{

    padding:120px 0;

    background:#ffffff;

}

.comparison-table{

    margin-top:70px;

    display:grid;

    grid-template-columns:1fr 1fr;

    border-radius:28px;

    overflow:hidden;

    border:1px solid #ECECEC;

    box-shadow:0 25px 55px rgba(0,0,0,.05);

}

.comparison-header{

    padding:30px;

    font-size:1.4rem;

    font-weight:700;

    text-align:center;

}

.comparison-header.old{

    background:#F8F8F8;

    color:#666;

}

.comparison-header.new{

    background:linear-gradient(135deg,#2563EB,#3B82F6);

    color:#fff;

}

.comparison-item{

    padding:28px;

    border-top:1px solid #ECECEC;

    font-size:1.05rem;

    background:#fff;

    display:flex;

    align-items:center;

}

.comparison-item.highlight{

    background:#EFF6FF;

    color:#2563EB;

    font-weight:600;

}

/*==========================================================
                AI CAPABILITIES
==========================================================*/

.ai-capabilities{

    padding:120px 0;

    background:#F6F9FF;

}

.capability-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.ai-capability-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

    border:1px solid #ECECEC;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.ai-capability-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#2563EB,#60A5FA);

}

.ai-capability-card:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    box-shadow:0 30px 60px rgba(37,99,235,.10);

}

.ai-capability-card i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:1.8rem;

    margin-bottom:25px;

}

.ai-capability-card h3{

    margin-bottom:18px;

    color:#1A1815;

}

.ai-capability-card p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*==========================================================
                AI COMMAND CENTER
==========================================================*/

.intelligence-dashboard{

    padding:120px 0;

    background:#ffffff;

}

.dashboard-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.intel-score-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid #ECECEC;

    text-align:center;

    transition:.35s;

}

.intel-score-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 65px rgba(37,99,235,.10);

}

.score-ring{

    width:150px;

    height:150px;

    margin:auto auto 30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

.score-ring::before{

    content:"";

    position:absolute;

    width:115px;

    height:115px;

    border-radius:50%;

    background:#fff;

}

.score-ring span{

    position:relative;

    z-index:2;

    font-size:2.3rem;

    font-weight:800;

}

/*=========================
    COLORS
=========================*/

.score-purple{

    background:conic-gradient(#2563EB 0% 96%,#ECECEC 96%);

}

.score-purple span{

    color:#2563EB;

}

.score-orange{

    background:conic-gradient(#2563EB 0% 91%,#ECECEC 91%);

}

.score-orange span{

    color:#2563EB;

}

.score-green{

    background:conic-gradient(#16A34A 0% 94%,#ECECEC 94%);

}

.score-green span{

    color:#16A34A;

}

.score-blue{

    background:conic-gradient(#2563EB 0% 89%,#ECECEC 89%);

}

.score-blue span{

    color:#2563EB;

}

.score-red{

    background:conic-gradient(#EF4444 0% 87%,#ECECEC 87%);

}

.score-red span{

    color:#EF4444;

}

.score-teal{

    background:conic-gradient(#14B8A6 0% 92%,#ECECEC 92%);

}

.score-teal span{

    color:#14B8A6;

}

.intel-score-card h3{

    margin-bottom:12px;

    font-size:1.4rem;

}

.intel-score-card p{

    margin:0;

    color:#666;

}

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

@media(max-width:1100px){

.dashboard-grid{

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

}

.capability-grid{

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

}

}

@media(max-width:768px){

.dashboard-grid,

.capability-grid,

.comparison-table{

grid-template-columns:1fr;

}

.comparison-header{

padding:22px;

}

.score-ring{

width:130px;

height:130px;

}

.score-ring::before{

width:100px;

height:100px;

}

.score-ring span{

font-size:2rem;

}

.intel-score-card{

padding:30px;

}

}

/*==========================================================
            PREDICTIVE MAINTENANCE
==========================================================*/

.predictive-maintenance{

    padding:120px 0;

    background:#F6F9FF;

}

.prediction-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:50px;

    align-items:center;

}

.prediction-content h2{

    margin:25px 0;

    font-size:3rem;

    line-height:1.2;

}

.prediction-content h2 span{

    color:#2563EB;

}

.prediction-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:40px;

}

.prediction-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.prediction-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:22px;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    transition:.35s;

}

.prediction-item:hover{

    transform:translateX(8px);

    border-color:#2563EB;

    box-shadow:0 20px 40px rgba(37,99,235,.10);

}

.prediction-item i{

    color:#16A34A;

    font-size:1.1rem;

    margin-top:3px;

}

.prediction-item strong{

    color:#2563EB;

}

.prediction-card{

    background:#fff;

    border-radius:28px;

    padding:35px;

    border:1px solid #ECECEC;

    box-shadow:0 25px 50px rgba(0,0,0,.05);

}

.prediction-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.prediction-header h3{

    margin:0;

}

.prediction-header span{

    background:#EFF6FF;

    color:#2563EB;

    padding:8px 16px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:700;

}

.prediction-timeline{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.timeline-event{

    position:relative;

    padding-left:30px;

}

.timeline-event::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#2563EB;

}

.timeline-event::after{

    content:"";

    position:absolute;

    left:5px;

    top:22px;

    width:2px;

    height:45px;

    background:#DDD;

}

.timeline-event:last-child::after{

    display:none;

}

.timeline-event strong{

    display:block;

    color:#2563EB;

    margin-bottom:6px;

}

.timeline-event p{

    margin:0;

    color:#666;

}

/*==========================================================
                FUEL INTELLIGENCE
==========================================================*/

.fuel-intelligence-ai{

    padding:120px 0;

    background:#ffffff;

}

.fuel-ai-grid{

    display:grid;

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

    gap:25px;

    margin-top:70px;

}

.fuel-ai-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    border:1px solid #ECECEC;

    text-align:center;

    transition:.35s;

}

.fuel-ai-card:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    box-shadow:0 25px 45px rgba(37,99,235,.10);

}

.fuel-ai-card small{

    display:block;

    color:#888;

    margin-bottom:15px;

}

.fuel-ai-card h2{

    margin:0;

    color:#2563EB;

    font-size:2.1rem;

}

.fuel-analysis{

    margin-top:60px;

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid #ECECEC;

}

.fuel-analysis h3{

    margin-bottom:30px;

}

.analysis-list{

    display:grid;

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

    gap:20px;

}

.analysis-list div{

    background:#F8F8FC;

    padding:22px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:15px;

    transition:.35s;

}

.analysis-list div:hover{

    background:#EFF6FF;

}

.analysis-list i{

    color:#2563EB;

    font-size:.7rem;

}

/*==========================================================
            FINANCIAL INTELLIGENCE
==========================================================*/

.financial-intelligence{

    padding:120px 0;

    background:#F6F9FF;

}

.financial-ai-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.financial-ai-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

    border:1px solid #ECECEC;

    transition:.35s;

}

.financial-ai-card:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    box-shadow:0 30px 60px rgba(37,99,235,.10);

}

.financial-ai-card h3{

    margin-bottom:28px;

}

.financial-ai-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.financial-ai-card li{

    display:flex;

    gap:15px;

    align-items:flex-start;

    padding:18px 0;

    border-bottom:1px solid #F1F1F1;

    color:#555;

}

.financial-ai-card li:last-child{

    border-bottom:none;

}

.financial-ai-card i{

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    color:#2563EB;

    flex-shrink:0;

}

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

@media(max-width:1100px){

.prediction-grid{

grid-template-columns:1fr;

}

.fuel-ai-grid{

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

}

.financial-ai-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.predictive-maintenance,

.fuel-intelligence-ai,

.financial-intelligence{

padding:80px 0;

}

.fuel-ai-grid,

.analysis-list{

grid-template-columns:1fr;

}

.prediction-content h2{

font-size:2.3rem;

}

.prediction-card,

.fuel-analysis{

padding:25px;

}

}
/*==========================================================
                SMART ALERTS
==========================================================*/

.smart-alerts{

    padding:120px 0;

    background:#ffffff;

}

.alerts-timeline{

    max-width:900px;

    margin:70px auto 0;

    position:relative;

}

.alerts-timeline::before{

    content:"";

    position:absolute;

    left:130px;

    top:0;

    bottom:0;

    width:3px;

    background:linear-gradient(to bottom,#2563EB,#60A5FA);

    border-radius:30px;

}

.alert-item{

    display:flex;

    gap:40px;

    margin-bottom:45px;

    position:relative;

}

.alert-item:last-child{

    margin-bottom:0;

}

.alert-date{

    width:110px;

    flex-shrink:0;

    font-weight:700;

    color:#2563EB;

    text-align:right;

    padding-top:18px;

}

.alert-content{

    flex:1;

    background:#fff;

    padding:28px 30px;

    border-radius:22px;

    border:1px solid #ECECEC;

    position:relative;

    transition:.35s;

}

.alert-content:hover{

    transform:translateX(8px);

    border-color:#2563EB;

    box-shadow:0 25px 45px rgba(37,99,235,.10);

}

.alert-content::before{

    content:"";

    position:absolute;

    left:-12px;

    top:28px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#2563EB;

    border:5px solid #fff;

    box-shadow:0 0 0 2px #2563EB;

}

.alert-content h3{

    margin-bottom:10px;

    color:#1A1815;

}

.alert-content p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*==========================================================
            AI RECOMMENDATION ENGINE
==========================================================*/

.recommendation-engine{

    padding:120px 0;

    background:#F6F9FF;

}

.recommendation-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.recommendation-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

    border:1px solid #ECECEC;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.recommendation-card::before{

    content:"AI";

    position:absolute;

    top:18px;

    right:22px;

    font-size:.75rem;

    font-weight:700;

    color:#2563EB;

    background:#EFF6FF;

    padding:6px 14px;

    border-radius:999px;

}

.recommendation-card:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    box-shadow:0 30px 60px rgba(37,99,235,.12);

}

.recommendation-card i{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    color:#2563EB;

    font-size:1.8rem;

    margin-bottom:25px;

}

.recommendation-card h3{

    margin-bottom:16px;

    color:#1A1815;

}

.recommendation-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

/*==========================================================
                LEARNING TIMELINE
==========================================================*/

.learning-timeline{

    padding:120px 0;

    background:#ffffff;

}

.learning-flow{

    margin-top:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.learning-step{

    width:180px;

    min-height:180px;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:25px;

    font-weight:700;

    color:#1A1815;

    transition:.35s;

    position:relative;

}

.learning-step:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

    background:#EFF6FF;

    box-shadow:0 25px 45px rgba(37,99,235,.10);

}

.learning-arrow{

    font-size:2rem;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==========================================================
                AI GLOW EFFECT
==========================================================*/

.learning-step::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    background:radial-gradient(circle at top right,
    rgba(37,99,235,.08),
    transparent 60%);

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.learning-step:hover::after{

    opacity:1;

}

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

@media(max-width:991px){

.recommendation-grid{

grid-template-columns:1fr;

}

.alerts-timeline::before{

left:18px;

}

.alert-item{

gap:25px;

}

.alert-date{

width:70px;

font-size:.85rem;

}

.alert-content::before{

left:-9px;

}

.learning-flow{

flex-direction:column;

}

.learning-arrow{

transform:rotate(90deg);

}

}

@media(max-width:768px){

.smart-alerts,

.recommendation-engine,

.learning-timeline{

padding:80px 0;

}

.alert-item{

flex-direction:column;

gap:15px;

}

.alert-date{

width:100%;

text-align:left;

padding-top:0;

padding-left:40px;

}

.alert-content{

margin-left:40px;

}

.alerts-timeline::before{

left:15px;

}

.learning-step{

width:100%;

min-height:120px;

}

}

/*==========================================================
                    AI IN ACTION
==========================================================*/

.ai-story{

    padding:120px 0;

    background:#F6F9FF;

}

.story-timeline{

    max-width:950px;

    margin:80px auto 0;

    display:flex;

    flex-direction:column;

    gap:35px;

    position:relative;

}

.story-timeline::before{

    content:"";

    position:absolute;

    left:130px;

    top:0;

    bottom:0;

    width:3px;

    background:linear-gradient(to bottom,#2563EB,#60A5FA);

}

.story-step{

    display:flex;

    gap:40px;

    align-items:flex-start;

}

.story-time{

    width:110px;

    flex-shrink:0;

    text-align:right;

    font-weight:700;

    color:#2563EB;

    padding-top:22px;

}

.story-card{

    flex:1;

    background:#fff;

    border-radius:24px;

    border:1px solid #ECECEC;

    padding:32px;

    position:relative;

    transition:.35s;

}

.story-card:hover{

    transform:translateX(10px);

    border-color:#2563EB;

    box-shadow:0 30px 60px rgba(37,99,235,.12);

}

.story-card::before{

    content:"";

    position:absolute;

    left:-12px;

    top:30px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#2563EB;

    border:5px solid #fff;

    box-shadow:0 0 0 2px #2563EB;

}

.story-card i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:1.8rem;

    margin-bottom:20px;

}

.story-card h3{

    margin-bottom:15px;

    color:#1A1815;

}

.story-card p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*==========================================================
                    FAQ
==========================================================*/

.intel-faq{

    padding:120px 0;

    background:#ffffff;

}

.intel-faq-wrapper{

    max-width:900px;

    margin:70px auto 0;

}

.intel-faq-item{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.3s;

}

.intel-faq-item:hover{

    border-color:#2563EB;

}

.intel-faq-question{

    width:100%;

    background:none;

    border:none;

    padding:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:1.08rem;

    font-weight:600;

    text-align:left;

}

.intel-faq-question i{

    color:#2563EB;

}

.intel-faq-answer{

    display:none;

    padding:0 28px 28px;

    color:#666;

    line-height:1.8;

}

.intel-faq-item.active .intel-faq-answer{

    display:block;

}

/*==========================================================
                FINAL CTA
==========================================================*/

.intel-final-cta{

    padding:130px 0;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(circle at top right,

    rgba(255,255,255,.15),

    transparent 40%),

    linear-gradient(135deg,#0B2345,#2563EB,#3B82F6);

}

.intel-final-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.3;

}

.intel-final-cta .cta-box{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

}

.intel-final-cta .intel-section-tag{

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

    color:#fff;

}

.intel-final-cta h2{

    font-size:3.4rem;

    margin:28px 0;

    line-height:1.2;

}

.intel-final-cta p{

    max-width:720px;

    margin:auto;

    line-height:1.9;

    opacity:.95;

    font-size:1.12rem;

}

.intel-final-cta .cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}

.intel-final-cta .btn-primary{

    background:#fff;

    color:#2563EB;

}

.intel-final-cta .btn-primary:hover{

    background:#F8F8F8;

}

.intel-final-cta .btn-outline{

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

    color:#fff;

}

.intel-final-cta .btn-outline:hover{

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

}

/*==========================================================
                GLOBAL ANIMATIONS
==========================================================*/

.intel-card,
.action-card,
.ai-capability-card,
.intel-score-card,
.prediction-card,
.financial-ai-card,
.recommendation-card,
.story-card{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}

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

@media(max-width:991px){

.story-timeline::before{

left:18px;

}

.story-step{

gap:25px;

}

.story-time{

width:70px;

font-size:.85rem;

}

.story-card::before{

left:-9px;

}

}

@media(max-width:768px){

.ai-story,

.intel-faq,

.intel-final-cta{

padding:80px 0;

}

.story-step{

flex-direction:column;

gap:15px;

}

.story-time{

width:100%;

padding-left:40px;

padding-top:0;

text-align:left;

}

.story-card{

margin-left:40px;

}

.story-timeline::before{

left:15px;

}

.intel-final-cta h2{

font-size:2.4rem;

}

.intel-final-cta .cta-buttons{

flex-direction:column;

}

.intel-final-cta .btn{

width:100%;

text-align:center;

}

}

/* ========================================================================
   REVLO INTELLIGENCE™ — PRODUCTION DESIGN SYSTEM
   Drop-in polish layer
   ------------------------------------------------------------------------
   Goals:
   - Subtle blue-white page atmosphere
   - Revlo blue remains the primary brand accent
   - White content surfaces for hierarchy and readability
   - Premium SaaS/startup spacing, borders and shadows
   - Strong accessibility/focus states
   - Responsive behavior without changing the existing HTML structure
   ======================================================================== */

:root{
    --revlo-blue:#2563EB;
    --revlo-blue-hover:#1D4ED8;
    --revlo-blue-deep:#123A78;
    --revlo-blue-ink:#0B2345;
    --revlo-blue-soft:#EFF6FF;
    --revlo-blue-wash:#F7FAFF;
    --revlo-blue-wash-2:#F2F6FC;

    --revlo-ink:#111827;
    --revlo-ink-soft:#475569;
    --revlo-muted:#64748B;

    --revlo-surface:#FFFFFF;
    --revlo-surface-soft:#F8FBFF;
    --revlo-border:#E3EAF4;
    --revlo-border-strong:#D5E0EF;

    --revlo-success:#16A34A;
    --revlo-danger:#EF4444;
    --revlo-teal:#14B8A6;

    --revlo-shadow-sm:0 8px 24px rgba(15,23,42,.05);
    --revlo-shadow-md:0 18px 45px rgba(15,23,42,.07);
    --revlo-shadow-lg:0 30px 75px rgba(37,99,235,.10);

    --revlo-radius-sm:14px;
    --revlo-radius-md:20px;
    --revlo-radius-lg:26px;
    --revlo-radius-xl:30px;

    --revlo-container:1240px;
}

/* ------------------------------------------------------------------------
   PAGE ATMOSPHERE
   The body remains visually white, but carries a very subtle blue undertone.
   ------------------------------------------------------------------------ */

body:has(.intel-hero){
    background:
        radial-gradient(circle at 8% 0%,rgba(37,99,235,.035),transparent 30%),
        radial-gradient(circle at 92% 18%,rgba(59,130,246,.025),transparent 28%),
        var(--revlo-blue-wash);
    color:var(--revlo-ink);
}

body:has(.intel-hero) .container{
    width:min(calc(100% - 48px),var(--revlo-container));
}

/* ------------------------------------------------------------------------
   GLOBAL TYPOGRAPHY / MEDIA SAFETY
   ------------------------------------------------------------------------ */

.intel-hero,
.ai-copilot,
.ai-engine,
.why-ai,
.ai-capabilities,
.intelligence-dashboard,
.predictive-maintenance,
.fuel-intelligence-ai,
.financial-intelligence,
.smart-alerts,
.recommendation-engine,
.learning-timeline,
.ai-story,
.intel-faq,
.intel-final-cta{
    position:relative;
}

.intel-hero *,
.ai-copilot *,
.ai-engine *,
.why-ai *,
.ai-capabilities *,
.intelligence-dashboard *,
.predictive-maintenance *,
.fuel-intelligence-ai *,
.financial-intelligence *,
.smart-alerts *,
.recommendation-engine *,
.learning-timeline *,
.ai-story *,
.intel-faq *,
.intel-final-cta *{
    box-sizing:border-box;
}

.intel-content h1,
.intel-section-header h2,
.prediction-content h2,
.intel-final-cta h2{
    letter-spacing:-.035em;
}

.intel-content p,
.intel-section-header p,
.prediction-content p,
.action-card p,
.chat-bubble,
.ai-capability-card p,
.intel-score-card p,
.timeline-event p,
.analysis-list div,
.financial-ai-card li,
.recommendation-card p,
.story-card p,
.intel-faq-answer{
    color:var(--revlo-ink-soft);
}

/* ------------------------------------------------------------------------
   SECTION BACKGROUNDS
   The requested bluish-white is used as the page's soft canvas. Individual
   cards remain white so the page does not become visually flat.
   ------------------------------------------------------------------------ */

.intel-hero{
    background:
        radial-gradient(circle at 88% 10%,rgba(37,99,235,.105),transparent 30%),
        radial-gradient(circle at 8% 82%,rgba(96,165,250,.065),transparent 28%),
        linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 72%,#F3F7FD 100%);
}

.ai-copilot,
.intelligence-dashboard,
.fuel-intelligence-ai,
.smart-alerts,
.learning-timeline,
.intel-faq{
    background:#FFFFFF;
}

.ai-engine,
.why-ai,
.ai-capabilities,
.predictive-maintenance,
.financial-intelligence,
.recommendation-engine,
.ai-story{
    background:var(--revlo-blue-wash);
}

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

.intel-hero{
    min-height:680px;
    padding:136px 0 112px;
    border-bottom:1px solid rgba(227,234,244,.8);
}

.intel-hero::before{
    background-image:
        linear-gradient(rgba(37,99,235,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,99,235,.028) 1px,transparent 1px);
    background-size:72px 72px;
    opacity:.65;
}

.intel-hero-grid{
    grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
    gap:72px;
}

.intel-badge,
.intel-section-tag{
    background:rgba(239,246,255,.88);
    border:1px solid rgba(37,99,235,.10);
    box-shadow:0 6px 18px rgba(37,99,235,.045);
}

.intel-content h1{
    color:var(--revlo-ink);
    font-size:clamp(3.25rem,5.1vw,4.65rem);
    line-height:1.03;
    max-width:760px;
}

.intel-content h1 span,
.intel-section-header h2 span,
.prediction-content h2 span{
    color:var(--revlo-blue);
}

.intel-content p{
    max-width:670px;
    font-size:1.08rem;
    line-height:1.85;
    color:#536176;
}

/* ------------------------------------------------------------------------
   BUTTONS — scoped so the page can coexist with the site's global buttons
   ------------------------------------------------------------------------ */

.intel-buttons .btn,
.intel-final-cta .btn{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 24px;
    border-radius:13px;
    font-weight:700;
    letter-spacing:-.01em;
    text-decoration:none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.intel-buttons .btn-primary{
    background:var(--revlo-blue);
    color:#fff;
    border:1px solid var(--revlo-blue);
    box-shadow:0 12px 24px rgba(37,99,235,.18);
}

.intel-buttons .btn-primary:hover{
    background:var(--revlo-blue-hover);
    border-color:var(--revlo-blue-hover);
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(37,99,235,.23);
}

.intel-buttons .btn-outline{
    background:#fff;
    color:var(--revlo-blue);
    border:1px solid #C9D8EC;
    box-shadow:0 8px 20px rgba(15,23,42,.045);
}

.intel-buttons .btn-outline:hover{
    background:var(--revlo-blue-soft);
    border-color:#AFC5E4;
    transform:translateY(-2px);
}

/* ------------------------------------------------------------------------
   COMMON SECTION HEADER
   ------------------------------------------------------------------------ */

.intel-section-header{
    max-width:820px;
    margin-bottom:68px;
}

.intel-section-tag{
    color:var(--revlo-blue);
    padding:8px 15px;
    font-size:.74rem;
    letter-spacing:.1em;
}

.intel-section-header h2{
    color:var(--revlo-ink);
    font-size:clamp(2.25rem,4vw,3.15rem);
    line-height:1.1;
    margin-bottom:22px;
}

.intel-section-header p{
    font-size:1.06rem;
    line-height:1.85;
}

/* ------------------------------------------------------------------------
   WHITE CARDS
   ------------------------------------------------------------------------ */

.intel-card,
.chat-window,
.action-card,
.engine-node,
.comparison-table,
.ai-capability-card,
.intel-score-card,
.prediction-card,
.fuel-analysis,
.financial-ai-card,
.alert-content,
.recommendation-card,
.learning-step,
.story-card,
.intel-faq-item{
    background:rgba(255,255,255,.96);
    border-color:var(--revlo-border);
    box-shadow:var(--revlo-shadow-sm);
}

.intel-card,
.chat-window,
.prediction-card,
.fuel-analysis{
    box-shadow:var(--revlo-shadow-lg);
}

.intel-card{
    border-radius:var(--revlo-radius-xl);
    padding:38px;
}

.intel-card::before{
    background:
        radial-gradient(circle at 92% 0%,rgba(37,99,235,.09),transparent 46%);
}

.intel-grid div{
    background:var(--revlo-surface-soft);
    border-color:var(--revlo-border);
    border-radius:16px;
}

.intel-grid div:hover{
    transform:translateY(-4px);
    border-color:#B8CDF0;
    background:#fff;
    box-shadow:0 16px 34px rgba(37,99,235,.08);
}

.intel-grid h2{
    color:var(--revlo-blue);
}

.intel-score{
    background:linear-gradient(135deg,#EFF6FF 0%,#FFFFFF 100%);
    border-color:#D8E5F6;
}

/* ------------------------------------------------------------------------
   COPILOT
   ------------------------------------------------------------------------ */

.ai-copilot{
    padding:124px 0;
}

.chat-window{
    border-radius:var(--revlo-radius-lg);
    padding:34px;
}

.chat-avatar,
.ai-avatar{
    background:linear-gradient(135deg,var(--revlo-blue),#4F8DF7);
    box-shadow:0 10px 22px rgba(37,99,235,.18);
}

.chat-bubble{
    background:#F8FBFF;
    border-color:var(--revlo-border);
    border-radius:18px;
}

.action-card{
    border-radius:var(--revlo-radius-md);
    padding:30px;
}

.action-card:hover{
    transform:translateY(-5px);
    border-color:#B8CDF0;
    box-shadow:0 20px 42px rgba(37,99,235,.09);
}

.action-card i,
.ai-capability-card i,
.story-card i,
.financial-ai-card i{
    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);
}

/* ------------------------------------------------------------------------
   AI ENGINE
   ------------------------------------------------------------------------ */

.ai-engine,
.ai-capabilities,
.predictive-maintenance,
.financial-intelligence,
.recommendation-engine,
.ai-story{
    border-top:1px solid rgba(219,229,242,.72);
    border-bottom:1px solid rgba(219,229,242,.72);
}

.engine-node{
    border-radius:22px;
}

.engine-node:hover{
    transform:translateY(-6px);
    border-color:#B7CCEF;
    box-shadow:0 20px 42px rgba(37,99,235,.09);
}

.ai-core{
    background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 58%,#4F8DF7 100%);
    box-shadow:0 20px 45px rgba(37,99,235,.22);
}

/* ------------------------------------------------------------------------
   COMPARISON
   ------------------------------------------------------------------------ */

.comparison-table{
    border-radius:24px;
    box-shadow:var(--revlo-shadow-md);
}

.comparison-header{
    padding:28px;
}

.comparison-header.old{
    background:#F8FAFD;
    color:#64748B;
}

.comparison-header.new{
    background:linear-gradient(135deg,#1746B0,#2563EB);
}

.comparison-item{
    background:#fff;
    border-color:#E8EDF4;
    color:var(--revlo-ink-soft);
}

.comparison-item.highlight{
    background:#F2F7FF;
    color:#1D4ED8;
}

/* ------------------------------------------------------------------------
   CAPABILITIES / DASHBOARD / SCORES
   ------------------------------------------------------------------------ */

.ai-capability-card,
.intel-score-card,
.financial-ai-card,
.recommendation-card{
    border-radius:24px;
}

.ai-capability-card::before{
    height:3px;
    background:linear-gradient(90deg,#2563EB,#7DB1FF);
}

.ai-capability-card:hover,
.intel-score-card:hover,
.financial-ai-card:hover,
.recommendation-card:hover{
    transform:translateY(-6px);
    border-color:#B9CDEE;
    box-shadow:0 24px 52px rgba(37,99,235,.095);
}

.score-ring::before{
    box-shadow:inset 0 0 0 1px rgba(227,234,244,.8);
}

.score-purple{
    background:conic-gradient(#2563EB 0% 96%,#E4EAF2 96%);
}

.score-orange{
    background:conic-gradient(#2563EB 0% 91%,#E4EAF2 91%);
}

.score-green{
    background:conic-gradient(#16A34A 0% 94%,#E4EAF2 94%);
}

.score-blue{
    background:conic-gradient(#2563EB 0% 89%,#E4EAF2 89%);
}

.score-red{
    background:conic-gradient(#EF4444 0% 87%,#E4EAF2 87%);
}

.score-teal{
    background:conic-gradient(#14B8A6 0% 92%,#E4EAF2 92%);
}

/* ------------------------------------------------------------------------
   PREDICTIVE MAINTENANCE / FUEL / FINANCE
   ------------------------------------------------------------------------ */

.prediction-item{
    background:#fff;
    border-color:var(--revlo-border);
    border-radius:16px;
}

.prediction-item:hover{
    transform:translateX(5px);
    border-color:#B9CDEE;
    box-shadow:0 16px 32px rgba(37,99,235,.075);
}

.prediction-card,
.fuel-analysis{
    border-radius:26px;
}

.prediction-header span,
.prediction-item strong{
    color:var(--revlo-blue);
}

.fuel-ai-card{
    background:#fff;
    border-color:var(--revlo-border);
    border-radius:22px;
}

.fuel-ai-card:hover{
    transform:translateY(-6px);
    border-color:#B9CDEE;
    box-shadow:0 20px 40px rgba(37,99,235,.08);
}

.analysis-list div{
    background:#F8FBFF;
    border:1px solid transparent;
}

.analysis-list div:hover{
    background:#EFF6FF;
    border-color:#D9E7F8;
}

.financial-ai-card li{
    border-bottom-color:#EDF1F6;
}

/* ------------------------------------------------------------------------
   ALERTS / RECOMMENDATIONS / LEARNING
   ------------------------------------------------------------------------ */

.alerts-timeline::before,
.story-timeline::before{
    width:2px;
    background:linear-gradient(to bottom,#2563EB,#9CC4FF);
}

.alert-content,
.story-card{
    border-radius:22px;
}

.alert-content:hover,
.story-card:hover{
    transform:translateX(6px);
    border-color:#B9CDEE;
    box-shadow:0 22px 46px rgba(37,99,235,.09);
}

.alert-content::before,
.story-card::before{
    background:#2563EB;
    border-color:#fff;
    box-shadow:0 0 0 2px #2563EB,0 4px 12px rgba(37,99,235,.18);
}

.recommendation-card::before{
    color:#1D4ED8;
    background:#EFF6FF;
    border:1px solid #DCE9FA;
}

.learning-step{
    border-radius:22px;
}

.learning-step:hover{
    transform:translateY(-6px);
    border-color:#B9CDEE;
    background:#F4F8FF;
    box-shadow:0 20px 42px rgba(37,99,235,.09);
}

/* ------------------------------------------------------------------------
   STORY / FAQ
   ------------------------------------------------------------------------ */

.intel-faq-item{
    border-radius:16px;
}

.intel-faq-item:hover{
    border-color:#B9CDEE;
    box-shadow:0 10px 24px rgba(37,99,235,.055);
}

.intel-faq-question{
    color:var(--revlo-ink);
}

.intel-faq-question:hover{
    color:var(--revlo-blue);
}

.intel-faq-answer{
    color:#536176;
}

/* ------------------------------------------------------------------------
   FINAL CTA — deliberate high-contrast climax
   ------------------------------------------------------------------------ */

.intel-final-cta{
    padding:132px 0;
    background:
        radial-gradient(circle at 88% 8%,rgba(147,197,253,.24),transparent 34%),
        radial-gradient(circle at 10% 92%,rgba(96,165,250,.14),transparent 32%),
        linear-gradient(135deg,#0A2347 0%,#1746B0 48%,#2563EB 100%);
}

.intel-final-cta::before{
    background-image:
        linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
    background-size:72px 72px;
    opacity:.25;
}

.intel-final-cta h2{
    letter-spacing:-.04em;
}

.intel-final-cta .btn-primary{
    background:#fff;
    color:#1746B0;
    border:1px solid #fff;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.intel-final-cta .btn-primary:hover{
    background:#F5F8FC;
    color:#123A78;
    transform:translateY(-2px);
}

.intel-final-cta .btn-outline{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.58);
    color:#fff;
    backdrop-filter:blur(8px);
}

.intel-final-cta .btn-outline:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff;
    transform:translateY(-2px);
}

/* ------------------------------------------------------------------------
   FOCUS / ACCESSIBILITY
   ------------------------------------------------------------------------ */

.intel-hero a:focus-visible,
.ai-copilot a:focus-visible,
.ai-engine a:focus-visible,
.why-ai a:focus-visible,
.ai-capabilities a:focus-visible,
.intelligence-dashboard a:focus-visible,
.predictive-maintenance a:focus-visible,
.fuel-intelligence-ai a:focus-visible,
.financial-intelligence a:focus-visible,
.smart-alerts a:focus-visible,
.recommendation-engine a:focus-visible,
.learning-timeline a:focus-visible,
.ai-story a:focus-visible,
.intel-faq a:focus-visible,
.intel-final-cta a:focus-visible,
.intel-faq-question:focus-visible,
.intel-buttons .btn:focus-visible,
.intel-final-cta .btn:focus-visible{
    outline:3px solid rgba(37,99,235,.28);
    outline-offset:3px;
}

/* Prevent accidental horizontal overflow from decorative timelines. */
.intel-hero,
.ai-copilot,
.ai-engine,
.why-ai,
.ai-capabilities,
.intelligence-dashboard,
.predictive-maintenance,
.fuel-intelligence-ai,
.financial-intelligence,
.smart-alerts,
.recommendation-engine,
.learning-timeline,
.ai-story,
.intel-faq,
.intel-final-cta{
    overflow:hidden;
}

/* ------------------------------------------------------------------------
   RESPONSIVE PRODUCTION PASS
   ------------------------------------------------------------------------ */

@media (max-width:1199px){
    body:has(.intel-hero) .container{
        width:min(calc(100% - 40px),1160px);
    }

    .intel-hero{
        padding-top:118px;
    }

    .intel-hero-grid{
        gap:54px;
    }
}

@media (max-width:1024px){
    .intel-hero{
        min-height:auto;
    }

    .intel-hero-grid,
    .copilot-grid,
    .prediction-grid{
        grid-template-columns:1fr;
    }

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

    .intel-content h1,
    .intel-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .intel-buttons{
        justify-content:center;
    }

    .intel-card{
        max-width:760px;
        margin-inline:auto;
    }
}

@media (max-width:991px){
    .capability-grid,
    .dashboard-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fuel-ai-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .comparison-table{
        grid-template-columns:1fr;
    }

    .alerts-timeline::before,
    .story-timeline::before{
        left:17px;
    }

    .alert-item,
    .story-step{
        gap:24px;
    }

    .alert-date,
    .story-time{
        width:72px;
    }
}

@media (max-width:768px){
    body:has(.intel-hero) .container{
        width:min(calc(100% - 32px),680px);
    }

    .intel-hero{
        padding:92px 0 72px;
    }

    .ai-copilot,
    .ai-engine,
    .why-ai,
    .ai-capabilities,
    .intelligence-dashboard,
    .predictive-maintenance,
    .fuel-intelligence-ai,
    .financial-intelligence,
    .smart-alerts,
    .recommendation-engine,
    .learning-timeline,
    .ai-story,
    .intel-faq{
        padding:84px 0;
    }

    .intel-final-cta{
        padding:92px 0;
    }

    .intel-content h1{
        font-size:clamp(2.45rem,9vw,3.2rem);
    }

    .intel-section-header h2,
    .prediction-content h2{
        font-size:clamp(2rem,7vw,2.65rem);
    }

    .intel-section-header{
        margin-bottom:52px;
    }

    .capability-grid,
    .dashboard-grid,
    .fuel-ai-grid,
    .financial-ai-grid,
    .recommendation-grid,
    .analysis-list{
        grid-template-columns:1fr;
    }

    .intel-card,
    .chat-window,
    .prediction-card,
    .fuel-analysis{
        padding:26px;
        border-radius:22px;
    }

    .action-card,
    .ai-capability-card,
    .financial-ai-card,
    .recommendation-card,
    .story-card{
        padding:28px;
    }

    .intel-grid{
        grid-template-columns:1fr;
    }

    .engine-flow,
    .learning-flow{
        flex-direction:column;
    }

    .engine-arrow,
    .learning-arrow{
        transform:rotate(90deg);
    }

    .alert-item,
    .story-step{
        flex-direction:column;
        gap:12px;
    }

    .alert-date,
    .story-time{
        width:100%;
        text-align:left;
        padding:0 0 0 38px;
    }

    .alert-content,
    .story-card{
        margin-left:38px;
    }

    .alerts-timeline::before,
    .story-timeline::before{
        left:14px;
    }

    .alert-content::before,
    .story-card::before{
        left:-10px;
    }

    .intel-final-cta h2{
        font-size:clamp(2.15rem,8vw,2.8rem);
    }

    .intel-final-cta .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .intel-final-cta .btn{
        width:100%;
    }
}

@media (max-width:480px){
    body:has(.intel-hero) .container{
        width:calc(100% - 24px);
    }

    .intel-hero{
        padding:78px 0 58px;
    }

    .ai-copilot,
    .ai-engine,
    .why-ai,
    .ai-capabilities,
    .intelligence-dashboard,
    .predictive-maintenance,
    .fuel-intelligence-ai,
    .financial-intelligence,
    .smart-alerts,
    .recommendation-engine,
    .learning-timeline,
    .ai-story,
    .intel-faq{
        padding:70px 0;
    }

    .intel-final-cta{
        padding:78px 0;
    }

    .intel-badge{
        padding:8px 14px;
        font-size:.72rem;
    }

    .intel-content h1{
        font-size:2.18rem;
    }

    .intel-content p{
        font-size:1rem;
        line-height:1.75;
    }

    .intel-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .intel-buttons .btn{
        width:100%;
    }

    .intel-card,
    .chat-window,
    .prediction-card,
    .fuel-analysis,
    .action-card,
    .ai-capability-card,
    .financial-ai-card,
    .recommendation-card,
    .story-card{
        padding:22px;
    }

    .intel-score-card{
        padding:26px 20px;
    }

    .comparison-header,
    .comparison-item{
        padding:21px;
    }

    .score-ring{
        width:126px;
        height:126px;
    }

    .score-ring::before{
        width:96px;
        height:96px;
    }

    .score-ring span{
        font-size:1.9rem;
    }

    .alert-content,
    .story-card{
        margin-left:34px;
    }

    .alert-date,
    .story-time{
        padding-left:34px;
    }

    .alerts-timeline::before,
    .story-timeline::before{
        left:12px;
    }

    .alert-content::before,
    .story-card::before{
        left:-10px;
    }
}

@media (prefers-reduced-motion:reduce){
    .intel-hero *,
    .ai-copilot *,
    .ai-engine *,
    .why-ai *,
    .ai-capabilities *,
    .intelligence-dashboard *,
    .predictive-maintenance *,
    .fuel-intelligence-ai *,
    .financial-intelligence *,
    .smart-alerts *,
    .recommendation-engine *,
    .learning-timeline *,
    .ai-story *,
    .intel-faq *,
    .intel-final-cta *{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}