/*=========================================================
                REVLO PRO™ — MOBILITY SOLUTION
                PUBLIC PRODUCTION STYLESHEET

    MASTER REVLO SYSTEM
    Canvas       #F3F6FA
    Surface      #FFFFFF
    Text         #172033
    Muted        #59677D
    Border       #DFE6EF
    Primary      #2563EB
    Deep Blue    #1D3FD1

    PRODUCT ACCENTS
    Pulse        #FD2D37 / #FB694C
    Care         #10B981
    Drive        #2F5EFF
    Garage       yellow identity

    PRINCIPLE:
    Blue leads. Product colours appear as restrained accents.
=========================================================*/


/*=========================================================
                DESIGN TOKENS
=========================================================*/

.mobility-hero,
.mobility-problem,
.mobility-platform,
.mobility-profit,
.mobility-audience,
.mobility-how,
.mobility-growth,
.mobility-faq,
.mobility-final-cta{

    --revlo-blue:#2563EB;
    --revlo-blue-dark:#1D3FD1;
    --revlo-blue-soft:rgba(37,99,235,.09);
    --revlo-blue-line:rgba(37,99,235,.22);

    --revlo-bg:#F3F6FA;
    --revlo-bg-soft:#F8FAFC;

    --revlo-surface:#FFFFFF;
    --revlo-surface-muted:#F1F5F9;

    --revlo-text:#172033;
    --revlo-muted:#59677D;
    --revlo-soft:#8794A8;

    --revlo-border:#DFE6EF;
    --revlo-border-soft:#EAF0F6;

    --pulse-red:#FD2D37;
    --pulse-orange:#FB694C;

    --care-green:#10B981;
    --care-green-dark:#0C9468;

    --drive-blue:#2F5EFF;

    --revlo-shadow-card:
        0 2px 5px rgba(15,23,42,.025),
        0 10px 28px rgba(15,23,42,.045);

    --revlo-shadow-hover:
        0 6px 12px rgba(15,23,42,.035),
        0 18px 38px rgba(15,23,42,.075);

    --revlo-shadow-deep:
        0 18px 50px rgba(15,23,42,.13);

    --revlo-radius:22px;
    --revlo-radius-lg:28px;
}


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

.mobility-hero *,
.mobility-problem *,
.mobility-platform *,
.mobility-profit *,
.mobility-audience *,
.mobility-how *,
.mobility-growth *,
.mobility-faq *,
.mobility-final-cta{
    box-sizing:border-box;
}

.mobility-hero a,
.mobility-problem a,
.mobility-platform a,
.mobility-profit a,
.mobility-audience a,
.mobility-how a,
.mobility-growth a,
.mobility-faq a,
.mobility-final-cta a{
    text-decoration:none;
}


/*=========================================================
                SHARED SECTION HEADER
=========================================================*/

.mobility-section-heading{
    max-width:820px;

    margin:0 auto 64px;

    text-align:center;
}

.mobility-section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 15px;

    border:1px solid var(--revlo-blue-line);
    border-radius:999px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue-dark);

    font-size:.71rem;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mobility-section-heading h2{
    margin:20px 0 17px;

    color:var(--revlo-text);

    font-size:clamp(2.25rem,4vw,3.25rem);
    line-height:1.12;
    letter-spacing:-.035em;
    font-weight:800;
}

.mobility-section-heading h2 span{
    color:var(--revlo-blue);
}

.mobility-section-heading p{
    max-width:720px;

    margin:0 auto;

    color:var(--revlo-muted);

    font-size:1rem;
    line-height:1.8;
}


/*=========================================================
                BUTTONS
=========================================================*/

.mobility-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:13px;
}

.mobility-btn{
    min-height:50px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 21px;

    border-radius:13px;

    font-size:.9rem;
    font-weight:750;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.mobility-btn-primary{
    background:var(--revlo-blue);
    color:#fff;

    border:1px solid var(--revlo-blue);

    box-shadow:0 12px 28px rgba(37,99,235,.18);
}

.mobility-btn-primary:hover{
    background:var(--revlo-blue-dark);
    border-color:var(--revlo-blue-dark);

    transform:translateY(-2px);

    box-shadow:0 17px 34px rgba(37,99,235,.25);
}

.mobility-btn-secondary{
    background:#fff;
    color:var(--revlo-text);

    border:1px solid var(--revlo-border);
}

.mobility-btn-secondary:hover{
    transform:translateY(-2px);

    color:var(--revlo-blue-dark);

    border-color:var(--revlo-blue-line);

    box-shadow:var(--revlo-shadow-card);
}


/*=========================================================
                HERO
=========================================================*/

.mobility-hero{
    position:relative;

    overflow:hidden;

    padding:108px 0 92px;

    background:
        radial-gradient(circle at 88% 7%,rgba(37,99,235,.10),transparent 32%),
        linear-gradient(180deg,#F3F6FA 0%,#F8FAFC 100%);
}

.mobility-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(23,32,51,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(23,32,51,.022) 1px,transparent 1px);

    background-size:72px 72px;

    pointer-events:none;
}

.mobility-hero .container{
    position:relative;
    z-index:1;
}

.mobility-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:72px;
}

.mobility-hero-copy{
    max-width:650px;
}

.mobility-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:9px 16px;

    border:1px solid var(--revlo-blue-line);
    border-radius:999px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue-dark);

    font-size:.74rem;
    font-weight:800;
    letter-spacing:.08em;
}

.mobility-kicker i{
    color:var(--revlo-blue);
}

.mobility-hero-copy h1{
    margin:23px 0 23px;

    color:var(--revlo-text);

    font-size:clamp(3.1rem,5.5vw,4.75rem);
    line-height:1.02;
    letter-spacing:-.05em;
    font-weight:800;
}

.mobility-hero-copy h1 span{
    display:block;

    color:var(--revlo-blue);
}

.mobility-hero-copy > p{
    max-width:600px;

    margin:0 0 31px;

    color:var(--revlo-muted);

    font-size:1.08rem;
    line-height:1.82;
}

.mobility-proof{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:15px 20px;

    margin-top:19px;

    color:var(--revlo-muted);

    font-size:.75rem;
}

.mobility-proof span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.mobility-proof i{
    color:var(--care-green);
}


/*=========================================================
                BUSINESS DASHBOARD PREVIEW
=========================================================*/

.mobility-dashboard{
    position:relative;

    overflow:hidden;

    border:1px solid var(--revlo-border);
    border-radius:28px;

    background:#fff;

    box-shadow:var(--revlo-shadow-deep);
}

.mobility-dashboard::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:4px;

    background:linear-gradient(90deg,var(--revlo-blue),#5A7DFF);
}

.mobility-window{
    min-height:53px;

    display:flex;
    align-items:center;

    padding:0 18px;

    border-bottom:1px solid var(--revlo-border);

    background:#FBFCFE;
}

.mobility-window-dots{
    display:flex;
    gap:5px;

    margin-right:auto;
}

.mobility-window-dots span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#D6DDE7;
}

.mobility-window > strong{
    color:var(--revlo-muted);

    font-size:.74rem;
}

.mobility-live{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-left:auto;

    color:var(--revlo-blue);

    font-size:.64rem;
    font-weight:700;
}

.mobility-live i{
    font-size:.36rem;
}

.mobility-dashboard-body{
    padding:26px;
}

.mobility-dashboard-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-bottom:20px;
}

.mobility-dashboard-head > div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.mobility-dashboard-head small{
    color:var(--revlo-soft);

    font-size:.61rem;
    font-weight:800;
    letter-spacing:.08em;
}

.mobility-dashboard-head strong{
    color:var(--revlo-text);

    font-size:1.08rem;
}

.mobility-health{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:7px 10px;

    border-radius:999px;

    background:rgba(22,163,74,.09);
    color:#16803B;

    font-size:.62rem;
    font-weight:750;
}

.mobility-health i{
    font-size:.42rem;
}

.mobility-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-bottom:15px;
}

.mobility-metric{
    position:relative;

    padding:16px;

    overflow:hidden;

    border:1px solid var(--revlo-border);
    border-radius:16px;

    background:#FBFCFE;
}

.mobility-metric::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:2px;

    background:var(--revlo-blue);
}

.mobility-metric-profit{
    background:linear-gradient(145deg,#F7FFFB,#FFFFFF);
}

.mobility-metric-profit::after{
    background:var(--care-green);
}

.mobility-metric > span{
    display:block;

    margin-bottom:8px;

    color:var(--revlo-soft);

    font-size:.61rem;
}

.mobility-metric > strong{
    display:block;

    color:var(--revlo-text);

    font-size:1.02rem;
}

.mobility-metric > small{
    display:block;

    margin-top:6px;

    color:var(--revlo-soft);

    font-size:.57rem;
}

.mobility-metric small i{
    color:var(--care-green);
}

.mobility-performance{
    padding:18px;

    border:1px solid var(--revlo-border);
    border-radius:17px;

    background:#FBFCFE;
}

.mobility-performance-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;
}

.mobility-performance-head > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mobility-performance-head strong{
    color:var(--revlo-text);

    font-size:.82rem;
}

.mobility-performance-head span{
    color:var(--revlo-soft);

    font-size:.59rem;
}

.mobility-performance-head > span{
    display:inline-flex;
    align-items:center;
    gap:5px;

    color:var(--revlo-blue);

    font-size:.59rem;
}

.mobility-performance-head > span i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--revlo-blue);
}

.mobility-bars{
    height:105px;

    display:flex;
    align-items:flex-end;

    gap:12px;

    padding:0 4px;
}

.mobility-bars span{
    flex:1;

    min-height:20px;

    border-radius:8px 8px 3px 3px;

    background:linear-gradient(
        to top,
        var(--revlo-blue-dark),
        var(--revlo-blue)
    );

    opacity:.9;
}

.mobility-dashboard-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:15px;
    padding:14px 2px 0;

    border-top:1px solid var(--revlo-border-soft);
}

.mobility-dashboard-foot span{
    display:inline-flex;
    align-items:center;
    gap:7px;

    color:var(--revlo-muted);

    font-size:.62rem;
}

.mobility-dashboard-foot span i{
    color:#8B5CF6;
}

.mobility-dashboard-foot strong{
    color:var(--revlo-blue-dark);

    font-size:.62rem;
}


/*=========================================================
                PROBLEM
=========================================================*/

.mobility-problem{
    padding:118px 0;

    background:#fff;
}

.mobility-problem-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.mobility-problem-card{
    min-height:265px;

    padding:29px;

    border:1px solid var(--revlo-border);
    border-radius:22px;

    background:#fff;

    box-shadow:var(--revlo-shadow-card);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.mobility-problem-card:hover{
    transform:translateY(-6px);

    border-color:var(--revlo-blue-line);

    box-shadow:var(--revlo-shadow-hover);
}

.mobility-problem-icon{
    width:52px;
    height:52px;

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

    margin-bottom:22px;

    border-radius:15px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);

    font-size:1.1rem;
}

.mobility-problem-card > span{
    color:var(--revlo-soft);

    font-family:Consolas,monospace;

    font-size:.63rem;
}

.mobility-problem-card h3{
    margin:11px 0 10px;

    color:var(--revlo-text);

    font-size:1.16rem;
}

.mobility-problem-card p{
    margin:0;

    color:var(--revlo-muted);

    font-size:.84rem;
    line-height:1.7;
}


/*=========================================================
                PLATFORM FEATURES
=========================================================*/

.mobility-platform{
    padding:120px 0;

    background:var(--revlo-bg);
}

.mobility-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.mobility-feature-card{
    position:relative;

    min-height:275px;

    padding:28px;

    border:1px solid var(--revlo-border);
    border-radius:22px;

    background:#fff;

    box-shadow:var(--revlo-shadow-card);

    overflow:hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.mobility-feature-card:hover{
    transform:translateY(-6px);

    border-color:var(--revlo-blue-line);

    box-shadow:var(--revlo-shadow-hover);
}

.mobility-feature-card::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:2px;

    background:var(--revlo-blue);

    opacity:.75;
}

.mobility-feature-icon{
    width:52px;
    height:52px;

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

    margin-bottom:20px;

    border-radius:15px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);

    font-size:1.12rem;
}

.mobility-feature-card > span{
    color:var(--revlo-soft);

    font-size:.62rem;
}

.mobility-feature-card h3{
    margin:11px 0 10px;

    color:var(--revlo-text);

    font-size:1.12rem;
}

.mobility-feature-card p{
    margin:0;

    color:var(--revlo-muted);

    font-size:.82rem;
    line-height:1.7;
}


/*=========================================================
                PROFITABILITY
=========================================================*/

.mobility-profit{
    padding:120px 0;

    background:#fff;
}

.mobility-profit-grid{
    display:grid;
    grid-template-columns:1fr .88fr;

    align-items:center;

    gap:80px;
}

.mobility-profit-copy{
    max-width:620px;
}

.mobility-profit-copy h2{
    margin:20px 0 17px;

    color:var(--revlo-text);

    font-size:clamp(2.3rem,4vw,3.2rem);
    line-height:1.12;
    letter-spacing:-.035em;
}

.mobility-profit-copy h2 span{
    color:var(--revlo-blue);
}

.mobility-profit-copy > p{
    margin:0 0 26px;

    color:var(--revlo-muted);

    line-height:1.8;
}

.mobility-profit-list{
    display:flex;
    flex-direction:column;

    gap:13px;
}

.mobility-profit-list div{
    display:flex;
    align-items:flex-start;
    gap:10px;

    color:var(--revlo-muted);

    font-size:.85rem;
    line-height:1.55;
}

.mobility-profit-list i{
    width:21px;
    height:21px;

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

    flex:0 0 21px;

    margin-top:1px;

    border-radius:50%;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);

    font-size:.56rem;
}

.mobility-profit-card{
    position:relative;

    padding:30px;

    border:1px solid var(--revlo-border);
    border-radius:25px;

    background:#fff;

    box-shadow:var(--revlo-shadow-deep);

    overflow:hidden;
}

.mobility-profit-card::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--revlo-blue),
        #6A8BFF
    );
}

.mobility-profit-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding-bottom:22px;

    border-bottom:1px solid var(--revlo-border-soft);
}

.mobility-profit-top > div:first-child{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.mobility-profit-top span{
    color:var(--revlo-soft);

    font-size:.62rem;
    font-weight:800;
    letter-spacing:.08em;
}

.mobility-profit-top strong{
    color:var(--revlo-text);

    font-size:2.8rem;
    line-height:1;
}

.mobility-profit-top small{
    color:var(--revlo-muted);

    font-size:.65rem;
}

.mobility-profit-icon{
    width:48px;
    height:48px;

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

    border-radius:14px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);
}

.mobility-profit-breakdown{
    display:flex;
    flex-direction:column;

    gap:0;

    padding:8px 0;
}

.mobility-profit-breakdown div{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid var(--revlo-border-soft);

    color:var(--revlo-muted);

    font-size:.76rem;
}

.mobility-profit-breakdown div:last-child{
    border-bottom:0;
}

.mobility-profit-breakdown strong{
    color:var(--revlo-text);
}

.mobility-profit-result{
    margin-top:3px;

    color:var(--revlo-text) !important;

    font-weight:700;
}

.mobility-profit-result strong{
    color:var(--care-green) !important;

    font-size:1rem;
}

.mobility-profit-note{
    display:flex;
    align-items:flex-start;
    gap:8px;

    padding-top:15px;

    border-top:1px solid var(--revlo-border-soft);

    color:var(--revlo-soft);

    font-size:.63rem;
    line-height:1.55;
}

.mobility-profit-note i{
    margin-top:2px;

    color:var(--revlo-blue);
}


/*=========================================================
                AUDIENCE
=========================================================*/

.mobility-audience{
    padding:120px 0;

    background:var(--revlo-bg);
}

.mobility-audience-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:17px;
}

.mobility-audience-card{
    position:relative;

    min-height:280px;

    padding:27px;

    border:1px solid var(--revlo-border);
    border-radius:22px;

    background:#fff;

    box-shadow:var(--revlo-shadow-card);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.mobility-audience-card:hover{
    transform:translateY(-6px);

    border-color:var(--revlo-blue-line);

    box-shadow:var(--revlo-shadow-hover);
}

.mobility-audience-card > i{
    width:50px;
    height:50px;

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

    margin-bottom:20px;

    border-radius:15px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);

    font-size:1.08rem;
}

.mobility-audience-card h3{
    margin:0 0 10px;

    color:var(--revlo-text);

    font-size:1.05rem;
}

.mobility-audience-card p{
    margin:0 0 18px;

    color:var(--revlo-muted);

    font-size:.8rem;
    line-height:1.68;
}

.mobility-audience-card > span{
    color:var(--revlo-soft);

    font-size:.62rem;
}

.mobility-audience-featured{
    border-color:var(--revlo-blue-line);

    background:
        linear-gradient(145deg,#fff,#F7F9FF);
}

.mobility-audience-featured > i{
    background:rgba(37,99,235,.12);
}

.mobility-audience-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-bottom:15px;

    color:var(--revlo-blue-dark);

    font-size:.61rem;
    font-weight:800;
    letter-spacing:.07em;
}

.mobility-audience-badge i{
    width:auto;
    height:auto;

    margin:0;

    background:none;

    font-size:.63rem;
}


/*=========================================================
                HOW IT WORKS
=========================================================*/

.mobility-how{
    padding:120px 0;

    background:#fff;
}

.mobility-steps{
    display:grid;
    grid-template-columns:1fr 60px 1fr 60px 1fr;

    align-items:center;

    max-width:1080px;

    margin:0 auto;
}

.mobility-step{
    min-height:270px;

    padding:28px;

    border:1px solid var(--revlo-border);
    border-radius:22px;

    background:#fff;

    box-shadow:var(--revlo-shadow-card);

    text-align:center;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.mobility-step:hover{
    transform:translateY(-5px);

    border-color:var(--revlo-blue-line);

    box-shadow:var(--revlo-shadow-hover);
}

.mobility-step-number{
    color:#C5CEDB;

    font-family:Consolas,monospace;

    font-size:.62rem;
    font-weight:700;

    text-align:right;
}

.mobility-step-icon{
    width:58px;
    height:58px;

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

    margin:15px auto 20px;

    border-radius:16px;

    background:var(--revlo-blue-soft);
    color:var(--revlo-blue);

    font-size:1.18rem;
}

.mobility-step h3{
    margin:0 0 9px;

    color:var(--revlo-text);

    font-size:1.12rem;
}

.mobility-step p{
    margin:0;

    color:var(--revlo-muted);

    font-size:.81rem;
    line-height:1.7;
}

.mobility-step-connector{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--revlo-blue);

    font-size:.85rem;
}


/*=========================================================
                GROW INTO FLEET
=========================================================*/

.mobility-growth{
    padding:110px 0;

    background:var(--revlo-bg);
}

.mobility-growth-box{
    display:grid;
    grid-template-columns:.82fr 1.18fr;

    align-items:center;

    gap:65px;

    padding:42px;

    border:1px solid var(--revlo-border);

    border-radius:28px;

    background:#fff;

    box-shadow:var(--revlo-shadow-card);
}

.mobility-growth-copy h2{
    margin:20px 0 16px;

    color:var(--revlo-text);

    font-size:2.65rem;
    line-height:1.12;
    letter-spacing:-.035em;
}

.mobility-growth-copy h2 span{
    color:var(--revlo-blue);
}

.mobility-growth-copy p{
    margin:0;

    color:var(--revlo-muted);

    line-height:1.8;
}

.mobility-growth-path{
    display:grid;
    grid-template-columns:1fr 45px 1fr 45px 1fr;

    align-items:center;
}

.mobility-growth-node{
    min-height:160px;

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

    padding:17px;

    border:1px solid var(--revlo-border);

    border-radius:18px;

    background:var(--revlo-bg-soft);

    text-align:center;
}

.mobility-growth-node > span{
    color:var(--revlo-soft);

    font-size:.58rem;
}

.mobility-growth-node i{
    margin:10px 0;

    color:var(--revlo-blue);

    font-size:1.25rem;
}

.mobility-growth-node strong{
    color:var(--revlo-text);

    font-size:.75rem;
}

.mobility-growth-node.active{
    border-color:var(--revlo-blue-line);

    background:var(--revlo-blue-soft);
}

.mobility-growth-line{
    height:1px;

    background:var(--revlo-border);
}


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

.mobility-faq{
    padding:120px 0;

    background:#fff;
}

.mobility-faq-wrapper{
    max-width:880px;

    margin:0 auto;
}

.mobility-faq-item{
    margin-bottom:12px;

    overflow:hidden;

    border:1px solid var(--revlo-border);
    border-radius:17px;

    background:#fff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.mobility-faq-item:hover,
.mobility-faq-item.active{
    border-color:var(--revlo-blue-line);

    box-shadow:var(--revlo-shadow-card);
}

.mobility-faq-question{
    width:100%;

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

    gap:20px;

    padding:22px 24px;

    border:0;

    background:transparent;

    color:var(--revlo-text);

    text-align:left;

    font:inherit;
    font-size:.93rem;
    font-weight:700;

    cursor:pointer;
}

.mobility-faq-question i{
    flex:0 0 auto;

    color:var(--revlo-blue);

    font-size:.82rem;
}

.mobility-faq-item.active .mobility-faq-question{
    color:var(--revlo-blue-dark);
}

.mobility-faq-answer{
    display:none;

    padding:0 24px 22px;

    color:var(--revlo-muted);

    font-size:.84rem;
    line-height:1.8;
}

.mobility-faq-item.active .mobility-faq-answer{
    display:block;
}


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

.mobility-final-cta{
    position:relative;

    overflow:hidden;

    padding:112px 0;

    background:
        radial-gradient(circle at 15% 20%,rgba(255,255,255,.15),transparent 30%),
        radial-gradient(circle at 90% 80%,rgba(255,255,255,.09),transparent 32%),
        linear-gradient(135deg,#2563EB 0%,#1D3FD1 100%);
}

.mobility-final-cta::before{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-235px;
    top:-250px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 90px rgba(255,255,255,.018);

    pointer-events:none;
}

.mobility-cta-box{
    position:relative;
    z-index:1;

    max-width:860px;

    margin:0 auto;

    text-align:center;
}

.mobility-final-cta .mobility-section-tag{
    background:rgba(255,255,255,.13);

    border-color:rgba(255,255,255,.24);

    color:#fff;
}

.mobility-cta-box h2{
    margin:22px 0 17px;

    color:#fff;

    font-size:clamp(2.5rem,5vw,4rem);
    line-height:1.08;
    letter-spacing:-.04em;
}

.mobility-cta-box h2 span{
    display:block;

    color:#DDE7FF;
}

.mobility-cta-box > p{
    max-width:650px;

    margin:0 auto;

    color:rgba(255,255,255,.88);

    font-size:1rem;
    line-height:1.8;
}

.mobility-final-cta .mobility-actions{
    justify-content:center;

    margin-top:32px;
}

.mobility-btn-white{
    background:#fff;
    color:var(--revlo-blue-dark);

    border:1px solid #fff;

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

.mobility-btn-white:hover{
    transform:translateY(-2px);

    background:#F8FAFF;

    box-shadow:0 17px 34px rgba(0,0,0,.16);
}

.mobility-btn-ghost{
    background:rgba(255,255,255,.08);

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

    color:#fff;
}

.mobility-btn-ghost:hover{
    transform:translateY(-2px);

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

    border-color:#fff;
}


/*=========================================================
                RESPONSIVE — 1100px
=========================================================*/

@media(max-width:1100px){

    .mobility-hero-grid{
        grid-template-columns:1fr;

        gap:48px;
    }

    .mobility-hero-copy{
        max-width:760px;

        margin:0 auto;

        text-align:center;
    }

    .mobility-hero-copy > p{
        margin-left:auto;
        margin-right:auto;
    }

    .mobility-actions{
        justify-content:center;
    }

    .mobility-proof{
        justify-content:center;
    }

    .mobility-dashboard{
        width:100%;
        max-width:720px;

        margin:0 auto;
    }

    .mobility-audience-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mobility-profit-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .mobility-profit-copy{
        max-width:760px;

        margin:0 auto;

        text-align:center;
    }

    .mobility-profit-copy > p{
        margin-left:auto;
        margin-right:auto;
    }

    .mobility-profit-list{
        max-width:580px;

        margin:0 auto;

        text-align:left;
    }

    .mobility-profit-card{
        width:100%;
        max-width:620px;

        margin:0 auto;
    }

    .mobility-growth-box{
        grid-template-columns:1fr;

        gap:42px;
    }

    .mobility-growth-copy{
        max-width:680px;

        margin:0 auto;

        text-align:center;
    }

}


/*=========================================================
                RESPONSIVE — 900px
=========================================================*/

@media(max-width:900px){

    .mobility-problem-grid,
    .mobility-feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mobility-steps{
        grid-template-columns:1fr;

        gap:14px;
    }

    .mobility-step{
        min-height:0;
    }

    .mobility-step-connector{
        height:28px;

        transform:rotate(90deg);
    }

    .mobility-growth-path{
        grid-template-columns:1fr;
        gap:10px;
    }

    .mobility-growth-line{
        width:1px;
        height:25px;

        margin:0 auto;
    }

}


/*=========================================================
                RESPONSIVE — 700px
=========================================================*/

@media(max-width:700px){

    .mobility-hero,
    .mobility-problem,
    .mobility-platform,
    .mobility-profit,
    .mobility-audience,
    .mobility-how,
    .mobility-growth,
    .mobility-faq,
    .mobility-final-cta{
        padding-top:78px;
        padding-bottom:78px;
    }

    .mobility-section-heading{
        margin-bottom:47px;
    }

    .mobility-section-heading h2{
        font-size:2.2rem;
    }

    .mobility-hero-copy h1{
        font-size:2.75rem;
    }

    .mobility-hero-copy > p{
        font-size:.96rem;
    }

    .mobility-proof{
        align-items:flex-start;
        flex-direction:column;
        width:max-content;

        margin-left:auto;
        margin-right:auto;

        text-align:left;
    }

    .mobility-metrics{
        grid-template-columns:1fr;
    }

    .mobility-dashboard-body{
        padding:20px;
    }

    .mobility-dashboard-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .mobility-dashboard-foot{
        align-items:flex-start;
        flex-direction:column;
    }

    .mobility-problem-grid,
    .mobility-feature-grid,
    .mobility-audience-grid{
        grid-template-columns:1fr;
    }

    .mobility-profit-top strong{
        font-size:2.4rem;
    }

    .mobility-growth-box{
        padding:27px;
    }

    .mobility-growth-copy h2{
        font-size:2.25rem;
    }

    .mobility-faq-question{
        padding:20px;

        font-size:.86rem;
    }

    .mobility-faq-answer{
        padding:0 20px 20px;

        font-size:.81rem;
    }

    .mobility-cta-box h2{
        font-size:2.35rem;
    }

    .mobility-final-cta .mobility-actions{
        flex-direction:column;
        width:100%;
    }

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

}


/*=========================================================
                REDUCED MOTION
=========================================================*/

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

    .mobility-hero *,
    .mobility-problem *,
    .mobility-platform *,
    .mobility-profit *,
    .mobility-audience *,
    .mobility-how *,
    .mobility-growth *,
    .mobility-faq *,
    .mobility-final-cta{
        animation:none !important;
        transition:none !important;
    }

}