/*==========================================================
    REVLO — AUDIENCE SECTION
    Two-path split: Personal owners vs. Gig/Commercial drivers.
    Relies on the :root tokens already declared in hero.css
    (--ink, --primary, --alert, --secondary, --success,
    --font-body, --font-mono, --ease). Do not redeclare :root
    here if this file loads alongside hero.css.
==========================================================*/

/*=========================================
    SECTION SHELL
=========================================*/

.audience-section{
    position: relative;
    overflow: hidden;
    background: #FAF8F6;
    padding: 6.5rem 0;
}

.audience-section .container{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.audience-backdrop{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--ink-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-faint) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 45% at 50% 0%, #000 0%, transparent 75%);
    opacity: .25;
}

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

.audience-section .section-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 3.5rem;
}

.audience-section .section-tag{
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--primary-wash);
    border: 1px solid rgba(232,124,18,.22);
    padding: .5rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.4rem;
}

.audience-section .section-header h2{
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 1rem;
}

.audience-section .section-header p{
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
}

/*=========================================
    CARD GRID
=========================================*/

.audience-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: stretch;
}

/*=========================================
    CARD — shared shell
=========================================*/

.audience-card{
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-solid);
    border: 1px solid var(--ink-faint);
    border-radius: 20px;
    padding: 2.4rem 2.2rem 2.2rem;
    box-shadow: 0 20px 50px -24px rgba(26,21,18,.14);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.audience-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 28px 60px -24px rgba(26,21,18,.18);
}

.card-icon{
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-wash);
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.audience-card h3{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0 0 .6rem;
    letter-spacing: -.01em;
}

.audience-card > p{
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 1.6rem;
}

/* --- feature checklist --- */

.audience-card ul{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem 1rem;
    margin: 0 0 2rem;
    padding: 0;
}

.audience-card ul li{
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .86rem;
    font-weight: 500;
    color: var(--ink);
}

.audience-card ul li i{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--success-wash);
    color: var(--success);
    font-size: .62rem;
}

/* --- CTA link, pushed to card bottom regardless of content height --- */

.audience-cta{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    align-self: flex-start;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: .2rem;
    border-bottom: 1.5px solid var(--ink-faint);
    transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}

.audience-cta i{
    font-size: .78rem;
    transition: transform .2s var(--ease);
}

.audience-cta:hover{
    color: var(--primary-dark);
    border-color: var(--primary);
}

.audience-cta:hover i{
    transform: translateX(3px);
}

/*=========================================
    FEATURED CARD — Gig & Commercial (Revlo Pro)
=========================================*/

.audience-card.featured{
    background: var(--ink);
    border-color: var(--ink);
}

.audience-card.featured .card-icon{
    background: rgba(255,255,255,.08);
    color: var(--secondary);
}

.audience-card.featured h3{
    color: #fff;
}

.audience-card.featured > p{
    color: rgba(255,255,255,.62);
}

.audience-card.featured ul li{
    color: rgba(255,255,255,.88);
}

.audience-card.featured ul li i{
    background: rgba(31,157,109,.18);
    color: var(--success);
}

.featured-badge{
    position: absolute;
    top: -14px;
    right: 2.2rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--alert-soft) 0%, var(--alert) 100%);
    padding: .45rem .85rem;
    border-radius: 100px;
    box-shadow: 0 8px 20px -6px rgba(253,45,45,.45);
}

.featured-badge i{
    font-size: .68rem;
}

/* --- primary CTA on the featured card --- */

.audience-cta-primary{
    background: linear-gradient(135deg, var(--alert-soft) 0%, var(--alert) 100%);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: .8rem 1.3rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 26px rgba(253,45,45,.28),
        0 2px 6px rgba(217,28,28,.2);
}

.audience-cta-primary:hover{
    color: #fff;
    background: linear-gradient(135deg, var(--alert) 0%, var(--alert-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 12px 30px rgba(253,45,45,.36),
        0 4px 10px rgba(217,28,28,.26);
    border-color: transparent;
}

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

@media (max-width: 900px){

    .audience-grid{
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .featured-badge{
        right: 1.8rem;
    }

}

@media (max-width: 640px){

    .audience-section{
        padding: 4rem 0;
    }

    .audience-section .container{
        padding: 0 1.25rem;
    }

    .audience-card{
        padding: 2rem 1.5rem 1.85rem;
    }

    .audience-card ul{
        grid-template-columns: 1fr;
    }

}

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

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

    .audience-card,
    .audience-cta,
    .audience-cta i{
        transition: none !important;
    }

}

/*=========================================
    END
=========================================*/