/* =========================================================
   ANKIT BHATTARAI PORTFOLIO
   UNIFIED DARK CYBER THEME
   ========================================================= */

/*
   =========================================================
   CSS SECTION MAP
   =========================================================

   01. Global / Main Layout / Sidebar
   02. Home
   03. About
   04. Skills
   05. Projects
   06. Writeups
   07. Writeup PDF View
   08. Certifications
   09. Services

   Maintenance notes:
   - Service icons have been completely removed.
   - Existing page-specific overrides are preserved intentionally
     so completed pages keep their current appearance.
   - Responsive and reduced-motion rules remain with their
     original page sections.
   =========================================================
*/

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    background: #050708;
    color: #E8EEEC;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

/* =========================================================
   MAIN SITE
   ========================================================= */

.site-layout {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: block;
    background: transparent;
    z-index: 1;
}


/* =========================================================
   SIDEBAR
   =========================================================

   IMPORTANT:

   The sidebar uses the SAME base color as the website.

   It is intentionally NOT a different blue, purple,
   or gray panel.

   This makes the navigation blend into the page.
   ========================================================= */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100vh;
    background: #050708 !important;
    background-image: none !important;
    border-right: 1px solid #17201E;
    z-index: 999;
}


.sidebar-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 35px 22px 25px;
    background: transparent;
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile {
    text-align: center;
    padding-bottom: 28px;
    border-bottom: 1px solid #17201E;
}


.profile-image {
    width: 105px;
    height: 105px;
    margin: 0 auto 18px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #4CC7AA;
    background: #0A0F0E;
    box-shadow: 0 0 14px rgba(76, 199, 170, 0.08);
}


    .profile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.profile-name {
    color: #F1F5F4;
    font-size: 21px;
    font-weight: 600;
}


.profile-role {
    margin-top: 7px;
    color: #87938F;
    font-size: 13px;
}


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

.navigation {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 26px;
}


    /* ---------------------------------------------------------
   NORMAL NAVIGATION ITEM
   --------------------------------------------------------- */

    .navigation a {
        display: block;
        padding: 11px 14px;
        border-left: 3px solid transparent;
        border-radius: 5px;
        background: transparent;
        color: #A7B1AE;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
    }


        /* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

        .navigation a:hover {
            background: rgba(76, 199, 170, 0.08);
            color: #EAF2EF;
            border-left-color: rgba(76, 199, 170, 0.45);
            padding-left: 17px;
        }


        /* ---------------------------------------------------------
   ACTIVE / CURRENT PAGE
   --------------------------------------------------------- */

        .navigation a.active {
            background: rgba(76, 199, 170, 0.13);
            color: #4CC7AA;
            border-left-color: #4CC7AA;
            padding-left: 17px;
            font-weight: 600;
            box-shadow: inset 0 0 18px rgba(76, 199, 170, 0.025);
        }


            /* ---------------------------------------------------------
   ACTIVE + HOVER
   --------------------------------------------------------- */

            .navigation a.active:hover {
                background: rgba(76, 199, 170, 0.17);
                color: #67D7BB;
                border-left-color: #67D7BB;
            }


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

.sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #17201E;
    color: #5F706C;
    font-size: 11px;
    text-align: center;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main-content {
    position: relative;
    width: calc(100% - 270px);
    min-height: 100vh;
    margin-left: 270px;
    padding: 0;
    background: transparent;
    overflow-x: hidden;
    z-index: 2;
}


/* =========================================================
   HOME PAGE
   ========================================================= */

.home-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: transparent;
}


    /* =========================================================
   VERY SUBTLE BACKGROUND LIGHT
   ========================================================= */

    .home-page::before {
        content: "";
        position: absolute;
        top: -280px;
        left: 50%;
        width: 900px;
        height: 500px;
        transform: translateX(-50%);
        background: radial-gradient( ellipse, rgba(35, 150, 125, 0.055), transparent 68% );
        pointer-events: none;
        z-index: -1;
    }


/* =========================================================
   COMMON CONTENT WIDTH
   ========================================================= */

.hero-section,
.home-section {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}


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

.hero-section {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 125px 50px 110px;
    text-align: center;
}


.hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}


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

.hero-eyebrow {
    margin-bottom: 28px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 1;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.45), 0 0 18px rgba(76, 199, 170, 0.18);
    animation: cyberEyebrowMove 4s ease-in-out infinite;
}

@keyframes cyberEyebrowMove {

    0% {
        transform: translateX(-8px);
        opacity: 0.85;
    }

    50% {
        transform: translateX(8px);
        opacity: 1;
    }

    100% {
        transform: translateX(-8px);
        opacity: 0.85;
    }
}


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

.hero-name {
    margin-bottom: 24px;
    color: #F2F5F4;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(242, 245, 244, 0.15);
    animation: nameFloat 4s ease-in-out infinite;
}

@keyframes nameFloat {

    0%, 100% {
        transform: translateY(0);
        letter-spacing: 8px;
    }

    50% {
        transform: translateY(-3px);
        letter-spacing: 9px;
    }
}


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

.hero-content h1 {
    max-width: 850px;
    margin: 0 auto;
    color: #F5F7F6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
}


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

    .hero-content h1 span {
        display: block;
        margin-top: 6px;
        color: #42C9A7;
        font-weight: 700;
        text-shadow: 0 0 12px rgba(66, 201, 167, 0.30), 0 0 25px rgba(66, 201, 167, 0.12);
        animation: offensiveGlow 3.5s ease-in-out infinite;
    }

@keyframes offensiveGlow {

    0%, 100% {
        text-shadow: 0 0 10px rgba(66, 201, 167, 0.25), 0 0 22px rgba(66, 201, 167, 0.10);
    }

    50% {
        text-shadow: 0 0 16px rgba(66, 201, 167, 0.55), 0 0 32px rgba(66, 201, 167, 0.22);
    }
}




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

.hero-intro {
    max-width: 650px;
    margin: 30px auto 0;
    color: #AEBBB8;
    font-size: 15px;
    line-height: 1.75;
}
.hero-description {
    max-width: 650px;
    margin: 14px auto 0;
    color: #AEBBB8;
    font-size: 15px;
    line-height: 1.75;
}


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

.hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}


/* =========================================================
   GENERAL BUTTON
   ========================================================= */

.button {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid #188E75;
    border-radius: 5px;
    background: #188E75;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}


    .button:hover {
        background: #22AA8C;
        border-color: #22AA8C;
        color: #FFFFFF;
        transform: translateY(-1px);
    }


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.button-secondary {
    background: #188E75;
    border-color: #188E75;
    color: #FFFFFF;
}

    .button-secondary:hover {
        background: #22AA8C;
        border-color: #22AA8C;
        color: #FFFFFF;
        transform: translateY(-1px);
    }


/* =========================================================
   AVAILABILITY
   ========================================================= */

.availability {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #71807C;
    font-size: 12px;
}


.availability-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CC7AA;
    box-shadow: 0 0 8px rgba(76, 199, 170, 0.50);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.home-section {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 95px 50px;
    position: relative;
}


/* =========================================================
   SECTION DIVIDERS
   ========================================================= */

.freelance-section,
.security-section,
.experience-section,
.final-cta {
    border-top: 1px solid #17201E;
}


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

.section-heading {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


.section-label {
    margin-bottom: 18px;
    color: #46C5A5;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
}


.section-heading h2 {
    margin: 0 auto;
    color: #F2F5F4;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
}


.section-heading p {
    max-width: 720px;
    margin: 18px auto 0;
    color: #899794;
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
}


/* =========================================================
   SERVICE GRID
   ========================================================= */

.service-grid {
    width: 100%;
    max-width: 1050px;
    margin: 45px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


.service-card {
    min-height: 220px;
    padding: 28px;
    background: rgba(9, 15, 15, 0.90);
    border: 1px solid #172B27;
    border-radius: 8px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}


    .service-card:hover {
        background: rgba(12, 24, 22, 0.96);
        border-color: #286B5C;
        transform: translateY(-3px);
    }


.service-number {
    margin-bottom: 35px;
    color: #38BFA0;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
}


.service-card h3 {
    margin: 0 0 13px;
    color: #F2F5F4;
    font-size: 18px;
}


.service-card p {
    margin: 0;
    color: #899794;
    font-size: 14px;
    line-height: 1.7;
}


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

.skill-grid {
    width: 100%;
    max-width: 1050px;
    margin: 45px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.skill-card {
    padding: 30px;
    background: rgba(9, 15, 15, 0.90);
    border-left: 2px solid #304B46;
    border-top: 1px solid #172B27;
    border-right: 1px solid #172B27;
    border-bottom: 1px solid #172B27;
    border-radius: 6px;
    transition: border-color 0.2s ease, background 0.2s ease;
}


    .skill-card:hover {
        background: rgba(12, 24, 22, 0.96);
        border-left-color: #38BFA0;
    }


    .skill-card h3 {
        margin: 0 0 12px;
        color: #F2F5F4;
        font-size: 20px;
    }


    .skill-card p {
        margin: 0;
        color: #899794;
        font-size: 14px;
        line-height: 1.75;
    }


/* =========================================================
   EXPERIENCE
   ========================================================= */

.experience-box {
    width: 100%;
    max-width: 1050px;
    margin: 45px auto 0;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.5fr) auto;
    gap: 30px;
    align-items: center;
    background: rgba(9, 15, 15, 0.90);
    border: 1px solid #172B27;
    border-radius: 8px;
}


.experience-company h3 {
    margin: 0;
    color: #F2F5F4;
    font-size: 20px;
}


.experience-company p {
    margin: 8px 0 0;
    color: #899794;
    font-size: 14px;
}


.experience-box > p {
    margin: 0;
    color: #899794;
    font-size: 14px;
    line-height: 1.7;
}


.experience-box .button {
    white-space: nowrap;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
    padding-bottom: 110px;
    text-align: center;
}


    .final-cta h2 {
        max-width: 750px;
        margin: 0 auto;
        color: #F2F5F4;
        font-size: clamp(30px, 3vw, 42px);
        font-weight: 500;
        line-height: 1.12;
    }


    .final-cta p {
        max-width: 630px;
        margin: 18px auto 0;
        color: #899794;
        font-size: 15px;
        line-height: 1.8;
    }


    .final-cta .button {
        margin-top: 28px;
    }


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

@media (max-width: 900px) {

    .hero-section {
        padding: 90px 35px 85px;
    }


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


    .experience-box {
        grid-template-columns: 1fr;
        gap: 20px;
    }


        .experience-box .button {
            width: fit-content;
        }
}


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

@media (max-width: 700px) {

    .sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }


    .sidebar-content {
        height: auto;
    }


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


    .sidebar-footer {
        margin-top: 25px;
    }


    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }


    .hero-section {
        padding: 80px 22px 75px !important;
    }


    .hero-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 22px;
    }


    .hero-name {
        font-size: 13px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }


    .hero-content h1 {
        font-size: 39px;
        letter-spacing: -1px;
    }


    .hero-intro {
        font-size: 14px;
        line-height: 1.7;
        margin-top: 25px;
    }


    .hero-buttons {
        flex-wrap: wrap;
    }


    .home-section {
        padding: 70px 22px;
    }


    .section-label {
        font-size: 30px;
    }


    .section-heading h2 {
        font-size: 27px;
    }


    .service-grid,
    .skill-grid {
        grid-template-columns: 1fr;
        margin-top: 35px;
    }


    .experience-box {
        padding: 24px;
        margin-top: 35px;
    }


    .final-cta {
        padding-bottom: 80px;
    }


        .final-cta h2 {
            font-size: 30px;
        }
}


/* =========================================================
   FINAL LAYOUT OVERRIDE
   ========================================================= */

.site-layout {
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
    display: block !important;
}


/* ---------------------------------------------------------
   DESKTOP SIDEBAR
   --------------------------------------------------------- */

@media (min-width: 701px) {

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 270px !important;
        height: 100vh !important;
        margin: 0 !important;
        background: #050708 !important;
        background-image: none !important;
        border-right: 1px solid #17201E !important;
        z-index: 999 !important;
    }


    .main-content {
        position: relative !important;
        width: calc(100% - 270px) !important;
        min-height: 100vh !important;
        margin: 0 0 0 270px !important;
        padding: 0 !important;
    }
}


/* =========================================================
   FINAL NAVIGATION OVERRIDE
   ========================================================= */

.navigation a {
    background: transparent !important;
    color: #A7B1AE !important;
    border-left: 3px solid transparent !important;
}


    .navigation a:hover {
        background: rgba(76, 199, 170, 0.08) !important;
        color: #EAF2EF !important;
        border-left-color: rgba(76, 199, 170, 0.45) !important;
        padding-left: 17px !important;
    }


    .navigation a.active {
        background: rgba(76, 199, 170, 0.13) !important;
        color: #4CC7AA !important;
        border-left-color: #4CC7AA !important;
        padding-left: 17px !important;
        font-weight: 600 !important;
    }


        .navigation a.active:hover {
            background: rgba(76, 199, 170, 0.17) !important;
            color: #67D7BB !important;
            border-left-color: #67D7BB !important;
        }


/* =========================================================
   FINAL SIDEBAR COLORS
   ========================================================= */

.sidebar {
    background: #050708 !important;
    background-image: none !important;
    border-right-color: #17201E !important;
}


.profile {
    border-bottom-color: #17201E !important;
}


.sidebar-footer {
    border-top-color: #17201E !important;
    color: #5F706C !important;
}


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

@media (max-width: 700px) {

    .sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        background: #050708 !important;
    }


    .main-content {
        width: 100% !important;
        margin: 0 !important;
    }


    .hero-section {
        padding: 80px 22px 75px !important;
    }
}

/* =========================================================
   CSS CYBER BACKGROUND
   ========================================================= */

.site-layout {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    overflow: hidden;
}

    .site-layout::before,
    .site-layout::after {
        content: "";
        position: fixed;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        filter: blur(70px);
        animation: portfolioGlowMove 14s ease-in-out infinite alternate;
    }

    .site-layout::before {
        top: -220px;
        left: 12%;
        background: radial-gradient(circle, rgba(76, 199, 170, 0.28) 0%, rgba(76, 199, 170, 0.12) 32%, transparent 70%);
    }

    .site-layout::after {
        right: -220px;
        bottom: -220px;
        background: radial-gradient(circle, rgba(38, 185, 150, 0.24) 0%, rgba(38, 185, 150, 0.10) 35%, transparent 70%);
        animation-delay: -7s;
    }

@keyframes portfolioGlowMove {
    0% {
        transform: translate3d(-30px, -10px, 0) scale(0.92);
    }

    50% {
        transform: translate3d(55px, 45px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(-5px, 100px, 0) scale(1);
    }
}

.sidebar {
    z-index: 100 !important;
}

.main-content {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

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



.about-page {
    width: 100%;
    min-height: 100vh;
    background: rgba(5, 7, 8, 0.88);
    color: #E8EEEC;
}


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

.about-hero {
    max-width: 1050px;
    margin: 0 auto;
    padding: 120px 50px 95px;
    text-align: center;
}

.about-hero-label {
    margin-bottom: 25px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.35), 0 0 20px rgba(76, 199, 170, 0.10);
    animation: aboutLabelFloat 4s ease-in-out infinite;
}

@keyframes aboutLabelFloat {

    0%, 100% {
        transform: translateX(-3px);
        opacity: 0.80;
    }

    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}


.about-hero h1 {
    max-width: 900px;
    margin: 0 auto;
    color: #F3F7F5;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-shadow: 0 0 15px rgba(232, 238, 236, 0.06);
}


    .about-hero h1 span {
        display: block;
        margin-top: 8px;
        color: #42C9A7;
        text-shadow: 0 0 12px rgba(66, 201, 167, 0.38), 0 0 30px rgba(66, 201, 167, 0.12);
        animation: aboutHeroGlow 3.5s ease-in-out infinite;
    }

@keyframes aboutHeroGlow {

    0%, 100% {
        text-shadow: 0 0 10px rgba(66, 201, 167, 0.25), 0 0 25px rgba(66, 201, 167, 0.08);
    }

    50% {
        text-shadow: 0 0 18px rgba(66, 201, 167, 0.55), 0 0 35px rgba(66, 201, 167, 0.16);
    }
}


.about-hero-intro {
    max-width: 720px;
    margin: 32px auto 0;
    color: #AEBBB8;
    font-size: 16px;
    line-height: 1.8;
}


.about-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
    color: #71837E;
    font-family: "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
}


.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4CC7AA;
    box-shadow: 0 0 7px rgba(76, 199, 170, 0.8);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

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

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


/* =========================================================
   QUOTE OF THE DAY
   ========================================================= */

.about-quote-section {
    max-width: 980px;
    margin: 0 auto;
    padding: 75px 50px 90px;
    text-align: center;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
    border-bottom: 1px solid rgba(76, 199, 170, 0.12);
}


.quote-label {
    margin-bottom: 24px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(76, 199, 170, 0.28);
    animation: quoteLabelGlow 4s ease-in-out infinite;
}


@keyframes quoteLabelGlow {

    0%, 100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   QUOTE TERMINAL BOX
   ========================================================= */

.quote-box {
    position: relative;
    max-width: 820px;
    min-height: 255px;
    margin: 0 auto;
    border: 1px solid rgba(76, 199, 170, 0.30);
    border-radius: 17px;
    background: linear-gradient( 135deg, rgba(8, 21, 18, 0.88), rgba(5, 10, 9, 0.82) );
    box-shadow: 0 0 35px rgba(76, 199, 170, 0.035), inset 0 0 35px rgba(76, 199, 170, 0.025);
    overflow: hidden;
}


/* Terminal top bar */

.quote-top-line {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(76, 199, 170, 0.12);
    background: rgba(76, 199, 170, 0.025);
    text-align: left;
}


    .quote-top-line span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(76, 199, 170, 0.40);
    }


/* =========================================================
   QUOTE CONTENT
   ========================================================= */

.quote-content {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 45px 40px;
}


.quote-box blockquote {
    max-width: 680px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #E8EEEC;
    font-size: clamp(21px, 2.6vw, 29px);
    font-weight: 500;
    line-height: 1.55;
    transition: opacity 0.4s ease, transform 0.4s ease;
}


.quote-author {
    margin-top: 22px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}


/* =========================================================
   QUOTE CHANGE ANIMATION
   ========================================================= */

.quote-changing {
    animation: quoteChange 0.7s ease;
}


@keyframes quoteChange {

    0% {
        opacity: 0;
        transform: translateY(12px);
    }

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


/* =========================================================
   QUOTE INDICATORS
   ========================================================= */

.quote-indicators {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
}


.quote-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #263B35;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}


    .quote-indicator.active {
        background: #4CC7AA;
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.55);
        transform: scale(1.3);
    }


/* =========================================================
   COMMON ABOUT SECTIONS
   ========================================================= */

.about-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 105px 50px;
}


.about-section-heading {
    margin-bottom: 58px;
}


    .about-section-heading.centered {
        text-align: center;
    }


/* =========================================================
   MAIN SECTION TITLES
   ========================================================= */

.about-section-label {
    margin-bottom: 14px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(76, 199, 170, 0.35), 0 0 20px rgba(76, 199, 170, 0.08);
    animation: sectionLabelGlow 4s ease-in-out infinite;
}


@keyframes sectionLabelGlow {

    0%, 100% {
        opacity: 0.72;
        text-shadow: 0 0 6px rgba(76, 199, 170, 0.20);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(76, 199, 170, 0.45);
    }
}


/* Smaller text underneath section title */

.about-section-heading h2 {
    max-width: 900px;
    margin: 0;
    color: #AEB9B6;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}


.about-section-heading.centered h2 {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   LONG CYBER SCAN DIVIDER
   ========================================================= */

.heading-line {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 1px;
    margin-top: 25px;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.12), rgba(76, 199, 170, 0.30), rgba(76, 199, 170, 0.12), transparent );
    overflow: hidden;
}


.about-section-heading.centered .heading-line {
    margin-left: auto;
    margin-right: auto;
}


/* Moving scanner */

.heading-line::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -100px;
    width: 100px;
    height: 5px;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.18), #4CC7AA, rgba(76, 199, 170, 0.18), transparent );
    filter: blur(1px);
    box-shadow: 0 0 8px rgba(76, 199, 170, 0.55), 0 0 18px rgba(76, 199, 170, 0.20);
    animation: headingScan 4s linear infinite;
}


@keyframes headingScan {

    0% {
        left: -100px;
    }

    100% {
        left: calc(100% + 100px);
    }
}


/* Description underneath heading */

.about-section-heading > p {
    max-width: 620px;
    margin: 18px auto 0;
    color: #7F8E8A;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
}


/* =========================================================
   WHO I AM
   ========================================================= */

.about-story {
    max-width: 850px;
    margin: 0 auto;
}


    .about-story p {
        margin: 0 0 23px;
        color: #AEBBB8;
        font-size: 15px;
        line-height: 1.9;
    }


        .about-story p:last-child {
            margin-bottom: 0;
        }


/* =========================================================
   SECURITY FOCUS
   ========================================================= */

.about-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


.about-focus-card {
    min-height: 230px;
    padding: 27px 25px;
    border: 1px solid rgba(76, 199, 170, 0.25);
    border-radius: 18px;
    background: rgba(5, 14, 12, 0.72);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}


    .about-focus-card:hover {
        transform: translateY(-6px);
        border-color: rgba(76, 199, 170, 0.60);
        background: rgba(8, 20, 17, 0.88);
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25), 0 0 22px rgba(76, 199, 170, 0.06);
    }


.focus-number {
    margin-bottom: 24px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


.about-focus-card h3 {
    margin: 0 0 14px;
    color: #E9F1EE;
    font-size: 19px;
}


.about-focus-card p {
    margin: 0;
    color: #9BAAA6;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   EDUCATION
   ========================================================= */

.about-education-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


.about-education-card {
    position: relative;
    min-height: 290px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(76, 199, 170, 0.23);
    border-radius: 18px;
    background: rgba(5, 14, 12, 0.72);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}


    .about-education-card:hover {
        transform: translateY(-5px);
        border-color: rgba(76, 199, 170, 0.58);
        background: rgba(8, 20, 17, 0.88);
    }


.education-number {
    position: absolute;
    top: 24px;
    right: 27px;
    color: rgba(76, 199, 170, 0.18);
    font-family: "Courier New", monospace;
    font-size: 38px;
    font-weight: 700;
}


.education-tag {
    margin-bottom: 20px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}


.about-education-card h3 {
    max-width: 480px;
    margin: 0;
    color: #EDF3F1;
    font-size: 22px;
    line-height: 1.4;
}


.education-place {
    margin: 12px 0 22px;
    color: #4CC7AA;
    font-size: 14px;
    font-weight: 600;
}


.about-education-card p {
    margin: 0;
    color: #9BAAA6;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.about-experience-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    padding: 40px;
    border: 1px solid rgba(76, 199, 170, 0.23);
    border-radius: 18px;
    background: rgba(5, 14, 12, 0.72);
}


.experience-tag {
    margin-bottom: 18px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}


.experience-left h3 {
    margin: 0;
    color: #EDF3F1;
    font-size: 25px;
    line-height: 1.35;
}


.experience-company {
    margin-top: 15px;
    color: #4CC7AA;
    font-size: 15px;
    font-weight: 600;
}


.experience-duration {
    margin-top: 7px;
    color: #71807C;
    font-size: 13px;
}


.experience-right {
    padding-left: 30px;
    border-left: 1px solid rgba(76, 199, 170, 0.14);
}


    .experience-right p {
        margin: 0 0 20px;
        color: #A0AFAB;
        font-size: 14px;
        line-height: 1.85;
    }


        .experience-right p:last-child {
            margin-bottom: 0;
        }


/* =========================================================
   TOOLKIT
   ========================================================= */

.about-tools-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}


.about-tool-card {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 1px solid rgba(76, 199, 170, 0.20);
    border-radius: 12px;
    background: rgba(5, 14, 12, 0.68);
    color: #DCE7E3;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}


    .about-tool-card:hover {
        transform: translateY(-4px);
        border-color: rgba(76, 199, 170, 0.55);
        color: #4CC7AA;
        box-shadow: 0 0 18px rgba(76, 199, 170, 0.05);
    }


/* =========================================================
   LEARNING & PRACTICE
   ========================================================= */

.about-practice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


.about-practice-card {
    min-height: 235px;
    display: block;
    padding: 28px 25px;
    border: 1px solid rgba(76, 199, 170, 0.22);
    border-radius: 17px;
    background: rgba(5, 14, 12, 0.70);
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}


    .about-practice-card:hover {
        transform: translateY(-6px);
        border-color: rgba(76, 199, 170, 0.58);
        background: rgba(8, 20, 17, 0.88);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 0 20px rgba(76, 199, 170, 0.05);
    }


.practice-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: 1px solid rgba(76, 199, 170, 0.35);
    border-radius: 12px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}


.about-practice-card:hover .practice-icon {
    transform: rotate(-3deg);
    border-color: rgba(76, 199, 170, 0.70);
    box-shadow: 0 0 18px rgba(76, 199, 170, 0.10);
}


.about-practice-card h3 {
    margin: 0 0 12px;
    color: #E9F1EE;
    font-size: 18px;
}


.about-practice-card p {
    margin: 0;
    color: #94A39F;
    font-size: 13px;
    line-height: 1.7;
}


.practice-link {
    display: block;
    margin-top: 20px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, color 0.2s ease;
}


.about-practice-card:hover .practice-link {
    color: #70E2C9;
    transform: translateX(3px);
}


/* =========================================================
   FIND ME ONLINE
   ========================================================= */

.online-section {
    padding-bottom: 80px;
}


.online-subheading {
    max-width: 900px;
    margin: 0 auto 22px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
}


.security-platform-heading {
    margin-top: 65px;
}


.about-online-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}


.security-online-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
}


.about-online-card {
    min-height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border: 1px solid rgba(76, 199, 170, 0.22);
    border-radius: 16px;
    background: rgba(5, 14, 12, 0.72);
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}


    .about-online-card:hover {
        transform: translateY(-6px);
        border-color: rgba(76, 199, 170, 0.60);
        background: rgba(8, 20, 17, 0.88);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 0 20px rgba(76, 199, 170, 0.05);
    }


.online-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(76, 199, 170, 0.28);
    border-radius: 13px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 17px;
    font-weight: 700;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}


.about-online-card:hover .online-icon {
    border-color: rgba(76, 199, 170, 0.60);
    background: rgba(76, 199, 170, 0.06);
    box-shadow: 0 0 18px rgba(76, 199, 170, 0.08);
}


.about-online-card h3 {
    margin: 0 0 7px;
    color: #E9F1EE;
    font-size: 17px;
}


.about-online-card p {
    margin: 0;
    color: #7F8F8A;
    font-size: 12px;
}


/* =========================================================
   LINKEDIN COMING SOON
   ========================================================= */

.linkedin-coming-soon {
    max-width: 500px;
    margin: 45px auto 0;
    padding: 25px 30px;
    text-align: center;
    border: 1px dashed rgba(76, 199, 170, 0.22);
    border-radius: 14px;
    background: rgba(5, 14, 12, 0.40);
}


.linkedin-coming-label {
    margin-bottom: 10px;
    color: #4CC7AA;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}


.linkedin-coming-soon h3 {
    margin: 0 0 8px;
    color: #DDE7E3;
    font-size: 17px;
}


.linkedin-coming-soon p {
    max-width: 380px;
    margin: 0 auto;
    color: #74827E;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.about-final-cta {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 50px 120px;
    text-align: center;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
}


    .about-final-cta h2 {
        margin: 0;
        color: #F0F5F3;
        font-size: clamp(30px, 3.5vw, 44px);
        line-height: 1.2;
    }


    .about-final-cta p {
        max-width: 600px;
        margin: 18px auto 30px;
        color: #8F9E9A;
        font-size: 14px;
        line-height: 1.8;
    }


.about-cta-button {
    display: inline-block;
    padding: 13px 25px;
    border: 1px solid #188E75;
    border-radius: 7px;
    background: #188E75;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


    .about-cta-button:hover {
        background: #22AA8C;
        border-color: #22AA8C;
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(34, 170, 140, 0.15);
    }


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

@media (max-width: 1000px) {

    .about-focus-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-online-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .security-online-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 800px) {

    .about-education-grid {
        grid-template-columns: 1fr;
    }

    .about-experience-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .experience-right {
        padding-left: 0;
        padding-top: 25px;
        border-left: none;
        border-top: 1px solid rgba(76, 199, 170, 0.14);
    }

    .security-online-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .about-hero {
        padding: 75px 22px 70px;
    }

        .about-hero h1 {
            font-size: 38px;
        }

    .about-hero-intro {
        font-size: 14px;
    }

    .about-quote-section {
        padding: 60px 22px;
    }

    .quote-content {
        padding: 30px 22px 35px;
    }

    .quote-box blockquote {
        min-height: 100px;
        font-size: 20px;
    }

    .about-section {
        padding: 70px 22px;
    }

    .about-section-label {
        font-size: 16px;
        letter-spacing: 4px;
    }

    .about-section-heading h2 {
        font-size: 21px;
    }

    .heading-line {
        max-width: 100%;
    }

    .about-focus-grid,
    .about-practice-grid,
    .about-online-grid {
        grid-template-columns: 1fr;
    }

    .about-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-experience-card {
        padding: 27px;
    }

    .about-final-cta {
        padding: 65px 22px 90px;
    }
}


@media (max-width: 450px) {

    .about-tools-grid {
        grid-template-columns: 1fr;
    }

    .about-hero h1 {
        font-size: 33px;
    }

    .about-section-label {
        font-size: 15px;
        letter-spacing: 4px;
    }

    .about-section-heading h2 {
        font-size: 20px;
    }

    .quote-box blockquote {
        font-size: 19px;
    }

    .quote-author {
        font-size: 11px;
    }
}

/* =========================================================
   SKILLS PAGE
   ========================================================= */

.skills-page {
    width: 100%;
    min-height: 100vh;
    background: transparent;
    color: #E8EEEC;
}


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

.skills-hero {
    width: 100%;
    max-width: 1180px;
    min-height: 430px;
    margin: 0 auto;
    padding: 125px 50px 95px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}


.skills-hero-label {
    margin-bottom: 24px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.35), 0 0 18px rgba(76, 199, 170, 0.12);
    animation: skillsLabelMove 4s ease-in-out infinite;
}


@keyframes skillsLabelMove {

    0%, 100% {
        transform: translateX(0);
        opacity: 0.85;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}


.skills-hero h1 {
    max-width: 850px;
    margin: 0;
    color: #F2F5F4;
    font-size: clamp(42px, 5.2vw, 72px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -1.5px;
    animation: skillsHeroEntrance 0.9s ease-out both;
}


    .skills-hero h1 span {
        display: block;
        margin-top: 8px;
        color: #42C9A7;
        text-shadow: 0 0 12px rgba(66, 201, 167, 0.28), 0 0 28px rgba(66, 201, 167, 0.10);
        animation: skillsHeroGlow 3.8s ease-in-out infinite;
    }


@keyframes skillsHeroEntrance {

    from {
        opacity: 0;
        transform: translateY(18px);
        letter-spacing: 1px;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: -1.5px;
    }
}


@keyframes skillsHeroGlow {

    0%, 100% {
        text-shadow: 0 0 10px rgba(66, 201, 167, 0.20), 0 0 22px rgba(66, 201, 167, 0.08);
    }

    50% {
        text-shadow: 0 0 17px rgba(66, 201, 167, 0.48), 0 0 34px rgba(66, 201, 167, 0.18);
    }
}


.skills-hero > p {
    max-width: 700px;
    margin: 28px 0 0;
    color: #899794;
    font-size: 16px;
    line-height: 1.85;
    animation: skillsHeroTextEntrance 1s ease-out 0.15s both;
}


@keyframes skillsHeroTextEntrance {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


.skills-status {
    width: fit-content;
    margin-top: 30px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #19352F;
    border-radius: 4px;
    background: rgba(7, 17, 15, 0.75);
    color: #7F918C;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    animation: skillsStatusEntrance 1s ease-out 0.3s both;
}


.skills-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42C9A7;
    box-shadow: 0 0 7px rgba(66, 201, 167, 0.8), 0 0 14px rgba(66, 201, 167, 0.25);
    animation: skillsStatusPulse 2s ease-in-out infinite;
}


@keyframes skillsStatusPulse {

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

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


@keyframes skillsStatusEntrance {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


/* =========================================================
   GENERAL SKILLS SECTIONS
   ========================================================= */

.skills-section {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 95px 50px;
    border-top: 1px solid #17201E;
}


.skills-section-heading {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 50px;
}


.skills-section-label {
    color: #46C5A5;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(14px, 1.5vw, 17px);
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}


.skills-section-heading h2 {
    max-width: 760px;
    margin: 13px 0 0;
    color: #F2F5F4;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.5px;
}


.skills-heading-line {
    width: 100%;
    max-width: 650px;
    height: 1px;
    margin-top: 25px;
    position: relative;
    overflow: hidden;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.12), rgba(76, 199, 170, 0.30), rgba(76, 199, 170, 0.12), transparent );
}


    .skills-heading-line::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -100px;
        width: 100px;
        height: 5px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.18), #4CC7AA, rgba(76, 199, 170, 0.18), transparent );
        filter: blur(1px);
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.55), 0 0 18px rgba(76, 199, 170, 0.20);
        animation: skillsHeadingScan 4s linear infinite;
    }


@keyframes skillsHeadingScan {

    from {
        left: -100px;
    }

    to {
        left: 100%;
    }
}


/* =========================================================
   CORE CYBERSECURITY
   ========================================================= */

.core-skill-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.core-skill-card {
    min-height: 255px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    background: rgba(9, 15, 15, 0.90);
    border: 1px solid #172B27;
    border-left: 2px solid #304B46;
    border-radius: 7px;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


    .core-skill-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -80px;
        width: 70px;
        height: 1px;
        background: #4CC7AA;
        box-shadow: 0 0 12px rgba(76, 199, 170, 0.65);
        opacity: 0;
    }


    .core-skill-card:hover {
        transform: translateY(-4px);
        background: rgba(11, 23, 21, 0.96);
        border-color: #285C50;
        border-left-color: #4CC7AA;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.20);
    }


        .core-skill-card:hover::after {
            opacity: 1;
            animation: cardScan 1.4s linear infinite;
        }


@keyframes cardScan {

    from {
        left: -80px;
    }

    to {
        left: 100%;
    }
}


.core-skill-number {
    margin-bottom: 34px;
    color: #38BFA0;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    letter-spacing: 1px;
}


.core-skill-card h3 {
    margin: 0 0 13px;
    color: #F2F5F4;
    font-size: 20px;
    font-weight: 600;
}


.core-skill-card p {
    margin: 0;
    color: #899794;
    font-size: 14px;
    line-height: 1.75;
}


.skill-tags {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


    .skill-tags span {
        padding: 5px 8px;
        border: 1px solid #1B3731;
        border-radius: 3px;
        background: rgba(9, 24, 21, 0.65);
        color: #6FA99A;
        font-family: "Courier New", Courier, monospace;
        font-size: 10px;
    }


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

.freelance-skill-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}


.freelance-skill-card {
    min-height: 190px;
    padding: 25px;
    background: rgba(9, 15, 15, 0.90);
    border: 1px solid #172B27;
    border-radius: 7px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}


    .freelance-skill-card:hover {
        transform: translateY(-3px);
        background: rgba(12, 24, 22, 0.96);
        border-color: #286B5C;
    }


.freelance-number {
    margin-bottom: 28px;
    color: #38BFA0;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
}


.freelance-skill-card h3 {
    margin: 0 0 11px;
    color: #F2F5F4;
    font-size: 17px;
    line-height: 1.3;
}


.freelance-skill-card p {
    margin: 0;
    color: #899794;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   BUG HUNTING
   ========================================================= */

.bug-hunting-section {
    padding-bottom: 110px;
}


.bug-hunting-intro {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px;
    background: rgba(7, 14, 13, 0.82);
    border: 1px solid #172B27;
    border-left: 2px solid #38BFA0;
    border-radius: 7px;
}


    .bug-hunting-intro h3 {
        margin: 0 0 18px;
        color: #F2F5F4;
        font-size: 22px;
        font-weight: 600;
    }


    .bug-hunting-intro p {
        max-width: 950px;
        margin: 0 0 15px;
        color: #899794;
        font-size: 14px;
        line-height: 1.85;
    }


        .bug-hunting-intro p:last-child {
            margin-bottom: 0;
        }


/* =========================================================
   BUG HUNTING METHODOLOGY
   ========================================================= */

.bug-hunting-methodology {
    width: 100%;
    max-width: 1080px;
    margin: 22px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}


.methodology-step {
    min-height: 85px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(8, 16, 15, 0.85);
    border: 1px solid #172B27;
    border-radius: 5px;
    transition: border-color 0.25s ease, background 0.25s ease;
}


    .methodology-step:hover {
        background: rgba(12, 25, 22, 0.95);
        border-color: #286B5C;
    }


    .methodology-step span {
        color: #38BFA0;
        font-family: "Courier New", Courier, monospace;
        font-size: 10px;
    }


    .methodology-step strong {
        color: #C9D5D1;
        font-size: 13px;
        font-weight: 500;
    }


/* =========================================================
   BUG CHECKLIST
   ========================================================= */

.bug-checklist {
    width: 100%;
    max-width: 1080px;
    margin: 55px auto 0;
}


.bug-checklist-heading {
    margin-bottom: 20px;
}


.checklist-label {
    color: #46C5A5;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}


.bug-checklist-heading p {
    max-width: 700px;
    margin: 9px 0 0;
    color: #768681;
    font-size: 13px;
    line-height: 1.7;
}


.checklist-group {
    margin-bottom: 8px;
    border: 1px solid #172B27;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(7, 14, 13, 0.80);
}


.checklist-toggle {
    width: 100%;
    min-height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    color: #DCE6E3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}


    .checklist-toggle:hover {
        background: rgba(16, 34, 30, 0.80);
        color: #4CC7AA;
    }


.checklist-number {
    display: inline-block;
    width: 32px;
    color: #38BFA0;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
}


.checklist-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #245247;
    border-radius: 3px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    transition: background 0.25s ease, border-color 0.25s ease;
}


.checklist-toggle:hover .checklist-icon {
    background: rgba(52, 150, 126, 0.10);
    border-color: #4CC7AA;
}


.checklist-content {
    padding: 8px 20px 18px 52px;
    border-top: 1px solid #172B27;
    background: rgba(5, 11, 10, 0.55);
    animation: checklistOpen 0.25s ease-out both;
}


@keyframes checklistOpen {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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


.checklist-item {
    min-height: 42px;
    padding: 9px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(23, 43, 39, 0.55);
}


    .checklist-item:last-child {
        border-bottom: 0;
    }


    .checklist-item input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin-top: 3px;
        flex: 0 0 auto;
        accent-color: #38BFA0;
        cursor: pointer;
    }


    .checklist-item span {
        color: #899794;
        font-size: 13px;
        line-height: 1.7;
        transition: color 0.2s ease;
    }


    .checklist-item input:checked + span {
        color: #536E67;
        text-decoration: line-through;
    }


/* =========================================================
   SECURITY TOOLS
   ========================================================= */

.tools-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}


.tool-category {
    padding: 27px;
    background: rgba(9, 15, 15, 0.90);
    border: 1px solid #172B27;
    border-radius: 7px;
    transition: border-color 0.25s ease;
}


    .tool-category:hover {
        border-color: #286B5C;
    }


    .tool-category h3 {
        margin: 0 0 19px;
        color: #F2F5F4;
        font-size: 17px;
        font-weight: 600;
    }


.tool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


    .tool-list span {
        padding: 8px 11px;
        border: 1px solid #1B3731;
        border-radius: 3px;
        background: rgba(8, 21, 18, 0.75);
        color: #7FAEA1;
        font-family: "Courier New", Courier, monospace;
        font-size: 11px;
    }


/* =========================================================
   DEVELOPMENT
   ========================================================= */

.development-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}


.development-card {
    min-height: 170px;
    padding: 26px;
    background: rgba(9, 15, 15, 0.90);
    border: 1px solid #172B27;
    border-radius: 7px;
}


    .development-card h3 {
        margin: 0 0 20px;
        color: #F2F5F4;
        font-size: 17px;
    }


.development-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


    .development-items span {
        color: #899794;
        font-size: 13px;
    }


    .development-items small {
        margin-left: 5px;
        color: #4B7269;
        font-family: "Courier New", Courier, monospace;
        font-size: 9px;
        text-transform: uppercase;
    }


/* =========================================================
   CURRENT LEARNING
   ========================================================= */

.learning-grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}


.learning-card {
    min-height: 125px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(8, 16, 15, 0.85);
    border: 1px solid #172B27;
    border-radius: 6px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}


    .learning-card:hover {
        transform: translateY(-3px);
        border-color: #286B5C;
    }


.learning-status {
    width: fit-content;
    color: #38BFA0;
    font-family: "Courier New", Courier, monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
}


.learning-card h3 {
    margin: 20px 0 0;
    color: #D6E0DD;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.skills-final-cta {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 100px 50px 120px;
    border-top: 1px solid #17201E;
    text-align: center;
}


    .skills-final-cta .skills-section-label {
        margin-bottom: 18px;
    }


    .skills-final-cta h2 {
        max-width: 780px;
        margin: 0 auto;
        color: #F2F5F4;
        font-size: clamp(30px, 3.2vw, 44px);
        font-weight: 500;
        line-height: 1.15;
    }


    .skills-final-cta p {
        max-width: 650px;
        margin: 18px auto 0;
        color: #899794;
        font-size: 15px;
        line-height: 1.8;
    }


.skills-cta-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}


.skills-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 145px;
    padding: 12px 20px;
    border: 1px solid #38BFA0;
    border-radius: 4px;
    background: #188E75;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}


    .skills-button:hover {
        background: #22AA8C;
        border-color: #22AA8C;
        color: #FFFFFF;
        transform: translateY(-2px);
    }


.skills-button-secondary {
    background: transparent;
    border-color: #285C50;
    color: #9FBAB3;
}


    .skills-button-secondary:hover {
        background: rgba(24, 142, 117, 0.12);
        border-color: #38BFA0;
        color: #DDEAE6;
    }


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

@media (max-width: 1100px) {

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

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


@media (max-width: 900px) {

    .skills-hero {
        padding: 100px 35px 80px;
    }

    .skills-section {
        padding: 80px 35px;
    }

    .skills-final-cta {
        padding: 85px 35px 100px;
    }

    .core-skill-grid {
        grid-template-columns: 1fr;
    }

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


@media (max-width: 700px) {

    .skills-hero {
        min-height: auto;
        padding: 80px 25px 70px;
    }

    .skills-section {
        padding: 70px 25px;
    }

    .skills-final-cta {
        padding: 75px 25px 90px;
    }

    .skills-hero h1 {
        font-size: clamp(38px, 10vw, 55px);
    }

    .freelance-skill-grid,
    .tools-grid,
    .development-grid,
    .learning-grid {
        grid-template-columns: 1fr;
    }

    .bug-hunting-methodology {
        grid-template-columns: 1fr 1fr;
    }

    .checklist-content {
        padding-left: 20px;
    }
}


@media (max-width: 500px) {

    .skills-hero {
        padding: 65px 18px 60px;
    }

    .skills-section {
        padding: 60px 18px;
    }

    .skills-final-cta {
        padding: 65px 18px 80px;
    }

    .skills-hero-label {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .skills-section-label {
        letter-spacing: 2px;
    }

    .core-skill-card,
    .freelance-skill-card,
    .tool-category,
    .development-card {
        padding: 23px;
    }

    .bug-hunting-intro {
        padding: 24px;
    }

    .bug-hunting-methodology {
        grid-template-columns: 1fr;
    }

    .checklist-toggle {
        min-height: 58px;
        padding: 0 14px;
        font-size: 13px;
    }

    .checklist-number {
        width: 27px;
    }

    .checklist-content {
        padding: 8px 14px 16px;
    }

    .checklist-item {
        gap: 9px;
    }

        .checklist-item span {
            font-size: 12px;
        }

    .skills-cta-buttons {
        flex-direction: column;
    }

    .skills-button {
        width: 100%;
    }
}

/* =========================================================
   PAGE BACKGROUND VISIBILITY
   ========================================================= */

.home-page,
.about-page {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

    .home-page > *,
    .about-page > * {
        position: relative;
        z-index: 2;
    }

@media (prefers-reduced-motion: reduce) {
    .site-layout::before,
    .site-layout::after {
        animation: none;
    }
}


/* =========================================================
   FINAL SKILLS SECTION HEADINGS
   BIG + CLEAN + SMOOTH + EYE CATCHING
   ========================================================= */

.skills-section-heading {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 58px;
}


    /* =========================================================
   SKILLS SECTION HEADINGS
   MEDIUM SIZE + ONE-TIME GREEN LIGHT SWEEP
   ========================================================= */

    .skills-section-heading .skills-section-label {
        display: block;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #42C9A7;
        font-family: "Courier New", Courier, monospace;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: left;
        opacity: 0.35;
        transform: none;
        filter: none;
        text-shadow: 0 0 8px rgba(66, 201, 167, 0.10), 0 0 18px rgba(66, 201, 167, 0.04);
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }


    /* =========================================================
   ONE-TIME GREEN LIGHT SWEEP
   ========================================================= */

    .skills-section-heading.skills-heading-visible
    .skills-section-label {
        animation: skillsHeadingFocus 0.85s ease-out forwards;
    }


        .skills-section-heading.skills-heading-visible
        .skills-section-label::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -55px;
            width: 55px;
            pointer-events: none;
            background: linear-gradient( 90deg, transparent 0%, rgba(57, 255, 136, 0.03) 10%, rgba(57, 255, 136, 0.22) 32%, #39FF88 50%, rgba(57, 255, 136, 0.22) 68%, rgba(57, 255, 136, 0.03) 90%, transparent 100% );
            filter: blur(1px);
            box-shadow: 0 0 8px rgba(57, 255, 136, 0.55), 0 0 18px rgba(57, 255, 136, 0.22), 0 0 32px rgba(57, 255, 136, 0.08);
            opacity: 0;
            z-index: 2;
            animation: skillsHeadingLightSweep 1.05s cubic-bezier(0.4, 0, 0.2, 1) 0.15s 1 forwards;
        }


/* =========================================================
   HEADING FOCUS
   DIM -> CLEAR -> SETTLE
   ========================================================= */

@keyframes skillsHeadingFocus {

    0% {
        opacity: 0.35;
        color: #42C9A7;
        text-shadow: 0 0 8px rgba(66, 201, 167, 0.10), 0 0 18px rgba(66, 201, 167, 0.04);
    }

    55% {
        opacity: 1;
        color: #63E0C0;
        text-shadow: 0 0 14px rgba(66, 201, 167, 0.30), 0 0 28px rgba(66, 201, 167, 0.10);
    }

    100% {
        opacity: 1;
        color: #42C9A7;
        text-shadow: 0 0 8px rgba(66, 201, 167, 0.12), 0 0 18px rgba(66, 201, 167, 0.04);
    }
}


/* =========================================================
   GREEN LIGHT
   LEFT -> RIGHT
   EXACT HEADING WIDTH
   ========================================================= */

@keyframes skillsHeadingLightSweep {

    0% {
        left: -55px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 55px);
        opacity: 0;
    }
}


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

.skills-section-heading h2 {
    max-width: 760px;
    margin: 20px 0 0;
    color: #F2F5F4;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.3px;
}


/* =========================================================
   FULL WIDTH LINE
   ========================================================= */

.skills-heading-line {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 2px;
    margin-top: 30px;
    overflow: hidden;
    background: linear-gradient( 90deg, transparent 0%, rgba(76, 199, 170, 0.10) 8%, rgba(76, 199, 170, 0.30) 50%, rgba(76, 199, 170, 0.10) 92%, transparent 100% );
    box-shadow: 0 0 8px rgba(76, 199, 170, 0.10);
}


    /* Disable the old continuously moving line scanner */
    .skills-heading-line::after {
        animation: none !important;
        left: -100px;
        opacity: 0;
    }


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

@media (max-width: 700px) {

    .skills-section-heading .skills-section-label {
        width: max-content;
        max-width: 100%;
        font-size: 26px;
        letter-spacing: 0.5px;
        white-space: normal;
    }

    .skills-section-heading h2 {
        font-size: 19px;
    }
}


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

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

    .skills-section-heading .skills-section-label {
        opacity: 1;
    }

        .skills-section-heading .skills-section-label::after {
            display: none;
        }
}

/* =========================================================
   PROJECTS PAGE
   ========================================================= */

.projects-page {
    width: 100%;
}

.projects-hero {
    padding: 90px 7% 70px;
}

.projects-hero-inner {
    max-width: 900px;
}

.projects-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.projects-hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
}

.projects-highlight {
    display: block;
}

.projects-hero-description {
    max-width: 760px;
    margin-top: 24px;
    line-height: 1.8;
    font-size: 1.05rem;
    opacity: 0.8;
}

/* =========================================================
   PROJECTS PAGE
   CYBERSECURITY PORTFOLIO DESIGN
   ========================================================= */

.projects-page,
.project-details-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 75% 8%, rgba(48, 150, 125, 0.08), transparent 28%), radial-gradient(circle at 15% 35%, rgba(31, 104, 91, 0.05), transparent 25%), #050908;
}


    /* =========================================================
   CYBER GRID BACKGROUND
   ========================================================= */

    .projects-page::before,
    .project-details-page::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.30;
        background-image: linear-gradient(rgba(70, 197, 165, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 197, 165, 0.035) 1px, transparent 1px);
        background-size: 55px 55px;
        mask-image: linear-gradient(to bottom, black, transparent 82%);
        -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
    }


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

.projects-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    padding: 100px 60px 85px;
    border-bottom: 1px solid #14231F;
    overflow: hidden;
}


    .projects-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.10), #4CC7AA, rgba(76, 199, 170, 0.10), transparent );
        box-shadow: 0 0 14px rgba(76, 199, 170, 0.25);
        animation: projectHeroScan 4.5s linear infinite;
    }


@keyframes projectHeroScan {

    0% {
        opacity: 0.25;
        transform: scaleX(0.2);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: 0.25;
        transform: scaleX(0.2);
        transform-origin: right;
    }
}


.projects-hero-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    animation: projectHeroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes projectHeroEntrance {

    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(4px);
    }

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


.projects-eyebrow {
    display: inline-block;
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}


.projects-hero h1 {
    max-width: 900px;
    margin: 18px 0 0;
    color: #EAF2EF;
    font-size: clamp(42px, 5.5vw, 76px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -2px;
    text-shadow: 0 0 18px rgba(66, 201, 167, 0.08), 0 0 40px rgba(66, 201, 167, 0.03);
}


.projects-highlight {
    display: block;
    margin-top: 8px;
    color: #42C9A7;
    text-shadow: 0 0 12px rgba(66, 201, 167, 0.22), 0 0 30px rgba(66, 201, 167, 0.08);
    animation: projectTitleGlow 4s ease-in-out infinite;
}


@keyframes projectTitleGlow {

    0%, 100% {
        text-shadow: 0 0 12px rgba(66, 201, 167, 0.18), 0 0 30px rgba(66, 201, 167, 0.05);
    }

    50% {
        text-shadow: 0 0 18px rgba(66, 201, 167, 0.38), 0 0 42px rgba(66, 201, 167, 0.12);
    }
}


.projects-hero-description {
    max-width: 720px;
    margin: 28px 0 0;
    color: #899794;
    font-size: 15px;
    line-height: 1.85;
    animation: projectDescriptionEntrance 1s ease-out 0.15s both;
}


@keyframes projectDescriptionEntrance {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


/* =========================================================
   PROJECT SECTION
   ========================================================= */

.projects-section {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 50px 120px;
}


.projects-section-heading {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto 55px;
    animation: projectSectionEntrance 0.9s ease-out 0.15s both;
}


@keyframes projectSectionEntrance {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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


.projects-section-heading h2 {
    max-width: 800px;
    margin: 13px 0 0;
    color: #E5ECE9;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.7px;
}


.projects-section-heading p {
    max-width: 720px;
    margin: 18px 0 0;
    color: #7F918C;
    font-size: 14px;
    line-height: 1.8;
}


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

.projects-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


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

.project-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(12, 24, 21, 0.96), rgba(6, 12, 11, 0.98) );
    border: 1px solid #19352F;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.015);
    opacity: 0;
    transform: translateY(30px);
    animation: projectCardEntrance 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}


    .project-card:nth-child(1) {
        animation-delay: 0.20s;
    }


    .project-card:nth-child(2) {
        animation-delay: 0.35s;
    }


    .project-card:nth-child(3) {
        animation-delay: 0.50s;
    }


    .project-card:nth-child(4) {
        animation-delay: 0.65s;
    }


    .project-card:nth-child(5) {
        animation-delay: 0.80s;
    }


    .project-card:nth-child(6) {
        animation-delay: 0.95s;
    }


@keyframes projectCardEntrance {

    from {
        opacity: 0;
        transform: translateY(35px) scale(0.985);
    }

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


.project-card:hover {
    transform: translateY(-8px);
    border-color: #2B7665;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.30), 0 0 30px rgba(66, 201, 167, 0.07);
}


/* =========================================================
   PROJECT CARD SCAN LINE
   ========================================================= */

.project-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 2px;
    z-index: 5;
    background: linear-gradient( 90deg, transparent, rgba(66, 201, 167, 0.30), #42C9A7, rgba(66, 201, 167, 0.30), transparent );
    box-shadow: 0 0 10px rgba(66, 201, 167, 0.70), 0 0 25px rgba(66, 201, 167, 0.18);
    opacity: 0;
}


.project-card:hover::before {
    opacity: 1;
    animation: projectCardScan 1.5s linear infinite;
}


@keyframes projectCardScan {

    from {
        left: -35%;
    }

    to {
        left: 100%;
    }
}


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

.project-image-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #07100E;
    border-bottom: 1px solid #19352F;
}


    .project-image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( to bottom, transparent 55%, rgba(3, 9, 8, 0.48) 100% );
    }


.project-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}


.project-card:hover .project-image {
    transform: scale(1.055);
    filter: brightness(1.08) saturate(1.08);
}


/* =========================================================
   PROJECT IMAGE CORNER MARKERS
   ========================================================= */

.project-image-wrapper::before {
    content: "[ PROJECT PREVIEW ]";
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 3;
    padding: 5px 8px;
    color: #78A99E;
    background: rgba(4, 11, 9, 0.78);
    border: 1px solid rgba(66, 201, 167, 0.22);
    font-family: "Courier New", Courier, monospace;
    font-size: 9px;
    letter-spacing: 1px;
}


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

.project-card-content {
    position: relative;
    padding: 27px 28px 29px;
}


.project-category {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid #21483F;
    border-radius: 3px;
    background: rgba(10, 29, 25, 0.80);
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.project-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-top: 17px;
}


    .project-title-row h3 {
        margin: 0;
        color: #E4ECE9;
        font-size: 23px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: -0.3px;
    }


.project-featured {
    flex-shrink: 0;
    padding: 5px 8px;
    border: 1px solid #276856;
    border-radius: 3px;
    color: #42C9A7;
    background: rgba(31, 104, 88, 0.12);
    font-family: "Courier New", Courier, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(66, 201, 167, 0.05);
}


.project-short-description {
    margin: 15px 0 0;
    color: #879792;
    font-size: 13px;
    line-height: 1.75;
}


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

.project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}


.project-tech {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid #193C34;
    border-radius: 3px;
    background: rgba(8, 23, 20, 0.80);
    color: #7EA59C;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    line-height: 1.2;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}


.project-card:hover .project-tech {
    border-color: #255B4D;
}


.project-tech:hover {
    color: #42C9A7;
    border-color: #42C9A7;
    background: rgba(66, 201, 167, 0.07);
    box-shadow: 0 0 12px rgba(66, 201, 167, 0.07);
}


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

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px;
}


.project-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 15px;
    overflow: hidden;
    border: 1px solid #23483F;
    border-radius: 4px;
    background: rgba(8, 18, 16, 0.85);
    color: #9BAAA6;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}


    .project-button::after {
        content: "";
        position: absolute;
        left: -100%;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #42C9A7;
        box-shadow: 0 0 8px rgba(66, 201, 167, 0.75);
        transition: left 0.3s ease;
    }


    .project-button:hover {
        color: #42C9A7;
        border-color: #42C9A7;
        background: rgba(18, 48, 41, 0.75);
        transform: translateY(-2px);
        box-shadow: 0 7px 20px rgba(0, 0, 0, 0.20);
    }


        .project-button:hover::after {
            left: 0;
        }


.project-button-primary {
    border-color: #2D806C;
    background: #126B59;
    color: #EFFFFB;
}


    .project-button-primary:hover {
        border-color: #42C9A7;
        background: #17836D;
        color: #FFFFFF;
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.25), 0 0 20px rgba(66, 201, 167, 0.08);
    }


/* =========================================================
   EMPTY PROJECT STATE
   ========================================================= */

.projects-empty {
    padding: 70px 30px;
    text-align: center;
    border: 1px solid #19352F;
    border-radius: 7px;
    background: rgba(7, 16, 14, 0.70);
}


    .projects-empty p {
        margin: 0;
        color: #7F918C;
        font-family: "Courier New", Courier, monospace;
        font-size: 13px;
    }


/* =========================================================
   PROJECT DETAILS HERO
   ========================================================= */

.project-details-hero {
    position: relative;
    padding: 105px 60px 75px;
    border-bottom: 1px solid #14231F;
    overflow: hidden;
}


    .project-details-hero::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #42C9A7, transparent );
        opacity: 0.55;
        animation: detailHeroLine 3.5s ease-in-out infinite;
    }


@keyframes detailHeroLine {

    0%, 100% {
        opacity: 0.20;
        transform: scaleX(0.25);
    }

    50% {
        opacity: 0.80;
        transform: scaleX(1);
    }
}


.project-details-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    animation: detailHeroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes detailHeroEntrance {

    from {
        opacity: 0;
        transform: translateY(32px);
        filter: blur(4px);
    }

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


.project-details-hero h1 {
    max-width: 950px;
    margin: 17px 0 0;
    color: #E9F1EE;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.8px;
}


.project-details-intro {
    max-width: 760px;
    margin: 23px 0 0;
    color: #899794;
    font-size: 15px;
    line-height: 1.8;
}


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

.project-details-image-section {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 55px 50px 0;
    animation: detailImageEntrance 1s ease-out 0.15s both;
}


@keyframes detailImageEntrance {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


.project-details-image-wrapper {
    position: relative;
    width: 100%;
    max-height: 560px;
    overflow: hidden;
    border: 1px solid #21483F;
    border-radius: 8px;
    background: #07100E;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 40px rgba(66, 201, 167, 0.05);
}


    .project-details-image-wrapper::before {
        content: "[ PROJECT VISUAL ]";
        position: absolute;
        top: 16px;
        left: 17px;
        z-index: 3;
        padding: 6px 9px;
        border: 1px solid rgba(66, 201, 167, 0.25);
        background: rgba(3, 10, 8, 0.78);
        color: #6F9C91;
        font-family: "Courier New", Courier, monospace;
        font-size: 9px;
        letter-spacing: 1px;
    }


    .project-details-image-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 135deg, rgba(66, 201, 167, 0.07), transparent 30%, transparent 70%, rgba(66, 201, 167, 0.04) );
    }


.project-details-image {
    width: 100%;
    max-height: 560px;
    display: block;
    object-fit: cover;
}


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

.project-details-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 70px 50px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
    gap: 50px;
}


.project-details-main {
    min-width: 0;
}


.project-details-block {
    position: relative;
    margin-bottom: 42px;
    padding: 30px 32px;
    background: linear-gradient( 145deg, rgba(10, 22, 19, 0.92), rgba(5, 12, 10, 0.96) );
    border: 1px solid #18362F;
    border-radius: 7px;
    overflow: hidden;
    animation: detailBlockEntrance 0.8s ease-out both;
}


    .project-details-block:nth-child(1) {
        animation-delay: 0.25s;
    }


    .project-details-block:nth-child(2) {
        animation-delay: 0.38s;
    }


    .project-details-block:nth-child(3) {
        animation-delay: 0.51s;
    }


@keyframes detailBlockEntrance {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


.project-details-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 2px;
    background: #42C9A7;
    box-shadow: 0 0 12px rgba(66, 201, 167, 0.60);
}


.project-details-block h2 {
    margin: 13px 0 15px;
    color: #E2EBE8;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.25;
}


.project-details-block p {
    margin: 0;
    color: #899794;
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   DETAIL SIDEBAR
   ========================================================= */

.project-details-sidebar {
    min-width: 0;
}


.project-details-sidebar-block {
    position: sticky;
    top: 30px;
    margin-bottom: 20px;
    padding: 25px;
    background: linear-gradient( 145deg, rgba(10, 23, 20, 0.94), rgba(5, 12, 10, 0.97) );
    border: 1px solid #193B33;
    border-radius: 7px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.20);
}


    .project-details-sidebar-block + .project-details-sidebar-block {
        margin-top: 20px;
    }


.project-details-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}


.project-details-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}


    .project-details-links .project-button {
        width: 100%;
    }


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

.project-details-footer {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 15px 50px 100px;
}


.project-back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #718982;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}


    .project-back-link:hover {
        color: #42C9A7;
        transform: translateX(-4px);
    }


/* =========================================================
   PROJECT NOT FOUND
   ========================================================= */

.project-not-found,
.projects-empty-page {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px;
    background: #050908;
}


    .project-not-found h1,
    .projects-empty-page h1 {
        margin: 15px 0 0;
        color: #E5ECE9;
        font-size: clamp(34px, 4vw, 58px);
        font-weight: 500;
    }


    .project-not-found p,
    .projects-empty-page p {
        max-width: 620px;
        margin: 17px 0 25px;
        color: #7F918C;
        font-size: 14px;
        line-height: 1.8;
    }


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

@media (max-width: 950px) {

    .projects-hero,
    .project-details-hero {
        padding-left: 35px;
        padding-right: 35px;
    }


    .projects-section {
        padding-left: 35px;
        padding-right: 35px;
    }


    .projects-grid {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin: 0 auto;
    }


    .project-details-image-section {
        padding-left: 35px;
        padding-right: 35px;
    }


    .project-details-content {
        padding-left: 35px;
        padding-right: 35px;
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .project-details-sidebar-block {
        position: relative;
        top: auto;
    }


    .project-details-footer {
        padding-left: 35px;
        padding-right: 35px;
    }
}


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

@media (max-width: 700px) {

    .projects-hero {
        min-height: 330px;
        padding: 75px 22px 65px;
    }


        .projects-hero h1 {
            font-size: clamp(38px, 11vw, 55px);
            letter-spacing: -1.2px;
        }


    .projects-hero-description {
        font-size: 13px;
        line-height: 1.75;
    }


    .projects-section {
        padding: 65px 22px 90px;
    }


    .projects-section-heading {
        margin-bottom: 38px;
    }


        .projects-section-heading h2 {
            font-size: 29px;
        }


        .projects-section-heading p {
            font-size: 13px;
        }


    .project-image-wrapper {
        height: 220px;
    }


    .project-card-content {
        padding: 23px;
    }


    .project-title-row {
        flex-direction: column;
        gap: 10px;
    }


        .project-title-row h3 {
            font-size: 21px;
        }


    .project-short-description {
        font-size: 13px;
    }


    .project-actions {
        flex-direction: column;
    }


        .project-actions .project-button {
            width: 100%;
        }


    .project-details-hero {
        padding: 75px 22px 60px;
    }


        .project-details-hero h1 {
            font-size: clamp(36px, 10vw, 52px);
            letter-spacing: -1px;
        }


    .project-details-intro {
        font-size: 13px;
    }


    .project-details-image-section {
        padding: 35px 22px 0;
    }


    .project-details-image-wrapper,
    .project-details-image {
        max-height: 300px;
    }


    .project-details-content {
        padding: 50px 22px 25px;
    }


    .project-details-block {
        padding: 24px;
        margin-bottom: 25px;
    }


        .project-details-block h2 {
            font-size: 22px;
        }


        .project-details-block p {
            font-size: 13px;
            line-height: 1.8;
        }


    .project-details-sidebar-block {
        padding: 22px;
    }


    .project-details-footer {
        padding: 10px 22px 70px;
    }


    .project-not-found,
    .projects-empty-page {
        min-height: 60vh;
        padding: 50px 22px;
    }
}


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

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

    .projects-hero-inner,
    .projects-section-heading,
    .project-card,
    .project-details-inner,
    .project-details-image-section,
    .project-details-block,
    .projects-highlight,
    .projects-hero::after,
    .project-details-hero::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }


    .project-card,
    .project-image,
    .project-button,
    .project-back-link {
        transition: none !important;
    }
}

/* =========================================================
   WRITEUPS PAGE
   ========================================================= */

.writeups-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient( circle at 78% 8%, rgba(48, 150, 125, 0.08), transparent 28% ), radial-gradient( circle at 15% 35%, rgba(31, 104, 91, 0.05), transparent 25% ), #050908;
}


    /* =========================================================
   WRITEUPS CYBER GRID
   ========================================================= */

    .writeups-page::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.28;
        background-image: linear-gradient( rgba(70, 197, 165, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(70, 197, 165, 0.035) 1px, transparent 1px );
        background-size: 55px 55px;
        mask-image: linear-gradient( to bottom, black, transparent 85% );
        -webkit-mask-image: linear-gradient( to bottom, black, transparent 85% );
    }


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

.writeups-hero {
    position: relative;
    z-index: 2;
    min-height: 410px;
    display: flex;
    align-items: center;
    padding: 105px 60px 85px;
    border-bottom: 1px solid #14231F;
    overflow: hidden;
}


    /* Animated line at bottom of hero */

    .writeups-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.10), #4CC7AA, rgba(76, 199, 170, 0.10), transparent );
        box-shadow: 0 0 14px rgba(76, 199, 170, 0.25);
        animation: writeupsHeroScan 4.5s linear infinite;
    }


@keyframes writeupsHeroScan {

    0% {
        opacity: 0.25;
        transform: scaleX(0.2);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: center;
    }

    100% {
        opacity: 0.25;
        transform: scaleX(0.2);
        transform-origin: right;
    }
}


.writeups-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    animation: writeupsHeroEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes writeupsHeroEntrance {

    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(4px);
    }

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


.writeups-hero-label {
    display: inline-block;
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
}


.writeups-hero h1 {
    max-width: 900px;
    margin: 18px 0 0;
    color: #EAF2EF;
    font-size: clamp(42px, 5.5vw, 76px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -2px;
    text-shadow: 0 0 18px rgba(66, 201, 167, 0.08), 0 0 40px rgba(66, 201, 167, 0.03);
}


    .writeups-hero h1 span {
        display: block;
        margin-top: 8px;
        color: #42C9A7;
        text-shadow: 0 0 12px rgba(66, 201, 167, 0.20), 0 0 30px rgba(66, 201, 167, 0.06);
        animation: writeupsTitleGlow 4s ease-in-out infinite;
    }


@keyframes writeupsTitleGlow {

    0%, 100% {
        text-shadow: 0 0 12px rgba(66, 201, 167, 0.18), 0 0 30px rgba(66, 201, 167, 0.05);
    }

    50% {
        text-shadow: 0 0 18px rgba(66, 201, 167, 0.36), 0 0 42px rgba(66, 201, 167, 0.12);
    }
}


.writeups-hero p {
    max-width: 720px;
    margin: 28px 0 0;
    color: #899794;
    font-size: 15px;
    line-height: 1.85;
    animation: writeupsDescriptionEntrance 1s ease-out 0.15s both;
}


@keyframes writeupsDescriptionEntrance {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* =========================================================
   WRITEUPS PAGE
   ========================================================= */

.writeups-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient( circle at 80% 5%, rgba(48, 150, 125, 0.08), transparent 28% ), #050908;
}


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

.writeups-hero {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 40px 80px;
    text-align: center;
    border-bottom: 1px solid #14231F;
}


.writeups-hero-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    animation: writeupsHeroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes writeupsHeroEntrance {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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


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

.writeups-hero h1 {
    width: 100%;
    margin: 0 auto;
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp( 48px, 7vw, 88px );
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 6px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(66, 201, 167, 0.18), 0 0 35px rgba(66, 201, 167, 0.07);
    overflow-wrap: anywhere;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.writeups-section {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 75px 50px 120px;
    text-align: center;
}


.writeups-category-list {
    width: 100%;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.writeups-category {
    width: 100%;
    margin: 0 auto 100px;
    text-align: center;
}


    .writeups-category:last-child {
        margin-bottom: 0;
    }


/* =========================================================
   CATEGORY HEADING
   ========================================================= */

.writeups-category-heading {
    position: relative;
    width: 100%;
    margin: 0 auto 38px;
    padding-bottom: 22px;
    text-align: center;
    border-bottom: 1px solid #172C27;
}


    .writeups-category-heading::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        width: 125px;
        height: 2px;
        background: #42C9A7;
        transform: translateX(-50%);
        box-shadow: 0 0 12px rgba(66, 201, 167, 0.35);
        transition: width 0.35s ease;
    }


.writeups-category:hover
.writeups-category-heading::after {
    width: 190px;
}


/* =========================================================
   CATEGORY TITLE
   ========================================================= */

.writeups-category-label {
    margin: 0;
    color: #E5ECE9;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp( 25px, 3vw, 38px );
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}


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

.writeups-category-heading p {
    max-width: 700px;
    margin: 12px auto 0;
    color: #71837E;
    font-size: 13px;
    line-height: 1.75;
    text-align: center;
    overflow-wrap: anywhere;
}


/* =========================================================
   WRITEUP GRID
   ========================================================= */

.writeups-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap: 24px;
    align-items: stretch;
}


/* =========================================================
   WRITEUP CARD
   ========================================================= */

.writeup-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(12, 24, 21, 0.96), rgba(6, 12, 11, 0.98) );
    border: 1px solid #19352F;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18);
    animation: writeupCardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}


@keyframes writeupCardEntrance {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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


.writeup-card:hover {
    transform: translateY(-7px);
    border-color: #2B7665;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.30), 0 0 30px rgba(66, 201, 167, 0.07);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.writeup-card-content {
    width: 100%;
    min-width: 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 28px 30px;
    text-align: center;
}


/* =========================================================
   WRITEUP TITLE
   ========================================================= */

.writeup-card h3 {
    width: 100%;
    margin: 0;
    color: #E4ECE9;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}


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

.writeup-description {
    width: 100%;
    max-width: 620px;
    margin: 15px auto 0;
    color: #879792;
    font-size: 13px;
    line-height: 1.75;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   DATE
   ========================================================= */

.writeup-date {
    margin-top: 15px;
    color: #60736E;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-align: center;
    text-transform: uppercase;
}


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

.writeup-technologies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 21px;
}


.writeup-technology {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid #1D3C35;
    border-radius: 3px;
    background: rgba(7, 18, 16, 0.82);
    color: #7F938D;
    font-family: "Courier New", Courier, monospace;
    font-size: 9px;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}


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

.writeup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: auto;
    padding-top: 28px;
}


.writeup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid #23483F;
    border-radius: 4px;
    background: rgba(8, 18, 16, 0.85);
    color: #9BAAA6;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}


    .writeup-button:hover {
        color: #42C9A7;
        border-color: #42C9A7;
        background: rgba(18, 48, 41, 0.75);
        transform: translateY(-2px);
    }


.writeup-button-primary {
    border-color: #2D806C;
    background: #126B59;
    color: #EFFFFB;
}


    .writeup-button-primary:hover {
        border-color: #42C9A7;
        background: #17836D;
        color: #FFFFFF;
    }


/* =========================================================
   EMPTY STATE
   ========================================================= */

.writeups-empty-state {
    width: 100%;
    padding: 70px 30px;
    text-align: center;
    border: 1px solid #19352F;
    border-radius: 7px;
    background: rgba(7, 16, 14, 0.70);
    color: #7F918C;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    line-height: 1.7;
}


.writeups-page-loading {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


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

@media (max-width: 950px) {

    .writeups-section {
        padding-left: 35px;
        padding-right: 35px;
    }


    .writeups-grid {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}


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

@media (max-width: 700px) {

    .writeups-hero {
        min-height: 340px;
        padding: 80px 22px 65px;
    }


        .writeups-hero h1 {
            font-size: clamp( 38px, 11vw, 58px );
            letter-spacing: 3px;
        }


    .writeups-section {
        padding: 55px 22px 90px;
    }


    .writeups-category {
        margin-bottom: 70px;
    }


    .writeups-category-label {
        font-size: clamp( 23px, 7vw, 31px );
        letter-spacing: 2px;
    }


    .writeup-card-content {
        padding: 28px 22px;
    }


    .writeup-button {
        flex: 1 1 auto;
        min-width: 130px;
    }
}


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

@media (max-width: 430px) {

    .writeups-hero {
        padding-left: 18px;
        padding-right: 18px;
    }


        .writeups-hero h1 {
            font-size: 40px;
            letter-spacing: 2px;
        }


    .writeups-section {
        padding-left: 18px;
        padding-right: 18px;
    }


    .writeup-card-content {
        padding: 24px 18px;
    }


    .writeup-button {
        width: 100%;
        min-width: 0;
    }
}


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

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

    .writeups-hero-content,
    .writeup-card {
        animation: none;
        opacity: 1;
        transform: none;
    }


    .writeup-card,
    .writeup-button {
        transition: none;
    }


        .writeup-card:hover,
        .writeup-button:hover {
            transform: none;
        }
}

/* =========================================================
   WRITEUP VIEW / PDF PAGE
   ========================================================= */

.writeup-view-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient( circle at 80% 5%, rgba(48, 150, 125, 0.07), transparent 28% ), #050908;
}


/* =========================================================
   QUICK PAGE LOADING
   ========================================================= */

.writeup-loading-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}


.writeup-loading-content {
    width: 100%;
    max-width: 420px;
    animation: writeupLoadingEntrance 0.35s ease-out both;
}


@keyframes writeupLoadingEntrance {

    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

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


.writeup-loading-line {
    width: 100%;
    height: 2px;
    margin-bottom: 18px;
    overflow: hidden;
    background: #14231F;
}


    .writeup-loading-line::after {
        content: "";
        display: block;
        width: 35%;
        height: 100%;
        background: #42C9A7;
        box-shadow: 0 0 14px rgba(66, 201, 167, 0.8);
        animation: writeupLoadingLine 0.8s ease-in-out infinite;
    }


@keyframes writeupLoadingLine {

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

    100% {
        transform: translateX(380%);
    }
}


.writeup-loading-text {
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


.writeup-loading-title {
    margin-top: 10px;
    color: #71837E;
    font-size: 13px;
}


/* =========================================================
   MAIN PAGE ENTRANCE
   ========================================================= */

.writeup-view-content {
    animation: writeupViewEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes writeupViewEntrance {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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


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

.writeup-view-header {
    position: relative;
    padding: 60px 60px 45px;
    border-bottom: 1px solid #14231F;
}


.writeup-view-header-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


.writeup-view-back {
    display: inline-flex;
    align-items: center;
    color: #718982;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}


    .writeup-view-back:hover {
        color: #42C9A7;
        transform: translateX(-4px);
    }


.writeup-view-category {
    margin-top: 28px;
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}


.writeup-view-header h1 {
    max-width: 950px;
    margin: 12px 0 0;
    color: #EAF2EF;
    font-size: clamp( 34px, 5vw, 58px );
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
    overflow-wrap: anywhere;
}


.writeup-view-header p {
    max-width: 750px;
    margin: 18px 0 0;
    color: #899794;
    font-size: 14px;
    line-height: 1.8;
}


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

.writeup-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}


/* =========================================================
   PDF SECTION
   ========================================================= */

.writeup-pdf-section {
    width: 100%;
    padding: 45px 50px 90px;
}


.writeup-pdf-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 900px;
    margin: 0 auto;
    overflow: hidden;
    background: #101513;
    border: 1px solid #19352F;
    border-radius: 8px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35), 0 0 30px rgba(66, 201, 167, 0.035);
    animation: pdfContainerEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}


@keyframes pdfContainerEntrance {

    from {
        opacity: 0;
        transform: translateY(22px) scale(0.99);
    }

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


/* =========================================================
   PDF LOADING OVERLAY
   ========================================================= */

.writeup-pdf-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #101513;
    color: #71837E;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    pointer-events: none;
    /*
       This animation is independent of the iframe.
       Therefore a browser PDF viewer cannot get stuck
       behind the loading layer.
    */

    animation: writeupPdfLoadingFade 1.25s ease 0.15s forwards;
}


@keyframes writeupPdfLoadingFade {

    0% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}


/* =========================================================
   PDF SPINNER
   ========================================================= */

.writeup-pdf-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #19352F;
    border-top-color: #42C9A7;
    border-radius: 50%;
    animation: writeupPdfSpinner 0.7s linear infinite;
}


@keyframes writeupPdfSpinner {

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


/* =========================================================
   PDF VIEWER
   ========================================================= */

.writeup-pdf-viewer {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #101513;
    /*
       IMPORTANT:
       PDF is visible immediately.
       We don't wait for iframe onload.
    */

    opacity: 1;
}


/* =========================================================
   NOT FOUND
   ========================================================= */

.writeup-view-not-found {
    min-height: 70vh;
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 30px;
    text-align: center;
}


.writeup-view-label {
    color: #42C9A7;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}


.writeup-view-not-found h1 {
    margin: 15px 0 0;
    color: #E5ECE9;
    font-size: clamp( 34px, 5vw, 58px );
    font-weight: 500;
    line-height: 1.1;
}


.writeup-view-not-found p {
    max-width: 620px;
    margin: 18px auto 28px;
    color: #7F918C;
    font-size: 14px;
    line-height: 1.8;
}


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

@media (max-width: 950px) {

    .writeup-view-header {
        padding-left: 35px;
        padding-right: 35px;
    }


    .writeup-pdf-section {
        padding-left: 35px;
        padding-right: 35px;
    }


    .writeup-pdf-wrapper {
        height: 780px;
    }
}


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

@media (max-width: 700px) {

    .writeup-view-header {
        padding: 50px 22px 38px;
    }


        .writeup-view-header h1 {
            font-size: clamp( 30px, 9vw, 46px );
        }


    .writeup-pdf-section {
        padding: 30px 18px 65px;
    }


    .writeup-pdf-wrapper {
        height: 650px;
        border-radius: 6px;
    }
}


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

@media (max-width: 430px) {

    .writeup-view-header {
        padding-left: 18px;
        padding-right: 18px;
    }


    .writeup-pdf-section {
        padding-left: 12px;
        padding-right: 12px;
    }


    .writeup-pdf-wrapper {
        height: 600px;
    }
}


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

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

    .writeup-loading-content,
    .writeup-view-content,
    .writeup-pdf-wrapper {
        animation: none;
        opacity: 1;
        transform: none;
    }


    .writeup-loading-line::after,
    .writeup-pdf-spinner,
    .writeup-pdf-loading {
        animation: none;
    }


    .writeup-pdf-loading {
        opacity: 0;
        visibility: hidden;
    }


    .writeup-view-back {
        transition: none;
    }
}


/* =========================================================
   WRITEUPS - FINAL PAGE ANIMATIONS
   ========================================================= */

/* ---------------------------------------------------------
   WRITEUPS HERO
   --------------------------------------------------------- */

.writeups-hero-title {
    opacity: 0;
    animation: writeups-hero-title-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}


.writeups-hero-description {
    opacity: 0;
    animation: writeups-hero-description-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}


@keyframes writeups-hero-title-enter {

    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
        filter: blur(8px);
    }

    55% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


@keyframes writeups-hero-description-enter {

    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* ---------------------------------------------------------
   WRITEUP CATEGORY ENTRANCE
   --------------------------------------------------------- */

.writeups-category {
    animation: writeups-category-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}


    .writeups-category:nth-child(1) {
        animation-delay: 0.25s;
    }


    .writeups-category:nth-child(2) {
        animation-delay: 0.35s;
    }


    .writeups-category:nth-child(3) {
        animation-delay: 0.45s;
    }


    .writeups-category:nth-child(4) {
        animation-delay: 0.55s;
    }


    .writeups-category:nth-child(5) {
        animation-delay: 0.65s;
    }


    .writeups-category:nth-child(6) {
        animation-delay: 0.75s;
    }


    .writeups-category:nth-child(7) {
        animation-delay: 0.85s;
    }


@keyframes writeups-category-enter {

    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* =========================================================
   WRITEUP VIEW - SMOOTH TITLE ENTRANCE
   ========================================================= */

.writeup-view-title {
    opacity: 0;
    animation: writeup-title-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}


.writeup-view-category {
    opacity: 0;
    animation: writeup-category-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards;
}


.writeup-view-description {
    opacity: 0;
    animation: writeup-description-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}


.writeup-view-actions {
    opacity: 0;
    animation: writeup-actions-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}


@keyframes writeup-category-enter {

    0% {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


@keyframes writeup-title-enter {

    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
        filter: blur(9px);
    }

    55% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


@keyframes writeup-description-enter {

    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


@keyframes writeup-actions-enter {

    0% {
        opacity: 0;
        transform: translateY(15px);
    }

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


/* =========================================================
   WRITEUP VIEW - FIXED BACK BUTTON
   ========================================================= */

.writeup-view-back-fixed {
    position: fixed;
    top: 20px;
    right: 25px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 15px;
    color: #A8B7B2;
    background: rgba(5, 9, 8, 0.94);
    border: 1px solid rgba(76, 199, 170, 0.24);
    border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}


    .writeup-view-back-fixed:hover {
        color: #42C9A7;
        background: rgba(8, 18, 16, 0.97);
        border-color: rgba(76, 199, 170, 0.5);
        transform: translateX(-3px);
    }


/* =========================================================
   WRITEUP VIEW PAGE ENTRANCE
   ========================================================= */

.writeup-view-content {
    animation: writeup-page-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}


@keyframes writeup-page-enter {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


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

@media (max-width: 700px) {

    .writeup-view-back-fixed {
        top: 14px;
        right: 14px;
        min-height: 38px;
        padding: 9px 12px;
        font-size: 10px;
    }
}


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

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

    .writeups-hero-title,
    .writeups-hero-description,
    .writeups-category,
    .writeup-view-content,
    .writeup-view-category,
    .writeup-view-title,
    .writeup-view-description,
    .writeup-view-actions,
    .writeup-view-back-fixed {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}
/* =========================================================
   WRITEUPS HERO DESCRIPTION - CENTER FIX
   ========================================================= */

.writeups-hero-content {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.writeups-hero-description {
    display: block;
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* =========================================================
   WRITEUPS HERO DESCRIPTION - MATCH CATEGORY ALIGNMENT
   ========================================================= */

.writeups-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.writeups-hero-description {
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 14px auto 0;
    color: #7F918C;
    font-size: 14px;
    line-height: 1.75;
    text-align: center;
    overflow-wrap: break-word;
}

/* =========================================================
   WRITEUPS HERO - EXACT CENTER ALIGNMENT
   ========================================================= */

.writeups-hero-content {
    position: relative;
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.writeups-hero-title {
    display: block;
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.writeups-hero-description {
    display: block;
    position: relative;
    width: 720px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* =========================================================
   CERTIFICATIONS PAGE
   ========================================================= */

.certifications-page {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 100px;
    overflow-x: hidden;
}


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

.certifications-hero {
    width: 100%;
    padding: 110px 40px 70px;
    position: relative;
}

.certifications-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.certifications-hero-label {
    display: inline-block;
    margin-bottom: 18px;
    color: #4CC7AA;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.certifications-hero-title {
    margin: 0;
    color: #E8EEEC;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    word-break: break-word;
}

.certifications-hero-description {
    width: 100%;
    max-width: 720px;
    margin: 28px auto 0;
    color: #AEBBB7;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MAIN SECTION
   ========================================================= */

.certifications-section {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px 40px 0;
}

.certifications-section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.certifications-section-label {
    display: block;
    margin-bottom: 14px;
    color: #4CC7AA;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.certifications-section-title {
    margin: 0;
    color: #E8EEEC;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
    font-weight: 750;
    word-break: break-word;
}

.certifications-section-description {
    max-width: 700px;
    margin: 18px auto 0;
    color: #8F9D99;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   CERTIFICATION GRID
   ========================================================= */

.certifications-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    gap: 28px;
    width: 100%;
    align-items: stretch;
}


/* =========================================================
   CERTIFICATION CARD
   ========================================================= */

.certification-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(18, 27, 25, 0.96), rgba(8, 13, 12, 0.98) );
    border: 1px solid rgba(76, 199, 170, 0.15);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

    .certification-card:hover {
        transform: translateY(-5px);
        border-color: rgba(76, 199, 170, 0.4);
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);
    }


/* =========================================================
   CERTIFICATE IMAGE
   ========================================================= */

.certification-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #090D0C;
    border-bottom: 1px solid rgba(76, 199, 170, 0.12);
}

.certification-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform 0.3s ease;
}

.certification-card:hover .certification-image {
    transform: scale(1.025);
}


/* =========================================================
   NO IMAGE STATE
   ========================================================= */

.certification-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 30px;
    color: #71807B;
    text-align: center;
    background: radial-gradient( circle at center, rgba(76, 199, 170, 0.06), transparent 65% );
    border-bottom: 1px solid rgba(76, 199, 170, 0.12);
}

.certification-no-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    color: #4CC7AA;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    border: 1px solid rgba(76, 199, 170, 0.28);
    border-radius: 50%;
    background: rgba(76, 199, 170, 0.04);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.certification-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 27px;
}

.certification-title {
    margin: 0;
    color: #E8EEEC;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.certification-issuer {
    margin: 9px 0 0;
    color: #4CC7AA;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    overflow-wrap: anywhere;
}


/* =========================================================
   DATES
   ========================================================= */

.certification-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.certification-date-label {
    color: #71807B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.certification-date-value {
    color: #B8C3BF;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


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

.certification-description {
    margin: 17px 0 0;
    color: #96A39F;
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}


/* =========================================================
   CREDENTIAL ID
   ========================================================= */

.certification-credential {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 18px;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(76, 199, 170, 0.45);
}

.certification-credential-label {
    color: #71807B;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.certification-credential-value {
    color: #B8C3BF;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}


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

.certification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.certification-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .certification-button:hover {
        transform: translateY(-1px);
    }


/* Primary */

.certification-button-primary {
    color: #06100D;
    background: #4CC7AA;
    border: 1px solid #4CC7AA;
}

    .certification-button-primary:hover {
        color: #06100D;
        background: #63D6BB;
        border-color: #63D6BB;
    }


/* Secondary */

.certification-button-secondary {
    color: #AFC0BB;
    background: transparent;
    border: 1px solid rgba(76, 199, 170, 0.28);
}

    .certification-button-secondary:hover {
        color: #4CC7AA;
        background: rgba(76, 199, 170, 0.06);
        border-color: rgba(76, 199, 170, 0.55);
    }


/* =========================================================
   LOADING / EMPTY STATES
   ========================================================= */

.certifications-loading,
.certifications-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 350px;
    padding: 40px;
    color: #7F8D89;
    text-align: center;
}

    .certifications-empty p {
        margin: 0;
        color: #7F8D89;
    }


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

@media (max-width: 1100px) {

    .certifications-section {
        padding-left: 30px;
        padding-right: 30px;
    }

    .certifications-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}


@media (max-width: 768px) {

    .certifications-hero {
        padding: 80px 24px 55px;
    }

    .certifications-section {
        padding: 10px 24px 0;
    }

    .certifications-section-heading {
        margin-bottom: 40px;
    }

    .certifications-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .certification-card {
        border-radius: 12px;
    }

    .certification-card-content {
        padding: 23px;
    }

    .certification-title {
        font-size: 20px;
    }
}


@media (max-width: 480px) {

    .certifications-hero {
        padding: 65px 18px 45px;
    }

    .certifications-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .certifications-hero-title {
        font-size: 38px;
        letter-spacing: 1px;
    }

    .certifications-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .certifications-section-title {
        font-size: 27px;
    }

    .certifications-section-description {
        font-size: 14px;
    }

    .certification-card-content {
        padding: 20px;
    }

    .certification-title {
        font-size: 19px;
    }

    .certification-actions {
        flex-direction: column;
    }

    .certification-button {
        width: 100%;
    }
}


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

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

    .certification-card,
    .certification-image,
    .certification-button {
        transition: none;
    }

        .certification-card:hover,
        .certification-button:hover {
            transform: none;
        }

            .certification-card:hover .certification-image {
                transform: none;
            }
}
/* =========================================================
   CERTIFICATIONS - ENTRANCE ANIMATIONS
   ========================================================= */

@keyframes certificationsFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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


@keyframes certificationsFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


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

.certifications-hero-label {
    animation: certificationsFadeUp 0.7s ease-out both;
}

.certifications-hero-title {
    animation: certificationsFadeUp 0.8s ease-out 0.1s both;
}

.certifications-hero-description {
    animation: certificationsFadeUp 0.8s ease-out 0.22s both;
}


/* =========================================================
   SECTION HEADING ANIMATION
   ========================================================= */

.certifications-section-heading {
    animation: certificationsFadeUp 0.8s ease-out 0.15s both;
}


/* =========================================================
   CERTIFICATION CARD ANIMATION
   ========================================================= */

.certification-card {
    animation: certificationsFadeUp 0.7s ease-out both;
}


    /* Stagger cards automatically */

    .certification-card:nth-child(1) {
        animation-delay: 0.15s;
    }

    .certification-card:nth-child(2) {
        animation-delay: 0.25s;
    }

    .certification-card:nth-child(3) {
        animation-delay: 0.35s;
    }

    .certification-card:nth-child(4) {
        animation-delay: 0.45s;
    }

    .certification-card:nth-child(5) {
        animation-delay: 0.55s;
    }

    .certification-card:nth-child(6) {
        animation-delay: 0.65s;
    }

    .certification-card:nth-child(7) {
        animation-delay: 0.75s;
    }

    .certification-card:nth-child(8) {
        animation-delay: 0.85s;
    }


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

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

    .certifications-hero-label,
    .certifications-hero-title,
    .certifications-hero-description,
    .certifications-section-heading,
    .certification-card {
        animation: none;
    }
}
/* =========================================================
   CERTIFICATIONS - MAIN HEADING
   ========================================================= */

.certifications-hero-title {
    position: relative;
    display: inline-block;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.30), 0 0 22px rgba(76, 199, 170, 0.16), 0 0 40px rgba(76, 199, 170, 0.07);
    animation: certificationsTitleReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both, certificationsTitleGlow 4s ease-in-out 1.1s infinite;
}


/* =========================================================
   CERTIFICATIONS - ENTRANCE ANIMATION
   ========================================================= */

@keyframes certificationsTitleReveal {

    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
        filter: blur(7px);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* =========================================================
   CERTIFICATIONS - SUBTLE GLOW MOTION
   ========================================================= */

@keyframes certificationsTitleGlow {

    0%, 100% {
        text-shadow: 0 0 8px rgba(76, 199, 170, 0.28), 0 0 20px rgba(76, 199, 170, 0.12), 0 0 36px rgba(76, 199, 170, 0.05);
    }

    50% {
        text-shadow: 0 0 12px rgba(76, 199, 170, 0.40), 0 0 26px rgba(76, 199, 170, 0.18), 0 0 44px rgba(76, 199, 170, 0.08);
    }
}


/* =========================================================
   REMOVE HERO LABEL
   ========================================================= */

.certifications-hero-label {
    display: none !important;
}


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

.certifications-section-label {
    display: none !important;
}


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

@media (max-width: 768px) {

    .certifications-hero-title {
        font-size: clamp(40px, 11vw, 64px);
        letter-spacing: 3px;
    }
}


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

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

    .certifications-hero-title {
        animation: none;
    }
}
/* =========================================================
   CERTIFICATIONS - MOVING CYBER DIVIDER
   ========================================================= */

.certifications-hero {
    position: relative;
    overflow: hidden;
}


    /* Base horizontal line */

    .certifications-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent 0%, rgba(76, 199, 170, 0.10) 15%, rgba(76, 199, 170, 0.25) 50%, rgba(76, 199, 170, 0.10) 85%, transparent 100% );
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.12);
    }


    /* Moving glowing scanner */

    .certifications-hero::before {
        content: "";
        position: absolute;
        bottom: -2px;
        left: -120px;
        width: 120px;
        height: 5px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.18), #4CC7AA, rgba(76, 199, 170, 0.18), transparent );
        filter: blur(1px);
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.55), 0 0 18px rgba(76, 199, 170, 0.20);
        animation: certificationsDividerScan 4s linear infinite;
        pointer-events: none;
    }


/* Scanner movement */

@keyframes certificationsDividerScan {

    0% {
        left: -120px;
    }

    100% {
        left: calc(100% + 120px);
    }
}


/* Reduced motion */

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

    .certifications-hero::before {
        animation: none;
        left: 50%;
        opacity: 0.4;
    }
}

/* =========================================================
   SERVICES PAGE
   Dynamic category + side-by-side service cards
   ========================================================= */

/* ---------------------------------------------------------
   SERVICES HERO
   --------------------------------------------------------- */

.services-page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.services-hero {
    position: relative;
    width: 100%;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 40px 70px;
    text-align: center;
    overflow: hidden;
}

.services-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Main SERVICES heading */

.services-hero-title {
    display: block;
    width: 100%;
    margin: 0 auto;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.28), 0 0 22px rgba(76, 199, 170, 0.14), 0 0 40px rgba(76, 199, 170, 0.06);
    animation: servicesTitleReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, servicesTitleGlow 4s ease-in-out 0.9s infinite;
}

/* Hero description */

.services-hero-description {
    width: 100%;
    max-width: 720px;
    margin: 30px auto 0;
    color: rgba(232, 238, 236, 0.72);
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    animation: servicesDescriptionReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}


/* ---------------------------------------------------------
   FLOWING WAVE / LIGHT LINE
   --------------------------------------------------------- */

.services-hero-line {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: 2px;
    margin: 34px auto 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(76, 199, 170, 0.10) 15%, rgba(76, 199, 170, 0.30) 35%, rgba(76, 199, 170, 0.55) 50%, rgba(76, 199, 170, 0.30) 65%, rgba(76, 199, 170, 0.10) 85%, transparent 100% );
    overflow: hidden;
    opacity: 0.8;
    animation: servicesLineReveal 1s ease 0.35s both;
}

    /*
   Soft moving wave travelling across the line.
   It is deliberately subtle rather than a bright flashing dot.
*/

    .services-hero-line::after {
        content: "";
        position: absolute;
        top: -5px;
        left: -180px;
        width: 180px;
        height: 12px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.08), rgba(76, 199, 170, 0.32), rgba(76, 199, 170, 0.08), transparent );
        filter: blur(2px);
        opacity: 0.7;
        animation: servicesWave 4.2s ease-in-out infinite;
    }


/* ---------------------------------------------------------
   SERVICES CONTENT
   --------------------------------------------------------- */

.services-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 35px 40px 100px;
}


/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */

.services-section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

    .services-section-heading h2 {
        margin: 0;
        color: #E8EEEC;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(28px, 3vw, 42px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .services-section-heading p {
        max-width: 760px;
        margin: 20px auto 0;
        color: rgba(232, 238, 236, 0.62);
        font-size: 15px;
        line-height: 1.8;
    }


/* ---------------------------------------------------------
   CATEGORY
   --------------------------------------------------------- */

.services-category-list {
    display: flex;
    flex-direction: column;
    gap: 90px;
    width: 100%;
}

.services-category {
    width: 100%;
    min-width: 0;
}


/* Category title */

.services-category-heading {
    position: relative;
    width: 100%;
    margin-bottom: 32px;
    text-align: center;
}

    .services-category-heading h3 {
        margin: 0;
        color: #4CC7AA;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(24px, 3vw, 36px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-shadow: 0 0 8px rgba(76, 199, 170, 0.16), 0 0 20px rgba(76, 199, 170, 0.06);
    }

    .services-category-heading p {
        width: 100%;
        max-width: 760px;
        margin: 14px auto 0;
        color: rgba(232, 238, 236, 0.58);
        font-size: 14px;
        line-height: 1.7;
    }


/* ---------------------------------------------------------
   SERVICE GRID
   IMPORTANT:
   Individual services inside each category are side-by-side.
   --------------------------------------------------------- */

.services-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
    gap: 22px;
    width: 100%;
    min-width: 0;
}


/* ---------------------------------------------------------
   SERVICE CARD
   --------------------------------------------------------- */

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 270px;
    padding: 28px 26px 22px;
    background: linear-gradient( 145deg, rgba(14, 22, 22, 0.96), rgba(7, 12, 13, 0.98) );
    border: 1px solid rgba(76, 199, 170, 0.14);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}


    /* Very subtle top highlight */

    .service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 18%;
        right: 18%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.38), transparent );
        opacity: 0.65;
    }


    /* Hover */

    .service-card:hover {
        transform: translateY(-5px);
        border-color: rgba(76, 199, 170, 0.38);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28), 0 0 22px rgba(76, 199, 170, 0.06);
        background: linear-gradient( 145deg, rgba(16, 27, 27, 0.98), rgba(7, 13, 14, 1) );
    }


/* ---------------------------------------------------------
   SERVICE CONTENT
   --------------------------------------------------------- */

.service-card-content {
    flex: 1;
    min-width: 0;
}

    .service-card-content h4 {
        margin: 0;
        color: #E8EEEC;
        font-family: "Courier New", Courier, monospace;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: normal;
    }

.service-card-description {
    margin: 14px 0 0;
    color: rgba(232, 238, 236, 0.60);
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   SERVICE CARD FOOTER
   --------------------------------------------------------- */

.service-card-footer {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(76, 199, 170, 0.09);
}


/* Details link */

.service-details-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

    .service-details-link:hover {
        color: #72D9BF;
        gap: 14px;
    }

.service-details-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.service-details-link:hover .service-details-arrow {
    transform: translateX(2px);
}


/* ---------------------------------------------------------
   LOADING STATE
   --------------------------------------------------------- */

.services-loading,
.services-empty {
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;
}

.services-loading-content,
.services-empty-content {
    width: 100%;
    max-width: 700px;
    text-align: center;
}

    .services-loading-content p,
    .services-empty-content p {
        margin: 20px 0 0;
        color: rgba(232, 238, 236, 0.60);
        line-height: 1.7;
    }

.services-loading-line {
    display: block;
    width: 100%;
    max-width: 260px;
    height: 2px;
    margin: 0 auto;
    background: linear-gradient( 90deg, transparent, #4CC7AA, transparent );
    animation: servicesLoadingPulse 1.4s ease-in-out infinite;
}

.services-empty-content h1 {
    margin: 0;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(38px, 5vw, 64px);
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes servicesTitleReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes servicesDescriptionReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes servicesLineReveal {
    from {
        opacity: 0;
        transform: scaleX(0.55);
    }

    to {
        opacity: 0.8;
        transform: scaleX(1);
    }
}

@keyframes servicesWave {
    0% {
        left: -180px;
        opacity: 0;
    }

    15% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.75;
    }

    85% {
        opacity: 0.35;
    }

    100% {
        left: calc(100% + 180px);
        opacity: 0;
    }
}

@keyframes servicesTitleGlow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(76, 199, 170, 0.25), 0 0 22px rgba(76, 199, 170, 0.12), 0 0 40px rgba(76, 199, 170, 0.05);
    }

    50% {
        text-shadow: 0 0 10px rgba(76, 199, 170, 0.34), 0 0 26px rgba(76, 199, 170, 0.16), 0 0 45px rgba(76, 199, 170, 0.07);
    }
}

@keyframes servicesLoadingPulse {
    0%, 100% {
        opacity: 0.25;
        transform: scaleX(0.65);
    }

    50% {
        opacity: 0.8;
        transform: scaleX(1);
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .services-hero {
        min-height: 350px;
        padding: 80px 30px 60px;
    }

    .services-content {
        padding: 30px 30px 80px;
    }

    .services-grid {
        grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    }

    .services-category-list {
        gap: 70px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .services-hero {
        min-height: 320px;
        padding: 70px 20px 50px;
    }

    .services-hero-title {
        font-size: clamp(40px, 13vw, 58px);
        letter-spacing: 3px;
    }

    .services-hero-description {
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.7;
    }

    .services-hero-line {
        margin-top: 28px;
    }

    .services-content {
        padding: 25px 20px 70px;
    }

    .services-section-heading {
        margin-bottom: 55px;
    }

        .services-section-heading h2 {
            font-size: 25px;
        }

        .services-section-heading p {
            font-size: 14px;
        }

    .services-category-list {
        gap: 60px;
    }

    .services-category-heading {
        margin-bottom: 24px;
    }

        .services-category-heading h3 {
            font-size: 24px;
            letter-spacing: 1.5px;
        }

        .services-category-heading p {
            font-size: 13px;
        }

    /*
       On small screens the cards intentionally become
       one column so there is no horizontal overflow.
    */

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card {
        min-height: 0;
        padding: 24px 21px 20px;
    }

    .service-card-content h4 {
        font-size: 17px;
    }

    .service-card-description {
        font-size: 13px;
    }
}


/* ---------------------------------------------------------
   VERY SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 380px) {

    .services-hero {
        padding-left: 15px;
        padding-right: 15px;
    }

    .services-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .services-hero-title {
        font-size: 38px;
        letter-spacing: 2px;
    }

    .service-card {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .services-hero-title,
    .services-hero-description,
    .services-hero-line,
    .services-hero-line::after,
    .service-card,
    .service-details-link,
    .service-details-arrow,
    .services-loading-line {
        animation: none !important;
        transition: none !important;
    }

        .service-card:hover {
            transform: none;
        }

        .service-details-link:hover {
            gap: 10px;
        }

            .service-details-link:hover .service-details-arrow {
                transform: none;
            }
}

/* =========================================================
   SERVICE DETAIL PAGE
   ========================================================= */

.service-view-page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background: radial-gradient( circle at 50% 0%, rgba(76, 199, 170, 0.045), transparent 34% );
}


/* ---------------------------------------------------------
   LOADING
   --------------------------------------------------------- */

.service-view-loading {
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.service-view-loading-line {
    width: min(280px, 70vw);
    height: 2px;
    margin-bottom: 18px;
    background: linear-gradient( 90deg, transparent, #4CC7AA, transparent );
    animation: serviceViewLoading 1.4s ease-in-out infinite;
}

.service-view-loading p {
    margin: 0;
    color: rgba(232, 238, 236, 0.52);
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   NOT FOUND
   --------------------------------------------------------- */

.service-view-not-found {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 25px;
    text-align: center;
}

.service-view-not-found-content {
    width: 100%;
    max-width: 650px;
}

.service-view-status {
    display: block;
    margin-bottom: 18px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(48px, 8vw, 90px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 5px;
    text-shadow: 0 0 10px rgba(76, 199, 170, 0.30), 0 0 28px rgba(76, 199, 170, 0.12);
}

.service-view-not-found-content h1 {
    margin: 0;
    color: #E8EEEC;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(26px, 4vw, 40px);
}

.service-view-not-found-content p {
    margin: 18px auto 28px;
    max-width: 560px;
    color: rgba(232, 238, 236, 0.58);
    line-height: 1.8;
}


/* ---------------------------------------------------------
   BACK BUTTON
   --------------------------------------------------------- */

.service-view-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

    .service-view-back:hover {
        color: #72D9BF;
        gap: 12px;
    }

.service-view-back-fixed {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 1000;
    padding: 10px 14px;
    border: 1px solid rgba(76, 199, 170, 0.16);
    border-radius: 7px;
    background: rgba(10, 16, 15, 0.86);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 18px rgba(76, 199, 170, 0.04);
    backdrop-filter: blur(10px);
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.service-view-hero {
    position: relative;
    width: 100%;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 110px 40px 85px;
    overflow: hidden;
    text-align: center;
}

    .service-view-hero::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 260px;
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient( ellipse, rgba(76, 199, 170, 0.055), transparent 70% );
        pointer-events: none;
    }

.service-view-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.service-view-category {
    margin-bottom: 22px;
    color: rgba(76, 199, 170, 0.76);
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: serviceViewCategoryReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.service-view-title {
    margin: 0;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-shadow: 0 0 9px rgba(76, 199, 170, 0.30), 0 0 24px rgba(76, 199, 170, 0.13);
    animation: serviceViewTitleReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.service-view-description {
    width: 100%;
    max-width: 760px;
    margin: 28px auto 0;
    color: rgba(232, 238, 236, 0.68);
    font-size: 16px;
    line-height: 1.85;
    overflow-wrap: anywhere;
    animation: serviceViewDescriptionReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.service-view-hero-line {
    position: relative;
    width: min(620px, 80%);
    height: 1px;
    margin: 40px auto 0;
    overflow: hidden;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.26), transparent );
    animation: serviceViewLineReveal 0.9s ease 0.30s both;
}

    .service-view-hero-line::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -100px;
        width: 100px;
        height: 5px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.25), #4CC7AA, rgba(76, 199, 170, 0.25), transparent );
        filter: blur(1px);
        box-shadow: 0 0 10px rgba(76, 199, 170, 0.40), 0 0 20px rgba(76, 199, 170, 0.12);
        animation: serviceViewLineScan 4s linear 1s infinite;
    }


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.service-view-content {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 40px 100px;
}

.service-view-section {
    margin-top: 80px;
}

    .service-view-section:first-child {
        margin-top: 20px;
    }

.service-view-section-heading {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(76, 199, 170, 0.10);
}

    .service-view-section-heading span {
        flex: 0 0 auto;
        color: rgba(76, 199, 170, 0.60);
        font-family: "Courier New", Courier, monospace;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .service-view-section-heading h2 {
        margin: 0;
        color: #E8EEEC;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(23px, 3vw, 32px);
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }


/* ---------------------------------------------------------
   CHECKLIST
   --------------------------------------------------------- */

.service-view-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.service-view-check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(76, 199, 170, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.012);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

    .service-view-check-item:hover {
        border-color: rgba(76, 199, 170, 0.22);
        background: rgba(76, 199, 170, 0.025);
        transform: translateY(-2px);
    }

.service-view-check-symbol {
    flex: 0 0 auto;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.service-view-check-item h3,
.service-view-process-content h3,
.service-view-deliverable h3 {
    margin: 0;
    color: #E8EEEC;
    font-family: "Courier New", Courier, monospace;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.service-view-check-item p,
.service-view-process-content p,
.service-view-deliverable p {
    margin: 8px 0 0;
    color: rgba(232, 238, 236, 0.55);
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   PROCESS
   --------------------------------------------------------- */

.service-view-process {
    position: relative;
    display: grid;
    gap: 0;
}

    .service-view-process::before {
        content: "";
        position: absolute;
        left: 24px;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: linear-gradient( 180deg, rgba(76, 199, 170, 0.28), rgba(76, 199, 170, 0.05) );
    }

.service-view-process-step {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 22px;
    min-width: 0;
    padding: 22px 0;
}

.service-view-process-number {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(76, 199, 170, 0.20);
    border-radius: 50%;
    color: #4CC7AA;
    background: #0b1110;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(76, 199, 170, 0.05);
}


/* ---------------------------------------------------------
   DELIVERABLES
   --------------------------------------------------------- */

.service-view-deliverables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.service-view-deliverable {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(76, 199, 170, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.012);
}

.service-view-deliverable-check {
    flex: 0 0 auto;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 17px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   REQUEST
   --------------------------------------------------------- */

.service-view-request {
    position: relative;
    margin-top: 95px;
    padding: 55px 40px;
    border: 1px solid rgba(76, 199, 170, 0.13);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background: radial-gradient( circle at 50% 0%, rgba(76, 199, 170, 0.055), transparent 65% );
}

    .service-view-request::before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.45), transparent );
    }

.service-view-request-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.service-view-request-label {
    color: rgba(76, 199, 170, 0.68);
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.service-view-request h2 {
    margin: 14px 0 0;
    color: #E8EEEC;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(25px, 4vw, 38px);
}

.service-view-request p {
    margin: 16px auto 28px;
    color: rgba(232, 238, 236, 0.58);
    line-height: 1.75;
}

.service-view-request-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(76, 199, 170, 0.34);
    border-radius: 6px;
    color: #4CC7AA;
    background: rgba(76, 199, 170, 0.045);
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .service-view-request-button:hover {
        border-color: rgba(76, 199, 170, 0.60);
        background: rgba(76, 199, 170, 0.08);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(76, 199, 170, 0.08);
    }


/* ---------------------------------------------------------
   ENTRANCE ANIMATIONS
   --------------------------------------------------------- */

.service-view-reveal {
    animation: serviceViewContentReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.service-view-delay-1 {
    animation-delay: 0.10s;
}

.service-view-delay-2 {
    animation-delay: 0.18s;
}

.service-view-delay-3 {
    animation-delay: 0.26s;
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes serviceViewCategoryReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes serviceViewTitleReveal {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.985);
    }

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

@keyframes serviceViewDescriptionReveal {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes serviceViewLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0.45);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes serviceViewLineScan {

    0% {
        left: -100px;
    }

    100% {
        left: calc(100% + 100px);
    }
}

@keyframes serviceViewContentReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes serviceViewLoading {

    0% {
        opacity: 0.35;
        transform: scaleX(0.65);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: 0.35;
        transform: scaleX(0.65);
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .service-view-content {
        padding-left: 25px;
        padding-right: 25px;
    }

    .service-view-checklist,
    .service-view-deliverables {
        grid-template-columns: 1fr;
    }

    .service-view-hero {
        padding-left: 25px;
        padding-right: 25px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .service-view-back-fixed {
        top: 14px;
        right: 14px;
        padding: 8px 10px;
        font-size: 11px;
    }

    .service-view-hero {
        min-height: 360px;
        padding: 90px 20px 65px;
    }

    .service-view-title {
        font-size: clamp(34px, 11vw, 54px);
        letter-spacing: 2px;
    }

    .service-view-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .service-view-content {
        padding: 10px 20px 70px;
    }

    .service-view-section {
        margin-top: 60px;
    }

    .service-view-section-heading {
        gap: 12px;
    }

        .service-view-section-heading h2 {
            font-size: 22px;
        }

    .service-view-check-item,
    .service-view-deliverable {
        padding: 17px;
    }

    .service-view-process-step {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 16px;
    }

    .service-view-process-number {
        width: 42px;
        height: 42px;
        font-size: 11px;
    }

    .service-view-process::before {
        left: 20px;
    }

    .service-view-request {
        margin-top: 70px;
        padding: 40px 22px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .service-view-loading-line,
    .service-view-category,
    .service-view-title,
    .service-view-description,
    .service-view-hero-line,
    .service-view-hero-line::after,
    .service-view-reveal,
    .service-view-check-item,
    .service-view-back,
    .service-view-request-button {
        animation: none !important;
        transition: none !important;
    }

        .service-view-check-item:hover,
        .service-view-request-button:hover {
            transform: none;
        }
}

/* =========================================================
   10. EXPERIENCE PAGE
   =========================================================
   Dynamic experience page:
   - Supports unlimited categories and experiences.
   - Does not force experience-letter images into square boxes.
   - Preserves the original image/document aspect ratio.
   - Long text wraps safely.
   - Hidden/empty categories do not create empty visual blocks.
   - Responsive layout avoids horizontal overflow.
   ========================================================= */

.experience-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: rgba(5, 7, 8, 0.88);
    color: #E8EEEC;
}


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

.experience-hero {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 120px 50px 85px;
    text-align: center;
}

.experience-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.experience-hero-title {
    margin: 0;
    color: #F3F7F5;
    font-size: clamp(42px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(232, 238, 236, 0.06);
    animation: experienceHeroTitle 4s ease-in-out infinite;
}

@keyframes experienceHeroTitle {
    0%, 100% {
        transform: translateY(0);
        text-shadow: 0 0 12px rgba(76, 199, 170, 0.08);
    }

    50% {
        transform: translateY(-3px);
        text-shadow: 0 0 18px rgba(76, 199, 170, 0.18), 0 0 34px rgba(76, 199, 170, 0.06);
    }
}

.experience-hero-description {
    max-width: 760px;
    margin: 28px auto 0;
    color: #AEBBB8;
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.experience-hero-line {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 1px;
    margin: 30px auto 0;
    overflow: hidden;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.12), rgba(76, 199, 170, 0.30), rgba(76, 199, 170, 0.12), transparent );
}

    .experience-hero-line span {
        position: absolute;
        top: -2px;
        left: -100px;
        width: 100px;
        height: 5px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.18), #4CC7AA, rgba(76, 199, 170, 0.18), transparent );
        filter: blur(1px);
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.55), 0 0 18px rgba(76, 199, 170, 0.20);
        animation: experienceHeroScan 4s linear infinite;
    }

@keyframes experienceHeroScan {
    0% {
        left: -100px;
    }

    100% {
        left: calc(100% + 100px);
    }
}


/* =========================================================
   EXPERIENCE CONTENT
   ========================================================= */

.experience-content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 50px 120px;
}

.experience-section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

    .experience-section-heading h2 {
        margin: 0;
        color: #EDF3F1;
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 600;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .experience-section-heading p {
        max-width: 720px;
        margin: 17px auto 0;
        color: #879792;
        font-size: 14px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }


/* =========================================================
   DYNAMIC CATEGORY
   ========================================================= */

.experience-category-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.experience-category {
    width: 100%;
}

.experience-category-heading {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

    .experience-category-heading h3 {
        margin: 0;
        color: #4CC7AA;
        font-family: "Courier New", Courier, monospace;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 3px;
        line-height: 1.4;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .experience-category-heading p {
        max-width: 700px;
        margin: 12px auto 0;
        color: #7F8E8A;
        font-size: 13px;
        line-height: 1.75;
        overflow-wrap: anywhere;
    }


/* =========================================================
   EXPERIENCE GRID
   ========================================================= */

.experience-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}


/* =========================================================
   EXPERIENCE CARD
   ========================================================= */

.experience-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(76, 199, 170, 0.22);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(8, 20, 17, 0.88), rgba(5, 12, 11, 0.82) );
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18), inset 0 0 30px rgba(76, 199, 170, 0.018);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

    .experience-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.65), transparent );
        opacity: 0;
        transform: scaleX(0.35);
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
        z-index: 2;
    }

    .experience-card:hover {
        transform: translateY(-7px);
        border-color: rgba(76, 199, 170, 0.48);
        background: linear-gradient( 145deg, rgba(9, 24, 20, 0.94), rgba(5, 13, 12, 0.90) );
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28), 0 0 28px rgba(76, 199, 170, 0.055);
    }

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


/* =========================================================
   EXPERIENCE LETTER PREVIEW

   IMPORTANT:
   No aspect-ratio is used here.

   This prevents portrait experience letters from being
   displayed inside an unnecessarily large square/landscape
   box. The actual image proportions are preserved.
   ========================================================= */

.experience-image-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    background: radial-gradient( circle at center, rgba(76, 199, 170, 0.045), transparent 72% );
    border-bottom: 1px solid rgba(76, 199, 170, 0.12);
}

.experience-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.experience-card:hover .experience-image {
    transform: scale(1.015);
    filter: brightness(1.04);
}


/* =========================================================
   EXPERIENCE CARD BODY
   ========================================================= */

.experience-card-body {
    width: 100%;
    min-width: 0;
    padding: 30px;
}

.experience-card-title {
    margin: 0;
    color: #EDF3F1;
    font-size: clamp(21px, 2.2vw, 27px);
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.experience-card-company {
    margin: 11px 0 0;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.experience-card-location {
    margin: 7px 0 0;
    color: #71817C;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* =========================================================
   EXPERIENCE META
   ========================================================= */

.experience-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
}

.experience-card-meta-label {
    color: #60706B;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.experience-card-meta-value {
    color: #AEBBB8;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


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

.experience-card-description {
    margin: 22px 0 0;
    color: #9BAAA6;
    font-size: 14px;
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: normal;
}


/* =========================================================
   RESPONSIBILITIES
   ========================================================= */

.experience-responsibilities {
    margin-top: 27px;
}

.experience-responsibilities-title {
    margin: 0 0 15px;
    color: #DCE7E3;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.experience-responsibilities-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.experience-responsibility {
    position: relative;
    min-width: 0;
    padding-left: 18px;
    color: #9BAAA6;
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

    .experience-responsibility::before {
        content: "";
        position: absolute;
        top: 0.72em;
        left: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4CC7AA;
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.45);
        transform: translateY(-50%);
    }

.experience-responsibility-title {
    color: #DCE7E3;
    font-weight: 700;
}

.experience-responsibility-description {
    display: block;
    margin-top: 3px;
    color: #879792;
}


/* =========================================================
   EXPERIENCE CARD FOOTER / ACTIONS
   ========================================================= */

.experience-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
}

.experience-letter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 17px;
    border: 1px solid rgba(76, 199, 170, 0.42);
    border-radius: 8px;
    background: rgba(76, 199, 170, 0.08);
    color: #4CC7AA;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

    .experience-letter-button:hover {
        transform: translateY(-2px);
        background: rgba(76, 199, 170, 0.15);
        border-color: rgba(76, 199, 170, 0.72);
        color: #70E2C9;
        box-shadow: 0 7px 20px rgba(76, 199, 170, 0.07);
    }

    .experience-letter-button:focus-visible {
        outline: 2px solid #4CC7AA;
        outline-offset: 3px;
    }


/* =========================================================
   EXPERIENCE EMPTY / LOADING STATES
   ========================================================= */

.experience-loading,
.experience-empty {
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 30px;
    text-align: center;
}

.experience-loading-content,
.experience-empty-content {
    max-width: 700px;
    margin: 0 auto;
}

    .experience-loading-content p,
    .experience-empty-content p {
        margin: 18px 0 0;
        color: #879792;
        font-size: 14px;
        line-height: 1.8;
    }

.experience-loading-line {
    display: block;
    width: 110px;
    height: 2px;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(76, 199, 170, 0.12);
}

    .experience-loading-line::after {
        content: "";
        display: block;
        width: 45px;
        height: 100%;
        background: #4CC7AA;
        box-shadow: 0 0 12px rgba(76, 199, 170, 0.55);
        animation: experienceLoading 1.4s ease-in-out infinite;
    }

@keyframes experienceLoading {
    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(115px);
    }
}

.experience-empty-content h1 {
    margin: 0;
    color: #EDF3F1;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}


/* =========================================================
   EXPERIENCE IMAGE VIEWER

   Used by the full-size experience-letter page.
   ========================================================= */

.experience-letter-view-page {
    width: 100%;
    min-height: 100vh;
    padding: 40px 30px 70px;
    background: rgba(5, 7, 8, 0.96);
    color: #E8EEEC;
    overflow-x: hidden;
}

.experience-letter-view-header {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.experience-letter-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid rgba(76, 199, 170, 0.35);
    border-radius: 7px;
    background: rgba(76, 199, 170, 0.06);
    color: #4CC7AA;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

    .experience-letter-back-button:hover {
        background: rgba(76, 199, 170, 0.12);
        border-color: rgba(76, 199, 170, 0.65);
        transform: translateY(-1px);
    }

.experience-letter-view-title {
    margin: 0;
    color: #EDF3F1;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.experience-letter-view-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    border: 1px solid rgba(76, 199, 170, 0.18);
    border-radius: 16px;
    background: radial-gradient( circle at center, rgba(76, 199, 170, 0.035), transparent 72% );
    overflow: hidden;
}

.experience-letter-view-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.40);
}


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

@media (max-width: 900px) {

    .experience-hero {
        padding: 95px 35px 70px;
    }

    .experience-content {
        padding: 25px 35px 90px;
    }

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

    .experience-image {
        max-height: 560px;
    }

    .experience-letter-view-page {
        padding: 30px 22px 55px;
    }

    .experience-letter-view-container {
        padding: 18px;
    }
}


@media (max-width: 700px) {

    .experience-hero {
        padding: 75px 22px 60px;
    }

    .experience-hero-title {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .experience-hero-description {
        font-size: 14px;
        line-height: 1.75;
    }

    .experience-content {
        padding: 20px 22px 75px;
    }

    .experience-section-heading {
        margin-bottom: 48px;
    }

    .experience-category-list {
        gap: 60px;
    }

    .experience-category-heading {
        margin-bottom: 24px;
    }

        .experience-category-heading h3 {
            font-size: 14px;
            letter-spacing: 2px;
        }

    .experience-card {
        border-radius: 15px;
    }

    .experience-image-wrapper {
        padding: 12px;
    }

    .experience-image {
        max-width: 100%;
        max-height: 430px;
    }

    .experience-card-body {
        padding: 23px;
    }

    .experience-card-title {
        font-size: 22px;
    }

    .experience-card-company {
        font-size: 13px;
    }

    .experience-card-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .experience-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .experience-letter-button {
        width: 100%;
    }

    .experience-letter-view-page {
        padding: 22px 12px 40px;
    }

    .experience-letter-view-header {
        align-items: stretch;
        flex-direction: column;
    }

    .experience-letter-view-title {
        font-size: 24px;
    }

    .experience-letter-view-container {
        padding: 10px;
        border-radius: 12px;
    }

    .experience-letter-view-image {
        max-height: calc(100vh - 150px);
    }
}


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

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

    .experience-hero-title,
    .experience-hero-line span,
    .experience-loading-line::after {
        animation: none !important;
    }

    .experience-card,
    .experience-card::before,
    .experience-image,
    .experience-letter-button,
    .experience-letter-back-button {
        transition: none !important;
    }

        .experience-card:hover {
            transform: none;
        }

            .experience-card:hover::before {
                transform: none;
            }

            .experience-card:hover .experience-image {
                transform: none;
                filter: none;
            }
}


/* =========================================================
   11. GLOBAL EXPERIENCE SAFETY OVERRIDES
   =========================================================

   These rules protect the layout when Admin adds:
   - very long titles
   - long company names
   - long category names
   - long descriptions
   - many responsibilities
   - different image dimensions

   The database controls content.
   CSS controls structure.
   ========================================================= */

.experience-page h1,
.experience-page h2,
.experience-page h3,
.experience-page h4,
.experience-page p,
.experience-page li,
.experience-page a {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.experience-page img {
    max-width: 100%;
}

.experience-page a {
    word-break: normal;
}

.experience-page,
.experience-page *,
.experience-letter-view-page,
.experience-letter-view-page * {
    min-width: 0;
}

@media (max-width: 700px) {

    .experience-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

        .experience-page .experience-grid {
            width: 100%;
            max-width: 100%;
        }
}


/* =========================================================
   FINAL EXPERIENCE PAGE DESIGN OVERRIDES
   =========================================================
   These rules intentionally come last so they safely override
   older Experience styles without changing the rest of the
   portfolio.

   Design goals:
   - Hero stays visible and centered.
   - Hero title gets a smooth animated cyber gradient.
   - Experience document image is a separate rectangular panel.
   - Experience information is a separate rectangular panel.
   - No large rounded "everything in one card" appearance.
   - Portrait documents keep their natural aspect ratio.
   - Dynamic categories/content remain responsive.
   - Long Admin content cannot create horizontal overflow.
   ========================================================= */


/* ---------------------------------------------------------
   EXPERIENCE PAGE BASE
   --------------------------------------------------------- */

.experience-page {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient( circle at 50% 8%, rgba(76, 199, 170, 0.035), transparent 34% ), #050708;
    color: #E8EEEC;
}

    .experience-page *,
    .experience-page *::before,
    .experience-page *::after {
        box-sizing: border-box;
    }


/* ---------------------------------------------------------
   EXPERIENCE HERO
   --------------------------------------------------------- */

.experience-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 430px;
    margin: 0 auto;
    padding: 105px 40px 75px;
    overflow: hidden;
    text-align: center;
}

    .experience-hero::before {
        content: "";
        position: absolute;
        top: 18%;
        left: 50%;
        width: min(760px, 92%);
        height: 280px;
        transform: translateX(-50%);
        background: radial-gradient( ellipse at center, rgba(76, 199, 170, 0.075), rgba(76, 199, 170, 0.018) 38%, transparent 72% );
        filter: blur(2px);
        pointer-events: none;
    }

    .experience-hero::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.08) 20%, rgba(76, 199, 170, 0.38) 50%, rgba(76, 199, 170, 0.08) 80%, transparent );
        pointer-events: none;
    }

.experience-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


/* ---------------------------------------------------------
   HERO TITLE
   --------------------------------------------------------- */

.experience-hero-title {
    margin: 0;
    font-size: clamp(44px, 5.5vw, 72px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    /*
       Animated gradient gives the heading a clean
       cybersecurity/technology appearance without
       making the page look overly flashy.
    */
    color: transparent;
    background: linear-gradient( 105deg, #F3F7F5 0%, #F3F7F5 24%, #8DE7D0 42%, #4CC7AA 50%, #79E6D0 58%, #F3F7F5 78%, #F3F7F5 100% );
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 18px rgba(76, 199, 170, 0.08);
    animation: experienceHeadingGradient 6s ease-in-out infinite, experienceHeadingFloat 5s ease-in-out infinite;
}

@keyframes experienceHeadingGradient {

    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(0.98);
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.12);
    }
}

@keyframes experienceHeadingFloat {

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

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


/* ---------------------------------------------------------
   HERO DESCRIPTION
   --------------------------------------------------------- */

.experience-hero-description {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 26px auto 0;
    color: #AEBBB8;
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   HERO LINE
   --------------------------------------------------------- */

.experience-hero-line {
    position: relative;
    width: min(620px, 82%);
    height: 1px;
    margin: 30px auto 0;
    overflow: hidden;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.12), rgba(76, 199, 170, 0.48), rgba(76, 199, 170, 0.12), transparent );
}

    .experience-hero-line span {
        position: absolute;
        top: -2px;
        left: -120px;
        width: 120px;
        height: 5px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.18), #7DE8D1, rgba(76, 199, 170, 0.18), transparent );
        filter: blur(1px);
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.55), 0 0 22px rgba(76, 199, 170, 0.20);
        animation: experienceHeroScanFinal 4.2s linear infinite;
    }

@keyframes experienceHeroScanFinal {

    0% {
        left: -120px;
    }

    100% {
        left: calc(100% + 120px);
    }
}


/* ---------------------------------------------------------
   EXPERIENCE CONTENT
   --------------------------------------------------------- */

.experience-content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 55px 40px 120px;
    min-width: 0;
}


/* ---------------------------------------------------------
   MAIN SECTION HEADING
   --------------------------------------------------------- */

.experience-section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

    .experience-section-heading h2 {
        margin: 0;
        color: #EAF3F0;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(27px, 3vw, 40px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        overflow-wrap: anywhere;
        text-shadow: 0 0 12px rgba(76, 199, 170, 0.08);
    }

    .experience-section-heading p {
        max-width: 720px;
        margin: 17px auto 0;
        color: #879792;
        font-size: 14px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }


/* ---------------------------------------------------------
   CATEGORY
   --------------------------------------------------------- */

.experience-category-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 82px;
    min-width: 0;
}

.experience-category {
    width: 100%;
    min-width: 0;
}

.experience-category-heading {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

    .experience-category-heading h3 {
        margin: 0;
        color: #4CC7AA;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(18px, 2.2vw, 25px);
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        overflow-wrap: anywhere;
        text-shadow: 0 0 8px rgba(76, 199, 170, 0.16);
    }

    .experience-category-heading p {
        max-width: 700px;
        margin: 11px auto 0;
        color: #7F8E8A;
        font-size: 13px;
        line-height: 1.75;
        overflow-wrap: anywhere;
    }


/* ---------------------------------------------------------
   EXPERIENCE GRID
   --------------------------------------------------------- */

.experience-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
}


/* ---------------------------------------------------------
   EXPERIENCE ITEM
   ---------------------------------------------------------
   IMPORTANT:
   The .experience-card itself is no longer the visual card.
   Image and information are two separate straight panels.
   --------------------------------------------------------- */

.experience-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: visible;
    /*
       Remove the old "everything inside one rounded card"
       appearance.
    */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: experienceCardRevealFinal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: transform 0.3s ease;
}

@keyframes experienceCardRevealFinal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

.experience-card:hover {
    transform: translateY(-3px);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.experience-card::before,
.experience-card::after {
    display: none;
}


/* ---------------------------------------------------------
   IMAGE PANEL
   ---------------------------------------------------------
   This is deliberately independent from the text panel.
   The image keeps its original portrait proportions.
   --------------------------------------------------------- */

.experience-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 20px;
    overflow: hidden;
    /*
       Straight rectangular document frame.
       No forced aspect-ratio.
    */
    border: 1px solid rgba(76, 199, 170, 0.20);
    border-radius: 0;
    background: linear-gradient( 145deg, rgba(11, 21, 19, 0.96), rgba(5, 10, 11, 0.98) );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.experience-card:hover .experience-image-wrapper {
    border-color: rgba(76, 199, 170, 0.40);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28), 0 0 22px rgba(76, 199, 170, 0.045);
}

.experience-image {
    display: block;
    /*
       IMPORTANT:
       Width and height are auto so portrait letters
       are never stretched into a square.
    */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    transition: transform 0.35s ease, filter 0.35s ease;
}

.experience-card:hover .experience-image {
    transform: scale(1.008);
    filter: brightness(1.025);
}


/* ---------------------------------------------------------
   TEXT PANEL
   ---------------------------------------------------------
   Completely separate visual box from the image.
   --------------------------------------------------------- */

.experience-card-body {
    width: 100%;
    min-width: 0;
    margin-top: 16px;
    padding: 28px 28px 30px;
    border: 1px solid rgba(76, 199, 170, 0.16);
    border-radius: 0;
    background: linear-gradient( 145deg, rgba(9, 18, 17, 0.94), rgba(5, 10, 11, 0.98) );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.experience-card:hover .experience-card-body {
    border-color: rgba(76, 199, 170, 0.30);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}


/* ---------------------------------------------------------
   EXPERIENCE TEXT
   --------------------------------------------------------- */

.experience-card-title {
    margin: 0;
    color: #EDF3F1;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.experience-card-company {
    margin: 10px 0 0;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.experience-card-location {
    margin: 7px 0 0;
    color: #71817C;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   DATE / META
   --------------------------------------------------------- */

.experience-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
}

.experience-card-meta-label {
    color: #60706B;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.experience-card-meta-value {
    color: #AEBBB8;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.experience-card-description {
    margin: 22px 0 0;
    color: #9BAAA6;
    font-size: 14px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   RESPONSIBILITIES
   --------------------------------------------------------- */

.experience-responsibilities {
    margin-top: 27px;
}

.experience-responsibilities-title {
    margin: 0 0 15px;
    color: #DCE7E3;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.experience-responsibilities-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.experience-responsibility {
    position: relative;
    min-width: 0;
    padding-left: 18px;
    color: #9BAAA6;
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

    .experience-responsibility::before {
        content: "";
        position: absolute;
        top: 0.72em;
        left: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4CC7AA;
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.45);
        transform: translateY(-50%);
    }

.experience-responsibility-title {
    color: #DCE7E3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.experience-responsibility-description {
    display: block;
    margin-top: 3px;
    color: #879792;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   EXPERIENCE BUTTON
   --------------------------------------------------------- */

.experience-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
}

.experience-letter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 11px 17px;
    border: 1px solid rgba(76, 199, 170, 0.32);
    border-radius: 0;
    background: linear-gradient( 135deg, rgba(76, 199, 170, 0.08), rgba(76, 199, 170, 0.025) );
    color: #72DCC3;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

    .experience-letter-button:hover {
        border-color: rgba(76, 199, 170, 0.65);
        background: linear-gradient( 135deg, rgba(76, 199, 170, 0.15), rgba(76, 199, 170, 0.05) );
        color: #A7F0DF;
        transform: translateY(-2px);
    }


/* ---------------------------------------------------------
   EXPERIENCE LETTER VIEW PAGE
   --------------------------------------------------------- */

.experience-letter-view-page {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    padding: 35px 30px 70px;
    overflow-x: hidden;
}

.experience-letter-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 24px;
}

.experience-letter-view-title {
    margin: 0;
    color: #EDF3F1;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.experience-letter-view-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(76, 199, 170, 0.18);
    border-radius: 0;
    background: linear-gradient( 145deg, rgba(9, 18, 17, 0.95), rgba(5, 10, 11, 0.98) );
    overflow: hidden;
}

.experience-letter-view-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.40);
}


/* ---------------------------------------------------------
   SAFE DYNAMIC CONTENT
   --------------------------------------------------------- */

.experience-page h1,
.experience-page h2,
.experience-page h3,
.experience-page h4,
.experience-page h5,
.experience-page p,
.experience-page li,
.experience-page a,
.experience-page span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.experience-page img {
    max-width: 100%;
}

.experience-page,
.experience-page *,
.experience-page *::before,
.experience-page *::after,
.experience-letter-view-page,
.experience-letter-view-page *,
.experience-letter-view-page *::before,
.experience-letter-view-page *::after {
    min-width: 0;
}

    .experience-page a {
        word-break: normal;
    }


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .experience-hero {
        min-height: 390px;
        padding: 90px 30px 65px;
    }

    .experience-content {
        padding: 45px 30px 95px;
    }

    .experience-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .experience-image {
        max-height: 560px;
    }

    .experience-letter-view-page {
        padding: 30px 22px 55px;
    }
}


@media (max-width: 640px) {

    .experience-hero {
        min-height: 350px;
        padding: 75px 20px 55px;
    }

    .experience-hero-title {
        font-size: clamp(40px, 13vw, 58px);
        letter-spacing: -0.5px;
    }

    .experience-hero-description {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.75;
    }

    .experience-hero-line {
        margin-top: 25px;
    }

    .experience-content {
        padding: 35px 20px 80px;
    }

    .experience-section-heading {
        margin-bottom: 50px;
    }

        .experience-section-heading h2 {
            font-size: 25px;
        }

        .experience-section-heading p {
            font-size: 13px;
        }

    .experience-category-list {
        gap: 60px;
    }

    .experience-category-heading {
        margin-bottom: 23px;
    }

        .experience-category-heading h3 {
            font-size: 18px;
            letter-spacing: 2px;
        }

        .experience-category-heading p {
            font-size: 13px;
        }

    .experience-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .experience-image-wrapper {
        padding: 14px;
    }

    .experience-image {
        max-width: 100%;
        max-height: 500px;
    }

    .experience-card-body {
        margin-top: 12px;
        padding: 22px 19px 24px;
    }

    .experience-card-title {
        font-size: 21px;
    }

    .experience-card-company {
        font-size: 13px;
    }

    .experience-card-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .experience-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .experience-letter-button {
        width: 100%;
    }

    .experience-letter-view-page {
        padding: 22px 12px 40px;
    }

    .experience-letter-view-header {
        align-items: stretch;
        flex-direction: column;
    }

    .experience-letter-view-title {
        font-size: 24px;
    }

    .experience-letter-view-container {
        padding: 10px;
    }

    .experience-letter-view-image {
        max-height: calc(100vh - 150px);
    }
}


@media (max-width: 380px) {

    .experience-hero {
        padding-left: 15px;
        padding-right: 15px;
    }

    .experience-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .experience-hero-title {
        font-size: 38px;
    }

    .experience-card-body {
        padding-left: 17px;
        padding-right: 17px;
    }

    .experience-image-wrapper {
        padding: 10px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .experience-hero-title,
    .experience-hero-line span,
    .experience-card {
        animation: none !important;
    }

        .experience-card,
        .experience-card:hover,
        .experience-image-wrapper,
        .experience-image,
        .experience-card-body,
        .experience-letter-button {
            transition: none !important;
            transform: none !important;
        }

            .experience-card:hover .experience-image {
                transform: none !important;
                filter: none !important;
            }
}

/* =========================================================
   FINAL EXPERIENCE HEADING OVERRIDES
   =========================================================
   These rules intentionally come LAST so they safely override
   any earlier Experience rules in this large stylesheet.

   - The main EXPERIENCE heading animates when the page opens.
   - A subtle continuous glow keeps the heading alive instead
     of leaving it completely static.
   - The color uses a restrained teal/cyan gradient.
   - Category and section headings also enter smoothly.
   - Reduced-motion users get no animation.
   ========================================================= */


/* ---------------------------------------------------------
   MAIN EXPERIENCE HERO HEADING
   --------------------------------------------------------- */

.experience-hero-title {
    position: relative;
    display: inline-block;
    margin: 0;
    /*
       Animated cyber-style gradient.
    */
    background: linear-gradient( 115deg, #EAF8F4 0%, #EAF8F4 28%, #4CC7AA 45%, #7DE8D0 58%, #EAF8F4 76%, #4CC7AA 100% );
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /*
       First animation:
       heading enters when /experience opens.

       Second animation:
       very subtle movement/glow continues afterwards.
    */
    animation: experienceHeadingEntrance 0.95s cubic-bezier(0.22, 1, 0.36, 1) both, experienceHeadingGlow 5s ease-in-out 0.95s infinite;
    will-change: transform, opacity, background-position, filter;
}


/* ---------------------------------------------------------
   HERO HEADING ENTRANCE
   --------------------------------------------------------- */

@keyframes experienceHeadingEntrance {

    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.965);
        filter: blur(7px) brightness(0.65);
        background-position: 0% 50%;
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) scale(1.008);
        filter: blur(0) brightness(1.12);
        background-position: 58% 50%;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) brightness(1);
        background-position: 100% 50%;
    }
}


/* ---------------------------------------------------------
   SUBTLE CONTINUOUS HEADING ANIMATION
   --------------------------------------------------------- */

@keyframes experienceHeadingGlow {

    0%, 100% {
        transform: translateY(0);
        background-position: 100% 50%;
        filter: brightness(1) drop-shadow(0 0 0 rgba(76, 199, 170, 0));
    }

    50% {
        transform: translateY(-2px);
        background-position: 0% 50%;
        filter: brightness(1.08) drop-shadow( 0 0 9px rgba(76, 199, 170, 0.20) );
    }
}


/* ---------------------------------------------------------
   HERO DESCRIPTION ENTRANCE
   --------------------------------------------------------- */

.experience-hero-description {
    animation: experienceHeroDescriptionEntrance 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

@keyframes experienceHeroDescriptionEntrance {

    0% {
        opacity: 0;
        transform: translateY(14px);
    }

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


/* ---------------------------------------------------------
   HERO LINE ENTRANCE
   --------------------------------------------------------- */

.experience-hero-line {
    animation: experienceHeroLineEntrance 0.8s ease-out 0.35s both;
}

@keyframes experienceHeroLineEntrance {

    0% {
        opacity: 0;
        transform: scaleX(0.55);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}


/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */

.experience-section-heading {
    animation: experienceSectionHeadingEntrance 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@keyframes experienceSectionHeadingEntrance {

    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* ---------------------------------------------------------
   CATEGORY HEADING
   --------------------------------------------------------- */

.experience-category-heading {
    animation: experienceCategoryHeadingEntrance 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

    .experience-category-heading h3 {
        background: linear-gradient( 110deg, #4CC7AA, #82E8D3, #4CC7AA );
        background-size: 220% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: experienceCategoryColor 4.5s ease-in-out infinite;
    }

@keyframes experienceCategoryHeadingEntrance {

    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

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

@keyframes experienceCategoryColor {

    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow( 0 0 3px rgba(76, 199, 170, 0.08) );
    }

    50% {
        background-position: 100% 50%;
        filter: drop-shadow( 0 0 8px rgba(76, 199, 170, 0.18) );
    }
}


/* ---------------------------------------------------------
   EXPERIENCE CARDS
   --------------------------------------------------------- */

.experience-grid .experience-card {
    animation: experienceCardEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

    .experience-grid .experience-card:nth-child(1) {
        animation-delay: 0.12s;
    }

    .experience-grid .experience-card:nth-child(2) {
        animation-delay: 0.22s;
    }

    .experience-grid .experience-card:nth-child(3) {
        animation-delay: 0.32s;
    }

    .experience-grid .experience-card:nth-child(4) {
        animation-delay: 0.42s;
    }

    .experience-grid .experience-card:nth-child(5) {
        animation-delay: 0.52s;
    }

    .experience-grid .experience-card:nth-child(6) {
        animation-delay: 0.62s;
    }

@keyframes experienceCardEntrance {

    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.985);
    }

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


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .experience-hero-title,
    .experience-hero-description,
    .experience-hero-line,
    .experience-section-heading,
    .experience-category-heading,
    .experience-category-heading h3,
    .experience-grid .experience-card {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* =========================================================
   FINAL EXPERIENCE DESIGN
   =========================================================
   This is the final public Experience layout.

   Structure:
   Category
       -> Experience record
          -> Letter preview | Experience information

   The layout is content-driven:
   - Any number of categories
   - Any number of experiences per category
   - Different image sizes
   - Long titles/descriptions
   - Missing optional letters
   - Responsive/mobile stacking
   - No horizontal overflow
   ========================================================= */


/* ---------------------------------------------------------
   EXPERIENCE PAGE / HERO
   --------------------------------------------------------- */

.experience-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.experience-hero {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 88px 42px 58px;
    text-align: center;
    box-sizing: border-box;
}

.experience-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.experience-hero-title {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    background: linear-gradient( 110deg, #E8F5F1 0%, #4CC7AA 30%, #8AF1D8 50%, #4CC7AA 70%, #E8F5F1 100% );
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    animation: finalExperienceHeadingIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, finalExperienceHeadingGlow 5s ease-in-out 0.9s infinite;
    will-change: transform, opacity, background-position, filter;
}

@keyframes finalExperienceHeadingIn {

    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.94);
        filter: blur(7px);
        background-position: 0% 50%;
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.015);
        filter: blur(0);
        background-position: 65% 50%;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        background-position: 100% 50%;
    }
}

@keyframes finalExperienceHeadingGlow {

    0%, 100% {
        transform: translateY(0);
        background-position: 100% 50%;
        filter: drop-shadow( 0 0 4px rgba(76, 199, 170, 0.05) );
    }

    50% {
        transform: translateY(-2px);
        background-position: 0% 50%;
        filter: drop-shadow( 0 0 12px rgba(76, 199, 170, 0.22) );
    }
}

.experience-hero-description {
    width: 100%;
    max-width: 760px;
    margin: 24px auto 0;
    color: rgba(232, 238, 236, 0.68);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    animation: finalExperienceFadeUp 0.75s ease-out 0.15s both;
}

.experience-hero-line {
    position: relative;
    width: min(440px, 80%);
    height: 1px;
    margin: 27px auto 0;
    background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.15), rgba(76, 199, 170, 0.48), rgba(76, 199, 170, 0.15), transparent );
    overflow: hidden;
    animation: finalExperienceLineIn 0.8s ease-out 0.35s both;
}

    .experience-hero-line span {
        position: absolute;
        top: -2px;
        left: -80px;
        width: 80px;
        height: 5px;
        background: linear-gradient( 90deg, transparent, #4CC7AA, transparent );
        filter: blur(0.5px);
        box-shadow: 0 0 8px rgba(76, 199, 170, 0.5);
        animation: finalExperienceScan 4s linear infinite;
    }

@keyframes finalExperienceFadeUp {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes finalExperienceLineIn {

    from {
        opacity: 0;
        transform: scaleX(0.55);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes finalExperienceScan {

    from {
        left: -80px;
    }

    to {
        left: calc(100% + 80px);
    }
}


/* ---------------------------------------------------------
   EXPERIENCE CONTENT
   --------------------------------------------------------- */

.experience-content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 42px 100px;
    box-sizing: border-box;
}

.experience-section-heading {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

    .experience-section-heading h2 {
        margin: 0;
        color: #E8EEEC;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 1px;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .experience-section-heading p {
        max-width: 740px;
        margin: 16px auto 0;
        color: rgba(232, 238, 236, 0.60);
        font-size: 14px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }


/* ---------------------------------------------------------
   CATEGORY
   --------------------------------------------------------- */

.experience-category-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 58px;
}

.experience-category {
    width: 100%;
    min-width: 0;
}

.experience-category-heading {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 18px;
    padding: 0;
    text-align: center;
}

    .experience-category-heading h3 {
        margin: 0;
        color: #EAF2EF;
        font-family: "Courier New", Courier, monospace;
        font-size: clamp(21px, 2.5vw, 29px);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 1px;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .experience-category-heading p {
        width: 100%;
        max-width: 780px;
        margin: 8px auto 0;
        color: #81918C;
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
        overflow-wrap: anywhere;
    }


/* ---------------------------------------------------------
   EXPERIENCE RECORD

   Image and text are two separate visual panels inside
   the same experience record.

   The image does NOT create a giant empty square.
   --------------------------------------------------------- */

.experience-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.experience-card {
    position: relative;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(230px, 34%) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(76, 199, 170, 0.18);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(11, 22, 20, 0.96), rgba(5, 12, 11, 0.98) );
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .experience-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.55), transparent );
        opacity: 0.5;
        pointer-events: none;
        z-index: 5;
    }

    .experience-card:hover {
        transform: translateY(-4px);
        border-color: rgba(76, 199, 170, 0.38);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30), 0 0 24px rgba(76, 199, 170, 0.045);
    }


/* ---------------------------------------------------------
   LETTER PANEL
   --------------------------------------------------------- */

.experience-image-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient( 145deg, rgba(4, 12, 11, 0.95), rgba(8, 19, 17, 0.85) );
    border-right: 1px solid rgba(76, 199, 170, 0.14);
    overflow: hidden;
}

    .experience-image-wrapper::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.35), transparent );
        opacity: 0.55;
        pointer-events: none;
    }

.experience-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
    border: 1px solid rgba(76, 199, 170, 0.22);
    border-radius: 5px;
    background: #F5F5F5;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

.experience-card:hover .experience-image {
    transform: scale(1.012);
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.45), 0 0 16px rgba(76, 199, 170, 0.06);
    filter: brightness(1.015);
}


/* ---------------------------------------------------------
   TEXT PANEL
   --------------------------------------------------------- */

.experience-card-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 32px 34px 30px;
    background: linear-gradient( 180deg, rgba(12, 24, 22, 0.60), rgba(6, 13, 12, 0.30) );
}

.experience-title {
    margin: 0;
    color: #EEF5F2;
    font-size: clamp(21px, 2.5vw, 29px);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.experience-company {
    margin: 10px 0 0;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.experience-location {
    margin: 6px 0 0;
    color: #72817D;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   DURATION
   --------------------------------------------------------- */

.experience-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(76, 199, 170, 0.12);
}

.experience-date-label {
    color: #687873;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.experience-date-value {
    color: #AAB7B3;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.experience-description {
    margin: 20px 0 0;
    color: #A2AFAB;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   RESPONSIBILITIES
   --------------------------------------------------------- */

.experience-responsibilities {
    margin-top: 23px;
}

    .experience-responsibilities h5 {
        margin: 0 0 13px;
        color: #DCE6E2;
        font-family: "Courier New", Courier, monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .experience-responsibilities ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .experience-responsibilities li {
        position: relative;
        display: block;
        min-width: 0;
        padding-left: 18px;
        color: #97A6A1;
        font-size: 13px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

        .experience-responsibilities li::before {
            content: "";
            position: absolute;
            top: 0.72em;
            left: 1px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #4CC7AA;
            box-shadow: 0 0 8px rgba(76, 199, 170, 0.40);
            transform: translateY(-50%);
        }


        /* Responsibility title */
        .experience-responsibilities li strong {
            display: inline;
            color: #D4DFDB;
            font-weight: 700;
            margin-right: 8px;
            overflow-wrap: anywhere;
        }


        /* Responsibility description */
        .experience-responsibilities li span {
            display: inline;
            color: #8C9B96;
            overflow-wrap: anywhere;
        }




/* ---------------------------------------------------------
   BUTTON
   --------------------------------------------------------- */

.experience-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 25px;
}

.experience-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 18px;
    border: 1px solid rgba(76, 199, 170, 0.62);
    border-radius: 7px;
    background: rgba(76, 199, 170, 0.06);
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

    .experience-button:hover {
        transform: translateY(-2px);
        background: rgba(76, 199, 170, 0.13);
        border-color: #4CC7AA;
        color: #7DE8D0;
        box-shadow: 0 8px 22px rgba(76, 199, 170, 0.08);
    }

    .experience-button:focus-visible {
        outline: 2px solid #4CC7AA;
        outline-offset: 3px;
    }


/* ---------------------------------------------------------
   EMPTY / LOADING
   --------------------------------------------------------- */

.experience-loading,
.experience-empty {
    width: 100%;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
}

.experience-loading-content,
.experience-empty-content {
    width: 100%;
    max-width: 700px;
}

    .experience-loading-content p,
    .experience-empty-content p {
        margin: 16px 0 0;
        color: #84938E;
        font-size: 14px;
        line-height: 1.8;
    }

.experience-loading-line {
    display: block;
    width: 110px;
    height: 2px;
    margin: 0 auto;
    background: rgba(76, 199, 170, 0.12);
    overflow: hidden;
}

    .experience-loading-line::after {
        content: "";
        display: block;
        width: 45px;
        height: 100%;
        background: #4CC7AA;
        box-shadow: 0 0 10px rgba(76, 199, 170, 0.45);
        animation: finalExperienceLoading 1.4s ease-in-out infinite;
    }

@keyframes finalExperienceLoading {

    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(115px);
    }
}

.experience-empty-content h1 {
    margin: 0;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(34px, 5vw, 60px);
    letter-spacing: 3px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .experience-hero {
        padding: 75px 28px 50px;
    }

    .experience-content {
        padding-left: 28px;
        padding-right: 28px;
    }

    .experience-card {
        grid-template-columns: minmax(190px, 31%) minmax(0, 1fr);
    }

    .experience-image-wrapper {
        padding: 14px;
    }

    .experience-image {
        max-height: 500px;
    }

    .experience-card-content {
        padding: 27px 25px 25px;
    }
}


@media (max-width: 700px) {

    .experience-hero {
        padding: 68px 20px 45px;
    }

    .experience-hero-title {
        font-size: clamp(38px, 12vw, 58px);
        letter-spacing: 3px;
    }

    .experience-hero-description {
        font-size: 14px;
    }

    .experience-content {
        padding: 15px 20px 75px;
    }

    .experience-section-heading {
        margin-bottom: 45px;
    }

    .experience-category-list {
        gap: 50px;
    }

    .experience-category-heading {
        margin-bottom: 16px;
    }

    /*
       On phones the two panels become stacked.
       This prevents tiny document previews and keeps
       the text readable.
    */

    .experience-card {
        grid-template-columns: 1fr;
    }

    .experience-image-wrapper {
        min-height: 0;
        padding: 15px;
        border-right: none;
        border-bottom: 1px solid rgba(76, 199, 170, 0.14);
    }

    .experience-image {
        width: auto;
        max-width: 100%;
        max-height: 460px;
    }

    .experience-card-content {
        padding: 24px 21px 22px;
    }

    .experience-title {
        font-size: 21px;
    }

    .experience-company {
        font-size: 13px;
    }

    .experience-description {
        font-size: 13px;
    }

    .experience-responsibilities li {
        font-size: 12.5px;
    }

    .experience-actions {
        width: 100%;
    }

    .experience-button {
        width: 100%;
    }
}


@media (max-width: 380px) {

    .experience-hero {
        padding-left: 15px;
        padding-right: 15px;
    }

    .experience-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .experience-card-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .experience-image-wrapper {
        padding: 10px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .experience-hero-title,
    .experience-hero-description,
    .experience-hero-line,
    .experience-hero-line span,
    .experience-loading-line::after {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .experience-card,
    .experience-image,
    .experience-button {
        transition: none !important;
    }

        .experience-card:hover {
            transform: none;
        }

            .experience-card:hover .experience-image {
                transform: none;
                filter: none;
            }

        .experience-button:hover {
            transform: none;
        }
}


/* ---------------------------------------------------------
   DYNAMIC CONTENT SAFETY
   --------------------------------------------------------- */

.experience-page,
.experience-page *,
.experience-page *::before,
.experience-page *::after {
    box-sizing: border-box;
}

    .experience-page h1,
    .experience-page h2,
    .experience-page h3,
    .experience-page h4,
    .experience-page h5,
    .experience-page p,
    .experience-page li,
    .experience-page a {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .experience-page img {
        max-width: 100%;
    }

    .experience-page,
    .experience-page * {
        min-width: 0;
    }
/* =========================================================
   10. CONTACT
   ========================================================= */


/* ---------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------- */

.contact-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px 100px;
    box-sizing: border-box;
    overflow: hidden;
}

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {
        box-sizing: border-box;
    }


/* ---------------------------------------------------------
   CONTACT HERO
   --------------------------------------------------------- */

.contact-hero {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto 70px;
    text-align: center;
}


/* ---------------------------------------------------------
   TERMINAL COMMAND ABOVE TITLE
   --------------------------------------------------------- */

.contact-hero-terminal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
}

.contact-prompt {
    color: #4CC7AA;
    font-weight: 700;
}

.contact-command {
    color: #B9C8C3;
}

.contact-cursor {
    width: 7px;
    height: 16px;
    display: inline-block;
    background: #4CC7AA;
    box-shadow: 0 0 8px rgba(76, 199, 170, 0.55), 0 0 16px rgba(76, 199, 170, 0.20);
    animation: contactCursorBlink 1s steps(1) infinite;
}

@keyframes contactCursorBlink {

    0%, 45% {
        opacity: 1;
    }

    46%, 100% {
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   MAIN CONTACT ME HEADING
   --------------------------------------------------------- */

.contact-hero h1 {
    display: block;
    width: 100%;
    margin: 0 auto;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.28), 0 0 22px rgba(76, 199, 170, 0.14), 0 0 40px rgba(76, 199, 170, 0.06);
    overflow-wrap: anywhere;
    animation: contactTitleReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, contactTitleGlow 4s ease-in-out 0.9s infinite;
}


/* ---------------------------------------------------------
   STRAIGHT HERO LINE
   ---------------------------------------------------------

   Same visual direction as the Experience / Services
   horizontal hero line.

   No circular wave.
   No radial repeating pattern.
   --------------------------------------------------------- */

.contact-hero-line {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: 2px;
    margin: 34px auto 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(76, 199, 170, 0.10) 15%, rgba(76, 199, 170, 0.30) 35%, rgba(76, 199, 170, 0.55) 50%, rgba(76, 199, 170, 0.30) 65%, rgba(76, 199, 170, 0.10) 85%, transparent 100% );
    overflow: hidden;
    opacity: 0.8;
    animation: contactLineReveal 1s ease 0.35s both;
}


    /* ---------------------------------------------------------
   MOVING GLOW / SCANNER
   --------------------------------------------------------- */

    .contact-hero-line::after {
        content: "";
        position: absolute;
        top: -5px;
        left: -180px;
        width: 180px;
        height: 12px;
        background: linear-gradient( 90deg, transparent, rgba(76, 199, 170, 0.08), rgba(76, 199, 170, 0.32), rgba(76, 199, 170, 0.08), transparent );
        filter: blur(2px);
        opacity: 0.7;
        animation: contactHeroScanner 4.2s ease-in-out infinite;
        pointer-events: none;
    }


/* ---------------------------------------------------------
   CONTACT TITLE ENTRANCE
   --------------------------------------------------------- */

@keyframes contactTitleReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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


/* ---------------------------------------------------------
   CONTACT TITLE CONTINUOUS GLOW
   --------------------------------------------------------- */

@keyframes contactTitleGlow {

    0%, 100% {
        text-shadow: 0 0 8px rgba(76, 199, 170, 0.25), 0 0 22px rgba(76, 199, 170, 0.12), 0 0 40px rgba(76, 199, 170, 0.05);
    }

    50% {
        text-shadow: 0 0 10px rgba(76, 199, 170, 0.34), 0 0 26px rgba(76, 199, 170, 0.16), 0 0 45px rgba(76, 199, 170, 0.07);
    }
}


/* ---------------------------------------------------------
   HERO LINE ENTRANCE
   --------------------------------------------------------- */

@keyframes contactLineReveal {

    from {
        opacity: 0;
        transform: scaleX(0.55);
    }

    to {
        opacity: 0.8;
        transform: scaleX(1);
    }
}


/* ---------------------------------------------------------
   HERO LINE SCANNER
   --------------------------------------------------------- */

@keyframes contactHeroScanner {

    0% {
        left: -180px;
        opacity: 0;
    }

    15% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.75;
    }

    85% {
        opacity: 0.35;
    }

    100% {
        left: calc(100% + 180px);
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   HERO DESCRIPTION
   --------------------------------------------------------- */

.contact-hero p {
    width: 100%;
    max-width: 780px;
    margin: 30px auto 0;
    color: #879791;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    overflow-wrap: anywhere;
    animation: contactDescriptionReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}


/* ---------------------------------------------------------
   HERO DESCRIPTION ENTRANCE
   --------------------------------------------------------- */

@keyframes contactDescriptionReveal {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


/* ---------------------------------------------------------
   CONTACT SECTION
   --------------------------------------------------------- */

.contact-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   CONTACT SECTION HEADING
   --------------------------------------------------------- */

.contact-section-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 30px;
    text-align: center;
}

.contact-section-label {
    display: block;
    margin-bottom: 12px;
    color: #4CC7AA;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.contact-section-heading h2 {
    margin: 0;
    color: #E6EFEC;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(23px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.contact-section-heading p {
    width: 100%;
    max-width: 800px;
    margin: 12px auto 0;
    color: #81908B;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   TERMINAL STATUS
   --------------------------------------------------------- */

.contact-terminal-status {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 38px;
    padding: 9px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(76, 199, 170, 0.18);
    border-radius: 6px;
    background: rgba(76, 199, 170, 0.035);
    color: #8EA29B;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

.contact-status-indicator {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #4CC7AA;
    box-shadow: 0 0 8px rgba(76, 199, 170, 0.65), 0 0 15px rgba(76, 199, 170, 0.20);
}


/* ---------------------------------------------------------
   CONTACT GRID
   --------------------------------------------------------- */

.contact-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.90fr);
    gap: 28px;
    align-items: start;
}


/* ---------------------------------------------------------
   FORM LEFT
   INFORMATION RIGHT
   --------------------------------------------------------- */

.contact-form-panel {
    grid-column: 1;
    grid-row: 1;
}

.contact-info-panel {
    grid-column: 2;
    grid-row: 1;
}


/* ---------------------------------------------------------
   CONTACT PANELS
   --------------------------------------------------------- */

.contact-info-panel,
.contact-form-panel {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(76, 199, 170, 0.10);
    border-radius: 8px;
    background: linear-gradient( 145deg, rgba(15, 23, 21, 0.98), rgba(9, 15, 14, 0.98) );
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.025);
    overflow: hidden;
}


/* ---------------------------------------------------------
   PANEL HEADER
   --------------------------------------------------------- */

.contact-panel-header {
    min-height: 45px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    background: rgba(255, 255, 255, 0.012);
}

.contact-panel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34433F;
}

    .contact-panel-dot:first-child {
        background: #4CC7AA;
        box-shadow: 0 0 7px rgba(76, 199, 170, 0.55);
    }

.contact-panel-title {
    margin-left: 8px;
    color: #71817B;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   CONTACT INFORMATION
   --------------------------------------------------------- */

.contact-info-list {
    width: 100%;
    padding: 8px 20px 22px;
}

.contact-info-item {
    width: 100%;
    min-width: 0;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

    .contact-info-item:last-child {
        border-bottom: 0;
    }

.contact-info-label {
    display: block;
    margin-bottom: 6px;
    color: #60716B;
    font-family: "Courier New", Courier, monospace;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.contact-info-value {
    display: block;
    max-width: 100%;
    color: #C4D0CC;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.7;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a.contact-info-value:hover {
    color: #4CC7AA;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.25);
}

.contact-online {
    color: #4CC7AA;
    text-shadow: 0 0 8px rgba(76, 199, 170, 0.20);
}


/* ---------------------------------------------------------
   SOCIAL LINKS
   --------------------------------------------------------- */

.contact-social-section {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.contact-social-links {
    width: 100%;
    padding: 16px 20px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.contact-social-link {
    min-width: 0;
    max-width: 100%;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(76, 199, 170, 0.12);
    border-radius: 5px;
    background: rgba(76, 199, 170, 0.025);
    color: #93A39E;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

    .contact-social-link i {
        flex: 0 0 auto;
        color: #4CC7AA;
        font-size: 12px;
        text-shadow: 0 0 7px rgba(76, 199, 170, 0.25);
    }

    .contact-social-link:hover {
        border-color: rgba(76, 199, 170, 0.32);
        background: rgba(76, 199, 170, 0.06);
        color: #D2DDD9;
        transform: translateY(-1px);
    }


/* ---------------------------------------------------------
   CONTACT FORM
   --------------------------------------------------------- */

.contact-form-panel {
    min-height: 100%;
}

    .contact-form-panel form {
        width: 100%;
        padding: 24px 24px 26px;
    }

.contact-form-field {
    width: 100%;
    min-width: 0;
    margin-bottom: 21px;
}

    .contact-form-field label {
        display: block;
        margin-bottom: 8px;
        color: #71817B;
        font-family: "Courier New", Courier, monospace;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

.contact-input,
.contact-textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(76, 199, 170, 0.10);
    border-radius: 5px;
    background: rgba(5, 10, 9, 0.72);
    color: #D2DDD9;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.6;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-input {
    min-height: 44px;
    padding: 11px 13px;
}

.contact-textarea {
    min-height: 165px;
    padding: 12px 13px;
    resize: vertical;
}

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: #485752;
        opacity: 1;
    }

    .contact-input:focus,
    .contact-textarea:focus {
        border-color: rgba(76, 199, 170, 0.48);
        background: rgba(7, 15, 13, 0.90);
        box-shadow: 0 0 0 2px rgba(76, 199, 170, 0.07), 0 0 16px rgba(76, 199, 170, 0.06);
    }


/* ---------------------------------------------------------
   VALIDATION
   --------------------------------------------------------- */

.contact-validation-message {
    margin-top: 7px;
    color: #D58B8B;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   FORM SUBMIT BUTTON
   --------------------------------------------------------- */

.contact-submit-button {
    width: 100%;
    min-height: 46px;
    margin-top: 5px;
    padding: 11px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(76, 199, 170, 0.35);
    border-radius: 5px;
    background: linear-gradient( 135deg, rgba(76, 199, 170, 0.13), rgba(76, 199, 170, 0.045) );
    color: #BFE4DA;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(76, 199, 170, 0.04);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .contact-submit-button:hover:not(:disabled) {
        border-color: rgba(76, 199, 170, 0.65);
        background: linear-gradient( 135deg, rgba(76, 199, 170, 0.20), rgba(76, 199, 170, 0.07) );
        color: #E0F5EF;
        box-shadow: 0 0 18px rgba(76, 199, 170, 0.12), 0 0 32px rgba(76, 199, 170, 0.05);
        transform: translateY(-1px);
    }

    .contact-submit-button:active:not(:disabled) {
        transform: translateY(0);
    }

    .contact-submit-button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }


/* ---------------------------------------------------------
   FORM SUCCESS / ERROR
   --------------------------------------------------------- */

.contact-form-message {
    width: 100%;
    margin-bottom: 20px;
    padding: 11px 13px;
    border-radius: 5px;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.contact-form-success {
    border: 1px solid rgba(76, 199, 170, 0.20);
    background: rgba(76, 199, 170, 0.045);
    color: #8FD7C4;
}

.contact-form-error {
    border: 1px solid rgba(213, 139, 139, 0.20);
    background: rgba(213, 139, 139, 0.045);
    color: #D58B8B;
}


/* ---------------------------------------------------------
   DISABLED FORM
   --------------------------------------------------------- */

.contact-form-disabled {
    min-height: 300px;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-disabled-icon {
    margin-bottom: 15px;
    color: #D58B8B;
    font-family: "Courier New", Courier, monospace;
    font-size: 22px;
}

.contact-form-disabled p {
    max-width: 400px;
    margin: 0;
    color: #788783;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   CONTACT PAGE UNAVAILABLE
   --------------------------------------------------------- */

.contact-page-unavailable {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-terminal {
    width: 100%;
    max-width: 700px;
    border: 1px solid rgba(76, 199, 170, 0.15);
    border-radius: 8px;
    background: rgba(10, 16, 15, 0.96);
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25), 0 0 25px rgba(76, 199, 170, 0.03);
}

.contact-terminal-header {
    min-height: 42px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-terminal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43514D;
}

.contact-terminal-title {
    margin-left: 8px;
    color: #687873;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
}

.contact-terminal-body {
    padding: 25px;
}

.contact-terminal-line {
    margin: 0 0 13px;
    color: #B6C6C1;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.6;
}

.contact-system-message {
    margin: 0;
    color: #7D8D88;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .contact-page {
        padding: 65px 25px 80px;
    }

    /*
       Desktop:
       FORM LEFT
       INFORMATION RIGHT

       Mobile:
       FORM FIRST
       INFORMATION SECOND
    */

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-form-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .contact-info-panel {
        grid-column: 1;
        grid-row: 2;
    }

    .contact-info-panel,
    .contact-form-panel {
        width: 100%;
    }
}


@media (max-width: 600px) {

    .contact-page {
        padding: 50px 16px 65px;
    }

    .contact-hero {
        margin-bottom: 50px;
    }

    .contact-hero-terminal {
        font-size: 11px;
    }

    .contact-hero h1 {
        font-size: clamp(28px, 9vw, 42px);
        letter-spacing: 2px;
    }

    .contact-hero-line {
        margin-top: 28px;
    }

    .contact-hero p {
        font-size: 12px;
        line-height: 1.75;
    }

    .contact-section-heading {
        margin-bottom: 24px;
    }

        .contact-section-heading h2 {
            font-size: 22px;
        }

        .contact-section-heading p {
            font-size: 12px;
        }

    .contact-terminal-status {
        width: 100%;
        margin-bottom: 28px;
    }

    .contact-grid {
        gap: 18px;
    }

    .contact-panel-header {
        padding: 14px 16px;
    }

    .contact-info-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .contact-social-links {
        padding-left: 16px;
        padding-right: 16px;
    }

    .contact-form-panel form {
        padding: 20px 16px 22px;
    }

    .contact-textarea {
        min-height: 150px;
    }
}


/* ---------------------------------------------------------
   VERY SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 380px) {

    .contact-page {
        padding-left: 13px;
        padding-right: 13px;
    }

    .contact-hero h1 {
        font-size: 27px;
        letter-spacing: 1.5px;
    }

    .contact-hero-line {
        margin-top: 25px;
    }

    .contact-form-panel form {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .contact-hero h1,
    .contact-hero p,
    .contact-hero-line,
    .contact-hero-line::after,
    .contact-cursor {
        animation: none !important;
    }

    .contact-hero h1 {
        text-shadow: 0 0 8px rgba(76, 199, 170, 0.25), 0 0 22px rgba(76, 199, 170, 0.12);
    }

    .contact-hero-line {
        opacity: 0.8;
        transform: scaleX(1);
    }

        .contact-hero-line::after {
            left: 50%;
            opacity: 0.35;
        }

    .contact-social-link,
    .contact-info-value,
    .contact-input,
    .contact-textarea,
    .contact-submit-button {
        transition: none;
    }

        .contact-social-link:hover,
        .contact-submit-button:hover:not(:disabled) {
            transform: none;
        }
}


/* ---------------------------------------------------------
   DYNAMIC CONTENT SAFETY
   --------------------------------------------------------- */

.contact-page,
.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}

    .contact-page h1,
    .contact-page h2,
    .contact-page h3,
    .contact-page h4,
    .contact-page h5,
    .contact-page p,
    .contact-page li,
    .contact-page a,
    .contact-page button,
    .contact-page label {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .contact-page input,
    .contact-page textarea,
    .contact-page button {
        max-width: 100%;
    }

    .contact-page,
    .contact-page * {
        min-width: 0;
    }

        .contact-page img {
            max-width: 100%;
            height: auto;
        }

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

.about-hero h1 {
    position: relative;
    display: inline-block;
    color: #e7f5f1;
    /* Medium green glow */
    text-shadow: 0 0 8px rgba(40, 231, 189, 0.42), 0 0 18px rgba(40, 231, 189, 0.22), 0 0 32px rgba(40, 231, 189, 0.10);
    animation: aboutMainHeadingIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}


    /* =========================================================
   THIN CYBER WAVE / SCAN LINE
   ========================================================= */

    .about-hero h1::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -22px;
        width: min(650px, 88vw);
        height: 1px;
        transform: translateX(-50%);
        /* Thin base line */
        background: linear-gradient( 90deg, transparent 0%, rgba(40, 231, 189, 0.08) 15%, rgba(40, 231, 189, 0.45) 40%, rgba(40, 231, 189, 0.75) 50%, rgba(40, 231, 189, 0.45) 60%, rgba(40, 231, 189, 0.08) 85%, transparent 100% );
        box-shadow: 0 0 4px rgba(40, 231, 189, 0.35), 0 0 10px rgba(40, 231, 189, 0.12);
        overflow: hidden;
        animation: aboutCyberLine 2.8s ease-in-out infinite;
    }


    /* Moving light/wave travelling through the line */

    .about-hero h1::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -23px;
        width: 120px;
        height: 3px;
        transform: translateX(-50%);
        background: linear-gradient( 90deg, transparent, rgba(40, 231, 189, 0.25), rgba(40, 231, 189, 0.95), rgba(40, 231, 189, 0.25), transparent );
        filter: blur(1px) drop-shadow(0 0 5px rgba(40, 231, 189, 0.65));
        animation: aboutScanWave 2.8s ease-in-out infinite;
    }


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

@keyframes aboutMainHeadingIn {

    0% {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(5px);
        text-shadow: 0 0 0 rgba(40, 231, 189, 0);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px);
        filter: blur(0);
        text-shadow: 0 0 10px rgba(40, 231, 189, 0.48), 0 0 22px rgba(40, 231, 189, 0.25), 0 0 35px rgba(40, 231, 189, 0.10);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        text-shadow: 0 0 8px rgba(40, 231, 189, 0.42), 0 0 18px rgba(40, 231, 189, 0.22), 0 0 32px rgba(40, 231, 189, 0.10);
    }
}


/* =========================================================
   SUBTLE LINE PULSE
   ========================================================= */

@keyframes aboutCyberLine {

    0%, 100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.85;
    }
}


/* =========================================================
   MOVING LIGHT / WAVE
   ========================================================= */

@keyframes aboutScanWave {

    0% {
        left: 25%;
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    50% {
        left: 50%;
        opacity: 1;
    }

    85% {
        opacity: 0.8;
    }

    100% {
        left: 75%;
        opacity: 0;
    }
}


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

.about-section-heading h2 {
    color: #e7f5f1;
    text-shadow: 0 0 7px rgba(40, 231, 189, 0.28), 0 0 16px rgba(40, 231, 189, 0.15);
}


/* Section labels */

.about-section-heading .about-section-label {
    color: #28e7bd;
    text-shadow: 0 0 6px rgba(40, 231, 189, 0.25), 0 0 12px rgba(40, 231, 189, 0.10);
}


/* Existing section line */

.about-section-heading .heading-line {
    background: #28e7bd;
    box-shadow: 0 0 5px rgba(40, 231, 189, 0.40), 0 0 10px rgba(40, 231, 189, 0.15);
}


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

@media (max-width: 760px) {

    .about-hero h1 {
        text-shadow: 0 0 7px rgba(40, 231, 189, 0.38), 0 0 15px rgba(40, 231, 189, 0.20), 0 0 26px rgba(40, 231, 189, 0.09);
    }

        .about-hero h1::after {
            width: 86vw;
            bottom: -19px;
        }

        .about-hero h1::before {
            bottom: -20px;
            width: 90px;
        }
}


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

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

    .about-hero h1 {
        animation: none;
    }

        .about-hero h1::before,
        .about-hero h1::after {
            animation: none;
        }
}