.site-about {
    background-color: transparent;
}

.site-about h1,
.site-about .lead {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Design token-based text colors */
.site-about .heading-accent-primary {
    color: var(--color-primary-600);
}

.site-about .heading-accent-secondary {
    color: var(--color-secondary-600);
}

[data-theme="dark"] .site-about .heading-accent-primary {
    color: var(--color-primary-400);
}

[data-theme="dark"] .site-about .heading-accent-secondary {
    color: var(--color-secondary-400);
}

/* Section separators */
.about-section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.about-section:last-child {
    border-bottom: none;
}

/* References coming soon styling */
.references-placeholder {
    background: linear-gradient(135deg, var(--color-surface-100) 0%, var(--color-surface-200) 100%);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .references-placeholder {
    background: linear-gradient(135deg, var(--color-surface-800) 0%, var(--color-surface-900) 100%);
}

/* Deliverable cards */
.deliverable-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.deliverable-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.deliverable-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.price-teaser {
    font-size: 0.875rem;
    color: var(--color-primary-600);
    font-weight: 600;
}

[data-theme="dark"] .price-teaser {
    color: var(--color-primary-400);
}

/* Discount styling */
.discount-badge {
    display: inline-block;
    background: var(--color-danger-500);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    margin-left: 0.5rem;
}

.price-original {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-weight: normal;
    margin-right: 0.5rem;
}

.price-discounted {
    color: var(--color-success-600);
}

[data-theme="dark"] .price-discounted {
    color: var(--color-success-400);
}

.item-discount {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.item-discount-badge {
    font-size: 0.65rem;
    background: var(--color-danger-100);
    color: var(--color-danger-700);
    padding: 0.0625rem 0.25rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
}

[data-theme="dark"] .item-discount-badge {
    background: var(--color-danger-900);
    color: var(--color-danger-300);
}

/* Equal-height offer card sections via CSS Grid subgrid */
@media (min-width: 992px) {
    #offer > .row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    #offer > .row > div {
        width: auto;
        max-width: none;
        grid-row: span 6;
        display: grid;
        grid-template-rows: subgrid;
    }

    #offer .offer-card {
        grid-row: span 6;
        display: grid;
        grid-template-rows: subgrid;
    }

    #offer .offer-card > .card-body {
        grid-row: span 6;
        display: grid;
        grid-template-rows: subgrid;
    }
}

/* Offer cards */
.offer-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.offer-card-featured {
    border: 2px solid var(--color-primary-500) !important;
}

.offer-icon-wrap {
    color: var(--color-primary-600);
}

[data-theme="dark"] .offer-icon-wrap {
    color: var(--color-primary-400);
}

.offer-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}

.badge-free {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

[data-theme="dark"] .badge-free {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success-500);
}

.badge-popular {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

[data-theme="dark"] .badge-popular {
    background: rgba(255, 107, 0, 0.15);
    color: var(--color-primary-400);
}

.offer-price {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.offer-price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.offer-card .fa-check {
    font-size: 0.75rem;
}

/* Reference tiles */
.reference-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.reference-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.reference-tile-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
}

.reference-tile .card-body {
    padding: 1rem 1.25rem;
}

.reference-tile-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.reference-tile-link {
    font-size: 0.8rem;
    color: var(--color-primary-600);
    text-decoration: none;
}

.reference-tile-link:hover {
    text-decoration: underline;
}

[data-theme="dark"] .reference-tile-link {
    color: var(--color-primary-400);
}