/* ═══════════════════════════════════════════════════════════════
   D1 — CARD VISUAL SYSTEM — Variant B "Foil Bevel" (client-approved)
   Layered inner-shadow "embossed foil plaque" depth (light on top,
   shadow on bottom) + diagonal surface gradient, with a real
   diagonal sheen sweep across the card on hover.
   Ported from design-variants/D1-card-system.html
   [data-variant="b"] block, with the ancestor prefix stripped so it
   applies directly as a site-wide override. Load AFTER premium.css.
   Reuses existing tokens from premium.css :root — no new colors.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Shared motion (transition + reduced-motion handling) ───── */
.hero-service-card,
.benefit-item,
.pricing-card,
.problems-block {
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.35s var(--ease-out), background 0.45s var(--ease-out);
    will-change: transform;
}

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

    .hero-service-card,
    .benefit-item,
    .pricing-card,
    .problems-block,
    .hero-service-card *,
    .benefit-item *,
    .pricing-card *,
    .problems-block * {
        transition: none !important;
        animation: none !important;
    }
}

/* ─── Base card surface: embossed foil bevel ──────────────────── */
.hero-service-card,
.benefit-item,
.pricing-card,
.problems-block {
    background: linear-gradient(155deg, #232323 0%, var(--surface) 55%, #121008 100%);
    border: 1px solid var(--border-hover);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.5),
        0 16px 34px -16px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}

/* ─── Diagonal sheen sweep layer (hidden off-canvas at rest) ──── */
.hero-service-card::after,
.benefit-item::after,
.pricing-card::after,
.problems-block::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg,
            transparent 38%,
            rgba(255, 255, 255, 0.06) 46%,
            rgba(201, 162, 85, 0.5) 50%,
            rgba(255, 255, 255, 0.06) 54%,
            transparent 62%);
    transform: translateX(-60%);
    transition: transform 0.85s var(--ease-out);
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ─── Hover state: deeper bevel + lift ─────────────────────────── */
.hero-service-card:hover,
.benefit-item:hover,
.pricing-card:hover {
    border-color: rgba(201, 162, 85, 0.45);
    transform: translateY(-6px);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.55),
        0 26px 50px -16px rgba(0, 0, 0, 0.85),
        0 10px 34px -10px rgba(201, 162, 85, 0.32);
}

/* Sheen sweeps across the card on hover */
.hero-service-card:hover::after,
.benefit-item:hover::after,
.pricing-card:hover::after {
    transform: translateX(60%);
}

/* ─── Featured pricing card variant ────────────────────────────── */
.pricing-card.featured {
    border-color: rgba(201, 162, 85, 0.5);
    background: linear-gradient(155deg, #262218 0%, var(--surface-2) 55%, #14120c 100%);
}

/* ─── Benefit icon: matching foil-bevel treatment ──────────────── */
.benefit-icon {
    background: linear-gradient(155deg, rgba(201, 162, 85, 0.28), rgba(201, 162, 85, 0.1));
    border: 1px solid rgba(201, 162, 85, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}