/* ============================================================
   SERVICES MODERN VARIANTS
   Bleaching / Digital / Scaling — extends implant-modern.css
   ============================================================ */

/* ---------- BLEACHING (accent: pearl white + soft gold) ---------- */
.implant-hero.bleaching-hero {
    background: radial-gradient(ellipse 800px 400px at 85% 10%, rgba(255,255,255,.20) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 10% 90%, rgba(255,224,181,.35) 0%, transparent 60%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(255,201,74,.14) 0%, transparent 70%), linear-gradient(135deg, #2E4F84 0%, #3D9FD9 55%, #7EC8E3 100%) !important;
}

    .implant-hero.bleaching-hero::after {
        background: radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 60%);
    }

.bleaching-hero .implant-badge {
    border-color: rgba(255,255,255,.55);
    color: #FFFDF8;
}

/* ---------- DIGITAL DENTISTRY (accent: electric blue + cyan) ---------- */
.implant-hero.digital-hero {
    background: radial-gradient(ellipse 800px 400px at 85% 10%, rgba(0,229,255,.18) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 10% 90%, rgba(61,159,217,.40) 0%, transparent 60%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(124,77,255,.10) 0%, transparent 70%), linear-gradient(135deg, #1B2F52 0%, #267ABE 50%, #00B4D8 100%) !important;
}

    .implant-hero.digital-hero::after {
        background: radial-gradient(circle, rgba(0,229,255,.22) 0%, transparent 60%);
    }

.digital-hero .implant-badge {
    border-color: rgba(0,229,255,.55);
    color: #B3F0FF;
}

.digital-hero .implant-title .highlight {
    background: linear-gradient(135deg, #B3F0FF 0%, #00E5FF 50%, #3D9FD9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- SCALING (accent: fresh mint + teal) ---------- */
.implant-hero.scaling-hero {
    background: radial-gradient(ellipse 800px 400px at 85% 10%, rgba(76,222,196,.22) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 10% 90%, rgba(20,184,166,.38) 0%, transparent 60%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(255,224,181,.08) 0%, transparent 70%), linear-gradient(135deg, #223D67 0%, #267ABE 45%, #14B8A6 100%) !important;
}

    .implant-hero.scaling-hero::after {
        background: radial-gradient(circle, rgba(76,222,196,.22) 0%, transparent 60%);
    }

.scaling-hero .implant-badge {
    border-color: rgba(76,222,196,.55);
    color: #CFF7EE;
}

/* ---------- BLEACHING: gold gradient accents ---------- */
.bleaching-hero .implant-title .highlight {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFE0B5 50%, #FFC94A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- SCALING: mint step numbers ---------- */
.scaling-hero ~ * .step-number,
.scaling-hero + .container ~ .implant-section .step-number {
    /* handled below via generic override */
}

/* Step cards accent — per page via wrapper class on body is ideal.
   If no body class, we use feature-context via sibling selectors.
   Fallback: use .scaling-hero parent, sibling .implant-section .step-number */

section.implant-hero.scaling-hero ~ .container .features-strip .feature-tag-icon {
    background: linear-gradient(135deg, #E8FFF8, #CFF7EE);
    color: var(--teal);
}

section.implant-hero.scaling-hero ~ .container .features-strip .feature-tag:hover .feature-tag-icon {
    background: var(--grad-mint);
    color: #fff;
}

section.implant-hero.digital-hero ~ .container .features-strip .feature-tag-icon {
    background: linear-gradient(135deg, #E5F7FF, #B3F0FF);
    color: #0099CC;
}

section.implant-hero.digital-hero ~ .container .features-strip .feature-tag:hover .feature-tag-icon {
    background: linear-gradient(135deg, #00B4D8, #00E5FF);
    color: #fff;
}

section.implant-hero.bleaching-hero ~ .container .features-strip .feature-tag-icon {
    background: linear-gradient(135deg, #FFFDF8, #FFEFD6);
    color: var(--gold-deep);
}

section.implant-hero.bleaching-hero ~ .container .features-strip .feature-tag:hover .feature-tag-icon {
    background: var(--grad-gold);
    color: var(--navy);
}

/* ---------- STEP CARDS: per-page accents via preceding hero sibling ---------- */
section.implant-hero.digital-hero ~ section.implant-section .step-number {
    background: linear-gradient(135deg, #0099CC 0%, #00B4D8 100%);
    box-shadow: 0 10px 25px rgba(0,180,216,.30), inset 0 1px 0 rgba(255,255,255,.25);
}

section.implant-hero.digital-hero ~ section.implant-section .step-card:hover .step-number {
    background: var(--grad-gold);
    color: var(--navy);
    box-shadow: 0 15px 30px rgba(255,201,74,.40), inset 0 1px 0 rgba(255,255,255,.6);
}

section.implant-hero.digital-hero ~ section.implant-section .step-card::before {
    background: linear-gradient(180deg, #00E5FF, #0099CC);
}

section.implant-hero.scaling-hero ~ section.implant-section .step-number {
    background: var(--grad-mint);
    box-shadow: 0 10px 25px rgba(20,184,166,.30), inset 0 1px 0 rgba(255,255,255,.25);
}

section.implant-hero.scaling-hero ~ section.implant-section .step-card:hover .step-number {
    background: var(--grad-gold);
    color: var(--navy);
    box-shadow: 0 15px 30px rgba(255,201,74,.40), inset 0 1px 0 rgba(255,255,255,.6);
}

section.implant-hero.scaling-hero ~ section.implant-section .step-card::before {
    background: linear-gradient(180deg, var(--teal), var(--blue-light));
}

/* Bleaching keeps the default gold step numbers */

/* ---------- BENEFIT CARDS: per-page accents ---------- */
section.implant-hero.digital-hero ~ section.implant-section .benefit-card::after {
    background: linear-gradient(135deg, #00B4D8, #00E5FF);
}

section.implant-hero.scaling-hero ~ section.implant-section .benefit-card::after {
    background: var(--grad-mint);
}
/* Bleaching keeps gold */

/* ---------- NUMERAL LIST: per-page accents ---------- */
section.implant-hero.digital-hero ~ section.implant-section .service_content > ul.numeral li::before {
    background: linear-gradient(135deg, #0099CC, #00E5FF);
    box-shadow: 0 4px 12px rgba(0,180,216,.30);
}

section.implant-hero.scaling-hero ~ section.implant-section .service_content > ul.numeral li::before {
    background: var(--grad-mint);
    box-shadow: 0 4px 12px rgba(20,184,166,.30);
}

section.implant-hero.digital-hero ~ section.implant-section .service_content > ul.numeral::before {
    background: linear-gradient(90deg, #0099CC, #00E5FF);
}

section.implant-hero.scaling-hero ~ section.implant-section .service_content > ul.numeral::before {
    background: linear-gradient(90deg, var(--teal), var(--blue-light));
}

/* ---------- HIGHLIGHT BOX: per-page accents ---------- */
section.implant-hero.digital-hero ~ section.implant-section .highlight-box {
    background: radial-gradient(ellipse 500px 300px at 90% 10%, rgba(0,229,255,.18) 0%, transparent 60%), radial-gradient(ellipse 400px 400px at 10% 90%, rgba(61,159,217,.30) 0%, transparent 60%), linear-gradient(135deg, #1B2F52 0%, #267ABE 50%, #00B4D8 100%);
}

    section.implant-hero.digital-hero ~ section.implant-section .highlight-box ul li::before {
        background: rgba(0,229,255,.25);
        border-color: #ffffff;
    }

    section.implant-hero.digital-hero ~ section.implant-section .highlight-box ul li:hover::before {
        background: #00E5FF;
        color: #1B2F52;
        box-shadow: 0 0 20px rgba(0,229,255,.55);
    }

section.implant-hero.scaling-hero ~ section.implant-section .highlight-box {
    background: radial-gradient(ellipse 500px 300px at 90% 10%, rgba(76,222,196,.20) 0%, transparent 60%), radial-gradient(ellipse 400px 400px at 10% 90%, rgba(20,184,166,.28) 0%, transparent 60%), linear-gradient(135deg, #223D67 0%, #2E4F84 45%, #14B8A6 100%);
}

    section.implant-hero.scaling-hero ~ section.implant-section .highlight-box ul li::before {
        background: rgba(76,222,196,.28);
        border-color: #ffffff;
    }

    section.implant-hero.scaling-hero ~ section.implant-section .highlight-box ul li:hover::before {
        background: var(--teal);
        color: #ffffff;
        box-shadow: 0 0 20px rgba(20,184,166,.55);
    }

/* ---------- CTA BANNER: per-page accents ---------- */
section.implant-hero.digital-hero ~ #cta-section .cta-btn:hover {
    background: #00B4D8;
    box-shadow: 0 18px 40px rgba(0,180,216,.40);
}

section.implant-hero.scaling-hero ~ #cta-section .cta-btn:hover {
    background: var(--teal);
    box-shadow: 0 18px 40px rgba(20,184,166,.40);
}

/* ---------- FAQ: hover accent per page ---------- */
section.implant-hero.digital-hero ~ section#faq .modern-faq .accordion-section-title:hover {
    border-color: #00B4D8 !important;
}

section.implant-hero.digital-hero ~ section#faq .modern-faq .accordion-section-content {
    border-color: #00B4D8;
}

section.implant-hero.scaling-hero ~ section#faq .modern-faq .accordion-section-title:hover {
    border-color: var(--teal) !important;
}

section.implant-hero.scaling-hero ~ section#faq .modern-faq .accordion-section-content {
    border-color: var(--teal);
}
/* Bleaching keeps gold */

/* ---------- RESPONSIVE (inherit from implant-modern.css) ---------- */
@media (max-width: 991px) {
    .implant-hero.bleaching-hero,
    .implant-hero.digital-hero,
    .implant-hero.scaling-hero {
        border-radius: 32px !important;
    }
}

@media (max-width: 576px) {
    .implant-hero.bleaching-hero,
    .implant-hero.digital-hero,
    .implant-hero.scaling-hero {
        border-radius: 24px !important;
    }
}