/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-shell[b-2cr214aawv] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main[b-2cr214aawv] {
    flex: 1;
}


/* Header */

.site-header[b-2cr214aawv] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 248, 250, 0.88);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-inner[b-2cr214aawv] {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Brand */

.brand[b-2cr214aawv] {
    color: var(--color-primary);
    font-size: 21px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.05em;
}

    .brand span[b-2cr214aawv] {
        color: var(--color-accent);
    }


/* Navigation */

.navigation[b-2cr214aawv] {
    display: flex;
    align-items: center;
    gap: 34px;
}

    .navigation a[b-2cr214aawv] {
        position: relative;
        color: var(--color-text-soft);
        font-size: 14px;
        font-weight: 500;
        transition: color var(--transition);
    }

        .navigation a:hover[b-2cr214aawv] {
            color: var(--color-text);
        }

        .navigation a[b-2cr214aawv]::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: -7px;
            left: 0;
            height: 1px;
            background: var(--color-primary);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform var(--transition);
        }

        .navigation a:hover[b-2cr214aawv]::after {
            transform: scaleX(1);
            transform-origin: left;
        }


/* Footer */

.site-footer[b-2cr214aawv] {
    border-top: 1px solid var(--color-border);
}

.footer-inner[b-2cr214aawv] {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 13px;
}


/* Mobile */

@media (max-width: 720px) {

    .header-inner[b-2cr214aawv] {
        height: 72px;
    }

    .navigation[b-2cr214aawv] {
        gap: 20px;
    }

        .navigation a:nth-child(3)[b-2cr214aawv] {
            display: none;
        }

    .footer-inner[b-2cr214aawv] {
        padding-block: 28px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
    }
}

@media (max-width: 480px) {

    .navigation[b-2cr214aawv] {
        gap: 16px;
    }

        .navigation a[b-2cr214aawv] {
            font-size: 13px;
        }

            .navigation a:nth-child(2)[b-2cr214aawv] {
                display: none;
            }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ahbpf352jd],
.components-reconnect-repeated-attempt-visible[b-ahbpf352jd],
.components-reconnect-failed-visible[b-ahbpf352jd],
.components-pause-visible[b-ahbpf352jd],
.components-resume-failed-visible[b-ahbpf352jd],
.components-rejoining-animation[b-ahbpf352jd] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-retrying[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-failed[b-ahbpf352jd],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ahbpf352jd] {
    display: block;
}


#components-reconnect-modal[b-ahbpf352jd] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ahbpf352jd 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ahbpf352jd 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ahbpf352jd 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ahbpf352jd]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ahbpf352jd 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ahbpf352jd {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ahbpf352jd {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ahbpf352jd {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ahbpf352jd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ahbpf352jd] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ahbpf352jd] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ahbpf352jd] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ahbpf352jd] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ahbpf352jd] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ahbpf352jd] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ahbpf352jd 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ahbpf352jd] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ahbpf352jd {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Sections/AboutSection.razor.rz.scp.css */
.about[b-67veotfnn2] {
    position: relative;
    overflow: hidden;
    background: #0f1b38;
    color: #fff;
}

/* =========================================================
   BACKGROUND
   ========================================================= */

.about-background[b-67veotfnn2] {
    position: absolute;
    inset: 0;
    background-image: url("/images/about/about-background.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    z-index: 0;
}

/*
    Mantém a fotografia bem visível à direita,
    mas recupera o navy sólido na zona do conteúdo.
*/
.about-overlay[b-67veotfnn2] {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(10, 23, 51, .99) 0%, rgba(10, 23, 51, .97) 26%, rgba(10, 23, 51, .91) 48%, rgba(10, 23, 51, .76) 68%, rgba(10, 23, 51, .52) 100% ), linear-gradient( 180deg, rgba(10, 23, 51, .20) 0%, rgba(10, 23, 51, .38) 100% );
    z-index: 1;
}

.about-container[b-67veotfnn2] {
    position: relative;
    z-index: 2;
    padding-top: 105px;
    padding-bottom: 100px;
}


/* =========================================================
   INTRO
   ========================================================= */

.about-intro[b-67veotfnn2] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .55fr);
    align-items: start;
    gap: 100px;
    margin-bottom: 85px;
}

.about-heading[b-67veotfnn2] {
    max-width: 720px;
}

    .about-heading h2[b-67veotfnn2] {
        margin: 0;
        color: #fff;
        font-size: clamp(44px, 4.15vw, 64px);
        font-weight: 600;
        line-height: 1.03;
        letter-spacing: -.055em;
    }

        .about-heading h2 span[b-67veotfnn2] {
            display: block;
            color: #2f6df6;
        }

.about-description[b-67veotfnn2] {
    max-width: 370px;
    padding-top: 9px;
}

    .about-description p[b-67veotfnn2] {
        margin: 0;
        color: rgba(255, 255, 255, .72);
        font-size: 15px;
        line-height: 1.75;
        letter-spacing: -.01em;
    }


/* =========================================================
   PROCESS
   ========================================================= */

.about-process[b-67veotfnn2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    /*
        Um fundo muito subtil para garantir que os cards
        continuam perfeitamente legíveis sobre a fotografia.
    */
    background: rgba(8, 20, 45, .28);
    backdrop-filter: blur(2px);
}

.process-item[b-67veotfnn2] {
    min-height: 245px;
    padding: 30px 42px 34px;
}

    .process-item + .process-item[b-67veotfnn2] {
        padding-left: 42px;
        border-left: 1px solid rgba(255, 255, 255, .16);
    }

.process-label[b-67veotfnn2] {
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, .46);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.process-number[b-67veotfnn2] {
    color: #3274ff;
}

.process-item h3[b-67veotfnn2] {
    max-width: 290px;
    margin: 38px 0 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.process-item ul[b-67veotfnn2] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-item li[b-67veotfnn2] {
    position: relative;
    margin-bottom: 12px;
    padding-left: 17px;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    line-height: 1.5;
}

    .process-item li[b-67veotfnn2]::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        width: 3px;
        height: 3px;
        background: #3274ff;
        border-radius: 50%;
    }


/* =========================================================
   STATEMENT
   ========================================================= */

.about-statement[b-67veotfnn2] {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    gap: 40px;
    padding-top: 62px;
}

.statement-label[b-67veotfnn2] {
    color: rgba(255, 255, 255, .40);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.about-statement p[b-67veotfnn2] {
    margin: 0;
    color: #fff;
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.05em;
}

    .about-statement p span[b-67veotfnn2] {
        color: rgba(255, 255, 255, .38);
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .about-background[b-67veotfnn2] {
        background-position: 62% center;
    }

    .about-overlay[b-67veotfnn2] {
        background: linear-gradient( 90deg, rgba(10, 23, 51, .99) 0%, rgba(10, 23, 51, .95) 50%, rgba(10, 23, 51, .70) 100% ), linear-gradient( 180deg, rgba(10, 23, 51, .20), rgba(10, 23, 51, .45) );
    }

    .about-intro[b-67veotfnn2] {
        grid-template-columns: 1.3fr .7fr;
        gap: 60px;
        margin-bottom: 70px;
    }

    .about-heading h2[b-67veotfnn2] {
        font-size: clamp(42px, 6vw, 58px);
    }

    .process-item[b-67veotfnn2] {
        padding-right: 28px;
    }

        .process-item + .process-item[b-67veotfnn2] {
            padding-left: 28px;
        }

    .about-statement[b-67veotfnn2] {
        grid-template-columns: 120px 1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .about-background[b-67veotfnn2] {
        /*
            No mobile deixamos a fotografia aparecer sobretudo
            na parte superior/direita.
        */
        background-position: 68% center;
    }

    .about-overlay[b-67veotfnn2] {
        background: linear-gradient( 180deg, rgba(10, 23, 51, .86) 0%, rgba(10, 23, 51, .96) 38%, rgba(10, 23, 51, .99) 100% );
    }

    .about-container[b-67veotfnn2] {
        padding-top: 80px;
        padding-bottom: 75px;
    }

    .about-intro[b-67veotfnn2] {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 65px;
    }

    .about-heading[b-67veotfnn2] {
        max-width: 560px;
    }

        .about-heading h2[b-67veotfnn2] {
            font-size: clamp(40px, 11vw, 54px);
        }

    .about-description[b-67veotfnn2] {
        max-width: 440px;
        padding-top: 0;
    }

    .about-process[b-67veotfnn2] {
        grid-template-columns: 1fr;
        background: rgba(8, 20, 45, .42);
        backdrop-filter: blur(4px);
    }

    .process-item[b-67veotfnn2] {
        min-height: auto;
        padding: 30px 0 40px;
    }

        .process-item + .process-item[b-67veotfnn2] {
            padding: 38px 0 40px;
            border-top: 1px solid rgba(255, 255, 255, .14);
            border-left: 0;
        }

        .process-item h3[b-67veotfnn2] {
            margin: 38px 0 24px;
        }

    .about-statement[b-67veotfnn2] {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 55px;
    }

        .about-statement p[b-67veotfnn2] {
            font-size: clamp(36px, 10vw, 48px);
            line-height: 1.04;
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .about-container[b-67veotfnn2] {
        padding-top: 68px;
        padding-bottom: 65px;
    }

    .about-heading h2[b-67veotfnn2] {
        font-size: 39px;
        line-height: 1.05;
    }

    .about-description p[b-67veotfnn2] {
        font-size: 14px;
    }

    .process-item h3[b-67veotfnn2] {
        font-size: 19px;
    }

    .about-statement p[b-67veotfnn2] {
        font-size: 38px;
    }
}
/* /Components/Sections/ContactSection.razor.rz.scp.css */
.contact[b-2dp86o4yhj] {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #0d1b3a;
    color: #fff;
}

/* subtle decorative circles */

.contact-circle[b-2dp86o4yhj] {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(70, 125, 235, .08);
    border-radius: 50%;
}

.contact-circle--large[b-2dp86o4yhj] {
    width: 430px;
    height: 430px;
    top: -310px;
    right: -40px;
}

.contact-circle--small[b-2dp86o4yhj] {
    width: 290px;
    height: 290px;
    top: -220px;
    right: 30px;
}


/* container */

.contact-container[b-2dp86o4yhj] {
    position: relative;
    z-index: 2;
    padding-top: 65px;
    padding-bottom: 65px;
}


/* single footer row */

.contact-row[b-2dp86o4yhj] {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


/* email */

.contact-email[b-2dp86o4yhj] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

    .contact-email:hover[b-2dp86o4yhj] {
        color: #fff;
    }

.status-dot[b-2dp86o4yhj] {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: #28d17c;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(40, 209, 124, .08);
}

.arrow[b-2dp86o4yhj] {
    color: #2f6df6;
    transition: transform .2s ease;
}

.contact-email:hover .arrow[b-2dp86o4yhj] {
    transform: translate(2px, -2px);
}


/* social links */

.contact-socials[b-2dp86o4yhj] {
    display: flex;
    align-items: center;
    gap: 32px;
}

    .contact-socials a[b-2dp86o4yhj] {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, .62);
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        transition: color .2s ease;
    }

        .contact-socials a span[b-2dp86o4yhj] {
            color: #2f6df6;
            transition: transform .2s ease;
        }

        .contact-socials a:hover[b-2dp86o4yhj] {
            color: #fff;
        }

            .contact-socials a:hover span[b-2dp86o4yhj] {
                transform: translate(2px, -2px);
            }


/* tablet */

@media (max-width: 760px) {

    .contact-container[b-2dp86o4yhj] {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .contact-row[b-2dp86o4yhj] {
        padding: 25px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .contact-socials[b-2dp86o4yhj] {
        gap: 25px;
    }

    .contact-circle--large[b-2dp86o4yhj] {
        width: 320px;
        height: 320px;
        top: -230px;
        right: -150px;
    }

    .contact-circle--small[b-2dp86o4yhj] {
        display: none;
    }
}


/* mobile */

@media (max-width: 480px) {

    .contact-container[b-2dp86o4yhj] {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .contact-email[b-2dp86o4yhj] {
        font-size: 12px;
    }

    .contact-socials[b-2dp86o4yhj] {
        width: 100%;
        justify-content: space-between;
        gap: 15px;
    }
}
/* /Components/Sections/ExpertiseSection.razor.rz.scp.css */
.expertise[b-fqvz8uo3bk] {
    padding: 90px 0 95px;
    background: #fff;
    color: var(--color-text);
}

/* HEADER */

.expertise-heading[b-fqvz8uo3bk] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 110px;
    align-items: end;
    padding-bottom: 85px;
}

.expertise-intro[b-fqvz8uo3bk] {
    max-width: 760px;
}

.eyebrow[b-fqvz8uo3bk] {
    display: block;
    margin-bottom: 28px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.expertise-intro h2[b-fqvz8uo3bk] {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(46px, 4.6vw, 68px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.06em;
}

    .expertise-intro h2 span[b-fqvz8uo3bk] {
        display: block;
        color: var(--color-accent);
    }

.expertise-lead[b-fqvz8uo3bk] {
    padding-bottom: 5px;
}

    .expertise-lead p[b-fqvz8uo3bk] {
        max-width: 390px;
        margin: 0;
        color: var(--color-text-soft);
        font-size: 15px;
        line-height: 1.75;
        letter-spacing: -.01em;
    }


/* LIST */

.expertise-list[b-fqvz8uo3bk] {
    border-top: 1px solid var(--color-border);
}

.expertise-item[b-fqvz8uo3bk] {
    min-height: 135px;
    padding: 32px 0;
    display: grid;
    grid-template-columns: 70px 1fr 1.35fr 24px;
    gap: 40px;
    align-items: start;
    border-top: 1px solid var(--color-border);
}

.expertise-number[b-fqvz8uo3bk] {
    padding-top: 5px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
}

.expertise-title h3[b-fqvz8uo3bk] {
    margin: 0;
    color: var(--color-text);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.expertise-description p[b-fqvz8uo3bk] {
    max-width: 520px;
    margin: 0 0 20px;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.7;
}

.expertise-tech[b-fqvz8uo3bk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

    .expertise-tech span[b-fqvz8uo3bk] {
        position: relative;
        color: var(--color-text-muted);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .04em;
    }

        .expertise-tech span:not(:last-child)[b-fqvz8uo3bk]::after {
            content: "·";
            position: absolute;
            right: -13px;
            color: #c4cad3;
        }

.expertise-arrow[b-fqvz8uo3bk] {
    padding-top: 1px;
    color: var(--color-text-muted);
    font-size: 18px;
    transition: color var(--transition), transform var(--transition);
}


/* HOVER */

.expertise-item:hover[b-fqvz8uo3bk] {
    padding-left: 18px;
    padding-right: 18px;
    background: #f8faff;
}

    .expertise-item:hover .expertise-arrow[b-fqvz8uo3bk] {
        color: var(--color-accent);
        transform: translate(3px, -3px);
    }


/* FOOTER */

.expertise-footer[b-fqvz8uo3bk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 48px;
}

.expertise-footer-label[b-fqvz8uo3bk] {
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

.stack-line[b-fqvz8uo3bk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}

    .stack-line span[b-fqvz8uo3bk] {
        color: var(--color-text);
        font-size: 11px;
        font-weight: 600;
    }

    .stack-line i[b-fqvz8uo3bk] {
        width: 3px;
        height: 3px;
        background: var(--color-accent);
        border-radius: 50%;
    }


/* TABLET */

@media (max-width: 980px) {

    .expertise[b-fqvz8uo3bk] {
        padding: 100px 0 90px;
    }

    .expertise-heading[b-fqvz8uo3bk] {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 65px;
    }

    .expertise-lead p[b-fqvz8uo3bk] {
        max-width: 560px;
    }

    .expertise-item[b-fqvz8uo3bk] {
        grid-template-columns: 50px minmax(200px, .8fr) 1fr 24px;
        gap: 25px;
    }
}


/* MOBILE */

@media (max-width: 720px) {

    .expertise[b-fqvz8uo3bk] {
        padding: 80px 0 70px;
    }

    .expertise-heading[b-fqvz8uo3bk] {
        padding-bottom: 50px;
    }

    .eyebrow[b-fqvz8uo3bk] {
        margin-bottom: 20px;
    }

    .expertise-intro h2[b-fqvz8uo3bk] {
        font-size: clamp(40px, 12vw, 54px);
    }

    .expertise-item[b-fqvz8uo3bk] {
        grid-template-columns: 34px 1fr 20px;
        gap: 16px;
        padding: 32px 0;
    }

    .expertise-number[b-fqvz8uo3bk] {
        grid-column: 1;
        grid-row: 1;
    }

    .expertise-title[b-fqvz8uo3bk] {
        grid-column: 2;
        grid-row: 1;
    }

    .expertise-description[b-fqvz8uo3bk] {
        grid-column: 2 / 4;
        grid-row: 2;
        padding-top: 8px;
    }

    .expertise-arrow[b-fqvz8uo3bk] {
        grid-column: 3;
        grid-row: 1;
    }

    .expertise-item:hover[b-fqvz8uo3bk] {
        padding-left: 0;
        padding-right: 0;
        background: transparent;
    }

    .expertise-footer[b-fqvz8uo3bk] {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 38px;
    }

    .stack-line[b-fqvz8uo3bk] {
        justify-content: flex-start;
    }
}
/* /Components/Sections/HeroSection.razor.rz.scp.css */
.hero[b-03oikcoucn] {
    position: relative;
    overflow: hidden;
    padding: 42px 0 0;
    background: radial-gradient( circle at 72% 62%, rgba(47, 109, 246, .055), transparent 34% ), linear-gradient( 180deg, #ffffff 0%, #ffffff 62%, #f4f7fc 100% );
}


/* =========================================================
   TOP
   ========================================================= */

.hero-top[b-03oikcoucn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px;
}

.hero-identity[b-03oikcoucn] {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

    .hero-identity span:first-child[b-03oikcoucn] {
        color: var(--color-text);
    }

    .hero-identity .separator[b-03oikcoucn] {
        color: #d3d8e0;
    }

.hero-location[b-03oikcoucn] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-text-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
}

.location-dot[b-03oikcoucn] {
    width: 6px;
    height: 6px;
    background: #26c66b;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(38, 198, 107, .09);
}


/* =========================================================
   MAIN
   ========================================================= */

.hero-main[b-03oikcoucn] {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(470px, .98fr);
    gap: 85px;
    align-items: center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.hero-content[b-03oikcoucn] {
    position: relative;
    z-index: 4;
    padding-bottom: 30px;
}

    .hero-content h1[b-03oikcoucn] {
        max-width: 760px;
        margin: 0;
        color: var(--color-text);
        font-size: clamp(56px, 5.25vw, 80px);
        font-weight: 600;
        line-height: .98;
        letter-spacing: -.065em;
    }

        .hero-content h1 span[b-03oikcoucn] {
            display: block;
            color: var(--color-accent);
        }

.hero-description[b-03oikcoucn] {
    max-width: 590px;
    margin: 42px 0 0;
    color: var(--color-text-soft);
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: -.012em;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.hero-actions[b-03oikcoucn] {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.primary-action[b-03oikcoucn] {
    min-width: 196px;
    min-height: 54px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    color: #fff;
    background: #102352;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 18px 35px rgba(16, 35, 82, .13);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

    .primary-action:hover[b-03oikcoucn] {
        background: #17336f;
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(16, 35, 82, .18);
    }

    .primary-action span:last-child[b-03oikcoucn] {
        font-size: 17px;
        transition: transform var(--transition);
    }

    .primary-action:hover span:last-child[b-03oikcoucn] {
        transform: translate(2px, 2px);
    }

.secondary-action[b-03oikcoucn] {
    position: relative;
    padding: 10px 0;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

    .secondary-action[b-03oikcoucn]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 13px;
        height: 1px;
        background: var(--color-text);
        transition: width var(--transition);
    }

    .secondary-action:hover[b-03oikcoucn]::after {
        width: 100%;
    }


/* =========================================================
   TOPTAL
   ========================================================= */

.hero-toptal[b-03oikcoucn] {
    position: relative;
    margin-top: 30px;
    min-height: 175px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.toptal-official[b-03oikcoucn] {
    position: relative;
    flex: 0 0 205px;
    width: 205px;
    height: 190px;
}

#toptal-badge[b-03oikcoucn] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 212px;
    font-family: proxima-nova, Arial, sans-serif;
    transform: translate(-50%, -50%) scale(.80);
    transform-origin: center;
}

.toptal-hex-border[b-03oikcoucn] {
    --hex: polygon( 50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24% );
    display: inline-block;
    padding: 6px;
    background: #25a9ef;
    clip-path: var(--hex);
}

.toptal-hex-content[b-03oikcoucn] {
    width: 200px;
    padding: 24px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-align: center;
    background: linear-gradient( 153deg, #0667ff 18%, #204ecf 40%, #0f256e 80% );
    clip-path: var(--hex);
    box-shadow: 0 28px 50px rgba(6, 30, 96, .35);
}

.toptal-stars[b-03oikcoucn] {
    display: block;
}

.toptal-badge-title[b-03oikcoucn] {
    margin: 0;
    color: #fff;
    font-family: proxima-nova, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.toptal-divider[b-03oikcoucn] {
    width: 120px;
    height: 1px;
    background: #25a9ef;
}

.toptal-vetted[b-03oikcoucn] {
    margin-bottom: -6px;
    color: #fff;
    font-size: 16px;
    opacity: .8;
}

.toptal-logo[b-03oikcoucn] {
    display: block;
}

.toptal-hire[b-03oikcoucn] {
    padding: 4px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #296bff;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-decoration-thickness: .5px;
    text-underline-offset: 2px;
}

.toptal-copy[b-03oikcoucn] {
    min-width: 220px;
    padding-left: 24px;
    border-left: 1px solid #dce2eb;
}

    .toptal-copy > span[b-03oikcoucn] {
        display: block;
        margin-bottom: 8px;
        color: var(--color-text-muted);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .14em;
    }

    .toptal-copy strong[b-03oikcoucn] {
        display: block;
        color: var(--color-text);
        font-size: 13px;
        font-weight: 600;
    }

    .toptal-copy p[b-03oikcoucn] {
        margin: 6px 0 0;
        color: var(--color-text-muted);
        font-size: 10px;
        line-height: 1.5;
    }


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.hero-visual[b-03oikcoucn] {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}


/* ORBITS */

.visual-orbit[b-03oikcoucn] {
    position: absolute;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(47, 109, 246, .11);
    border-radius: 50%;
    z-index: -2;
}

.visual-orbit--small[b-03oikcoucn] {
    width: 345px;
    height: 345px;
    border-color: rgba(47, 109, 246, .065);
}


/* GLOW */

.hero-visual[b-03oikcoucn]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 430px;
    height: 120px;
    background: rgba(47, 109, 246, .11);
    filter: blur(55px);
    transform: translateX(-50%);
    z-index: -1;
}


/* =========================================================
   ENGINEERING CARD
   ========================================================= */

.engineering-card[b-03oikcoucn] {
    position: relative;
    width: min(100%, 520px);
    padding: 28px;
    color: #fff;
    background: radial-gradient( circle at 92% 8%, rgba(47, 109, 246, .25), transparent 37% ), #0b1938;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: 0 45px 80px rgba(15, 32, 68, .20), 0 12px 28px rgba(15, 32, 68, .12);
    transform: rotate(-2deg);
    z-index: 2;
}

.engineering-card-top[b-03oikcoucn] {
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

    .engineering-card-top > div[b-03oikcoucn] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

.engineering-eyebrow[b-03oikcoucn] {
    color: rgba(255, 255, 255, .38);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.engineering-card-top strong[b-03oikcoucn] {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.engineering-number[b-03oikcoucn] {
    color: rgba(255, 255, 255, .32);
    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   CODE WINDOW
   ========================================================= */

.code-window[b-03oikcoucn] {
    overflow: hidden;
    background: #101f40;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
}

.code-window-top[b-03oikcoucn] {
    height: 38px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .035);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 8px;
    font-weight: 500;
}

.code-dots[b-03oikcoucn] {
    display: flex;
    gap: 5px;
}

    .code-dots span[b-03oikcoucn] {
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, .22);
        border-radius: 50%;
    }

.code-content[b-03oikcoucn] {
    padding: 27px 22px 30px;
}

.code-line[b-03oikcoucn] {
    min-height: 29px;
    display: grid;
    grid-template-columns: 27px 1fr;
    align-items: center;
}

    .code-line code[b-03oikcoucn] {
        color: rgba(255, 255, 255, .78);
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        font-size: 12px;
        line-height: 1.6;
    }

.line-number[b-03oikcoucn] {
    color: rgba(255, 255, 255, .16);
    font-family: monospace;
    font-size: 8px;
}

.code-indent code[b-03oikcoucn] {
    padding-left: 22px;
}

.code-blue[b-03oikcoucn] {
    color: #6ea0ff;
}

.code-green[b-03oikcoucn] {
    color: #71d7b1;
}

.code-light[b-03oikcoucn] {
    color: #dce7ff;
}


/* =========================================================
   ENGINEERING FOOTER
   ========================================================= */

.engineering-footer[b-03oikcoucn] {
    padding-top: 22px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .38);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .12em;
}

.flow-line[b-03oikcoucn] {
    flex: 1;
    height: 1px;
    margin: 0 11px;
    background: rgba(255, 255, 255, .12);
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.floating-card[b-03oikcoucn] {
    position: absolute;
    padding: 17px 19px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #e7ebf2;
    border-radius: 9px;
    box-shadow: 0 20px 50px rgba(15, 32, 68, .10);
    z-index: 3;
}

    .floating-card > span[b-03oikcoucn] {
        margin-bottom: 12px;
        color: #a0a9b8;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: .14em;
    }

    .floating-card strong[b-03oikcoucn] {
        color: #15213b;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.8;
    }

.floating-card--stack[b-03oikcoucn] {
    top: 4px;
    right: -8px;
    min-width: 145px;
    transform: rotate(4deg);
}

.floating-card--scope[b-03oikcoucn] {
    right: -45px;
    bottom: 25px;
    width: 180px;
    transform: rotate(3deg);
}

    .floating-card--scope div[b-03oikcoucn] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px 12px;
    }

    .floating-card--scope strong[b-03oikcoucn] {
        font-size: 8px;
        letter-spacing: .03em;
    }


/* =========================================================
   BOTTOM
   ========================================================= */

.hero-bottom[b-03oikcoucn] {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-top: 1px solid #dce2eb;
}

.scroll-indicator[b-03oikcoucn] {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-text-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
}

.scroll-line[b-03oikcoucn] {
    position: relative;
    width: 32px;
    height: 1px;
    background: #d4dae4;
}

    .scroll-line[b-03oikcoucn]::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 4px;
        height: 1px;
        background: var(--color-accent);
    }

.hero-capabilities[b-03oikcoucn] {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--color-text-muted);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .12em;
}

    .hero-capabilities i[b-03oikcoucn] {
        width: 2px;
        height: 2px;
        background: #b9c1ce;
        border-radius: 50%;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .hero-main[b-03oikcoucn] {
        grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
        gap: 50px;
    }

    .hero-content h1[b-03oikcoucn] {
        font-size: clamp(52px, 5vw, 70px);
    }

    .engineering-card[b-03oikcoucn] {
        width: min(92%, 500px);
    }

    .floating-card--scope[b-03oikcoucn] {
        right: -5px;
    }
}


@media (max-width: 980px) {

    .hero[b-03oikcoucn] {
        padding-top: 34px;
    }

    .hero-main[b-03oikcoucn] {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .hero-content[b-03oikcoucn] {
        padding-bottom: 0;
    }

        .hero-content h1[b-03oikcoucn] {
            max-width: 760px;
        }

    .hero-description[b-03oikcoucn] {
        margin-top: 32px;
    }

    .hero-visual[b-03oikcoucn] {
        min-height: 470px;
    }

    .hero-bottom[b-03oikcoucn] {
        margin-top: 20px;
    }
}


@media (max-width: 720px) {

    .hero[b-03oikcoucn] {
        padding-top: 26px;
    }

    .hero-top[b-03oikcoucn] {
        margin-bottom: 45px;
    }

    .hero-location[b-03oikcoucn] {
        display: none;
    }

    .hero-content h1[b-03oikcoucn] {
        font-size: clamp(48px, 14vw, 64px);
        line-height: .98;
    }

    .hero-description[b-03oikcoucn] {
        margin-top: 28px;
        font-size: 14px;
    }

    .hero-actions[b-03oikcoucn] {
        margin-top: 28px;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .primary-action[b-03oikcoucn] {
        width: 100%;
    }


    /* TOPTAL MOBILE */

    .hero-toptal[b-03oikcoucn] {
        margin-top: 28px;
        min-height: 145px;
        gap: 8px;
    }

    .toptal-official[b-03oikcoucn] {
        flex: 0 0 145px;
        width: 145px;
        height: 140px;
    }

    #toptal-badge[b-03oikcoucn] {
        transform: translate(-50%, -50%) scale(.57);
    }

    .toptal-copy[b-03oikcoucn] {
        min-width: 0;
        padding-left: 16px;
    }

        .toptal-copy p[b-03oikcoucn] {
            max-width: 170px;
        }


    /* VISUAL MOBILE */

    .hero-visual[b-03oikcoucn] {
        min-height: 420px;
        margin-top: 25px;
    }

    .engineering-card[b-03oikcoucn] {
        width: 92%;
        padding: 20px;
        border-radius: 13px;
        transform: rotate(-1deg);
    }

    .visual-orbit[b-03oikcoucn] {
        width: 340px;
        height: 340px;
    }

    .visual-orbit--small[b-03oikcoucn] {
        width: 250px;
        height: 250px;
    }

    .code-content[b-03oikcoucn] {
        padding: 24px 16px;
    }

    .code-line[b-03oikcoucn] {
        grid-template-columns: 23px 1fr;
    }

        .code-line code[b-03oikcoucn] {
            font-size: 10px;
        }

    .code-indent code[b-03oikcoucn] {
        padding-left: 12px;
    }

    .floating-card--stack[b-03oikcoucn] {
        top: -8px;
        right: 0;
        transform: scale(.80) rotate(4deg);
        transform-origin: top right;
    }

    .floating-card--scope[b-03oikcoucn] {
        right: -2px;
        bottom: 0;
        transform: scale(.76) rotate(3deg);
        transform-origin: bottom right;
    }


    /* BOTTOM */

    .hero-bottom[b-03oikcoucn] {
        min-height: 70px;
    }

    .hero-capabilities[b-03oikcoucn] {
        display: none;
    }
}


@media (max-width: 430px) {

    .hero-identity[b-03oikcoucn] {
        gap: 7px;
        font-size: 7px;
    }

    .hero-content h1[b-03oikcoucn] {
        font-size: 46px;
    }

    .hero-toptal[b-03oikcoucn] {
        align-items: center;
    }

    .toptal-copy > span[b-03oikcoucn] {
        font-size: 7px;
    }

    .toptal-copy strong[b-03oikcoucn] {
        font-size: 12px;
    }

    .toptal-copy p[b-03oikcoucn] {
        font-size: 9px;
    }

    .hero-visual[b-03oikcoucn] {
        min-height: 390px;
    }

    .engineering-card[b-03oikcoucn] {
        width: 96%;
        padding: 17px;
    }

    .engineering-card-top strong[b-03oikcoucn] {
        font-size: 15px;
    }

    .floating-card--scope[b-03oikcoucn] {
        display: none;
    }
}
/* /Components/Sections/SkillsSection.razor.rz.scp.css */
.skills[b-r95fceyv5q] {
    position: relative;
    padding: 105px 0 115px;
    overflow: hidden;
    background: #f7f8fb;
}

.skills-header[b-r95fceyv5q] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 100px;
    align-items: end;
}

.skills-eyebrow[b-r95fceyv5q] {
    display: block;
    margin-bottom: 27px;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .17em;
}

.skills-header h2[b-r95fceyv5q] {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(48px, 4.3vw, 68px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.055em;
}

    .skills-header h2 span[b-r95fceyv5q] {
        color: var(--color-accent);
    }

.skills-intro[b-r95fceyv5q] {
    max-width: 390px;
    margin: 0 0 6px;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: -.01em;
}

.skills-grid[b-r95fceyv5q] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 65px;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

    .skills-grid[b-r95fceyv5q]  .skill-tile {
        margin-top: -1px;
        margin-left: -1px;
    }


/* ---------------------------
   TABLET
---------------------------- */

@media (max-width: 1050px) {

    .skills[b-r95fceyv5q] {
        padding: 90px 0 100px;
    }

    .skills-header[b-r95fceyv5q] {
        gap: 60px;
    }

    .skills-grid[b-r95fceyv5q] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ---------------------------
   MOBILE
---------------------------- */

@media (max-width: 760px) {

    .skills[b-r95fceyv5q] {
        padding: 75px 0 85px;
    }

    .skills-header[b-r95fceyv5q] {
        display: block;
    }

        .skills-header h2[b-r95fceyv5q] {
            font-size: clamp(44px, 12vw, 58px);
        }

    .skills-intro[b-r95fceyv5q] {
        max-width: 440px;
        margin-top: 32px;
    }

    .skills-grid[b-r95fceyv5q] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 48px;
    }

        .skills-grid[b-r95fceyv5q]  .skill-tile {
            min-height: 135px;
            padding: 20px;
        }
}


/* ---------------------------
   SMALL MOBILE
---------------------------- */

@media (max-width: 420px) {

    .skills-header h2[b-r95fceyv5q] {
        font-size: 42px;
    }

    .skills-grid[b-r95fceyv5q]  .skill-tile {
        min-height: 125px;
    }
}


.skill-icon--react[b-r95fceyv5q] {
    background: #087ea4;
    color: #fff;
}

.skill-icon--typescript[b-r95fceyv5q] {
    background: #3178c6;
    color: #fff;
}
/* /Components/Sections/SkillTile.razor.rz.scp.css */
.skill-tile[b-0m50p9nkud] {
    position: relative;
    min-height: 150px;
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--color-border);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .skill-tile[b-0m50p9nkud]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: var(--skill-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease;
    }

    .skill-tile:hover[b-0m50p9nkud] {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--skill-accent) 35%, transparent);
        box-shadow: 0 18px 45px rgba(13, 27, 58, .08);
    }

        .skill-tile:hover[b-0m50p9nkud]::before {
            transform: scaleX(1);
        }

.skill-icon[b-0m50p9nkud] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .skill-icon img[b-0m50p9nkud] {
        display: block;
        width: 42px;
        height: 42px;
        object-fit: contain;
        transition: transform .3s ease;
    }

.skill-tile:hover .skill-icon img[b-0m50p9nkud] {
    transform: scale(1.08);
}
.skill-symbol[b-0m50p9nkud] {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--skill-accent);
    border-radius: 9px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    transition: transform .3s ease, box-shadow .3s ease;
}

.skill-tile:hover .skill-symbol[b-0m50p9nkud] {
    transform: scale(1.07);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--skill-accent) 22%, transparent);
}


/* C# */

.skill-symbol.csharp[b-0m50p9nkud] {
    border-radius: 12px;
    font-size: 17px;
}


/* .NET */

.skill-symbol.dotnet[b-0m50p9nkud] {
    width: 52px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: -.03em;
}


/* ASP.NET */

.skill-symbol.aspnet[b-0m50p9nkud] {
    width: 52px;
    background: linear-gradient( 135deg, #512bd4, #7457df );
    font-size: 13px;
}


/* MAUI */

.skill-symbol.maui[b-0m50p9nkud] {
    width: 52px;
    background: linear-gradient( 135deg, #512bd4, #8b5cf6 );
    font-size: 11px;
    letter-spacing: .02em;
}


/* Entity Framework */

.skill-symbol.ef[b-0m50p9nkud] {
    border-radius: 50%;
    background: linear-gradient( 135deg, #512bd4, #7c3aed );
    font-size: 16px;
}

.skill-name[b-0m50p9nkud] {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}


.skill-symbol.sqlserver[b-0m50p9nkud] {
    width: 52px;
    background: linear-gradient( 135deg, #cc2927, #e34a47 );
    font-size: 12px;
    letter-spacing: .02em;
}