/* =========================================================
   DotNet Expert — Web Development
   Page-specific stylesheet
   Visual language follows the Web Deployment service page.
   Images are intentionally not required.
   ========================================================= */

.wd-page {
    --wd-ink: #303638;
    --wd-heading: #26363b;
    --wd-primary: #118fb8;
    --wd-primary-dark: #076f91;
    --wd-accent: #24bfd3;
    --wd-text: #52656c;
    --wd-muted: #74868d;
    --wd-border: #d7e5e8;
    --wd-soft: #f5fafb;
    --wd-white: #ffffff;
    --wd-green: #2e8b70;
    --wd-orange: #bd7a32;
    --wd-red: #bb5b56;
    --wd-purple: #6d68a7;
    --wd-radius: 20px;
    --wd-shadow: 0 18px 48px rgba(38, 54, 58, .075);
    --wd-shadow-hover: 0 22px 48px rgba(38, 54, 58, .13);
    --wd-ease: cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================
   Hero / page header
   ========================================================= */

.wd-lead,
.wd-text {
    max-width: 900px;
    color: var(--wd-text);
    animation: wdTextIn .7s .12s var(--wd-ease) both;
}

.wd-lead {
    margin: 0 0 17px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.65;
}

.wd-text {
    margin: 0 0 14px;
    color: #5d7077;
    font-size: 17px;
    line-height: 1.82;
}

    .wd-text strong {
        color: var(--wd-heading);
    }

.wd-actions {
    margin-top: 24px;
}

.wd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid var(--wd-primary);
    border-radius: 9px;
    background: linear-gradient(135deg, #159fca, #087aa1);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(21, 159, 202, .16);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

    .wd-btn:hover {
        background: linear-gradient(135deg, #087aa1, #159fca);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(21, 159, 202, .20);
    }

.wd-btn--light {
    background: #fff;
    color: var(--wd-primary-dark);
    border-color: #c9eaf0;
}

    .wd-btn--light:hover {
        background: #f5fafb;
        color: var(--wd-primary-dark);
    }

/* =========================================================
   Common sections
   ========================================================= */

.wd-feature,
.wd-cta {
    position: relative;
    margin: 0;
    padding: 40px 42px;
    border-top: 0;
}

    .wd-feature::before,
    .wd-cta::before {
        content: "";
        position: absolute;
        top: 0;
        left: 42px;
        right: 42px;
        background: var(--wd-border);
    }

.wd-soft {
    background: transparent;
}

.wd-section-head {
    margin-bottom: 24px;
}

.wd-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--wd-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
}

.wd-intro,
.wd-page .page-section p,
.wd-feature p {
    color: var(--wd-text);
    font-size: 15px;
    line-height: 1.78;
}

.wd-intro {
    max-width: 900px;
    margin: 0 0 14px;
}

.wd-note {
    margin-top: 22px;
    padding: 13px 17px;
    border: 1px solid #d2e8ec;
    border-radius: 10px;
    background: #eefafd;
    color: var(--wd-primary-dark);
    font-size: 14px;
    line-height: 1.6;
}

.wd-feature h3 {
    color: var(--wd-heading);
}

.wd-page .page-section h4 {
    margin: 22px 0 10px;
    color: var(--wd-heading);
    font-size: 16px;
    font-weight: 700;
}

/* =========================================================
   Lists — aligned with Web Deployment spacing
   ========================================================= */

.wd-feature ul,
.wd-feature ol,
.wd-panel ul,
.wd-panel ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

.wd-mini-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 12px 0 18px;
    padding: 0;
    list-style: none;
}

.wd-mini-card li {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #d7e8eb;
    border-radius: 10px;
    background: #f5fafb;
    color: var(--wd-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(38,54,58,.035);
    transition: transform .25s var(--wd-ease), border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

    .wd-mini-card li::before {
        content: "";
        flex: 0 0 6px;
        width: 6px;
        height: 6px;
        margin-right: 8px;
        border-radius: 50%;
        background: var(--wd-primary);
        transition: transform .25s var(--wd-ease), box-shadow .25s ease;
    }

    .wd-mini-card li:hover {
        transform: translateY(-3px);
        border-color: #acd9e2;
        background: #eefafd;
        color: var(--wd-primary-dark);
        box-shadow: 0 10px 22px rgba(17,143,184,.12);
    }

        .wd-mini-card li:hover::before {
            transform: scale(1.18);
            box-shadow: 0 0 0 4px rgba(17,143,184,.10);
        }


.wd-feature li,
.wd-panel li {
    margin-bottom: 7px;
    padding-left: 0;
}

    .wd-feature li::marker,
    .wd-panel li::marker {
        color: var(--wd-primary);
    }

/* =========================================================
   Grids / cards
   ========================================================= */

.wd-check-grid,
.wd-process,
.wd-grid-4,
.wd-grid-3,
.wd-grid-2,
.wd-tech-grid,
.wd-tag-grid {
    display: grid;
    gap: 16px;
}

.wd-check-grid,
.wd-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wd-service-grid,
.wd-process,
.wd-grid-3 {
    grid-template-columns: minmax(0, 1fr);
}

.wd-grid-2 {
    grid-template-columns: minmax(0,1fr);
}

.wd-tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wd-tag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-check-card,
.wd-service-card,
.wd-process-item,
.wd-audience-card,
.wd-value-card,
.wd-mini-card,
.wd-panel {
    min-width: 0;
    border: 1px solid var(--wd-border);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 24px rgba(38,54,58,.04);
    transition: transform .48s var(--wd-ease), box-shadow .48s var(--wd-ease), border-color .40s ease;
}

    .wd-check-card:hover,
    .wd-service-card:hover,
    .wd-process-item:hover,
    .wd-audience-card:hover,
    .wd-value-card:hover,
    .wd-mini-card:hover,
    .wd-panel:hover {
        transform: translateY(-3px);
        border-color: #bfdde4;
        box-shadow: 0 14px 32px rgba(38,54,58,.08);
    }

.wd-check-card {
    padding: 16px 18px;
    color: var(--wd-heading);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
}

    .wd-check-card::before {
        content: "✓";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 21px;
        height: 21px;
        margin-right: 9px;
        border-radius: 50%;
        background: linear-gradient(135deg, #087aa1, #22c9df);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(21,159,202,.22);
        font-size: 12px;
        font-weight: 800;
    }

.wd-service-card {
    padding: 20px 20px 18px;
}

    .wd-service-card h3,
    .wd-audience-card h3,
    .wd-value-card h3,
    .wd-panel h3,
    .wd-mini-card h3 {
        margin: 0 0 10px;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.35;
    }

    .wd-service-card p {
        color: var(--wd-text);
        font-size: 15px;
        line-height: 1.75;
    }

    .wd-service-card ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        margin: 12px 0 18px;
        padding: 0;
        list-style: none;
    }

.wd-feature-list {
    margin: 12px 0 18px;
    padding-left: 21px;
}

.wd-service-card ul > li {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #d7e8eb;
    border-radius: 10px;
    background: #f5fafb;
    color: var(--wd-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(38,54,58,.035);
    transition: transform .25s var(--wd-ease), border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

    .wd-service-card ul > li::before {
        content: "";
        flex: 0 0 6px;
        width: 6px;
        height: 6px;
        margin-right: 8px;
        border-radius: 50%;
        background: var(--wd-primary);
        transition: transform .25s var(--wd-ease), box-shadow .25s ease;
    }

    .wd-service-card ul > li:hover {
        transform: translateY(-3px);
        border-color: #acd9e2;
        background: #eefafd;
        color: var(--wd-primary-dark);
        box-shadow: 0 10px 22px rgba(17,143,184,.12);
    }

        .wd-service-card ul > li:hover::before {
            transform: scale(1.18);
            box-shadow: 0 0 0 4px rgba(17,143,184,.10);
        }

.wd-feature-list li {
    margin: 7px 0;
    padding-left: 3px;
}

    .wd-feature-list li::marker {
        color: var(--wd-primary);
    }

.wd-process-item,
.wd-value-card {
    position: relative;
    padding: 22px 22px 22px 22px;
}

    .wd-process-item > span {
        position: absolute;
        top: 22px;
        left: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #e1f7fa;
        color: var(--wd-primary);
        font-size: 12px;
        font-weight: 800;
    }

    .wd-process-item h3 {
        margin: 0 0 10px;
        font-size: 19px;
        line-height: 1.35;
    }

    .wd-process-item p,
    .wd-value-card p,
    .wd-audience-card p,
    .wd-panel p,
    .wd-mini-card p {
        margin: 0;
        color: var(--wd-text);
        font-size: 15px;
        line-height: 1.78;
    }

.wd-audience-card,
.wd-mini-card,
.wd-panel {
    padding: 20px 20px 18px;
}

.wd-feature {
    background: #f7fbfc;
}

.wd-feature-list {
    color: var(--wd-text);
    font-size: 15px;
    line-height: 1.65;
}

    .wd-feature-list li {
        margin-bottom: 7px;
    }

.wd-link {
    display: inline-flex;
    margin-top: 7px;
    color: var(--wd-primary);
    font-weight: 700;
    text-decoration: none;
}

    .wd-link:hover {
        color: var(--wd-primary-dark);
        text-decoration: underline;
    }

.wd-process-item .wd-link,
.wd-mini-card .wd-link,
.wd-panel .wd-link {
    margin-top: 14px;
    font-size: 14px;
}

/* =========================================================
   Technology / tags
   ========================================================= */

.wd-tech-grid > article {
    padding: 23px;
    border: 1px solid #dce7ea;
    border-radius: 14px;
    background: #f7fbfc;
    transition: transform .48s var(--wd-ease), box-shadow .48s var(--wd-ease), border-color .40s ease;
}

    .wd-tech-grid > article:hover {
        transform: translateY(-3px);
        border-color: #bfdde4;
        box-shadow: 0 14px 32px rgba(38,54,58,.08);
    }

.wd-tech-grid h3 {
    margin: 0 0 10px;
    color: var(--wd-heading);
    font-size: 18px;
    font-weight: 700;
}

.wd-tech-grid p {
    margin: 0;
    color: var(--wd-text);
    font-size: 14px;
    line-height: 1.7;
}

.wd-tag-grid {
    margin-top: 22px;
}

    .wd-tag-grid > * {
        padding: 11px 13px;
        border: 1px solid #dce7ea;
        border-radius: 999px;
        background: #f7fbfc;
        color: #58676d;
        font-size: 13px;
        font-weight: 600;
    }

/* =========================================================
   FAQ
   ========================================================= */

.wd-faq {
    border-top: 0;
    padding-top: 40px;
}

    .wd-faq .accordion-item {
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid #dce7ea;
        border-radius: 12px;
        background: #fff;
    }

    .wd-faq .accordion-button {
        padding: 17px 19px;
        color: var(--wd-heading);
        background: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.45;
        box-shadow: none;
    }

        .wd-faq .accordion-button:not(.collapsed) {
            color: var(--wd-primary-dark);
            background: #eefafd;
            box-shadow: none;
        }

        .wd-faq .accordion-button:focus {
            border-color: transparent;
            box-shadow: none;
        }

    .wd-faq .accordion-body {
        padding: 16px 19px 18px;
        color: var(--wd-text);
        background: #fff;
        font-size: 15px;
        line-height: 1.75;
    }

/* =========================================================
   CTA
   ========================================================= */

.wd-cta {
    background: linear-gradient(135deg, #eaf9fc 0%, #f7fbfd 100%);
}

.wd-cta-content {
    padding: 25px;
    border: 1px solid #c9eaf0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(23, 105, 170, .07);
}

.wd-cta-text {
    margin: 0 0 18px;
    color: var(--wd-text);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   Section-specific backgrounds
   ========================================================= */

#wd-requirements {
    background: linear-gradient(135deg, #eefbfd 0%, #ffffff 80%);
}

#wd-services {
    background: #ffffff;
}

#wd-modernization {
    background: linear-gradient(135deg, #fffaf3 0%, #ffffff 82%);
}

#wd-stack {
    background: linear-gradient(135deg, #f2f7f8 0%, #edf4f5 100%);
}

#wd-data-integration {
    background: linear-gradient(135deg, #f2faf7 0%, #ffffff 80%);
}

#wd-process {
    background: linear-gradient(180deg, #edf8fb 0%, #f7fafb 100%);
}

#wd-technologies {
    --section-heading: #ffffff;
    --section-text: #d8edf0;
    --section-accent: #55dced;
    padding-bottom: 56px;
    color: var(--section-text);
    background: linear-gradient(135deg, #10282f 0%, #12343d 52%, #0d242b 100%);
}

#wd-clients {
    background: #ffffff;
}

#wd-why {
    background: linear-gradient(135deg, #edf9fc 0%, #f7fbfc 100%);
}

#wd-faq {
    background: linear-gradient(135deg, #f7fbfc, #ffffff);
}

#wd-contact {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 92% 15%, rgba(34,201,223,.24), transparent 25%), linear-gradient(135deg, #eaf9fc 0%, #f8fcfd 100%);
}

    #wd-contact::after {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        right: -95px;
        bottom: -125px;
        border: 1px solid rgba(21,159,202,.18);
        border-radius: 50%;
        box-shadow: 0 0 0 28px rgba(21,159,202,.035), 0 0 0 56px rgba(21,159,202,.025);
        pointer-events: none;
        transition: transform .55s var(--wd-ease);
    }

    #wd-contact:hover::after {
        transform: scale(1.12);
    }

    #wd-contact .wd-cta-content {
        position: relative;
        z-index: 1;
    }

@keyframes wdFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wdTitleIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wdTextIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1180px) {
    .wd-feature,
    .wd-cta {
        padding-left: 32px;
        padding-right: 32px;
    }

        .wd-feature::before,
        .wd-cta::before {
            left: 32px;
        }

    .wd-check-grid,
    .wd-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Data / Integration panels
   ========================================================= */

.page-main :is( .wd-check-card, .wd-service-card, .wd-mini-card, .wd-panel, .wd-process-item, .wd-audience-card, .wd-value-card, .wd-faq ):hover {
    transform: translateY(-3px);
    border-color: #acd9e2;
    box-shadow: 0 10px 22px rgba(17,143,184,.12);
}

.wd-panel-row {
    display: block;
    margin-top: 18px;
}

.wd-panel-copy {
    display: block;
    max-width: none;
    margin-bottom: 16px;
}

    .wd-panel-copy p,
    .wd-panel-note,
    .wd-panel-label {
        margin: 0;
    }

.wd-panel-lists {
    display: block;
}

.wd-panel-label {
    color: var(--wd-text);
    font-size: 14px;
    font-weight: 700;
}

.wd-panel-tags {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wd-panel-tags li {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        margin: 0;
        padding: 8px 14px;
        border: 1px solid #d7e8eb;
        border-radius: 10px;
        background: #f5fafb;
        color: var(--wd-heading);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(38,54,58,.035);
        transition: transform .25s var(--wd-ease), border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
    }

        .wd-panel-tags li::before {
            content: "";
            flex: 0 0 6px;
            width: 6px;
            height: 6px;
            margin-right: 8px;
            border-radius: 50%;
            background: var(--wd-primary);
            transition: transform .25s var(--wd-ease), box-shadow .25s ease;
        }

        .wd-panel-tags li:hover {
            transform: translateY(-3px);
            border-color: #acd9e2;
            background: #eefafd;
            color: var(--wd-primary-dark);
            box-shadow: 0 10px 22px rgba(17,143,184,.12);
        }

            .wd-panel-tags li:hover::before {
                transform: scale(1.18);
                box-shadow: 0 0 0 4px rgba(17,143,184,.10);
            }

.wd-panel-note {
    color: var(--wd-muted);
    font-size: 14px;
}

.wd-panel--data .wd-panel-copy p {
    margin: 0 0 8px;
}

.wd-panel--data .wd-panel-label {
    margin: 20px 0 10px;
}

.wd-panel--data .wd-panel-tags {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}









.wd-panel--data .wd-panel-note {
    display: block;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--wd-border);
    color: var(--wd-muted);
}

.wd-panel-end {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--wd-border);
}

@media (max-width: 1180px) {
    .wd-panel-row {
        grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
    }

    .wd-panel-note,
    .wd-panel-end {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .wd-grid-2,
    .wd-grid-3,
    .wd-service-grid,
    .wd-process {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .wd-panel-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wd-panel-note,
    .wd-panel-end {
        grid-column: auto;
    }

    .page-eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .wd-lead {
        font-size: 17px;
    }

    .wd-text {
        font-size: 15px;
    }

    .wd-feature,
    .wd-cta {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }

        .wd-feature::before,
        .wd-cta::before {
            left: 22px;
            right: 20px;
        }

    .wd-check-grid,
    .wd-grid-4,
    .wd-tech-grid,
    .wd-tag-grid {
        grid-template-columns: 1fr;
    }

    .wd-service-card,
    .wd-audience-card,
    .wd-value-card,
    .wd-panel,
    .wd-mini-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .wd-lead {
        font-size: 16px;
    }

    .wd-feature,
    .wd-cta {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 14px;
        padding-right: 14px;
    }

        .wd-feature::before,
        .wd-cta::before {
            left: 14px;
            right: 14px;
        }

    .wd-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wd-btn,
    .wd-check-card,
    .wd-service-card,
    .wd-process-item,
    .wd-audience-card,
    .wd-value-card,
    .wd-mini-card,
    .wd-panel,
    .wd-tech-grid > article {
        transition: none;
    }

    .wd-sidebar:hover .wd-hire::before {
        animation: none;
        opacity: 0;
    }
}

/* =========================================================
   Web Deployment-aligned section identities
   ========================================================= */

#wd-technologies .page-section-title,
#wd-technologies .page-section h3 {
    color: #ffffff;
}

#wd-technologies .wd-eyebrow {
    color: var(--wd-accent);
}

#wd-technologies .wd-intro,
#wd-technologies .page-section p {
    color: var(--section-text);
}

#wd-technologies .wd-tech-grid > article {
    border-color: rgba(96, 226, 239, .18);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(34,201,223,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.14);
}

    #wd-technologies .wd-tech-grid > article:hover {
        border-color: rgba(34,201,223,.48);
        background: rgba(255,255,255,.075);
    }

#wd-technologies .wd-tech-grid h3 {
    color: #ffffff;
}

#wd-technologies .wd-tech-grid p {
    color: var(--section-text);
}

#wd-technologies .wd-tag-grid > * {
    border-color: rgba(34,201,223,.22);
    background: rgba(34,201,223,.07);
    color: #effcff;
}

    #wd-technologies .wd-tag-grid > *:hover {
        border-color: rgba(34,201,223,.58);
        background: rgba(34,201,223,.15);
    }

#wd-modernization .page-section-title::after {
    background: var(--wd-orange);
}

#wd-data-integration .page-section-title::after {
    background: var(--wd-green);
}

#wd-process .page-section-title::after {
    background: var(--wd-accent);
}

#wd-contact .page-section-title::after {
    background: var(--wd-accent);
}

/* =========================================================
   Two-column service layout
   The right side follows the Web Deployment sidebar pattern.
   ========================================================= */

.wd-sidebar {
    position: sticky;
    top: 105px;
    z-index: 10;
    align-self: start;
    overflow: visible;
    max-height: none;
    border: 1px solid #d5e3e7;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(38,54,58,.09);
    animation: wdFadeUp .65s .08s var(--wd-ease) both;
    transition: transform .35s var(--wd-ease), border-color .35s ease, box-shadow .35s ease;
}

    .wd-sidebar:hover {
        transform: translateY(-4px);
        border-color: #b8dce3;
        box-shadow: 0 24px 65px rgba(38,54,58,.13), 0 8px 24px rgba(21,159,202,.08);
    }

/* Hire card */
.wd-hire {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    border-bottom: 1px solid #d7e8eb;
    background: #ffffff;
}

    .wd-hire::before {
        content: "";
        position: absolute;
        z-index: 5;
        top: 0;
        left: -55%;
        width: 32%;
        height: 115px;
        pointer-events: none;
        opacity: 0;
        transform: skewX(-20deg);
        background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.04) 18%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.05) 82%, transparent 100% );
    }

.wd-sidebar:hover .wd-hire::before {
    opacity: 1;
    animation: wdHireShine .85s var(--wd-ease) forwards;
}

.wd-hire-top {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 19px 22px 21px;
    background: radial-gradient(circle at 86% 8%, rgba(34,201,223,.20), transparent 32%), linear-gradient(135deg, #30383a 0%, #145f73 52%, #159fca 100%);
    color: #ffffff;
}

    .wd-hire-top::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        left: 22px;
        width: 64px;
        height: 4px;
        border-radius: 0 0 6px 6px;
        background: #22c9df;
    }

    .wd-hire-top::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 180px;
        height: 180px;
        right: -72px;
        bottom: -115px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 50%;
        box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(34,201,223,.035);
        pointer-events: none;
    }

.wd-hire-label {
    position: relative;
    z-index: 3;
    display: block;
    margin: 0 0 6px;
    color: rgba(255,255,255,.94);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.wd-hire-price-row {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.wd-hire-price {
    color: #ffffff;
    font-size: 44px;
    font-weight: 850;
    line-height: .9;
    letter-spacing: -.05em;
}

.wd-hire-unit {
    padding-bottom: 5px;
    color: rgba(255,255,255,.92);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wd-hire-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: radial-gradient(circle at 100% 0%, rgba(34,201,223,.09), transparent 35%), #ffffff;
}

.wd-hire-benefit {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 6px;
    text-align: center;
}

    .wd-hire-benefit + .wd-hire-benefit::before {
        content: "";
        position: absolute;
        top: 20%;
        bottom: 20%;
        left: 0;
        width: 1px;
        background: #dce7ea;
    }

.wd-hire-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #ccebf0;
    border-radius: 10px;
    background: #e9fafd;
    color: #087aa1;
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    transition: transform .25s var(--wd-ease), border-color .25s ease, box-shadow .25s ease;
}

.wd-hire-benefit:hover .wd-hire-icon {
    transform: translateY(-2px);
    border-color: #a9dce5;
    box-shadow: 0 7px 16px rgba(21,159,202,.10);
}

.wd-hire-benefit > span {
    color: #39484d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

/* Web development sidebar content */
.wd-sidebar-content {
    padding: 18px 20px 20px;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
}

.wd-sidebar-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 5px 9px;
    border: 1px solid #c9eaf0;
    border-radius: 999px;
    background: #eefafd;
    color: var(--wd-primary-dark);
    font-size: 9px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .13em;
}

.wd-sidebar-title {
    margin: 0 0 11px;
    color: var(--wd-heading);
    font-size: 19px;
    font-weight: 760;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.wd-sidebar-intro {
    margin: 0 0 15px;
    color: var(--wd-text);
    font-size: 13px;
    line-height: 1.62;
}

.wd-sidebar-content h3 {
    margin: 16px 0 9px;
    color: var(--wd-heading);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
}

.wd-sidebar-needs {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wd-sidebar-needs li {
        margin: 0;
    }

        .wd-sidebar-needs li a {
            position: relative;
            display: block;
            padding: 7px 9px 7px 29px;
            border: 1px solid #e0ecee;
            border-radius: 9px;
            background: #ffffff;
            color: #46565b;
            font-size: 12px;
            font-weight: 620;
            line-height: 1.4;
            text-decoration: none;
            transition: transform .25s var(--wd-ease), border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
        }

            .wd-sidebar-needs li a:hover {
                transform: translateX(4px);
                border-color: #b9dfe6;
                background: #f2fbfd;
                color: var(--wd-primary-dark);
                box-shadow: 0 7px 18px rgba(21,159,202,.09);
            }

            .wd-sidebar-needs li a::before {
                content: "✓";
                position: absolute;
                left: 9px;
                top: 8px;
                display: grid;
                width: 14px;
                height: 14px;
                place-items: center;
                border-radius: 50%;
                background: #e9fafd;
                color: var(--wd-primary-dark);
                font-size: 9px;
                font-weight: 900;
                transition: transform .25s var(--wd-ease), background-color .25s ease, color .25s ease;
            }

            .wd-sidebar-needs li a:hover::before {
                transform: scale(1.08);
                background: var(--wd-primary);
                color: #ffffff;
            }

.wd-sidebar-support {
    margin: 0;
    padding: 11px 12px;
    border-left: 3px solid var(--wd-primary);
    border-radius: 0 9px 9px 0;
    background: #eefafd;
    color: #52666c;
    font-size: 12px;
    line-height: 1.55;
}

.wd-sidebar-btn {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    margin-top: 14px;
    overflow: hidden;
    isolation: isolate;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid var(--wd-primary);
    border-radius: 9px;
    background: linear-gradient(135deg, #159fca, #087aa1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(21,159,202,.14);
    transition: transform .28s var(--wd-ease), box-shadow .28s ease, border-color .28s ease;
}

    .wd-sidebar-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
        transform: skewX(-18deg);
        transition: left .65s var(--wd-ease);
        pointer-events: none;
    }

    .wd-sidebar-btn:hover::before {
        left: 135%;
    }

    .wd-sidebar-btn:hover {
        transform: translateY(-3px);
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(21,159,202,.22);
    }

    .wd-sidebar-btn:active {
        transform: translateY(-1px);
    }

@keyframes wdHireShine {
    from {
        left: -55%;
    }

    to {
        left: 125%;
    }
}

@media (max-width: 960px) {
    .wd-sidebar {
        position: relative;
        top: auto;
        z-index: 1;
        max-height: none;
        order: 2;
    }
}

@media (max-width: 480px) {
    .wd-sidebar {
        border-radius: 18px;
    }

    .wd-hire-top {
        padding: 18px 17px 20px;
    }

        .wd-hire-top::before {
            left: 17px;
        }

    .wd-hire-price {
        font-size: 40px;
    }

    .wd-hire-benefit {
        padding: 10px 4px;
    }

        .wd-hire-benefit > span {
            font-size: 10px;
        }

    .wd-sidebar-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================
   Applications — clear hierarchy and readable application cards
   ========================================================= */

#wd-applications .wd-section-head {
    max-width: 900px;
    margin-bottom: 26px;
}

#wd-applications .wd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    padding: 6px 11px;
    border: 1px solid rgba(21, 159, 202, .20);
    border-radius: 999px;
    background: #e9fafd;
    color: var(--wd-primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}

    #wd-applications .wd-eyebrow::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 50%;
        background: var(--wd-primary);
        box-shadow: 0 0 0 4px rgba(21, 159, 202, .10);
    }

#wd-applications .page-section-title {
    max-width: 760px;
    margin-bottom: 15px;
    color: var(--wd-heading);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.15;
    letter-spacing: -.025em;
}

#wd-applications .wd-intro {
    max-width: 820px;
    margin: 0;
    color: var(--wd-text);
    font-size: 16px;
    line-height: 1.78;
}

#wd-applications .wd-tag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

    #wd-applications .wd-tag-grid > span {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 54px;
        padding: 13px 16px 13px 18px;
        border: 1px solid var(--wd-border);
        border-radius: 13px;
        background: linear-gradient(145deg, #ffffff 0%, #f8fcfd 100%);
        color: var(--wd-heading);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.4;
        box-shadow: 0 6px 18px rgba(38, 54, 58, .035);
        transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .25s ease;
    }

        #wd-applications .wd-tag-grid > span::before {
            content: "";
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            margin-right: 11px;
            border-radius: 50%;
            background: var(--wd-primary);
            box-shadow: 0 0 0 4px rgba(21, 159, 202, .08);
        }

        #wd-applications .wd-tag-grid > span:hover {
            transform: translateY(-2px);
            border-color: #bfe0e6;
            box-shadow: 0 12px 26px rgba(38, 54, 58, .09);
        }

#wd-applications .wd-note {
    max-width: 900px;
    margin-top: 22px;
}

@media (max-width: 900px) {
    #wd-applications .wd-tag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #wd-applications .page-section-title {
        font-size: 30px;
    }

    #wd-applications .wd-tag-grid {
        gap: 10px;
        margin-top: 20px;
    }

        #wd-applications .wd-tag-grid > span {
            min-height: 50px;
            padding: 12px 13px;
        }
}

@media (max-width: 480px) {
    #wd-applications .page-section-title {
        font-size: 26px;
    }

    #wd-applications .wd-intro {
        font-size: 15px;
        line-height: 1.75;
    }

    #wd-applications .wd-tag-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 18px;
    }

        #wd-applications .wd-tag-grid > span {
            min-height: 48px;
            font-size: 14px;
        }
}

/* =========================================================
   Web Development — refined hover and motion
   Subtle interactions only; respects reduced-motion settings.
   ========================================================= */

/* Buttons */
.wd-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}

    .wd-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .22), transparent );
        transform: skewX(-18deg);
        transition: left .65s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
    }

    .wd-btn > * {
        position: relative;
        z-index: 1;
    }

    .wd-btn:hover::before {
        left: 135%;
    }

    .wd-btn:hover {
        transform: translateY(-3px);
    }

    .wd-btn:active {
        transform: translateY(-1px);
    }

/* Light button */
.wd-btn--light {
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

    .wd-btn--light:hover {
        background: #f5fbfc;
        border-color: #9fd9e4;
        color: var(--wd-primary-dark);
        box-shadow: 0 12px 28px rgba(21, 159, 202, .12);
        transform: translateY(-3px);
    }

/* Intro heading micro motion */
.wd-page .page-eyebrow:hover {
    transform: translateY(-1px);
    border-color: #a9dfe8;
    box-shadow: 0 8px 20px rgba(21, 159, 202, .10);
}

/* Generic text links */
.wd-link {
    transition: color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}

    .wd-link:hover {
        transform: translateX(3px);
    }

/* Keep motion accessible */
@media (prefers-reduced-motion: reduce) {
    .wd-btn,
    .wd-btn::before,
    .wd-btn--light,
    .wd-sidebar-btn,
    .wd-sidebar-btn::before,
    #wd-contact::after,
    .wd-page .page-section-title::after,
    .wd-page .page-eyebrow,
    .wd-link,
    .wd-feature,
    .wd-cta,
    .wd-sidebar,
    .wd-lead,
    .wd-text {
        animation: none !important;
        transition: none !important;
    }

        .wd-btn:hover,
        .wd-btn--light:hover,
        .wd-link:hover,
        .wd-page .page-eyebrow:hover {
            transform: none;
        }
}

/* =========================================================
   Scroll reveal — Web Development content cards
   ========================================================= */

#wd-overview.animation-ready .wd-check-card,
#wd-overview.animation-ready .wd-service-card,
#wd-overview.animation-ready .wd-process-item,
#wd-overview.animation-ready .wd-audience-card,
#wd-overview.animation-ready .wd-value-card,
#wd-overview.animation-ready .wd-mini-card,
#wd-overview.animation-ready .wd-panel,
#wd-overview.animation-ready .wd-tech-grid > article,
#wd-overview.animation-ready #wd-applications .wd-tag-grid > span,
#wd-overview.animation-ready .wd-cta-content {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .58s var(--wd-ease), transform .58s var(--wd-ease), box-shadow .25s ease, border-color .25s ease;
    transition-delay: var(--animation-delay, 0ms);
    will-change: opacity, transform;
}

    #wd-overview.animation-ready .wd-check-card.is-visible,
    #wd-overview.animation-ready .wd-service-card.is-visible,
    #wd-overview.animation-ready .wd-process-item.is-visible,
    #wd-overview.animation-ready .wd-audience-card.is-visible,
    #wd-overview.animation-ready .wd-value-card.is-visible,
    #wd-overview.animation-ready .wd-mini-card.is-visible,
    #wd-overview.animation-ready .wd-panel.is-visible,
    #wd-overview.animation-ready .wd-tech-grid > article.is-visible,
    #wd-overview.animation-ready #wd-applications .wd-tag-grid > span.is-visible,
    #wd-overview.animation-ready .wd-cta-content.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

        #wd-overview.animation-ready .wd-check-card.is-visible:hover,
        #wd-overview.animation-ready .wd-service-card.is-visible:hover,
        #wd-overview.animation-ready .wd-process-item.is-visible:hover,
        #wd-overview.animation-ready .wd-audience-card.is-visible:hover,
        #wd-overview.animation-ready .wd-value-card.is-visible:hover,
        #wd-overview.animation-ready .wd-mini-card.is-visible:hover,
        #wd-overview.animation-ready .wd-panel.is-visible:hover,
        #wd-overview.animation-ready .wd-tech-grid > article.is-visible:hover {
            transform: translateY(-5px);
        }

        #wd-overview.animation-ready #wd-applications .wd-tag-grid > span.is-visible:hover {
            transform: translateY(-4px);
        }

@media (prefers-reduced-motion: reduce) {
    #wd-overview.animation-ready .wd-check-card,
    #wd-overview.animation-ready .wd-service-card,
    #wd-overview.animation-ready .wd-process-item,
    #wd-overview.animation-ready .wd-audience-card,
    #wd-overview.animation-ready .wd-value-card,
    #wd-overview.animation-ready .wd-mini-card,
    #wd-overview.animation-ready .wd-panel,
    #wd-overview.animation-ready .wd-tech-grid > article,
    #wd-overview.animation-ready #wd-applications .wd-tag-grid > span,
    #wd-overview.animation-ready .wd-cta-content {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}