/*==========================================================
    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:
        radial-gradient(700px 420px at 12% 0%, rgba(37,99,235,.075), transparent 62%),
        radial-gradient(650px 420px at 90% 100%, rgba(96,165,250,.055), transparent 62%),
        #F4F8FF;
    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(37,99,235,.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;
    isolation: isolate; /* own stacking context so badge/glow/content
                            never fight paint order with other cards */
    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(15,35,65,.12),
        0 1px 0 rgba(255,255,255,.8) inset;
    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(15,35,65,.17);
}

.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;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 2px 6px rgba(0,0,0,.05);
}

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

.audience-cta{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    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);
    gap: .9rem;
}

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

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

.audience-card.featured{
    background: linear-gradient(145deg, #071A33 0%, #0B2345 100%);
    border-color: rgba(37,99,235,.34);
    box-shadow:
        0 24px 60px -28px rgba(15,35,65,.42),
        0 0 0 1px rgba(37,99,235,.08),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.audience-card.featured:hover{
    border-color: rgba(255,255,255,.08);
}

.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);
}

/* --- THE BADGE ---
   Two prior regressions live here, both fixed and guarded against:

   1. position:absolute is load-bearing — it takes the badge out of
      .audience-card's flex flow. No later rule in this file may set
      `position` on .featured-badge again, or a column flex
      container's default cross-axis stretch will blow it full-width.

   2. .color is pinned with higher specificity below because a rule
      in about.css (line ~636) also targets bare `.featured-badge`
      and sets color:#2563EB (blue-on-blue, invisible text). Same
      specificity + later file load order = it was winning. The
      duplicated selector below gives this file's color the edge
      regardless of what else appears later in the cascade. The
      root cause should still be fixed directly in about.css by
      removing `.featured-badge` from that unrelated selector list. */

.featured-badge{
    position: absolute;
    top: -16px;
    right: 2rem;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    width: max-content; /* extra guard against any future flex-stretch */

    font-family: var(--font-mono), 'SFMono-Regular', Consolas, 'Courier New', monospace;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    padding: .5rem 1.05rem;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.28);

    box-shadow:
        0 6px 14px -4px rgba(37,99,235,.55),
        0 2px 5px rgba(15,35,65,.30),
        inset 0 1px 0 rgba(255,255,255,.30);
}

/* Specificity guard: beats a same-file-position, later-loaded
   `.featured-badge { color: #2563EB }` rule from another stylesheet
   (e.g. about.css) without needing !important. */
.audience-card .featured-badge{
    color: #fff;
}

.featured-badge i{
    font-size: .72rem;
    flex-shrink: 0;
}

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

.audience-cta-primary{
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 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(37,99,235,.28),
        0 2px 6px rgba(29,78,216,.20);
}

.audience-cta-primary:hover{
    color: #fff;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 12px 30px rgba(37,99,235,.36),
        0 4px 10px rgba(29,78,216,.26);
    border-color: transparent;
}

/*=========================================
    CARD POWERED BY
=========================================*/

.card-powered{
    display: flex;
    align-items: center;
    gap: .45rem;

    margin-top: .4rem;
    padding-top: 1rem;

    border-top: 1px solid var(--ink-faint);

    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--ink-soft);
}

.card-powered span{
    font-weight: 500;
}

.card-powered strong{
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.01em;
}

.audience-card.featured .card-powered{
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
}

.audience-card.featured .card-powered strong{
    color: var(--secondary);
}

/*=========================================
    RECOMMENDED FOR
=========================================*/

.card-target{
    display: inline-flex;
    align-items: center;

    margin-top: .9rem;
    margin-bottom: 1.5rem;

    padding: .45rem .9rem;

    border-radius: 999px;

    background: var(--paper);
    border: 1px solid var(--ink-faint);

    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;

    color: var(--ink-soft);
}

.audience-card.featured .card-target{
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.78);
}

/*=========================================
    ICON MICRO ANIMATION
=========================================*/

.card-icon{
    transition:
        transform .25s var(--ease),
        background .25s var(--ease),
        color .25s var(--ease);
}

.audience-card:hover .card-icon{
    transform: translateY(-2px);
}

/*=========================================
    SPOTLIGHT GLOW (hover only, sits behind content)
=========================================*/

.audience-card::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;

    background:
        radial-gradient(
            circle at var(--mx,50%) var(--my,0%),
            rgba(37,99,235,.055),
            transparent 55%
        );

    opacity: 0;
    transition: opacity .35s var(--ease);
}

.audience-card:hover::before{
    opacity: 1;
}

.audience-card.featured::before{
    background:
        radial-gradient(
            circle at var(--mx,50%) var(--my,0%),
            rgba(96,165,250,.10),
            transparent 55%
        );
}

/* Content sits above the glow — .featured-badge is deliberately
   excluded (see comment above .featured-badge) so its own
   position:absolute is never overwritten. */
.audience-card > *:not(.featured-badge){
    position: relative;
    z-index: 1;
}

/*=========================================
    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;
    }

    .card-target{
        display: inline-flex;
        width: fit-content;
        margin-bottom: 1.2rem;
    }

}

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

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

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

}

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