/* =========================================================
   SERVICE DETAIL PAGES — overlay polish
   Scoped to the 6 wrapper classes used by:
     /software-development  (.custom-software-page)
     /web-development       (.custom-web-page)
     /app-development       (.custom-mobile-page)
     /ui-ux                 (.custom-ux-page)
     /it-services           (.custom-it-page)
     /testing-service       (.custom-qa-page)
   Markup is preserved; this only restyles existing elements
   to match the new home/about/services aesthetic.
   ========================================================= */

:where(
    .custom-software-page,
    .custom-web-page,
    .custom-mobile-page,
    .custom-ux-page,
    .custom-it-page,
    .custom-qa-page
) {
    --svc-ink: #0f172a;
    --svc-muted: #475569;
    --svc-brand: #635bff;
    --svc-brand-2: #2563eb;
    --svc-brand-3: #06b6d4;
    --svc-line: #e2e8f0;
}

/* ===== Hero polish ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero {
    padding: 110px 0 50px !important;
    background:
        radial-gradient(900px 500px at 14% 12%, rgba(99,91,255,0.10), transparent 60%),
        radial-gradient(800px 480px at 86% 22%, rgba(6,182,212,0.10), transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero .badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(99, 91, 255, 0.20) !important;
    color: var(--svc-brand) !important;
    transition: transform 0.25s ease, background 0.25s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero .badge:hover {
    transform: translateY(-2px);
    background: rgba(99, 91, 255, 0.10) !important;
}

:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 {
    color: var(--svc-ink) !important;
    letter-spacing: -0.035em !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 strong,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 em,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 b {
    background: linear-gradient(120deg, var(--svc-brand) 0%, var(--svc-brand-2) 55%, var(--svc-brand-3) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: svcShimmer 7s ease-in-out infinite;
    font-style: normal;
    display: inline;
}
@keyframes svcShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h2 {
    color: var(--svc-muted) !important;
}

/* Hero buttons */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero-cta .btn,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero-cta a.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 12px;
    font-weight: 600; font-size: 15px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero-cta .btn:not(.text-light):not(.btn-outline),
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero-cta .btn-primary {
    background: #0a0e1a !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(10,14,26,0.18);
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero-cta .btn:not(.text-light):not(.btn-outline):hover {
    background: linear-gradient(135deg, var(--svc-brand), var(--svc-brand-2)) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(99,91,255,0.32);
}

/* ===== Accent strip between hero and content sections ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero::after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 40px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: linear-gradient(90deg, transparent 0%, var(--svc-brand-2) 25%, var(--svc-brand) 50%, var(--svc-brand-3) 75%, transparent 100%);
    opacity: 0.85;
}

/* ===== Section headings polish ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .section h2 {
    color: var(--svc-ink) !important;
    letter-spacing: -0.025em !important;
    font-weight: 800 !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .section h2 strong,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .section h2 em {
    background: linear-gradient(120deg, var(--svc-brand) 0%, var(--svc-brand-2) 55%, var(--svc-brand-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
    display: inline;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .subtext {
    color: var(--svc-muted) !important;
    font-size: 16px;
    line-height: 1.7;
}

/* ===== Cards polish (hover lift + gradient top accent + icon flip) ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card {
    position: relative;
    border: 1px solid var(--svc-line) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    overflow: hidden;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--svc-brand), var(--svc-brand-2), var(--svc-brand-3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(99, 91, 255, 0.30) !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card:hover::before {
    transform: scaleX(1);
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card .icon {
    background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%) !important;
    border-color: transparent !important;
    color: var(--svc-brand) !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card:hover .icon {
    background: linear-gradient(135deg, var(--svc-brand) 0%, var(--svc-brand-2) 100%) !important;
    color: #fff !important;
    transform: rotate(-6deg) scale(1.06);
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .card h3 {
    color: var(--svc-ink) !important;
    font-size: 17px !important;
}

/* ===== Two-column panels ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .panel {
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
    border: 1px solid var(--svc-line) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(99, 91, 255, 0.25) !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .panel h3 {
    color: var(--svc-ink) !important;
}

/* ===== Steps (process timeline) ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .steps li,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .steps .step {
    transition: transform 0.3s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .steps li:hover,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .steps .step:hover {
    transform: translateY(-2px);
}

/* ===== CTA section (bottom of page) ===== */
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta {
    background:
        radial-gradient(800px 420px at 20% 10%, rgba(99,91,255,0.10), transparent 60%),
        radial-gradient(700px 400px at 85% 20%, rgba(6,182,212,0.10), transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta h2 {
    color: var(--svc-ink) !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta p {
    color: var(--svc-muted) !important;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta a.btn,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: 12px;
    font-weight: 600; font-size: 15px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta a.btn:first-of-type,
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta .btn-primary {
    background: #0a0e1a !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(10,14,26,0.18);
}
:where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .cta a.btn:first-of-type:hover {
    background: linear-gradient(135deg, var(--svc-brand), var(--svc-brand-2)) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(99,91,255,0.32);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    :where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 strong,
    :where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 em,
    :where(.custom-software-page, .custom-web-page, .custom-mobile-page, .custom-ux-page, .custom-it-page, .custom-qa-page) .hero h1 b {
        animation: none !important;
    }
}