/* =====================================================
   TEAM PORTFOLIO — MAIN STYLES
   Theme:
   #450C3F  Deep Plum
   #B9D175  Green
   #D9EFBD  Light Green
   #F5FBDA  Cream
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --plum: #450C3F;
    --plum-dark: #32082E;
    --plum-light: #64145C;

    --green: #B9D175;
    --light-green: #D9EFBD;
    --cream: #F5FBDA;
    --white: #FFFFFF;

    --text-light: rgba(245, 251, 218, 0.82);
    --text-muted: rgba(245, 251, 218, 0.56);
    --text-dark: #450C3F;

    --border-light: rgba(245, 251, 218, 0.13);
    --border-green: rgba(185, 209, 117, 0.35);
    --border-dark: rgba(69, 12, 63, 0.14);

    --mono: "DM Mono", monospace;
    --sans: "Inter", sans-serif;

    --container: 1200px;

    --transition: 0.3s ease;

}


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {

    min-height: 100vh;

    background: var(--plum);

    color: var(--cream);

    font-family: var(--sans);

    overflow-x: hidden;

}

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: none;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--green);
    color: var(--plum);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {

    outline: 2px solid var(--green);
    outline-offset: 3px;

}


/* =====================================================
   SKIP LINK
===================================================== */

.skip-link {

    position: absolute;

    top: -60px;
    left: 16px;

    z-index: 10000;

    padding: 12px 18px;

    background: var(--green);

    color: var(--plum);

    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;

    border-radius: 4px;

    transition: top 0.2s ease;

}

.skip-link:focus {
    top: 16px;
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {

    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;

    }

}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--plum-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--plum-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}


/* =====================================================
   COMMON CONTAINER
===================================================== */

.section-container {

    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

}

.section {
    position: relative;
}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 80px;

    z-index: 9999;

    background: rgba(69, 12, 63, 0.94);

    border-bottom: 1px solid var(--border-light);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

}

.nav-container {

    width: min(
        1400px,
        calc(100% - 48px)
    );

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--cream);

    font-family: var(--mono);

    font-size: 17px;

    font-weight: 500;

    letter-spacing: -0.03em;

    transition: var(--transition);

}

.logo:hover {
    color: var(--green);
}

.logo-mark {

    color: var(--green);

    font-size: 20px;

    line-height: 1;

}

.logo-accent {
    color: var(--green);
}


/* =====================================================
   NAVIGATION
===================================================== */

.main-nav {

    display: flex;

    align-items: center;

    gap: 6px;

}

.nav-link {

    position: relative;

    padding: 12px 15px;

    color: rgba(
        245,
        251,
        218,
        0.62
    );

    font-family: var(--mono);

    font-size: 11px;

    transition: var(--transition);

}

.nav-link:hover {
    color: var(--cream);
}

.nav-link.active {
    color: var(--cream);
}

.nav-link::after {

    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 5px;

    height: 1px;

    background: var(--green);

    transform: scaleX(0);

    transform-origin: center;

    transition: var(--transition);

}

.nav-link:hover::after,
.nav-link.active::after {

    transform: scaleX(1);

}


/* =====================================================
   LET'S TALK
===================================================== */

.talk-link {

    display: inline-flex;

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

    gap: 9px;

    margin-left: 10px;

    padding: 13px 19px;

    background: var(--green);

    color: var(--plum);

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

    font-family: var(--mono);

    font-size: 10px;

    transition: var(--transition);

}

.talk-link::after {

    content: "↗";

    font-size: 14px;

    transition: var(--transition);

}

.talk-link:hover {

    background: var(--cream);

    border-color: var(--cream);

    transform: translateY(-2px);

}

.talk-link:hover::after {

    transform:
        translate(
            2px,
            -2px
        );

}


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

.mobile-menu-btn {

    display: none;

    width: 42px;
    height: 42px;

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

    background: transparent;

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

    color: var(--cream);

    font-size: 16px;

}


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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding:
        150px
        0
        100px;

    overflow: hidden;

}


/* =====================================================
   HERO GRID
===================================================== */

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: 0.32;

    background-image:

        linear-gradient(
            rgba(245, 251, 218, 0.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(245, 251, 218, 0.055) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0,0,0,0.5) 70%,
            transparent 100%
        );

}


/* =====================================================
   HERO CONTAINER
===================================================== */

.hero-container {

    position: relative;

    z-index: 2;

    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.85fr);

    gap: 80px;

    align-items: center;

}


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

.hero-content {
    max-width: 690px;
}

.eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: var(--green);

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: 0.16em;

}

.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px
        rgba(185, 209, 117, 0.12);

    animation: pulse 2s infinite;

}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }

}


/* =====================================================
   HERO TITLE
===================================================== */

.hero h1 {

    max-width: 760px;

    color: var(--cream);

    font-size:
        clamp(
            54px,
            7vw,
            92px
        );

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: -0.065em;

}

.hero h1 .hero-highlight {

    display: inline;

    color: var(--green);

}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.hero-description {

    max-width: 610px;

    margin-top: 30px;

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.8;

}


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

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;

}

.btn {

    display: inline-flex;

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

    gap: 12px;

    min-height: 50px;

    padding:
        0
        20px;

    font-family: var(--mono);

    font-size: 10px;

    letter-spacing: 0.04em;

    transition: var(--transition);

}

.btn i {
    font-size: 11px;
}

.btn-primary {

    background: var(--green);

    color: var(--plum);

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

}

.btn-primary:hover {

    background: var(--cream);

    border-color: var(--cream);

    transform: translateY(-3px);

}

.btn-secondary {

    background: transparent;

    color: var(--cream);

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

}

.btn-secondary:hover {

    border-color: var(--green);

    color: var(--green);

    transform: translateY(-3px);

}


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

.hero-visual {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =====================================================
   TERMINAL
===================================================== */

.hero-terminal {

    position: relative;

    width: min(
        100%,
        520px
    );

    background: rgba(
        50,
        8,
        46,
        0.82
    );

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

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(8px);

}

.terminal-header {

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        18px;

    border-bottom:
        1px solid
        var(--border-light);

}

.terminal-dots {

    display: flex;

    gap: 6px;

}

.terminal-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    opacity: 0.7;

}

.terminal-title {

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

}

.terminal-body {

    position: relative;

    min-height: 285px;

    padding: 28px;

    font-family: var(--mono);

    font-size: 13px;

    line-height: 2.1;

}

.code-line {

    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

}

.code-line.indent {
    padding-left: 25px;
}

.code-line.indent-2 {
    padding-left: 50px;
}

.code-number {

    width: 20px;

    color:
        rgba(
            245,
            251,
            218,
            0.22
        );

    user-select: none;

}

.code-purple {
    color: #D5A7D0;
}

.code-white {
    color: var(--cream);
}

.code-muted {
    color:
        rgba(
            245,
            251,
            218,
            0.48
        );
}

.code-green {
    color: var(--green);
}

.code-cream {
    color: var(--light-green);
}

.code-cursor {

    display: inline-block;

    width: 7px;
    height: 15px;

    margin-top: 10px;

    background: var(--green);

    animation: blink 1s infinite;

}

@keyframes blink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }

}


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

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        13px
        17px;

    background: var(--cream);

    color: var(--plum);

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

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.2);

    font-family: var(--mono);

    font-size: 9px;

    animation: floatCard 5s ease-in-out infinite;

}

.floating-card i {

    color: var(--plum);

    font-size: 12px;

}

.card-one {

    left: -15px;

    bottom: 75px;

}

.card-two {

    right: -5px;

    top: 80px;

    animation-delay: -2.5s;

}

@keyframes floatCard {

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

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

}


/* =====================================================
   SCROLL INDICATOR
===================================================== */

.scroll-indicator {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(
            245,
            251,
            218,
            0.4
        );

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.14em;

}

.scroll-indicator i {

    color: var(--green);

    animation: scrollArrow 1.6s infinite;

}

@keyframes scrollArrow {

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

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

}


/* =====================================================
   SECTION LABEL
===================================================== */

.section-label {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--green);

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

}

.section-label span {

    display: inline-flex;

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

    width: 28px;
    height: 28px;

    background: var(--green);

    color: var(--plum);

    font-size: 9px;

}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.section-heading {
    position: relative;
}

.section-heading h2 {

    max-width: 700px;

    margin-top: 22px;

    color: var(--cream);

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.055em;

}

.section-heading h2 span {
    color: var(--green);
}


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

.about-section {

    padding:
        130px
        0;

    background: var(--cream);

    color: var(--plum);

}

.about-section .section-label {
    color: var(--plum);
}

.about-section .section-label span {

    background: var(--plum);

    color: var(--cream);

}

.about-section .section-heading h2 {
    color: var(--plum);
}

.about-section .section-heading h2 span {
    color: var(--plum-light);
}


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

.about-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    gap: 100px;

    margin-top: 70px;

    align-items: start;

}

.about-main {

    max-width: 680px;

}

.about-main p {

    color:
        rgba(
            69,
            12,
            63,
            0.68
        );

    font-size: 15px;

    line-height: 1.85;

}

.about-main .large-text {

    margin-bottom: 24px;

    color: var(--plum);

    font-size: 24px;

    line-height: 1.45;

    font-weight: 500;

}

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    color: var(--plum);

    font-family: var(--mono);

    font-size: 10px;

    border-bottom:
        1px solid
        rgba(
            69,
            12,
            63,
            0.3
        );

    padding-bottom: 6px;

    transition: var(--transition);

}

.text-link:hover {

    color: var(--plum-light);

    gap: 15px;

    border-color: var(--plum);

}


/* =====================================================
   ABOUT STATS
===================================================== */

.about-stats {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    border-top:
        1px solid
        var(--border-dark);

    border-left:
        1px solid
        var(--border-dark);

}

.stat-card {

    min-height: 155px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        var(--border-dark);

    border-bottom:
        1px solid
        var(--border-dark);

}

.stat-number {

    color: var(--plum);

    font-family: var(--mono);

    font-size: 34px;

    font-weight: 500;

}

.stat-label {

    color:
        rgba(
            69,
            12,
            63,
            0.45
        );

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: 0.15em;

}


/* =====================================================
   TEAM SECTION
===================================================== */

.team-section {

    padding:
        130px
        0;

    background: var(--plum);

}

.team-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

}

.team-heading > p {

    max-width: 340px;

    margin-bottom: 5px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   TEAM GRID
===================================================== */

.team-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 65px;

}


/* =====================================================
   TEAM PHOTO ROTATOR
===================================================== */

.team-photo-rotator {

    position: relative;

    width: 260px;
    height: 320px;

    margin: 55px auto 0;

    overflow: hidden;

    background: var(--plum-dark);

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

    border-radius: 14px;

    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.5);

}

.team-photo-slide {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 22px;

    opacity: 0;

    transition: opacity 1s ease;

}

.team-photo-slide.is-active {
    opacity: 1;
}

.team-photo-avatar {

    width: 110px;
    height: 110px;

    display: flex;

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

    background: var(--green);

    color: var(--plum);

    font-family: var(--mono);

    font-size: 30px;

    font-weight: 600;

    border-radius: 50%;

    overflow: hidden;

}

.team-photo-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.team-photo-caption {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    text-align: center;

}

.team-photo-name {

    color: var(--cream);

    font-family: var(--mono);

    font-size: 11px;

    letter-spacing: 0.04em;

}

.team-photo-role {

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}

@media (prefers-reduced-motion: reduce) {

    .team-photo-slide {
        transition: none;
    }

}


/* =====================================================
   TEAM CARD
===================================================== */

.team-card {

    position: relative;

    min-height: 350px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    background:
        rgba(
            50,
            8,
            46,
            0.55
        );

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

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;

}

.team-card::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--green);

    transform: scaleX(0);

    transform-origin: left;

    transition: 0.35s ease;

}

.team-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(
            185,
            209,
            117,
            0.5
        );

    background:
        rgba(
            100,
            20,
            92,
            0.42
        );

}

.team-card:hover::before {
    transform: scaleX(1);
}


/* =====================================================
   TEAM CARD TOP
===================================================== */

.team-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.team-number {

    color:
        rgba(
            245,
            251,
            218,
            0.35
        );

    font-family: var(--mono);

    font-size: 10px;

}

.team-arrow {

    width: 34px;
    height: 34px;

    display: flex;

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

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

    color: var(--green);

    transition: var(--transition);

}

.team-card:hover .team-arrow {

    background: var(--green);

    color: var(--plum);

    border-color: var(--green);

    transform:
        translate(
            3px,
            -3px
        );

}


/* =====================================================
   TEAM AVATAR
===================================================== */

.team-avatar {

    width: 82px;
    height: 82px;

    margin-top: 40px;

    display: flex;

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

    background: var(--green);

    color: var(--plum);

    font-family: var(--mono);

    font-size: 21px;

    font-weight: 500;

    border-radius: 50%;

    overflow: hidden;

}

.team-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* =====================================================
   TEAM INFO
===================================================== */

.team-info {
    margin-top: auto;
}

.team-name {

    color: var(--cream);

    font-size: 23px;

    line-height: 1.15;

    letter-spacing: -0.03em;

}

.team-role {

    margin-top: 7px;

    color: var(--green);

    font-family: var(--mono);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}

.team-description {

    max-width: 550px;

    margin-top: 13px;

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.65;

}

.team-project-count {

    margin-top: 20px;

    color:
        rgba(
            245,
            251,
            218,
            0.42
        );

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.06em;

}


/* =====================================================
   SERVICES
===================================================== */

.services-section {

    padding:
        130px
        0;

    background: var(--cream);

}

.services-section .section-label {
    color: var(--plum);
}

.services-section .section-label span {

    background: var(--plum);

    color: var(--cream);

}

.services-section .section-heading h2 {
    color: var(--plum);
}

.services-section .section-heading h2 span {
    color: var(--plum-light);
}


/* =====================================================
   SERVICES GRID
===================================================== */

.services-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: 65px;

    border-top:
        1px solid
        var(--border-dark);

    border-left:
        1px solid
        var(--border-dark);

}

.service-card {

    position: relative;

    min-height: 390px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    border-right:
        1px solid
        var(--border-dark);

    border-bottom:
        1px solid
        var(--border-dark);

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}

.service-card:hover {

    background:
        rgba(
            185,
            209,
            117,
            0.17
        );

    transform: translateY(-4px);

}

.service-number {

    color:
        rgba(
            69,
            12,
            63,
            0.28
        );

    font-family: var(--mono);

    font-size: 9px;

}

.service-icon {

    width: 48px;
    height: 48px;

    margin-top: 50px;

    display: flex;

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

    background: var(--plum);

    color: var(--green);

    font-size: 16px;

}

.service-card h3 {

    margin-top: 25px;

    color: var(--plum);

    font-size: 20px;

    letter-spacing: -0.03em;

}

.service-card p {

    margin-top: 13px;

    color:
        rgba(
            69,
            12,
            63,
            0.6
        );

    font-size: 12px;

    line-height: 1.7;

}

.service-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: auto;

    padding-top: 25px;

}

.service-tags span {

    padding:
        6px
        8px;

    color: var(--plum);

    border:
        1px solid
        rgba(
            69,
            12,
            63,
            0.16
        );

    font-family: var(--mono);

    font-size: 7px;

}


/* =====================================================
   CONTACT CTA
===================================================== */

.contact-section {

    padding:
        130px
        0;

    background: var(--plum);

}

.contact-box {

    position: relative;

    min-height: 430px;

    padding: 70px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--plum-light),
            var(--plum-dark)
        );

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

}

.contact-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

}

.contact-box .section-label {
    color: var(--green);
}

.contact-box h2 {

    margin-top: 22px;

    color: var(--cream);

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height: 1;

    letter-spacing: -0.055em;

}

.contact-box h2 span {
    color: var(--green);
}

.contact-box p {

    max-width: 600px;

    margin-top: 25px;

    color: var(--text-light);

    font-size: 14px;

    line-height: 1.8;

}

.contact-box .btn {
    margin-top: 30px;
}


/* =====================================================
   CONTACT DECORATION
===================================================== */

.contact-decoration {

    position: absolute;

    right: 40px;
    bottom: -50px;

    display: flex;

    align-items: center;

    color:
        rgba(
            185,
            209,
            117,
            0.12
        );

    font-family: var(--mono);

    font-size: 260px;

    line-height: 1;

    user-select: none;

}

.contact-decoration span:nth-child(2) {
    color: rgba(
        245,
        251,
        218,
        0.06
    );
}


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

.site-footer {

    padding:
        70px
        0
        30px;

    background: var(--plum-dark);

    border-top:
        1px solid
        var(--border-light);

}

.footer-container {

    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin: 0 auto;

}

.footer-brand {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.footer-brand p {

    max-width: 400px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.7;

}

.footer-links {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 45px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 10px;

}

.footer-links a {
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--green);
}

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 45px;

    padding-top: 20px;

    border-top:
        1px solid
        var(--border-light);

    color:
        rgba(
            245,
            251,
            218,
            0.35
        );

    font-family: var(--mono);

    font-size: 8px;

}


/* =====================================================
   PROJECT MODAL
===================================================== */

.project-modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

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

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}

.project-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =====================================================
   MODAL OVERLAY
===================================================== */

.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(
            20,
            3,
            18,
            0.86
        );

    backdrop-filter: blur(10px);

}


/* =====================================================
   MODAL CONTAINER
===================================================== */

.modal-container {

    position: relative;

    z-index: 2;

    width: min(
        1100px,
        100%
    );

    max-height: 90vh;

    overflow-y: auto;

    background: var(--cream);

    color: var(--plum);

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

    box-shadow:
        0 40px 100px
        rgba(
            0,
            0,
            0,
            0.4
        );

    transform:
        translateY(20px)
        scale(0.98);

    transition:
        transform 0.3s ease;

}

.project-modal.active .modal-container {

    transform:
        translateY(0)
        scale(1);

}


/* =====================================================
   MODAL CLOSE
===================================================== */

.modal-close {

    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 5;

    width: 42px;
    height: 42px;

    display: flex;

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

    background: var(--plum);

    color: var(--cream);

    font-size: 14px;

    transition: var(--transition);

}

.modal-close:hover {

    background: var(--green);

    color: var(--plum);

    transform: rotate(90deg);

}


/* =====================================================
   MODAL HEADER
===================================================== */

.modal-header {

    padding:
        45px
        50px;

    display: flex;

    align-items: center;

    gap: 25px;

    background: var(--plum);

    color: var(--cream);

}

.modal-member-number {

    width: 65px;
    height: 65px;

    display: flex;

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

    flex-shrink: 0;

    background: var(--green);

    color: var(--plum);

    font-family: var(--mono);

    font-size: 13px;

}

.modal-label {

    color: var(--green);

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.16em;

}

.modal-header h2 {

    margin-top: 6px;

    color: var(--cream);

    font-size: 32px;

    line-height: 1.1;

    letter-spacing: -0.04em;

}

.modal-header p {

    margin-top: 6px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 10px;

}


/* =====================================================
   MODAL BODY
===================================================== */

.modal-body {

    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

}

.modal-about {

    padding: 35px;

    border-right:
        1px solid
        var(--border-dark);

}

#modalDescription {

    color:
        rgba(
            69,
            12,
            63,
            0.68
        );

    font-size: 12px;

    line-height: 1.8;

}


/* =====================================================
   MODAL SKILLS
===================================================== */

.modal-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 25px;

}

.modal-skill {

    padding:
        7px
        9px;

    background:
        rgba(
            185,
            209,
            117,
            0.25
        );

    color: var(--plum);

    font-family: var(--mono);

    font-size: 7px;

}


/* =====================================================
   MODAL PORTFOLIO LINK
===================================================== */

.modal-portfolio-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 30px;

    color: var(--plum);

    font-family: var(--mono);

    font-size: 8px;

    border-bottom:
        1px solid
        var(--plum);

    padding-bottom: 5px;

    transition: var(--transition);

}

.modal-portfolio-link:hover {

    color: var(--plum-light);

    gap: 12px;

}


/* =====================================================
   MODAL PROJECT AREA
===================================================== */

.modal-project-area {

    padding: 35px;

}

.modal-project-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        var(--border-dark);

    color: var(--plum);

    font-family: var(--mono);

    font-size: 9px;

}

.modal-project-title span:last-child {

    color:
        rgba(
            69,
            12,
            63,
            0.4
        );

}


/* =====================================================
   MODAL PROJECT GRID
===================================================== */

.modal-project-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 18px;

}

.modal-project-card {

    padding: 20px;

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

    transition: var(--transition);

}

.modal-project-card:hover {

    border-color:
        rgba(
            69,
            12,
            63,
            0.4
        );

    transform: translateY(-3px);

}


/* =====================================================
   MODAL PROJECT IMAGE / ICON
===================================================== */

.modal-project-image {

    width: 45px;
    height: 45px;

    display: flex;

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

    background: var(--plum);

    color: var(--green);

    font-size: 15px;

}

.modal-project-category {

    margin-top: 18px;

    color:
        rgba(
            69,
            12,
            63,
            0.42
        );

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}

.modal-project-card h4 {

    margin-top: 7px;

    color: var(--plum);

    font-size: 16px;

    line-height: 1.2;

}

.modal-project-card p {

    margin-top: 9px;

    color:
        rgba(
            69,
            12,
            63,
            0.6
        );

    font-size: 10px;

    line-height: 1.6;

}

.modal-project-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 18px;

}

.project-status {

    color:
        rgba(
            69,
            12,
            63,
            0.45
        );

    font-family: var(--mono);

    font-size: 7px;

}

.project-view-link {

    color: var(--plum);

    font-family: var(--mono);

    font-size: 7px;

    transition: var(--transition);

}

.project-view-link:hover {

    color: var(--plum-light);

}

.empty-projects {

    padding: 40px 10px;

    color:
        rgba(
            69,
            12,
            63,
            0.4
        );

    font-family: var(--mono);

    font-size: 9px;

    text-align: center;

}


/* =====================================================
   MODAL SCROLLBAR
===================================================== */

.modal-container::-webkit-scrollbar {
    width: 6px;
}

.modal-container::-webkit-scrollbar-track {
    background: var(--cream);
}

.modal-container::-webkit-scrollbar-thumb {
    background: var(--plum-light);
}

.team-card:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}


/* =====================================================
   RESPONSIVE — 1100px
===================================================== */

@media (max-width: 1100px) {

    .hero-container {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.8fr);

        gap: 45px;

    }

    .hero h1 {
        font-size: clamp(52px, 7vw, 76px);
    }

    .services-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =====================================================
   RESPONSIVE — 900px
===================================================== */

@media (max-width: 900px) {

    .hero {

        padding-top: 130px;

    }

    .hero-container {

        grid-template-columns: 1fr;

    }

    .hero-content {

        max-width: 750px;

    }

    .hero-visual {

        min-height: 420px;

        margin-top: 20px;

    }

    .hero-terminal {
        max-width: 600px;
    }

    .about-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .team-heading {

        align-items: flex-start;

        flex-direction: column;

    }

    .team-heading > p {

        margin-bottom: 0;

    }

    .modal-body {

        grid-template-columns: 1fr;

    }

    .modal-about {

        border-right: none;

        border-bottom:
            1px solid
            var(--border-dark);

    }

}


/* =====================================================
   RESPONSIVE — 800px
===================================================== */

@media (max-width: 800px) {

    .site-header {
        height: 70px;
    }

    .nav-container {

        width:
            calc(
                100% - 30px
            );

    }

    .mobile-menu-btn {

        display: inline-flex;

    }

    .main-nav {

        position: fixed;

        top: 70px;

        left: 15px;
        right: 15px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 12px;

        background:
            rgba(
                50,
                8,
                46,
                0.98
            );

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

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition: var(--transition);

    }

    .main-nav.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }

    .nav-link {

        width: 100%;

        padding: 15px;

        border-bottom:
            1px solid
            var(--border-light);

    }

    .nav-link::after {
        display: none;
    }

    .talk-link {

        width: 100%;

        margin:
            8px 0 0;

        padding: 15px;

    }

    .hero {

        min-height: auto;

        padding:
            125px
            0
            80px;

    }

    .hero h1 {

        font-size:
            clamp(
                48px,
                12vw,
                72px
            );

    }

    .hero-description {

        font-size: 14px;

    }

    .hero-visual {

        min-height: 380px;

    }

    .floating-card {

        font-size: 8px;

    }

    .card-one {
        left: 0;
        bottom: 40px;
    }

    .card-two {
        right: 0;
        top: 40px;
    }

    .section-container {

        width:
            calc(
                100% - 30px
            );

    }

    .about-section,
    .team-section,
    .services-section,
    .contact-section {

        padding:
            90px
            0;

    }

    .team-grid {

        grid-template-columns: 1fr;

    }

    .team-photo-rotator {

        width: 210px;
        height: 260px;

        margin-top: 40px;

    }

    .team-photo-avatar {

        width: 90px;
        height: 90px;

        font-size: 24px;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .contact-box {

        padding: 45px 30px;

    }

    .contact-decoration {

        right: -40px;

        font-size: 180px;

    }

    .modal-project-grid {

        grid-template-columns: 1fr;

    }

}


/* =====================================================
   RESPONSIVE — 550px
===================================================== */

@media (max-width: 550px) {

    .hero h1 {

        font-size: 47px;

    }

    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .btn {

        width: 100%;

    }

    .hero-visual {

        min-height: 320px;

    }

    .hero-terminal {

        width: 100%;

    }

    .terminal-body {

        padding: 20px;

        font-size: 10px;

    }

    .code-line {

        gap: 5px;

    }

    .code-line.indent {
        padding-left: 15px;
    }

    .code-line.indent-2 {
        padding-left: 30px;
    }

    .about-main .large-text {

        font-size: 20px;

    }

    .about-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .stat-card {

        min-height: 125px;

        padding: 18px;

    }

    .stat-number {

        font-size: 27px;

    }

    .team-card {

        min-height: 330px;

        padding: 23px;

    }

    .contact-box {

        min-height: 390px;

        padding: 35px 24px;

    }

    .modal-container {

        max-height: 94vh;

    }

    .modal-header {

        padding:
            35px
            25px;

    }

    .modal-header h2 {

        font-size: 25px;

    }

    .modal-member-number {

        width: 50px;
        height: 50px;

        font-size: 10px;

    }

    .modal-about,
    .modal-project-area {

        padding: 25px;

    }

    .modal-close {

        top: 12px;
        right: 12px;

        width: 36px;
        height: 36px;

    }

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}

/* =====================================================
   PROJECTS SHOWCASE
===================================================== */

.projects-showcase {

    padding: 130px 0;

    background: var(--plum);

    color: var(--cream);

    overflow: hidden;

}


/* =====================================================
   PROJECT HEADER
===================================================== */

.projects-showcase-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    padding-bottom: 65px;

    border-bottom:
        1px solid
        var(--border-light);

}


.projects-showcase-header .section-heading {
    flex: 1;
}


.projects-showcase-header .section-heading h2 {

    margin-top: 22px;

    font-size:
        clamp(
            48px,
            6vw,
            76px
        );

}


.projects-showcase-intro {

    width: min(
        360px,
        100%
    );

}


.projects-showcase-intro p {

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.8;

}


.projects-all-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding-bottom: 7px;

    color: var(--green);

    border-bottom:
        1px solid
        var(--green);

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: 0.08em;

    transition:
        gap 0.3s ease,
        color 0.3s ease;

}


.projects-all-link:hover {

    gap: 16px;

    color: var(--cream);

}


/* =====================================================
   PROJECT LIST
===================================================== */

.projects-showcase-list {

    margin-top: 0;

}


/* =====================================================
   PROJECT ITEM
===================================================== */

.home-project {

    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

    gap: 55px;

    min-height: 330px;

    padding: 42px 0;

    border-bottom:
        1px solid
        var(--border-light);

}


.home-project:last-child {

    border-bottom: none;

}


/* =====================================================
   PROJECT PREVIEW
===================================================== */

.home-project-preview {

    position: relative;

    height: 245px;

    overflow: hidden;

    background: var(--plum-dark);

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

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;

}


.home-project:hover
.home-project-preview {

    transform:
        translateY(-5px);

    border-color:
        var(--border-green);

}


/* =====================================================
   LIVE WEBSITE PREVIEW
===================================================== */

.home-project-preview iframe {

    width: 1280px;

    height: 900px;

    border: none;

    transform:
        scale(0.235);

    transform-origin:
        top left;

    pointer-events: auto;

    background: var(--cream);

    opacity: 0;

    transition: opacity 0.4s ease;

}

.home-project-preview iframe.is-loaded {
    opacity: 1;
}


/* =====================================================
   PREVIEW OVERLAY
===================================================== */

.home-project-preview::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 50%,
            rgba(69, 12, 63, 0.35)
        );

    pointer-events: none;

}


.home-project-preview-label {

    position: absolute;

    left: 14px;

    bottom: 14px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        8px
        10px;

    background:
        rgba(
            50,
            8,
            46,
            0.9
        );

    color: var(--green);

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

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: 0.08em;

}


.home-project-preview-label i {

    font-size: 6px;

}


/* =====================================================
   FALLBACK PREVIEW
===================================================== */

.home-project-no-preview {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 12px;

    background:
        linear-gradient(
            135deg,
            var(--plum-light),
            var(--plum-dark)
        );

    color: var(--green);

}


.home-project-no-preview i {

    font-size: 28px;

}


.home-project-no-preview span {

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.12em;

}


/* =====================================================
   PROJECT INFORMATION
===================================================== */

.home-project-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

}


.home-project-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.home-project-number {

    color:
        rgba(
            245,
            251,
            218,
            0.3
        );

    font-family: var(--mono);

    font-size: 9px;

}


.home-project-category {

    color: var(--green);

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.12em;

}


.home-project-info h3 {

    margin-top: 28px;

    color: var(--cream);

    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    line-height: 1.05;

    letter-spacing: -0.045em;

    transition:
        color 0.3s ease;

}


.home-project:hover
.home-project-info h3 {

    color: var(--green);

}


.home-project-description {

    max-width: 620px;

    margin-top: 18px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.8;

}


/* =====================================================
   TECHNOLOGIES
===================================================== */

.home-project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 23px;

}


.home-project-tech span {

    padding:
        7px
        9px;

    color:
        rgba(
            245,
            251,
            218,
            0.55
        );

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

    font-family: var(--mono);

    font-size: 7px;

}


.home-project:hover
.home-project-tech span {

    border-color:
        var(--border-green);

}


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

.home-project-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

}


.home-project-member {

    color:
        rgba(
            245,
            251,
            218,
            0.4
        );

    font-family: var(--mono);

    font-size: 8px;

}


.home-project-view {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--green);

    font-family: var(--mono);

    font-size: 8px;

    transition:
        gap 0.3s ease;

}


.home-project-view:hover {

    gap: 13px;

}


/* =====================================================
   PROJECT STATUS
===================================================== */

.home-project-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-right: auto;

    color:
        rgba(
            245,
            251,
            218,
            0.4
        );

    font-family: var(--mono);

    font-size: 7px;

}


.home-project-status::before {

    content: "";

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--green);

}


/* =====================================================
   PROJECT SHOWCASE RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .projects-showcase-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 30px;

    }


    .projects-showcase-intro {

        width: 100%;

        max-width: 500px;

    }


    .home-project {

        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 30px;

    }


    .home-project-preview {

        height: 210px;

    }


    .home-project-preview iframe {

        transform:
            scale(0.19);

    }

}


@media (max-width: 700px) {

    .projects-showcase {

        padding: 90px 0;

    }


    .projects-showcase-header {

        padding-bottom: 45px;

    }


    .home-project {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 35px 0;

    }


    .home-project-preview {

        width: 100%;

        height: 250px;

    }


    .home-project-preview iframe {

        transform:
            scale(0.24);

    }


    .home-project-info h3 {

        margin-top: 20px;

    }


    .home-project-footer {

        align-items: flex-start;

        flex-direction: column;

    }


    .home-project-status {

        margin-right: 0;

    }

}


@media (max-width: 450px) {

    .home-project-preview {

        height: 220px;

    }


    .home-project-preview iframe {

        transform:
            scale(0.21);

    }


    .home-project-info h3 {

        font-size: 29px;

    }

}