:root {
    --brand: #6366F1;
}

/* Section title accent */
.section-title {
    position: relative;
}

    .section-title::after {
        content: "";
        display: block;
        width: 56px;
        height: 3px;
        margin-top: .5rem;
        background: var(--brand);
        border-radius: 2px;
    }

/* Feature list as compact cards */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}

.feature-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    padding: .6rem .75rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: .75rem;
    background: #fff;
}

.feature-head {
    font-weight: 600;
    margin-bottom: .1rem;
}

.feature-text {
    color: #4b5563;
}

.feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    box-shadow: 0 0 0 2px rgba(99,102,241,.18);
}

    .feature-icon::after {
        content: "✓";
        font-weight: 700;
        line-height: 1;
    }

/* Branded image frame */
.brand-frame {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(99,102,241,.55) inset, 0 10px 30px rgba(0,0,0,.06);
    border-radius: .75rem;
}

    .brand-frame::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(60% 60% at 20% 10%, rgba(99,102,241,.18), transparent 60%), radial-gradient(50% 50% at 100% 0%, rgba(99,102,241,.12), transparent 55%);
        pointer-events: none;
    }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .feature-item {
        background: rgba(17,24,39,.6);
        border-color: rgba(148,163,184,.22);
    }

    .feature-text {
        color: #cbd5e1;
    }

    .brand-frame {
        box-shadow: 0 0 0 2px rgba(99,102,241,.55) inset, 0 10px 30px rgba(0,0,0,.35);
    }

        .brand-frame::before {
            background: radial-gradient(60% 60% at 20% 10%, rgba(99,102,241,.28), transparent 60%), radial-gradient(50% 50% at 100% 0%, rgba(99,102,241,.22), transparent 55%);
        }
}

/* Brand buttons */
.btn.btn-brand,
a.btn.btn-brand {
    color: #fff !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    transition: all .2s ease !important;
}

    .btn.btn-brand:hover,
    .btn.btn-brand:focus,
    a.btn.btn-brand:hover,
    a.btn.btn-brand:focus {
        color: #fff;
        background-color: var(--brand) !important;
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 .25rem rgba(99,102,241,.35) !important;
    }

.btn.btn-brand-outline,
a.btn.btn-brand-outline {
    color: var(--brand);
    background: transparent;
    border: 2px solid var(--brand);
    transition: all .2s ease;
}

    .btn.btn-brand-outline:hover,
    .btn.btn-brand-outline:focus,
    a.btn.btn-brand-outline:hover,
    a.btn.btn-brand-outline:focus {
        background: var(--brand);
        color: #fff;
        box-shadow: 0 0 0 .25rem rgba(99,102,241,.35);
    }

/* Only non-button links inside the section are purple */
.tattooit-spotlight a:not(.btn) {
    color: var(--brand);
}

/* Small screens */
@media (max-width: 991.98px) {
    .brand-frame {
        margin-bottom: 1rem;
    }
}


/* Stop dark-mode styles for this section */
.tattooit-spotlight,
.tattooit-spotlight .spotlight-card,
.tattooit-spotlight .feature-item {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    .tattooit-spotlight .feature-item {
        background: #fff !important;
        border-color: rgba(15,23,42,.08) !important;
    }

    .tattooit-spotlight .feature-text {
        color: #4b5563 !important;
    }
}
/* FINAL OVERRIDE – brand CTA, wins against theme/background shorthands */
.tattooit-spotlight .spotlight-card .btn.btn-brand,
.tattooit-spotlight .btn.btn-brand,
a.btn.btn-brand {
    background: var(--brand) !important; /* overrides any background shorthand */
    background-color: var(--brand) !important; /* belt & braces */
    background-image: none !important; /* in case a gradient is applied */
    border-color: var(--brand) !important;
    color: #fff !important;
    text-shadow: none !important; /* some themes add this */
    box-shadow: none;
}

    .tattooit-spotlight .btn.btn-brand:hover,
    .tattooit-spotlight .btn.btn-brand:focus,
    a.btn.btn-brand:hover,
    a.btn.btn-brand:focus {
        background: var(--brand) !important;
        background-color: var(--brand) !important;
        background-image: none !important;
        border-color: var(--brand) !important;
        color: #fff !important;
        box-shadow: 0 0 0 .25rem rgba(99,102,241,.35) !important;
    }