﻿/* =========================================================
   DOTNET EXPERT — MODERN HOMEPAGE
   Completely independent visual system.
   Does not reuse the old homepage/deployment section styling.
   ========================================================= */

#dotnet-home {
    --home-bg: #f6fafb;
    --home-surface: #ffffff;
    --home-ink: #303638;
    --home-muted: #718086;
    --home-line: #e4e7ec;
    --home-blue: #2563eb;
    --home-blue-dark: #1747b8;
    --home-cyan: #22d3ee;
    --home-navy: #07152f;
    --home-navy-2: #0b2148;
    --home-green: #22c55e;
    --home-radius: 22px;
    --home-radius-sm: 14px;
    --home-shadow: 0 16px 42px rgba(38,54,58,.07);
    --home-shadow-hover: 0 22px 52px rgba(38,54,58,.12);
    --home-ease: cubic-bezier(.22,1,.36,1);
    --home-heading: #283235;
    --home-primary: #0f8eae;
    --home-primary-dark: #08728d;
    --home-accent: #20bfd5;
    --home-text: #56666c;
    --home-border: #dbe7ea;
    --home-soft: #f2f9fa;
    --home-dark: #18343b;
    --home-dark-2: #102b32;
    color: var(--home-text);
    background: radial-gradient(circle at 8% 3%,rgba(34,201,223,.12),transparent 23%), radial-gradient(circle at 96% 12%,rgba(21,159,202,.09),transparent 23%), linear-gradient(180deg,#f7fbfc 0%,#fff 48%,#f7fbfc 100%);
    overflow: clip;
    font-family: inherit;
}

    #dotnet-home *,
    #dotnet-home *::before,
    #dotnet-home *::after {
        box-sizing: border-box;
    }

    #dotnet-home a {
        text-decoration: none;
    }

    #dotnet-home img {
        max-width: 100%;
    }

    #dotnet-home p {
        color: var(--home-muted);
        line-height: 1.8;
    }

    #dotnet-home h1,
    #dotnet-home h2,
    #dotnet-home h3,
    #dotnet-home p {
        margin-top: 0;
    }

.home-container {
    width: min(1180px, calc(100% - 48px));
    margin: 15px auto;
}

.home-section {
    position: relative;
    padding: 110px 0;
}

.home-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--home-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

    .home-kicker::before {
        content: "";
        width: 28px;
        height: 2px;
        background: linear-gradient(90deg, var(--home-blue), var(--home-cyan));
    }

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.home-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--home-cyan);
    box-shadow: 0 0 0 7px rgba(34,211,238,.12);
}

.home-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 54px;
}

    .home-section-head > div {
        max-width: 720px;
    }

    .home-section-head > p {
        max-width: 430px;
        margin: 0;
    }

.home-section-head--center {
    display: block;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

    .home-section-head--center > p {
        max-width: 650px;
        margin: 16px auto 0;
    }

.home-section-head h2,
.home-intro h2,
.home-hire h2,
.home-modernization h2,
.home-why h2,
.home-value h2,
.home-cta h2,
.home-faq h2,
.home-benefits h2 {
    margin: 12px 0 0;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -.045em;
    font-weight: 800;
}

    .home-section-head h2 span,
    .home-intro h2 span,
    .home-hire h2 span,
    .home-modernization h2 span,
    .home-why h2 span,
    .home-value h2 span,
    .home-cta h2 span,
    .home-faq h2 span,
    .home-benefits h2 span {
        color: var(--home-blue);
    }

/* =========================================================
   BUTTONS
   ========================================================= */

.home-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 52px;
    padding: 0 21px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    transition: transform .3s var(--home-ease), box-shadow .3s var(--home-ease), background .3s ease;
    overflow: hidden;
}

    .home-button span {
        transition: transform .3s var(--home-ease);
    }

    .home-button:hover {
        transform: translateY(-3px);
    }

        .home-button:hover span {
            transform: translateX(4px);
        }

.home-button--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--home-blue), #3b82f6);
    box-shadow: 0 14px 30px rgba(37,99,235,.25);
}

    .home-button--primary:hover {
        box-shadow: 0 18px 38px rgba(37,99,235,.34);
    }

.home-button--ghost {
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
}

.home-button--dark {
    color: #fff;
    background: var(--home-navy);
    box-shadow: 0 16px 34px rgba(7,21,47,.2);
}

.home-button--light {
    color: var(--home-navy);
    background: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* =========================================================
   HERO
   ========================================================= */

.home-hero {
    min-height: 730px;
    position: relative;
    background: #06132c;
    color: #fff;
}

.home-hero__slides,
.home-hero__slide {
    position: absolute;
    inset: 0;
}

.home-hero__slide {
    opacity: 0;
    visibility: hidden;
    background: linear-gradient(90deg, rgba(4,13,31,.97) 0%, rgba(5,18,44,.9) 44%, rgba(4,13,31,.68) 100%), var(--hero-image) center/cover;
    transition: none;
}

#dotnet-home.home-slider-ready .home-hero__slide {
    transition: opacity .8s ease, visibility .8s ease;
}

.home-hero__slide--active {
    opacity: 1;
    visibility: visible;
}

.home-hero__grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.home-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
    animation: heroFloat 8s ease-in-out infinite;
}

.home-hero__orb--one {
    width: 360px;
    height: 360px;
    right: -100px;
    top: 100px;
    background: rgba(34,211,238,.10);
}

.home-hero__orb--two {
    width: 220px;
    height: 220px;
    left: 42%;
    bottom: -120px;
    background: rgba(37,99,235,.15);
    animation-delay: -3s;
}

.home-hero__layout {
    min-height: 730px;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.home-hero__content {
    max-width: 760px;
}

.home-hero h1,
.home-hero h2 {
    max-width: 760px;
    margin: 20px 0;
    font-size: clamp(44px, 5.4vw, 76px);
    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 850;
}

    .home-hero h1 span,
    .home-hero h2 span {
        background: linear-gradient(90deg, #fff, #7ee7f5);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.home-hero__description {
    max-width: 650px;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 1.8;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.home-hero__proof {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 25px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.code-window {
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: rgba(4,12,29,.72);
    box-shadow: 0 40px 100px rgba(0,0,0,.35);
    overflow: hidden;
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    backdrop-filter: blur(16px);
    animation: codeFloat 6s ease-in-out infinite;
}

.code-window__top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .code-window__top > span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255,255,255,.25);
    }

    .code-window__top small {
        margin-left: 9px;
        color: rgba(255,255,255,.42);
        font-size: 11px;
    }

.code-window__body {
    padding: 27px 25px;
    min-height: 265px;
}

.code-line {
    display: block;
    color: #c8d5eb;
    font: 13px/2.05 Consolas, monospace;
}

    .code-line i {
        color: #7dd3fc;
        font-style: normal;
    }

    .code-line b {
        color: #a7f3d0;
        font-weight: 500;
    }

    .code-line em {
        color: #f9a8d4;
        font-style: normal;
    }

    .code-line.indent {
        padding-left: 20px;
    }

.code-comment {
    color: #6b7f9e;
}

.code-window__status {
    padding: 12px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.48);
    font-size: 11px;
}

    .code-window__status span {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 7px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 12px #4ade80;
    }

.home-hero__controls {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-hero__control {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
}

.home-hero__dots {
    display: flex;
    gap: 7px;
}

    .home-hero__dots button {
        width: 28px;
        height: 4px;
        border: 0;
        border-radius: 4px;
        background: rgba(255,255,255,.24);
        cursor: pointer;
        transition: .3s;
    }

        .home-hero__dots button.is-active {
            width: 46px;
            background: var(--home-cyan);
        }

/* =========================================================
   INTRO
   ========================================================= */

.home-intro {
    background: #fff;
}

.home-intro__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    align-items: center;
}

.home-intro__heading {
    position: relative;
}

.home-intro__number {
    position: absolute;
    right: 0;
    bottom: -55px;
    color: #f0f3f7;
    font-size: 150px;
    font-weight: 900;
    line-height: 1;
    z-index: 0;
}

.home-intro h2 {
    position: relative;
    z-index: 1;
}

.home-intro__content {
    max-width: 720px;
}

.home-lead {
    color: var(--home-ink) !important;
    font-size: 20px;
    line-height: 1.7 !important;
    font-weight: 600;
}

.home-intro__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

    .home-intro__tags span {
        padding: 8px 12px;
        border: 1px solid var(--home-line);
        border-radius: 99px;
        color: var(--home-ink);
        background: #fafbfc;
        font-size: 12px;
        font-weight: 700;
    }

/* =========================================================
   SERVICES
   ========================================================= */

.home-services {
    background: #f6f8fb;
}

.home-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.service-card {
    position: relative;
    min-height: 310px;
    padding: 28px;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(16,24,40,.03);
    transition: transform .4s var(--home-ease), box-shadow .4s var(--home-ease), border-color .4s ease;
}

    .service-card::after,
    .industry-card::after,
    .why-card::after,
    .technology-card::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        left: var(--pointer-x, 50%);
        top: var(--pointer-y, 50%);
        transform: translate(-50%,-50%);
        background: radial-gradient(circle, rgba(37,99,235,.10), transparent 65%);
        pointer-events: none;
    }

    .service-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--home-shadow-hover);
        border-color: #c9d7f4;
    }

.service-card--large {
    grid-column: span 2;
    background: linear-gradient(145deg,#081a3b,#0b2b5d);
    color: #fff;
}

.service-card--accent {
    background: linear-gradient(145deg,#e9faff,#fff);
}

.service-card--large p {
    color: rgba(255,255,255,.7);
}

.service-card--large a {
    color: #8ce8f5;
}

.service-card__number {
    pointer-events: none;
    position: absolute;
    right: 23px;
    top: 20px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    opacity: .65;
}

.service-card--large .service-card__number {
    pointer-events: none;
    color: rgba(255,255,255,.35);
}

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    border-radius: 15px;
    color: var(--home-blue);
    background: #edf4ff;
    font-size: 17px;
    font-weight: 900;
}

.service-card--large .service-card__icon {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.service-card h3 {
    position: relative;
    z-index: 1;
    max-width: 440px;
    margin-bottom: 13px;
    font-size: 22px;
    line-height: 1.25;
}

.service-card p {
    position: relative;
    z-index: 1;
    font-size: 14px;
}

.service-card a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 8px;
    margin-top: 10px;
    color: var(--home-blue);
    font-size: 13px;
    font-weight: 800;
}

    .service-card a span {
        transition: transform .3s;
    }

.service-card:hover a span {
    transform: translate(3px,-3px);
}

/* =========================================================
   INDUSTRIES
   ========================================================= */

.home-industries {
    background: #fff;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.industry-card {
    position: relative;
    min-height: 185px;
    padding: 24px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: .4s var(--home-ease);
}

    .industry-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--home-shadow);
        border-color: #c8d8f6;
    }

    .industry-card > span {
        display: block;
        margin-bottom: 35px;
        color: #98a2b3;
        font-size: 11px;
        font-weight: 800;
    }

    .industry-card strong {
        display: block;
        font-size: 17px;
        line-height: 1.3;
    }

    .industry-card small {
        display: block;
        margin-top: 9px;
        color: var(--home-muted);
        line-height: 1.5;
    }

/* =========================================================
   HIRE
   ========================================================= */

.home-hire {
    background: #f6f8fb;
}

.home-hire__panel {
    position: relative;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    min-height: 430px;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--home-shadow);
}

.home-hire__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 430px;
    background: radial-gradient(circle at 50% 50%, #1e4fa4, #07152f 65%);
    overflow: hidden;
}

.home-hire__rings,
.home-hire__rings::before,
.home-hire__rings::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}

.home-hire__rings {
    width: 290px;
    height: 290px;
    animation: ringPulse 4s infinite;
}

    .home-hire__rings::before {
        inset: 35px;
    }

    .home-hire__rings::after {
        inset: 70px;
    }

.home-hire__code {
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#22d3ee);
    box-shadow: 0 20px 60px rgba(34,211,238,.25);
    font-size: 34px;
    font-weight: 800;
    z-index: 2;
}

.home-hire__badge {
    position: absolute;
    top: 25px;
    left: 25px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 99px;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    font-weight: 800;
}

.home-hire__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
}

    .home-hire__content p {
        max-width: 620px;
        font-size: 16px;
    }

/* =========================================================
   EXPERTISE
   ========================================================= */

.home-expertise {
    background: #fff;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}

.expertise-card {
    position: relative;
    padding: 28px;
    min-height: 285px;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: #fff;
    transition: .4s var(--home-ease);
}

    .expertise-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--home-shadow);
    }

.expertise-card--featured {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg,#081a3b,#0e3674);
}

    .expertise-card--featured p {
        color: rgba(255,255,255,.68);
    }

.expertise-card__top {
    display: flex;
    justify-content: space-between;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
}

    .expertise-card__top b {
        color: var(--home-blue);
    }

.expertise-card--featured .expertise-card__top b {
    color: #8ce8f5;
}

.expertise-card h3 {
    margin-top: 45px;
    font-size: 20px;
}

.expertise-card p {
    font-size: 14px;
}

.expertise-card__meter {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    height: 4px;
    border-radius: 99px;
    background: #edf0f4;
    overflow: hidden;
}

    .expertise-card__meter i {
        display: block;
        width: var(--meter);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,var(--home-blue),var(--home-cyan));
        transform-origin: left;
        animation: meterIn 1.2s var(--home-ease) both;
    }

/* =========================================================
   BENEFITS
   ========================================================= */

.home-benefits {
    color: #fff;
    background: #07152f;
}

.home-benefits__grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 100px;
}

.home-benefits__intro h2 {
    color: #fff;
}

    .home-benefits__intro h2 span {
        color: #6ee7f2;
    }

.home-benefits__intro p {
    color: rgba(255,255,255,.62);
    max-width: 480px;
    margin-top: 24px;
}

.benefit-list {
    border-top: 1px solid rgba(255,255,255,.12);
}

.benefit-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: padding .3s ease;
}

    .benefit-item:hover {
        padding-left: 10px;
    }

    .benefit-item > span {
        color: #6ee7f2;
        font-size: 11px;
        font-weight: 800;
    }

    .benefit-item h3 {
        color: #fff;
        margin-bottom: 6px;
        font-size: 19px;
    }

    .benefit-item p {
        margin: 0;
        color: rgba(255,255,255,.55);
        font-size: 14px;
    }

/* =========================================================
   PROCESS
   ========================================================= */

.home-process {
    background: #f6f8fb;
}

.process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 12px;
}

    .process-track::before {
        content: "";
        position: absolute;
        left: 7%;
        right: 7%;
        top: 28px;
        height: 1px;
        background: #d8dee8;
    }

.process-step {
    position: relative;
    z-index: 1;
    padding: 0 12px;
}

    .process-step > span {
        pointer-events: none;
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        margin: 0 auto 26px;
        border: 1px solid #d7dfeb;
        border-radius: 50%;
        color: var(--home-blue);
        background: #fff;
        box-shadow: 0 8px 20px rgba(16,24,40,.06);
        font-size: 11px;
        font-weight: 900;
        transition: .3s;
    }

    .process-step:hover > span {
        color: #fff;
        background: var(--home-blue);
        transform: scale(1.08);
    }

    .process-step h3 {
        text-align: center;
        font-size: 16px;
    }

    .process-step p {
        text-align: center;
        font-size: 12px;
        line-height: 1.65;
    }

/* =========================================================
   MODERNIZATION
   ========================================================= */

.home-modernization {
    background: #fff;
}

.home-modernization__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.modernization-visual__window {
    position: relative;
    min-height: 360px;
    padding: 55px 25px 25px;
    border: 1px solid #dfe5ed;
    border-radius: 24px;
    background: #f8fafc;
    box-shadow: var(--home-shadow);
}

.modernization-visual__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 18px;
    border-bottom: 1px solid #e8ecf2;
}

    .modernization-visual__bar span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd5e1;
    }

.modernization-visual__old,
.modernization-visual__new {
    position: absolute;
    top: 105px;
    width: 35%;
    padding: 20px;
    border-radius: 16px;
}

.modernization-visual__old {
    left: 7%;
    background: #eef1f5;
    color: #667085;
}

.modernization-visual__new {
    right: 7%;
    color: #fff;
    background: linear-gradient(145deg,#0b2148,#2563eb);
}

    .modernization-visual__old b,
    .modernization-visual__new b {
        display: block;
        margin-bottom: 18px;
        font-size: 13px;
    }

    .modernization-visual__old i,
    .modernization-visual__new i {
        display: block;
        height: 7px;
        margin: 8px 0;
        border-radius: 4px;
        background: currentColor;
        opacity: .18;
    }

.modernization-visual__arrow {
    position: absolute;
    left: 50%;
    top: 165px;
    transform: translateX(-50%);
    color: var(--home-blue);
    font-size: 30px;
    animation: arrowMove 1.7s ease-in-out infinite;
}

.home-modernization__content p {
    max-width: 640px;
}

.check-list {
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

    .check-list li {
        position: relative;
        padding: 8px 0 8px 28px;
        color: #475467;
        font-size: 14px;
    }

        .check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #16a34a;
            font-weight: 900;
        }

/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.home-technologies {
    background: #f6f8fb;
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.technology-card {
    position: relative;
    min-height: 250px;
    padding: 26px;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
    transition: transform .42s var(--home-ease), box-shadow .42s var(--home-ease), border-color .35s ease, background .35s ease;
}

.technology-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 32px;
    border-radius: 14px;
    color: var(--home-blue);
    background: #edf4ff;
    font-size: 13px;
    font-weight: 900;
}

.technology-card h3 {
    font-size: 18px;
}

.technology-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

    .technology-tags span {
        padding: 7px 9px;
        border-radius: 8px;
        background: #f2f4f7;
        color: #475467;
        font-size: 11px;
        font-weight: 700;
    }

/* =========================================================
   WHY
   ========================================================= */

.home-why {
    background: #fff;
}

.home-why__heading {
    max-width: 780px;
    margin-bottom: 48px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.why-card {
    position: relative;
    min-height: 250px;
    height: 100%;
    padding: 26px;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    transition: transform .4s var(--home-ease), box-shadow .4s var(--home-ease), border-color .35s ease, background .35s ease;
}

    .why-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--home-shadow);
    }

.why-card--big {
    grid-row: auto;
    min-height: 250px;
    color: #fff;
    background: radial-gradient(circle at 88% 12%, rgba(34,211,238,.13), transparent 30%), linear-gradient(145deg,#07152f,#0c3671);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why-card__number {
    display: block;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 800;
}

.why-card--big .why-card__number {
    color: rgba(255,255,255,.4);
}

.why-card strong {
    display: block;
    margin-top: 24px;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.why-card h3 {
    margin: 20px 0 9px;
    font-size: 19px;
    line-height: 1.32;
}

.why-card p {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.72;
}

.why-card--big p {
    color: rgba(255,255,255,.58);
}

.why-card--big h3 {
    color: #fff;
}


#dotnet-home #why-dotnet-expert .why-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    width: 38px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--home-primary);
    transition: width .35s var(--home-ease), box-shadow .35s ease;
}

#dotnet-home #why-dotnet-expert .why-card--big::before {
    background: var(--home-cyan);
    box-shadow: 0 0 18px rgba(34,211,238,.16);
}

#dotnet-home #why-dotnet-expert .why-card:hover::before {
    width: 54px;
}


#dotnet-home #why-dotnet-expert .why-card:hover {
    transform: translateY(-3px);
    border-color: #c7dfe4;
    box-shadow: 0 14px 30px rgba(38,54,58,.09);
}

#dotnet-home #why-dotnet-expert .why-card--big:hover {
    transform: translateY(-3px);
    border-color: rgba(110,231,242,.24);
    box-shadow: 0 16px 34px rgba(7,21,47,.16);
}

    #dotnet-home #why-dotnet-expert .why-card--big:hover strong {
        transform: translateY(-1px);
    }

#dotnet-home #why-dotnet-expert .why-card--big strong {
    transition: transform .35s var(--home-ease);
}


#dotnet-home #why-dotnet-expert .why-card {
    min-height: 245px;
}

    #dotnet-home #why-dotnet-expert .why-card h3 {
        max-width: 320px;
    }

    #dotnet-home #why-dotnet-expert .why-card p {
        max-width: 430px;
    }

#dotnet-home #why-dotnet-expert .why-card--big h3,
#dotnet-home #why-dotnet-expert .why-card--big p {
    color: rgba(255,255,255,.82);
}

/* =========================================================
   VALUE
   ========================================================= */

.home-value {
    background: #f6f8fb;
}

.home-value__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.home-value__content {
    position: sticky;
    top: 100px;
}

.home-value__quote {
    position: relative;
    margin-top: 35px;
    padding: 25px 25px 25px 55px;
    border-left: 3px solid var(--home-blue);
    border-radius: 0 14px 14px 0;
    background: #fff;
}

    .home-value__quote > span {
        position: absolute;
        left: 18px;
        top: 17px;
        color: var(--home-blue);
        font-size: 35px;
    }

    .home-value__quote p {
        margin: 0;
        color: #475467;
        font-size: 14px;
    }

.value-point {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    padding: 25px 0;
    border-bottom: 1px solid #dfe4eb;
}

    .value-point b {
        color: var(--home-blue);
        font-size: 12px;
    }

    .value-point span {
        color: #344054;
        font-size: 16px;
        line-height: 1.65;
    }

/* =========================================================
   PORTFOLIO
   ========================================================= */

.home-portfolio {
    color: #fff;
    background: radial-gradient(circle at 12% 8%, rgba(34,211,238,.08), transparent 24%), radial-gradient(circle at 92% 90%, rgba(37,99,235,.08), transparent 26%), linear-gradient(135deg, #10282f 0%, #12343d 52%, #0d242b 100%);
}

    .home-portfolio .home-section-head h2 {
        color: #fff;
    }

        .home-portfolio .home-section-head h2 span {
            color: #6ee7f2;
        }

    .home-portfolio .home-section-head > p {
        color: rgba(232,251,253,.62);
    }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.portfolio-card {
    --portfolio-accent: #6ee7f2;
    position: relative;
    display: flex;
    min-height: 255px;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    border: 1px solid rgba(110,231,242,.18);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(34,201,223,.025)), rgba(7,27,33,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.12);
    backdrop-filter: blur(7px);
    transition: transform .38s var(--home-ease), box-shadow .38s ease, border-color .32s ease, background .32s ease;
}

    .portfolio-card::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 26px;
        width: 46px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--portfolio-accent);
        box-shadow: 0 0 18px rgba(34,211,238,.15);
        transition: width .35s var(--home-ease), box-shadow .35s ease;
    }

    .portfolio-card::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 230px;
        height: 230px;
        left: var(--pointer-x, 80%);
        top: var(--pointer-y, 15%);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(34,211,238,.11), transparent 68%);
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease;
    }

    .portfolio-card > * {
        position: relative;
        z-index: 1;
    }

.portfolio-card__number {
    position: absolute;
    top: 22px;
    right: 24px;
    color: rgba(232,251,253,.30);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.portfolio-card small {
    margin-bottom: 8px;
    color: var(--portfolio-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
}

.portfolio-card h3 {
    max-width: 320px;
    margin: 0 0 10px;
    color: #fff;
    font-size: 21px;
    line-height: 1.28;
    transition: color .3s ease;
}

.portfolio-card p {
    max-width: 360px;
    margin: 0 0 16px;
    color: rgba(232,251,253,.62);
    font-size: 13px;
    line-height: 1.75;
}

.portfolio-card a {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

    .portfolio-card a span {
        transition: transform .28s var(--home-ease);
    }

.portfolio-card:hover {
    transform: translateY(-3px);
    border-color: rgba(110,231,242,.34);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(34,201,223,.045)), rgba(7,27,33,.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 17px 36px rgba(0,0,0,.18);
}

    .portfolio-card:hover::before {
        width: 58px;
        box-shadow: 0 0 24px rgba(34,211,238,.24);
    }

    .portfolio-card:hover::after {
        opacity: 1;
    }

    .portfolio-card:hover h3 {
        color: #fff;
    }

    .portfolio-card:hover a span {
        transform: translate(3px, -2px);
    }

/* Slight category variation without changing the section palette */
.portfolio-card--finance,
.portfolio-card--inventory {
    --portfolio-accent: #6ee7f2;
}

.portfolio-card--crm,
.portfolio-card--conference {
    --portfolio-accent: #7dd3fc;
}

.portfolio-card--learning,
.portfolio-card--management {
    --portfolio-accent: #a7f3d0;
}

@media (max-width: 1100px) {
    .home-container {
        width: min(100% - 36px, 960px);
    }

    .home-hero__layout {
        gap: 35px;
    }

    .home-hero h1, .home-hero h2 {
        font-size: clamp(42px,6vw,62px);
    }

    .industry-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .expertise-grid, .technology-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .process-track {
        grid-template-columns: repeat(3,1fr);
        gap: 35px 12px;
    }

        .process-track::before {
            display: none;
        }

    .why-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 820px) {
    .home-section {
        padding: 80px 0;
    }

    .home-section-head {
        display: block;
    }

        .home-section-head > p {
            margin-top: 18px;
        }

    .home-hero, .home-hero__layout {
        min-height: 680px;
    }

    .home-hero__layout {
        display: block;
        padding-top: 145px;
    }

    .home-hero__visual {
        display: none;
    }

    .home-hero__content {
        max-width: 720px;
    }

    .home-intro__grid,
    .home-hire__panel,
    .home-benefits__grid,
    .home-modernization__grid,
    .home-value__grid,
    .home-faq__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .home-value__content,
    .home-faq__intro {
        position: static;
    }

    .home-services__grid {
        grid-template-columns: repeat(2,1fr);
    }

    .service-card--large {
        grid-column: span 2;
    }

    .process-track {
        grid-template-columns: repeat(2,1fr);
    }

    .home-hire__visual {
        min-height: 300px;
    }

    .home-hire__panel {
        min-height: auto;
    }

    .home-hire__content {
        padding: 45px 35px;
    }
}

@media (max-width: 620px) {
    .home-container {
        width: min(100% - 28px, 560px);
    }

    .home-section {
        padding: 65px 0;
    }

    .home-hero, .home-hero__layout {
        min-height: 680px;
    }

    .home-hero__layout {
        padding-top: 125px;
    }

    .home-hero h1, .home-hero h2 {
        font-size: 42px;
    }

    .home-hero__description {
        font-size: 15px;
    }

    .home-hero__proof {
        flex-wrap: wrap;
    }

    .home-hero__controls {
        bottom: 20px;
    }

    .home-services__grid,
    .industry-grid,
    .expertise-grid,
    .technology-grid,
    .why-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .service-card--large {
        grid-column: auto;
    }

    .service-card {
        min-height: 280px;
    }

    .process-track {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-step {
        padding: 15px 10px;
        border: 1px solid var(--home-line);
        border-radius: 16px;
        background: #fff;
    }

        .process-step > span {
            pointer-events: none;
            margin-bottom: 15px;
        }

    .modernization-visual__window {
        min-height: 290px;
    }

    .modernization-visual__old, .modernization-visual__new {
        top: 85px;
        width: 37%;
    }

    .modernization-visual__arrow {
        top: 135px;
    }

    .home-hire__visual {
        min-height: 260px;
    }

    .home-hire__content {
        padding: 35px 24px;
    }
}



#dotnet-home #home-hero .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* =========================================================
   PROGRESSIVE REVEAL MOTION
   Uses the independent `translate` property so card hover
   transforms remain fully functional after reveal.
   ========================================================= */

#dotnet-home .reveal {
    opacity: 1;
    translate: 0 0;
}

#dotnet-home.home-motion-ready .reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .68s var(--home-ease) var(--reveal-delay, 0ms), translate .68s var(--home-ease) var(--reveal-delay, 0ms);
    will-change: opacity, translate;
}

    #dotnet-home.home-motion-ready .reveal.reveal--right {
        translate: 28px 14px;
    }

    #dotnet-home.home-motion-ready .reveal.is-visible {
        opacity: 1;
        translate: 0 0;
    }

@media (prefers-reduced-motion: reduce) {
    #dotnet-home *,
    #dotnet-home *::before,
    #dotnet-home *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    #dotnet-home.home-motion-ready .reveal {
        opacity: 1 !important;
        translate: 0 0 !important;
    }
}


/* =========================================================
   DEPLOYMENT-STYLE HOMEPAGE FLOW
   ========================================================= */



#dotnet-home .home-page-shell {
    position: relative;
    z-index: 1;
    width: min(1320px,calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 70px;
}

#dotnet-home .home-page-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 24px;
    align-items: start;
}

#dotnet-home .home-main {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--home-shadow);
}

    #dotnet-home .home-main > section {
        padding: 62px 42px;
        margin: 0;
        border-radius: 0;
        background: #fff;
    }

        #dotnet-home .home-main > section + section {
            border-top: 1px solid var(--home-border);
        }

    #dotnet-home .home-main > #services,
    #dotnet-home .home-main > #industries,
    #dotnet-home .home-main > #development-process,
    #dotnet-home .home-main > #technology-stack {
        background: linear-gradient(145deg,#f7fbfc,#fff);
    }

    #dotnet-home .home-main > #dotnet-benefits,
    #dotnet-home .home-main > #portfolio {
        background: linear-gradient(135deg,#10282f 0%,#12343d 55%,#0d242b 100%);
    }

    #dotnet-home .home-main > #application-modernization {
        background: linear-gradient(135deg,#fffaf3,#fff);
    }

    #dotnet-home .home-main > #why-dotnet-expert {
        background: linear-gradient(135deg,#eefbfd,#fff);
    }

    #dotnet-home .home-main > #value {
        background: linear-gradient(135deg,#f2faf7,#fff);
    }

    #dotnet-home .home-main > #project-cta {
        background: linear-gradient(135deg,#30383a,#263638 55%,#12566b);
    }

    #dotnet-home .home-main > #faq {
        background: linear-gradient(135deg,#f7fbfc,#fff);
    }

    #dotnet-home .home-main > #dotnet-benefits h2,
    #dotnet-home .home-main > #portfolio h2 {
        color: #fff;
    }

    #dotnet-home .home-main > #dotnet-benefits .home-kicker,
    #dotnet-home .home-main > #portfolio .home-kicker {
        color: #6ee7f2;
    }

        #dotnet-home .home-main > #dotnet-benefits .home-kicker::before,
        #dotnet-home .home-main > #portfolio .home-kicker::before {
            background: #6ee7f2;
        }

    #dotnet-home .home-main .home-section-head {
        margin-bottom: 36px;
    }

        #dotnet-home .home-main .home-section-head h2,
        #dotnet-home .home-main .home-intro h2,
        #dotnet-home .home-main .home-hire h2,
        #dotnet-home .home-main .home-modernization h2,
        #dotnet-home .home-main .home-why h2,
        #dotnet-home .home-main .home-value h2,
        #dotnet-home .home-main .home-faq h2 {
            font-size: clamp(30px,3.3vw,46px);
            color: var(--home-heading);
        }

            #dotnet-home .home-main .home-section-head h2 span,
            #dotnet-home .home-main .home-intro h2 span,
            #dotnet-home .home-main .home-hire h2 span,
            #dotnet-home .home-main .home-modernization h2 span,
            #dotnet-home .home-main .home-why h2 span,
            #dotnet-home .home-main .home-value h2 span,
            #dotnet-home .home-main .home-faq h2 span {
                color: var(--home-primary-dark);
            }

#dotnet-home .service-card,
#dotnet-home .industry-card,
#dotnet-home .expertise-card,
#dotnet-home .why-card {
    border-color: var(--home-border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(38,54,58,.04);
}

    #dotnet-home .service-card:hover,
    #dotnet-home .industry-card:hover,
    #dotnet-home .expertise-card:hover,
    #dotnet-home .technology-card:hover,
    #dotnet-home .why-card:hover,
    #dotnet-home .portfolio-card:hover {
        border-color: #c4e2e8;
        box-shadow: var(--home-shadow-hover);
    }

/* Process cards follow the deployment page's compact two-column flow */
#dotnet-home #development-process .process-track {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

    #dotnet-home #development-process .process-track::before {
        display: none;
    }

#dotnet-home #development-process .process-step {
    position: relative;
    min-height: 140px;
    padding: 21px 20px 19px 70px;
    border: 1px solid #d3e6ea;
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 22px rgba(21,159,202,.045);
}

    #dotnet-home #development-process .process-step > span {
        pointer-events: none;
        position: absolute;
        left: 18px;
        top: 20px;
        margin: 0;
        width: 38px;
        height: 38px;
        border: 0;
        color: #fff;
        background: linear-gradient(135deg,var(--home-primary),var(--home-accent));
        box-shadow: none;
    }

    #dotnet-home #development-process .process-step h3,
    #dotnet-home #development-process .process-step p {
        text-align: left;
    }

/* Technology section uses the deployment page's dark technology treatment */
#dotnet-home #technology-stack {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 12% 10%, rgba(34,201,223,.11), transparent 24%), radial-gradient(circle at 92% 88%, rgba(21,159,202,.08), transparent 28%), linear-gradient(135deg,#10282f 0%,#12343d 52%,#0d242b 100%);
}

    #dotnet-home #technology-stack .home-section-head h2 {
        color: #fff;
    }

        #dotnet-home #technology-stack .home-section-head h2 span {
            color: #6ee7f2;
        }

    #dotnet-home #technology-stack .home-section-head p {
        color: #c7e1e5;
    }

    #dotnet-home #technology-stack .home-kicker {
        color: #6ee7f2;
    }

        #dotnet-home #technology-stack .home-kicker::before {
            background: #6ee7f2;
        }

    #dotnet-home #technology-stack .technology-card {
        min-height: 245px;
        padding: 26px 26px 24px;
        border-color: rgba(91,220,234,.19);
        background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(34,201,223,.028)), rgba(7,27,33,.58);
        color: #e8fbfd;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.12);
        backdrop-filter: blur(7px);
    }

        #dotnet-home #technology-stack .technology-card h3 {
            margin: 0 0 14px;
            color: #fff;
            font-size: 20px;
            line-height: 1.3;
            letter-spacing: -.015em;
        }

        #dotnet-home #technology-stack .technology-card p {
            color: #c7e1e5;
        }

    #dotnet-home #technology-stack .technology-card__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 22px;
        border: 1px solid rgba(96,226,239,.20);
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, rgba(34,201,223,.18), rgba(21,159,202,.10));
        box-shadow: 0 10px 26px rgba(0,0,0,.12);
        transition: transform .38s var(--home-ease), box-shadow .38s ease, border-color .32s ease, background .32s ease;
    }

    #dotnet-home #technology-stack .technology-tags span {
        padding: 8px 11px;
        border: 1px solid rgba(34,201,223,.22);
        border-radius: 9px;
        background: rgba(34,201,223,.065);
        color: #e8fbfd;
        font-size: 11px;
        font-weight: 750;
        transition: transform .28s var(--home-ease), border-color .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
    }


    #dotnet-home #technology-stack .technology-card::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 26px;
        width: 48px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, #22c9df, #6ee7f2);
        box-shadow: 0 0 20px rgba(34,201,223,.18);
        transition: width .38s var(--home-ease), box-shadow .38s ease;
    }

    #dotnet-home #technology-stack .technology-card > * {
        position: relative;
        z-index: 2;
    }

    #dotnet-home #technology-stack .technology-card::after {
        opacity: 0;
        z-index: 1;
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(34,201,223,.12), transparent 68%);
        transition: opacity .38s ease;
    }

    #dotnet-home #technology-stack .technology-card:hover {
        transform: translateY(-8px);
        border-color: rgba(110,231,242,.38);
        background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(34,201,223,.05)), rgba(7,27,33,.64);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 52px rgba(0,0,0,.22), 0 0 0 1px rgba(34,201,223,.025);
    }

        #dotnet-home #technology-stack .technology-card:hover::before {
            width: 74px;
            box-shadow: 0 0 26px rgba(34,201,223,.28);
        }

        #dotnet-home #technology-stack .technology-card:hover::after {
            opacity: 1;
        }

        #dotnet-home #technology-stack .technology-card:hover .technology-card__icon {
            transform: translateY(-4px) scale(1.055);
            border-color: rgba(110,231,242,.40);
            background: linear-gradient(135deg, rgba(34,201,223,.26), rgba(21,159,202,.15));
            box-shadow: 0 15px 32px rgba(0,0,0,.18);
        }

    #dotnet-home #technology-stack .technology-tags span:hover {
        transform: translateY(-3px);
        border-color: rgba(110,231,242,.52);
        background: rgba(34,201,223,.15);
        color: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.12);
    }

#dotnet-home.home-motion-ready #technology-stack .technology-card:not(.is-visible) .technology-card__icon {
    opacity: 0;
    transform: translateY(12px) scale(.92);
}

#dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-card__icon {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .52s var(--home-ease) calc(var(--reveal-delay, 0ms) + 110ms), transform .52s var(--home-ease) calc(var(--reveal-delay, 0ms) + 110ms), box-shadow .38s ease, border-color .32s ease, background .32s ease;
}

#dotnet-home.home-motion-ready #technology-stack .technology-card:not(.is-visible) .technology-tags span {
    opacity: 0;
    translate: 0 8px;
}

#dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span {
    opacity: 1;
    translate: 0 0;
}

    #dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span:nth-child(1) {
        transition-delay: 160ms;
    }

    #dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span:nth-child(2) {
        transition-delay: 195ms;
    }

    #dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span:nth-child(3) {
        transition-delay: 230ms;
    }

    #dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span:nth-child(4) {
        transition-delay: 265ms;
    }

    #dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span:nth-child(5) {
        transition-delay: 300ms;
    }

    #dotnet-home.home-motion-ready #technology-stack .technology-card.is-visible .technology-tags span:nth-child(n+6) {
        transition-delay: 335ms;
    }

/* Deployment-style sidebar */
#dotnet-home .home-sidebar {
    position: sticky;
    top: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#dotnet-home .home-sidebar__card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--home-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(38,54,58,.055);
}

#dotnet-home .home-sidebar__rate {
    padding: 25px 22px 22px;
    color: #fff;
    background: linear-gradient(135deg,#30383a,#263638 60%,#12566b);
}

#dotnet-home .home-sidebar__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--home-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

#dotnet-home .home-sidebar__rate .home-sidebar__eyebrow {
    color: #6ee7f2;
}

#dotnet-home .home-sidebar__rate strong {
    display: block;
    color: #fff;
    font-size: 34px;
    line-height: 1.1;
}

#dotnet-home .home-sidebar__rate p,
#dotnet-home .home-sidebar__contact p {
    margin: 10px 0 18px;
    font-size: 13px;
    line-height: 1.7;
}

#dotnet-home .home-sidebar__rate p {
    color: #c8dadd;
}

#dotnet-home .home-sidebar__card:not(.home-sidebar__rate):not(.home-sidebar__contact):not(.home-sidebar__technologies) {
    padding: 21px 18px 15px;
}

#dotnet-home .home-sidebar__card h3 {
    margin: 0 0 13px;
    color: var(--home-heading);
    font-size: 16px;
}

#dotnet-home .home-sidebar__nav a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid #edf1f2;
    color: #4f5f64;
    font-size: 13px;
    transition: padding .25s ease,color .25s ease;
}

    #dotnet-home .home-sidebar__nav a span {
        color: #9aa8ad;
        font-size: 10px;
    }

    #dotnet-home .home-sidebar__nav a:hover {
        padding-left: 5px;
        color: var(--home-primary-dark);
    }

#dotnet-home .home-sidebar__technologies {
    padding: 20px 18px;
    background: linear-gradient(135deg,#10282f,#12343d);
}

    #dotnet-home .home-sidebar__technologies .home-sidebar__eyebrow {
        color: #6ee7f2;
    }

#dotnet-home .home-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    #dotnet-home .home-sidebar__tags span {
        padding: 6px 8px;
        border: 1px solid rgba(34,201,223,.22);
        border-radius: 8px;
        background: rgba(34,201,223,.07);
        color: #e8fbfd;
        font-size: 10px;
        font-weight: 700;
    }

#dotnet-home .home-sidebar__contact {
    padding: 22px 18px;
    background: linear-gradient(135deg,#eefbfd,#fff);
}

    #dotnet-home .home-sidebar__contact h3 {
        font-size: 20px;
        line-height: 1.3;
    }

#dotnet-home .home-sidebar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 43px;
    padding: 0 14px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg,var(--home-primary),var(--home-primary-dark));
    font-size: 12px;
    font-weight: 800;
    transition: transform .25s ease,box-shadow .25s ease;
}

    #dotnet-home .home-sidebar__button:hover {
        transform: translateY(-2px);
        box-shadow: 0 9px 20px rgba(21,159,202,.25);
    }

    #dotnet-home .home-sidebar__button span {
        transition: transform .25s ease;
    }

    #dotnet-home .home-sidebar__button:hover span {
        transform: translateX(3px);
    }

/* Hero remains the new design, only its surrounding flow changes */
#dotnet-home .home-hero {
    min-height: 650px;
    border-bottom: 1px solid rgba(21,159,202,.12);
}

#dotnet-home .home-hero__layout {
    min-height: 650px;
}

#dotnet-home .home-hero h1, #dotnet-home .home-hero h2 {
    font-size: clamp(42px,5vw,68px);
}

@media (max-width:1050px) {
    #dotnet-home .home-page-layout {
        grid-template-columns: 1fr;
    }

    #dotnet-home .home-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px) {
    #dotnet-home .home-page-shell {
        width: calc(100% - 24px);
        padding-top: 12px;
    }

    #dotnet-home .home-main {
        border-radius: 18px;
    }

        #dotnet-home .home-main > section {
            padding: 42px 20px;
        }

    #dotnet-home .home-sidebar {
        grid-template-columns: 1fr;
    }

    #dotnet-home #development-process .process-track {
        grid-template-columns: 1fr;
    }

    #dotnet-home #development-process .process-step {
        padding-left: 64px;
    }

    #dotnet-home .home-hero, #dotnet-home .home-hero__layout {
        min-height: 650px;
    }

    #dotnet-home .home-hero__layout {
        padding-top: 115px;
    }

    #dotnet-home .home-hero h1, #dotnet-home .home-hero h2 {
        font-size: 40px;
    }
}


/* =========================================================
   HOMEPAGE FAQ — WEB DEPLOYMENT STYLE
   Bootstrap accordion structure + modern deployment styling
   ========================================================= */

#dotnet-home .home-main > #faq.home-faq {
    background: radial-gradient(circle at 5% 10%, rgba(34,201,223,.07), transparent 24%), linear-gradient(135deg, #f7fbfc 0%, #ffffff 58%, #f5fafb 100%);
    padding: 76px 42px 84px;
}

#dotnet-home #faq .home-faq__header {
    max-width: 850px;
    margin: 0 auto 38px;
    text-align: center;
}

    #dotnet-home #faq .home-faq__header .home-kicker {
        justify-content: center;
    }

    #dotnet-home #faq .home-faq__header h2 {
        margin: 12px 0 13px;
        color: var(--home-heading);
        font-size: clamp(32px, 3.5vw, 48px);
        line-height: 1.08;
        letter-spacing: -.04em;
    }

        #dotnet-home #faq .home-faq__header h2 span {
            color: var(--home-primary-dark);
        }

    #dotnet-home #faq .home-faq__header p {
        max-width: 680px;
        margin: 0 auto;
        color: var(--home-text);
        font-size: 14px;
        line-height: 1.75;
    }

#dotnet-home #faq .home-faq__accordion {
    max-width: 980px;
    margin: 0 auto;
}

#dotnet-home #faq .home-faq__item {
    position: relative;
    overflow: hidden;
    margin: 0 0 12px;
    border: 1px solid var(--home-border) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.92);
    box-shadow: 0 7px 22px rgba(38,54,58,.035);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--home-ease);
}

    #dotnet-home #faq .home-faq__item:hover {
        border-color: #b9dfe5 !important;
        box-shadow: 0 14px 32px rgba(38,54,58,.07);
        transform: translateY(-1px);
    }

    #dotnet-home #faq .home-faq__item .accordion-button {
        position: relative;
        min-height: 66px;
        padding: 18px 62px 18px 22px;
        border: 0;
        border-radius: 0 !important;
        color: var(--home-heading);
        background: transparent;
        box-shadow: none;
        font-size: 15px;
        font-weight: 750;
        line-height: 1.45;
        text-align: left;
    }

        #dotnet-home #faq .home-faq__item .accordion-button:not(.collapsed) {
            color: var(--home-primary-dark);
            background: linear-gradient(90deg, rgba(21,159,202,.055), rgba(34,201,223,.015));
            box-shadow: none;
        }

        #dotnet-home #faq .home-faq__item .accordion-button:focus {
            box-shadow: inset 0 0 0 2px rgba(21,159,202,.12);
        }

    #dotnet-home #faq .home-faq__item .accordion-body {
        position: relative;
        padding: 0 62px 22px 22px;
        border-top: 1px solid rgba(220,231,234,.8);
        color: var(--home-text);
        background: rgba(247,251,252,.72);
        font-size: 14px;
        line-height: 1.8;
    }


@media (max-width: 760px) {
    #dotnet-home .home-main > #faq.home-faq {
        padding: 58px 20px 64px;
    }

    #dotnet-home #faq .home-faq__header {
        margin-bottom: 28px;
    }

    #dotnet-home #faq .home-faq__item .accordion-button {
        min-height: 60px;
        padding: 17px 52px 17px 18px;
        font-size: 14px;
    }

        #dotnet-home #faq .home-faq__item .accordion-button::after {
            right: 19px;
        }

    #dotnet-home #faq .home-faq__item .accordion-body {
        padding: 0 18px 19px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #dotnet-home #faq .home-faq__item {
        transition: none;
    }
}


/* Bootstrap 5 accordion: keep Bootstrap's native collapse + chevron behavior */
#dotnet-home #faq .accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width, 1.25rem);
    height: var(--bs-accordion-btn-icon-width, 1.25rem);
    margin-left: auto;
    background-size: var(--bs-accordion-btn-icon-width, 1.25rem);
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .2s ease-in-out;
}

#dotnet-home #faq .accordion-button:not(.collapsed)::after {
    transform: var(--bs-accordion-btn-icon-transform, rotate(-180deg));
}


/* =========================================================
   FINAL POLISH — HOMEPAGE FINISHING LAYER
   ========================================================= */

/* ---------- Main shell ---------- */

#dotnet-home .home-page-shell {
    position: relative;
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 58px;
}

#dotnet-home .home-page-layout {
    align-items: start;
}

#dotnet-home .home-main {
    overflow: hidden;
    border: 1px solid rgba(220,231,234,.95);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(38,54,58,.065), 0 2px 7px rgba(38,54,58,.025);
}

    #dotnet-home .home-main > section {
        position: relative;
    }

    /* Give every major section a consistent content rhythm. */
    #dotnet-home .home-main > section {
        padding-top: 68px;
        padding-bottom: 68px;
    }

        #dotnet-home .home-main > section + section {
            border-top: 1px solid rgba(220,231,234,.78);
        }

    /* ---------- Section headings ---------- */

    #dotnet-home .home-main .home-section-head {
        margin-bottom: 34px;
    }

        #dotnet-home .home-main .home-section-head h2,
        #dotnet-home .home-main .home-intro h2,
        #dotnet-home .home-main .home-hire h2,
        #dotnet-home .home-main .home-modernization h2,
        #dotnet-home .home-main .home-why h2,
        #dotnet-home .home-main .home-value h2,
        #dotnet-home > #faq.home-faq h2 {
            color: #2f3638;
            font-size: clamp(30px, 3.1vw, 45px);
            line-height: 1.08;
            letter-spacing: -.035em;
        }

            #dotnet-home .home-main .home-section-head h2 span,
            #dotnet-home .home-main .home-intro h2 span,
            #dotnet-home .home-main .home-hire h2 span,
            #dotnet-home .home-main .home-modernization h2 span,
            #dotnet-home .home-main .home-why h2 span,
            #dotnet-home .home-main .home-value h2 span,
            #dotnet-home > #faq.home-faq h2 span {
                color: #087aa1;
            }

/* ---------- Cards: consistent depth ---------- */

#dotnet-home .service-card,
#dotnet-home .industry-card,
#dotnet-home .expertise-card,
#dotnet-home .technology-card,
#dotnet-home .why-card,
#dotnet-home .portfolio-card,
#dotnet-home .process-step {
    transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease, border-color .38s ease;
}

    #dotnet-home .service-card:hover,
    #dotnet-home .industry-card:hover,
    #dotnet-home .expertise-card:hover,
    #dotnet-home .technology-card:hover,
    #dotnet-home .why-card:hover,
    #dotnet-home .portfolio-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 42px rgba(38,54,58,.10);
    }

/* ---------- Buttons ---------- */

#dotnet-home .home-button,
#dotnet-home .home-sidebar__button {
    min-height: 48px;
    border-radius: 11px;
    letter-spacing: -.005em;
}

    #dotnet-home .home-sidebar__button::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 110deg, transparent 25%, rgba(255,255,255,.18) 48%, transparent 70% );
        transform: translateX(-120%);
        transition: transform .65s ease;
    }

    #dotnet-home .home-sidebar__button:hover::after {
        transform: translateX(120%);
    }

/* ---------- Sidebar refinement ---------- */

#dotnet-home .home-sidebar {
    top: 24px;
    gap: 14px;
}

#dotnet-home .home-sidebar__card {
    border-color: #dce7ea;
    box-shadow: 0 10px 28px rgba(38,54,58,.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

    #dotnet-home .home-sidebar__card:hover {
        transform: translateY(-2px);
        border-color: #c9e0e5;
        box-shadow: 0 16px 34px rgba(38,54,58,.075);
    }

#dotnet-home .home-sidebar__rate:hover,
#dotnet-home .home-sidebar__technologies:hover {
    transform: none;
}

/* ---------- Hero finishing ---------- */

#dotnet-home .home-hero {
    position: relative;
    overflow: hidden;
}

    #dotnet-home .home-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 30%, rgba(34,201,223,.055) 48%, transparent 65%);
        transform: translateX(-100%);
        animation: homeHeroSweep 9s ease-in-out infinite;
    }

#dotnet-home .home-hero__content {
    position: relative;
    z-index: 2;
}

@keyframes homeHeroSweep {
    0%, 58%, 100% {
        transform: translateX(-100%);
    }

    75% {
        transform: translateX(100%);
    }
}

/* =========================================================
   FULL-WIDTH FINAL CTA
   ========================================================= */

#dotnet-home > #project-cta.home-cta {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 510px;
    margin: 0;
    padding: 78px 24px 82px;
    overflow: hidden;
    color: #fff;
    border-top: 1px solid rgba(34,201,223,.16);
    border-bottom: 1px solid rgba(34,201,223,.16);
    background: radial-gradient(circle at 91% 5%, rgba(34,201,223,.16), transparent 24%), radial-gradient(circle at 10% 105%, rgba(21,159,202,.11), transparent 23%), linear-gradient(135deg, #182a2f 0%, #1d3439 53%, #203b41 100%);
}

#dotnet-home > #project-cta .home-cta__grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .34;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    animation: homeCtaGridMove 18s linear infinite;
}

#dotnet-home > #project-cta .home-cta__orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(34,201,223,.075);
}

#dotnet-home > #project-cta .home-cta__orb--one {
    width: 390px;
    height: 390px;
    right: -120px;
    top: -190px;
    background: rgba(34,201,223,.045);
    box-shadow: 0 0 100px rgba(34,201,223,.08);
    animation: homeCtaOrbOne 9s ease-in-out infinite;
}

#dotnet-home > #project-cta .home-cta__orb--two {
    width: 245px;
    height: 245px;
    left: 8%;
    bottom: -175px;
    background: rgba(34,201,223,.035);
    animation: homeCtaOrbTwo 10s ease-in-out infinite;
}

#dotnet-home > #project-cta .home-cta__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(350px, .72fr);
    align-items: center;
    gap: clamp(55px, 8vw, 110px);
    width: min(1160px, 100%);
    min-height: 350px;
    margin: 0 auto;
}

#dotnet-home > #project-cta .home-cta__content {
    min-width: 0;
}

#dotnet-home > #project-cta .home-kicker {
    justify-content: flex-start;
    margin-bottom: 23px;
    color: #20c5df;
}

    #dotnet-home > #project-cta .home-kicker::before {
        width: 30px;
        height: 2px;
        background: #20c5df;
        box-shadow: 0 0 14px rgba(32,197,223,.55);
    }

#dotnet-home > #project-cta h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4.3vw, 58px);
    line-height: 1.055;
    letter-spacing: -.04em;
}

    #dotnet-home > #project-cta h2 span {
        display: block;
        margin-top: 2px;
        color: #20c5df;
        background: linear-gradient(90deg, #20c5df, #2bd6e8, #20c5df);
        background-size: 220% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: homeCtaTextShine 6s ease-in-out infinite;
    }

#dotnet-home > #project-cta .home-cta__content > p {
    max-width: 670px;
    margin: 25px 0 30px;
    color: rgba(237,247,249,.76);
    font-size: 15px;
    line-height: 1.75;
}

#dotnet-home > #project-cta .home-cta__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 22px;
    max-width: 760px;
}

#dotnet-home > #project-cta .home-cta__point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#dotnet-home > #project-cta .home-cta__check {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border: 1px solid rgba(32,197,223,.28);
    border-radius: 9px;
    color: #20c5df;
    background: rgba(32,197,223,.08);
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

#dotnet-home > #project-cta .home-cta__point:hover .home-cta__check {
    transform: translateY(-3px) rotate(-5deg);
    border-color: rgba(32,197,223,.55);
    background: rgba(32,197,223,.15);
}

#dotnet-home > #project-cta .home-cta__point strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
}

#dotnet-home > #project-cta .home-cta__point small {
    display: block;
    color: rgba(194,214,218,.68);
    font-size: 10px;
    line-height: 1.45;
}

#dotnet-home > #project-cta .home-cta__card {
    position: relative;
    min-height: 348px;
    padding: 32px 33px 28px;
    border: 1px solid rgba(153,194,201,.20);
    border-top-color: rgba(32,197,223,.85);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
    box-shadow: 0 24px 70px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease, border-color .45s ease;
}

    #dotnet-home > #project-cta .home-cta__card:hover {
        transform: translateY(-7px);
        border-color: rgba(32,197,223,.42);
        box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 34px rgba(32,197,223,.08), inset 0 1px 0 rgba(255,255,255,.09);
    }

#dotnet-home > #project-cta .home-cta__brand {
    position: relative;
    z-index: 1;
    width: fit-content;
    min-width: 150px;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    margin-bottom: 25px;
    border-radius: 10px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 9px 24px rgba(0,0,0,.13);
    animation: homeCtaBrandFloat 4.5s ease-in-out infinite;
}

    #dotnet-home > #project-cta .home-cta__brand img {
        display: block;
        width: 150px;
        height: 47px;
        object-fit: contain;
    }

#dotnet-home > #project-cta .home-cta__card-label {
    position: relative;
    z-index: 1;
    margin-bottom: 9px;
    color: #20c5df;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}

#dotnet-home > #project-cta .home-cta__card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.025em;
}

#dotnet-home > #project-cta .home-cta__card p {
    position: relative;
    z-index: 1;
    margin: 16px 0 23px;
    color: rgba(228,239,241,.72);
    font-size: 13px;
    line-height: 1.7;
}

#dotnet-home > #project-cta .home-cta__button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    min-height: 48px;
    padding: 5px 6px 5px 19px;
    border: 0;
    border-radius: 11px;
    overflow: hidden;
    color: #27363a;
    background: #fff;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    transition: transform .3s ease, box-shadow .3s ease;
}

    #dotnet-home > #project-cta .home-cta__button:hover {
        transform: translateY(-2px);
        color: #27363a;
        box-shadow: 0 13px 28px rgba(0,0,0,.18);
    }

    #dotnet-home > #project-cta .home-cta__button b {
        position: relative;
        z-index: 1;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        color: #fff;
        background: #1185a7;
        font-size: 18px;
        font-weight: 500;
        transition: transform .3s ease, background .3s ease;
    }

    #dotnet-home > #project-cta .home-cta__button:hover b {
        transform: translateX(3px);
        background: #0d7390;
    }

#dotnet-home > #project-cta .home-cta__note {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 17px;
    color: rgba(181,204,208,.52);
    font-size: 10px;
    text-align: center;
}

@keyframes homeCtaGridMove {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(42px,42px,0);
    }
}

@keyframes homeCtaOrbOne {
    0%,100% {
        transform: translate3d(0,0,0) scale(1);
    }

    50% {
        transform: translate3d(-20px,18px,0) scale(1.05);
    }
}

@keyframes homeCtaOrbTwo {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(18px,-12px,0);
    }
}

@keyframes homeCtaBrandFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes homeCtaTextShine {
    0%,100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* =========================================================
   FULL-WIDTH FAQ
   ========================================================= */

#dotnet-home > #faq.home-faq {
    position: relative;
    padding: 78px 24px 88px;
    background: radial-gradient(circle at 6% 12%, rgba(34,201,223,.075), transparent 22%), linear-gradient(135deg, #f6fafb 0%, #fff 56%, #f5fafb 100%);
    border-top: 1px solid #dce7ea;
}

#dotnet-home > #faq .home-container {
    width: min(980px, calc(100% - 24px));
}

#dotnet-home > #faq .home-faq__header {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
}

    #dotnet-home > #faq .home-faq__header .home-kicker {
        justify-content: center;
    }

    #dotnet-home > #faq .home-faq__header h2 {
        margin: 12px 0 13px;
        color: #2f3638;
        font-size: clamp(32px, 3.4vw, 48px);
        line-height: 1.08;
        letter-spacing: -.04em;
    }

        #dotnet-home > #faq .home-faq__header h2 span {
            color: #087aa1;
        }

    #dotnet-home > #faq .home-faq__header p {
        max-width: 650px;
        margin: 0 auto;
        color: #58676d;
        font-size: 14px;
        line-height: 1.75;
    }

#dotnet-home > #faq .home-faq__accordion {
    max-width: 980px;
    margin: 0 auto;
}

#dotnet-home > #faq .home-faq__item {
    margin-bottom: 12px;
    border: 1px solid #dce7ea !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96);
    box-shadow: 0 7px 22px rgba(38,54,58,.035);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--home-ease);
}

    #dotnet-home > #faq .home-faq__item:hover {
        border-color: #b9dfe5 !important;
        box-shadow: 0 14px 32px rgba(38,54,58,.07);
        transform: translateY(-1px);
    }

    #dotnet-home > #faq .home-faq__item .accordion-button {
        min-height: 66px;
        padding: 18px 62px 18px 22px;
        border: 0;
        border-radius: 0 !important;
        color: #2f3638;
        background: transparent;
        box-shadow: none;
        font-size: 15px;
        font-weight: 750;
        line-height: 1.45;
        text-align: left;
    }

        #dotnet-home > #faq .home-faq__item .accordion-button:not(.collapsed) {
            color: #087aa1;
            background: linear-gradient(90deg, rgba(21,159,202,.055), rgba(34,201,223,.015));
        }

        #dotnet-home > #faq .home-faq__item .accordion-button:focus {
            box-shadow: inset 0 0 0 2px rgba(21,159,202,.12);
        }

    #dotnet-home > #faq .home-faq__item .accordion-body {
        padding: 0 62px 22px 22px;
        border-top: 1px solid rgba(220,231,234,.8);
        color: #58676d;
        background: rgba(247,251,252,.72);
        font-size: 14px;
        line-height: 1.8;
    }


/* ---------- Responsive finishing ---------- */

@media (max-width: 1050px) {
    #dotnet-home .home-page-shell {
        width: min(100% - 28px, 960px);
    }

    #dotnet-home > #project-cta .home-cta__layout {
        grid-template-columns: 1fr;
        gap: 44px;
        max-width: 760px;
    }

    #dotnet-home > #project-cta .home-cta__content {
        text-align: center;
    }

    #dotnet-home > #project-cta .home-kicker {
        justify-content: center;
    }

    #dotnet-home > #project-cta h2,
    #dotnet-home > #project-cta .home-cta__content > p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #dotnet-home > #project-cta .home-cta__points {
        margin: 0 auto;
    }

    #dotnet-home > #project-cta .home-cta__card {
        width: min(100%, 470px);
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    #dotnet-home .home-page-shell {
        width: calc(100% - 24px);
        padding-top: 12px;
        padding-bottom: 36px;
    }

    #dotnet-home .home-main {
        border-radius: 18px;
    }

        #dotnet-home .home-main > section {
            padding: 48px 20px;
        }

    #dotnet-home > #project-cta.home-cta {
        min-height: auto;
        padding: 62px 20px 68px;
    }

    #dotnet-home > #project-cta h2 {
        font-size: clamp(34px, 9vw, 46px);
    }

    #dotnet-home > #project-cta .home-cta__points {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 14px;
        text-align: left;
    }

    #dotnet-home > #project-cta .home-cta__card {
        min-height: auto;
        padding: 27px 24px 25px;
    }

    #dotnet-home > #faq.home-faq {
        padding: 60px 16px 68px;
    }

    #dotnet-home > #faq .home-container {
        width: 100%;
    }

    #dotnet-home > #faq .home-faq__item .accordion-button {
        min-height: 60px;
        padding: 17px 52px 17px 18px;
        font-size: 14px;
    }

    #dotnet-home > #faq .home-faq__item .accordion-body {
        padding: 0 18px 19px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #dotnet-home > #project-cta .home-cta__grid,
    #dotnet-home > #project-cta .home-cta__orb,
    #dotnet-home > #project-cta .home-cta__brand,
    #dotnet-home > #project-cta h2 span,
    #dotnet-home .home-hero::after {
        animation: none !important;
    }
}


/* =========================================================
   HOMEPAGE FINAL VISUAL CLEANUP
   Unified palette, readable typography and balanced sections.
   ========================================================= */


#dotnet-home .home-section-head h2,
#dotnet-home .home-intro h2,
#dotnet-home .home-hire h2,
#dotnet-home .home-modernization h2,
#dotnet-home .home-why h2,
#dotnet-home .home-value h2,
#dotnet-home .home-faq h2 {
    color: var(--home-heading);
    letter-spacing: -.025em;
}

#dotnet-home .home-section-head > p,
#dotnet-home .home-section-head--center > p,
#dotnet-home .home-intro p,
#dotnet-home .home-modernization p,
#dotnet-home .home-why p,
#dotnet-home .home-value p,
#dotnet-home .process-step p,
#dotnet-home .technology-card p,
#dotnet-home .service-card p,
#dotnet-home .industry-card p,
#dotnet-home .expertise-card p {
    color: var(--home-text);
    font-size: 14px;
    line-height: 1.78;
}

/* One visual language: white / soft aqua / dark teal. */
#dotnet-home .home-main > section,
#dotnet-home .home-main > #services,
#dotnet-home .home-main > #industries,
#dotnet-home .home-main > #development-process,
#dotnet-home .home-main > #application-modernization,
#dotnet-home .home-main > #why-dotnet-expert,
#dotnet-home .home-main > #value,
#dotnet-home .home-main > #faq {
    background: #fff;
}

#dotnet-home .home-main > #technology-stack,
#dotnet-home .home-main > #portfolio,
#dotnet-home .home-main > #dotnet-benefits {
    background: linear-gradient(145deg, var(--home-dark) 0%, var(--home-dark-2) 100%);
}

#dotnet-home .home-main > #application-modernization,
#dotnet-home .home-main > #why-dotnet-expert {
    background: var(--home-soft);
}

#dotnet-home .home-kicker {
    color: var(--home-primary-dark);
    font-size: 12px;
}

    #dotnet-home .home-kicker::before {
        background: var(--home-accent);
    }

#dotnet-home .home-button--primary,
#dotnet-home .home-button--dark {
    background: var(--home-primary-dark);
    color: #fff;
}

    #dotnet-home .home-button--primary:hover,
    #dotnet-home .home-button--dark:hover {
        background: var(--home-dark);
        color: #fff;
    }

/* Readability: remove tiny/washed-out text that looked blurry. */
#dotnet-home .service-card a,
#dotnet-home .home-text-link,
#dotnet-home .technology-tags span,
#dotnet-home .why-card__number,
#dotnet-home .service-card__number,
#dotnet-home .industry-card > span,
#dotnet-home .expertise-card__top,
#dotnet-home .benefit-item > span,
#dotnet-home .home-sidebar__eyebrow,
#dotnet-home .home-cta__card-label {
    font-size: 12px;
    line-height: 1.45;
}

#dotnet-home .portfolio-card small {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .11em;
}

#dotnet-home .portfolio-card > span {
    pointer-events: none;
    font-size: 12px;
    color: rgba(255,255,255,.58);
}

#dotnet-home .portfolio-card p {
    color: rgba(255,255,255,.76);
    font-size: 14px;
    line-height: 1.72;
}

#dotnet-home .portfolio-card a {
    font-size: 13px;
}

#dotnet-home .home-sidebar__rate p,
#dotnet-home .home-sidebar__contact p {
    font-size: 14px;
    line-height: 1.7;
}

#dotnet-home .home-cta__point strong {
    font-size: 13px;
}

#dotnet-home .home-cta__point small {
    font-size: 11px;
    color: rgba(194,214,218,.78);
}

#dotnet-home .home-cta__note {
    font-size: 11px;
    color: rgba(181,204,208,.68);
}

/* Keep the FAQ completely native-looking; no decorative pseudo element in the body. */
#dotnet-home > #faq .home-faq__item .accordion-body {
    padding: 18px 62px 24px 22px;
    border-top: 1px solid rgba(220,231,234,.8);
    color: var(--home-text);
    background: #fbfdfe;
    font-size: 14px;
    line-height: 1.8;
}

/* Reduce visual noise from excessive gradients. */
#dotnet-home .service-card,
#dotnet-home .industry-card,
#dotnet-home .expertise-card,
#dotnet-home .technology-card,
#dotnet-home .why-card {
    box-shadow: 0 8px 24px rgba(38,54,58,.045);
}

    #dotnet-home .service-card:hover,
    #dotnet-home .industry-card:hover,
    #dotnet-home .expertise-card:hover,
    #dotnet-home .technology-card:hover,
    #dotnet-home .why-card:hover {
        border-color: #b8dce3;
        box-shadow: var(--home-shadow-hover);
    }

@media (max-width: 760px) {
    #dotnet-home .home-section-head > p,
    #dotnet-home .home-section-head--center > p,
    #dotnet-home .home-intro p,
    #dotnet-home .home-modernization p,
    #dotnet-home .home-why p,
    #dotnet-home .home-value p,
    #dotnet-home .process-step p,
    #dotnet-home .technology-card p,
    #dotnet-home .service-card p,
    #dotnet-home .industry-card p,
    #dotnet-home .expertise-card p,
    #dotnet-home > #faq .home-faq__item .accordion-body {
        font-size: 14px;
    }

    #dotnet-home > #faq .home-faq__item .accordion-body {
        padding: 16px 18px 20px;
    }
}

/* =========================================================
   HOMEPAGE — EXTERNALIZED INLINE STYLES
   Keep the Razor view free from <style> blocks and inline style attributes.
   ========================================================= */

/* Hero background images */
#dotnet-home .home-hero__slide:nth-child(1) {
    --hero-image: url('/images/home-banner/homeBanner1.webp');
}

#dotnet-home .home-hero__slide:nth-child(2) {
    --hero-image: url('/images/home-banner/homeBanner2.webp');
}

#dotnet-home .home-hero__slide:nth-child(3) {
    --hero-image: url('/images/home-banner/homeBanner3.webp');
}

/* Expertise meter values */
#dotnet-home .expertise-card__meter-fill--1 {
    --meter: 92%;
}

#dotnet-home .expertise-card__meter-fill--2 {
    --meter: 90%;
}

#dotnet-home .expertise-card__meter-fill--3 {
    --meter: 88%;
}

#dotnet-home .expertise-card__meter-fill--4 {
    --meter: 90%;
}

/* =========================================================
   INDUSTRIES — CLEAR, LARGER, ATTRACTIVE CARDS
   ========================================================= */

#dotnet-home .industry-grid {
    gap: 22px;
}

#dotnet-home .industry-card {
    min-height: 305px;
    padding: 42px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #d9e5ea;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 42%, rgba(225,234,255,.78), rgba(255,255,255,0) 58%), #fff;
    box-shadow: 0 14px 34px rgba(38,54,58,.055);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    #dotnet-home .industry-card:hover {
        transform: translateY(-7px);
        border-color: #bcd9e4;
        box-shadow: 0 22px 46px rgba(38,54,58,.11);
    }

    /* Numbers removed intentionally. */
    #dotnet-home .industry-card > span {
        display: none;
    }

    #dotnet-home .industry-card strong {
        display: block;
        margin: 0 0 18px;
        color: #526570;
        font-size: 26px;
        line-height: 1.28;
        font-weight: 700;
        letter-spacing: -.35px;
    }

    #dotnet-home .industry-card small {
        display: block;
        max-width: 330px;
        color: #667b86;
        font-size: 16px;
        line-height: 1.7;
        font-weight: 400;
    }

@media (max-width: 991.98px) {
    #dotnet-home .industry-card {
        min-height: 270px;
        padding: 34px 30px;
    }

        #dotnet-home .industry-card strong {
            font-size: 23px;
        }

        #dotnet-home .industry-card small {
            font-size: 15px;
        }
}

@media (max-width: 575.98px) {
    #dotnet-home .industry-grid {
        gap: 16px;
    }

    #dotnet-home .industry-card {
        min-height: 230px;
        padding: 30px 26px;
        border-radius: 20px;
    }

        #dotnet-home .industry-card strong {
            font-size: 22px;
            margin-bottom: 12px;
        }

        #dotnet-home .industry-card small {
            font-size: 15px;
            line-height: 1.6;
        }
}


/* =========================================================
   INTRO — REFINED BUSINESS-PARTNER PRESENTATION
   ========================================================= */
#dotnet-home #dotnet-expert {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 12% 18%, rgba(32,191,213,.10), transparent 28%), radial-gradient(circle at 88% 82%, rgba(15,142,174,.07), transparent 30%), #fff;
}

    #dotnet-home #dotnet-expert::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        left: -250px;
        bottom: -300px;
        border-radius: 50%;
        border: 1px solid rgba(15,142,174,.10);
        box-shadow: 0 0 0 45px rgba(15,142,174,.025), 0 0 0 90px rgba(15,142,174,.018);
        pointer-events: none;
    }

    #dotnet-home #dotnet-expert .home-container {
        position: relative;
        z-index: 1;
    }

    #dotnet-home #dotnet-expert .home-intro__grid {
        grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
        gap: 72px;
        align-items: center;
    }

    #dotnet-home #dotnet-expert .home-intro__heading {
        padding: 12px 0 16px;
    }

        #dotnet-home #dotnet-expert .home-intro__heading::after {
            content: "";
            position: absolute;
            left: -22px;
            top: 0;
            bottom: 0;
            width: 3px;
            border-radius: 3px;
            background: linear-gradient(180deg, var(--home-primary), var(--home-accent), transparent);
            opacity: .7;
        }

    #dotnet-home #dotnet-expert .home-kicker {
        color: var(--home-primary-dark);
        font-size: 12px;
        letter-spacing: .18em;
    }

    #dotnet-home #dotnet-expert .home-intro__heading h2 {
        max-width: 570px;
        margin: 18px 0 0;
        font-size: clamp(38px,4.15vw,60px);
        line-height: 1.04;
        letter-spacing: -.045em;
        color: #2c3437;
    }

        #dotnet-home #dotnet-expert .home-intro__heading h2 span {
            display: inline;
            color: var(--home-primary-dark);
        }

    #dotnet-home #dotnet-expert .home-intro__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-top: 30px;
    }

    #dotnet-home #dotnet-expert .home-intro__meta-item {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 8px 13px;
        border: 1px solid #dbe8eb;
        border-radius: 999px;
        color: #5a6b71;
        background: rgba(247,251,252,.9);
        box-shadow: 0 6px 18px rgba(38,54,58,.035);
        font-size: 12px;
        font-weight: 700;
    }

        #dotnet-home #dotnet-expert .home-intro__meta-item strong {
            margin-right: 5px;
            color: var(--home-primary-dark);
            font-size: 15px;
        }

    #dotnet-home #dotnet-expert .home-intro__meta-divider {
        display: none;
    }

    #dotnet-home #dotnet-expert .home-intro__content {
        position: relative;
        padding: 34px 38px 32px;
        border: 1px solid #dce8eb;
        border-radius: 24px;
        background: linear-gradient(145deg,#ffffff 0%,#fbfeff 72%,#f3fafb 100%);
        box-shadow: 0 18px 45px rgba(38,54,58,.065);
    }

        #dotnet-home #dotnet-expert .home-intro__content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 38px;
            width: 70px;
            height: 3px;
            border-radius: 0 0 4px 4px;
            background: linear-gradient(90deg,var(--home-primary),var(--home-accent));
        }

        #dotnet-home #dotnet-expert .home-intro__content::after {
            content: "</>";
            position: absolute;
            right: 25px;
            top: 18px;
            color: rgba(15,142,174,.07);
            font: 800 58px/1 Consolas,monospace;
            pointer-events: none;
        }

        #dotnet-home #dotnet-expert .home-intro__content .home-lead {
            position: relative;
            z-index: 1;
            margin-bottom: 16px;
            max-width: 650px;
            color: #334146 !important;
            font-size: 18px;
            line-height: 1.65 !important;
            font-weight: 650;
        }

        #dotnet-home #dotnet-expert .home-intro__content > p:not(.home-lead) {
            position: relative;
            z-index: 1;
            margin-bottom: 12px;
            font-size: 15px;
            line-height: 1.78;
        }

    #dotnet-home #dotnet-expert .home-intro__tags {
        position: relative;
        z-index: 1;
        gap: 8px;
        margin-top: 22px;
    }

        #dotnet-home #dotnet-expert .home-intro__tags span {
            padding: 8px 12px;
            border: 1px solid #d7e6e9;
            border-radius: 10px;
            color: #405158;
            background: #fff;
            font-size: 12px;
            font-weight: 750;
            box-shadow: 0 5px 15px rgba(38,54,58,.035);
            transition: transform .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
        }

            #dotnet-home #dotnet-expert .home-intro__tags span:hover {
                transform: translateY(-2px);
                border-color: #a9d9e1;
                color: var(--home-primary-dark);
                box-shadow: 0 9px 20px rgba(21,159,202,.10);
            }

@media (max-width: 900px) {
    #dotnet-home #dotnet-expert .home-intro__grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    #dotnet-home #dotnet-expert .home-intro__heading h2 {
        max-width: 760px;
    }

    #dotnet-home #dotnet-expert .home-intro__content {
        max-width: 760px;
    }
}

@media (max-width: 620px) {
    #dotnet-home #dotnet-expert .home-intro__heading::after {
        left: -12px;
    }

    #dotnet-home #dotnet-expert .home-intro__heading h2 {
        font-size: 39px;
    }

    #dotnet-home #dotnet-expert .home-intro__content {
        padding: 30px 22px 25px;
        border-radius: 20px;
    }

        #dotnet-home #dotnet-expert .home-intro__content::before {
            left: 22px;
        }

        #dotnet-home #dotnet-expert .home-intro__content::after {
            right: 15px;
            font-size: 44px;
        }
}

/* =========================================================
   INTRO SECTION — SUBTLE MOTION
   ========================================================= */

#dotnet-home #dotnet-expert {
    overflow: hidden;
}

    #dotnet-home #dotnet-expert .home-intro__heading {
        animation: homeIntroHeadingIn .85s cubic-bezier(.22,1,.36,1) both;
    }

    #dotnet-home #dotnet-expert .home-intro__content {
        animation: homeIntroContentIn .9s .12s cubic-bezier(.22,1,.36,1) both;
    }

    #dotnet-home #dotnet-expert .home-intro__heading::after {
        transform-origin: top center;
        animation: homeIntroAccentIn 1s .18s cubic-bezier(.22,1,.36,1) both;
    }

    #dotnet-home #dotnet-expert .home-intro__content::before {
        transform-origin: left center;
        animation: homeIntroLineIn .8s .45s cubic-bezier(.22,1,.36,1) both;
    }

    #dotnet-home #dotnet-expert .home-intro__content::after {
        animation: homeIntroCodeFloat 5s ease-in-out 1.1s infinite;
    }

    #dotnet-home #dotnet-expert .home-intro__meta-item {
        animation: homeIntroMetaIn .65s cubic-bezier(.22,1,.36,1) both;
    }

        #dotnet-home #dotnet-expert .home-intro__meta-item:nth-child(1) {
            animation-delay: .55s;
        }

        #dotnet-home #dotnet-expert .home-intro__meta-item:nth-child(3) {
            animation-delay: .68s;
        }

    #dotnet-home #dotnet-expert .home-intro__tags span {
        animation: homeIntroTagIn .55s cubic-bezier(.22,1,.36,1) both;
    }

        #dotnet-home #dotnet-expert .home-intro__tags span:nth-child(1) {
            animation-delay: .62s;
        }

        #dotnet-home #dotnet-expert .home-intro__tags span:nth-child(2) {
            animation-delay: .70s;
        }

        #dotnet-home #dotnet-expert .home-intro__tags span:nth-child(3) {
            animation-delay: .78s;
        }

        #dotnet-home #dotnet-expert .home-intro__tags span:nth-child(4) {
            animation-delay: .86s;
        }

        #dotnet-home #dotnet-expert .home-intro__tags span:nth-child(5) {
            animation-delay: .94s;
        }

        #dotnet-home #dotnet-expert .home-intro__tags span:hover {
            animation: none;
        }

@keyframes homeIntroHeadingIn {
    from {
        opacity: 0;
        transform: translate3d(-24px, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeIntroContentIn {
    from {
        opacity: 0;
        transform: translate3d(28px, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeIntroAccentIn {
    from {
        opacity: 0;
        transform: scaleY(0);
    }

    to {
        opacity: .7;
        transform: scaleY(1);
    }
}

@keyframes homeIntroLineIn {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes homeIntroMetaIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes homeIntroTagIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes homeIntroCodeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #dotnet-home #dotnet-expert .home-intro__heading,
    #dotnet-home #dotnet-expert .home-intro__content,
    #dotnet-home #dotnet-expert .home-intro__heading::after,
    #dotnet-home #dotnet-expert .home-intro__content::before,
    #dotnet-home #dotnet-expert .home-intro__content::after,
    #dotnet-home #dotnet-expert .home-intro__meta-item,
    #dotnet-home #dotnet-expert .home-intro__tags span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   SERVICES — MODERN, ICON-FREE, RESPONSIVE
   Single consolidated services override.
   ========================================================= */

#dotnet-home #services {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 7% 5%, rgba(34, 201, 223, .10), transparent 27%), radial-gradient(circle at 94% 85%, rgba(21, 159, 202, .07), transparent 30%), #fff;
}

    /* ---------------------------------------------------------
   SECTION HEADER
   --------------------------------------------------------- */

    #dotnet-home #services .home-section-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 48px;
        text-align: center;
    }

        #dotnet-home #services .home-section-head > div:first-child {
            width: 100%;
            max-width: 1080px;
        }

        #dotnet-home #services .home-section-head h2 {
            max-width: 1080px;
            margin: 12px auto 0;
            color: var(--home-heading);
            font-size: clamp(42px, 5vw, 64px);
            line-height: 1.02;
            letter-spacing: -.055em;
            font-weight: 850;
        }

            #dotnet-home #services .home-section-head h2 span {
                color: var(--home-primary-dark);
                white-space: normal;
            }

        #dotnet-home #services .home-section-head > p {
            max-width: 860px;
            margin: 18px auto 0;
            padding: 0;
            border-left: 0;
            color: #5f7077;
            font-size: 18px;
            line-height: 1.75;
            font-weight: 500;
        }

        /* Header animation */

        #dotnet-home #services .home-section-head > div:first-child {
            animation: servicesHeaderTitleIn .7s var(--home-ease) both;
        }

        #dotnet-home #services .home-section-head > p {
            animation: servicesHeaderIntroIn .7s .1s var(--home-ease) both;
        }

@keyframes servicesHeaderTitleIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes servicesHeaderIntroIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ---------------------------------------------------------
   SERVICE GRID
   --------------------------------------------------------- */

#dotnet-home #services .home-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 365px;
    gap: 18px;
    align-items: stretch;
}

/* ---------------------------------------------------------
   SERVICE CARD
   --------------------------------------------------------- */

#dotnet-home #services .service-card {
    --service-accent: #159fca;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 365px;
    min-height: 365px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid #dbe7ea;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff 0%, #fbfdfe 100%);
    box-shadow: 0 10px 30px rgba(38, 54, 58, .045);
    transition: transform .45s var(--home-ease), box-shadow .45s ease, border-color .35s ease;
}

    #dotnet-home #services .service-card::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 280px;
        height: 280px;
        top: -135px;
        right: -105px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(34, 201, 223, .15), transparent 68% );
        opacity: .55;
        transform: scale(.75);
        pointer-events: none;
        transition: opacity .45s ease, transform .6s var(--home-ease);
    }

    #dotnet-home #services .service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        height: 2px;
        border-radius: 0 0 4px 4px;
        background: linear-gradient( 90deg, transparent, var(--service-accent), transparent );
        opacity: 0;
        transform: scaleX(.3);
        transform-origin: center;
        pointer-events: none;
        transition: opacity .35s ease, transform .55s var(--home-ease);
    }

    #dotnet-home #services .service-card:hover {
        transform: translateY(-8px);
        border-color: #b9dce4;
        box-shadow: 0 24px 55px rgba(38, 54, 58, .12);
    }

        #dotnet-home #services .service-card:hover::before {
            opacity: 1;
            transform: scaleX(1);
        }

        #dotnet-home #services .service-card:hover::after {
            opacity: 1;
            transform: scale(1);
        }

/* Featured card */

#dotnet-home #services .service-card--large {
    grid-column: span 2;
    --service-accent: #22d3ee;
    color: #fff;
    border-color: #0a2854;
    background: radial-gradient( circle at 88% 18%, rgba(34, 211, 238, .17), transparent 30% ), linear-gradient( 145deg, #071e43 0%, #0c326b 100% );
    box-shadow: 0 18px 48px rgba(7, 32, 70, .17);
}

    #dotnet-home #services .service-card--large:hover {
        border-color: #1b568d;
        box-shadow: 0 28px 65px rgba(7, 32, 70, .25);
    }

    #dotnet-home #services .service-card--large::after {
        background: radial-gradient( circle, rgba(34, 211, 238, .20), transparent 68% );
    }

/* Accent card */

#dotnet-home #services .service-card--accent {
    --service-accent: #159fca;
    background: radial-gradient( circle at 88% 12%, rgba(34, 201, 223, .15), transparent 34% ), linear-gradient( 145deg, #eafbfd 0%, #fff 78% );
}

/* ---------------------------------------------------------
   ICONS & NUMBERS
   --------------------------------------------------------- */

/* Icons and card numbers are intentionally removed. */
#dotnet-home #services .service-card__icon,
#dotnet-home #services .service-card__number {
    pointer-events: none;
    display: none !important;
}

/* ---------------------------------------------------------
   CARD CONTENT
   --------------------------------------------------------- */

#dotnet-home #services .service-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
}

/* Service category labels are intentionally hidden for a cleaner card layout. */
#dotnet-home #services .service-card__category {
    display: none !important;
}

#dotnet-home #services .service-card h3 {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0 0 12px;
    color: #53656c;
    font-size: 23px;
    line-height: 1.23;
    letter-spacing: -.025em;
    font-weight: 750;
}

#dotnet-home #services .service-card--large h3 {
    color: #fff;
    font-size: 25px;
}

#dotnet-home #services .service-card p {
    position: relative;
    z-index: 2;
    max-width: 570px;
    margin: 0;
    color: #687980 !important;
    font-size: 15px;
    line-height: 1.72;
}

#dotnet-home #services .service-card--large p {
    color: rgba(255,255,255,.72) !important;
}

/* ---------------------------------------------------------
   CARD CTA
   --------------------------------------------------------- */

#dotnet-home #services .service-card a {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    padding-top: 15px;
    color: #087aa1;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
    transition: color .3s ease, transform .35s var(--home-ease);
}

#dotnet-home #services .service-card--large a {
    color: #72ddeb;
}

#dotnet-home #services .service-card a span {
    display: inline-block;
    transition: transform .35s var(--home-ease);
}

#dotnet-home #services .service-card a:hover {
    transform: translateX(4px);
}

    #dotnet-home #services .service-card a:hover span {
        transform: translate(2px, -2px);
    }

/* ---------------------------------------------------------
   CARD ENTRANCE ANIMATION
   --------------------------------------------------------- */

#dotnet-home #services .service-card.reveal.is-visible {
    animation: servicesCardReveal .7s var(--home-ease) both;
}

#dotnet-home #services .service-card:nth-child(1).reveal.is-visible {
    animation-delay: .03s;
}

#dotnet-home #services .service-card:nth-child(2).reveal.is-visible {
    animation-delay: .09s;
}

#dotnet-home #services .service-card:nth-child(3).reveal.is-visible {
    animation-delay: .15s;
}

#dotnet-home #services .service-card:nth-child(4).reveal.is-visible {
    animation-delay: .21s;
}

#dotnet-home #services .service-card:nth-child(5).reveal.is-visible {
    animation-delay: .27s;
}

#dotnet-home #services .service-card:nth-child(6).reveal.is-visible {
    animation-delay: .33s;
}

#dotnet-home #services .service-card:nth-child(7).reveal.is-visible {
    animation-delay: .39s;
}

#dotnet-home #services .service-card:nth-child(8).reveal.is-visible {
    animation-delay: .45s;
}

@keyframes servicesCardReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(.975);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #dotnet-home #services .home-section-head {
        margin-bottom: 40px;
        text-align: center;
    }

        #dotnet-home #services .home-section-head > div:first-child {
            max-width: 760px;
        }

        #dotnet-home #services .home-section-head h2 {
            max-width: 760px;
            font-size: clamp(40px, 6vw, 54px);
        }

        #dotnet-home #services .home-section-head > p {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

    #dotnet-home #services .home-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 350px;
        gap: 16px;
    }

    #dotnet-home #services .service-card,
    #dotnet-home #services .service-card--large {
        height: 350px;
        min-height: 350px;
    }

    #dotnet-home #services .service-card--large {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {

    #dotnet-home #services .home-section-head {
        margin-bottom: 34px;
        text-align: center;
    }

        #dotnet-home #services .home-section-head h2 {
            max-width: 100%;
            font-size: 38px;
            line-height: 1.06;
            letter-spacing: -.045em;
        }

            #dotnet-home #services .home-section-head h2 span {
                white-space: normal;
            }

        #dotnet-home #services .home-section-head > p {
            max-width: 100%;
            margin: 16px auto 0;
            padding: 0;
            font-size: 15px;
            line-height: 1.7;
        }

    #dotnet-home #services .home-services__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 350px;
        gap: 15px;
    }

    #dotnet-home #services .service-card,
    #dotnet-home #services .service-card--large {
        grid-column: auto;
        width: 100%;
        height: 350px;
        min-height: 350px;
        padding: 25px 23px;
        border-radius: 20px;
    }

        #dotnet-home #services .service-card h3,
        #dotnet-home #services .service-card--large h3 {
            font-size: 21px;
            line-height: 1.25;
        }

        #dotnet-home #services .service-card p {
            font-size: 14px;
            line-height: 1.68;
        }
}

@media (prefers-reduced-motion: reduce) {

    #dotnet-home #services .home-section-head > div:first-child,
    #dotnet-home #services .home-section-head > p,
    #dotnet-home #services .service-card,
    #dotnet-home #services .service-card *,
    #dotnet-home #services .service-card::before,
    #dotnet-home #services .service-card::after {
        animation: none !important;
        transition: none !important;
    }

        #dotnet-home #services .service-card:hover {
            transform: none;
        }
}


/* =========================================================
   HOMEPAGE — POLISHED HOVER INTERACTIONS
   Consistent, restrained micro-interactions across the page.
   ========================================================= */

/* Buttons */
#dotnet-home .home-button {
    isolation: isolate;
}

    #dotnet-home .home-button::before {
        content: "";
        position: absolute;
        z-index: -1;
        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(--home-ease);
        pointer-events: none;
    }

    #dotnet-home .home-button:hover::before {
        left: 135%;
    }

    #dotnet-home .home-button:hover {
        transform: translateY(-3px);
    }

        #dotnet-home .home-button:hover span {
            transform: translateX(3px);
        }

/* Hero controls */
#dotnet-home .home-hero__control {
    transition: transform .3s var(--home-ease), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    #dotnet-home .home-hero__control:hover {
        transform: translateY(-3px) scale(1.03);
        background: rgba(255,255,255,.13);
        border-color: rgba(255,255,255,.40);
        box-shadow: 0 12px 28px rgba(0,0,0,.20);
    }

#dotnet-home .home-hero__dots button:hover {
    background: rgba(255,255,255,.58);
}

/* Hero code window */
#dotnet-home .code-window {
    transition: transform .5s var(--home-ease), box-shadow .5s var(--home-ease), border-color .4s ease;
}

    #dotnet-home .code-window:hover {
        transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-7px);
        border-color: rgba(126,231,245,.30);
        box-shadow: 0 50px 115px rgba(0,0,0,.43);
    }

/* Shared hover depth for content cards */
#dotnet-home .industry-card,
#dotnet-home .expertise-card,
#dotnet-home .technology-card,
#dotnet-home .why-card,
#dotnet-home .portfolio-card {
    transition: transform .38s var(--home-ease), box-shadow .38s var(--home-ease), border-color .32s ease, background .32s ease;
}

    #dotnet-home .industry-card:hover,
    #dotnet-home .expertise-card:hover,
    #dotnet-home .why-card:hover {
        transform: translateY(-3px);
        border-color: #c7dfe4;
        box-shadow: 0 14px 30px rgba(38,54,58,.09);
    }

    /* Pointer-follow soft highlight */
    #dotnet-home .industry-card::after,
    #dotnet-home .technology-card::after,
    #dotnet-home .why-card::after {
        opacity: 0;
        transition: opacity .35s ease;
    }

    #dotnet-home .industry-card:hover::after,
    #dotnet-home .technology-card:hover::after,
    #dotnet-home .why-card:hover::after {
        opacity: 1;
    }

/* Service cards */
#dotnet-home #services .service-card__icon {
    transition: transform .35s var(--home-ease), box-shadow .35s ease, background .35s ease;
}

#dotnet-home #services .service-card:hover .service-card__icon {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(21,159,202,.15);
}

/* Intro tags */
#dotnet-home .home-intro__tags span {
    transition: transform .3s var(--home-ease), border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}

    #dotnet-home .home-intro__tags span:hover {
        transform: translateY(-3px);
        border-color: #b9dce4;
        color: var(--home-primary-dark);
        background: #f5fcfd;
        box-shadow: 0 10px 24px rgba(38,54,58,.08);
    }

/* Hire panel */
#dotnet-home .home-hire__panel {
    border: 1px solid transparent;
    transition: transform .45s var(--home-ease), box-shadow .45s var(--home-ease), border-color .35s ease;
}

    #dotnet-home .home-hire__panel:hover {
        transform: translateY(-6px);
        border-color: rgba(34,211,238,.20);
        box-shadow: 0 28px 64px rgba(38,54,58,.14);
    }

#dotnet-home .home-hire__code {
    transition: transform .45s var(--home-ease), box-shadow .45s var(--home-ease);
}

#dotnet-home .home-hire__panel:hover .home-hire__code {
    transform: translateY(-6px) scale(1.045);
    box-shadow: 0 28px 75px rgba(34,211,238,.34);
}

/* Development process */
#dotnet-home #development-process .process-step {
    transition: transform .35s var(--home-ease), border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

    #dotnet-home #development-process .process-step:hover {
        transform: translateY(-6px);
        border-color: #b9dce4;
        background: #fff;
        box-shadow: 0 20px 42px rgba(38,54,58,.10);
    }

    #dotnet-home #development-process .process-step > span {
        transition: transform .3s var(--home-ease), box-shadow .3s ease;
    }

    #dotnet-home #development-process .process-step:hover > span {
        transform: scale(1.08);
        box-shadow: 0 10px 24px rgba(15,142,174,.24);
    }

    #dotnet-home #development-process .process-step h3 {
        transition: color .3s ease;
    }

    #dotnet-home #development-process .process-step:hover h3 {
        color: var(--home-primary-dark);
    }

/* Modernization visual */
#dotnet-home .modernization-visual__window {
    transition: transform .45s var(--home-ease), box-shadow .45s var(--home-ease), border-color .45s ease;
}

    #dotnet-home .modernization-visual__window:hover {
        transform: translateY(-7px);
        border-color: #c5e0e5;
        box-shadow: 0 26px 58px rgba(38,54,58,.12);
    }

#dotnet-home .modernization-visual__old,
#dotnet-home .modernization-visual__new {
    transition: transform .35s var(--home-ease), box-shadow .35s ease;
}

#dotnet-home .modernization-visual__window:hover .modernization-visual__old {
    transform: translateX(-4px);
    box-shadow: 0 10px 24px rgba(38,54,58,.06);
}

#dotnet-home .modernization-visual__window:hover .modernization-visual__new {
    transform: translateX(4px);
    box-shadow: 0 15px 32px rgba(37,99,235,.18);
}

/* Technology tags */
#dotnet-home .technology-tags span {
    transition: transform .25s var(--home-ease), border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

    #dotnet-home .technology-tags span:hover {
        transform: translateY(-2px);
        border-color: rgba(34,201,223,.42);
        background: rgba(34,201,223,.13);
        color: var(--home-primary-dark);
        box-shadow: 0 7px 18px rgba(38,54,58,.07);
    }

#dotnet-home #technology-stack .technology-tags span:hover {
    color: #fff;
    background: rgba(34,201,223,.18);
    border-color: rgba(34,201,223,.5);
}

/* Headings / value points */
#dotnet-home .why-card h3,
#dotnet-home .expertise-card h3,
#dotnet-home .value-point span {
    transition: color .3s ease;
}

#dotnet-home .why-card:hover h3,
#dotnet-home .expertise-card:hover h3 {
    color: var(--home-primary-dark);
}

#dotnet-home .why-card--big:hover h3,
#dotnet-home .expertise-card--featured:hover h3 {
    color: #fff;
}

#dotnet-home .value-point {
    position: relative;
    transition: transform .3s var(--home-ease), padding-left .3s var(--home-ease), border-color .3s ease;
}

    #dotnet-home .value-point:hover {
        transform: translateX(6px);
        padding-left: 9px;
        border-color: #b9dce4;
    }

        #dotnet-home .value-point:hover b {
            color: var(--home-primary-dark);
        }

/* FAQ */
#dotnet-home > #faq .home-faq__item {
    transition: transform .3s var(--home-ease), border-color .3s ease, box-shadow .3s ease;
}

    #dotnet-home > #faq .home-faq__item:hover {
        transform: translateY(-3px);
        border-color: #bfdde4 !important;
        box-shadow: 0 14px 32px rgba(38,54,58,.08);
    }

/* Accessibility: keep motion restrained when requested */
@media (prefers-reduced-motion: reduce) {
    #dotnet-home.home-motion-ready .reveal,
    #dotnet-home .home-button,
    #dotnet-home .home-hero__control,
    #dotnet-home .code-window,
    #dotnet-home .home-intro__tags span,
    #dotnet-home .home-hire__panel,
    #dotnet-home .home-hire__code,
    #dotnet-home .service-card,
    #dotnet-home .industry-card,
    #dotnet-home .expertise-card,
    #dotnet-home .technology-card,
    #dotnet-home .why-card,
    #dotnet-home .portfolio-card,
    #dotnet-home #development-process .process-step,
    #dotnet-home .modernization-visual__window,
    #dotnet-home .modernization-visual__old,
    #dotnet-home .modernization-visual__new,
    #dotnet-home .technology-tags span,
    #dotnet-home .value-point,
    #dotnet-home > #faq .home-faq__item {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        translate: 0 0 !important;
    }
}

/* Homepage experience metrics */
#dotnet-home .home-main > #experience-in-numbers {
    padding-top: 54px;
    padding-bottom: 60px;
    background: linear-gradient(135deg, #f2fafb 0%, #ffffff 52%, #f5faff 100%);
}

#dotnet-home .home-proof-stats__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

    #dotnet-home .home-proof-stats__head h2 {
        margin: 11px 0 0;
        color: var(--home-heading);
        font-size: clamp(30px, 3vw, 42px);
        line-height: 1.12;
        letter-spacing: -.035em;
    }

        #dotnet-home .home-proof-stats__head h2 span {
            color: var(--home-primary-dark);
        }

    #dotnet-home .home-proof-stats__head > p {
        max-width: 315px;
        margin: 0;
        font-size: 14px;
        line-height: 1.65;
    }

#dotnet-home .home-proof-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

#dotnet-home .home-proof-stats__card {
    position: relative;
    min-width: 0;
    min-height: 207px;
    padding: 28px 22px 24px;
    overflow: hidden;
    border: 1px solid #dcebed;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(25, 70, 82, .045);
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Keep the reveal transition while allowing the hover styling to animate. */
#dotnet-home.home-motion-ready .home-proof-stats__card.reveal {
    transition: opacity .68s var(--home-ease) var(--reveal-delay, 0ms), translate .68s var(--home-ease) var(--reveal-delay, 0ms), background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

#dotnet-home .home-proof-stats__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    width: 48px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--home-primary), var(--home-accent));
    transition: width .28s ease;
}

#dotnet-home .home-proof-stats__number {
    display: block;
    margin-bottom: 12px;
    color: #087a9a;
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
    transition: color .28s ease;
}

#dotnet-home .home-proof-stats__card h3 {
    margin: 0 0 7px;
    color: var(--home-heading);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.3;
}

#dotnet-home .home-proof-stats__card p {
    margin: 0;
    color: var(--home-muted);
    font-size: 13px;
    line-height: 1.6;
}

@media (hover: hover) {
    #dotnet-home .home-proof-stats__card:hover {
        background-color: #f8fdfe;
        border-color: #a8d9e3;
        box-shadow: 0 12px 28px rgba(15, 111, 137, .08);
    }

        #dotnet-home .home-proof-stats__card:hover::before {
            width: 68px;
        }

        #dotnet-home .home-proof-stats__card:hover .home-proof-stats__number {
            color: #075f7a;
        }
}

@media (max-width: 760px) {
    #dotnet-home .home-main > #experience-in-numbers {
        padding: 42px 20px 46px;
    }
}

@media (max-width: 620px) {
    #dotnet-home .home-proof-stats__head {
        display: block;
        margin-bottom: 23px;
    }

        #dotnet-home .home-proof-stats__head > p {
            max-width: none;
            margin-top: 10px;
        }

    #dotnet-home .home-proof-stats__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #dotnet-home .home-proof-stats__card {
        min-height: 0;
        padding: 23px 23px 21px;
    }

    #dotnet-home .home-proof-stats__number {
        font-size: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #dotnet-home .home-proof-stats__card,
    #dotnet-home.home-motion-ready .home-proof-stats__card.reveal,
    #dotnet-home .home-proof-stats__card::before,
    #dotnet-home .home-proof-stats__number {
        transition: none !important;
    }
}

/* Sidebar interactions and scroll reveal */
#dotnet-home .home-sidebar__card {
    transition: transform .32s var(--home-ease), border-color .32s ease, box-shadow .32s ease;
}

#dotnet-home.home-motion-ready .home-sidebar__card.reveal {
    transition: opacity .68s var(--home-ease) var(--reveal-delay, 0ms), translate .68s var(--home-ease) var(--reveal-delay, 0ms), transform .32s var(--home-ease), border-color .32s ease, box-shadow .32s ease;
}

#dotnet-home .home-sidebar__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: 46px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--home-primary), var(--home-accent));
    transition: width .3s var(--home-ease);
}

#dotnet-home .home-sidebar__rate::before,
#dotnet-home .home-sidebar__technologies::before {
    background: linear-gradient(90deg, #22c9df, #6ee7f2);
}

#dotnet-home .home-sidebar__nav a {
    align-items: center;
    padding: 11px 0;
    border-radius: 8px;
    transition: padding-left .25s var(--home-ease), background-color .25s ease, color .25s ease;
}

    #dotnet-home .home-sidebar__nav a span {
        color: #7d9ba3;
        font-size: 15px;
        line-height: 1;
        transition: color .25s ease, transform .25s ease;
    }

#dotnet-home .home-sidebar__tags span {
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s var(--home-ease);
}

#dotnet-home .home-sidebar__button {
    position: relative;
    overflow: hidden;
}

@media (hover: hover) {
    #dotnet-home .home-sidebar__card:hover {
        transform: translateY(-5px);
        border-color: #83c7d5;
        box-shadow: 0 22px 42px rgba(21, 90, 110, .16);
    }

    #dotnet-home .home-sidebar__rate:hover,
    #dotnet-home .home-sidebar__technologies:hover {
        transform: translateY(-5px);
        border-color: rgba(110, 231, 242, .45);
        box-shadow: 0 24px 46px rgba(12, 48, 58, .24);
    }

    #dotnet-home .home-sidebar__card:hover::before {
        width: 76px;
    }

    #dotnet-home .home-sidebar__nav a:hover {
        padding-left: 5px;
        color: var(--home-primary-dark);
        background-color: #eef9fb;
    }

        #dotnet-home .home-sidebar__nav a:hover span {
            color: var(--home-primary-dark);
            transform: translate(2px, -2px);
        }

    #dotnet-home .home-sidebar__tags span:hover {
        transform: translateY(-2px);
        color: #fff;
        border-color: rgba(110, 231, 242, .55);
        background-color: rgba(34, 201, 223, .2);
    }
}

#dotnet-home .home-sidebar__card:focus-within {
    border-color: #8fcbd9;
}

#dotnet-home .home-sidebar__nav a:focus-visible,
#dotnet-home .home-sidebar__button:focus-visible {
    outline: 2px solid var(--home-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #dotnet-home .home-sidebar__card,
    #dotnet-home.home-motion-ready .home-sidebar__card.reveal,
    #dotnet-home .home-sidebar__card::before,
    #dotnet-home .home-sidebar__nav a,
    #dotnet-home .home-sidebar__nav a span,
    #dotnet-home .home-sidebar__tags span,
    #dotnet-home .home-sidebar__button,
    #dotnet-home .home-sidebar__button::after {
        transition: none !important;
        transform: none !important;
    }
}

/* The sidebar scrolls with the page, then stays at the viewport edge. */
@media (min-width: 1051px) {
    #dotnet-home .home-sidebar {
        position: sticky;
        top: var(--home-sidebar-sticky-top, 24px);
        align-self: start;
    }
}
