/* =========================================================
           DESIGN SYSTEM
        ========================================================== */

        :root {

            --bg: #050806;

            --surface: #0b100d;

            --surface-light: #101612;

            --green: #00d95f;

            --green-hover: #12e66d;

            --green-soft: rgba(0, 217, 95, 0.08);

            --green-border: rgba(0, 217, 95, 0.22);

            --text: #f2f4f3;

            --text-soft: #c3cbc6;

            --muted: #87938c;

            --border: rgba(255, 255, 255, 0.08);

            --max-width: 1280px;

        }


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

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

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            min-height: 100vh;

            background:

                radial-gradient(
                    circle at 8% 10%,
                    rgba(0, 217, 95, 0.045),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 90% 85%,
                    rgba(0, 217, 95, 0.025),
                    transparent 30%
                ),

                var(--bg);

            color: var(--text);

            font-family: "Inter", sans-serif;

            overflow-x: hidden;

        }


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

        .site-nav {

            position: sticky;

            top: 0;

            z-index: 1000;

            width: 100%;

            background: rgba(5, 8, 6, 0.92);

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

            backdrop-filter: blur(14px);

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

        }


        .nav-inner {

            width: 100%;

            max-width: var(--max-width);

            margin: 0 auto;

            padding: 1.2rem 5%;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }


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

        .logo {

            display: inline-flex;

            align-items: center;

            gap: 0.65rem;

            color: var(--text);

            text-decoration: none;

            font-family: "Space Grotesk", sans-serif;

            font-size: 1.05rem;

            font-weight: 600;

            letter-spacing: -0.4px;

            white-space: nowrap;

        }


        .nav-logo {

            width: 36px;

            height: 36px;

            display: block;

            flex: 0 0 36px;

            object-fit: contain;

        }


        .logo-text {

            display: inline-block;

        }


        .logo-text span {

            color: var(--green);

        }


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

        .nav-links {

            display: flex;

            align-items: center;

            gap: 2.2rem;

            list-style: none;

        }


        .nav-links a {

            position: relative;

            color: var(--muted);

            text-decoration: none;

            font-size: 0.84rem;

            transition: color 0.25s ease;

        }


        .nav-links a:hover {

            color: var(--text);

        }


        .nav-links a::after {

            content: "";

            position: absolute;

            left: 0;

            bottom: -7px;

            width: 0;

            height: 1px;

            background: var(--green);

            transition: width 0.25s ease;

        }


        .nav-links a:hover::after {

            width: 100%;

        }


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

        .hero {

            width: 100%;

            max-width: var(--max-width);

            min-height: calc(100vh - 74px);

            margin: 0 auto;

            padding: 5rem 5% 6rem;

            display: grid;

            grid-template-columns: 1.08fr 0.92fr;

            align-items: center;

            gap: 6rem;

        }


        .hero-content {

            max-width: 700px;

        }


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

        .status {

            display: inline-flex;

            align-items: center;

            gap: 0.65rem;

            margin-bottom: 1.8rem;

            color: var(--green);

            font-family: "Space Grotesk", sans-serif;

            font-size: 0.75rem;

            font-weight: 500;

            letter-spacing: 1.6px;

            text-transform: uppercase;

        }


        .status-dot {

            width: 6px;

            height: 6px;

            background: var(--green);

            border-radius: 50%;

        }


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

        h1 {

            max-width: 760px;

            margin-bottom: 1.8rem;

            font-family: "Space Grotesk", sans-serif;

            font-size: clamp(
                3.1rem,
                5.3vw,
                5.7rem
            );

            font-weight: 600;

            line-height: 0.98;

            letter-spacing: -3.2px;

        }


        h1 .accent {

            color: var(--green);

        }


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

        .description {

            max-width: 650px;

            margin-bottom: 2.5rem;

            color: var(--muted);

            font-size: 1.02rem;

            font-weight: 300;

            line-height: 1.85;

        }


        .description strong {

            color: var(--text-soft);

            font-weight: 500;

        }


        /* =========================================================
           CAPABILITIES
        ========================================================== */

        .capabilities {

            display: flex;

            flex-wrap: wrap;

            gap: 0.55rem;

            margin-bottom: 2.7rem;

        }


        .capability {

            padding: 0.5rem 0.75rem;

            background: var(--surface);

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

            border-radius: 4px;

            color: var(--text-soft);

            font-family: "Space Grotesk", sans-serif;

            font-size: 0.76rem;

            transition:
                border-color 0.25s ease,
                color 0.25s ease,
                background 0.25s ease;

        }


        .capability:hover {

            background: var(--surface-light);

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

            color: var(--text);

        }


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

        .hero-actions {

            display: flex;

            align-items: center;

            gap: 1.5rem;

        }


        .cta-button {

            display: inline-flex;

            align-items: center;

            gap: 0.8rem;

            padding: 0.9rem 1.35rem;

            background: var(--green);

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

            border-radius: 4px;

            color: var(--bg);

            font-family: "Space Grotesk", sans-serif;

            font-size: 0.86rem;

            font-weight: 600;

            text-decoration: none;

            transition:
                transform 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease;

        }


        .cta-button:hover {

            background: var(--green-hover);

            transform: translateY(-2px);

            box-shadow:
                0 8px 25px rgba(0, 217, 95, 0.12);

        }


        .arrow {

            font-size: 1rem;

            transition: transform 0.25s ease;

        }


        .cta-button:hover .arrow {

            transform: translateX(4px);

        }


        .secondary-link {

            color: var(--muted);

            font-family: "Space Grotesk", sans-serif;

            font-size: 0.84rem;

            text-decoration: none;

            transition: color 0.25s ease;

        }


        .secondary-link:hover {

            color: var(--text);

        }


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

        .hero-image {

            display: flex;

            align-items: center;

            justify-content: center;

            position: relative;

        }


        .image-frame {

            position: relative;

            width: min(100%, 465px);

        }


        .image-frame::before {

            content: "";

            position: absolute;

            inset: 12% -5% -4% 5%;

            background: var(--green);

            opacity: 0.035;

            filter: blur(70px);

            z-index: -1;

        }


        .hero-image img {

            display: block;

            width: 100%;

            height: auto;

            border-radius: 10px;

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

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

            object-fit: cover;

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

        }


        .hero-image img:hover {

            transform: translateY(-4px);

            border-color: rgba(0, 217, 95, 0.25);

        }


        /* =========================================================
           IMAGE LABEL
        ========================================================== */

        .image-label {

            position: absolute;

            left: -1rem;

            bottom: 1.4rem;

            padding: 0.65rem 0.85rem;

            background: rgba(5, 8, 6, 0.94);

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

            backdrop-filter: blur(10px);

            color: var(--muted);

            font-family: "Space Grotesk", sans-serif;

            font-size: 0.66rem;

            letter-spacing: 1px;

            text-transform: uppercase;

        }


        .image-label span {

            color: var(--green);

        }


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

        .hero-meta {

            display: flex;

            align-items: center;

            gap: 0.9rem;

            margin-top: 3.2rem;

            color: #657169;

            font-size: 0.68rem;

            letter-spacing: 1.2px;

            text-transform: uppercase;

        }


        .meta-line {

            width: 30px;

            height: 1px;

            background: rgba(0, 217, 95, 0.35);

        }


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

        .site-footer {

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

            background: var(--surface);

        }


        .footer-inner {

            max-width: var(--max-width);

            margin: 0 auto;

            padding: 4.5rem 5%;

            display: grid;

            grid-template-columns:
                1.4fr
                1fr
                0.7fr;

            gap: 4rem;

        }


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

        .footer-brand {

            min-width: 0;

        }


        .footer-logo {

            display: inline-flex;

            align-items: center;

            gap: 0.65rem;

            color: var(--text);

            text-decoration: none;

            font-family: "Space Grotesk", sans-serif;

            font-size: 1.1rem;

            font-weight: 600;

            letter-spacing: -0.5px;

        }


        .footer-logo-image {

            width: 34px;

            height: 34px;

            display: block;

            object-fit: contain;

        }


        .footer-logo-text span {

            color: var(--green);

        }


        .footer-brand p {

            margin-top: 1rem;

            color: var(--muted);

            font-size: 0.82rem;

            line-height: 1.7;

        }


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

        .footer-label {

            margin-bottom: 1.2rem;

            color: var(--muted);

            font-family: "Space Grotesk", sans-serif;

            font-size: 0.68rem;

            font-weight: 500;

            letter-spacing: 1.5px;

            text-transform: uppercase;

        }


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

        .footer-contact {

            display: flex;

            flex-direction: column;

            align-items: flex-start;

        }


        .contact-item {

            display: flex;

            align-items: center;

            gap: 0.75rem;

            margin-bottom: 0.8rem;

            color: var(--text-soft);

            font-size: 0.78rem;

            text-decoration: none;

            transition: color 0.25s ease;

        }


        .contact-item:hover {

            color: var(--green);

        }


        .contact-icon {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 30px;

            height: 30px;

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

            border-radius: 4px;

            flex-shrink: 0;

        }


        .contact-icon svg {

            width: 14px;

            height: 14px;

            fill: none;

            stroke: currentColor;

            stroke-width: 1.5;

            stroke-linecap: round;

            stroke-linejoin: round;

        }


        /* =========================================================
           SOCIAL ICONS
        ========================================================== */

        .social-links {

            display: flex;

            gap: 0.7rem;

        }


        .social-icon {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 40px;

            height: 40px;

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

            border-radius: 5px;

            color: var(--muted);

            background: transparent;

            text-decoration: none;

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

        }


        .social-icon:hover {

            color: var(--green);

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

            background: var(--green-soft);

            transform: translateY(-2px);

        }


        .social-icon svg {

            width: 18px;

            height: 18px;

            fill: currentColor;

        }


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

        .footer-bottom {

            max-width: var(--max-width);

            margin: 0 auto;

            padding: 1.2rem 5%;

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

            display: flex;

            align-items: center;

            justify-content: space-between;

            color: #657169;

            font-size: 0.68rem;

            letter-spacing: 0.5px;

        }


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

        @media (max-width: 960px) {

            .hero {

                grid-template-columns: 1fr;

                min-height: auto;

                padding-top: 4.5rem;

                gap: 4rem;

                text-align: center;

            }


            .hero-content {

                max-width: 760px;

                margin: 0 auto;

            }


            .status {

                justify-content: center;

            }


            h1 {

                margin-left: auto;

                margin-right: auto;

            }


            .description {

                margin-left: auto;

                margin-right: auto;

            }


            .capabilities {

                justify-content: center;

            }


            .hero-actions {

                justify-content: center;

            }


            .hero-image {

                order: -1;

            }


            .image-frame {

                width: min(75vw, 390px);

            }


            .hero-meta {

                justify-content: center;

            }


            .footer-inner {

                grid-template-columns: 1fr 1fr;

                gap: 3rem;

            }


            .footer-brand {

                grid-column: 1 / -1;

            }

        }


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

        @media (max-width: 650px) {

            .nav-inner {

                padding: 1rem 5%;

            }


            .nav-logo {

                width: 32px;

                height: 32px;

                flex-basis: 32px;

            }


            .logo {

                font-size: 0.9rem;

            }


            .nav-links {

                display: none;

            }


            .hero {

                padding:
                    3.5rem 5%
                    4rem;

                gap: 3.5rem;

            }


            .status {

                font-size: 0.68rem;

                letter-spacing: 1.1px;

            }


            h1 {

                font-size: clamp(
                    2.8rem,
                    13vw,
                    4rem
                );

                letter-spacing: -2.2px;

            }


            .description {

                font-size: 0.93rem;

                line-height: 1.75;

            }


            .capabilities {

                gap: 0.45rem;

            }


            .capability {

                font-size: 0.7rem;

            }


            .hero-actions {

                flex-direction: column;

                gap: 1.2rem;

            }


            .cta-button {

                width: 100%;

                justify-content: center;

            }


            .image-frame {

                width: 82vw;

            }


            .image-label {

                left: -0.4rem;

                bottom: 0.8rem;

            }


            .hero-meta {

                margin-top: 2.4rem;

                font-size: 0.59rem;

            }


            .footer-inner {

                grid-template-columns: 1fr;

                gap: 2.5rem;

                padding:
                    3.5rem 5%;

            }


            .footer-brand {

                grid-column: auto;

            }


            .footer-bottom {

                flex-direction: column;

                align-items: flex-start;

                gap: 0.5rem;

                padding:
                    1.2rem 5%;

            }

        }


        /* =========================================================
           ACCESSIBILITY
        ========================================================== */

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

            html {

                scroll-behavior: auto;

            }


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

                animation-duration: 0.01ms !important;

                animation-iteration-count: 1 !important;

                transition-duration: 0.01ms !important;

            }

        }


/* =========================================================
   PROJECTS PAGE ADDITIONS
   These rules are isolated from the original site stylesheet.
========================================================= */

.page-header {
    width: min(var(--max-width), 90%);
    margin: 0 auto;
    padding: 105px 0 82px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 22px;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px rgba(0, 217, 95, 0.5);
}

.page-header h1 {
    max-width: 850px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(46px, 6vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 600;
}

.page-header h1 span {
    color: var(--green);
}

.page-header p {
    max-width: 680px;
    margin-top: 28px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
}

.projects-container {
    width: min(var(--max-width), 90%);
    margin: 0 auto;
    padding-bottom: 100px;
}

.projects-section {
    border-top: 1px solid var(--border);
    padding-top: 28px;
}

.section-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 42px;
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.section-count {
    font-size: 11px;
    color: var(--muted);
    font-family: "Space Grotesk", sans-serif;
}

.projects-heading {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 500;
    margin-bottom: 14px;
}

.projects-intro {
    max-width: 720px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 46px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.project-card {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.018);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.project-card:hover {
    border-color: var(--green-border);
    background: var(--green-soft);
    transform: translateY(-3px);
}

.project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 48px;
}

.project-number {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--green);
    letter-spacing: .08em;
}

.project-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.project-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

.project-category {
    color: var(--green);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.project-card h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 500;
    margin-bottom: 20px;
}

.project-description {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 300;
    max-width: 570px;
}

.project-bottom {
    margin-top: auto;
    padding-top: 38px;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 30px;
}

.tech-tag {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    background: rgba(255,255,255,.015);
}

.project-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.project-link,
.demo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

.project-link {
    border: 1px solid var(--border);
    color: var(--text-soft);
    background: rgba(255,255,255,.02);
}

.project-link:hover {
    color: var(--text);
    border-color: var(--green-border);
    background: var(--green-soft);
}

.demo-button {
    border: 1px solid var(--green);
    background: var(--green);
    color: #041007;
}

.demo-button:hover {
    background: var(--green-hover);
    border-color: var(--green-hover);
}

.closing {
    border-top: 1px solid var(--border);
    margin-top: 95px;
    padding-top: 55px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.closing-copy {
    max-width: 650px;
}

.closing-label {
    color: var(--green);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.closing h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(30px,4vw,48px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 500;
}

.closing p {
    margin-top: 17px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 300;
}

.closing-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--green);
    border-radius: 5px;
    background: var(--green);
    color: #041007;
    font-size: 11px;
    font-weight: 600;
}

.closing-button:hover {
    background: var(--green-hover);
    border-color: var(--green-hover);
}

@media (max-width: 960px) {
    .page-header { padding: 82px 0 68px; }
    .project-grid { grid-template-columns: 1fr; }
    .project-card { min-height: 450px; }
    .closing { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 650px) {
    .page-header { padding: 68px 0 58px; }
    .page-header h1 { font-size: clamp(42px,13vw,62px); }
    .page-header p { font-size: 14px; margin-top: 22px; }
    .section-meta { margin-bottom: 30px; }
    .projects-heading { font-size: 31px; }
    .projects-intro { font-size: 13px; margin-bottom: 34px; }
    .project-card { min-height: auto; padding: 25px; }
    .project-top { margin-bottom: 42px; }
    .project-card h2 { font-size: 29px; }
    .project-description { font-size: 13px; }
    .project-bottom { padding-top: 34px; }
    .project-actions { align-items: stretch; flex-direction: column; }
    .project-link, .demo-button { width: 100%; }
    .closing { margin-top: 70px; padding-top: 42px; }
    .closing-button { width: 100%; }
}