/* ==========================================================
   REVLO — BLUE BRAND THEME
   Global color tokens / safe override layer

   This file is loaded after the other landing-page section CSS
   files from index.php, so these root tokens can be consumed by
   the existing section styles without changing PHP or JavaScript.
   ========================================================== */

:root{
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-light: #60A5FA;
    --secondary: #60A5FA;

    --brand-blue: #2563EB;
    --brand-blue-dark: #1D4ED8;
    --brand-blue-deep: #1E3A8A;
    --brand-blue-light: #93C5FD;
    --brand-blue-soft: #DBEAFE;

    /* Existing alert tokens are intentionally mapped to blue so
       old red-accent components also follow the new brand. */
    --alert: #2563EB;
    --alert-dark: #1D4ED8;
    --alert-soft: #3B82F6;
    --alert-glow: rgba(37,99,235,.35);

    --ink: #172033;
    --ink-soft: rgba(23,32,51,.62);
    --ink-faint: rgba(23,32,51,.36);

    --paper: #FFFFFF;
}

/* ==========================================================
   REVLO — about.css
   Styling for the "About Us" section (#about / .ab-*)

   Design intent
   ──────────────
   The page already alternates light sections with dark, glowing
   "stage" moments (hero, rd-section, df-section, cta-section).
   About sits directly after df-section and before pricing — as a
   flat white card it read as dead air between two dramatic dark
   sections. This rebuild makes About a stage in the same family:

   - Warm near-black background with soft radial glow, same
     grammar as df-section/cta-section, but keyed to the brand's
     actual PRIMARY orange rather than borrowing df-section's red
     — so About feels related, not duplicated.
   - Red (--alert) is reserved for exactly one job: making the
     "Revlo Pro" track pop forward as an elevated white card,
     mirroring the way df-section lifts its own Revlo column off
     the dark stage. The Personal track stays back in the dark,
     quieter, so the eye has one clear place to land.

   Every value falls back to a literal default via var(--token,
   fallback), matching the pattern already used in .site-footer.
   ========================================================== */

.ab-section{
    --ab-bg:           #07111F;
    --ab-bg-soft:      #0B1730;
    --ab-paper:        var(--paper, #FFFFFF);

    --ab-ink:          #F6F1E9;
    --ab-ink-soft:     rgba(246,241,233,.62);
    --ab-ink-faint:    rgba(246,241,233,.36);
    --ab-line:         rgba(246,241,233,.12);

    --ab-primary:      var(--primary,       #2563EB);
    --ab-primary-dark: var(--primary-dark,  #1D4ED8);
    --ab-primary-light:var(--secondary,     #60A5FA);
    --ab-primary-glow: rgba(37,99,235,.30);
    --ab-primary-wash: rgba(37,99,235,.14);

    --ab-alert:        var(--alert,      #2563EB);
    --ab-alert-dark:   var(--alert-dark, #1D4ED8);
    --ab-alert-soft:   var(--alert-soft, #3B82F6);
    --ab-alert-glow:   rgba(37,99,235,.35);

    --ab-ink-on-paper:      var(--ink,      #172033);
    --ab-ink-on-paper-soft: var(--ink-soft, rgba(43,33,27,.62));
    --ab-ink-on-paper-line: var(--ink-faint,rgba(43,33,27,.10));

    --ab-font-display: var(--font-display, 'DM Serif Display', Georgia, serif);
    --ab-font-body:    var(--font-body,    'Space Grotesk', 'DM Sans', sans-serif);
    --ab-font-mono:    var(--font-mono,    'JetBrains Mono', 'DM Mono', monospace);

    --ab-ease:         var(--ease, cubic-bezier(.4,0,.2,1));

    position: relative;
    background:
        radial-gradient(560px 420px at 14% 8%,  var(--ab-primary-glow), transparent 60%),
        radial-gradient(520px 460px at 90% 88%, rgba(37,99,235,.18), transparent 58%),
        linear-gradient(180deg, var(--ab-bg), var(--ab-bg-soft));
    padding: clamp(84px, 10vw, 136px) 0;
    color: var(--ab-ink);
    overflow: hidden;
    font-family: var(--ab-font-body);
    isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(96,165,250,.05);
}

/* ── faint dot-grid texture, masked to a soft vignette ── */
.ab-backdrop{
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(var(--ab-line) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 68% 60% at 50% 8%, #000 0%, transparent 74%);
            mask-image: radial-gradient(ellipse 68% 60% at 50% 8%, #000 0%, transparent 74%);
    opacity: .55;
    pointer-events: none;
}

.ab-container{
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Header ── */
.ab-header{
    max-width: 760px;
    margin: 0 auto clamp(52px, 6vw, 76px);
    text-align: center;
}

.ab-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ab-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ab-primary-light);
    background: rgba(37,99,235,.10);
    border: 1px solid rgba(37,99,235,.40);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 26px;
    box-shadow: 0 0 0 1px rgba(37,99,235,.06), 0 6px 20px -8px rgba(37,99,235,.45);
}

.ab-eyebrow::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ab-primary-light);
    box-shadow: 0 0 8px 2px rgba(96,165,250,.70);
}

.ab-heading{
    font-family: var(--ab-font-display);
    font-weight: 400;
    font-size: clamp(30px, 4.3vw, 48px);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    color: var(--ab-ink);
}

.ab-heading-accent{
    display: block;
    margin-top: 12px;
    font-family: var(--ab-font-body);
    font-weight: 500;
    font-style: normal;
    font-size: .44em;
    letter-spacing: -.005em;
    color: var(--ab-primary-light);
}

.ab-sub{
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ab-ink-soft);
    margin: 0;
}

/* ── Shared data loop — translucent glass steps on the dark stage ── */
.ab-loop{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 auto clamp(60px, 7vw, 92px);
    max-width: 1010px;
}

.ab-loop-step{
    flex: 1 1 240px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(20,43,76,.42);
    border: 1px solid var(--ab-line);
    border-radius: 16px;
    padding: 22px 20px;
    backdrop-filter: blur(6px);
    transition: border-color .2s var(--ab-ease), background .2s var(--ab-ease), transform .2s var(--ab-ease);
}

.ab-loop-step:hover{
    border-color: rgba(37,99,235,.45);
    background: rgba(30,64,110,.48);
    transform: translateY(-2px);
}

.ab-loop-icon{
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ab-primary-wash);
    color: var(--ab-primary-light);
    font-size: 15px;
    border: 1px solid rgba(37,99,235,.30);
}

.ab-loop-step h4{
    font-family: var(--ab-font-body);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ab-ink);
}

.ab-loop-step p{
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ab-ink-soft);
    margin: 0;
}

.ab-loop-arrow{
    align-self: center;
    flex: none;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ab-ink-faint);
    font-size: 13px;
}

/* ── Two tracks ──────────────────────────────────────────
   Personal stays back in the dark stage, quiet and translucent.
   Pro lifts forward as an elevated white card with a red glow —
   the one moment of high contrast the section is built around.
   ─────────────────────────────────────────────────────────── */
.ab-tracks{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.ab-track{
    position: relative;
    border-radius: 24px;
    padding: 36px;
    background: rgba(18,38,68,.46);
    border: 1px solid var(--ab-line);
    transition: border-color .25s var(--ab-ease), transform .25s var(--ab-ease);
}

.ab-track:hover{
    border-color: rgba(246,241,233,.22);
}

.ab-track-head{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ab-line);
}

.ab-track-icon{
    flex: none;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--ab-primary-wash);
    color: var(--ab-primary-light);
    font-size: 19px;
    border: 1px solid rgba(37,99,235,.30);
}

.ab-track-tag{
    display: block;
    font-family: var(--ab-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ab-ink-faint);
    margin-bottom: 6px;
}

.ab-track-head h3{
    font-family: var(--ab-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.3;
    margin: 0;
    color: var(--ab-ink);
}

.ab-track-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.ab-track-list li{
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ab-track-list i{
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(30,64,110,.48);
    color: var(--ab-ink);
    font-size: 12.5px;
    margin-top: 1px;
    border: 1px solid var(--ab-line);
}

.ab-track-list strong{
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ab-ink);
    margin-bottom: 4px;
    letter-spacing: -.005em;
}

.ab-track-list span{
    display: block;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ab-ink-soft);
}

/* ── The pop: Revlo Pro card lifts off the dark stage ── */
.ab-track--pro{
    background: var(--ab-paper);
    border: 1px solid rgba(37,99,235,.28);
    box-shadow:
        0 0 0 1px rgba(37,99,235,.10),
        0 30px 60px -22px rgba(253,45,45,.45),
        0 8px 24px -8px rgba(0,0,0,.55);
    transform: translateY(-6px);
}

.ab-track--pro:hover{
    border-color: rgba(37,99,235,.40);
    transform: translateY(-10px);
}

.ab-track--pro .ab-track-head{
    border-bottom-color: var(--ab-ink-on-paper-line);
}

.ab-track--pro .ab-track-icon{
    background: linear-gradient(135deg, var(--ab-alert), var(--ab-alert-dark));
    color: #fff;
    border: none;
    box-shadow: 0 8px 18px -6px var(--ab-alert-glow);
}

.ab-track--pro .ab-track-tag{
    color: var(--ab-alert-dark);
}

.ab-track--pro .ab-track-head h3{
    color: var(--ab-ink-on-paper);
}

.ab-track--pro .ab-track-list i{
    background: rgba(37,99,235,.10);
    color: var(--ab-alert-dark);
    border-color: rgba(37,99,235,.22);
}

.ab-track--pro .ab-track-list strong{
    color: var(--ab-ink-on-paper);
}

.ab-track--pro .ab-track-list span{
    color: var(--ab-ink-on-paper-soft);
}

.ab-track-badge{
    position: absolute;
    top: -14px;
    right: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--ab-alert-soft), var(--ab-alert-dark));
    color: #fff;
    font-family: var(--ab-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 20px -6px var(--ab-alert-glow);
}

/* ── Footnote ── */
.ab-footnote{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    max-width: 640px;
    margin: clamp(44px, 5vw, 60px) auto 0;
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(22,46,80,.42);
    border: 1px solid var(--ab-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ab-ink-soft);
}

.ab-footnote i{
    flex: none;
    color: var(--ab-primary-light);
    font-size: 12px;
}

/* ── Responsive ── */
@media (max-width: 860px){
    .ab-tracks{
        grid-template-columns: 1fr;
    }

    .ab-track--pro{
        transform: none;
        order: -1;
    }

    .ab-track--pro:hover{
        transform: none;
    }

    .ab-loop{
        flex-direction: column;
    }

    .ab-loop-arrow{
        width: auto;
        transform: rotate(90deg);
        padding: 2px 0;
    }
}

@media (max-width: 560px){
    .ab-track{
        padding: 26px 22px;
    }

    .ab-track-badge{
        right: 22px;
    }

    .ab-footnote{
        flex-direction: column;
        border-radius: 18px;
        text-align: center;
    }
}

/* ── Reduced motion / accessibility ── */
@media (prefers-reduced-motion: reduce){
    .ab-section *{
        transition: none !important;
    }

    .ab-track--pro{
        transform: none;
    }
}

.ab-section a:focus-visible,
.ab-section button:focus-visible{
    outline: 2px solid var(--ab-primary-light);
    outline-offset: 2px;
}

/* for the footer note  */

/*==========================================================
                ABOUT CLOSING
==========================================================*/

.ab-closing{

    max-width:850px;

    margin:80px auto 0;

    text-align:center;

    padding-top:50px;

    border-top:1px solid rgba(255,255,255,.08);

}

.ab-closing h3{

    font-size:2.3rem;

    color:#ffffff;

    margin-bottom:22px;

    font-weight:800;

    line-height:1.3;

}

.ab-closing p{

    font-size:1.1rem;

    line-height:1.9;

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

    max-width:700px;

    margin:0 auto;

}

/* ==========================================================
   BLUE ACCENT OVERRIDES
   Keeps the existing HTML/JS untouched while making the landing
   page consistently blue wherever the imported section styles
   expose common accent classes.
   ========================================================== */

.btn-primary,
.platform-btn,
.audience-cta-primary,
.rd-cta{
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
    border-color: #2563EB;
    color: #FFFFFF;
}

.btn-primary:hover,
.platform-btn:hover,
.audience-cta-primary:hover,
.rd-cta:hover{
    background: linear-gradient(135deg, #1D4ED8, #1E3A8A);
    border-color: #1D4ED8;
}

.btn-outline{
    border-color: rgba(37,99,235,.45);
    color: #2563EB;
}

.btn-outline:hover{
    background: #2563EB;
    border-color: #2563EB;
    color: #FFFFFF;
}

.section-tag,
.hw-eyebrow,
.rd-eyebrow,
.df-eyebrow,
.ab-eyebrow{
    color: #2563EB;
}

.section-tag{
    border-color: rgba(37,99,235,.28);
    background: rgba(37,99,235,.08);
}

.hero-title-accent,
.hero-title-accent-alt{
    color: #2563EB;
}

.hero-badge-dot,
.status-dot,
.dashboard-meter-live-dot{
    background: #2563EB;
}

/* NOTE: .featured-badge intentionally removed from this list.
   It was swept in here by mistake — it's the whole "REVLO PRO"
   badge (solid blue background), not a small icon/text accent
   like the others below. color:#2563EB made its own text
   invisible against itself (blue text on a blue pill). */
.platform-powered i,
.platform-powered strong,
.platform-card-footer i,
.platform-card-footer span,
.audience-card .card-icon,
.audience-card li i{
    color: #2563EB;
}

.platform-card:hover,
.audience-card:hover,
.pricing-card:hover{
    border-color: rgba(37,99,235,.35);
}

.platform-card.featured,
.audience-card.featured,
.pricing-card.featured-price{
    border-color: rgba(37,99,235,.40);
}

.dashboard-health-fill{
    background: linear-gradient(90deg, #2563EB, #60A5FA);
}

.hero-floating-card i,
.rd-feature__icon,
.rd-callout__icon,
.df-col-icon--revlo,
.df-closing-icon{
    color: #2563EB;
}

.rd-stat__value{
    color: #2563EB;
}

.hw-step__marker,
.hw-line__fill{
    background: #2563EB;
}

.hw-step__icon{
    color: #2563EB;
    border-color: rgba(37,99,235,.28);
    background: rgba(37,99,235,.08);
}

.df-col--revlo{
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 24px 60px -28px rgba(37,99,235,.40);
}

/* NOTE: .df-col--revlo .df-cell i and .df-badge intentionally
   removed from this list — same blue-on-blue collision as
   .featured-badge above. difference.css already sets both of
   these to color:#fff against a solid blue gradient background
   (the checkmark icons and the "ALL-IN-ONE PLATFORM" pill).
   Overriding them to #2563EB here made the text/icon invisible
   against its own background. */
.df-badge{
    color: #2563EB;
}

.pricing-card.featured-price .popular{
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

.pricing-trust i{
    color: #2563EB;
}

.ab-section{
    --ab-primary: #2563EB;
    --ab-primary-dark: #1D4ED8;
    --ab-primary-light: #60A5FA;
    --ab-primary-glow: rgba(37,99,235,.30);
    --ab-primary-wash: rgba(37,99,235,.14);
    --ab-alert: #2563EB;
    --ab-alert-dark: #1D4ED8;
    --ab-alert-soft: #3B82F6;
    --ab-alert-glow: rgba(37,99,235,.35);
}

@media (prefers-reduced-motion: reduce){
    .btn-primary,
    .btn-outline,
    .platform-btn,
    .audience-cta-primary,
    .rd-cta{
        transition: none !important;
    }
}