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

.background-gradient {

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            #1a1a1a 0%,
            #050505 70%
        );

    z-index: -3;
}

.background-noise {

    position: fixed;

    inset: 0;

    opacity: 0.03;

    pointer-events: none;

    background-image:
        url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    z-index: -2;
}

/* =========================
   NAVBAR
========================= */

.navbar {

    width: 100%;

    position: fixed;

    top: 0;
    left: 0;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        1.5rem
        3rem;

    z-index: 100;

    background:
        rgba(5, 5, 5, 0.55);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.04);
}

.logo {

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.25rem;
}

.nav-links {

    display: flex;

    gap: 2rem;
}

.nav-links a {

    color: var(--text-secondary);

    transition:
        color var(--transition-fast);
}

.nav-links a:hover {

    color: var(--text-primary);
}

/* =========================
   HERO SECTION
========================= */

.hero-section {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;
}

/* =========================
   HERO CONTENT
========================= */

.hero-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 100vh;

    padding:
        clamp(7rem, 10vh, 10rem)
        5rem
        4rem
        5rem;

    position: relative;

    z-index: 5;
}

.hero-subtitle {

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.15rem;

    margin-bottom: 1.5rem;

    font-size: 0.85rem;
}

.hero-content h1 {

    font-size:
        clamp(2.8rem, 5vw, 6rem);

    line-height: 1.02;

    letter-spacing: -0.045em;

    font-weight: 600;

    margin-bottom: 1.5rem;

    max-width: 700px;
}

.hero-description {

    max-width: 600px;

    color: var(--text-secondary);

    font-size:
        clamp(1rem, 1.1vw, 1.1rem);

    margin-bottom: 2.25rem;
}

/* =========================
   BUTTONS
========================= */

.hero-buttons {

    display: flex;

    gap: 1rem;
}

.primary-button,
.secondary-button {

    padding:
        1rem
        1.75rem;

    border:
        1px solid var(--border-primary);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.primary-button {

    background: var(--surface-primary);
}

.primary-button:hover,
.secondary-button:hover {

    transform: translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.18);
}

.primary-button:hover {

    background:
        rgba(255, 255, 255, 0.05);
}

/* =========================
   HERO VISUAL
========================= */

.hero-visual {

    position: relative;

    height: 100vh;

    overflow: hidden;

    clip-path:
        polygon(
            8% 0%,
            100% 0%,
            100% 100%,
            0% 100%
        );
}

/* =========================
   VISUAL TRACK
========================= */

.visual-track {

    display: flex;

    width: max-content;

    height: 100%;

    animation:
        scrollHorizontal 35s linear infinite;
}

/* =========================
   IMAGES
========================= */

.visual-track img {

    width: 65vw;

    max-width: 1600px;

    min-width: 700px;

    height: 100vh;

    object-fit: cover;

    flex-shrink: 0;

    filter:
        brightness(0.82);

    transform: scale(1.02);
}

/* =========================
   VISUAL OVERLAY
========================= */

.visual-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to left,
            rgba(5, 5, 5, 0.15),
            rgba(5, 5, 5, 0.55)
        );

    pointer-events: none;
}

/* =========================
   IMAGE ANIMATION
========================= */

@keyframes scrollHorizontal {

    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

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

@media (max-width: 1100px) {

    .hero-section {

        grid-template-columns: 1fr;
    }

    .hero-visual {

        display: none;
    }

    .hero-content {

        padding:
            7rem
            2rem;
    }
}

@media (max-width: 768px) {

    .navbar {

        padding:
            1.5rem;
    }

    .nav-links {

        gap: 1rem;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;
    }
}

/* =========================
   PROJECTS SECTION
========================= */

.projects-section {

    position: relative;

    padding:
        10rem
        5rem;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 5, 5, 0),
            rgba(10, 10, 10, 0.65)
        );
}

/* =========================
   SECTION HEADER
========================= */

.section-header {

    max-width: 700px;

    margin-bottom: 5rem;
}

.section-label {

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.15rem;

    margin-bottom: 1rem;

    font-size: 0.85rem;
}

.section-header h2 {

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;

    font-weight: 600;

    margin-bottom: 1.5rem;
}

.section-description {

    color: var(--text-secondary);

    font-size: 1.05rem;

    max-width: 600px;
}

/* =========================
   FEATURED PROJECTS
========================= */

.featured-projects {

    display: flex;

    flex-direction: column;

    gap: 8rem;
}

/* =========================
   PROJECT CARD
========================= */

.project-card {

    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap: 4rem;

    align-items: center;
}

/* Reverse Layout */

.project-card.reverse {

    grid-template-columns:
        0.9fr
        1.1fr;
}

.project-card.reverse .project-image {

    order: 2;
}

.project-card.reverse .project-content {

    order: 1;
}

/* =========================
   PROJECT IMAGE
========================= */

.project-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.02);
}

.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.5s ease;
}

.project-card:hover .project-image img {

    transform: scale(1.03);
}

/* =========================
   PROJECT CONTENT
========================= */

.project-number {

    color: var(--text-secondary);

    letter-spacing: 0.12rem;

    margin-bottom: 1rem;

    font-size: 0.8rem;
}

.project-content h3 {

    font-size:
        clamp(2rem, 4vw, 3.5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;

    font-weight: 600;

    margin-bottom: 1.5rem;
}

.project-description {

    color: var(--text-secondary);

    font-size: 1.05rem;

    margin-bottom: 1.5rem;

    max-width: 550px;
}

.project-tech {

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.95rem;

    margin-bottom: 2rem;
}

/* =========================
   PROJECT LINK
========================= */

.project-link {

    position: relative;

    display: inline-block;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.project-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);

    transition:
        background var(--transition-fast);
}

.project-link:hover {

    transform: translateX(4px);
}

.project-link:hover::after {

    background:
        rgba(255, 255, 255, 0.3);
}

/* =========================
   ALL PROJECTS LINK
========================= */

.projects-link-wrapper {

    margin-top: 4rem;

    display: flex;

    justify-content: flex-start;
}

.projects-link {

    color: var(--text-secondary);

    font-size: 0.95rem;

    letter-spacing: 0.02em;

    position: relative;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.projects-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);

    transition:
        background var(--transition-fast);
}

.projects-link:hover {

    color: var(--text-primary);

    transform: translateX(4px);
}

.projects-link:hover::after {

    background:
        rgba(255, 255, 255, 0.3);
}

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

@media (max-width: 1100px) {

    .projects-section {

        padding:
            7rem
            2rem;
    }

    .featured-projects {

        gap: 6rem;
    }

    .project-card,
    .project-card.reverse {

        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .project-card.reverse .project-image,
    .project-card.reverse .project-content {

        order: initial;
    }

    .section-header {

        margin-bottom: 4rem;
    }
}

/* =========================
   ABOUT SECTION
========================= */

.about-section {

    position: relative;

    padding:
        10rem
        5rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.04);
}

/* =========================
   ABOUT GRID
========================= */

.about-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap: 6rem;
}

/* =========================
   ABOUT CONTENT
========================= */

.about-content h2 {

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;

    font-weight: 600;

    margin-bottom: 2rem;

    max-width: 800px;
}

.about-description {

    max-width: 700px;

    color: var(--text-secondary);

    font-size: 1.05rem;

    margin-bottom: 1.5rem;
}

/* =========================
   ABOUT DETAILS
========================= */

.about-details {

    display: flex;

    flex-direction: column;

    gap: 3rem;

    padding-top: 5rem;
}

/* =========================
   DETAIL BLOCK
========================= */

.detail-block {

    padding-bottom: 2rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);
}

.detail-label {

    display: block;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.12rem;

    font-size: 0.8rem;

    margin-bottom: 1rem;
}

.detail-block p {

    line-height: 1.9;
}

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

@media (max-width: 1100px) {

    .about-section {

        padding:
            7rem
            2rem;
    }

    .about-grid {

        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .about-details {

        padding-top: 0;
    }
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section {

    position: relative;

    padding:
        10rem
        5rem
        4rem
        5rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.04);
}

/* =========================
   CONTACT CONTENT
========================= */

.contact-content {

    max-width: 700px;
}

.contact-content h2 {

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;

    font-weight: 600;

    margin-bottom: 1.5rem;
}

.contact-description {

    color: var(--text-secondary);

    font-size: 1.05rem;

    max-width: 600px;

    margin-bottom: 3rem;
}

/* =========================
   CONTACT LINKS
========================= */

.contact-links {

    display: flex;

    flex-wrap: wrap;

    gap: 2rem;
}

.contact-links a {

    color: var(--text-secondary);

    position: relative;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.contact-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);

    transition:
        background var(--transition-fast);
}

.contact-links a:hover {

    color: var(--text-primary);

    transform: translateX(4px);
}

.contact-links a:hover::after {

    background:
        rgba(255, 255, 255, 0.3);
}

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

.footer {

    margin-top: 8rem;

    padding-top: 2rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.04);
}

.footer p {

    color: var(--text-secondary);

    font-size: 0.9rem;
}

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

@media (max-width: 1100px) {

    .contact-section {

        padding:
            7rem
            2rem
            3rem
            2rem;
    }
}