/* ProTemplate2 — Services PAGE (standalone) */
.pro2-services-page {
    --_bg: var(--primary-bg, #091a2a);
    --_ink: var(--text-color, #eaf2f9);
    --_accent: var(--accent, #06B6D4);
    --_accent2: var(--accent-2, #10B981);
    --_muted: color-mix(in srgb, var(--_ink) 60%, #9fb1c2 40%);
    --_card: color-mix(in srgb, var(--_bg) 86%, #000 14%);
    --_ring: color-mix(in srgb, var(--_accent) 40%, #fff 60%);
    --_glass: rgba(255,255,255,.05);
    color: var(--_ink);
    background: var(--_bg);
    position: relative;
    overflow: hidden;
}

    /* Soft background glow */
    .pro2-services-page::before {
        content: "";
        position: absolute;
        inset: -10% -5% auto -5%;
        height: 40%;
        background: radial-gradient(60% 45% at 15% 0%, color-mix(in srgb, var(--_accent) 14%, transparent), transparent 60%), radial-gradient(60% 45% at 85% 0%, color-mix(in srgb, var(--_accent2) 14%, transparent), transparent 60%);
        opacity: .45;
        pointer-events: none;
        filter: blur(30px);
    }

    /* Container */
    .pro2-services-page .container {
        max-width: 1120px;
        margin: 0 auto;
        padding: 24px;
    }

    /* Optional intro card (no title/subhead duplication) */
    .pro2-services-page .intro-card {
        background: linear-gradient(180deg, color-mix(in srgb, var(--_card) 92%, #fff 8%), var(--_card));
        border-radius: 18px;
        padding: 20px;
        margin: 18px 0 22px;
        box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
    }

    /* Grid */
    .pro2-services-page .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        margin: 10px auto 60px;
        max-width: 1120px;
    }

    /* Card */
    .pro2-services-page .service-card {
        position: relative;
        background: linear-gradient(180deg, color-mix(in srgb, var(--_card) 94%, #fff 6%), var(--_card));
        border-radius: 18px;
        padding: 22px;
        box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 18px;
        align-items: start;
        transform: translateY(8px) scale(.995);
        opacity: 0;
        will-change: transform, opacity;
        transition: transform .35s cubic-bezier(.22,.9,.24,1), opacity .35s ease, box-shadow .25s ease;
    }

        .pro2-services-page .service-card.in {
            transform: none;
            opacity: 1;
        }

        .pro2-services-page .service-card:hover {
            box-shadow: 0 16px 40px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.06) inset;
        }

        /* Accent ring */
        .pro2-services-page .service-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: 18px;
            pointer-events: none;
            background: linear-gradient(120deg, transparent 0 25%, var(--_ring) 35% 65%, transparent 75% 100%);
            opacity: .18;
            transition: opacity .35s ease;
        }

        .pro2-services-page .service-card:hover::before {
            opacity: .32;
        }

    /* Badge / tag */
    .pro2-services-page .badge {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 6px 10px;
        font-size: 11px;
        letter-spacing: .04em;
        background: color-mix(in srgb, var(--_accent) 20%, transparent);
        border: 1px solid color-mix(in srgb, var(--_accent) 40%, transparent);
        color: var(--_ink);
        border-radius: 999px;
    }

    .pro2-services-page .tag {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 6px 10px;
        font-size: 11px;
        letter-spacing: .04em;
        background: color-mix(in srgb, var(--_accent2) 20%, transparent);
        border: 1px solid color-mix(in srgb, var(--_accent2) 40%, transparent);
        color: var(--_ink);
        border-radius: 999px;
    }

    /* Icon chip */
    .pro2-services-page .service-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: color-mix(in srgb, var(--_accent) 14%, transparent);
        color: var(--_accent);
    }

        .pro2-services-page .service-icon svg {
            width: 30px;
            height: 30px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.8;
        }

        .pro2-services-page .service-icon:not(:has(svg)) {
            font-weight: 600;
            font-size: .95rem;
            letter-spacing: .2px;
        }

    /* Title / desc */
    .pro2-services-page .service-title {
        grid-column: 2;
        margin: 2px 0 6px;
        font-size: clamp(1.1rem, .9rem + .8vw, 1.4rem);
        line-height: 1.2;
    }

        .pro2-services-page .service-title a {
            color: inherit;
            text-decoration: underline transparent;
            text-underline-offset: 3px;
        }

    .pro2-services-page .service-card:hover .service-title a {
        text-decoration-color: currentColor;
    }

    .pro2-services-page .service-desc {
        grid-column: 2;
        margin: 0;
        color: var(--_muted);
        line-height: 1.65;
    }

    /* Price */
    .pro2-services-page .service-price {
        grid-column: 2;
        margin: 8px 0 0;
        font-weight: 700;
    }

    /* Bullets */
    .pro2-services-page .service-bullets {
        grid-column: 2;
        margin: 10px 0 0;
        padding-left: 18px;
        color: var(--_ink);
    }

        .pro2-services-page .service-bullets li {
            margin: 4px 0;
            opacity: .9;
        }

    /* Actions */
    .pro2-services-page .service-actions {
        grid-column: 2;
        margin-top: 12px;
    }

    .pro2-services-page .btn-cta {
        display: inline-block;
        padding: 10px 14px;
        border-radius: 12px;
        font-weight: 600;
        background: linear-gradient(90deg, var(--_accent), var(--_accent2));
        color: #06121d;
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

        .pro2-services-page .btn-cta:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
            box-shadow: 0 10px 28px rgba(0,0,0,.32);
        }

    /* Clickable card */
    .pro2-services-page .service-card.is-link {
        cursor: pointer;
    }

/* Narrow screens */
@media (max-width:520px) {
    .pro2-services-page .service-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pro2-services-page .service-icon {
        grid-row: auto;
        width: 56px;
        height: 56px;
    }

    .pro2-services-page .service-title,
    .pro2-services-page .service-desc,
    .pro2-services-page .service-price,
    .pro2-services-page .service-bullets,
    .pro2-services-page .service-actions {
        grid-column: 1;
    }
}

/* Reveal */
.pro2-services-page [data-io] {
    opacity: 0;
    transform: translateY(14px) scale(.985);
}

    .pro2-services-page [data-io].in {
        opacity: 1;
        transform: none;
        transition: opacity .55s ease, transform .6s cubic-bezier(.22,.9,.24,1);
    }

/* Tilt hover */
.pro2-services-page .service-card[data-tilt] {
    transform-style: preserve-3d;
}

/* === THEME-AWARE SERVICE TITLES (gradient + adaptive glow) === */
.pro2-services-page .service-title,
.pro2-services-page .service-title a {
    /* pull from the page's aliased vars */
    --_ink: var(--text-color, #eaf2f9);
    --_accent: var(--accent, #06B6D4);
    --_accent2: var(--accent-2, #10B981);
    /* gradient-ink text */
    --_title-grad: linear-gradient( 0deg, color-mix(in srgb, var(--_ink) 82%, var(--_accent) 18%), color-mix(in srgb, var(--_ink) 82%, var(--_accent2) 18%) );
    background: var(--_title-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* subtle contrast so it doesn’t vanish on light themes */
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

    /* underline stays visible even with transparent text color */
    .pro2-services-page .service-title a {
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-color: color-mix(in srgb, var(--_accent) 65%, var(--_accent2) 35%);
    }

/* hover = gentle glow that reads on dark backgrounds */
.pro2-services-page .service-card:hover .service-title,
.pro2-services-page .service-card:hover .service-title a {
    text-shadow: 0 0 8px color-mix(in srgb, var(--_accent) 45%, transparent), 0 0 18px color-mix(in srgb, var(--_accent2) 35%, transparent);
}

/* darker schemes: a hair more lift so it doesn’t blend */
@media (prefers-color-scheme: dark) {
    .pro2-services-page .service-title,
    .pro2-services-page .service-title a {
        text-shadow: 0 .5px 0 rgba(0,0,0,.5), 0 0 10px color-mix(in srgb, var(--_accent) 28%, transparent);
    }
}

/* fallback if background-clip:text isn’t supported */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .pro2-services-page .service-title,
    .pro2-services-page .service-title a {
        color: var(--_ink);
        text-shadow: none;
    }
}