.projects-section {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 5.25rem;
    background: #060608;
    isolation: isolate;
}

.projects-bg,
.projects-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.projects-bg {
    z-index: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.024), transparent 22%),
        radial-gradient(circle at 82% 16%, rgba(var(--accent-rgb), 0.1), transparent 18%),
        radial-gradient(circle at 60% 72%, rgba(var(--accent-deep-rgb), 0.11), transparent 24%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 0.0625rem, transparent 0.0625rem, transparent 33.333%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 0.0625rem, transparent 0.0625rem, transparent 8rem);
    background-size: auto, auto, auto, 34%, 100% 8rem;
    opacity: 0.8;
}

.projects-overlay {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 4, 6, 0.16) 0%, rgba(4, 4, 6, 0.04) 22%, rgba(4, 4, 6, 0.04) 78%, rgba(4, 4, 6, 0.16) 100%),
        radial-gradient(circle at 56% 22%, rgba(var(--accent-rgb), 0.08), transparent 18%);
}

.projects-section .container {
    position: relative;
    z-index: 2;
}

.projects-header {
    display: grid;
    grid-template-columns: minmax(0, 1.36fr) minmax(18rem, 0.64fr);
    gap: 1.35rem 1.8rem;
    align-items: start;
    margin-bottom: 1.35rem;
}

.projects-heading-block {
    position: relative;
    max-width: 58rem;
    padding-top: 0.2rem;
}

.projects-heading-block::before {
    content: "";
    position: absolute;
    inset: -1rem auto auto -1.5rem;
    width: 16rem;
    height: 10rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-deep-rgb), 0.16) 0%, rgba(var(--accent-deep-rgb), 0.08) 34%, transparent 72%);
    filter: blur(2.8rem);
    opacity: 0.68;
    pointer-events: none;
}

.projects-heading-block > * {
    position: relative;
    z-index: 1;
}

.projects-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.95rem;
    color: #bfc1c8;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.projects-eyebrow::before {
    content: "";
    width: 3.2rem;
    height: 0.0625rem;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.12));
}

.projects-title {
    margin: 0;
    max-width: 18.5ch;
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 2.75vw, 2.95rem);
    line-height: 0.99;
    color: #f5f1ea;
    text-wrap: balance;
}

.projects-intro-block {
    align-self: start;
    max-width: 27rem;
    padding-top: 0.7rem;
}

.projects-kicker {
    margin: 0 0 0.72rem;
    color: rgba(228, 229, 235, 0.7);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.projects-intro {
    margin: 0;
    color: rgba(220, 220, 228, 0.78);
    font-size: 0.98rem;
    line-height: 1.78;
}

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

.project-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 1.4rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.07);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.01)),
        rgba(255, 255, 255, 0.012);
    box-shadow:
        0 1rem 2.4rem rgba(0, 0, 0, 0.18),
        inset 0 0 0.08rem rgba(255, 255, 255, 0.025);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.project-card:hover {
    transform: translateY(-0.24rem);
    border-color: rgba(var(--accent-rgb), 0.22);
    box-shadow:
        0 1.2rem 2.8rem rgba(0, 0, 0, 0.22),
        0 0 1.6rem rgba(var(--accent-rgb), 0.05),
        inset 0 0 0.08rem rgba(255, 255, 255, 0.03);
}

.project-thumb {
    position: relative;
    min-height: 11rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(8, 8, 12, 0.18));
}

.project-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.26));
    pointer-events: none;
}

.project-thumb--zenith {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06), transparent 20%),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(16, 16, 22, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.9), rgba(10, 10, 14, 0.95));
}

.project-thumb--vasos {
    background:
        radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.04), transparent 20%),
        linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.1), rgba(18, 18, 22, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--branding {
    background:
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(135deg, rgba(100, 14, 24, 0.1), rgba(20, 20, 24, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--agenda {
    background:
        radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.09), rgba(20, 20, 24, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--blog {
    background:
        radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.09), rgba(20, 20, 24, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--dashboard {
    background:
        radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.05), transparent 20%),
        linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.1), rgba(18, 18, 24, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--academy {
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(135deg, rgba(120, 18, 30, 0.1), rgba(18, 18, 24, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--logistics {
    background:
        radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.045), transparent 18%),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), rgba(18, 18, 24, 0.18)),
        linear-gradient(180deg, rgba(14, 14, 18, 0.92), rgba(10, 10, 14, 0.96));
}

.project-thumb--game {
    background:
        radial-gradient(circle at 62% 34%, rgba(var(--accent-rgb), 0.18), transparent 18%),
        radial-gradient(circle at 76% 48%, rgba(255, 255, 255, 0.04), transparent 18%),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(16, 16, 22, 0.18)),
        linear-gradient(180deg, rgba(12, 12, 18, 0.94), rgba(8, 8, 12, 0.98));
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
    padding: 1.35rem 1.25rem 1.25rem;
}

.project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.project-type {
    display: inline-block;
    color: rgba(var(--accent-rgb), 0.92);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.project-label {
    color: rgba(213, 214, 221, 0.62);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: right;
}

.project-content h3 {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-heading);
    font-size: clamp(1.12rem, 1.35vw, 1.36rem);
    line-height: 1.15;
    color: #f1ede8;
    text-wrap: balance;
}

.project-content p {
    margin: 0;
    color: rgba(215, 215, 223, 0.76);
    font-size: 0.94rem;
    line-height: 1.74;
}

.project-note {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
    color: rgba(236, 234, 228, 0.88);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.projects-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem 1.3rem;
    align-items: start;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.07);
}

.projects-footer-label {
    margin: 0;
    color: #c4c4cc;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.projects-footer p:last-child {
    margin: 0;
    max-width: 48rem;
    color: rgba(220, 220, 228, 0.72);
    font-size: 0.95rem;
    line-height: 1.78;
}

@media (max-width: 80rem) {
    .projects-header {
        grid-template-columns: minmax(0, 1.28fr) minmax(18rem, 0.72fr);
        gap: 1.2rem 1.35rem;
    }

    .projects-title {
        max-width: 17ch;
        font-size: clamp(1.8rem, 2.9vw, 2.7rem);
    }

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

@media (max-width: 64rem) {
    .projects-section {
        padding: 4.45rem 0 4.75rem;
    }

    .projects-header,
    .projects-footer {
        grid-template-columns: 1fr;
    }

    .projects-header {
        gap: 1.1rem;
    }

    .projects-heading-block,
    .projects-title,
    .projects-intro-block,
    .projects-intro {
        max-width: none;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-thumb {
        min-height: 10.5rem;
    }
}

@media (max-width: 48rem) {
    .projects-section {
        padding: 3.95rem 0 4.25rem;
    }

    .projects-title {
        max-width: 13.4ch;
        font-size: clamp(1.82rem, 7.2vw, 2.45rem);
    }

    .projects-intro,
    .project-content p,
    .projects-footer p:last-child {
        font-size: 0.92rem;
    }

    .project-card {
        border-radius: 1.2rem;
    }

    .project-content {
        padding: 1.2rem 1.1rem 1.15rem;
    }

    .project-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .project-label {
        text-align: left;
    }
}

@media (max-width: 30rem) {
    .project-thumb {
        min-height: 9.4rem;
    }
}