* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

:root {
    --primary-color: #1ab5c5;
    --secondary-color: #082a4a;
}

html,
body {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

.layout {
    width: 80rem;
    margin: 0 auto;
    max-width: 100%;
}

header {
    /* position: relative; */
    position: sticky;
    top: 0;
    padding: 1.2rem 0;
    z-index: 100;
}

header .layout {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem 0.6rem 1.2rem;
    border: 1px solid #ffffffaa;
    border-radius: 1.5rem;
    background: #ffffffd9;
    box-shadow:
        0 0.8rem 2.5rem #082a4a0c,
        inset 0 1px 0 #ffffff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

header nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0.4rem;
}

header nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1rem;
    border-radius: 0.8rem;
    text-decoration: none;
    color: #40505c;
    font-size: 0.95rem;
    font-weight: 500;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

header nav a::after {
    content: "";
    position: absolute;
    bottom: 0.35rem;
    left: 50%;
    width: 0;
    height: 2px;
    border-radius: 2rem;
    background: var(--primary-color);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

header nav a:hover {
    color: var(--secondary-color);
    background: #1ab5c50d;
    transform: translateY(-1px);
}

header nav a:hover::after {
    width: 1.2rem;
}

header .buttons {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

header button {
    padding: 0.85rem 1.4rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: #1ab5c510;
    color: var(--secondary-color);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

header button:hover {
    transform: translateY(-2px);
    background: #1ab5c51c;
    border-color: #1ab5c555;
    box-shadow: 0 0.5rem 1rem #1ab5c51a;
}


/* SPECIAL BUTTON */

header .special-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 9rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid #ffffff44;
    border-radius: 2rem;
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899,
            #7c3aed);
    background-size: 300% 300%;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0.7rem 1.5rem #7c3aed33,
        inset 0 1px 0 #ffffff55;
    animation: specialButtonGradient 5s ease infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

header .special-btn::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff77,
            transparent);
    transform: skewX(-20deg);
    animation: specialButtonShine 3.5s ease-in-out infinite;
    pointer-events: none;
}

header .special-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(135deg,
            #7c3aed,
            #ec4899,
            #7c3aed);
    background-size: 200% 200%;
    opacity: 0;
    filter: blur(10px);
    z-index: -1;
    animation: specialButtonGlow 3s ease-in-out infinite;
}

header .special-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 1rem 2rem #7c3aed55,
        inset 0 1px 0 #ffffff66;
}

header .special-btn:active {
    transform: translateY(-1px) scale(0.98);
}


/* HEADER AMBIENT GLOW */

header::before {
    content: "";
    position: absolute;
    top: -8rem;
    left: 50%;
    width: 30rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c512;
    filter: blur(60px);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
}


/* ANIMATIONS */

@keyframes specialButtonGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes specialButtonShine {

    0%,
    45% {
        left: -100%;
    }

    70%,
    100% {
        left: 160%;
    }
}

@keyframes specialButtonGlow {

    0%,
    100% {
        opacity: 0.15;
        background-position: 0% 50%;
    }

    50% {
        opacity: 0.35;
        background-position: 100% 50%;
    }
}

.hero {
    position: relative;
    min-height: 38rem;
    padding: 5rem 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hero img {
    width: calc(100% - 8rem);
    height: 100%;
    position: absolute;
    top: 0;
    left: 4rem;
    z-index: -3;
    border-radius: 4rem;
    object-fit: cover;
    filter: brightness(0.28) saturate(0.85);
    /* transform: scale(1.02); */
    /* animation: heroImage 12s ease-in-out infinite alternate; */
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0 4rem;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 50% 30%,
            #1ab5c544,
            transparent 35%),
        linear-gradient(135deg,
            #082a4acc,
            #082a4a88,
            #7c3aed44);
    z-index: -2;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 50%;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: #1ab5c52b;
    filter: blur(100px);
    transform: translateX(-50%);
    /* animation: heroGlow 7s ease-in-out infinite; */
    z-index: -1;
    pointer-events: none;
}

.hero .layout {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 55rem;
    color: #fff;
    text-align: center;
}

.hero .layout .eybrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #ffffff12;
    color: #dfffff;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
    animation: heroFadeUp 0.8s ease both;
}

.hero .layout .eybrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 1rem var(--primary-color);
    animation: pulseDot 2s ease-in-out infinite;
}

.hero .layout h1 {
    max-width: 52rem;
    margin-bottom: 1.5rem;
    font-size: 5rem;
    line-height: 1.08;
    letter-spacing: -0.08rem;
    text-shadow: 0 1rem 3rem #00000033;
    animation: heroFadeUp 0.8s 0.1s ease both;
}

.hero .layout h1 span {
    color: transparent;
    background: linear-gradient(120deg,
            #ffffff,
            #8ff4f7,
            #ffffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: heroTextGradient 5s ease infinite;
}

.hero .layout p {
    max-width: 42rem;
    margin-bottom: 2rem;
    color: #e6f8fa;
    font-size: 1.15rem;
    line-height: 1.8;
    animation: heroFadeUp 0.8s 0.2s ease both;
}

.hero .layout .buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: heroFadeUp 0.8s 0.3s ease both;
}

.hero .layout button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.8rem;
    border: 1px solid #ffffff22;
    border-radius: 2rem;
    background: var(--primary-color);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 0.8rem 2rem #1ab5c544,
        inset 0 1px 0 #ffffff44;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.hero .layout button::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: heroButtonShine 4s ease-in-out infinite;
}

.hero .layout button:hover {
    transform: translateY(-3px);
    background: #22c5d5;
    box-shadow:
        0 1rem 2.5rem #1ab5c566,
        inset 0 1px 0 #ffffff55;
}

.hero .layout button.secondary {
    border-color: #ffffff44;
    background: #ffffff14;
    color: #fff;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 #ffffff33;
}

.hero .layout button.secondary:hover {
    background: #ffffff25;
    border-color: #ffffff66;
    box-shadow: 0 1rem 2.5rem #00000022;
}


/* ANIMATIONS */

@keyframes heroImage {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.07);
    }
}

@keyframes heroGlow {

    0%,
    100% {
        opacity: 0.45;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.2);
    }
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }

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

@keyframes heroTextGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes heroButtonShine {

    0%,
    55% {
        left: -100%;
    }

    75%,
    100% {
        left: 150%;
    }
}

section {
    position: relative;
    padding: 6rem 0;
}

section h2 {
    color: var(--secondary-color);
}

section .buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
}

section .buttons button {
    position: relative;
    padding: 1rem 1.8rem;
    border: 1px solid #ffffff44;
    border-radius: 2rem;
    background: var(--primary-color);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 0.7rem 1.5rem #1ab5c533,
        inset 0 1px 0 #ffffff44;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

section .buttons button::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: sectionButtonShine 4s ease-in-out infinite;
}

section .buttons button:hover {
    transform: translateY(-3px);
    background: #22c5d5;
    box-shadow:
        0 1rem 2rem #1ab5c555,
        inset 0 1px 0 #ffffff55;
}

section .buttons .secondary {
    background: #fff;
    color: var(--primary-color);
    border: 1px solid #1ab5c544;
    box-shadow: 0 0.6rem 1.5rem #082a4a0c;
}

section .buttons .secondary:hover {
    background: #f5ffff;
    color: var(--secondary-color);
    border-color: var(--primary-color);
}


/* WHAT IS OLIO */

.what {
    position: relative;
    overflow: hidden;
}

.what::before {
    content: "";
    position: absolute;
    top: 10%;
    right: -10rem;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background: #1ab5c512;
    filter: blur(70px);
    animation: whatGlow 8s ease-in-out infinite;
    pointer-events: none;
}

.what h2 {
    position: relative;
    font-size: 3.2rem;
    line-height: 1.15;
    margin-bottom: 2.5rem;
    text-align: center;
    letter-spacing: -0.04rem;
}

.what h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 2rem;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed);
}

.what .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.what .items .item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: linear-gradient(145deg,
            #f3f6f9,
            #ffffff);
    box-shadow: 0 1rem 3rem #082a4a0b;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.what .items .item::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c514;
    filter: blur(20px);
    transition: transform 0.4s ease;
}

.what .items .item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff99,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.what .items .item:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow: 0 1.5rem 4rem #082a4a18;
}

.what .items .item:hover::before {
    transform: scale(1.5);
}

.what .items .item:hover::after {
    left: 150%;
}

.what .items .item h3 {
    position: relative;
    z-index: 1;
    color: var(--secondary-color);
    font-size: 1.5rem;
}

.what .items .item p {
    position: relative;
    z-index: 1;
    color: #666;
    line-height: 1.7;
}

.what .items .item ul {
    position: relative;
    z-index: 1;
    margin-left: 1.2rem;
    color: #555;
    line-height: 1.8;
}

.what .items .item li::marker {
    color: var(--primary-color);
}


/* HOW IT WORKS */

.works {
    position: relative;
    padding: 6rem 0;
    margin: 0 4rem;
    border-radius: 4rem;
    color: #fff;
    background:
        radial-gradient(circle at 10% 20%,
            #ffffff22,
            transparent 28%),
        radial-gradient(circle at 90% 80%,
            #7c3aed55,
            transparent 32%),
        linear-gradient(135deg,
            #1ab5c5,
            #087e99,
            #082a4a);
    overflow: hidden;
    isolation: isolate;
}

.works::before {
    content: "";
    position: absolute;
    top: -12rem;
    right: -10rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    animation: worksOrb 18s linear infinite;
}

.works::after {
    content: "";
    position: absolute;
    bottom: -15rem;
    left: -10rem;
    width: 35rem;
    height: 35rem;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    animation: worksOrbReverse 25s linear infinite;
}

.works .layout {
    position: relative;
    z-index: 1;
}

.works h2 {
    font-size: 3.2rem;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-align: center;
    color: #fff;
    letter-spacing: -0.04rem;
}

.works .layout>b {
    display: block;
    max-width: 40rem;
    margin: 0 auto 0.8rem;
    color: #fff;
    text-align: center;
}

.works .layout>p {
    display: block;
    max-width: 45rem;
    margin: auto;
    color: #dfffff;
    line-height: 1.7;
    text-align: center;
}

.works .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 3rem 0 0;
}

.works .items .item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid #ffffff55;
    border-radius: 2rem;
    background: #ffffff12;
    color: #fff;
    backdrop-filter: blur(15px);
    overflow: hidden;
    box-shadow:
        0 1rem 3rem #00000012,
        inset 0 1px 0 #ffffff22;
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.works .items .item::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: #ffffff0d;
    filter: blur(20px);
    transition: transform 0.4s ease;
}

.works .items .item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff1f,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.works .items .item:hover {
    transform: translateY(-8px);
    background: #ffffff1c;
    border-color: #ffffff66;
    box-shadow:
        0 1.5rem 4rem #00000022,
        inset 0 1px 0 #ffffff33;
}

.works .items .item:hover::before {
    transform: scale(1.5);
}

.works .items .item:hover::after {
    left: 150%;
}

.works .items .item h3 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.4rem;
}

.works .items .item p {
    position: relative;
    z-index: 1;
    color: #e5ffff;
    line-height: 1.7;
}


/* ANIMATIONS */

@keyframes sectionButtonShine {

    0%,
    55% {
        left: -100%;
    }

    75%,
    100% {
        left: 150%;
    }
}

@keyframes whatGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-3rem, 2rem) scale(1.2);
        opacity: 1;
    }
}

@keyframes worksOrb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes worksOrbReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.features {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
    isolation: isolate;
}

.features::before {
    content: "";
    position: absolute;
    top: 15%;
    left: -12rem;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background: #7c3aed12;
    filter: blur(80px);
    animation: featuresGlow 9s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.features::after {
    content: "";
    position: absolute;
    bottom: 5%;
    right: -10rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: #1ab5c512;
    filter: blur(75px);
    animation: featuresGlowReverse 11s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.features h2 {
    position: relative;
    color: var(--secondary-color);
    font-size: 3.2rem;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.04rem;
}

.features h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 2rem;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed);
}

.features .intro {
    max-width: 45rem;
    margin: 0 auto 3.5rem;
    color: #666;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.8;
}

.features .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.features .items .item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 14rem;
    padding: 2.2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: linear-gradient(145deg,
            #f3f6f9,
            #ffffff);
    box-shadow: 0 1rem 3rem #082a4a0b;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.features .items .item::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c514;
    filter: blur(25px);
    transition: transform 0.5s ease;
}

.features .items .item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffffaa,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.features .items .item:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow:
        0 1.5rem 4rem #082a4a18,
        0 0.5rem 1rem #1ab5c50d;
}

.features .items .item:hover::before {
    transform: scale(1.6);
}

.features .items .item:hover::after {
    left: 150%;
}

.features .items .item .number {
    position: relative;
    z-index: 1;
    width: fit-content;
    padding: 0.5rem 0.8rem;
    border: 1px solid #ffffff55;
    border-radius: 0.8rem;
    background: linear-gradient(135deg,
            var(--primary-color),
            #087e99);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow:
        0 0.5rem 1rem #1ab5c533,
        inset 0 1px 0 #ffffff44;
}

.features .items .item h3 {
    position: relative;
    z-index: 1;
    color: var(--secondary-color);
    font-size: 1.5rem;
    line-height: 1.3;
}

.features .items .item p {
    position: relative;
    z-index: 1;
    color: #666;
    line-height: 1.7;
}

@keyframes featuresGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(3rem, -2rem) scale(1.2);
        opacity: 0.9;
    }
}

@keyframes featuresGlowReverse {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-3rem, 2rem) scale(1.15);
        opacity: 0.9;
    }
}

.talent {
    position: relative;
    margin: 0 4rem;
    padding: 6rem 0;
    border-radius: 4rem;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%,
            #7c3aed55,
            transparent 28%),
        radial-gradient(circle at 10% 90%,
            #ffffff22,
            transparent 30%),
        linear-gradient(135deg,
            #1ab5c5,
            #087e99,
            #082a4a);
    overflow: hidden;
    isolation: isolate;
}

.talent::before {
    content: "";
    position: absolute;
    top: -12rem;
    right: -10rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    animation: talentOrb 18s linear infinite;
    pointer-events: none;
}

.talent::after {
    content: "";
    position: absolute;
    bottom: -15rem;
    left: -10rem;
    width: 35rem;
    height: 35rem;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    animation: talentOrbReverse 25s linear infinite;
    pointer-events: none;
}

.talent .layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

.talent .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.talent .eybrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    padding: 0.5rem 0.9rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #ffffff12;
    color: #dfffff;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
}

.talent .eybrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0.8rem #fff;
    animation: talentDot 2s ease-in-out infinite;
}

.talent .content h2 {
    max-width: 35rem;
    color: #fff;
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}

.talent .content h2 span {
    color: transparent;
    background: linear-gradient(120deg,
            #fff,
            #8ff4f7,
            #fff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: talentTextGradient 5s ease infinite;
}

.talent .content p {
    max-width: 34rem;
    color: #e5ffff;
    line-height: 1.8;
}

.talent .content ul {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.talent .content li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #f0ffff;
    line-height: 1.5;
}

.talent .content li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #ffffff33;
    border-radius: 50%;
    background: #ffffff14;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.talent .buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.talent .buttons button {
    position: relative;
    padding: 1rem 1.7rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0.8rem 2rem #00000018;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.talent .buttons button:hover {
    transform: translateY(-3px);
    background: #f4ffff;
    box-shadow: 0 1rem 2.5rem #00000025;
}

.talent .buttons .secondary {
    background: #ffffff14;
    color: #fff;
    border-color: #ffffff55;
    backdrop-filter: blur(12px);
}

.talent .buttons .secondary:hover {
    background: #ffffff25;
}


/* PROFILE PREVIEW */

.talent .preview {
    position: relative;
    padding: 1rem;
    border: 1px solid #ffffff33;
    border-radius: 3rem;
    background: #ffffff12;
    box-shadow:
        0 2rem 5rem #00000020,
        inset 0 1px 0 #ffffff22;
    backdrop-filter: blur(15px);
    transform: rotate(1deg);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.talent .preview:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow:
        0 2.5rem 6rem #00000030,
        inset 0 1px 0 #ffffff33;
}

.talent .profile {
    position: relative;
    padding: 2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: #fff;
    color: #222;
    box-shadow: 0 1rem 3rem #082a4a12;
    overflow: hidden;
}

.talent .profile::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c514;
    filter: blur(20px);
}

.talent .profile-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.talent .avatar {
    position: relative;
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
    border: 3px solid #eaf9fa;
    border-radius: 50rem;
    background:
        linear-gradient(135deg,
            #1ab5c5,
            #7c3aed);
    box-shadow: 0 0.5rem 1rem #1ab5c533;
}

.talent .avatar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #22c55e;
}

.talent .profile-header h3 {
    color: var(--secondary-color);
    font-size: 1.3rem;
}

.talent .profile-header p {
    color: #666;
    margin-top: 0.3rem;
    font-size: 0.9rem;
}

.talent .profile-section {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.5rem 0;
    border-top: 1px solid #eee;
}

.talent .profile-section>span {
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

.talent .profile-section>p {
    color: #555;
    line-height: 1.6;
}

.talent .skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.talent .skills b {
    padding: 0.5rem 0.9rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.talent .skills b:hover {
    transform: translateY(-2px);
    background: #dfffff;
}


/* ANIMATIONS */

@keyframes talentOrb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes talentOrbReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes talentDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
}

@keyframes talentTextGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.talent .profile-link {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #ffffff22;
    border-radius: 1rem;
    background: linear-gradient(135deg,
            var(--secondary-color),
            #124c70);
    color: #fff;
    text-align: center;
    font-weight: 600;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.talent .profile-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff22,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.talent .profile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.8rem 1.5rem #082a4a22;
}

.talent .profile-link:hover::before {
    left: 150%;
}


/* COMPANIES */

.companies {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
    isolation: isolate;
}

.companies::before {
    content: "";
    position: absolute;
    top: 10%;
    right: -12rem;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: #7c3aed10;
    filter: blur(80px);
    animation: companiesGlow 10s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.companies::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: #1ab5c510;
    filter: blur(75px);
    animation: companiesGlowReverse 12s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.companies .layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

.companies .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.companies .eybrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
}

.companies .eybrow::before {
    content: "";
    width: 2rem;
    height: 2px;
    border-radius: 2rem;
    background: var(--primary-color);
}

.companies .content h2 {
    max-width: 35rem;
    color: var(--secondary-color);
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}

.companies .content p {
    max-width: 34rem;
    color: #666;
    line-height: 1.8;
}

.companies .content ul {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.companies .content li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #555;
    line-height: 1.5;
}

.companies .content li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.7rem;
    font-weight: 700;
}

.companies .buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.companies .buttons button {
    position: relative;
    padding: 1rem 1.7rem;
    border: 1px solid var(--primary-color);
    border-radius: 2rem;
    background: var(--primary-color);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0.7rem 1.5rem #1ab5c533;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.companies .buttons button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff55,
            transparent);
    transform: skewX(-20deg);
    animation: companiesButtonShine 4s ease-in-out infinite;
}

.companies .buttons button:hover {
    transform: translateY(-3px);
    background: #22c5d5;
    box-shadow: 0 1rem 2rem #1ab5c555;
}

.companies .buttons .secondary {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 0.5rem 1.2rem #082a4a0c;
}

.companies .buttons .secondary:hover {
    background: #f5ffff;
    color: var(--secondary-color);
}


/* SEARCH PREVIEW */

.companies .preview {
    position: relative;
    padding: 1rem;
    border: 1px solid #ffffff;
    border-radius: 3rem;
    background: linear-gradient(145deg,
            #f3f6f9,
            #ffffff);
    box-shadow: 0 2rem 5rem #082a4a12;
    transform: rotate(-1deg);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.companies .preview:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow: 0 2.5rem 6rem #082a4a1c;
}

.companies .search-card {
    position: relative;
    padding: 2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: #fff;
    box-shadow:
        0 1rem 3rem #082a4a0c,
        inset 0 1px 0 #ffffff;
    overflow: hidden;
}

.companies .search-card::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c512;
    filter: blur(25px);
}

.companies .search-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-color);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.companies .search-header b {
    padding: 0.4rem 0.7rem;
    border-radius: 1rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.75rem;
}

.companies .search-box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    background: #f9fafb;
    color: #888;
    margin-bottom: 1.5rem;
}

.companies .search-box::before {
    content: "⌕";
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 700;
}

.companies .candidate {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0;
    border-top: 1px solid #eee;
    transition:
        transform 0.3s ease,
        padding 0.3s ease;
}

.companies .candidate:hover {
    transform: translateX(5px);
}

.companies .candidate-avatar {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid #eaf9fa;
    border-radius: 50%;
    background: linear-gradient(135deg,
            #1ab5c5,
            #7c3aed);
    box-shadow: 0 0.5rem 1rem #1ab5c522;
}

.companies .candidate-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #22c55e;
}

.companies .candidate-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.companies .candidate-info h3 {
    color: var(--secondary-color);
    font-size: 1rem;
}

.companies .candidate-info p {
    color: #777;
    font-size: 0.85rem;
}

.companies .skills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.companies .skills b {
    padding: 0.35rem 0.6rem;
    border: 1px solid #1ab5c522;
    background: #eaf9fa;
    color: var(--primary-color);
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.companies .candidate>button {
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 2rem;
    background: var(--secondary-color);
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.companies .candidate>button:hover {
    transform: translateY(-2px);
    background: var(--primary-color);
}


/* ANIMATIONS */

@keyframes companiesGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-3rem, 2rem) scale(1.2);
        opacity: 0.9;
    }
}

@keyframes companiesGlowReverse {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(3rem, -2rem) scale(1.15);
        opacity: 0.9;
    }
}

@keyframes companiesButtonShine {

    0%,
    55% {
        left: -120%;
    }

    75%,
    100% {
        left: 150%;
    }
}

.showcase {
    position: relative;
    padding: 6rem 0;
    margin: 0 4rem;
    border-radius: 4rem;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%,
            #7c3aed55,
            transparent 28%),
        radial-gradient(circle at 10% 90%,
            #ffffff20,
            transparent 30%),
        linear-gradient(135deg,
            #1ab5c5,
            #087e99,
            #082a4a);
    overflow: hidden;
    isolation: isolate;
}

.showcase::before {
    content: "";
    position: absolute;
    top: -12rem;
    right: -10rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    animation: showcaseOrb 20s linear infinite;
    pointer-events: none;
}

.showcase::after {
    content: "";
    position: absolute;
    bottom: -14rem;
    left: -10rem;
    width: 32rem;
    height: 32rem;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    animation: showcaseOrbReverse 26s linear infinite;
    pointer-events: none;
}

.showcase .layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 5rem;
    align-items: center;
}

.showcase .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.showcase .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    padding: 0.5rem 0.9rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #ffffff12;
    color: #dfffff;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
}

.showcase .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0.8rem #fff;
    animation: showcaseDot 2s ease-in-out infinite;
}

.showcase .content h2 {
    max-width: 32rem;
    color: #fff;
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}

.showcase .content h2 span {
    color: transparent;
    background: linear-gradient(120deg,
            #fff,
            #8ff4f7,
            #fff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: showcaseTextGradient 5s ease infinite;
}

.showcase .content p {
    max-width: 32rem;
    color: #e5ffff;
    line-height: 1.8;
}

.showcase .buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.showcase .buttons button {
    position: relative;
    padding: 1rem 1.7rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0.8rem 2rem #00000018;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.showcase .buttons button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff88,
            transparent);
    transform: skewX(-20deg);
    animation: showcaseButtonShine 4s ease-in-out infinite;
}

.showcase .buttons button:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.5rem #00000025;
}

.showcase .buttons .secondary {
    background: #ffffff12;
    color: #fff;
    border-color: #ffffff55;
    backdrop-filter: blur(12px);
}

.showcase .buttons .secondary:hover {
    background: #ffffff22;
}


/* PROFILE PREVIEW */

.showcase .profile-preview {
    position: relative;
    padding: 0;
    border: 1px solid #ffffff55;
    border-radius: 2.8rem;
    background: #ffffff12;
    box-shadow:
        0 2rem 5rem #00000025,
        inset 0 1px 0 #ffffff33;
    backdrop-filter: blur(15px);
    overflow: hidden;
    transform: rotate(-1deg);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.showcase .profile-preview:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow:
        0 2.5rem 6rem #00000035,
        inset 0 1px 0 #ffffff44;
}

.showcase .profile-cover {
    position: relative;
    height: 9rem;
    background:
        radial-gradient(circle at 80% 20%,
            #7c3aed88,
            transparent 30%),
        linear-gradient(135deg,
            #082a4a,
            #124c70,
            #1ab5c5);
    overflow: hidden;
}

.showcase .profile-cover::before {
    content: "";
    position: absolute;
    top: -6rem;
    right: -4rem;
    width: 15rem;
    height: 15rem;
    border: 1px solid #ffffff22;
    border-radius: 50%;
}

.showcase .profile-cover::after {
    content: "";
    position: absolute;
    bottom: -5rem;
    left: 20%;
    width: 12rem;
    height: 12rem;
    border: 1px solid #ffffff18;
    border-radius: 50%;
}

.showcase .profile-body {
    position: relative;
    padding: 2rem;
    background: #fff;
}

.showcase .profile-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -4rem;
}

.showcase .profile-avatar {
    position: relative;
    width: 6rem;
    height: 6rem;
    border: 5px solid #fff;
    border-radius: 50%;
    background:
        linear-gradient(135deg,
            #1ab5c5,
            #7c3aed);
    box-shadow: 0 0.8rem 1.5rem #082a4a22;
}

.showcase .profile-avatar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.9rem;
    height: 0.9rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #22c55e;
}

.showcase .profile-actions {
    display: flex;
    gap: 0.6rem;
}

.showcase .profile-actions button {
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 2rem;
    background: var(--primary-color);
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.showcase .profile-actions button:hover {
    transform: translateY(-2px);
    background: #22c5d5;
}

.showcase .profile-actions .secondary {
    background: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.showcase .profile-actions .secondary:hover {
    background: #f5ffff;
    color: var(--secondary-color);
}

.showcase .profile-info {
    padding: 1.5rem 0;
}

.showcase .profile-info h3 {
    color: var(--secondary-color);
    font-size: 1.8rem;
}

.showcase .role {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 0.3rem;
}

.showcase .location {
    color: #777;
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.showcase .bio {
    margin-top: 1rem;
    line-height: 1.6;
    color: #555;
}

.showcase .profile-section {
    padding: 1.5rem 0;
    border-top: 1px solid #eee;
}

.showcase .profile-section h4 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.showcase .skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.showcase .skill-list span {
    padding: 0.5rem 0.8rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.showcase .skill-list span:hover {
    transform: translateY(-2px);
    background: #dfffff;
}

.showcase .project-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.showcase .project {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem;
    border-radius: 1rem;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.showcase .project:hover {
    background: #f8fafb;
    transform: translateX(4px);
}

.showcase .project-image {
    width: 5rem;
    height: 4rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg,
            #eaf9fa,
            #f3f6f9);
}

.showcase .project h5 {
    color: var(--secondary-color);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.showcase .project p {
    color: #777;
    font-size: 0.85rem;
    line-height: 1.5;
}

.showcase .profile-url {
    position: relative;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg,
            var(--secondary-color),
            #124c70);
    color: #fff;
    text-align: center;
    font-weight: 600;
    overflow: hidden;
}

.showcase .profile-url::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff33,
            transparent);
    transform: skewX(-20deg);
    animation: showcaseUrlShine 4s ease-in-out infinite;
}


/* ANIMATIONS */

@keyframes showcaseOrb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes showcaseOrbReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes showcaseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
}

@keyframes showcaseTextGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes showcaseButtonShine {

    0%,
    55% {
        left: -120%;
    }

    75%,
    100% {
        left: 150%;
    }
}

@keyframes showcaseUrlShine {

    0%,
    55% {
        left: -120%;
    }

    75%,
    100% {
        left: 150%;
    }
}

.faq {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.faq::before {
    content: "";
    position: absolute;
    top: 5rem;
    left: -12rem;
    width: 24rem;
    height: 24rem;
    border: 1px solid #1ab5c522;
    border-radius: 50%;
    animation: faqOrbit 18s linear infinite;
    pointer-events: none;
}

.faq::after {
    content: "";
    position: absolute;
    right: -10rem;
    bottom: -8rem;
    width: 22rem;
    height: 22rem;
    border: 1px solid #7c3aed18;
    border-radius: 50%;
    animation: faqOrbitReverse 22s linear infinite;
    pointer-events: none;
}

.faq .layout {
    position: relative;
    z-index: 1;
}

.faq h2 {
    color: var(--secondary-color);
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -0.04rem;
}

.faq h2 span {
    color: var(--primary-color);
}

.faq .intro {
    max-width: 45rem;
    margin: 0 auto 3.5rem;
    text-align: center;
    color: #666;
    line-height: 1.7;
}

.faq .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.faq .items .item {
    position: relative;
    padding: 2rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background:
        linear-gradient(145deg,
            #ffffff,
            #f3f6f9);
    overflow: hidden;
    cursor: default;
    box-shadow: 0 0.8rem 2rem #082a4a08;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.faq .items .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.3rem;
    height: 100%;
    background: linear-gradient(180deg,
            var(--primary-color),
            #7c3aed);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s ease;
}

.faq .items .item::after {
    content: "?";
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    color: #1ab5c508;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.faq .items .item:hover {
    transform: translateY(-6px);
    border-color: #1ab5c555;
    box-shadow:
        0 1.5rem 3rem #082a4a12,
        0 0 0 1px #1ab5c512;
}

.faq .items .item:hover::before {
    transform: scaleY(1);
}

.faq .items .item h3 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--secondary-color);
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.faq .items .item h3::before {
    content: "+";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.faq .items .item:hover h3::before {
    transform: rotate(90deg);
    background: var(--primary-color);
    color: #fff;
}

.faq .items .item p {
    position: relative;
    z-index: 1;
    color: #666;
    line-height: 1.7;
    padding-left: 2.5rem;
}

@keyframes faqOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes faqOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.final-cta {
    position: relative;
    padding: 7rem 0;
    margin: 0 4rem;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 15% 20%,
            #ffffff25,
            transparent 25%),
        radial-gradient(circle at 85% 80%,
            #7c3aed55,
            transparent 28%),
        linear-gradient(135deg,
            #1ab5c5,
            #087e99,
            #082a4a);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.final-cta::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 35rem;
    height: 35rem;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: finalCtaRotate 20s linear infinite;
    pointer-events: none;
}

.final-cta::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18rem;
    height: 18rem;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 4rem #ffffff08,
        0 0 0 8rem #ffffff05;
    animation: finalCtaPulse 5s ease-in-out infinite;
    pointer-events: none;
}

.final-cta .content {
    position: relative;
    z-index: 2;
    max-width: 58rem;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.final-cta .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #ffffff12;
    color: #eaffff;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
}

.final-cta .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0.8rem #fff;
    animation: finalCtaDot 2s ease-in-out infinite;
}

.final-cta h2 {
    max-width: 52rem;
    margin: 0 auto 1.5rem;
    font-size: 4rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}

.final-cta h2 span {
    color: transparent;
    background: linear-gradient(120deg,
            #fff,
            #8ff4f7,
            #fff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: finalCtaText 5s ease infinite;
}

.final-cta p {
    max-width: 42rem;
    margin: 0 auto;
    color: #e2ffff;
    line-height: 1.8;
    font-size: 1.1rem;
}

.final-cta .buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.final-cta .buttons button {
    position: relative;
    padding: 1rem 2rem;
    border: 1px solid #ffffff55;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem #00000022;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.final-cta .buttons button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffffaa,
            transparent);
    transform: skewX(-20deg);
    animation: finalCtaShine 4s ease-in-out infinite;
}

.final-cta .buttons button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 1.4rem 3rem #00000030;
}

.final-cta .buttons button:active {
    transform: translateY(-1px) scale(0.98);
}

.final-cta .buttons .secondary {
    background: #ffffff12;
    color: #fff;
    border-color: #ffffff55;
    backdrop-filter: blur(12px);
}

.final-cta .buttons .secondary:hover {
    background: #ffffff22;
}

@keyframes finalCtaRotate {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes finalCtaPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
}

@keyframes finalCtaDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes finalCtaText {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes finalCtaShine {

    0%,
    55% {
        left: -120%;
    }

    75%,
    100% {
        left: 150%;
    }
}

.about-hero {
    position: relative;
    padding: 7rem 0 6rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.about-hero::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 34rem;
    height: 34rem;
    border: 1px solid #1ab5c515;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: aboutHeroOrbit 20s linear infinite;
    pointer-events: none;
}

.about-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            #1ab5c508,
            transparent 70%);
    transform: translate(-50%, -50%);
    animation: aboutHeroGlow 5s ease-in-out infinite;
    pointer-events: none;
}

.about-hero .layout {
    position: relative;
    z-index: 1;
    width: 55rem;
}

.about-hero .eybrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.about-hero .eybrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.7rem #1ab5c5aa;
    animation: aboutHeroDot 2s ease-in-out infinite;
}

.about-hero h1 {
    max-width: 52rem;
    margin: 0 auto 2rem;
    color: var(--secondary-color);
    font-size: 4.8rem;
    line-height: 1.1;
    letter-spacing: -0.06rem;
}

.about-hero h1 span {
    color: transparent;
    background: linear-gradient(120deg,
            var(--primary-color),
            #7c3aed,
            var(--primary-color));
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: aboutHeroText 5s ease infinite;
}

.about-hero p {
    max-width: 45rem;
    margin: 0 auto;
    color: #666;
    font-size: 1.15rem;
    line-height: 1.8;
}

.about-hero p::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    margin: 2rem auto 0;
    border-radius: 2rem;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed);
}

@keyframes aboutHeroOrbit {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes aboutHeroGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes aboutHeroDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes aboutHeroText {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.story {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
}

.story::before {
    content: "";
    position: absolute;
    top: 15%;
    left: -12rem;
    width: 25rem;
    height: 25rem;
    border: 1px solid #1ab5c515;
    border-radius: 50%;
    animation: storyOrbit 22s linear infinite;
    pointer-events: none;
}

.story .layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

.story .content {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.story .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    padding: 0.5rem 0.9rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.story .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.7rem #1ab5c5aa;
}

.story .content h2 {
    max-width: 35rem;
    color: var(--secondary-color);
    font-size: 3.4rem;
    line-height: 1.15;
    letter-spacing: -0.04rem;
}

.story .content h2 span {
    color: var(--primary-color);
}

.story .content p {
    max-width: 34rem;
    color: #555;
    line-height: 1.8;
}

.story .visual {
    position: relative;
    padding: 2rem;
    border: 1px solid #dce5e9;
    border-radius: 3rem;
    background:
        linear-gradient(145deg,
            #f8fafb,
            #eef7f8);
    box-shadow: 0 1.5rem 4rem #082a4a0c;
}

.story .visual::before {
    content: "";
    position: absolute;
    top: -1rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    border: 1px solid #1ab5c533;
    border-radius: 50%;
    background: #eaf9fa;
    animation: storyFloat 4s ease-in-out infinite;
}

.story .visual::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 2rem #1ab5c555;
    animation: storyFloatReverse 5s ease-in-out infinite;
}

.story .quote-card {
    position: relative;
    padding: 3rem;
    border: 1px solid #ffffff18;
    border-radius: 2.3rem;
    background:
        radial-gradient(circle at 90% 10%,
            #1ab5c544,
            transparent 30%),
        linear-gradient(145deg,
            #082a4a,
            #0c3c5e);
    color: #fff;
    overflow: hidden;
    box-shadow:
        0 1.5rem 3rem #082a4a22,
        inset 0 1px 0 #ffffff15;
}

.story .quote-card::before {
    content: "";
    position: absolute;
    top: -8rem;
    right: -6rem;
    width: 18rem;
    height: 18rem;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    animation: storyQuoteOrbit 15s linear infinite;
}

.story .quote-mark {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--primary-color);
    font-size: 5rem;
    line-height: 0.7;
    margin-bottom: 2rem;
}

.story .quote-card h3 {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.story .quote-card p {
    position: relative;
    z-index: 1;
    color: #d8e2e9;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.story .quote-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-color);
    font-weight: 600;
}

.story .quote-brand::before {
    content: "";
    width: 2rem;
    height: 2px;
    border-radius: 2rem;
    background: var(--primary-color);
}

@keyframes storyOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes storyFloat {

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

    50% {
        transform: translateY(-10px);
    }
}

@keyframes storyFloatReverse {

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

    50% {
        transform: translateY(8px);
    }
}

@keyframes storyQuoteOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mission {
    position: relative;
    padding: 7rem 0;
    margin: 0 4rem;
    border: 1px solid #dce5e9;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 15% 20%,
            #1ab5c510,
            transparent 28%),
        radial-gradient(circle at 85% 80%,
            #7c3aed08,
            transparent 30%),
        #f5f8fa;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.mission::before {
    content: "";
    position: absolute;
    top: -10rem;
    right: -8rem;
    width: 25rem;
    height: 25rem;
    border: 1px solid #1ab5c51a;
    border-radius: 50%;
    animation: missionOrbit 20s linear infinite;
    pointer-events: none;
}

.mission::after {
    content: "";
    position: absolute;
    bottom: -8rem;
    left: -6rem;
    width: 20rem;
    height: 20rem;
    border: 1px solid #7c3aed12;
    border-radius: 50%;
    animation: missionOrbitReverse 18s linear infinite;
    pointer-events: none;
}

.mission .layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mission .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.mission .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.8rem #1ab5c588;
    animation: missionPulse 2s ease-in-out infinite;
}

.mission h2 {
    max-width: 55rem;
    color: var(--secondary-color);
    font-size: 3.6rem;
    line-height: 1.15;
    letter-spacing: -0.04rem;
    margin-bottom: 1.5rem;
}

.mission h2 span {
    color: var(--primary-color);
}

.mission>.layout>p {
    max-width: 48rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 0.8rem;
}

.mission .items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
    text-align: left;
}

.mission .item {
    position: relative;
    padding: 2rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background: #ffffffcc;
    backdrop-filter: blur(10px);
    box-shadow: 0 1rem 3rem #082a4a08;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.mission .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed);
    transform: scaleX(0.2);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.mission .item:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow: 0 1.5rem 3rem #082a4a14;
}

.mission .item:hover::before {
    transform: scaleX(1);
}

.mission .item>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
}

.mission .item h3 {
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
}

.mission .item p {
    color: #555;
    line-height: 1.7;
}

@keyframes missionOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes missionOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes missionPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

.values {
    position: relative;
    padding: 7rem 0;
    text-align: center;
    overflow: hidden;
}

.values::before {
    content: "";
    position: absolute;
    top: 20%;
    right: -10rem;
    width: 22rem;
    height: 22rem;
    border: 1px solid #1ab5c515;
    border-radius: 50%;
    animation: valuesOrbit 18s linear infinite;
    pointer-events: none;
}

.values .layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.values .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.values .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.8rem #1ab5c588;
    animation: valuesPulse 2s ease-in-out infinite;
}

.values h2 {
    color: var(--secondary-color);
    font-size: 3.2rem;
    line-height: 1.15;
    letter-spacing: -0.04rem;
    margin-bottom: 1rem;
}

.values h2 span {
    color: var(--primary-color);
}

.values .intro {
    max-width: 45rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 3.5rem;
}

.values .items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.values .item {
    position: relative;
    padding: 2.2rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background:
        linear-gradient(145deg,
            #ffffff,
            #f5f9fa);
    box-shadow: 0 1rem 3rem #082a4a08;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.values .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed,
            #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.values .item::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -4rem;
    width: 10rem;
    height: 10rem;
    border: 1px solid #1ab5c510;
    border-radius: 50%;
    transition:
        transform 0.5s ease,
        border-color 0.5s ease;
}

.values .item:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow: 0 1.5rem 3rem #082a4a14;
}

.values .item:hover::before {
    transform: scaleX(1);
}

.values .item:hover::after {
    transform: scale(1.4);
    border-color: #1ab5c530;
}

.values .icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    margin-bottom: 1.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
}

.values .item h3 {
    position: relative;
    z-index: 1;
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}

.values .item p {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    color: #555;
    line-height: 1.7;
}

@keyframes valuesOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes valuesPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

.about-cta {
    position: relative;
    padding: 7rem 0;
    margin: 0 4rem;
    border: 1px solid #ffffff12;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 15% 20%,
            #1ab5c52e,
            transparent 28%),
        radial-gradient(circle at 85% 80%,
            #7c3aed20,
            transparent 30%),
        linear-gradient(135deg,
            #082a4a,
            #0b3555,
            #082a4a);
    background-size: 100% 100%, 100% 100%, 200% 200%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    animation: aboutCtaBackground 8s ease-in-out infinite;
}

.about-cta::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: -8rem;
    width: 28rem;
    height: 28rem;
    border: 1px solid #1ab5c522;
    border-radius: 50%;
    animation: aboutCtaOrbit 18s linear infinite;
    pointer-events: none;
}

.about-cta::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -12rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid #7c3aed18;
    border-radius: 50%;
    animation: aboutCtaOrbitReverse 22s linear infinite;
    pointer-events: none;
}

.about-cta .layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-cta .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid #1ab5c555;
    border-radius: 2rem;
    background: #1ab5c51a;
    color: #5de2eb;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.about-cta .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.8rem #1ab5c5;
    animation: aboutCtaPulse 2s ease-in-out infinite;
}

.about-cta h2 {
    max-width: 55rem;
    font-size: 4rem;
    line-height: 1.15;
    letter-spacing: -0.05rem;
    margin-bottom: 1.5rem;
}

.about-cta h2 span {
    color: #5de2eb;
}

.about-cta p {
    max-width: 42rem;
    color: #d8e2e9;
    font-size: 1.1rem;
    line-height: 1.7;
}

.about-cta .buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
}

.about-cta .buttons button {
    position: relative;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    border-radius: 2rem;
    background: linear-gradient(135deg,
            var(--primary-color),
            #0e95a5);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 0.8rem 2rem #1ab5c533,
        inset 0 1px 0 #ffffff44;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.about-cta .buttons button::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: aboutCtaShine 3.5s ease-in-out infinite;
}

.about-cta .buttons button:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        0 1.2rem 2.8rem #1ab5c544,
        inset 0 1px 0 #ffffff55;
}

.about-cta .buttons button:active {
    transform: translateY(-1px) scale(0.98);
}

.about-cta .buttons .secondary {
    background: #ffffff;
    color: var(--secondary-color);
    border-color: #ffffff;
    box-shadow: 0 0.8rem 2rem #00000018;
}

.about-cta .buttons .secondary:hover {
    box-shadow: 0 1.2rem 2.8rem #00000025;
}

@keyframes aboutCtaBackground {

    0%,
    100% {
        background-position: 0 0, 0 0, 0% 50%;
    }

    50% {
        background-position: 0 0, 0 0, 100% 50%;
    }
}

@keyframes aboutCtaOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes aboutCtaOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes aboutCtaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes aboutCtaShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 160%;
    }
}

.contact-hero {
    position: relative;
    padding: 7rem 0 5rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.contact-hero::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 32rem;
    height: 32rem;
    border: 1px solid #1ab5c515;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: contactHeroOrbit 20s linear infinite;
    pointer-events: none;
}

.contact-hero::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: radial-gradient(circle,
            #1ab5c510,
            transparent 70%);
    transform: translate(-50%, -50%);
    animation: contactHeroGlow 5s ease-in-out infinite;
    pointer-events: none;
}

.contact-hero .layout {
    position: relative;
    z-index: 1;
    width: 55rem;
}

.contact-hero .eybrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1.3rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-hero .eybrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.8rem #1ab5c5aa;
    animation: contactPulse 2s ease-in-out infinite;
}

.contact-hero h1 {
    max-width: 52rem;
    margin: 0 auto 1.5rem;
    color: var(--secondary-color);
    font-size: 4.8rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}

.contact-hero h1 span {
    color: transparent;
    background: linear-gradient(120deg,
            var(--primary-color),
            #7c3aed,
            #ec4899,
            var(--primary-color));
    background-size: 250% 250%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: contactGradient 5s ease infinite;
}

.contact-hero p {
    max-width: 45rem;
    margin: 0 auto;
    color: #555;
    font-size: 1.15rem;
    line-height: 1.8;
}


/* Contact Section */

.contact {
    position: relative;
    padding: 5rem 0 7rem;
}

.contact .layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 5rem;
    align-items: start;
}

.contact .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact .eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.5rem 0.9rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.contact .content h2 {
    color: var(--secondary-color);
    font-size: 3.2rem;
    line-height: 1.15;
    letter-spacing: -0.04rem;
}

.contact .content h2 span {
    color: var(--primary-color);
}

.contact .content>p {
    max-width: 34rem;
    color: #555;
    line-height: 1.8;
}

.contact .details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.contact .detail {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem;
    border: 1px solid #dce5e9;
    border-radius: 1.5rem;
    background: #f7fafb;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.contact .detail::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            #1ab5c508,
            transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact .detail:hover {
    transform: translateX(6px);
    border-color: #1ab5c544;
    box-shadow: 0 0.8rem 2rem #082a4a0c;
}

.contact .detail:hover::before {
    opacity: 1;
}

.contact .detail>span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 0.5rem 1rem #1ab5c533;
}

.contact .detail h3,
.contact .detail p {
    position: relative;
    z-index: 1;
}

.contact .detail h3 {
    color: var(--secondary-color);
    margin-bottom: 0.2rem;
}

.contact .detail p {
    color: #666;
    line-height: 1.5;
}


/* Contact Form */

.contact .form-wrapper {
    position: relative;
    padding: 2.5rem;
    border: 1px solid #dce5e9;
    border-radius: 2.5rem;
    background:
        linear-gradient(145deg,
            #f8fafb,
            #eef7f8);
    box-shadow: 0 1.5rem 4rem #082a4a0d;
    overflow: hidden;
}

.contact .form-wrapper::before {
    content: "";
    position: absolute;
    top: -7rem;
    right: -7rem;
    width: 16rem;
    height: 16rem;
    border: 1px solid #1ab5c518;
    border-radius: 50%;
    animation: contactFormOrbit 15s linear infinite;
}

.contact form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.contact .field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact .field label {
    color: var(--secondary-color);
    font-weight: 600;
}

.contact .field input,
.contact .field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.2rem;
    border: 1px solid #d9e0e4;
    border-radius: 1rem;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.contact .field textarea {
    resize: vertical;
    min-height: 9rem;
}

.contact .field input:focus,
.contact .field textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px #1ab5c512;
    transform: translateY(-1px);
}

.contact form>button {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 2rem;
    background: linear-gradient(135deg,
            var(--primary-color),
            #0e95a5);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 0.7rem 1.8rem #1ab5c533,
        inset 0 1px 0 #ffffff44;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact form>button::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: contactButtonShine 3.5s ease-in-out infinite;
}

.contact form>button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1rem 2.5rem #1ab5c544,
        inset 0 1px 0 #ffffff55;
}

.contact form>button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.contact .form-message {
    display: none;
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    line-height: 1.5;
}


/* Contact CTA */

.contact-cta {
    position: relative;
    padding: 7rem 0;
    margin: 0 4rem;
    border: 1px solid #ffffff12;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 15% 20%,
            #1ab5c52e,
            transparent 28%),
        radial-gradient(circle at 85% 80%,
            #7c3aed20,
            transparent 30%),
        linear-gradient(135deg,
            #082a4a,
            #0b3555,
            #082a4a);
    background-size: 100% 100%, 100% 100%, 200% 200%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    animation: contactCtaBackground 8s ease-in-out infinite;
}

.contact-cta::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: -8rem;
    width: 28rem;
    height: 28rem;
    border: 1px solid #1ab5c522;
    border-radius: 50%;
    animation: contactCtaOrbit 18s linear infinite;
}

.contact-cta::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -12rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid #7c3aed18;
    border-radius: 50%;
    animation: contactCtaOrbitReverse 22s linear infinite;
}

.contact-cta .layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-cta .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid #1ab5c555;
    border-radius: 2rem;
    background: #1ab5c51a;
    color: #5de2eb;
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-cta .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.8rem #1ab5c5;
    animation: contactPulse 2s ease-in-out infinite;
}

.contact-cta h2 {
    max-width: 55rem;
    font-size: 4rem;
    line-height: 1.15;
    letter-spacing: -0.05rem;
    margin-bottom: 1.5rem;
}

.contact-cta h2 span {
    color: #5de2eb;
}

.contact-cta p {
    max-width: 42rem;
    color: #d8e2e9;
    font-size: 1.1rem;
    line-height: 1.7;
}

.contact-cta .buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
}

.contact-cta .buttons button {
    position: relative;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    border-radius: 2rem;
    background: linear-gradient(135deg,
            var(--primary-color),
            #0e95a5);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 0.8rem 2rem #1ab5c533,
        inset 0 1px 0 #ffffff44;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-cta .buttons button::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: contactButtonShine 3.5s ease-in-out infinite;
}

.contact-cta .buttons button:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        0 1.2rem 2.8rem #1ab5c544,
        inset 0 1px 0 #ffffff55;
}

.contact-cta .buttons .secondary {
    background: #fff;
    color: var(--secondary-color);
    border-color: #fff;
    box-shadow: 0 0.8rem 2rem #00000018;
}

.contact-cta .buttons .secondary:hover {
    box-shadow: 0 1.2rem 2.8rem #00000025;
}


@keyframes contactHeroOrbit {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes contactHeroGlow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes contactGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes contactPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes contactFormOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes contactButtonShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 160%;
    }
}

@keyframes contactCtaBackground {

    0%,
    100% {
        background-position: 0 0, 0 0, 0% 50%;
    }

    50% {
        background-position: 0 0, 0 0, 100% 50%;
    }
}

@keyframes contactCtaOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes contactCtaOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.talent-hero {
    padding: 7rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.talent-hero::before {
    content: "";
    position: absolute;
    top: 5rem;
    left: 50%;
    width: 28rem;
    height: 28rem;
    transform: translateX(-50%);
    background: radial-gradient(circle,
            #1ab5c522 0%,
            #7c3aed12 45%,
            transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.talent-hero .layout {
    width: 60rem;
    position: relative;
    z-index: 1;
}

.talent-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: #7c3aed;
    background: #7c3aed0d;
    border: 1px solid #7c3aed22;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.talent-hero .eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 0 0 #ec489966;
    animation: talentPulse 2s infinite;
}

.talent-hero h1 {
    color: var(--secondary-color);
    font-size: 4.5rem;
    line-height: 1.1;
    letter-spacing: -0.08rem;
    margin-bottom: 1.5rem;
}

.talent-hero h1 span {
    color: transparent;
    background: linear-gradient(135deg,
            var(--primary-color),
            #7c3aed,
            #ec4899);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: talentTitleGradient 5s ease infinite;
}

.talent-hero p {
    max-width: 48rem;
    margin: 0 auto;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
}


/* Search */

.talent-search {
    padding: 2rem 0 5rem;
}

.talent-search .search-bar {
    position: relative;
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    box-shadow:
        0 1rem 3rem #082a4a0d,
        0 0 0 0 #1ab5c522;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.talent-search .search-bar:focus-within {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow:
        0 1.2rem 3rem #082a4a14,
        0 0 0 4px #1ab5c514;
}

.talent-search .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1rem;
    background: #f7f9fb;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    transition: background 0.3s ease;
}

.talent-search .search-bar:focus-within .search-input {
    background: #fff;
}

.talent-search .search-input span {
    color: var(--primary-color);
    font-size: 1.4rem;
}

.talent-search .search-input input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
}

.talent-search .search-bar>button {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.8rem;
    border: none;
    border-radius: 1.5rem;
    background: linear-gradient(135deg,
            var(--primary-color),
            #0d8fa0,
            #7c3aed);
    background-size: 200% 200%;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.5rem #1ab5c544;
    animation: searchButtonGradient 5s ease infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-search .search-bar>button::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -100%;
    width: 60%;
    height: 160%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: searchButtonShine 3.5s ease-in-out infinite;
}

.talent-search .search-bar>button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.8rem 2rem #1ab5c555;
}

.talent-search .filters {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.talent-search .filters button {
    position: relative;
    padding: 0.75rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.talent-search .filters button:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0.5rem 1rem #1ab5c51a;
}

.talent-search .filters button.active {
    background: linear-gradient(135deg,
            var(--primary-color),
            #0d8fa0);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0.5rem 1.2rem #1ab5c544;
}


/* Talent Profiles */

.talent-profiles {
    padding: 5rem 0;
    margin: 0 4rem;
    background:
        radial-gradient(circle at 10% 10%, #1ab5c512, transparent 30%),
        radial-gradient(circle at 90% 90%, #7c3aed0d, transparent 30%),
        #f3f6f9;
    border: 1px solid #ddd;
    border-radius: 4rem;
}

.talent-profiles .section-header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.talent-profiles .eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 0.5rem 0.9rem;
    color: var(--primary-color);
    background: #1ab5c510;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.talent-profiles .section-header h2 {
    color: var(--secondary-color);
    font-size: 3rem;
    line-height: 1.15;
    max-width: 45rem;
    letter-spacing: -0.04rem;
}

.talent-profiles .section-header>p {
    color: #666;
    line-height: 1.7;
    max-width: 40rem;
}

.talent-profiles .items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.talent-profiles .profile-card {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    box-shadow: 0 1rem 2.5rem #082a4a0a;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.talent-profiles .profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed,
            #ec4899);
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.talent-profiles .profile-card:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow: 0 1.5rem 3rem #082a4a16;
}

.talent-profiles .profile-card:hover::before {
    transform: scaleX(1);
    animation: profileCardGradient 3s linear infinite;
}

.talent-profiles .profile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.talent-profiles .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 4rem;
    height: 4rem;
    border-radius: 1.3rem;
    background: linear-gradient(135deg,
            var(--primary-color),
            #7c3aed);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0.7rem 1.5rem #1ab5c533;
    transition: transform 0.3s ease;
}

.talent-profiles .profile-card:hover .avatar {
    transform: rotate(-5deg) scale(1.05);
}

.talent-profiles .availability {
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.talent-profiles .profile-card h3 {
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.talent-profiles .role {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.talent-profiles .bio {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.talent-profiles .skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

.talent-profiles .skills span {
    padding: 0.45rem 0.7rem;
    border-radius: 2rem;
    background: #f7f9fb;
    color: var(--secondary-color);
    border: 1px solid #ddd;
    font-size: 0.75rem;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.talent-profiles .profile-card:hover .skills span {
    border-color: #1ab5c533;
}

.talent-profiles .profile-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.2rem;
    border-top: 1px solid #ddd;
}

.talent-profiles .profile-bottom>span {
    color: #777;
    font-size: 0.85rem;
}

.talent-profiles .profile-bottom a {
    position: relative;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
}

.talent-profiles .profile-bottom a::after {
    content: " →";
    display: inline-block;
    transition: transform 0.25s ease;
}

.talent-profiles .profile-card:hover .profile-bottom a::after {
    transform: translateX(4px);
}


@keyframes talentPulse {
    0% {
        box-shadow: 0 0 0 0 #ec489966;
    }

    70% {
        box-shadow: 0 0 0 8px #ec489900;
    }

    100% {
        box-shadow: 0 0 0 0 #ec489900;
    }
}

@keyframes talentTitleGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes searchButtonGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes searchButtonShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 160%;
    }
}

@keyframes profileCardGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.talent-hero {
    padding: 7rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.talent-hero::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 35rem;
    height: 35rem;
    transform: translateX(-50%);
    background: radial-gradient(circle, #7c3aed22 0%, transparent 70%);
    pointer-events: none;
    animation: talentHeroGlow 6s ease-in-out infinite;
}

.talent-hero .layout {
    width: 60rem;
    position: relative;
    z-index: 1;
}

.talent-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    border: 1px solid #7c3aed33;
    border-radius: 2rem;
    background: #7c3aed0d;
    color: #7c3aed;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.talent-hero .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 0 0 #ec489955;
    animation: talentPulse 2s infinite;
}

.talent-hero h1 {
    color: var(--secondary-color);
    font-size: 4.5rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.talent-hero h1 span {
    color: transparent;
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899,
            #7c3aed);
    background-size: 250% 250%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: talentGradient 5s ease infinite;
}

.talent-hero p {
    max-width: 48rem;
    margin: 0 auto;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
}

/* Search */

.talent-search {
    padding: 2rem 0 5rem;
}

.talent-search .search-bar {
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    box-shadow:
        0 1rem 3rem #082a4a0d,
        0 0 0 0 #7c3aed22;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-search .search-bar:focus-within {
    border-color: #7c3aed66;
    box-shadow:
        0 1rem 3rem #082a4a12,
        0 0 0 4px #7c3aed0d;
}

.talent-search .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    background: #f8f8fb;
    border: 1px solid transparent;
    border-radius: 1.5rem;
}

.talent-search .search-input span {
    color: #7c3aed;
    font-size: 1.5rem;
}

.talent-search .search-input input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
}

.talent-search .search-bar>button {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 1.5rem;
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899);
    background-size: 200% 200%;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0.7rem 1.5rem #7c3aed33;
    animation: talentButtonGradient 5s ease infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-search .search-bar>button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: talentButtonShine 3.5s ease-in-out infinite;
}

.talent-search .search-bar>button:hover {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2rem #7c3aed44;
}

.talent-search .search-bar>button:active {
    transform: translateY(0) scale(0.97);
}

.talent-search .filters {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.talent-search .filters button {
    padding: 0.8rem 1.3rem;
    border: 1px solid #ddd;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}

.talent-search .filters button:hover {
    transform: translateY(-2px);
    border-color: #7c3aed66;
    color: #7c3aed;
}

.talent-search .filters button.active {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0.5rem 1.2rem #7c3aed33;
}

/* Profiles */

.talent-profiles {
    padding: 5rem 0;
    margin: 0 4rem;
    background:
        radial-gradient(circle at 10% 10%, #7c3aed0b, transparent 25%),
        radial-gradient(circle at 90% 90%, #ec48990b, transparent 25%),
        #f3f6f9;
    border: 1px solid #ddd8;
    border-radius: 4rem;
}

.talent-profiles .section-header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.talent-profiles .eyebrow {
    display: inline-block;
    color: #7c3aed;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.talent-profiles .section-header h2 {
    color: var(--secondary-color);
    font-size: 3rem;
    line-height: 1.2;
    max-width: 45rem;
}

.talent-profiles .section-header>p {
    color: #666;
    line-height: 1.7;
}

.talent-profiles .items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.talent-profiles .profile-card {
    position: relative;
    padding: 2rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 0.8rem 2rem #082a4a08;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.talent-profiles .profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background: linear-gradient(90deg,
            #7c3aed,
            #a855f7,
            #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.talent-profiles .profile-card:hover {
    transform: translateY(-8px);
    border-color: #7c3aed33;
    box-shadow: 0 1.5rem 3rem #082a4a14;
}

.talent-profiles .profile-card:hover::before {
    transform: scaleX(1);
}

.talent-profiles .profile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.talent-profiles .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 4rem;
    height: 4rem;
    border-radius: 50rem;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0.5rem 1.2rem #7c3aed33;
}

.talent-profiles .availability {
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    background: #7c3aed0d;
    color: #7c3aed;
    border: 1px solid #7c3aed22;
    font-size: 0.75rem;
    font-weight: 700;
}

.talent-profiles .profile-card h3 {
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.talent-profiles .role {
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 0;
}

.talent-profiles .bio {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.talent-profiles .skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

.talent-profiles .skills span {
    padding: 0.45rem 0.7rem;
    border-radius: 2rem;
    background: #f8f5ff;
    color: #7c3aed;
    border: 1px solid #7c3aed1f;
    font-size: 0.75rem;
}

.talent-profiles .profile-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.2rem;
    border-top: 1px solid #eee;
}

.talent-profiles .profile-bottom>span {
    color: #777;
    font-size: 0.85rem;
}

.talent-profiles .profile-bottom a {
    position: relative;
    color: #7c3aed;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.talent-profiles .profile-bottom a::after {
    content: " →";
    display: inline-block;
    transition: transform 0.25s ease;
}

.talent-profiles .profile-bottom a:hover::after {
    transform: translateX(4px);
}

/* Why Talent */

.why-talent {
    padding: 6rem 0;
}

.why-talent .layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

.why-talent .content {
    display: flex;
    flex-direction: column;
}

.why-talent .eyebrow {
    color: #7c3aed;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.why-talent .content h2 {
    color: var(--secondary-color);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.why-talent .content>p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.why-talent .items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.why-talent .item {
    display: flex;
    gap: 1rem;
    padding: 1.3rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 1.5rem;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.why-talent .item:hover {
    transform: translateX(6px);
    border-color: #7c3aed33;
    box-shadow: 0 0.8rem 2rem #082a4a0c;
}

.why-talent .item>span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.why-talent .item h3 {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.why-talent .item p {
    color: #666;
    line-height: 1.5;
    font-size: 0.9rem;
}

.why-talent .visual {
    padding: 2rem;
}

.why-talent .stats-card {
    position: relative;
    padding: 2rem;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 1.5rem 4rem #082a4a12;
    border: 1px solid #ddd;
    overflow: hidden;
}

.why-talent .stats-card::before {
    content: "";
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, #7c3aed18, transparent 70%);
}

.why-talent .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 3rem;
}

.why-talent .live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    background: #7c3aed0d;
    color: #7c3aed;
    border: 1px solid #7c3aed1f;
    font-size: 0.75rem;
}

.why-talent .live::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #ec4899;
    animation: talentPulse 2s infinite;
}

.why-talent .stats-main {
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.why-talent .stats-main strong {
    display: block;
    color: var(--secondary-color);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.why-talent .stats-main p {
    color: #777;
}

.why-talent .stats-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

.why-talent .stats-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.why-talent .stats-list span {
    color: #666;
}

.why-talent .stats-list b {
    color: #7c3aed;
}

.why-talent .stats-footer {
    padding: 1rem;
    border-radius: 1rem;
    background: var(--secondary-color);
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-size: 0.85rem;
}

/* Animations */

@keyframes talentGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes talentButtonGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes talentButtonShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 160%;
    }
}

@keyframes talentHeroGlow {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
    }
}

@keyframes talentPulse {
    0% {
        box-shadow: 0 0 0 0 #ec489955;
    }

    70% {
        box-shadow: 0 0 0 0.5rem transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.talent-hero {
    padding: 7rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.talent-hero::before {
    content: "";
    position: absolute;
    top: -14rem;
    left: 50%;
    width: 38rem;
    height: 38rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #7c3aed22 0%, #ec48990d 35%, transparent 70%);
    pointer-events: none;
    animation: talentHeroGlow 6s ease-in-out infinite;
}

.talent-hero .layout {
    width: 60rem;
    position: relative;
    z-index: 1;
}

.talent-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    border: 1px solid #7c3aed33;
    border-radius: 2rem;
    background: #7c3aed0c;
    color: #7c3aed;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.talent-hero .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 0 0 #ec489955;
    animation: talentPulse 2s infinite;
}

.talent-hero h1 {
    color: var(--secondary-color);
    font-size: 4.5rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.talent-hero h1 span {
    color: transparent;
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899,
            #7c3aed);
    background-size: 250% 250%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: talentGradient 5s ease infinite;
}

.talent-hero p {
    max-width: 48rem;
    margin: 0 auto;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
}


/* Search */

.talent-search {
    padding: 2rem 0 5rem;
}

.talent-search .search-bar {
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    box-shadow:
        0 1rem 3rem #082a4a0d,
        0 0 0 0 #7c3aed22;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-search .search-bar:focus-within {
    border-color: #7c3aed66;
    box-shadow:
        0 1rem 3rem #082a4a12,
        0 0 0 4px #7c3aed0d;
}

.talent-search .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    background: #f8f8fb;
    border: 1px solid transparent;
    border-radius: 1.5rem;
}

.talent-search .search-input span {
    color: #7c3aed;
    font-size: 1.5rem;
}

.talent-search .search-input input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
}

.talent-search .search-bar>button {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 1.5rem;
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899);
    background-size: 200% 200%;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0.7rem 1.5rem #7c3aed33;
    animation: talentButtonGradient 5s ease infinite;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-search .search-bar>button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    animation: talentButtonShine 3.5s ease-in-out infinite;
}

.talent-search .search-bar>button:hover {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2rem #7c3aed44;
}

.talent-search .search-bar>button:active {
    transform: translateY(0) scale(0.97);
}

.talent-search .filters {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.talent-search .filters button {
    padding: 0.8rem 1.3rem;
    border: 1px solid #ddd;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}

.talent-search .filters button:hover {
    transform: translateY(-2px);
    border-color: #7c3aed66;
    color: #7c3aed;
}

.talent-search .filters button.active {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0.5rem 1.2rem #7c3aed33;
}


/* Profiles */

.talent-profiles {
    padding: 5rem 0;
    margin: 0 4rem;
    background:
        radial-gradient(circle at 10% 10%, #7c3aed0b, transparent 25%),
        radial-gradient(circle at 90% 90%, #ec48990b, transparent 25%),
        #f3f6f9;
    border: 1px solid #ddd8;
    border-radius: 4rem;
}

.talent-profiles .section-header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.talent-profiles .eyebrow {
    display: inline-block;
    color: #7c3aed;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.talent-profiles .section-header h2 {
    color: var(--secondary-color);
    font-size: 3rem;
    line-height: 1.2;
    max-width: 45rem;
}

.talent-profiles .section-header>p {
    color: #666;
    line-height: 1.7;
}

.talent-profiles .items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.talent-profiles .profile-card {
    position: relative;
    padding: 2rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 0.8rem 2rem #082a4a08;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.talent-profiles .profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background: linear-gradient(90deg,
            #7c3aed,
            #a855f7,
            #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.talent-profiles .profile-card:hover {
    transform: translateY(-8px);
    border-color: #7c3aed33;
    box-shadow: 0 1.5rem 3rem #082a4a14;
}

.talent-profiles .profile-card:hover::before {
    transform: scaleX(1);
}

.talent-profiles .profile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.talent-profiles .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 4rem;
    height: 4rem;
    border-radius: 50rem;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0.5rem 1.2rem #7c3aed33;
}

.talent-profiles .availability {
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    background: #7c3aed0d;
    color: #7c3aed;
    border: 1px solid #7c3aed22;
    font-size: 0.75rem;
    font-weight: 700;
}

.talent-profiles .profile-card h3 {
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.talent-profiles .role {
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 1rem;
}

.talent-profiles .bio {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.talent-profiles .skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

.talent-profiles .skills span {
    padding: 0.45rem 0.7rem;
    border-radius: 2rem;
    background: #f8f5ff;
    color: #7c3aed;
    border: 1px solid #7c3aed1f;
    font-size: 0.75rem;
}

.talent-profiles .profile-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.2rem;
    border-top: 1px solid #eee;
}

.talent-profiles .profile-bottom>span {
    color: #777;
    font-size: 0.85rem;
}

.talent-profiles .profile-bottom a {
    position: relative;
    color: #7c3aed;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.talent-profiles .profile-bottom a::after {
    content: " →";
    display: inline-block;
    transition: transform 0.25s ease;
}

.talent-profiles .profile-bottom a:hover::after {
    transform: translateX(4px);
}


/* Why Talent */

.why-talent {
    padding: 6rem 0;
}

.why-talent .layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

.why-talent .content {
    display: flex;
    flex-direction: column;
}

.why-talent .eyebrow {
    color: #7c3aed;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.why-talent .content h2 {
    color: var(--secondary-color);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.why-talent .content>p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.why-talent .items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.why-talent .item {
    display: flex;
    gap: 1rem;
    padding: 1.3rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 1.5rem;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.why-talent .item:hover {
    transform: translateX(6px);
    border-color: #7c3aed33;
    box-shadow: 0 0.8rem 2rem #082a4a0c;
}

.why-talent .item>span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.why-talent .item h3 {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.why-talent .item p {
    color: #666;
    line-height: 1.5;
    font-size: 0.9rem;
}

.why-talent .visual {
    padding: 2rem;
}

.why-talent .stats-card {
    position: relative;
    padding: 2rem;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 1.5rem 4rem #082a4a12;
    border: 1px solid #ddd;
    overflow: hidden;
}

.why-talent .stats-card::before {
    content: "";
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, #7c3aed18, transparent 70%);
}

.why-talent .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 3rem;
}

.why-talent .live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    background: #7c3aed0d;
    color: #7c3aed;
    border: 1px solid #7c3aed1f;
    font-size: 0.75rem;
}

.why-talent .live::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #ec4899;
    animation: talentPulse 2s infinite;
}

.why-talent .stats-main {
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.why-talent .stats-main strong {
    display: block;
    color: var(--secondary-color);
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.why-talent .stats-main p {
    color: #777;
}

.why-talent .stats-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

.why-talent .stats-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.why-talent .stats-list span {
    color: #666;
}

.why-talent .stats-list b {
    color: #7c3aed;
}

.why-talent .stats-footer {
    padding: 1rem;
    border-radius: 1rem;
    background: var(--secondary-color);
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-size: 0.85rem;
}


/* CTA */

.talent-cta {
    position: relative;
    padding: 6rem 0;
    margin: 0 4rem;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 15% 20%, #ffffff18, transparent 25%),
        radial-gradient(circle at 85% 80%, #ec489944, transparent 30%),
        linear-gradient(135deg, #7c3aed, #a855f7, #7c3aed);
    background-size: 100% 100%, 100% 100%, 250% 250%;
    animation: talentCtaGradient 8s ease infinite;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.talent-cta::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid #ffffff22;
    border-radius: 3rem;
    pointer-events: none;
}

.talent-cta::after {
    content: "";
    position: absolute;
    width: 20rem;
    height: 20rem;
    top: -10rem;
    right: -5rem;
    border-radius: 50%;
    background: #ffffff0d;
    filter: blur(2px);
    pointer-events: none;
}

.talent-cta .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.talent-cta .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid #ffffff33;
    border-radius: 2rem;
    background: #ffffff12;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.talent-cta h2 {
    max-width: 55rem;
    font-size: 4rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.talent-cta p {
    max-width: 42rem;
    color: #ffffffdd;
    font-size: 1.1rem;
    line-height: 1.7;
}

.talent-cta .buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.talent-cta .buttons button {
    position: relative;
    padding: 1rem 2rem;
    border: 1px solid #fff;
    border-radius: 2rem;
    background: #fff;
    color: #7c3aed;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-cta .buttons button:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem #00000022;
}

.talent-cta .buttons .secondary {
    background: #ffffff12;
    color: #fff;
    border-color: #ffffff55;
    backdrop-filter: blur(10px);
}

.talent-cta .buttons .secondary:hover {
    background: #ffffff20;
}


/* Animations */

@keyframes talentGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes talentButtonGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes talentButtonShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 160%;
    }
}

@keyframes talentHeroGlow {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
    }
}

@keyframes talentPulse {
    0% {
        box-shadow: 0 0 0 0 #ec489955;
    }

    70% {
        box-shadow: 0 0 0 0.5rem transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes talentCtaGradient {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 50%;
    }

    50% {
        background-position: 0% 0%, 0% 0%, 100% 50%;
    }

    100% {
        background-position: 0% 0%, 0% 0%, 0% 50%;
    }
}

.legal-hero {
    padding: 7rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 35rem;
    height: 35rem;
    transform: translateX(-50%);
    background: radial-gradient(circle,
            #7c3aed18 0%,
            #ec489908 45%,
            transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    animation: legalHeroGlow 6s ease-in-out infinite;
}

.legal-hero .layout {
    width: 55rem;
    position: relative;
    z-index: 1;
}

.legal-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border: 1px solid #7c3aed22;
    border-radius: 2rem;
    background: linear-gradient(135deg,
            #7c3aed12,
            #ec489912);
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.5rem 1.5rem #7c3aed12;
}

.legal-hero h1 {
    color: var(--secondary-color);
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}

.legal-hero h1 span {
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: legalTitleGradient 4s ease infinite;
}

.legal-hero p {
    max-width: 45rem;
    margin: 0 auto;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
}

.legal-hero .updated {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.6rem 1rem;
    border-radius: 2rem;
    background: #f3f6f9;
    border: 1px solid #ddd;
    color: #777;
    font-size: 0.85rem;
}

.legal-content {
    padding: 3rem 0 7rem;
}

.legal-content .layout {
    width: 55rem;
}

.legal-content article {
    position: relative;
    padding: 3rem;
    background: linear-gradient(145deg,
            #ffffff,
            #f8fafc);
    border: 1px solid #ccc8;
    border-radius: 2rem;
    box-shadow:
        0 1rem 3rem #082a4a0a,
        inset 0 1px 0 #ffffff;
    overflow: hidden;
}

.legal-content article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
            #7c3aed,
            #a855f7,
            #ec4899,
            #7c3aed);
    background-size: 300% 100%;
    animation: legalAccentGradient 5s linear infinite;
}

.legal-content h2 {
    position: relative;
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-top: 2.8rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.legal-content h2::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 4px;
    height: calc(100% - 0.3rem);
    border-radius: 1rem;
    background: linear-gradient(180deg,
            #7c3aed,
            #ec4899);
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-content ul {
    margin: 1rem 0 1.5rem 1.5rem;
}

.legal-content li {
    position: relative;
    color: #555;
    line-height: 1.8;
    margin-bottom: 0.5rem;
    padding-left: 0.3rem;
}

.legal-content li::marker {
    color: #7c3aed;
}

.legal-content a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.legal-content a:hover {
    color: #ec4899;
}

.legal-content strong {
    color: var(--secondary-color);
}

@keyframes legalHeroGlow {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes legalTitleGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes legalAccentGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

.feature-hero {
    position: relative;
    padding: 8rem 0 6rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.feature-hero::before {
    content: "";
    position: absolute;
    top: -12rem;
    left: 50%;
    width: 45rem;
    height: 45rem;
    border-radius: 50%;
    background: #1ab5c51c;
    filter: blur(90px);
    transform: translateX(-50%);
    animation: heroGlow 7s ease-in-out infinite;
    z-index: -1;
}

.feature-hero::after {
    content: "";
    position: absolute;
    bottom: -10rem;
    left: 8%;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: #7c3aed14;
    filter: blur(80px);
    animation: floatingGlow 9s ease-in-out infinite;
    z-index: -1;
}

.feature-hero .layout {
    width: 60rem;
}

.feature-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #1ab5c50d;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.feature-hero .eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.7rem var(--primary-color);
    animation: pulseDot 2s ease-in-out infinite;
}

.feature-hero h1 {
    max-width: 58rem;
    margin: 0 auto 1.5rem;
    color: var(--secondary-color);
    font-size: 5rem;
    line-height: 1.08;
    letter-spacing: -0.08rem;
}

.feature-hero h1 span {
    display: inline-block;
    color: transparent;
    background: linear-gradient(120deg,
            #1ab5c5,
            #7c3aed,
            #ec4899,
            #1ab5c5);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: textGradient 6s ease infinite;
}

.feature-hero>.layout>p {
    max-width: 48rem;
    margin: 0 auto;
    color: #555;
    font-size: 1.15rem;
    line-height: 1.8;
}

.feature-hero .hero-note {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 42rem;
    margin: 2rem auto 0;
    padding: 1rem 1.3rem;
    border: 1px solid #ffffffaa;
    border-radius: 1.5rem;
    background: #ffffff88;
    box-shadow: 0 1.5rem 4rem #082a4a0c;
    backdrop-filter: blur(15px);
    text-align: left;
    overflow: hidden;
}

.feature-hero .hero-note::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffffaa,
            transparent);
    transform: skewX(-20deg);
    animation: noteShine 5s ease-in-out infinite;
}

.feature-hero .hero-note span {
    position: relative;
    font-size: 1.5rem;
}

.feature-hero .hero-note p {
    position: relative;
    color: var(--secondary-color);
    line-height: 1.5;
    font-size: 0.9rem;
}


/* URL STYLES */

.url-styles {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.url-styles .layout {
    text-align: center;
}

.url-styles .eyebrow {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
}

.url-styles h2 {
    color: var(--secondary-color);
    font-size: 3.2rem;
    margin: 1rem 0;
    letter-spacing: -0.04rem;
}

.url-styles .intro {
    max-width: 45rem;
    margin: 0 auto 3rem;
    color: #666;
    line-height: 1.8;
}

.url-styles .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.url-styles .url-card {
    position: relative;
    padding: 2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: linear-gradient(145deg,
            #f3f6f9,
            #ffffff);
    box-shadow: 0 1rem 3rem #082a4a0a;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.url-styles .url-card::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: #1ab5c514;
    filter: blur(25px);
    transition: transform 0.4s ease;
}

.url-styles .url-card:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow: 0 1.5rem 4rem #082a4a18;
}

.url-styles .url-card:hover::before {
    transform: scale(1.5);
}

.url-styles .number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.8rem;
    background: var(--secondary-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

.url-styles .url-card h3 {
    position: relative;
    color: var(--secondary-color);
    margin: 1.5rem 0 1rem;
    font-size: 1.3rem;
}

.url-styles .url-preview {
    position: relative;
    padding: 1.3rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    background: #fff;
    color: #777;
    font-size: 1.15rem;
    overflow: hidden;
}

.url-styles .url-preview::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffffcc,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.url-styles .url-card:hover .url-preview::after {
    left: 150%;
}

.url-styles .url-preview strong {
    color: var(--primary-color);
}

.url-styles .url-card p {
    position: relative;
    margin-top: 1rem;
    color: #666;
    line-height: 1.6;
}


/* URL VOTE */

.url-vote {
    position: relative;
    padding: 6rem 0;
    margin: 0 4rem;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 10% 20%,
            #ffffff22,
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            #7c3aed55,
            transparent 30%),
        linear-gradient(135deg,
            #1ab5c5,
            #087e99,
            #082a4a);
    overflow: hidden;
    isolation: isolate;
}

.url-vote::before {
    content: "";
    position: absolute;
    top: -10rem;
    right: -8rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    animation: rotateOrb 18s linear infinite;
}

.url-vote::after {
    content: "";
    position: absolute;
    bottom: -15rem;
    left: -10rem;
    width: 35rem;
    height: 35rem;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    animation: rotateOrbReverse 25s linear infinite;
}

.url-vote .layout {
    position: relative;
    z-index: 1;
    text-align: center;
}

.url-vote .eyebrow {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.url-vote h2 {
    color: #fff;
    font-size: 3.2rem;
    margin: 1rem 0;
    letter-spacing: -0.04rem;
}

.url-vote .intro {
    max-width: 45rem;
    margin: 0 auto 3rem;
    color: #dfffff;
    line-height: 1.7;
}

.url-vote .vote-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.url-vote .vote-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.url-vote .vote-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.url-vote .vote-content {
    position: relative;
    padding: 2rem;
    border: 1px solid #ffffff26;
    border-radius: 2rem;
    background: #ffffff0d;
    backdrop-filter: blur(15px);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.url-vote .vote-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff22,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.url-vote .vote-card:hover .vote-content {
    transform: translateY(-6px);
    background: #ffffff18;
    border-color: #ffffff44;
    box-shadow: 0 1.5rem 3rem #00000018;
}

.url-vote .vote-card:hover .vote-content::before {
    left: 150%;
}

.url-vote .vote-card input:checked+.vote-content {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 1.5rem 4rem #00000022;
    transform: translateY(-6px);
}

.url-vote .vote-number {
    display: block;
    margin-bottom: 1rem;
    color: #dfffff;
    font-size: 0.8rem;
    font-weight: 600;
}

.url-vote .vote-card input:checked+.vote-content .vote-number {
    color: var(--primary-color);
}

.url-vote .vote-content h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
}

.url-vote .vote-card input:checked+.vote-content h3 {
    color: var(--secondary-color);
}

.url-vote .vote-content p {
    color: #d8fafa;
    line-height: 1.6;
}

.url-vote .vote-card input:checked+.vote-content p {
    color: #666;
}

.url-vote .check {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid #ffffff66;
    border-radius: 50%;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.url-vote .vote-card input:checked+.vote-content .check {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.url-vote .vote-card input:checked+.vote-content .check::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.url-vote .vote-status {
    margin-top: 2rem;
    color: #dfffff;
    font-size: 0.9rem;
}


/* URL SUGGESTION */

.url-suggestion {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
}

.url-suggestion .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.url-suggestion .section-header {
    max-width: 50rem;
    text-align: center;
    margin-bottom: 3rem;
}

.url-suggestion .eyebrow {
    display: inline-block;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
}

.url-suggestion h2 {
    color: var(--secondary-color);
    font-size: 3.2rem;
    line-height: 1.2;
    margin: 1rem 0;
}

.url-suggestion .section-header p {
    color: #555;
    line-height: 1.7;
}

.url-suggestion .suggestion-box {
    position: relative;
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    padding: 2.5rem;
    border: 1px solid #ffffff;
    border-radius: 2.5rem;
    background: linear-gradient(145deg,
            #f3f6f9,
            #ffffff);
    box-shadow: 0 2rem 5rem #082a4a10;
    overflow: hidden;
}

.url-suggestion .suggestion-box::before {
    content: "";
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: #7c3aed12;
    filter: blur(35px);
}

.url-suggestion .field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.url-suggestion .field label {
    color: var(--secondary-color);
    font-weight: 600;
}

.url-suggestion .url-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 1rem;
    background: #fff;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.url-suggestion .url-input:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px #1ab5c51a;
}

.url-suggestion .url-input input {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.2rem;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
}

.url-suggestion .url-input span {
    padding-right: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
}

.url-suggestion .field small {
    color: #777;
    font-size: 0.8rem;
}

.url-suggestion textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.url-suggestion textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px #1ab5c51a;
}

.url-suggestion .examples {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.url-suggestion .examples>span {
    color: #666;
    font-size: 0.85rem;
}

.url-suggestion .examples button {
    padding: 0.5rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 2rem;
    background: #fff;
    color: var(--secondary-color);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.url-suggestion .examples button:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0.5rem 1rem #1ab5c51a;
}


/* FEEDBACK */

.feature-feedback {
    position: relative;
    padding: 7rem 0;
    margin: 0 4rem;
    border-radius: 4rem;
    background:
        radial-gradient(circle at 85% 15%,
            #7c3aed44,
            transparent 30%),
        radial-gradient(circle at 10% 90%,
            #1ab5c544,
            transparent 30%),
        var(--secondary-color);
    overflow: hidden;
    isolation: isolate;
}

.feature-feedback::before {
    content: "";
    position: absolute;
    top: -15rem;
    left: 50%;
    width: 30rem;
    height: 30rem;
    border: 1px solid #ffffff0d;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: slowOrbit 20s linear infinite;
}

.feature-feedback .layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-feedback .section-header {
    max-width: 50rem;
    text-align: center;
    margin-bottom: 3rem;
}

.feature-feedback .eyebrow {
    color: #7ddfe8;
    font-size: 1rem;
    font-weight: 600;
}

.feature-feedback h2 {
    color: #fff;
    font-size: 3.2rem;
    line-height: 1.2;
    margin: 1rem 0;
}

.feature-feedback .section-header p {
    color: #d8e2e9;
    line-height: 1.7;
}

.feature-feedback .feedback-wrapper {
    position: relative;
    width: 100%;
    max-width: 55rem;
    box-sizing: border-box;
    padding: 2.5rem;
    border: 1px solid #ffffffaa;
    border-radius: 2.5rem;
    background: #ffffffee;
    box-shadow: 0 2rem 5rem #00000020;
    backdrop-filter: blur(20px);
}

.feature-feedback form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-feedback .field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.feature-feedback .field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-feedback .field label {
    color: var(--secondary-color);
    font-weight: 600;
}

.feature-feedback input[type="text"],
.feature-feedback input[type="email"],
.feature-feedback textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    background: #f9fafb;
    color: #222;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.feature-feedback input[type="text"]:focus,
.feature-feedback input[type="email"]:focus,
.feature-feedback textarea:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px #1ab5c51a;
}

.feature-feedback textarea {
    resize: vertical;
}

.feature-feedback .interest-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.feature-feedback .interest-option {
    cursor: pointer;
}

.feature-feedback .interest-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feature-feedback .interest-option span {
    display: block;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    background: #f9fafb;
    color: var(--secondary-color);
    text-align: center;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.feature-feedback .interest-option:hover span {
    transform: translateY(-2px);
    border-color: #1ab5c555;
}

.feature-feedback .interest-option input:checked+span {
    border-color: var(--primary-color);
    background: #eaf9fa;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 0.7rem 1.5rem #1ab5c51a;
}

.feature-feedback form>button {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 1rem;
    background: linear-gradient(135deg,
            #7c3aed,
            #a855f7,
            #ec4899);
    background-size: 200% 200%;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    animation: ctaGradient 5s ease infinite;
    box-shadow: 0 0.8rem 2rem #7c3aed33;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.feature-feedback form>button:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.5rem #7c3aed55;
}

.feature-feedback form>button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feature-feedback .feedback-message {
    display: none;
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    line-height: 1.5;
}


/* ANIMATIONS */

@keyframes heroGlow {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes floatingGlow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(4rem, -3rem);
    }
}

@keyframes pulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
}

@keyframes textGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes noteShine {

    0%,
    55% {
        left: -100%;
    }

    80%,
    100% {
        left: 150%;
    }
}

@keyframes rotateOrb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateOrbReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes slowOrbit {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes ctaGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


footer {
    position: relative;
    padding: 6rem 0 2rem;
    margin-top: 4rem;
    background:
        radial-gradient(circle at 10% 20%,
            #1ab5c510,
            transparent 25%),
        #f7fafb;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: -10rem;
    right: -8rem;
    width: 24rem;
    height: 24rem;
    border: 1px solid #1ab5c515;
    border-radius: 50%;
    animation: footerOrbit 20s linear infinite;
    pointer-events: none;
}

footer .layout {
    position: relative;
    z-index: 1;
}

footer .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 6rem;
    padding-bottom: 4rem;
}

footer .brand {
    max-width: 24rem;
}

footer .brand img {
    width: 8rem;
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

footer .brand img:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 0.6rem 1rem #1ab5c522);
}

footer .brand p {
    margin-top: 1.2rem;
    color: #666;
    line-height: 1.7;
}

footer .brand::after {
    content: "Build your presence. Get discovered.";
    display: block;
    width: fit-content;
    margin-top: 1.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
}

footer .links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
}

footer .links>div {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

footer .links h3 {
    position: relative;
    width: fit-content;
    color: var(--secondary-color);
    margin-bottom: 0.7rem;
    font-size: 1rem;
}

footer .links h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 1.5rem;
    height: 2px;
    border-radius: 2rem;
    background: var(--primary-color);
}

footer .links a {
    position: relative;
    width: fit-content;
    color: #666;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

footer .links a::before {
    content: "→";
    position: absolute;
    left: -1.2rem;
    opacity: 0;
    color: var(--primary-color);
    transition:
        left 0.25s ease,
        opacity 0.25s ease;
}

footer .links a:hover {
    color: var(--primary-color);
    transform: translateX(4px);
}

footer .links a:hover::before {
    left: -1rem;
    opacity: 1;
}

footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dce5e9;
    color: #777;
    font-size: 0.9rem;
}

footer .footer-bottom>div {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

footer .footer-bottom a {
    position: relative;
    color: #777;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

footer .footer-bottom a:hover {
    color: var(--primary-color);
}

footer .footer-bottom a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25rem;
    height: 1px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}

footer .footer-bottom a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

@keyframes footerOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   TALENT PROFILE PAGE
   ============================================ */

.talent-profile-page {
    position: relative;
    width: 80rem;
    margin: 0 auto;
    max-width: calc(100% - 2rem);
    padding: 2rem 1.5rem 5rem;
}


/* ---------- PROFILE HEADER ---------- */

.talent-profile {
    position: relative;
}

.profile-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    border: 1px solid #ffffff;
    border-radius: 2.5rem;
    background:
        radial-gradient(circle at 90% 10%, #7c3aed0d, transparent 30%),
        radial-gradient(circle at 10% 90%, #1ab5c50d, transparent 30%),
        linear-gradient(145deg, #f3f6f9, #ffffff);
    box-shadow: 0 1.5rem 4rem #082a4a0d;
    overflow: hidden;
    isolation: isolate;
}

.profile-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed,
            #ec4899,
            var(--primary-color));
    background-size: 300% 100%;
    animation: legalAccentGradient 5s linear infinite;
}

.profile-header::after {
    content: "";
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: #1ab5c510;
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
}


/* ---------- PROFILE IDENTITY ---------- */

.profile-identity {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    min-width: 0;
}

.profile-heading {
    min-width: 0;
}

.profile-heading h1 {
    margin: 0.8rem 0 0.3rem;
    color: var(--secondary-color);
    font-size: 3.2rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}

.username {
    margin: 0;
    color: #777;
    font-size: 1rem;
}


/* ---------- AVATAR ---------- */

.avatar {
    position: relative;
    width: 7rem;
    height: 7rem;
    flex: 0 0 7rem;
    border: 4px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f6f9;
    box-shadow:
        0 0.8rem 2rem #082a4a18,
        0 0 0 1px #1ab5c522;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.profile-header:hover .avatar {
    transform: scale(1.05);
    box-shadow:
        0 1rem 2.5rem #082a4a22,
        0 0 0 2px #1ab5c544;
}


/* ---------- GITHUB BADGE ---------- */

.availability {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.45rem 0.85rem;
    border: 1px solid #1ab5c533;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

.availability::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0.7rem #1ab5c5aa;
    animation: pulseDot 2s ease-in-out infinite;
}


/* ---------- GITHUB BUTTON ---------- */

.github-profile-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    box-shadow:
        0 0.6rem 1.5rem #1ab5c533,
        inset 0 1px 0 #ffffff44;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.github-profile-link::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    background: linear-gradient(90deg,
            transparent,
            #ffffff66,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.github-profile-link::after {
    content: "↗";
    display: inline-block;
    transition: transform 0.25s ease;
}

.github-profile-link:hover {
    transform: translateY(-3px);
    background: #22c5d5;
    color: #ffffff;
    box-shadow:
        0 1rem 2rem #1ab5c555,
        inset 0 1px 0 #ffffff55;
}

.github-profile-link:hover::before {
    left: 150%;
}

.github-profile-link:hover::after {
    transform: translate(3px, -3px);
}


/* ---------- ABOUT ---------- */

.profile-bio {
    position: relative;
    margin-top: 2rem;
    padding: 2.5rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: linear-gradient(145deg, #f3f6f9, #ffffff);
    box-shadow: 0 1rem 3rem #082a4a0b;
    overflow: hidden;
    isolation: isolate;
}

.profile-bio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed);
}

.profile-bio::after {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c510;
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
}

.profile-bio h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem;
    padding-left: 1rem;
    color: var(--secondary-color);
    font-size: 1.6rem;
}

.profile-bio h2::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 4px;
    height: calc(100% - 0.3rem);
    border-radius: 1rem;
    background: linear-gradient(180deg,
            var(--primary-color),
            #7c3aed);
}

.profile-bio p {
    position: relative;
    z-index: 1;
    max-width: 60rem;
    margin: 0;
    color: #666;
    font-size: 1rem;
    line-height: 1.8;
}


/* ---------- PROFILE DETAILS ---------- */

.profile-details {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.detail-item {
    position: relative;
    padding: 1.4rem;
    border: 1px solid #ffffff;
    border-radius: 1.5rem;
    background: linear-gradient(145deg, #f3f6f9, #ffffff);
    box-shadow: 0 0.8rem 2rem #082a4a0a;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.detail-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.detail-item:hover {
    transform: translateY(-5px);
    border-color: #1ab5c544;
    box-shadow: 0 1rem 2.5rem #082a4a14;
}

.detail-item:hover::before {
    transform: scaleX(1);
}

.detail-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #888;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
}

.detail-item strong {
    display: block;
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}


/* ---------- SKILLS ---------- */

.profile-skills {
    margin-top: 4rem;
}

.section-heading {
    margin-bottom: 1.5rem;
}

.section-heading .eyebrow {
    display: block;
    margin-bottom: 0.7rem;
}

.section-heading h2 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 2rem;
    line-height: 1.2;
}

.section-heading p {
    max-width: 45rem;
    margin: 0.7rem 0 0;
    color: #777;
    line-height: 1.7;
}

.profile-skills .skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.profile-skills .skills span {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 600;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.profile-skills .skills span:hover {
    transform: translateY(-3px);
    border-color: #1ab5c555;
    background: #dfffff;
}


/* ---------- PROJECTS ---------- */

.profile-projects {
    margin-top: 4rem;
}

.profile-projects .items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}


/* ---------- PROJECT CARD ---------- */

.profile-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: linear-gradient(145deg, #f3f6f9, #ffffff);
    box-shadow: 0 1rem 3rem #082a4a0b;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed,
            #ec4899);
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.profile-card::after {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: #1ab5c514;
    filter: blur(25px);
    transition: transform 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

.profile-card:hover {
    transform: translateY(-8px);
    border-color: #1ab5c544;
    box-shadow: 0 1.5rem 4rem #082a4a18;
}

.profile-card:hover::before {
    transform: scaleX(1);
    animation: profileCardGradient 3s linear infinite;
}

.profile-card:hover::after {
    transform: scale(1.5);
}


/* ---------- PROJECT HEADER ---------- */

.project-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.project-header h3 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 1.3rem;
    line-height: 1.3;
    word-break: break-word;
    transition: color 0.25s ease;
}

.profile-card:hover .project-header h3 {
    color: var(--primary-color);
}

.project-language {
    flex-shrink: 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background: #ffffff;
    color: #666;
    font-size: 0.72rem;
    font-weight: 600;
}


/* ---------- PROJECT DESCRIPTION ---------- */

.profile-card .bio {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #666;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- PROJECT META ---------- */

.project-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-meta span {
    padding: 0.45rem 0.75rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background: #ffffff;
    color: #666;
    font-size: 0.75rem;
    font-weight: 500;
}


/* ---------- PROJECT FOOTER ---------- */

.profile-card .profile-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px solid #dce5e9;
}

.profile-card .profile-bottom span {
    color: #888;
    font-size: 0.78rem;
    font-weight: 500;
}

.profile-card .profile-bottom a {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.profile-card .profile-bottom a:hover {
    color: #7c3aed;
    transform: translateX(3px);
}


/* ---------- PROFILE FOOTER ---------- */

.profile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dce5e9;
}

.profile-footer a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.profile-footer a:hover {
    color: #7c3aed;
    transform: translateX(3px);
}


/* ---------- MESSAGE ---------- */

.talent-message {
    position: relative;
    max-width: 40rem;
    margin: 3rem auto;
    padding: 3rem 2rem;
    border: 1px solid #ffffff;
    border-radius: 2rem;
    background: linear-gradient(145deg, #f3f6f9, #ffffff);
    color: #666;
    text-align: center;
    box-shadow: 0 1rem 3rem #082a4a0b;
    overflow: hidden;
}

.talent-message::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            var(--primary-color),
            #7c3aed,
            #ec4899);
}

.talent-message h1,
.talent-message h2 {
    position: relative;
    margin: 0.8rem 0;
    color: var(--secondary-color);
}

.talent-message p {
    position: relative;
    margin: 0 auto 1.5rem;
    max-width: 30rem;
    color: #777;
    line-height: 1.7;
}

.talent-message a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 2rem;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0.6rem 1.5rem #1ab5c533;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.talent-message a:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem #1ab5c544;
}


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

@media (max-width: 1100px) {

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

}


@media (max-width: 900px) {

    .profile-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 2.5rem;
    }

    .github-profile-link {
        width: fit-content;
    }

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

    .profile-projects .items {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .talent-profile-page {
        max-width: calc(100% - 1rem);
        padding: 1rem 0 4rem;
    }

    .profile-header {
        padding: 2rem 1.5rem;
        border-radius: 2rem;
    }

    .profile-identity {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .avatar {
        width: 5.5rem;
        height: 5.5rem;
        flex-basis: 5.5rem;
    }

    .profile-heading h1 {
        font-size: 2.2rem;
    }

    .github-profile-link {
        width: 100%;
        box-sizing: border-box;
    }

    .profile-bio {
        padding: 1.8rem 1.4rem;
        border-radius: 1.5rem;
    }

    .profile-details {
        grid-template-columns: 1fr;
    }

    .profile-skills,
    .profile-projects {
        margin-top: 3rem;
    }

    .section-heading h2 {
        font-size: 1.6rem;
    }

    .profile-card {
        padding: 1.6rem;
        border-radius: 1.5rem;
    }

    .project-header {
        flex-direction: column;
    }

    .profile-card .profile-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-footer {
        align-items: flex-start;
        flex-direction: column;
    }

}

.location-input {
    width: 500px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1rem;
    border: 1px solid #dce5e9;
    border-radius: 1.5rem;
    outline: none;
    background: #ffffff;
    color: var(--secondary-color);
    font-family: inherit;
    font-size: 0.9rem;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* ============================================
   TALENT FILTERS
   ============================================ */

.filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1.5rem 0 0.5rem;
}

.filters a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background: #ffffff;
    color: #666;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.filters a:hover {
    transform: translateY(-2px);
    border-color: #1ab5c544;
    color: var(--primary-color);
    box-shadow: 0 0.5rem 1rem #1ab5c51a;
}

.filters a.active {
    border-color: transparent;
    background: linear-gradient(135deg,
            var(--primary-color),
            #0d8fa0);
    color: #ffffff;
    box-shadow: 0 0.5rem 1.2rem #1ab5c544;
}

.filters a.active:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

/* ============================================
   TALENT PAGINATION
   ============================================ */

.talent-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 3rem 0 5rem;
}

.talent-pagination a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid #dce5e9;
    border-radius: 2rem;
    background: #ffffff;
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.talent-pagination a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            #ffffffcc,
            transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.talent-pagination a:hover {
    transform: translateY(-3px);
    border-color: #1ab5c544;
    color: var(--primary-color);
    box-shadow: 0 0.6rem 1.2rem #1ab5c51a;
}

.talent-pagination a:hover::before {
    left: 150%;
}

.talent-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    padding: 0.75rem 1rem;
    border: 1px solid #1ab5c522;
    border-radius: 2rem;
    background: #eaf9fa;
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ============================================
   TALENT PAGINATION — MOBILE
   ============================================ */

@media (max-width: 700px) {

    .talent-pagination {
        gap: 0.5rem;
        padding: 2rem 0 4rem;
    }

    .talent-pagination a,
    .talent-pagination span {
        min-width: auto;
        font-size: 0.78rem;
    }

}