/* =========================================================
   CLEANED LIGHT-THEME STYLESHEET
   - Current light appearance preserved
   - Dark-theme selectors removed
   - Only provably redundant exact duplicates removed
   - Original backup: app.original.css
========================================================= */

:root {
    --bg: #f4f7fb;
    --surface: rgba(255, 255, 255, 0.82);
    --text: #0c1726;
    --muted: #607086;
    --line: rgba(16, 34, 54, 0.12);
    --brand: #14b8a6;
    --brand-dark: #0f766e;
    --gold: #d6a84f;
    --navy: #0b1f35;
    --shadow: 0 24px 80px rgba(17, 39, 68, 0.14);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 12% 15%, rgba(20, 184, 166, 0.18), transparent 32%), radial-gradient(circle at 80% 10%, rgba(214, 168, 79, 0.18), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef3f9 50%, #f8fafc 100%);
}

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

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

.portfolio-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    padding: 28px;
}

.main-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.topbar {
    border-radius: var(--radius-lg);
    backdrop-filter: blur(24px);
    gap: 22px;
}

.brand-mini {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--navy), #16456f);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: -1px;
    box-shadow: 0 12px 35px rgba(11, 31, 53, 0.22);
}

    .brand-mini span {
        color: var(--brand);
    }

.site-nav {
    flex: 1;
    flex-wrap: wrap;
}

    .site-nav a {
        font-size: 14px;
    }

        .site-nav a:hover,
        .site-nav a.active {
            color: var(--text);
            background: rgba(20, 184, 166, 0.12);
        }

.top-actions {
    gap: 8px;
}

.small-action-btn {
    border: 1px solid var(--line);
    background: var(--surface-solid);
    color: var(--text);
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.page-content {
    min-height: calc(100vh - 130px);
    margin-top: -44px;
}

.profile-sidebar {
    top: 28px;
    height: calc(100vh - 56px);
}





.profile-photo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 25%), linear-gradient(135deg, #0b1f35, #123e65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -2px;
}

.profile-name-block h1 {
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -1.2px;
}

.profile-name-block p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.profile-tags {
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}

    .profile-tags span {
        padding: 8px 11px;
        border-radius: 999px;
        background: rgba(20, 184, 166, 0.10);
        color: var(--brand-dark);
        font-size: 12px;
        font-weight: 800;
    }



.profile-actions {
    gap: 10px;
    padding-top: 18px;
}

.primary-profile-btn,
.secondary-profile-btn {
    min-height: 48px;
    border-radius: 16px;
    font-weight: 900;
}

.primary-profile-btn {
    background: linear-gradient(135deg, var(--brand), #0f766e);
    color: white;
    box-shadow: 0 14px 35px rgba(20, 184, 166, 0.28);
}

.secondary-profile-btn {
    background: rgba(11, 31, 53, 0.06);
    color: var(--text);
    border: 1px solid var(--line);
}

.hero-section,
.page-heading {
    padding: 72px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)), radial-gradient(circle at top right, rgba(20, 184, 166, 0.20), transparent 35%);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.hero-kicker {
    display: inline-flex;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.14);
    color: #9a6b18;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.hero-section h2,
.page-heading h2 {
    max-width: 980px;
    margin: 0;
    font-size: clamp(42px, 6vw, 86px);
    line-height: 0.98;
    letter-spacing: -4px;
    color: var(--navy);
}

.hero-section p,
.page-heading p {
    max-width: 850px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.8;
    font-weight: 550;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.hero-primary-btn,
.hero-secondary-btn {
    min-height: 54px;
    padding: 0 22px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.hero-primary-btn {
    background: linear-gradient(135deg, var(--navy), #16456f);
    color: white;
    box-shadow: 0 16px 38px rgba(11, 31, 53, 0.22);
}

.hero-secondary-btn {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.70);
    color: var(--text);
}

.overview-grid,
.service-grid,
.portfolio-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.overview-card,
.service-card,
.portfolio-category-card,
.contact-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(22px);
}

.overview-card,
.service-card,
.portfolio-category-card {
    padding: 26px;
}

    .overview-card span {
        display: inline-flex;
        color: var(--brand-dark);
        font-size: 30px;
        font-weight: 950;
        letter-spacing: -1px;
        margin-bottom: 12px;
    }

    .overview-card h3,
    .service-card h3,
    .portfolio-category-card h3,
    .contact-box h3 {
        margin: 0;
        color: var(--navy);
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -0.6px;
    }

    .overview-card p,
    .service-card p,
    .portfolio-category-card p,
    .contact-box p {
        margin: 12px 0 0;
        color: var(--muted);
        line-height: 1.7;
    }

.contact-box {
    margin-top: 22px;
    padding: 32px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 28px;
}

.contact-form {
    display: grid;
    gap: 12px;
}

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100%;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.82);
        border-radius: 16px;
        padding: 15px 16px;
        outline: none;
        color: var(--text);
        font-size: 15px;
    }

    .contact-form textarea {
        min-height: 140px;
        resize: vertical;
    }

    .contact-form button {
        min-height: 52px;
        border: none;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--brand), #0f766e);
        color: white;
        font-weight: 900;
        cursor: pointer;
    }




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

.hero-section,
.page-heading {
    padding: 52px;
}

}

@media (max-width: 760px) {
    .portfolio-shell {
        padding: 14px;
        gap: 16px;
    }

    .topbar {
        position: relative;
        top: auto;
        flex-wrap: wrap;
    }

    .site-nav {
        order: 3;
        width: 100%;
    }

        .site-nav a {
            padding: 10px 12px;
            font-size: 13px;
        }

    .hero-section,
    .page-heading {
        padding: 34px 24px;
    }

        .hero-section h2,
        .page-heading h2 {
            font-size: 42px;
            letter-spacing: -2px;
        }

        .hero-section p,
        .page-heading p {
            font-size: 16px;
        }

    .overview-grid,
    .service-grid,
    .portfolio-category-grid,
    .contact-box {
        grid-template-columns: 1fr;
        position: relative !important;
        top: auto !important;
        margin-top: -14px !important;
    }

    .profile-photo {
        width: 126px;
        height: 126px;
    }
}







/* =========================================================
   Profile Image
========================================================= */

.profile-photo img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    object-fit: cover;
    background: #0b1f35;
}

.profile-photo-placeholder {
    position: absolute;
    inset: 7px;
    width: auto;
    height: auto;
    display: none;
}


/* =========================================================
   Profile Status
========================================================= */

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    font-size: 12px;
    font-weight: 900;
}




/* =========================================================
   Theme Toggle
========================================================= */

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.14);
}


/* =========================================================
   Professional Color System Upgrade
========================================================= */

:root {
    --bg: #eef4f8;
    --surface: rgba(255, 255, 255, 0.74);
    --surface-solid: #ffffff;
    --text: #0a1a2f;
    --muted: #5d6f86;
    --line: rgba(9, 30, 56, 0.12);
    --brand: #19c8bd;
    --brand-2: #4f7cff;
    --brand-3: #8b5cf6;
    --brand-4: #ff8a4c;
    --brand-dark: #087a73;
    --gold: #d9aa47;
    --gold-soft: #fff2cc;
    --navy: #071b33;
    --deep-blue: #0d3768;
    --shadow: 0 28px 90px rgba(15, 44, 76, 0.16);
}

body {
    background: radial-gradient(circle at 8% 8%, rgba(25, 200, 189, 0.28), transparent 28%), radial-gradient(circle at 48% 0%, rgba(79, 124, 255, 0.16), transparent 24%), radial-gradient(circle at 82% 18%, rgba(255, 138, 76, 0.18), transparent 28%), radial-gradient(circle at 32% 78%, rgba(139, 92, 246, 0.11), transparent 26%), linear-gradient(135deg, #f9fcff 0%, #edf5f7 42%, #f7f1e8 100%);
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image: linear-gradient(rgba(9, 30, 56, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(9, 30, 56, 0.035) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 78%);
    }

.hero-section,
.page-heading {
    position: relative;
    top: 6px;
    background: radial-gradient(circle at 92% 8%, rgba(25, 200, 189, 0.22), transparent 34%), radial-gradient(circle at 74% 78%, rgba(255, 138, 76, 0.12), transparent 28%), radial-gradient(circle at 12% 95%, rgba(79, 124, 255, 0.10), transparent 30%), linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(244, 250, 252, 0.72));
}

    .hero-section::after,
    .page-heading::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        background: conic-gradient(from 180deg, rgba(25, 200, 189, 0.24), rgba(79, 124, 255, 0.18), rgba(255, 138, 76, 0.16), rgba(25, 200, 189, 0.24));
        filter: blur(4px);
        opacity: 0.8;
        pointer-events: none;
    }

.overview-card,
.service-card,
.portfolio-category-card,
.contact-box {
    background: radial-gradient(circle at 91% 8%, rgba(240, 205, 124, 0.20), transparent 28%), radial-gradient(circle at 72% 88%, rgba(184, 114, 75, 0.07), transparent 25%), linear-gradient(135deg, rgba(255, 252, 246, 0.98), rgba(244, 235, 220, 0.95)) !important;
    box-shadow: 0 22px 50px rgba(78, 53, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

    .overview-card:nth-child(1),
    .service-card:nth-child(1),
    .portfolio-category-card:nth-child(1) {
        border-top: 4px solid var(--brand);
    }

    .overview-card:nth-child(2),
    .service-card:nth-child(2),
    .portfolio-category-card:nth-child(2) {
        border-top: 4px solid var(--brand-2);
    }

    .overview-card:nth-child(3),
    .service-card:nth-child(3),
    .portfolio-category-card:nth-child(3) {
        border-top: 4px solid var(--gold);
    }

    .service-card:nth-child(4),
    .portfolio-category-card:nth-child(4) {
        border-top: 4px solid var(--brand-3);
    }

    .service-card:nth-child(5),
    .portfolio-category-card:nth-child(5) {
        border-top: 4px solid var(--brand-4);
    }

    .service-card:nth-child(6),
    .portfolio-category-card:nth-child(6) {
        border-top: 4px solid var(--deep-blue);
    }


/* =========================================================
   Language Switch
========================================================= */

.language-switch button {
    min-width: 42px;
    border: none;
}

/* =========================================================
   Better Profile Sidebar
========================================================= */

.portfolio-shell {
    grid-template-columns: minmax(0, 1fr) 430px;
}

.profile-card {
    padding: 28px;
    background: radial-gradient(circle at 12% 4%, rgba(216, 170, 79, 0.18), transparent 28%), radial-gradient(circle at 95% 8%, rgb(255 182 37 / 38%), transparent 24%), linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(248, 242, 231, 0.92));
}

.profile-photo {
    width: 375px;
    height: 375px;
    padding: 7px;
    border-radius: 42px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f5d88b, #d8aa4f, #9f742b);
    box-shadow: 0 28px 55px rgba(7, 27, 51, 0.23), 0 0 0 8px rgba(216, 170, 79, 0.12);
}

    .profile-photo img {
        border-radius: 35px;
    }

.profile-photo-placeholder {
    border-radius: 35px;
}

.profile-name-block h1 {
    font-size: 34px;
    letter-spacing: -1.4px;
}

.profile-name-block p {
    font-size: 15.5px;
    line-height: 1.75;
}

.profile-status {
    color: #071b33 !important;
    background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
    border: 1px solid rgba(255, 241, 184, 0.72) !important;
    box-shadow: 0 18px 38px rgba(216, 170, 79, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.28) inset, inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.profile-tags {
    display: none !important;
}



.profile-actions {
    padding-top: 22px;
}

.primary-profile-btn {
    background: linear-gradient(135deg, #19c8bd, #087a73);
}

.secondary-profile-btn {
    background: linear-gradient(135deg, rgba(7, 27, 51, 0.06), rgba(79, 124, 255, 0.06));
}


/* =========================================================
   Responsive Fix After Wider Sidebar
========================================================= */

@media (max-width: 1280px) {
    .portfolio-shell {
        grid-template-columns: minmax(0, 1fr) 390px;
    }

    .profile-photo {
        width: 170px;
        height: 170px;
    }
}

@media (max-width: 1180px) {
    .portfolio-shell {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        height: auto;
    }
}

@media (max-width: 760px) {
    .profile-photo {
        width: 146px;
        height: 146px;
    }

    .top-actions {
        margin-left: auto;
    }
}




/* =========================================================
   Independent Hidden Scroll for Right Profile Sidebar
========================================================= */

.profile-sidebar {
    position: sticky;
    top: 10px;
    align-self: start;
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    overflow: hidden;
    min-height: 0;
}





    /* =========================================================
   FINAL PREMIUM GOLD SIDEBAR - CLEAN CONTRAST STYLE
========================================================= */

    @media (min-width: 1181px) {
        :root {
            --right-sidebar-width: 430px;
            --right-sidebar-gap: 28px;
            --page-padding: 10px;
            --sidebar-white: #fffdf7;
            --sidebar-cream: #f8f2e7;
            --sidebar-navy: #071b33;
            --sidebar-navy-2: #0d2747;
            --sidebar-gold: #d8aa4f;
            --sidebar-gold-light: #f5d88b;
            --sidebar-gold-dark: #9f742b;
            --sidebar-teal: #1bc7bd;
        }

        .portfolio-shell {
            display: block !important;
            min-height: 100vh;
            padding: var(--page-padding) !important;
            padding-right: calc(var(--right-sidebar-width) + var(--right-sidebar-gap) + var(--page-padding)) !important;
        }

        .profile-sidebar {
            position: fixed !important;
            top: var(--page-padding) !important;
            right: var(--page-padding) !important;
            width: var(--right-sidebar-width) !important;
            height: calc(100vh - (var(--page-padding) * 2)) !important;
            max-height: calc(100vh - (var(--page-padding) * 2)) !important;
            z-index: 100 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            overscroll-behavior: contain !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

            .profile-sidebar::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
                display: none !important;
            }

        .profile-card {
            position: relative;
            min-height: calc(100vh - (var(--page-padding) * 2)) !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            padding: 30px 30px 26px;
            border-radius: 36px;
            border: 1px solid rgb(75 62 36 / 43%);
            margin-top: 18px;
            background: radial-gradient(circle at 12% 4%, rgba(216, 170, 79, 0.18), transparent 28%), radial-gradient(circle at 95% 8%, rgb(255 182 37 / 38%), transparent 24%), linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(248, 242, 231, 0.92));
        }


        .profile-photo {
            position: relative;
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1.05;
            padding: 8px;
            margin-bottom: 28px;
            border-radius: 34px;
            background: linear-gradient(135deg, var(--sidebar-gold-light), var(--sidebar-gold), var(--sidebar-gold-dark));
            box-shadow: 0 28px 55px rgba(7, 27, 51, 0.23), 0 0 0 8px rgba(216, 170, 79, 0.12);
        }

            .profile-photo::after {
                content: "";
                position: absolute;
                inset: 8px;
                border-radius: 27px;
                pointer-events: none;
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), inset 0 -80px 90px rgba(7, 27, 51, 0.08);
            }

            .profile-photo img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
                border-radius: 27px;
            }

        .profile-photo-placeholder {
            position: absolute;
            inset: 8px;
            display: none;
            align-items: center;
            justify-content: center;
            border-radius: 27px;
            background: linear-gradient(135deg, var(--sidebar-navy), var(--sidebar-navy-2));
            color: white;
            font-size: 46px;
            font-weight: 950;
        }

        .profile-status {
            position: relative !important;
            overflow: hidden !important;
            color: #071b33 !important;
            background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
            border: 1px solid rgba(255, 241, 184, 0.72) !important;
            box-shadow: 0 18px 38px rgba(216, 170, 79, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.28) inset, inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
            font-weight: 950 !important;
            transform: translateY(0) scale(1);
            transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), box-shadow 0.32s cubic-bezier(.2, .8, .2, 1), filter 0.32s ease !important;
        }
    }

    .profile-status span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #75571b;
        box-shadow: 0 0 0 3px #fff1ca;
    }

    .profile-name-block {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

        .profile-name-block::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 110px;
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--sidebar-gold), var(--sidebar-gold-light));
        }

        .profile-name-block h1 {
            margin: 0;
            color: #675535;
            font-size: 32px;
            line-height: 1.03;
            letter-spacing: -1.5px;
            font-weight: 950;
        }

        .profile-name-block p {
            margin: 16px 0 0;
            color: #607086;
            font-size: 15px;
            line-height: 1.78;
            font-weight: 650;
        }

    .profile-contact {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 8px;
        overflow: visible !important;
        max-height: none !important;
    }

        .profile-contact a {
            border-radius: 18px;
            color: #071b33 !important;
            background: linear-gradient(37deg, #fffae6 0%, #fbf0d1 22%, #d7c093 48%, #dbb986 72%, #fff1ca 100%) !important;
            border: 1px solid rgba(162, 146, 108, 0.72) !important;
            font-weight: 950 !important;
            box-shadow: 0 4px 4px rgba(72, 48, 25, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
        }





        .profile-contact span {
            position: relative;
            z-index: 1;
            display: block;
            margin-bottom: 5px;
            color: #815d00;
            font-size: 12px;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: 1.3px;
        }

        .profile-contact strong {
            position: relative;
            z-index: 1;
            display: block;
            color: #000000;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 450;
            overflow-wrap: anywhere;
        }

    .profile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px !important;
        padding-top: 24px;
        padding-bottom: 28px !important;
        border-top: 1px solid rgba(216, 170, 79, 0.26);
    }

    .primary-profile-btn,
    .secondary-profile-btn {
        position: relative;
        min-height: 56px;
        border-radius: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-weight: 950;
        font-size: 15px;
        letter-spacing: 0.1px;
        transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow 0.32s cubic-bezier(.2,.8,.2,1);
    }

    .primary-profile-btn {
        color: var(--sidebar-navy);
        background: linear-gradient(135deg, var(--sidebar-gold-light), var(--sidebar-gold), var(--sidebar-gold-dark));
        box-shadow: 0 18px 34px rgba(216, 170, 79, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .secondary-profile-btn {
        color: var(--sidebar-navy);
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(216, 170, 79, 0.34);
        box-shadow: 0 12px 26px rgba(7, 27, 51, 0.08);
    }

        .primary-profile-btn::after,
        .secondary-profile-btn::after {
            content: "";
            position: absolute;
            top: -80%;
            left: -40%;
            width: 38%;
            height: 260%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
            transform: rotate(24deg) translateX(-150%);
            transition: transform 0.72s cubic-bezier(.2,.8,.2,1);
        }

        .primary-profile-btn:hover,
        .secondary-profile-btn:hover {
            transform: translateY(-4px) scale(1.015);
        }

    .primary-profile-btn:hover {
        box-shadow: 0 26px 42px rgba(216, 170, 79, 0.40), 0 0 0 4px rgba(216, 170, 79, 0.14);
    }

    .secondary-profile-btn:hover {
        box-shadow: 0 20px 36px rgba(7, 27, 51, 0.14), 0 0 0 4px rgba(216, 170, 79, 0.10);
    }

        .primary-profile-btn:hover::after,
        .secondary-profile-btn:hover::after {
            transform: rotate(24deg) translateX(440%);
        }
    /* =========================================================
   AMT205 GOLD TITLE & BUTTON SYSTEM
========================================================= */

    :root {
        --amt-gold-1: #fff1b8;
        --amt-gold-2: #f5d88b;
        --amt-gold-3: #d8aa4f;
        --amt-gold-4: #b47a2f;
        --amt-gold-5: #7a4d18;
        --amt-navy-1: #061522;
        --amt-navy-2: #0b2138;
        --amt-teal: #19c8bd;
    }

    /* Gold animated titles */
    .gold-animated-title {
        color: transparent !important;
        background-image: linear-gradient( 100deg, var(--amt-gold-1) 0%, var(--amt-gold-2) 18%, var(--amt-gold-3) 38%, var(--amt-gold-4) 58%, var(--amt-gold-2) 78%, var(--amt-gold-1) 100% );
        background-size: 260% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: goldTitleMove 7s ease-in-out infinite, goldTitleGlow 3.6s ease-in-out infinite;
        text-shadow: 0 12px 34px rgba(216, 170, 79, 0.16), 0 2px 0 rgba(255, 255, 255, 0.10);
    }

    @keyframes goldTitleMove {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes goldTitleGlow {
        0%, 100% {
            filter: drop-shadow(0 0 0 rgba(216, 170, 79, 0));
        }

        50% {
            filter: drop-shadow(0 0 18px rgba(216, 170, 79, 0.28));
        }
    }

    /* If you want all main page titles to become gold automatically */
    .hero-section h2.gold-animated-title,
    .page-heading h2.gold-animated-title {
        font-weight: 950;
    }

    /* =========================================================
   AMT205 Gold Buttons
========================================================= */

    .hero-primary-btn,
    .primary-profile-btn,
    .contact-form button {
        position: relative !important;
        overflow: hidden !important;
        color: #071b33 !important;
        background: linear-gradient( 135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
        border: 1px solid rgba(255, 241, 184, 0.72) !important;
        box-shadow: 0 18px 38px rgba(216, 170, 79, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.28) inset, inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
        font-weight: 950 !important;
        transform: translateY(0) scale(1);
        transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow 0.32s cubic-bezier(.2,.8,.2,1), filter 0.32s ease !important;
    }

        /* Shine layer */
        .hero-primary-btn::before,
        .primary-profile-btn::before,
        .contact-form button::before {
            content: "";
            position: absolute;
            top: -90%;
            left: -42%;
            width: 42%;
            height: 280%;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.45), transparent );
            transform: rotate(25deg) translateX(-160%);
            transition: transform 0.82s cubic-bezier(.2,.8,.2,1);
            pointer-events: none;
        }

        /* Small gold depth */
        .hero-primary-btn::after,
        .primary-profile-btn::after,
        .contact-form button::after {
            content: "";
            position: absolute;
            inset: 1px;
            border-radius: inherit;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.26), transparent 42%, rgba(122, 77, 24, 0.12) );
            pointer-events: none;
        }

        /* Hover animation */
        .hero-primary-btn:hover,
        .primary-profile-btn:hover,
        .contact-form button:hover {
            transform: translateY(-5px) scale(1.018);
            filter: saturate(1.08) contrast(1.02);
            box-shadow: 0 28px 48px rgba(216, 170, 79, 0.44), 0 0 0 5px rgba(216, 170, 79, 0.14), 0 0 34px rgba(245, 216, 139, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
        }

            .hero-primary-btn:hover::before,
            .primary-profile-btn:hover::before,
            .contact-form button:hover::before {
                transform: rotate(25deg) translateX(430%);
            }

    /* Secondary buttons: dark premium like AMT205 outline button */
    .hero-secondary-btn,
    .secondary-profile-btn {
        position: relative !important;
        overflow: hidden !important;
        color: var(--amt-navy-1) !important;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 240, 0.58) ) !important;
        border: 1px solid rgba(216, 170, 79, 0.34) !important;
        box-shadow: 0 14px 30px rgba(7, 27, 51, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
        transition: transform 0.32s cubic-bezier(.2,.8,.2,1), box-shadow 0.32s cubic-bezier(.2,.8,.2,1), border-color 0.32s ease !important;
    }

        .hero-secondary-btn::before,
        .secondary-profile-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 0%, rgba(245, 216, 139, 0.22), transparent 38%), radial-gradient(circle at 90% 100%, rgba(216, 170, 79, 0.16), transparent 42%);
            opacity: 0;
            transition: opacity 0.32s ease;
            pointer-events: none;
        }

        .hero-secondary-btn:hover,
        .secondary-profile-btn:hover {
            transform: translateY(-4px) scale(1.012);
            border-color: rgba(216, 170, 79, 0.72) !important;
            box-shadow: 0 24px 42px rgba(7, 27, 51, 0.14), 0 0 0 4px rgba(216, 170, 79, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
        }

            .hero-secondary-btn:hover::before,
            .secondary-profile-btn:hover::before {
                opacity: 1;
            }




    .hero-section > h2,
    .page-heading > h2 {
        color: transparent !important;
        background-image: linear-gradient( 100deg, #fff1b8 0%, #f5d88b 18%, #d8aa4f 38%, #b47a2f 58%, #f5d88b 78%, #fff1b8 100% );
        background-size: 260% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: goldTitleMove 7s ease-in-out infinite, goldTitleGlow 3.6s ease-in-out infinite;
    }


    /* =========================================================
   Profile Contact Icons
========================================================= */

    .profile-contact a {
        padding: 15px 18px 15px 18px !important;
    }

    .profile-contact-icon {
        color: #071b33;
        z-index: 2;
    }

        .profile-contact-icon svg {
            display: block;
        }

    .profile-contact-text {
        position: relative;
        z-index: 2;
    }

    .profile-contact span,
    .profile-contact strong {
        padding-left: 0 !important;
    }

    .profile-contact a:hover .profile-contact-icon {
        filter: saturate(1.08);
    }

    /* Optional: icon identity accents */
    .phone-icon {
        background: linear-gradient(135deg, #fff1b8, #d8aa4f, #9f742b);
    }

    .whatsapp-icon {
        background: linear-gradient(135deg, #e8ffd7, #25d366, #128c4a);
    }

    .email-icon {
        background: linear-gradient(135deg, #fff1b8, #d8aa4f, #9f742b);
    }

    .business-icon {
        background: linear-gradient(135deg, #fff1b8, #d8aa4f, #9f742b);
    }

    .linkedin-icon {
        background: linear-gradient(135deg, #d9ecff, #0a66c2, #06457e);
        color: white;
    }

    /* =========================================================
   TOPBAR - MATCH PREMIUM GOLD SIDEBAR THEME
========================================================= */

    :root {
        --topbar-cream: #fffaf0;
        --topbar-cream-2: #f7ead0;
        --topbar-navy: #071b33;
        --topbar-navy-2: #0d2747;
        --topbar-gold: #d8aa4f;
        --topbar-gold-light: #f5d88b;
        --topbar-gold-dark: #9f742b;
        --topbar-text-muted: #6a7890;
    }

    /* Main topbar container */
    .topbar {
        padding: 14px 18px;
        border-radius: 28px;
        backdrop-filter: blur(26px);
    }

        /* Gold top accent line */
        .topbar::before {
            content: "";
            position: absolute;
            top: 0;
            left: 30px;
            right: 30px;
            height: 5px;
            border-radius: 0 0 12px 12px;
            background: linear-gradient( 90deg, transparent, var(--topbar-gold), var(--topbar-gold-light), var(--topbar-gold), transparent );
            opacity: 0.95;
        }

        /* Soft gold glow */
        .topbar::after {
            width: 220px;
            height: 220px;
            right: -70px;
            top: -100px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(216, 170, 79, 0.20), transparent 70%);
        }

    /* Navigation links */
    /* Hover nav */
    /* Active nav item */
    .theme-toggle-btn:hover,
    .small-action-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(216, 170, 79, 0.62) !important;
        box-shadow: 0 18px 34px rgba(7, 27, 51, 0.13), 0 0 0 4px rgba(216, 170, 79, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    }

    /* Theme dot */
    .theme-dot {
        background: linear-gradient(135deg, var(--topbar-gold-light), var(--topbar-gold), var(--topbar-gold-dark));
        box-shadow: 0 0 0 5px rgba(216, 170, 79, 0.16), 0 0 16px rgba(216, 170, 79, 0.28);
    }



    /* =========================================================
   PREMIUM GLASS TOPBAR + NAV ANIMATIONS
========================================================= */

    .topbar {
        position: sticky !important;
        top: 36px !important;
        z-index: 90 !important;
        isolation: isolate;
        background: linear-gradient( 135deg, rgba(255, 250, 240, 0.66), rgba(247, 234, 208, 0.42) ) !important;
        border: 1px solid rgba(216, 170, 79, 0.28) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.2);
        backdrop-filter: blur(22px) saturate(1.2);
        box-shadow: 0 18px 46px rgba(7, 27, 51, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    }

    /* when page scrolls under topbar */
    html[data-topbar-scrolled="true"] .topbar {
        background: linear-gradient( 135deg, rgba(255, 250, 240, 0.48), rgba(247, 234, 208, 0.30) ) !important;
        border-color: rgba(216, 170, 79, 0.42) !important;
        -webkit-backdrop-filter: blur(34px) saturate(1.35);
        backdrop-filter: blur(34px) saturate(1.35);
        box-shadow: 0 28px 70px rgba(7, 27, 51, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.28) inset, inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
    }

    /* moving glass shine */
    .topbar::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.28) 34%, transparent 58% );
        transform: translateX(-120%);
        opacity: 0;
        pointer-events: none;
    }

    html[data-topbar-scrolled="true"] .topbar::after {
        opacity: 1;
        animation: topbarGlassSweep 4.8s ease-in-out infinite;
    }

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

        46% {
            transform: translateX(120%);
        }

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

    .site-nav,
    .top-actions {
        position: relative;
        z-index: 2;
    }


        /* =========================================================
   PREMIUM NAV MENU ANIMATION
========================================================= */

        /* gold underline glow */
        .site-nav a::before {
            left: 18px;
            right: 18px;
            bottom: 7px;
            height: 3px;
            transform-origin: center;
        }

        /* small shine layer */
        .site-nav a::after {
            top: -80%;
            width: 40%;
            pointer-events: none;
        }

        /* hover state */
        .site-nav a:hover {
            background: radial-gradient(circle at 18% 0%, rgba(245, 216, 139, 0.30), transparent 42%), linear-gradient(135deg, rgba(255, 253, 247, 0.72), rgba(247, 234, 208, 0.46)) !important;
        }

    /* active page */
    /* =========================================================
   PREMIUM LANGUAGE SWITCH ANIMATION
========================================================= */



    /* =========================================================
   THEME BUTTON GLASS ANIMATION
========================================================= */

    .theme-toggle-btn {
        position: relative;
        overflow: hidden;
    }

        .theme-toggle-btn::before {
            content: "";
            position: absolute;
            top: -90%;
            left: -45%;
            width: 40%;
            height: 260%;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.34), transparent );
            transform: rotate(24deg) translateX(-150%);
            transition: transform 0.72s cubic-bezier(.2,.8,.2,1);
            pointer-events: none;
        }

        .theme-toggle-btn:hover::before {
            transform: rotate(24deg) translateX(430%);
        }


    /* =========================================================
   EXACT STYLE PREMIUM THEME SWITCH - GOLD VERSION
========================================================= */

    .premium-theme-toggle {
        position: relative !important;
        height: 54px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .premium-theme-label {
        min-width: 48px;
        color: #8a93a8;
        letter-spacing: -0.2px;
        transition: color 0.38s ease, transform 0.38s cubic-bezier(.16, 1, .3, 1), opacity 0.38s ease;
    }

    .premium-theme-toggle:hover .premium-theme-label {
        transform: translateY(-1px);
        color: #735018;
    }

    .premium-theme-track {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(216, 170, 79, 0.34);
    }

    .premium-theme-icon {
        position: relative;
        z-index: 3;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #735018;
        opacity: 0.62;
        transition: opacity 0.38s ease, transform 0.38s cubic-bezier(.16, 1, .3, 1), color 0.38s ease;
    }

        .premium-theme-icon svg {
            fill: currentColor;
            display: block;
        }

    /* moving golden orb */
    .premium-theme-thumb {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(0);
    }

        /* glow behind orb */
        .premium-theme-thumb::before {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            z-index: -1;
            background: radial-gradient(circle, rgba(216, 170, 79, 0.45), transparent 66%);
            opacity: 0.78;
            filter: blur(4px);
        }

        /* small shine sweep */
        .premium-theme-thumb::after {
            content: "";
            position: absolute;
            top: -60%;
            left: -45%;
            width: 42%;
            height: 220%;
            border-radius: 999px;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.62), transparent );
            transform: rotate(24deg) translateX(-150%);
            transition: transform 0.72s cubic-bezier(.2,.8,.2,1);
            pointer-events: none;
        }

    .premium-theme-toggle:hover .premium-theme-thumb::after {
        transform: rotate(24deg) translateX(420%);
    }

    .premium-theme-thumb-icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #071b33;
        transition: opacity 0.28s ease, transform 0.38s cubic-bezier(.16, 1, .3, 1);
    }

        .premium-theme-thumb-icon svg {
            fill: currentColor;
        }

    /* Light mode state: target is Dark, active orb on sun */
    /* tactile animation */
    .premium-theme-toggle:active .premium-theme-thumb {
        filter: saturate(1.08) contrast(1.03);
        box-shadow: 0 7px 16px rgba(216, 170, 79, 0.34), 0 0 0 7px rgba(216, 170, 79, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .premium-theme-toggle.small-action-btn,
    .premium-theme-toggle.theme-toggle-btn {
        all: unset;
    }


    /* =========================================================
   FINAL THEME SWITCH TUNING
   No Glow + Slower Motion + Rounded Inner Thumb + Larger Icons
========================================================= */

    .premium-theme-toggle {
        gap: 12px !important;
    }

    /* Text label */
    .premium-theme-label {
        font-size: 15px !important;
        font-weight: 950 !important;
    }

    /* Main switch track */
    .premium-theme-track {
        width: 104px !important;
        height: 42px !important;
        padding: 6px !important;
        border-radius: 999px !important;
        background: linear-gradient(145deg, rgba(255, 248, 230, 0.95), rgba(233, 215, 173, 0.78)) !important;
        box-shadow: 0 10px 22px rgba(7, 27, 51, 0.10), inset 6px 6px 12px rgba(148, 113, 43, 0.10), inset -6px -6px 14px rgba(255, 255, 255, 0.68) !important;
    }

    /* Bigger background icons */
    .premium-theme-icon {
        width: 38px !important;
        height: 36px !important;
    }

        .premium-theme-icon svg {
            width: 22px !important;
            height: 22px !important;
        }

    /* Inner moving button - not a full circle */
    .premium-theme-thumb {
        top: 2px !important;
        left: 4px !important;
        width: 52px !important;
        height: 36px !important;
        border-radius: 17px !important;
        background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 24%, #d8aa4f 58%, #9f742b 100%) !important;
        box-shadow: 0 8px 18px rgba(7, 27, 51, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
        transition: transform 0.82s cubic-bezier(.18, 1, .28, 1), box-shadow 0.42s ease, filter 0.42s ease !important;
    }

        /* Remove glow behind thumb */
        .premium-theme-thumb::before {
            display: none !important;
        }

        /* Remove shine sweep */
        .premium-theme-thumb::after {
            display: none !important;
        }

    /* Bigger active icon inside thumb */
    .premium-theme-thumb-icon {
        width: 23px !important;
        height: 23px !important;
    }

        .premium-theme-thumb-icon svg {
            width: 23px !important;
            height: 23px !important;
        }

    /* Light state */
    .premium-theme-toggle.is-light .premium-theme-thumb {
        transform: translateX(0) !important;
    }

    /* Smooth icon changes */
    .premium-theme-thumb-sun,
    .premium-theme-thumb-moon {
        transition: opacity 0.42s ease, transform 0.62s cubic-bezier(.18, 1, .28, 1) !important;
    }

    /* Light mode icons */
    .premium-theme-toggle.is-light .premium-theme-thumb-sun {
        opacity: 1 !important;
        transform: scale(1) rotate(0deg) !important;
    }

    .premium-theme-toggle.is-light .premium-theme-thumb-moon {
        opacity: 0 !important;
        transform: scale(0.62) rotate(28deg) !important;
    }

    /* Background icons visibility */
    .premium-theme-toggle.is-light .premium-theme-sun {
        opacity: 0 !important;
        transform: scale(0.78) !important;
    }

    .premium-theme-toggle.is-light .premium-theme-moon {
        opacity: 0.62 !important;
        transform: scale(1) !important;
    }

    /* Hover: no glow, only subtle movement */
    .premium-theme-toggle:hover .premium-theme-thumb {
        box-shadow: 0 10px 20px rgba(7, 27, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
    }

    /* Press animation */
    .premium-theme-toggle.is-light:active .premium-theme-thumb {
        transform: translateX(0) scale(0.94) !important;
    }

    /* =========================================================
   FINAL LANGUAGE SWITCH - SAME ANIMATION AS THEME SWITCH
========================================================= */

    .language-switch {
        position: relative !important;
        width: 104px !important;
        height: 42px !important;
        padding: 6px !important;
        gap: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        isolation: isolate !important;
        border-radius: 999px !important;
        border: 1px solid rgba(216, 170, 79, 0.34) !important;
        background: linear-gradient(145deg, rgba(255, 248, 230, 0.95), rgba(233, 215, 173, 0.78)) !important;
        box-shadow: 0 10px 22px rgba(7, 27, 51, 0.10), inset 6px 6px 12px rgba(148, 113, 43, 0.10), inset -6px -6px 14px rgba(255, 255, 255, 0.68) !important;
    }

        /* Moving inner button - same style as theme toggle */
        .language-switch::before {
            content: "" !important;
            position: absolute !important;
            top: 2px !important;
            left: 4px !important;
            width: 52px !important;
            height: 36px !important;
            border-radius: 17px !important;
            z-index: 1 !important;
            background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 24%, #d8aa4f 58%, #9f742b 100%) !important;
            box-shadow: 0 8px 18px rgba(7, 27, 51, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
            transition: transform 0.82s cubic-bezier(.18, 1, .28, 1), box-shadow 0.42s ease, filter 0.42s ease !important;
        }

        /* Remove old droplet effect completely */
        .language-switch::after {
            display: none !important;
            content: none !important;
        }

        /* EN position */
        .language-switch.is-en::before {
            transform: translateX(0) !important;
        }

        /* FA position */
        .language-switch.is-fa::before {
            transform: translateX(42px) !important;
        }

        /* Buttons */
        .language-switch button {
            position: relative !important;
            z-index: 3 !important;
            width: 52px !important;
            height: 36px !important;
            border-radius: 17px !important;
            background: transparent !important;
            box-shadow: none !important;
            color: #7b8392 !important;
            font-size: 13px !important;
            font-weight: 950 !important;
            letter-spacing: 0.2px !important;
            cursor: pointer !important;
            transition: color 0.34s ease, transform 0.34s cubic-bezier(.18, 1, .28, 1) !important;
        }

            /* Active text on gold thumb */
            .language-switch button.active {
                color: #071b33 !important;
                background: transparent !important;
                box-shadow: none !important;
            }

        /* Hover - no glow, only subtle depth */
        .language-switch:hover::before {
            box-shadow: 0 10px 20px rgba(7, 27, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
        }

        .language-switch:hover button {
            transform: translateY(-1px) !important;
        }

        /* Press animation */
        .language-switch.is-en:active::before {
            transform: translateX(0) scale(0.94) !important;
        }

        .language-switch.is-fa:active::before {
            transform: translateX(50px) scale(0.94) !important;
        }

        .language-switch button:active {
            transform: scale(0.92) !important;
        }


    /* =========================================================
   Profile Photo FX5 Hover Effect
========================================================= */

    .profile-photo {
        position: relative !important;
        overflow: hidden !important;
    }

    .profile-photo-effect {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        isolation: isolate;
    }

        .profile-photo-effect .double__img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: inherit;
            will-change: transform, filter, clip-path;
        }

            .profile-photo-effect .double__img:first-child {
                z-index: 1;
            }

            .profile-photo-effect .double__img:last-child {
                z-index: 2;
            }

    /* Make sure old img rules do not interfere */
    .profile-photo img {
        display: none !important;
    }


    /* =========================================================
   DESKTOP SITE SIDE SPACING
   160px left/right margin for whole website
========================================================= */

    @media (min-width: 1400px) {
        :root {
            --site-side-space: 160px;
            --site-top-space: 20px;
            --right-sidebar-width: 430px;
            --right-sidebar-gap: 28px;
        }

        .portfolio-shell {
            padding-top: var(--site-top-space) !important;
            padding-bottom: var(--site-top-space) !important;
            padding-left: var(--site-side-space) !important;
            padding-right: calc( var(--site-side-space) + var(--right-sidebar-width) + var(--right-sidebar-gap) ) !important;
        }

        .profile-sidebar {
            right: var(--site-side-space) !important;
            top: var(--site-top-space) !important;
            width: var(--right-sidebar-width) !important;
            height: calc(100vh - (var(--site-top-space) * 2)) !important;
            max-height: calc(100vh - (var(--site-top-space) * 2)) !important;
        }

        .profile-card {
            min-height: calc(100vh - (var(--site-top-space) * 2)) !important;
        }
    }


    /* =========================================================
   PREMIUM PROFILE CONTACT CARD HOVER ANIMATION
========================================================= */

    .profile-contact a {
        transform: translateY(0) scale(1) !important;
        transform-origin: center;
        transition: transform 0.42s cubic-bezier(.16, 1, .3, 1), box-shadow 0.42s cubic-bezier(.16, 1, .3, 1), border-color 0.35s ease, background 0.35s ease, filter 0.35s ease !important;
    }

        /* Soft shine layer */
        .profile-contact a::after {
            content: "" !important;
            position: absolute !important;
            top: -80% !important;
            left: -55% !important;
            width: 42% !important;
            height: 260% !important;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.34), transparent ) !important;
            transform: rotate(24deg) translateX(-160%) !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: transform 0.82s cubic-bezier(.16, 1, .3, 1), opacity 0.28s ease !important;
        }

        /* Gold ambient glow inside card */
        .profile-contact a::before {
            transition: top 0.38s cubic-bezier(.16, 1, .3, 1), bottom 0.38s cubic-bezier(.16, 1, .3, 1), width 0.38s cubic-bezier(.16, 1, .3, 1), opacity 0.38s ease, filter 0.38s ease !important;
        }

        /* Card hover */
        .profile-contact a:hover {
            transform: translateY(-7px) scale(1.018) !important;
            border-color: rgba(159, 116, 43, 0.72) !important;
            background: radial-gradient(circle at 88% 12%, rgba(255, 241, 184, 0.42), transparent 34%), linear-gradient(135deg, #f5d88b 0%, #dfbd7b 48%, #d2a85f 100%) !important;
            box-shadow: 0 24px 42px rgba(7, 27, 51, 0.20), 0 0 0 4px rgba(216, 170, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
            filter: saturate(1.05) contrast(1.02);
        }

            /* Shine movement */
            .profile-contact a:hover::after {
                opacity: 1 !important;
                transform: rotate(24deg) translateX(460%) !important;
            }

            /* Left accent becomes taller */
            .profile-contact a:hover::before {
                top: 9px !important;
                bottom: 9px !important;
                width: 6px !important;
                filter: brightness(1.12);
            }


            /* =========================================================
   ICON ANIMATION INSIDE CARD
========================================================= */

            .profile-contact a:hover .profile-contact-icon {
                filter: saturate(1.1) contrast(1.04);
            }

    /* =========================================================
   TEXT ANIMATION INSIDE CARD
========================================================= */

    .profile-contact-text {
        transition: transform 0.42s cubic-bezier(.16, 1, .3, 1), opacity 0.35s ease !important;
    }

    .profile-contact span {
        transition: color 0.35s ease, letter-spacing 0.35s ease, transform 0.35s cubic-bezier(.16, 1, .3, 1) !important;
    }

    .profile-contact strong {
        transition: color 0.35s ease, transform 0.35s cubic-bezier(.16, 1, .3, 1), opacity 0.35s ease !important;
    }

    .profile-contact a:hover span {
        color: #6f4a12 !important;
        letter-spacing: 1.45px !important;
        transform: translateY(-1px);
    }

    .profile-contact a:hover strong {
        transform: translateY(1px);
    }


    /* =========================================================
   CLICK FEEL
========================================================= */

    .profile-contact a:active {
        transform: translateY(-2px) scale(0.985) !important;
        transition-duration: 0.12s !important;
    }

        .profile-contact a:active .profile-contact-icon {
            transform: scale(0.92) rotate(-3deg) !important;
        }


    /* =========================================================
   FINAL PROFILE CONTACT HOVER
   Icon background fades out + icon becomes gold + subtle arrow
========================================================= */

    .profile-contact a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        overflow: hidden !important;
    }

    /* icon container: no permanent background on the box itself */
    .profile-contact-icon {
        position: relative !important;
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: translateY(0) scale(1) !important;
        transition: transform 0.48s cubic-bezier(.16, 1, .3, 1), filter 0.38s ease !important;
    }

        /* the visible square background */
        .profile-contact-icon::before {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            z-index: 1 !important;
            border-radius: 16px !important;
            background: radial-gradient(rgba(255, 255, 255, 0.0), transparent 30%), linear-gradient(135deg, #d8aa4f 0%, #d8aa4f 88%, #9f742b 100%) !important;
            box-shadow: 0 12px 24px rgba(7, 27, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
            opacity: 1 !important;
            transform: scale(1) rotate(0deg) !important;
            transition: opacity 0.42s ease, transform 0.58s cubic-bezier(.16, 1, .3, 1), border-radius 0.42s ease, filter 0.42s ease !important;
        }

        /* icon itself */
        .profile-contact-icon svg {
            position: relative !important;
            z-index: 2 !important;
            width: 21px !important;
            height: 21px !important;
            fill: currentColor !important;
            color: #071b33 !important;
            transform: scale(1) rotate(0deg) !important;
            transition: transform 0.52s cubic-bezier(.16, 1, .3, 1), color 0.38s ease, filter 0.38s ease !important;
        }

    /* hover: background square scales and fades away */
    .profile-contact a:hover .profile-contact-icon::before {
        opacity: 0 !important;
        transform: scale(1.72) rotate(10deg) !important;
        border-radius: 24px !important;
        filter: blur(2px) !important;
    }

    /* hover: icon remains, gets bigger, turns gold */
    .profile-contact a:hover .profile-contact-icon {
        transform: translateY(-2px) scale(1.02) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

        .profile-contact a:hover .profile-contact-icon svg {
            color: #d8aa4f !important;
            transform: scale(1.8) rotate(-3deg) !important;
            filter: drop-shadow(0 8px 14px rgba(7, 27, 51, 0.14)) drop-shadow(0 0 10px rgba(216, 170, 79, 0.18)) !important;
        }

            /* keep SVG filled, not outline */
            .profile-contact a:hover .profile-contact-icon svg path {
                fill: #715a33 !important;
                stroke: none !important;
            }

    /* remove old brand-color overrides */
    .profile-contact a:hover .whatsapp-icon svg,
    .profile-contact a:hover .linkedin-icon svg,
    .profile-contact a:hover .email-icon svg,
    .profile-contact a:hover .business-icon svg,
    .profile-contact a:hover .phone-icon svg {
        color: #d8aa4f !important;
    }


    /* =========================================================
   Subtle Professional Arrow
========================================================= */

    .profile-contact-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .profile-contact-arrow {
        position: relative !important;
        flex: 0 0 26px !important;
        width: 26px !important;
        height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: transparent !important;
        border: 1px solid rgba(159, 116, 43, 0.20) !important;
        box-shadow: none !important;
        opacity: 0 !important;
        transform: translateX(12px) scale(0.88) !important;
        transition: opacity 0.34s ease, transform 0.46s cubic-bezier(.16, 1, .3, 1), border-color 0.34s ease, background 0.34s ease !important;
    }

        .profile-contact-arrow svg {
            width: 15px !important;
            height: 15px !important;
            fill: none !important;
            stroke: #8a621f !important;
            stroke-width: 2.1 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
            transform: translateX(-2px) !important;
            transition: transform 0.46s cubic-bezier(.16, 1, .3, 1), stroke 0.34s ease !important;
        }

    /* arrow appears gently */
    .profile-contact a:hover .profile-contact-arrow {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
        border-color: rgba(216, 170, 79, 0.38) !important;
        background: rgba(255, 246, 216, 0.26) !important;
    }

        .profile-contact a:hover .profile-contact-arrow svg {
            stroke: #6f4a12 !important;
            transform: translateX(1px) !important;
        }

    /* subtle arrow motion */
    .profile-contact a:hover .profile-contact-arrow {
        animation: elegantArrowNudge 1.35s ease-in-out infinite;
    }

    @keyframes elegantArrowNudge {
        0%, 100% {
            transform: translateX(0) scale(1);
        }

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


    /* =========================================================
   Text motion refinement
========================================================= */

    .profile-contact a:hover .profile-contact-text {
        transform: translateX(5px) !important;
    }

    .profile-contact a:hover span:not(.profile-contact-arrow) {
        color: #6f4a12 !important;
    }

    .profile-contact a:hover strong {
        color: #061522 !important;
    }


    /* =========================================================
   PREMIUM TOP NAV ICON ANIMATION
   Gold icon appears on hover and stays on active
========================================================= */

    .site-nav {
        gap: 10px !important;
    }

        .site-nav a {
            position: relative !important;
            isolation: isolate !important;
            overflow: hidden !important;
            padding: 0 18px !important;
            border-radius: 999px !important;
            color: #687890 !important;
            background: transparent !important;
            border: 1px solid transparent !important;
            font-weight: 950 !important;
            transform: translateY(0) scale(1) !important;
            transition: transform 0.42s cubic-bezier(.18, 1, .28, 1), color 0.34s ease, background 0.34s ease, border-color 0.34s ease, box-shadow 0.42s cubic-bezier(.18, 1, .28, 1), padding 0.42s cubic-bezier(.18, 1, .28, 1) !important;
        }

            /* soft inner surface */
            .site-nav a::before {
                content: "" !important;
                position: absolute !important;
                inset: 0 !important;
                z-index: -1 !important;
                border-radius: inherit !important;
                background: radial-gradient(circle at 18% 0%, rgba(245, 216, 139, 0.26), transparent 38%), linear-gradient(145deg, rgba(255, 248, 230, 0.90), rgba(233, 215, 173, 0.58)) !important;
                opacity: 0 !important;
                transform: scale(0.86) translateY(8px) !important;
                transition: opacity 0.34s ease, transform 0.48s cubic-bezier(.18, 1, .28, 1) !important;
            }

            /* bottom gold indicator */
            .site-nav a::after {
                content: "" !important;
                position: absolute !important;
                left: 22px !important;
                right: 22px !important;
                bottom: 7px !important;
                height: 3px !important;
                border-radius: 999px !important;
                background: linear-gradient( 90deg, transparent, #d8aa4f, #f5d88b, #d8aa4f, transparent ) !important;
                opacity: 0 !important;
                transform: scaleX(0) !important;
                transform-origin: center !important;
                transition: opacity 0.34s ease, transform 0.48s cubic-bezier(.18, 1, .28, 1) !important;
            }

        /* text */
        .site-nav .nav-label {
            position: relative !important;
            z-index: 3 !important;
            transition: transform 0.42s cubic-bezier(.18, 1, .28, 1), color 0.34s ease !important;
        }

        /* hidden icon container */
        .site-nav .nav-icon {
            position: relative !important;
            z-index: 3 !important;
            width: 0 !important;
            height: 34px !important;
            flex: 0 0 0 !important;
            margin-right: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: hidden !important;
            opacity: 0 !important;
            border-radius: 17px !important;
            background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 24%, #d8aa4f 58%, #9f742b 100%) !important;
            box-shadow: 0 8px 18px rgba(7, 27, 51, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
            transform: translateX(-14px) scale(0.72) !important;
            transition: width 0.54s cubic-bezier(.18, 1, .28, 1), flex-basis 0.54s cubic-bezier(.18, 1, .28, 1), margin-right 0.54s cubic-bezier(.18, 1, .28, 1), opacity 0.34s ease, transform 0.62s cubic-bezier(.18, 1.18, .28, 1), box-shadow 0.34s ease !important;
        }

            .site-nav .nav-icon svg {
                width: 18px !important;
                height: 18px !important;
                fill: #071b33 !important;
                transform: scale(0.72) rotate(-18deg) !important;
                transition: transform 0.54s cubic-bezier(.18, 1, .28, 1), fill 0.34s ease !important;
            }

        /* hover state */
        .site-nav a:hover {
            color: #071b33 !important;
            margin-top: 4px;
            transform: translateY(-3px) scale(1.018) !important;
            border-color: rgba(216, 170, 79, 0.34) !important;
            box-shadow: 0 16px 32px rgba(7, 27, 51, 0.10), 0 0 0 4px rgba(216, 170, 79, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
        }

            .site-nav a:hover::before {
                opacity: 1 !important;
                transform: scale(1) translateY(0) !important;
            }

            .site-nav a:hover::after {
                opacity: 1 !important;
                transform: scaleX(1) !important;
            }

            .site-nav a:hover .nav-icon {
                width: 34px !important;
                flex-basis: 34px !important;
                margin-right: 9px !important;
                opacity: 1 !important;
                transform: translateX(0) scale(1) !important;
                animation: navIconSwitchPop 0.72s cubic-bezier(.18, 1.18, .28, 1);
            }

                .site-nav a:hover .nav-icon svg {
                    transform: scale(1) rotate(0deg) !important;
                }

            .site-nav a:hover .nav-label {
                transform: translateX(1px) !important;
            }

        /* active selected page */
        .site-nav a.active {
            color: #071b33 !important;
            top: 3px;
            background: linear-gradient(145deg, rgba(255, 248, 230, 0.96), rgba(233, 215, 173, 0.82)) !important;
            border-color: rgba(216, 170, 79, 0.44) !important;
            transform: translateY(-1px) scale(1.01) !important;
            box-shadow: 0 16px 34px rgba(7, 27, 51, 0.12), 0 0 0 4px rgba(216, 170, 79, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
        }

            .site-nav a.active::before {
                opacity: 1 !important;
                transform: scale(1) translateY(0) !important;
            }

            .site-nav a.active::after {
                opacity: 1 !important;
                transform: scaleX(1) !important;
            }

            .site-nav a.active .nav-icon {
                width: 34px !important;
                flex-basis: 34px !important;
                margin-right: 9px !important;
                opacity: 1 !important;
                transform: translateX(0) scale(1) !important;
            }

                .site-nav a.active .nav-icon svg {
                    transform: scale(1) rotate(0deg) !important;
                    fill: #071b33 !important;
                }

        /* click feel */
        .site-nav a:active {
            transform: translateY(1px) scale(0.96) !important;
        }

            .site-nav a:active .nav-icon {
                transform: scale(0.92) !important;
            }

    @keyframes navIconSwitchPop {
        0% {
            width: 0;
            flex-basis: 0;
            opacity: 0;
            transform: translateX(-14px) scale(0.72);
            border-radius: 999px;
        }

        38% {
            width: 42px;
            flex-basis: 42px;
            opacity: 1;
            transform: translateX(0) scale(1.06);
            border-radius: 17px;
        }

        68% {
            width: 30px;
            flex-basis: 30px;
            transform: translateX(0) scale(0.98);
        }

        100% {
            width: 34px;
            flex-basis: 34px;
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }


    /* =========================================================
   FINAL FIX - ACTIVE NAV ITEM MUST NOT HOVER
========================================================= */

    /* Active item does not receive mouse hover at all */
    .site-nav a.active {
        pointer-events: none !important;
        cursor: default !important;
    }

    /* Only non-active menu items can have hover animation */
    .site-nav a:not(.active):hover {
        color: #071b33 !important;
        transform: translateY(-3px) scale(1.018) !important;
    }

        .site-nav a:not(.active):hover::before {
            opacity: 1 !important;
            transform: scale(1) translateY(0) !important;
        }

        .site-nav a:not(.active):hover::after {
            opacity: 1 !important;
            transform: scaleX(1) !important;
        }

        .site-nav a:not(.active):hover .nav-icon {
            width: 34px !important;
            flex-basis: 34px !important;
            margin-right: 9px !important;
            opacity: 1 !important;
            transform: translateX(0) scale(1) !important;
            animation: navIconSwitchPop 0.72s cubic-bezier(.18, 1.18, .28, 1) !important;
        }

            .site-nav a:not(.active):hover .nav-icon svg {
                transform: scale(1) rotate(0deg) !important;
            }

        .site-nav a:not(.active):hover .nav-label {
            transform: translateX(1px) !important;
        }


    /* =========================================================
   FINAL FIX - LOCK TOPBAR HEIGHT
   Hover items must NOT change the topbar rectangle height
========================================================= */

    .topbar {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
        box-sizing: border-box !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
        transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease !important;
    }

    /* منوی داخل نوار هم ارتفاع ثابت داشته باشد */
    .site-nav {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

        /* دکمه‌های منو ارتفاع ثابت داشته باشند */
        .site-nav a {
            height: 48px !important;
            top: 3px;
            min-height: 48px !important;
            max-height: 48px !important;
            box-sizing: border-box !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            line-height: 1 !important;
        }

            /* روی hover ارتفاع، padding و line-height هیچ تغییری نکند */
            .site-nav a:not(.active):hover {
                height: 48px !important;
                top: 4px;
                min-height: 48px !important;
                max-height: 48px !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                line-height: 1 !important;
            }

            /* active هم دقیقاً همان ارتفاع ثابت */
            .site-nav a.active {
                height: 48px !important;
                min-height: 48px !important;
                max-height: 48px !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                line-height: 1 !important;
            }

    /* دکمه‌های سمت راست مثل Theme و Language هم نوار را بلند نکنند */
    .top-actions {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* جلوگیری از تغییر ارتفاع توسط آیکون‌ها */
    .site-nav .nav-icon {
        max-height: 34px !important;
    }

        .site-nav .nav-icon svg {
            max-height: 18px !important;
        }



    /* =========================================================
   COMPANY MARQUEE CARD UNDER TOP NAVBAR
========================================================= */

.company-marquee-card {
    position: relative !important;
    width: 100% !important;
    height: 112px !important;
    margin-top: 6px !important;
    margin-bottom: 28px !important;
    display: grid !important;
    grid-template-columns: 230px 1fr !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(216, 170, 79, 0.30) !important;
    background: radial-gradient(circle at 7% 15%, rgba(255, 241, 184, 0.48), transparent 34%), linear-gradient(145deg, rgb(237 219 174 / 96%), rgb(229 210 168 / 72%)) !important;
    box-shadow: 0 18px 42px rgba(7, 27, 51, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(18px) !important;
}

    /* left title area */
.company-marquee-header {
    position: relative !important;
    z-index: 4 !important;
    height: 100% !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-right: 1px solid rgba(111, 92, 53, 0.22) !important;
    background: linear-gradient(90deg, rgb(189 172 126 / 92%), rgb(197 179 133 / 57%), #cbc4af7a) !important;
}

        .company-marquee-header span {
            margin-bottom: 7px !important;
            color: #8a621f !important;
            font-size: 11px !important;
            font-weight: 950 !important;
            letter-spacing: 1.45px !important;
            text-transform: uppercase !important;
        }

        .company-marquee-header strong {
            color: #071b33 !important;
            font-size: 18px !important;
            font-weight: 950 !important;
            letter-spacing: -0.35px !important;
        }

    /* mask area */
    .company-marquee-mask {
        position: relative !important;
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }

        /* fade edges */
        .company-marquee-mask::before,
        .company-marquee-mask::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 90px !important;
            z-index: 3 !important;
            pointer-events: none !important;
        }

        .company-marquee-mask::before {
            left: 0 !important;
            background: linear-gradient(90deg, rgba(250, 241, 220, 0.98), transparent) !important;
        }

        .company-marquee-mask::after {
            right: 0 !important;
            background: linear-gradient(270deg, rgba(250, 241, 220, 0.98), transparent) !important;
        }

    /* moving track */
    .company-marquee-track {
        display: flex !important;
        align-items: center !important;
        width: max-content !important;
        animation: companyMarqueeMove 26s linear infinite !important;
        will-change: transform !important;
    }

    .company-marquee-card:hover .company-marquee-track {
        animation-play-state: paused !important;
    }

    /* each duplicated group */
    .company-marquee-group {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        padding-right: 18px !important;
    }

    /* company item */
    .company-logo-item {
        position: relative !important;
        min-width: 185px !important;
        height: 70px !important;
        padding: 10px 18px 10px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(101, 80, 40, 0.25) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 252, 244, 0.99)) !important;
        box-shadow: 0 0px 6px rgba(7, 27, 51, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
        transition: transform 0.36s cubic-bezier(.16, 1, .3, 1), border-color 0.32s ease, box-shadow 0.36s ease, background 0.32s ease !important;
    }

        .company-logo-item:hover {
            transform: translateY(-3px) scale(1.025) !important;
            border-color: rgba(216, 170, 79, 0.44) !important;
            background: linear-gradient(145deg, rgba(255, 248, 230, 0.92), rgba(245, 216, 139, 0.30)) !important;
            box-shadow: 0 0px 6px rgba(7, 27, 51, 0.46), 0 0 0 4px rgba(216, 170, 79, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
        }

        /* logo image */
        .company-logo-item img {
            width: 84px !important;
            height: 84px !important;
            object-fit: contain !important;
            filter: saturate(0.95) contrast(1.02) !important;
            transition: transform 0.36s cubic-bezier(.16, 1, .3, 1), filter 0.32s ease !important;
        }

        .company-logo-item:hover img {
            transform: scale(1.08) !important;
            filter: saturate(1.08) contrast(1.05) !important;
        }

    /* fallback logo circle */
    .company-logo-fallback {
        width: 44px !important;
        height: 44px !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 15px !important;
        color: #071b33 !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        background: linear-gradient(135deg, #fff1b8, #d8aa4f 58%, #9f742b) !important;
    }

    /* company name */
    .company-logo-item strong {
        color: #071b33 !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        letter-spacing: -0.1px !important;
    }

    /* right to left movement */
    @keyframes companyMarqueeMove {
        from {
            transform: translateX(0);
        }

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



    /* =========================================================
   RESPONSIVE COMPANY MARQUEE
========================================================= */

    @media (max-width: 1100px) {
        .company-marquee-card {
            height: 128px !important;
            grid-template-columns: 1fr !important;
            gap: 0 !important;
            top: -22px;
        }

        .company-marquee-header {
            height: 44px !important;
            padding: 0 18px !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(216, 170, 79, 0.20) !important;
        }

            .company-marquee-header span {
                display: none !important;
            }

            .company-marquee-header strong {
                font-size: 15px !important;
            }

        .company-marquee-mask {
            height: 84px !important;
        }

        .company-logo-item {
            min-width: 160px !important;
            height: 62px !important;
        }

            .company-logo-item img,
            .company-logo-fallback {
                width: 38px !important;
                height: 38px !important;
            }

            .company-logo-item strong {
                font-size: 14px !important;
            }
    }


    /* =========================================================
   HOME PAGE - PREMIUM TECHNICAL PORTFOLIO SECTIONS
========================================================= */

    .home-hero {
        position: relative !important;
        overflow: hidden !important;
    }

        .home-hero h1 {
            max-width: 980px !important;
            margin: 12px 0 22px !important;
            font-size: clamp(42px, 5vw, 78px) !important;
            line-height: 0.98 !important;
            letter-spacing: -2.8px !important;
        }

        .home-hero p {
            max-width: 980px !important;
            margin-bottom: 16px !important;
            color: var(--muted, #5f6f84) !important;
            font-size: 17px !important;
            line-height: 1.85 !important;
        }


    /* =========================================================
   HOME STATS
========================================================= */

    .home-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        margin: 28px 0 34px !important;
    }

    .home-stat-card {
        position: relative !important;
        overflow: hidden !important;
        padding: 28px !important;
        min-height: 210px !important;
        border-radius: 28px !important;
        border: 1px solid rgba(216, 170, 79, 0.26) !important;
        background: radial-gradient(circle at 92% 12%, rgba(255, 241, 184, 0.36), transparent 34%), linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255, 246, 216, 0.50)) !important;
        box-shadow: 0 18px 42px rgba(7, 27, 51, 0.08), inset 0 1px 0 rgba(255,255,255,0.72) !important;
        transition: transform 0.42s cubic-bezier(.16, 1, .3, 1), box-shadow 0.42s ease, border-color 0.34s ease !important;
    }

        .home-stat-card:hover {
            transform: translateY(-8px) !important;
            border-color: rgba(216, 170, 79, 0.52) !important;
            box-shadow: 0 28px 58px rgba(7, 27, 51, 0.14), 0 0 0 5px rgba(216, 170, 79, 0.08), inset 0 1px 0 rgba(255,255,255,0.78) !important;
        }

        .home-stat-card span {
            display: block !important;
            margin-bottom: 18px !important;
            color: #9f742b !important;
            font-size: 36px !important;
            font-weight: 950 !important;
            letter-spacing: -1.4px !important;
        }

        .home-stat-card h3 {
            margin: 0 0 12px !important;
            color: #071b33 !important;
            font-size: 20px !important;
            font-weight: 950 !important;
            line-height: 1.25 !important;
        }

        .home-stat-card p {
            margin: 0 !important;
            color: #607085 !important;
            font-size: 14.5px !important;
            line-height: 1.75 !important;
        }


    /* =========================================================
   GLOBAL HOME SECTION
========================================================= */

    .home-section {
        margin: 34px 0 !important;
        padding: 34px !important;
        border-radius: 34px !important;
        border: 1px solid rgba(216, 170, 79, 0.24) !important;
        background: radial-gradient(circle at 5% 0%, rgba(255, 241, 184, 0.34), transparent 34%), linear-gradient(145deg, rgba(255, 250, 238, 0.82), rgba(255, 255, 255, 0.58)) !important;
        box-shadow: 0 20px 46px rgba(7, 27, 51, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    }

    .home-section-heading {
        max-width: 940px !important;
        margin-bottom: 28px !important;
    }

        .home-section-heading span,
        .home-goal-content span {
            display: inline-flex !important;
            margin-bottom: 12px !important;
            color: #8a621f !important;
            font-size: 12px !important;
            font-weight: 950 !important;
            letter-spacing: 1.7px !important;
            text-transform: uppercase !important;
        }

        .home-section-heading h2,
        .home-goal-content h2 {
            margin: 0 0 16px !important;
            color: #071b33 !important;
            font-size: clamp(30px, 3vw, 48px) !important;
            line-height: 1.08 !important;
            letter-spacing: -1.5px !important;
            font-weight: 950 !important;
        }

        .home-section-heading p,
        .home-goal-content p {
            margin: 0 !important;
            color: #607085 !important;
            font-size: 16px !important;
            line-height: 1.85 !important;
        }


    /* =========================================================
   FOCUS AREAS
========================================================= */

    .home-focus-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .home-focus-card {
        position: relative !important;
        overflow: hidden !important;
        padding: 18px 20px !important;
        min-height: 78px !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 22px !important;
        border: 1px solid rgba(216, 170, 79, 0.20) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255, 246, 216, 0.38)) !important;
        color: #071b33 !important;
        font-size: 15px !important;
        font-weight: 850 !important;
        line-height: 1.45 !important;
        transition: transform 0.36s cubic-bezier(.16, 1, .3, 1), background 0.34s ease, border-color 0.34s ease, color 0.34s ease !important;
    }

        .home-focus-card:hover {
            transform: translateY(-5px) !important;
            border-color: rgba(216, 170, 79, 0.48) !important;
            background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 28%, #d8aa4f 72%, #b88735 100%) !important;
            color: #071b33 !important;
        }


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

    .home-capabilities-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .home-capability-card {
        position: relative !important;
        overflow: hidden !important;
        padding: 24px !important;
        min-height: 250px !important;
        border-radius: 28px !important;
        border: 1px solid rgba(216, 170, 79, 0.22) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255, 246, 216, 0.38)) !important;
        box-shadow: 0 14px 32px rgba(7, 27, 51, 0.07), inset 0 1px 0 rgba(255,255,255,0.68) !important;
        transition: transform 0.42s cubic-bezier(.16, 1, .3, 1), box-shadow 0.42s ease, border-color 0.34s ease !important;
    }

        .home-capability-card:hover {
            transform: translateY(-8px) !important;
            border-color: rgba(216, 170, 79, 0.52) !important;
            box-shadow: 0 26px 52px rgba(7, 27, 51, 0.13), 0 0 0 5px rgba(216, 170, 79, 0.08), inset 0 1px 0 rgba(255,255,255,0.76) !important;
        }

    .home-capability-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, #fff1b8, #d8aa4f 58%, #9f742b) !important;
        color: #071b33 !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        box-shadow: 0 12px 24px rgba(7, 27, 51, 0.14), inset 0 1px 0 rgba(255,255,255,0.50) !important;
        transition: transform 0.42s cubic-bezier(.16, 1, .3, 1) !important;
    }

    .home-capability-card:hover .home-capability-icon {
        transform: scale(1.08) rotate(-4deg) !important;
    }

    .home-capability-card h3 {
        margin: 0 0 12px !important;
        color: #071b33 !important;
        font-size: 19px !important;
        font-weight: 950 !important;
        line-height: 1.25 !important;
    }

    .home-capability-card p {
        margin: 0 !important;
        color: #607085 !important;
        font-size: 14.5px !important;
        line-height: 1.75 !important;
    }


    /* =========================================================
   PROJECT HIGHLIGHTS
========================================================= */

    .home-projects-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .home-project-item {
        position: relative !important;
        overflow: hidden !important;
        padding: 22px 24px !important;
        display: grid !important;
        grid-template-columns: 58px 1fr !important;
        gap: 18px !important;
        align-items: start !important;
        border-radius: 26px !important;
        border: 1px solid rgba(216, 170, 79, 0.20) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255, 246, 216, 0.34)) !important;
        transition: transform 0.36s cubic-bezier(.16, 1, .3, 1), border-color 0.34s ease, box-shadow 0.36s ease !important;
    }

        .home-project-item:hover {
            transform: translateX(8px) !important;
            border-color: rgba(216, 170, 79, 0.50) !important;
            box-shadow: 0 18px 38px rgba(7, 27, 51, 0.10), 0 0 0 5px rgba(216, 170, 79, 0.07) !important;
        }

        .home-project-item > span {
            width: 48px !important;
            height: 48px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 17px !important;
            background: linear-gradient(135deg, #fff1b8, #d8aa4f 58%, #9f742b) !important;
            color: #071b33 !important;
            font-size: 14px !important;
            font-weight: 950 !important;
        }

        .home-project-item h3 {
            margin: 0 0 8px !important;
            color: #071b33 !important;
            font-size: 19px !important;
            font-weight: 950 !important;
        }

        .home-project-item p {
            margin: 0 !important;
            color: #607085 !important;
            font-size: 14.5px !important;
            line-height: 1.75 !important;
        }


    /* =========================================================
   SOFTWARE SECTION
========================================================= */

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

    .software-category-card {
        padding: 24px !important;
        border-radius: 28px !important;
        border: 1px solid rgba(216, 170, 79, 0.22) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255, 246, 216, 0.38)) !important;
        box-shadow: 0 14px 32px rgba(7, 27, 51, 0.06), inset 0 1px 0 rgba(255,255,255,0.68) !important;
    }

        .software-category-card h3 {
            margin: 0 0 16px !important;
            color: #071b33 !important;
            font-size: 19px !important;
            font-weight: 950 !important;
        }

    .software-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

        .software-tags span {
            padding: 10px 14px !important;
            border-radius: 999px !important;
            border: 1px solid rgba(216, 170, 79, 0.24) !important;
            background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255, 246, 216, 0.48)) !important;
            color: #6f4a12 !important;
            font-size: 13px !important;
            font-weight: 850 !important;
            transition: transform 0.28s cubic-bezier(.16, 1, .3, 1), background 0.28s ease, color 0.28s ease !important;
        }

            .software-tags span:hover {
                transform: translateY(-3px) !important;
                background: linear-gradient(135deg, #fff1b8, #d8aa4f 70%, #9f742b) !important;
                color: #071b33 !important;
            }


    /* =========================================================
   GOAL SECTION
========================================================= */

    .home-goal-section {
        position: relative !important;
        overflow: hidden !important;
        margin: 34px 0 60px !important;
        padding: 46px !important;
        border-radius: 38px !important;
        border: 1px solid rgba(216, 170, 79, 0.36) !important;
        background: radial-gradient(circle at 82% 16%, rgba(255, 241, 184, 0.56), transparent 34%), linear-gradient(135deg, rgba(255, 250, 238, 0.94), rgba(238, 224, 194, 0.70)) !important;
        box-shadow: 0 28px 64px rgba(7, 27, 51, 0.12), inset 0 1px 0 rgba(255,255,255,0.74) !important;
    }

    .home-goal-content {
        max-width: 1000px !important;
    }


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

    @media (max-width: 1100px) {
        .home-stats-grid,
        .home-capabilities-grid,
        .home-focus-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .software-category-grid {
            grid-template-columns: 1fr !important;
        }
    }

    @media (max-width: 760px) {
        .home-stats-grid,
        .home-capabilities-grid,
        .home-focus-grid {
            grid-template-columns: 1fr !important;
        }

        .home-section,
        .home-goal-section {
            padding: 24px !important;
            border-radius: 28px !important;
        }

        .home-project-item {
            grid-template-columns: 1fr !important;
        }

        .home-hero h1 {
            font-size: 40px !important;
            letter-spacing: -1.5px !important;
        }
    }



    /* =========================================================
   MODERN HOME HERO
   Clean navy + teal + blue + soft gold accent
========================================================= */

    .modern-home-hero {
        --hero-teal: #4bbfc3;
        --hero-teal-dark: #218f98;
        --hero-blue: #73bde2;
        --hero-green: #76bda5;
        --hero-surface: #f8fbfc;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1.22fr) minmax(350px, 0.78fr);
        gap: 26px;
        align-items: stretch;
        width: 100%;
        padding: 38px;
        margin-bottom: 34px;
        border: 1px solid rgba(75, 191, 195, 0.22);
        border-radius: 38px;
    }

        /* modern color atmosphere */
        .modern-home-hero::before {
            content: "";
            position: absolute;
            z-index: -2;
            pointer-events: none;
            width: 470px;
            height: 470px;
            top: -245px;
            right: -100px;
            border-radius: 50%;
            filter: blur(4px);
        }

        .modern-home-hero::after {
            content: "";
            position: absolute;
            z-index: -2;
            pointer-events: none;
            width: 380px;
            height: 380px;
            left: 34%;
            bottom: -260px;
            border-radius: 50%;
            filter: blur(12px);
        }


    /* =========================================================
   LEFT CONTENT
========================================================= */

    .modern-home-hero__content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 18px 14px 18px 10px;
    }

    .modern-hero-eyebrow {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 22px;
        padding: 10px 15px;
        border: 1px solid rgba(75, 191, 195, 0.24);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
    }

    .modern-hero-eyebrow__dot {
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        border-radius: 50%;
    }

    .modern-hero-title {
        max-width: 1100px;
        margin: 0 0 24px;
        font-size: clamp(48px, 5.3vw, 78px);
        font-weight: 950;
        line-height: 0.98;
        letter-spacing: -3.1px;
    }

        .modern-hero-title span {
            display: block;
        }

    .modern-hero-lead {
        max-width: 920px;
        margin: 0 0 15px;
        font-size: 17px;
        font-weight: 680;
        line-height: 1.8;
    }

    .modern-hero-description {
        max-width: 1100px;
        margin: 0 0 27px;
        font-size: 15.5px;
        font-weight: 560;
        line-height: 1.8;
    }


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

    .modern-hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 13px;
        margin-bottom: 30px;
    }

    .modern-hero-btn {
        min-height: 52px;
        padding: 0 21px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        border-radius: 17px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 900;
        transition: transform 0.38s cubic-bezier(.16, 1, .3, 1), box-shadow 0.38s ease, border-color 0.32s ease, background 0.32s ease;
    }

    .modern-hero-btn--primary {
        border: 1px solid rgba(33, 143, 152, 0.34);
    }

        .modern-hero-btn--primary svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.36s cubic-bezier(.16, 1, .3, 1);
        }

        .modern-hero-btn--primary:hover {
            transform: translateY(-4px);
        }

            .modern-hero-btn--primary:hover svg {
                transform: translateX(4px);
            }

    .modern-hero-btn--secondary {
        border: 1px solid rgba(16, 36, 60, 0.14);
        backdrop-filter: blur(12px);
    }

        .modern-hero-btn--secondary:hover {
            transform: translateY(-4px);
        }


    /* =========================================================
   METRICS
========================================================= */

    .modern-hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 11px;
    }

    .modern-hero-metric {
        min-height: 102px;
        padding: 17px;
        border: 1px solid rgba(75, 191, 195, 0.17);
        border-radius: 21px;
        transition: transform 0.38s cubic-bezier(.16, 1, .3, 1), border-color 0.32s ease, box-shadow 0.38s ease;
    }

        .modern-hero-metric:hover {
            transform: translateY(-5px);
        }

        .modern-hero-metric strong {
            display: block;
            margin-bottom: 7px;
            font-size: 22px;
            font-weight: 950;
            letter-spacing: -0.7px;
        }

        .modern-hero-metric span {
            display: block;
            font-size: 12.5px;
            font-weight: 700;
            line-height: 1.45;
        }


    /* =========================================================
   MY GOAL PANEL
========================================================= */

    .modern-goal-panel {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 100%;
        padding: 29px;
        border: 1px solid rgba(75, 191, 195, 0.30);
        border-radius: 30px;
    }

        .modern-goal-panel::before {
            content: "";
            position: absolute;
            z-index: -1;
            width: 180px;
            height: 180px;
            top: -84px;
            right: -64px;
            border: 36px solid rgba(75, 191, 195, 0.09);
            border-radius: 50%;
        }

        .modern-goal-panel::after {
            content: "";
            position: absolute;
            z-index: -1;
            width: 120px;
            height: 120px;
            left: -55px;
            bottom: -50px;
            border-radius: 36px;
            transform: rotate(25deg);
        }

    .modern-goal-panel__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 19px;
    }

    .modern-goal-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 13px;
        border: 1px solid rgba(33, 143, 152, 0.20);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 950;
        letter-spacing: 1.45px;
        text-transform: uppercase;
    }

        .modern-goal-label span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

    .modern-goal-symbol {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(33, 143, 152, 0.22);
        border-radius: 16px;
    }

        .modern-goal-symbol svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .modern-goal-panel > h2 {
        margin: 0 0 16px;
        font-size: clamp(28px, 2.55vw, 41px);
        font-weight: 950;
        line-height: 1.08;
        letter-spacing: -1.45px;
    }

    .modern-goal-panel > p {
        margin: 0 0 22px;
        font-size: 14.5px;
        font-weight: 580;
        line-height: 1.72;
    }


    /* =========================================================
   GOAL OUTCOMES
========================================================= */

    .modern-goal-outcomes {
        display: grid;
        gap: 10px;
    }

    .modern-goal-outcome {
        display: grid;
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 13px;
        border: 1px solid rgba(255, 255, 255, 0.99);
        border-radius: 18px;
        background: rgba(241, 225, 196, 0.99);
        box-shadow: 0 4px 6px rgba(16, 36, 60, 0.545), inset 0 1px 0 rgba(255, 255, 255, 0.80);
        transition: transform 0.36s cubic-bezier(.16, 1, .3, 1), border-color 0.32s ease, background 0.32s ease;
    }

        .modern-goal-outcome:hover {
            transform: translateX(5px);
            border-color: rgba(33, 143, 152, 0.34);
            background: rgba(255, 255, 255, 0.72);
        }

    .modern-goal-outcome__number {
        width: 37px;
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: #7b6846;
        border: 3px solid rgba(109, 88, 51, 0.86);
        background: rgba(255, 255, 255, 0.02);
        font-size: 11px;
        font-weight: 950;
    }



    .modern-goal-outcome strong {
        display: block;
        margin: 1px 0 4px;
        font-size: 14px;
        font-weight: 900;
    }

    .modern-goal-outcome p {
        margin: 0;
        font-size: 12.5px;
        line-height: 1.5;
    }


    /* =========================================================
   GOAL FOOTER TAGS
========================================================= */

    .modern-goal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 18px;
    }

        .modern-goal-footer span {
            padding: 7px 10px;
            border: 1px solid rgba(33, 143, 152, 0.16);
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 800;
        }


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

    @media (max-width: 1180px) {
        .modern-home-hero {
            grid-template-columns: 1fr;
        }

        .modern-goal-panel {
            min-height: auto;
        }
    }

    @media (max-width: 760px) {
        .modern-home-hero {
            padding: 22px;
            border-radius: 28px;
        }

        .modern-home-hero__content {
            padding: 6px 2px;
        }

        .modern-hero-title {
            font-size: 43px;
            letter-spacing: -1.9px;
        }

        .modern-hero-metrics {
            grid-template-columns: 1fr;
        }

        .modern-goal-panel {
            padding: 22px;
            border-radius: 24px;
        }

            .modern-goal-panel > h2 {
                font-size: 30px;
            }
    }



    /* =========================================================
   MODERN HERO — WARM CREAM & GOLD PALETTE
   Keep current layout, replace only the colors
========================================================= */

    .modern-home-hero {
        --hero-ink: #2f251c !important;
        --hero-muted: #75685b !important;
        --hero-gold: #c89a42 !important;
        --hero-gold-light: #f1d795 !important;
        --hero-bronze: #95672c !important;
        --hero-copper: #b87352 !important;
        --hero-olive: #8c8960 !important;
        --hero-cream: #fbf8f1 !important;
        --hero-sand: #eee1ca !important;
        margin-top: 6px;
        border-color: rgba(180, 132, 52, 0.25) !important;
        background: radial-gradient( circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30% ), radial-gradient( circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31% ), radial-gradient( circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30% ), linear-gradient( 135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100% ) !important;
        box-shadow: 0 24px 70px rgba(75, 53, 28, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    }

        /* warm top decorative glow */
        .modern-home-hero::before {
            background: radial-gradient( circle, rgba(241, 215, 149, 0.44) 0%, rgba(200, 154, 66, 0.18) 45%, transparent 72% ) !important;
        }

        /* subtle copper / olive lower atmosphere */
        .modern-home-hero::after {
            background: radial-gradient( circle, rgba(184, 115, 82, 0.18) 0%, rgba(140, 137, 96, 0.10) 47%, transparent 72% ) !important;
        }


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

    .modern-hero-eyebrow {
        border-color: rgba(200, 154, 66, 0.25) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(247, 235, 210, 0.72) ) !important;
        color: #895f23 !important;
        box-shadow: 0 9px 22px rgba(84, 58, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

    .modern-hero-eyebrow__dot {
        background: linear-gradient( 135deg, #f1d795, #c89a42 55%, #95672c ) !important;
        box-shadow: 0 0 0 5px rgba(200, 154, 66, 0.13) !important;
    }


    /* =========================================================
   TITLE & TEXT
========================================================= */

    .modern-hero-title {
        color: #2f251c !important;
    }

        .modern-hero-title span {
            background: linear-gradient( 90deg, #8d6228 0%, #c18d39 25%, #e4bd69 50%, #b87352 76%, #8c7048 100% ) !important;
            background-clip: text !important;
            -webkit-background-clip: text !important;
            color: transparent !important;
        }

    .modern-hero-lead {
        color: #554a3f !important;
    }

    .modern-hero-description {
        color: #776b60 !important;
    }


    /* =========================================================
   PRIMARY BUTTON
========================================================= */

    .modern-hero-btn--primary {
        border-color: rgba(157, 105, 39, 0.38) !important;
        color: #241a10 !important;
        background: linear-gradient(135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
        box-shadow: 0 16px 30px rgba(151, 99, 31, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
    }

        .modern-hero-btn--primary:hover {
            box-shadow: 0 22px 40px rgba(151, 99, 31, 0.30), 0 0 0 5px rgba(200, 154, 66, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
        }


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

    .modern-hero-btn--secondary {
        border-color: rgba(149, 103, 44, 0.20) !important;
        color: #382b20 !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(243, 231, 208, 0.68) ) !important;
        box-shadow: 0 12px 26px rgba(74, 52, 31, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

        .modern-hero-btn--secondary:hover {
            border-color: rgba(200, 154, 66, 0.42) !important;
            background: linear-gradient( 145deg, rgba(255, 250, 239, 0.96), rgba(241, 215, 149, 0.36) ) !important;
            box-shadow: 0 18px 34px rgba(74, 52, 31, 0.11), 0 0 0 5px rgba(200, 154, 66, 0.08) !important;
        }


    /* =========================================================
   METRIC CARDS
========================================================= */

    .modern-hero-metric {
        border-color: rgba(200, 154, 66, 0.20) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(247, 234, 207, 0.72) ) !important;
        box-shadow: 0 12px 26px rgba(74, 52, 31, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
    }

        /* کارت دوم: مسی بسیار ملایم */
        .modern-hero-metric:nth-child(2) {
            border-color: rgba(184, 115, 82, 0.23) !important;
            background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(247, 229, 216, 0.72) ) !important;
        }

        /* کارت سوم: زیتونی خاکی ملایم */
        .modern-hero-metric:nth-child(3) {
            border-color: rgba(140, 137, 96, 0.23) !important;
            background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(237, 234, 211, 0.74) ) !important;
        }

        .modern-hero-metric:hover {
            border-color: rgba(200, 154, 66, 0.48) !important;
            box-shadow: 0 18px 35px rgba(74, 52, 31, 0.11), 0 0 0 4px rgba(200, 154, 66, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
        }

        .modern-hero-metric strong {
            color: #3b2c1f !important;
        }

        .modern-hero-metric span {
            color: #76695d !important;
        }


    /* =========================================================
   MY GOAL PANEL
========================================================= */

    .modern-goal-panel {
        border-color: rgba(184, 115, 82, 0.25) !important;
        background: radial-gradient(circle at 87% 6%, rgba(245, 218, 148, 0.26), transparent 30%), linear-gradient(145deg, #c6ae78 0%, #b8a175 38%, #a68f6c 70%, #9d8564 100%) !important;
    }

        .modern-goal-panel::before {
            border-color: rgba(200, 154, 66, 0.11) !important;
        }

        .modern-goal-panel::after {
            background: rgba(184, 115, 82, 0.10) !important;
        }


    /* =========================================================
   MY GOAL TOP
========================================================= */

    .modern-goal-label {
        border-color: rgba(200, 154, 66, 0.22) !important;
        background: rgba(255, 255, 255, 0.56) !important;
        color: #825b24 !important;
    }

        .modern-goal-label span {
            background: #b87352 !important;
            box-shadow: 0 0 0 5px rgba(184, 115, 82, 0.12) !important;
        }

    .modern-goal-symbol {
        border-color: rgba(200, 154, 66, 0.24) !important;
        color: #9b6e2c !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.70), rgba(241, 215, 149, 0.40) ) !important;
        box-shadow: 0 12px 24px rgba(104, 72, 34, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

    .modern-goal-panel > h2 {
        color: #33261c !important;
    }

    .modern-goal-panel > p {
        color: #ffffff !important;
    }




    .modern-goal-outcome strong {
        color: #3b2c20 !important;
    }

    .modern-goal-outcome p {
        color: #77695d !important;
    }


    /* =========================================================
   GOAL FOOTER TAGS
========================================================= */

    .modern-goal-footer span {
        border-color: rgba(169, 123, 53, 0.18) !important;
        color: #74542d !important;
        background: rgba(255, 255, 255, 0.48) !important;
    }


    /* =========================================================
   AMT205 CHAMPAGNE GOLD ANIMATED TITLE
========================================================= */

    /* =========================================================
   MAIN HERO ANIMATED GOLD TITLE
========================================================= */

    .modern-hero-title,
    .modern-hero-title > span {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
        background-size: 240% 100% !important;
        background-position: 0% 50%;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
        will-change: background-position;
    }


        /* خط دوم زیر خط اول */
        .modern-hero-title > span {
            display: block !important;
        }


    /* حرکت بسیار آهسته طلایی */
    @keyframes amt205GoldFlow {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 55% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }



    /* =========================================================
   ANIMATED STAT CARDS - SMOOTH PREMIUM VERSION
========================================================= */

    .animated-stat-grid {
        position: relative !important;
        z-index: 20 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: center !important;
        overflow: visible !important;
        transition: all 0.45s cubic-bezier(.22, 1, .36, 1) !important;
    }


    /* =========================================================
   BASE CARD
========================================================= */

    .animated-stat-card {
        --stat-frame: #8a7259;
        --stat-gold-light: #e5cc88;
        --stat-gold-main: #d3ac57;
        --stat-gold-dark: #bf8931;
        --stat-text: #3d3127;
        --stat-bullet: #dfb20d;
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        width: 100% !important;
        aspect-ratio: 1.72 / 1 !important;
        min-height: 128px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(187, 140, 65, 0.23) !important;
        border-radius: 22px !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(249, 238, 216, 0.96) ) !important;
        box-shadow: 0 13px 28px rgba(66, 46, 26, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
        transform: translate3d(0, 0, 0) scale(1) translateX(0) !important;
        transform-origin: center center !important;
        cursor: default !important;
        transition: transform 0.65s cubic-bezier(.22, 1, .36, 1), border-color 0.42s ease, box-shadow 0.50s ease !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        -webkit-font-smoothing: antialiased !important;
    }

        .animated-stat-card::before,
        .animated-stat-card::after {
            display: none !important;
            content: none !important;
        }


    /* کارت دوم */
    .animated-stat-card--copper {
        border-color: rgba(184, 115, 82, 0.22) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(249, 232, 220, 0.96) ) !important;
    }


    /* کارت سوم */
    .animated-stat-card--olive {
        border-color: rgba(140, 137, 96, 0.23) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(239, 237, 216, 0.96) ) !important;
    }


    /* =========================================================
   NORMAL STATE
========================================================= */

    .animated-stat-front {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        padding: 24px 18px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) !important;
        transition: opacity 0.28s ease, visibility 0s linear 0s, transform 0.50s cubic-bezier(.22, 1, .36, 1) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

        .animated-stat-front strong {
            display: block !important;
            margin: 0 0 10px !important;
            color: #3c2e23 !important;
            font-size: 27px !important;
            font-weight: 950 !important;
            line-height: 1 !important;
            letter-spacing: -0.8px !important;
        }

        .animated-stat-front span {
            display: block !important;
            max-width: 210px !important;
            color: #74685d !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            line-height: 1.42 !important;
        }


    /* =========================================================
   REVEAL LAYER
========================================================= */

    .animated-stat-reveal {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3 !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: linear-gradient( 145deg, #f6f0e9 0%, #eee5dc 100% ) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        /*
       عمداً Scale حذف شده است.
       Scale شدن این لایه باعث لرزش فریم SVG می‌شد.
    */
        transform: translate3d(0, 0, 0) !important;
        transition: opacity 0.34s ease, visibility 0s linear 0.36s !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        will-change: opacity !important;
    }


    /* =========================================================
   ROUNDED BROWN SVG FRAME
   Fixed dimensions — no inset/radius animation
========================================================= */

    .animated-stat-frame {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        z-index: 2 !important;
        width: calc(100% - 16px) !important;
        height: calc(100% - 16px) !important;
        display: block !important;
        overflow: visible !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transform: translate3d(0, 0, 0) rotate(7deg) scale3d(1.02, 1.02, 1) !important;
        transform-origin: center center !important;
        transition: opacity 0.34s ease, transform 0.78s cubic-bezier(.22, 1, .36, 1) !important;
        will-change: transform, opacity !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        shape-rendering: geometricPrecision !important;
    }


        /* خود خط قهوه‌ای */
        .animated-stat-frame rect {
            fill: none !important;
            stroke: var(--stat-frame) !important;
            stroke-width: 1.8px !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
            vector-effect: non-scaling-stroke !important;
            /*
       هیچ Transform یا Transition روی خود خط اجرا نمی‌شود.
    */
            transform: none !important;
            transition: none !important;
            shape-rendering: geometricPrecision !important;
        }


    /* =========================================================
   GOLD HEADER
   فقط fade شود - بدون انیمیشن باز شدن
========================================================= */

    .animated-stat-header {
        position: absolute !important;
        top: 10px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 4 !important;
        height: 34px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px 12px 0 0 !important;
        background: linear-gradient( 135deg, #fff1b8 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(113, 76, 30, 0.08) !important;
        opacity: 0 !important;
        transform: translate3d(0, 0, 0) translateY(0) !important;
        transition: opacity 0.42s ease !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }


        /* حذف افکت نور قبلی */
        .animated-stat-header::after {
            display: none !important;
            content: none !important;
        }


        .animated-stat-header span {
            display: block !important;
            color: #fffdf8 !important;
            font-size: 10.8px !important;
            font-weight: 950 !important;
            line-height: 1 !important;
            letter-spacing: 0 !important;
            text-align: center !important;
            white-space: nowrap !important;
            opacity: 0 !important;
            clip-path: inset(0 50% 0 50%) !important;
            transform: translateY(1px) scale(0.98) !important;
            transition: opacity 0.38s ease, clip-path 0.60s cubic-bezier(.22, 1, .36, 1), transform 0.60s cubic-bezier(.22, 1, .36, 1) !important;
        }


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

    .animated-stat-list {
        position: absolute !important;
        top: 56px !important;
        left: 24px !important;
        right: 14px !important;
        z-index: 4 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }


        .animated-stat-list li {
            position: relative !important;
            width: 100% !important;
            margin: 0 0 7px !important;
            padding: 0 0 0 18px !important;
            box-sizing: border-box !important;
            color: var(--stat-text) !important;
            font-size: 10.8px !important;
            font-weight: 850 !important;
            line-height: 1.22 !important;
            white-space: nowrap !important;
            opacity: 0 !important;
            clip-path: inset(0 100% 0 0%) !important;
            transform: translateY(2px) scale(0.985) !important;
            transition: opacity 0.34s ease, clip-path 0.62s cubic-bezier(.22, 1, .36, 1), transform 0.62s cubic-bezier(.22, 1, .36, 1) !important;
            backface-visibility: hidden !important;
            -webkit-backface-visibility: hidden !important;
        }


            /* Bullet */
            .animated-stat-list li::before {
                content: "" !important;
                position: absolute !important;
                left: 0 !important;
                top: 50% !important;
                width: 7px !important;
                height: 7px !important;
                border-radius: 50% !important;
                background: linear-gradient( 135deg, #f0cc3e, var(--stat-bullet) ) !important;
                box-shadow: 0 0 0 2px rgba(222, 177, 11, 0.11) !important;
                opacity: 0 !important;
                transform: translateY(-50%) scale(0.55) !important;
                transition: opacity 0.28s ease, transform 0.50s cubic-bezier(.22, 1, .36, 1) !important;
            }


    /* =========================================================
   HOVER CARD SCALE
========================================================= */

    .animated-stat-card:hover {
        z-index: 40 !important;
        transform: translate3d(0, 0, 0) scale(1.14) translateX(0) !important;
        border-color: rgba(139, 109, 76, 0.42) !important;
        box-shadow: 0 24px 44px rgba(60, 42, 25, 0.18), 0 0 0 4px rgba(192, 151, 74, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }


    /* =========================================================
   MOVE NEIGHBOR CARDS TO AVOID OVERLAP
========================================================= */

    /* اگر کارت اول هاور شد */
    .animated-stat-grid:has(.animated-stat-card:nth-child(1):hover)
    .animated-stat-card:nth-child(2) {
        transform: translateX(18px) scale(0.985) !important;
    }

    .animated-stat-grid:has(.animated-stat-card:nth-child(1):hover)
    .animated-stat-card:nth-child(3) {
        transform: translateX(10px) scale(0.985) !important;
    }


    /* اگر کارت دوم هاور شد */
    .animated-stat-grid:has(.animated-stat-card:nth-child(2):hover)
    .animated-stat-card:nth-child(1) {
        transform: translateX(-16px) scale(0.985) !important;
    }

    .animated-stat-grid:has(.animated-stat-card:nth-child(2):hover)
    .animated-stat-card:nth-child(3) {
        transform: translateX(16px) scale(0.985) !important;
    }


    /* اگر کارت سوم هاور شد */
    .animated-stat-grid:has(.animated-stat-card:nth-child(3):hover)
    .animated-stat-card:nth-child(2) {
        transform: translateX(-18px) scale(0.985) !important;
    }

    .animated-stat-grid:has(.animated-stat-card:nth-child(3):hover)
    .animated-stat-card:nth-child(1) {
        transform: translateX(-10px) scale(0.985) !important;
    }


    /* =========================================================
   NORMAL LAYER HIDES
========================================================= */

    .animated-stat-card:hover .animated-stat-front {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(0.96) !important;
        transition: opacity 0.24s ease, visibility 0s linear 0.24s, transform 0.48s cubic-bezier(.22, 1, .36, 1) !important;
    }


    /* =========================================================
   REVEAL SHOWS
========================================================= */

    .animated-stat-card:hover .animated-stat-reveal {
        opacity: 1 !important;
        visibility: visible !important;
        /*
       ثابت باقی می‌ماند تا SVG فریم نلرزد.
    */
        transform: translate3d(0, 0, 0) !important;
        transition: opacity 0.30s ease, visibility 0s linear 0s !important;
    }


    /* =========================================================
   SEQUENCE
========================================================= */

    /* 1) فریم قهوه‌ای */
    .animated-stat-card:hover .animated-stat-frame {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) rotate(0deg) scale3d(1, 1, 1) !important;
    }


    /* 2) نوار طلایی فقط Fade شود */
    .animated-stat-card:hover .animated-stat-header {
        opacity: 1 !important;
        transform: scaleX(1.05) scaleY(1.15) translateX(0) !important;
    }


        /* 3) عنوان وسط‌محور ظاهر شود */
        .animated-stat-card:hover .animated-stat-header span {
            opacity: 1 !important;
            clip-path: inset(0 0 0 0) !important;
            transform: translateY(0) scale(1) !important;
            transition-delay: 0.28s !important;
        }


    /* 4) آیتم اول */
    .animated-stat-card:hover .animated-stat-list li:nth-child(1) {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        transform: translateY(0) scale(1) !important;
        transition-delay: 0.52s !important;
    }

        .animated-stat-card:hover
        .animated-stat-list li:nth-child(1)::before {
            opacity: 1 !important;
            transform: translateY(-50%) scale(1) !important;
            transition-delay: 0.52s !important;
        }


    /* 5) آیتم دوم */
    .animated-stat-card:hover .animated-stat-list li:nth-child(2) {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        transform: translateY(0) scale(1) !important;
        transition-delay: 0.66s !important;
    }

        .animated-stat-card:hover
        .animated-stat-list li:nth-child(2)::before {
            opacity: 1 !important;
            transform: translateY(-50%) scale(1) !important;
            transition-delay: 0.66s !important;
        }


    /* 6) آیتم سوم */
    .animated-stat-card:hover .animated-stat-list li:nth-child(3) {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        transform: translateY(0) scale(1) !important;
        transition-delay: 0.80s !important;
    }

        .animated-stat-card:hover
        .animated-stat-list li:nth-child(3)::before {
            opacity: 1 !important;
            transform: translateY(-50%) scale(1) !important;
            transition-delay: 0.80s !important;
        }


    /* SVG فریم در حالت Dark */
    /* =========================================================
   RESPONSIVE
========================================================= */

    @media (max-width: 1100px) {
        .animated-stat-grid {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }

        .animated-stat-card {
            width: 100% !important;
            max-width: 360px !important;
            min-height: 132px !important;
        }

            .animated-stat-card:hover {
                transform: scale(1.05) !important;
            }
    }


    /* اگر :has پشتیبانی نشد */
    @supports not selector(:has(*)) {
        .animated-stat-grid {
            gap: 26px !important;
        }
    }


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

    @media (prefers-reduced-motion: reduce) {
        .animated-stat-card,
        .animated-stat-front,
        .animated-stat-reveal,
        .animated-stat-frame,
        .animated-stat-header,
        .animated-stat-header span,
        .animated-stat-list li,
        .animated-stat-list li::before {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
            animation-delay: 0s !important;
        }
    }


    /* =========================================================
   PREMIUM CAPABILITIES SECTION
========================================================= */

    .capabilities-premium-section {
        position: relative !important;
        margin-top: 34px !important;
    }

    .capabilities-premium-shell {
        position: relative !important;
        overflow: hidden !important;
        padding: 38px 34px 34px !important;
        border: 1px solid rgba(210, 178, 112, 0.32) !important;
        border-radius: 34px !important;
        background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
        box-shadow: 0 18px 40px rgba(86, 63, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        isolation: isolate !important;
    }

    .capabilities-premium-bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: radial-gradient(circle at 12% 14%, rgba(228, 200, 126, 0.16), transparent 26%), radial-gradient(circle at 86% 20%, rgba(214, 176, 83, 0.12), transparent 28%), radial-gradient(circle at 50% 100%, rgba(198, 154, 66, 0.08), transparent 38%) !important;
    }


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

    .capabilities-premium-header {
        position: relative !important;
        z-index: 2 !important;
        max-width: 980px !important;
        margin-bottom: 28px !important;
    }

    .capabilities-premium-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        padding: 10px 16px !important;
        border: 1px solid rgba(206, 167, 92, 0.22) !important;
        border-radius: 999px !important;
        background: linear-gradient( 135deg, rgba(255, 247, 225, 0.96), rgba(243, 229, 191, 0.92) ) !important;
        color: #9c6b1f !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 1.8px !important;
        text-transform: uppercase !important;
        box-shadow: 0 6px 18px rgba(194, 151, 68, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    }

    .capabilities-premium-title {
        margin: 0 0 18px !important;
        font-size: clamp(38px, 4vw, 62px) !important;
        font-weight: 950 !important;
        line-height: 1.04 !important;
        letter-spacing: -1.8px !important;
        max-width: 980px !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient(44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
        background-position: 0% 50%;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
    }

    .capabilities-premium-intro {
        max-width: 860px !important;
        margin: 0 !important;
        color: #5d6f89 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.8 !important;
    }


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

    .capabilities-premium-grid {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }


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

    .capability-premium-card {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        min-height: 268px !important;
        padding: 22px 22px 20px !important;
        border: 1px solid rgba(125, 108, 79, 0.55) !important;
        border-radius: 28px !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(247, 242, 234, 0.96) ) !important;
        box-shadow: 0 12px 24px rgba(89, 65, 37, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        transform: translateY(0) scale(1) !important;
        transform-origin: center center !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease, border-color 0.42s ease, background 0.48s ease !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    .capability-premium-card__glow {
        position: absolute !important;
        top: -22px !important;
        right: -24px !important;
        width: 140px !important;
        height: 140px !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        z-index: 0 !important;
        background: radial-gradient(circle, rgba(225, 191, 111, 0.22), transparent 68%) !important;
        opacity: 0.6 !important;
        transition: transform 0.65s cubic-bezier(.22, 1, .36, 1), opacity 0.5s ease !important;
    }

    .capability-premium-card__top {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 22px !important;
    }

    .capability-premium-card__number {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 50px !important;
        height: 50px !important;
        padding: 0 14px !important;
        border-radius: 18px !important;
        background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% ) !important;
        color: #0b2344 !important;
        font-size: 22px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease !important;
    }

    .capability-premium-card__line {
        flex: 1 1 auto !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: linear-gradient( 90deg, rgba(119, 91, 41, 0.69), rgba(199, 153, 69, 0.10) ) !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), opacity 0.42s ease !important;
    }

    .capability-premium-card__title {
        position: relative !important;
        z-index: 2 !important;
        margin: 0 0 12px !important;
        color: #0d2344 !important;
        font-size: 19px !important;
        font-weight: 900 !important;
        line-height: 1.28 !important;
        letter-spacing: -0.4px !important;
        transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), color 0.42s ease !important;
    }

    .capability-premium-card__desc {
        position: relative !important;
        z-index: 2 !important;
        margin: 0 !important;
        color: #61728d !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.72 !important;
        transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), color 0.42s ease !important;
    }

    .capability-premium-card__tags {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 20px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(129, 108, 71, 0.76) !important;
        transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), border-color 0.42s ease !important;
    }

        .capability-premium-card__tags span {
            display: inline-flex !important;
            align-items: center !important;
            padding: 10px 14px !important;
            border: 1px solid rgba(205, 168, 99, .25) !important;
            border-radius: 999px !important;
            background: linear-gradient(135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88)) !important;
            color: #876020 !important;
            font-size: 11px !important;
            font-weight: 850 !important;
            line-height: 1 !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
        }


    /* =========================================================
   HOVER
========================================================= */

    .capability-premium-card:hover {
        transform: translateY(-8px) scale(1.015) !important;
        border-color: rgba(209, 170, 96, 0.52) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(250, 244, 233, 0.98) ) !important;
        box-shadow: 0 24px 42px rgba(94, 68, 37, 0.14), 0 0 0 1px rgba(211, 171, 96, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    }

        .capability-premium-card:hover .capability-premium-card__glow {
            transform: scale(1.18) translate(4px, -4px) !important;
            opacity: 0.95 !important;
        }

        .capability-premium-card:hover .capability-premium-card__number {
            transform: translateY(-2px) scale(1.05) !important;
            box-shadow: 0 16px 26px rgba(184, 134, 45, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
        }

        .capability-premium-card:hover .capability-premium-card__line {
            transform: scaleX(1.04) !important;
            opacity: 1 !important;
        }

        .capability-premium-card:hover .capability-premium-card__title {
            transform: translateY(-2px) !important;
        }

        .capability-premium-card:hover .capability-premium-card__desc {
            transform: translateY(-1px) !important;
            color: #556884 !important;
        }

        .capability-premium-card:hover .capability-premium-card__tags {
            transform: translateY(-1px) !important;
            border-color: rgba(206, 176, 121, 0.28) !important;
        }

        .capability-premium-card:hover span {
            transform: translateY(-1px) !important;
            background: linear-gradient( 135deg, rgba(255, 250, 238, 0.98), rgba(245, 230, 193, 0.92) ) !important;
            border-color: rgba(210, 178, 111, 0.34) !important;
        }


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

    @media (max-width: 1100px) {
        .capabilities-premium-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 768px) {
        .capabilities-premium-shell {
            padding: 26px 20px 22px !important;
            border-radius: 26px !important;
        }

        .capabilities-premium-title {
            font-size: 34px !important;
            line-height: 1.08 !important;
            letter-spacing: -1px !important;
        }

        .capabilities-premium-intro {
            font-size: 15px !important;
            line-height: 1.75 !important;
        }

        .capabilities-premium-grid {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }

        .capability-premium-card {
            min-height: 240px !important;
            padding: 20px 18px 18px !important;
            border-radius: 24px !important;
        }

        .capability-premium-card__title {
            font-size: 18px !important;
        }

        .capability-premium-card__desc {
            font-size: 14px !important;
        }
    }


    /* =========================================================
   PREMIUM PROJECT HIGHLIGHTS SECTION
========================================================= */

    .projects-premium-section {
        position: relative !important;
        margin-top: 34px !important;
    }

    .projects-premium-shell {
        position: relative !important;
        overflow: hidden !important;
        padding: 38px 34px 34px !important;
        border: 1px solid rgba(210, 178, 112, 0.32) !important;
        border-radius: 34px !important;
        background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
        box-shadow: 0 18px 40px rgba(86, 63, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        isolation: isolate !important;
    }

    .projects-premium-bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: radial-gradient(circle at 10% 14%, rgba(228, 200, 126, 0.16), transparent 26%), radial-gradient(circle at 88% 18%, rgba(214, 176, 83, 0.10), transparent 28%), radial-gradient(circle at 50% 100%, rgba(198, 154, 66, 0.08), transparent 38%) !important;
    }


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

    .projects-premium-header {
        position: relative !important;
        z-index: 2 !important;
        max-width: 980px !important;
        margin-bottom: 26px !important;
    }

    .projects-premium-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        padding: 10px 16px !important;
        border: 1px solid rgba(206, 167, 92, 0.22) !important;
        border-radius: 999px !important;
        background: linear-gradient( 135deg, rgba(255, 247, 225, 0.96), rgba(243, 229, 191, 0.92) ) !important;
        color: #9c6b1f !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 1.8px !important;
        text-transform: uppercase !important;
        box-shadow: 0 6px 18px rgba(194, 151, 68, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    }

    .projects-premium-title {
        margin: 0 0 18px !important;
        color: #0c2242 !important;
        font-size: clamp(38px, 4vw, 62px) !important;
        font-weight: 950 !important;
        line-height: 1.04 !important;
        letter-spacing: -1.8px !important;
        max-width: 980px !important;
    }

    .projects-premium-intro {
        max-width: 860px !important;
        margin: 0 !important;
        color: #5d6f89 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.8 !important;
    }


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

    .projects-premium-list {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        gap: 16px !important;
    }


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

    .project-premium-item {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) 72px !important;
        align-items: center !important;
        gap: 18px !important;
        min-height: 126px !important;
        padding: 20px 22px !important;
        border: 1px solid rgba(125, 108, 79, 0.55) !important;
        border-radius: 28px !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(247, 242, 234, 0.96) ) !important;
        box-shadow: 0 12px 24px rgba(89, 65, 37, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        transform: translateY(0) scale(1) !important;
        transform-origin: center center !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease, border-color 0.42s ease, background 0.48s ease !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    .project-premium-item__glow {
        position: absolute !important;
        top: -26px !important;
        right: -24px !important;
        width: 160px !important;
        height: 160px !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        z-index: 0 !important;
        background: radial-gradient(circle, rgba(225, 191, 111, 0.18), transparent 68%) !important;
        opacity: 0.55 !important;
        transition: transform 0.65s cubic-bezier(.22, 1, .36, 1), opacity 0.5s ease !important;
    }

    .project-premium-item__left,
    .project-premium-item__content,
    .project-premium-item__right {
        position: relative !important;
        z-index: 2 !important;
    }

    .project-premium-item__left {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .project-premium-item__number {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 18px !important;
        background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% ) !important;
        color: #0b2344 !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease !important;
    }

    .project-premium-item__meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

        .project-premium-item__meta span {
            display: inline-flex !important;
            align-items: center !important;
            padding: 10px 14px !important;
            border: 1px solid rgba(205, 168, 99, .25) !important;
            border-radius: 999px !important;
            background: linear-gradient(135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88)) !important;
            color: #876020 !important;
            font-size: 11px !important;
            font-weight: 850 !important;
            line-height: 1 !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
        }

    .project-premium-item__title {
        margin: 0 0 10px !important;
        color: #0d2344 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.28 !important;
        letter-spacing: -0.3px !important;
        transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), color 0.42s ease !important;
    }

    .project-premium-item__desc {
        margin: 0 !important;
        color: #61728d !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.72 !important;
        transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), color 0.42s ease !important;
    }

    .project-premium-item__right {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .project-premium-item__arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(210, 178, 111, 0.22) !important;
        border-radius: 16px !important;
        background: linear-gradient( 135deg, rgba(255, 249, 236, 0.92), rgba(246, 233, 200, 0.88) ) !important;
        color: #9a6b1f !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        transition: transform 0.48s cubic-bezier(.22, 1, .36, 1), box-shadow 0.42s ease, border-color 0.42s ease, background 0.42s ease !important;
    }


    /* =========================================================
   HOVER
========================================================= */

    .project-premium-item:hover {
        transform: translateY(-6px) scale(1.01) !important;
        border-color: rgba(209, 170, 96, 0.52) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(250, 244, 233, 0.98) ) !important;
        box-shadow: 0 24px 42px rgba(94, 68, 37, 0.13), 0 0 0 1px rgba(211, 171, 96, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    }

        .project-premium-item:hover .project-premium-item__glow {
            transform: scale(1.16) translate(4px, -4px) !important;
            opacity: 0.92 !important;
        }

        .project-premium-item:hover .project-premium-item__number {
            transform: translateY(-2px) scale(1.04) !important;
            box-shadow: 0 16px 26px rgba(184, 134, 45, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
        }

        .project-premium-item:hover .project-premium-item__title {
            transform: translateY(-1px) !important;
        }

        .project-premium-item:hover .project-premium-item__desc {
            transform: translateY(-1px) !important;
            color: #728199 !important;
        }

        .project-premium-item:hover .project-premium-item__meta span {
            transform: translateY(-1px) !important;
            border-color: rgba(210, 178, 111, 0.34) !important;
        }

        .project-premium-item:hover .project-premium-item__arrow {
            transform: translateX(3px) translateY(-1px) scale(1.04) !important;
            border-color: rgba(210, 178, 111, 0.34) !important;
            background: linear-gradient( 135deg, rgba(255, 250, 238, 0.98), rgba(245, 230, 193, 0.92) ) !important;
            box-shadow: 0 14px 22px rgba(184, 134, 45, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        }


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

    @media (max-width: 1100px) {
        .project-premium-item {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
            padding: 20px 18px !important;
        }

        .project-premium-item__left,
        .project-premium-item__right {
            justify-content: flex-start !important;
        }

        .project-premium-item__content {
            order: 2 !important;
        }

        .project-premium-item__right {
            order: 3 !important;
        }
    }

    @media (max-width: 768px) {
        .projects-premium-shell {
            padding: 26px 20px 22px !important;
            border-radius: 26px !important;
        }

        .projects-premium-title {
            font-size: 34px !important;
            line-height: 1.08 !important;
            letter-spacing: -1px !important;
        }

        .projects-premium-intro {
            font-size: 15px !important;
            line-height: 1.75 !important;
        }

        .project-premium-item {
            min-height: auto !important;
            border-radius: 24px !important;
        }

        .project-premium-item__title {
            font-size: 17px !important;
        }

        .project-premium-item__desc {
            font-size: 14px !important;
        }
    }



    /* =========================================================
   ANIMATED GOLD SECTION TITLES
========================================================= */

    .capabilities-premium-title,
    .projects-premium-title {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
        background-size: 240% 100% !important;
        background-position: 0% 50%;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
        will-change: background-position;
    }



    /* =========================================================
   PREMIUM TOOLS SECTION
========================================================= */

    .tools-premium-section {
        position: relative !important;
        margin-top: 34px !important;
    }

    .tools-premium-shell {
        position: relative !important;
        overflow: hidden !important;
        padding: 38px 34px 34px !important;
        border: 1px solid rgba(210, 178, 112, 0.32) !important;
        border-radius: 34px !important;
        background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
        box-shadow: 0 18px 40px rgba(86, 63, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        isolation: isolate !important;
    }

    .tools-premium-bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: radial-gradient(circle at 12% 14%, rgba(228, 200, 126, 0.16), transparent 26%), radial-gradient(circle at 86% 18%, rgba(214, 176, 83, 0.12), transparent 28%), radial-gradient(circle at 50% 100%, rgba(198, 154, 66, 0.08), transparent 38%) !important;
    }


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

    .tools-premium-header {
        position: relative !important;
        z-index: 2 !important;
        max-width: 980px !important;
        margin-bottom: 28px !important;
    }

    .tools-premium-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        padding: 10px 16px !important;
        border: 1px solid rgba(206, 167, 92, 0.22) !important;
        border-radius: 999px !important;
        background: linear-gradient( 135deg, rgba(255, 247, 225, 0.96), rgba(243, 229, 191, 0.92) ) !important;
        color: #9c6b1f !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 1.8px !important;
        text-transform: uppercase !important;
        box-shadow: 0 6px 18px rgba(194, 151, 68, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    }

    .tools-premium-title {
        margin: 0 0 18px !important;
        font-size: clamp(38px, 4vw, 62px) !important;
        font-weight: 950 !important;
        line-height: 1.04 !important;
        letter-spacing: -1.8px !important;
        max-width: 980px !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient(44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
        background-size: 240% 100% !important;
        background-position: 0% 50%;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
        will-change: background-position;
    }

    .tools-premium-intro {
        max-width: 860px !important;
        margin: 0 !important;
        color: #5d6f89 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.8 !important;
    }


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

    .tools-premium-grid {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }


    /* =========================================================
   TOOL CATEGORY CARD
========================================================= */

    .tool-category-card {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        min-height: 160px !important;
        padding: 22px 22px 20px !important;
        border: 1px solid rgba(125, 108, 79, 0.55) !important;
        border-radius: 28px !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(247, 242, 234, 0.96) ) !important;
        box-shadow: 0 12px 24px rgba(89, 65, 37, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        transform: translateY(0) scale(1) !important;
        transform-origin: center center !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease, border-color 0.42s ease, background 0.48s ease !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    .tool-category-card__glow {
        position: absolute !important;
        top: -24px !important;
        right: -24px !important;
        width: 150px !important;
        height: 150px !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        z-index: 0 !important;
        background: radial-gradient(circle, rgba(225, 191, 111, 0.20), transparent 68%) !important;
        opacity: 0.55 !important;
        transition: transform 0.65s cubic-bezier(.22, 1, .36, 1), opacity 0.5s ease !important;
    }

    .tool-category-card__top,
    .tool-category-card__tools {
        position: relative !important;
        z-index: 2 !important;
    }

    .tool-category-card__top {
        display: flex !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 22px !important;
    }

    .tool-category-card__badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: 52px !important;
        padding: 0 14px !important;
        border: 4px solid transparent !important;
        border-radius: 15px !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.88), rgba(247, 242, 234, 0.96) ) padding-box, linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% ) border-box !important;
        color: #0b2344 !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
        transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease !important;
    }

    .tool-category-card__meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding-top: 2px !important;
    }

        .tool-category-card__meta span {
            color: #bba17a !important;
            font-size: 12px !important;
            font-weight: 800 !important;
            letter-spacing: 1px !important;
            text-transform: uppercase !important;
        }

        .tool-category-card__meta strong {
            color: #0d2344 !important;
            font-size: 18px !important;
            font-weight: 900 !important;
            line-height: 1.28 !important;
            letter-spacing: -0.3px !important;
            transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), color 0.42s ease !important;
        }

    .tool-category-card__tools {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-content: flex-start !important;
    }

        .tool-category-card__tools span {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 4px 8px !important;
            border: 1px solid rgba(210, 178, 111, 0.76) !important;
            border-radius: 999px !important;
            background: linear-gradient( 135deg, rgba(255, 249, 236, 0.94), rgba(247, 235, 206, 0.88) ) !important;
            color: #8f6320 !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            line-height: 1.1 !important;
            letter-spacing: 0.2px !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
            transition: transform 0.42s cubic-bezier(.22, 1, .36, 1), background 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease !important;
        }


    /* =========================================================
   HOVER
========================================================= */

    .tool-category-card:hover {
        transform: translateY(-8px) scale(1.015) !important;
        border-color: rgba(209, 170, 96, 0.52) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(250, 244, 233, 0.98) ) !important;
        box-shadow: 0 24px 42px rgba(94, 68, 37, 0.14), 0 0 0 1px rgba(211, 171, 96, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    }

        .tool-category-card:hover .tool-category-card__glow {
            transform: scale(1.18) translate(4px, -4px) !important;
            opacity: 0.95 !important;
        }

        .tool-category-card:hover .tool-category-card__badge {
            transform: translateY(-2px) scale(1.05) !important;
            box-shadow: 0 16px 26px rgba(184, 134, 45, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
        }

        .tool-category-card:hover .tool-category-card__meta strong {
            transform: translateY(-1px) !important;
        }

    .tool-category-card__tools span {
        transform: translateY(-2px) !important;
        background: linear-gradient( 135deg, rgba(255, 250, 238, 0.98), rgba(245, 230, 193, 0.92) ) !important;
        border-color: rgba(210, 178, 111, 0.34) !important;
        box-shadow: 0 8px 18px rgba(184, 134, 45, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    }


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

    @media (max-width: 1100px) {
        .tools-premium-grid {
            grid-template-columns: 1fr !important;
        }
    }

    @media (max-width: 768px) {
        .tools-premium-shell {
            padding: 26px 20px 22px !important;
            border-radius: 26px !important;
        }

        .tools-premium-title {
            font-size: 34px !important;
            line-height: 1.08 !important;
            letter-spacing: -1px !important;
        }

        .tools-premium-intro {
            font-size: 15px !important;
            line-height: 1.75 !important;
        }

        .tool-category-card {
            min-height: 210px !important;
            padding: 20px 18px 18px !important;
            border-radius: 24px !important;
        }

        .tool-category-card__top {
            gap: 12px !important;
            margin-bottom: 18px !important;
        }

        .tool-category-card__meta strong {
            font-size: 17px !important;
        }

        .tool-category-card__tools span {
            font-size: 12px !important;
            padding: 9px 12px !important;
        }
    }






    /* =========================================================
   WHAT I DO PAGE
========================================================= */

    .whatido-page {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding-bottom: 30px !important;
    }


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

    .whatido-hero {
        margin-bottom: 34px;
        gap: 26px !important;
        top: 6px;
        border: 1px solid rgba(210, 178, 112, .34) !important;
        border-radius: 36px !important;
        background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.78), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
        box-shadow: 0 24px 70px rgba(75, 53, 28, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    }

    .whatido-hero__background {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .whatido-hero__content,
    .whatido-hero__visual {
        position: relative !important;
        z-index: 2 !important;
    }

    .whatido-eyebrow {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 22px;
        padding: 10px 15px;
        border: 1px solid rgba(200, 154, 66, 0.25) !important;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(247, 235, 210, 0.72)) !important;
        color: #895f23 !important;
        box-shadow: 0 9px 22px rgba(84, 58, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

    .whatido-eyebrow__dot {
        width: 9px !important;
        height: 9px !important;
        border-radius: 50% !important;
        background: linear-gradient( 135deg, #f2d586, #b9822d ) !important;
        box-shadow: 0 0 0 5px rgba(202, 157, 75, .10) !important;
    }

    .whatido-hero__title {
        font-size: clamp(48px, 5.4vw, 68px) !important;
        font-weight: 950 !important;
        line-height: 1.01 !important;
        letter-spacing: -2.8px !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
        background-size: 240% 100% !important;
        background-position: 0% 50%;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
        will-change: background-position;
    }

        .whatido-hero__title span {
            display: block !important;
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
        }

    .whatido-hero__lead {
        color: #596b83 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.85 !important;
    }

    .whatido-hero__pill-row {
        margin-top: 28px !important;
    }

        .whatido-hero__pill-row span {
            display: inline-flex !important;
            align-items: center !important;
            padding: 10px 14px !important;
            border: 1px solid rgba(205, 168, 99, .25) !important;
            border-radius: 999px !important;
            background: linear-gradient( 135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88) ) !important;
            color: #876020 !important;
            font-size: 11px !important;
            font-weight: 850 !important;
            line-height: 1 !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
        }


    /* =========================================================
   HERO BUSINESS PANEL
========================================================= */

    /* =========================================================
   WHAT I DO — INTEGRATED CAPABILITY PANEL
   Styled like the Home "My Goal" panel
========================================================= */

    .whatido-capability-panel {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border: 1px solid rgba(117, 83, 40, 0.14) !important;
        border-radius: 31px !important;
        background: radial-gradient( circle at 87% 6%, rgba(245, 218, 148, 0.26), transparent 30% ), linear-gradient( 145deg, #c6ae78 0%, #b8a175 38%, #a68f6c 70%, #9d8564 100% ) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }


    /* =========================================================
   DECORATIVE BACKGROUND SHAPES
========================================================= */

    .whatido-capability-panel__shape {
        position: absolute !important;
        z-index: 0 !important;
        border-radius: 50% !important;
        pointer-events: none !important;
    }

    .whatido-capability-panel__shape--one {
        top: -115px !important;
        right: -85px !important;
        width: 285px !important;
        height: 285px !important;
        background: radial-gradient( circle, rgba(245, 221, 160, 0.22), rgba(245, 221, 160, 0.04) 64%, transparent 72% ) !important;
    }

    .whatido-capability-panel__shape--two {
        bottom: -135px !important;
        left: -105px !important;
        width: 310px !important;
        height: 310px !important;
        background: radial-gradient( circle, rgba(111, 81, 48, 0.11), transparent 70% ) !important;
    }


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

    .whatido-capability-panel__top {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
        margin-bottom: 25px !important;
    }


    /* Header badge */
    .whatido-capability-panel__badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 13px;
        border: 1px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.56) !important;
        color: #825b24 !important;
        font-size: 11px;
        font-weight: 950;
        letter-spacing: 1.45px;
        text-transform: uppercase;
        border-color: rgba(200, 154, 66, 0.22) !important;
    }

    .whatido-capability-panel__badge-dot {
        flex: 0 0 auto !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: linear-gradient( 135deg, #cf8f66, #af6e4e ) !important;
        box-shadow: 0 0 0 4px rgba(184, 115, 82, 0.12) !important;
    }


    /* Target icon */
    .whatido-capability-panel__icon {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(200, 154, 66, 0.24) !important;
        border-radius: 16px;
        color: #9b6e2c !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.70), rgba(241, 215, 149, 0.40)) !important;
        box-shadow: 0 12px 24px rgba(104, 72, 34, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

        .whatido-capability-panel__icon svg {
            width: 28px;
            height: 28px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

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

    .whatido-capability-panel__content {
        position: relative !important;
        z-index: 2 !important;
    }

        .whatido-capability-panel__content h2 {
            max-width: 430px !important;
            color: #36271d !important;
            font-size: clamp(31px, 3.1vw, 46px) !important;
            font-weight: 950 !important;
            line-height: 1.02 !important;
            letter-spacing: -1.35px !important;
        }

            .whatido-capability-panel__content h2 span {
                display: block !important;
            }

        .whatido-capability-panel__content p {
            max-width: 470px !important;
            margin: 0 !important;
            color: rgba(255, 253, 246, 0.94) !important;
            font-size: 13px !important;
            font-weight: 720 !important;
            line-height: 1.72 !important;
            text-shadow: 0 1px 1px rgba(63, 40, 20, 0.10) !important;
        }


    /* =========================================================
   CAPABILITY LIST
========================================================= */

    .whatido-capability-list {
        position: relative !important;
        z-index: 2 !important;
    }


    /* =========================================================
   CAPABILITY ITEM
========================================================= */

    .whatido-capability-item {
        position: relative !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
        min-height: 86px !important;
        padding: 12px 15px !important;
        border: 1px solid rgba(255, 255, 255, 0.99);
        border-radius: 18px;
        background: rgba(241, 225, 196, 0.99);
        box-shadow: 0 4px 6px rgba(16, 36, 60, 0.545), inset 0 1px 0 rgba(255, 255, 255, 0.80);
        transform: translate3d(0, 0, 0) !important;
        transition: transform 0.48s cubic-bezier(.22, 1, .36, 1), border-color 0.38s ease, box-shadow 0.42s ease, background 0.42s ease !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }


        /* soft light inside each row */
        .whatido-capability-item::after {
            content: "" !important;
            position: absolute !important;
            top: -45px !important;
            right: -30px !important;
            width: 125px !important;
            height: 125px !important;
            border-radius: 50% !important;
            pointer-events: none !important;
            transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), opacity 0.42s ease !important;
        }


    /* Number box */
    .whatido-capability-item__number {
        position: relative !important;
        z-index: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border: 3px solid #887451 !important;
        border-radius: 13px !important;
        color: #796743 !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        background: rgba(255, 249, 233, 0.40) !important;
        transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), background 0.38s ease !important;
    }


    /* Text content */
    .whatido-capability-item__text {
        position: relative !important;
        z-index: 2 !important;
        padding-top: 2px !important;
    }

        .whatido-capability-item__text strong {
            display: block !important;
            margin-bottom: 5px !important;
            color: #3c2b20 !important;
            font-size: 13px !important;
            font-weight: 950 !important;
            line-height: 1.2 !important;
        }

        .whatido-capability-item__text span {
            display: block !important;
            color: #776b5c !important;
            font-size: 10.7px !important;
            font-weight: 560 !important;
            line-height: 1.45 !important;
        }


    /* =========================================================
   HOVER EFFECTS
========================================================= */

    .whatido-capability-item:hover {
        transform: translate3d(5px, 0, 0) scale(1.008) !important;
        box-shadow: 0 15px 25px rgba(70, 45, 22, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
        transform: translateX(5px);
        border-color: rgba(33, 143, 152, 0.34);
        background: rgba(255, 255, 255, 0.72);
    }

        .whatido-capability-item:hover::after {
            transform: scale(1.16) !important;
            opacity: 0.90 !important;
        }

        .whatido-capability-item:hover
        .whatido-capability-item__number {
            transform: scale(1.04) !important;
        }


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

    @media (max-width: 1180px) {
        .whatido-capability-panel {
            max-width: 620px !important;
        }
    }

    @media (max-width: 760px) {
        .whatido-capability-panel {
            padding: 22px 18px 20px !important;
            border-radius: 26px !important;
        }

        .whatido-capability-panel__content h2 {
            font-size: 34px !important;
        }

        .whatido-capability-panel__content p {
            font-size: 12px !important;
        }

        .whatido-capability-item {
            min-height: 82px !important;
            padding: 12px 13px !important;
            border-radius: 17px !important;
        }
    }


    /* =========================================================
   METRICS
========================================================= */

    .whatido-metrics {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .whatido-metric {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        min-height: 112px !important;
        padding: 20px !important;
        border: 1px solid rgba(215, 191, 149, .50) !important;
        border-radius: 24px !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, .86), rgba(247, 240, 228, .95) ) !important;
        box-shadow: 0 12px 25px rgba(79, 56, 30, .06), inset 0 1px 0 rgba(255, 255, 255, .90) !important;
        transition: transform .48s cubic-bezier(.22, 1, .36, 1), box-shadow .42s ease, border-color .42s ease !important;
    }

        .whatido-metric:hover {
            transform: translateY(-5px) !important;
            border-color: rgba(205, 164, 88, .50) !important;
            box-shadow: 0 19px 34px rgba(82, 57, 30, .12) !important;
        }

        .whatido-metric > strong {
            flex: 0 0 auto !important;
            color: #c18c34 !important;
            font-size: 29px !important;
            font-weight: 950 !important;
            line-height: 1 !important;
        }

        .whatido-metric div {
            display: flex !important;
            flex-direction: column !important;
            gap: 5px !important;
        }

        .whatido-metric span {
            color: #112541 !important;
            font-size: 13px !important;
            font-weight: 900 !important;
        }

        .whatido-metric small {
            color: #718098 !important;
            font-size: 10px !important;
            font-weight: 650 !important;
            line-height: 1.4 !important;
        }


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

    .whatido-services-shell {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        padding: 42px 34px 36px !important;
        border: 1px solid rgba(210, 178, 112, .32) !important;
        border-radius: 36px !important;
        background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
        box-shadow: 0 18px 42px rgba(86, 63, 35, .08), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
    }

    .whatido-services-shell__background {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: radial-gradient( circle at 10% 6%, rgba(231, 202, 130, .18), transparent 26% ), radial-gradient( circle at 92% 24%, rgba(184, 115, 82, .07), transparent 30% ), radial-gradient( circle at 50% 100%, rgba(140, 137, 96, .08), transparent 38% ) !important;
    }

    .whatido-services-header,
    .whatido-services-grid {
        position: relative !important;
        z-index: 2 !important;
    }

    .whatido-services-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr) !important;
        gap: 42px !important;
        align-items: end !important;
        margin-bottom: 30px !important;
    }

    .whatido-section-eyebrow {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 22px;
        padding: 10px 15px;
        border: 1px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
        color: var(--dark-gold-light) !important;
        border-color: rgb(216 170 79 / 42%) !important;
        background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
        box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    }
}

.whatido-services-header h2 {
    width: 1100px !important;
    margin: 0 !important;
    font-size: clamp(34px, 4vw, 54px) !important;
    font-weight: 950 !important;
    line-height: 1.06 !important;
    letter-spacing: -1.6px !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
    background-size: 240% 100% !important;
    background-position: 0% 50%;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
    text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
    will-change: background-position;
}

.whatido-services-header > p {
    margin: 0 !important;
    color: #65758d !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
}


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

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


/* =========================================================
   SERVICE CARD
========================================================= */

.whatido-service-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 420px !important;
    padding: 24px !important;
    border: 1px solid rgba(217, 194, 156, .55) !important;
    border-radius: 29px !important;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .88), rgba(247, 241, 232, .96) ) !important;
    box-shadow: 0 13px 28px rgba(83, 58, 30, .06), inset 0 1px 0 rgba(255, 255, 255, .93) !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), border-color .44s ease, box-shadow .48s ease, background .48s ease !important;
    backface-visibility: hidden !important;
}

.whatido-service-card__accent {
    position: absolute !important;
    top: 0 !important;
    left: 38px !important;
    right: 38px !important;
    height: 3px !important;
    border-radius: 0 0 999px 999px !important;
    background: linear-gradient( 90deg, transparent, #efd586, #bd8430, #efd586, transparent ) !important;
    opacity: .72 !important;
    transition: left .55s cubic-bezier(.22, 1, .36, 1), right .55s cubic-bezier(.22, 1, .36, 1), opacity .42s ease !important;
}

.whatido-service-card__header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 19px !important;
}

.whatido-service-card__number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
    height: 50px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% ) !important;
    color: #0b2344 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease !important;
}

.whatido-service-card__heading {
    padding-top: 2px !important;
}

    .whatido-service-card__heading span {
        display: block !important;
        margin-bottom: 7px !important;
        color: #9b6a20 !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: 1.25px !important;
        text-transform: uppercase !important;
    }

    .whatido-service-card__heading h2 {
        margin: 0 !important;
        color: #102541 !important;
        font-size: 21px !important;
        font-weight: 920 !important;
        line-height: 1.26 !important;
        letter-spacing: -.4px !important;
    }

.whatido-service-card__summary {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
}

.whatido-service-card__divider {
    height: 1px !important;
    margin: 19px 0 !important;
    background: linear-gradient( 90deg, rgba(195, 151, 72, .38), rgba(195, 151, 72, .05) ) !important;
}

.whatido-service-card__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

    .whatido-service-card__list li {
        position: relative !important;
        padding-left: 17px !important;
        color: #3f4f64 !important;
        font-size: 12px !important;
        font-weight: 720 !important;
        line-height: 1.45 !important;
    }

        .whatido-service-card__list li::before {
            content: "" !important;
            position: absolute !important;
            top: 6px !important;
            left: 0 !important;
            width: 7px !important;
            height: 7px !important;
            border-radius: 50% !important;
            background: linear-gradient( 135deg, #f0cc3e, #cb9411 ) !important;
            box-shadow: 0 0 0 3px rgba(219, 169, 17, .10) !important;
        }


/* =========================================================
   FEATURED PROOF BLOCK
========================================================= */

.whatido-service-card__proof {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 15px !important;
    align-items: center !important;
    margin-top: 18px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(205, 163, 86, .28) !important;
    border-radius: 19px !important;
    background: linear-gradient( 135deg, rgba(255, 248, 228, .94), rgba(244, 229, 193, .82) ) !important;
}

    .whatido-service-card__proof strong {
        color: #b77c24 !important;
        font-size: 24px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .whatido-service-card__proof span {
        color: #6d5a3f !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        line-height: 1.5 !important;
    }


/* =========================================================
   SERVICE CARD HOVER
========================================================= */

.whatido-service-card:hover {
    transform: translate3d(0, -7px, 0) scale(1.01) !important;
    border-color: rgba(207, 166, 91, .56) !important;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .95), rgba(250, 244, 234, .98) ) !important;
    box-shadow: 0 25px 45px rgba(87, 60, 31, .14), 0 0 0 1px rgba(207, 166, 91, .08), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

    .whatido-service-card:hover .whatido-service-card__accent {
        left: 22px !important;
        right: 22px !important;
        opacity: 1 !important;
    }

    .whatido-service-card:hover .whatido-service-card__number {
        transform: translateY(-2px) scale(1.045) !important;
        box-shadow: 0 17px 28px rgba(178, 126, 39, .23), inset 0 1px 0 rgba(255, 255, 255, .48) !important;
    }


/* =========================================================
   CLOSING SECTION
========================================================= */

.whatido-closing {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 36px !important;
    align-items: center !important;
    padding: 40px 44px !important;
    border: 1px solid rgba(207, 170, 100, .34) !important;
    border-radius: 34px !important;
    background: radial-gradient( circle at 85% 20%, rgba(230, 201, 126, .23), transparent 30% ), linear-gradient( 135deg, rgba(251, 247, 238, .98), rgba(240, 233, 222, .97) ) !important;
    box-shadow: 0 18px 40px rgba(84, 59, 30, .08), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.whatido-closing__content > span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

.whatido-closing__content h2 {
    max-width: 820px !important;
    margin: 0 0 16px !important;
    font-size: clamp(31px, 3.6vw, 48px) !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: -1.4px !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
    background-size: 240% 100% !important;
    background-position: 0% 50%;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
    text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
    will-change: background-position;
}

.whatido-closing__content p {
    max-width: 800px !important;
    margin: 0 !important;
    color: #63738a !important;
    font-size: 15px !important;
    line-height: 1.78 !important;
}

.whatido-closing__mark {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 150px !important;
    height: 150px !important;
    border: 1px solid rgba(200, 157, 77, .30) !important;
    border-radius: 34px !important;
    background: linear-gradient( 145deg, rgba(255, 249, 232, .96), rgba(239, 219, 173, .88) ) !important;
}

    .whatido-closing__mark strong {
        color: #bc842c !important;
        font-size: 38px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .whatido-closing__mark span {
        margin-top: 9px !important;
        color: #7b6647 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        text-align: center !important;
    }


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

@media (max-width: 1180px) {
    .whatido-hero {
        grid-template-columns: 1fr !important;
    }

    .whatido-hero__visual {
        max-width: 620px !important;
    }

    .whatido-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 980px) {
    .whatido-services-grid {
        grid-template-columns: 1fr !important;
    }

    .whatido-services-header {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}


@media (max-width: 760px) {
    .whatido-page {
        gap: 20px !important;
    }

    .whatido-hero {
        min-height: auto !important;
        padding: 34px 22px !important;
        border-radius: 28px !important;
    }

    .whatido-hero__title {
        font-size: 44px !important;
        letter-spacing: -1.7px !important;
    }

    .whatido-hero__lead {
        font-size: 15px !important;
    }

    .whatido-business-panel {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    .whatido-business-grid {
        grid-template-columns: 1fr !important;
    }

    .whatido-business-card {
        min-height: 104px !important;
    }

    .whatido-metrics {
        grid-template-columns: 1fr !important;
    }

    .whatido-services-shell {
        padding: 30px 18px 22px !important;
        border-radius: 28px !important;
    }

    .whatido-services-header h2 {
        font-size: 35px !important;
    }

    .whatido-service-card {
        min-height: auto !important;
        padding: 21px 18px !important;
        border-radius: 24px !important;
    }

    .whatido-service-card__list {
        grid-template-columns: 1fr !important;
    }

    .whatido-closing {
        grid-template-columns: 1fr !important;
        padding: 30px 22px !important;
        border-radius: 28px !important;
    }

    .whatido-closing__mark {
        width: 130px !important;
        height: 130px !important;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .whatido-hero__title {
        animation: none !important;
    }

    .whatido-business-card,
    .whatido-metric,
    .whatido-service-card,
    .whatido-service-card__number {
        transition-duration: .01ms !important;
    }
}












/* =========================================================
   PORTFOLIO PAGE
========================================================= */

.portfolio-page {
    --portfolio-ink: #34281f;
    --portfolio-muted: #817465;
    --portfolio-gold: #c9a464;
    --portfolio-gold-light: #f1d58b;
    --portfolio-copper: #b67451;
    --portfolio-card: #fbf6ed;
    --portfolio-card-soft: #f4eadb;
    --portfolio-line: rgba(108, 78, 42, 0.14);
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 42px;
}


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

.portfolio-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    align-items: center;
    gap: 42px;
    top: 6px;
    min-height: 560px;
    padding: 54px 48px;
    border: 1px solid var(--portfolio-line);
    border-radius: 36px;
    background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
    box-shadow: 0 22px 52px rgba(79, 54, 29, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

    .portfolio-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0.42;
        pointer-events: none;
        background-image: linear-gradient(rgba(128, 96, 56, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 96, 56, 0.055) 1px, transparent 1px);
        background-size: 54px 54px;
    }

.portfolio-hero__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.portfolio-hero__glow--one {
    width: 420px;
    height: 420px;
    top: -250px;
    right: -130px;
    background: radial-gradient( circle, rgba(226, 184, 92, 0.22), transparent 70% );
}

.portfolio-hero__glow--two {
    width: 360px;
    height: 360px;
    bottom: -260px;
    left: -120px;
    background: radial-gradient( circle, rgba(174, 113, 77, 0.13), transparent 70% );
}

.portfolio-hero__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.portfolio-eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px solid rgba(200, 154, 66, 0.25) !important;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(247, 235, 210, 0.72)) !important;
    color: #895f23 !important;
    box-shadow: 0 9px 22px rgba(84, 58, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.portfolio-eyebrow__dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f2d586, #b9822d) !important;
    box-shadow: 0 0 0 5px rgba(202, 157, 75, .10) !important;
}

.portfolio-hero__title {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--portfolio-ink);
    font-size: clamp(43px, 5vw, 72px);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -3.3px;
}

    .portfolio-hero__title span {
        display: block;
        color: transparent;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% );
        background-size: 280% 100%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        background-clip: text;
        -webkit-background-clip: text;
        animation: portfolioPageGoldFlow 4.8s ease-in-out infinite alternate;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.06), 0 9px 24px rgba(171, 108, 48, 0.09);
    }

@keyframes portfolioPageGoldFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.portfolio-hero__description {
    max-width: 710px;
    margin: 0;
    color: var(--portfolio-muted);
    font-size: 14px;
    font-weight: 560;
    line-height: 1.82;
}

.portfolio-hero__tags {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    margin-top: 26px !important;
    overflow: visible !important;
}


    .portfolio-hero__tags span {
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(205, 168, 99, .25) !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88)) !important;
        color: #876020 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
    }


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

.portfolio-hero-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 22px;
    border: 1px solid rgba(117, 83, 40, 0.15);
    border-radius: 29px;
    background: radial-gradient( circle at 88% 7%, rgba(245, 218, 148, 0.28), transparent 31% ), linear-gradient( 145deg, #c6ae78 0%, #b7a074 39%, #a78e69 72%, #9d8362 100% );
    box-shadow: 0 24px 42px rgba(70, 47, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

    .portfolio-hero-panel::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        right: -120px;
        bottom: -140px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(255, 235, 184, 0.18), transparent 70% );
    }

.portfolio-hero-panel__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .portfolio-hero-panel__top > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .portfolio-hero-panel__top span {
        color: rgba(255, 250, 239, 0.87);
        font-size: 8.5px;
        font-weight: 850;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .portfolio-hero-panel__top strong {
        color: #36271d;
        font-size: 17px;
        font-weight: 950;
    }

.portfolio-hero-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(250, 240, 210, 0.94), rgba(221, 199, 150, 0.90) );
    box-shadow: 0 10px 22px rgba(78, 52, 25, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

    .portfolio-hero-panel__icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: #a97025;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.portfolio-hero-panel__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .portfolio-hero-panel__grid article {
        position: relative;
        overflow: hidden;
        min-height: 138px;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.76);
        border-radius: 18px;
        background: linear-gradient( 145deg, #f8ead0, #efdcba );
        box-shadow: 0 10px 20px rgba(71, 47, 23, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.90);
        transition: transform 0.42s cubic-bezier(.22, 1, .36, 1), box-shadow 0.42s ease;
    }

        .portfolio-hero-panel__grid article:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(69, 44, 21, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }

        .portfolio-hero-panel__grid article > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 31px;
            height: 31px;
            margin-bottom: 13px;
            border: 2px solid #8b7753;
            border-radius: 10px;
            color: #786440;
            font-size: 8px;
            font-weight: 950;
        }

        .portfolio-hero-panel__grid article strong {
            display: block;
            margin-bottom: 6px;
            color: #39291f;
            font-size: 12px;
            font-weight: 950;
        }

        .portfolio-hero-panel__grid article p {
            margin: 0;
            color: #786b5b;
            font-size: 9.2px;
            font-weight: 550;
            line-height: 1.45;
        }

.portfolio-hero-panel__footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 15px;
    background: rgba(68, 47, 28, 0.12);
}

.portfolio-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f1d689;
    box-shadow: 0 0 0 5px rgba(244, 216, 139, 0.12);
}

.portfolio-hero-panel__footer div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.portfolio-hero-panel__footer strong {
    color: #fff9eb;
    font-size: 10px;
    font-weight: 900;
}

.portfolio-hero-panel__footer span {
    color: rgba(255, 249, 236, 0.72);
    font-size: 8.5px;
}


/* =========================================================
   METRICS
========================================================= */

/* =========================================================
   PORTFOLIO METRICS
   EXACT WHAT I DO COMPACT STYLE
========================================================= */

.portfolio-metrics.portfolio-metrics--compact {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}


/* =========================================================
   METRIC CARD
========================================================= */

.portfolio-metric.portfolio-metric--compact {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 17px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(190, 147, 78, 0.28) !important;
    border-radius: 24px !important;
    background: radial-gradient( circle at 92% 5%, rgba(232, 199, 132, 0.13), transparent 31% ), linear-gradient( 145deg, rgba(255, 252, 245, 0.98) 0%, rgba(247, 241, 230, 0.96) 100% ) !important;
    box-shadow: 0 12px 27px rgba(79, 54, 29, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform 0.42s cubic-bezier(.22, 1, .36, 1), border-color 0.36s ease, box-shadow 0.42s ease !important;
}


    /* subtle background shine */
    .portfolio-metric.portfolio-metric--compact::before {
        content: "" !important;
        position: absolute !important;
        top: -60px !important;
        right: -45px !important;
        z-index: 0 !important;
        width: 145px !important;
        height: 145px !important;
        border-radius: 50% !important;
        background: radial-gradient( circle, rgba(232, 195, 117, 0.13), transparent 69% ) !important;
        pointer-events: none !important;
    }


    /* =========================================================
   NUMBER
========================================================= */

    .portfolio-metric.portfolio-metric--compact
    .portfolio-metric__value {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 50px !important;
        color: #c18a29 !important;
        font-size: 29px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
    }


    /* =========================================================
   TEXT CONTENT
========================================================= */

    .portfolio-metric.portfolio-metric--compact
    .portfolio-metric__content {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        min-width: 0 !important;
    }


        .portfolio-metric.portfolio-metric--compact
        .portfolio-metric__content strong {
            display: block !important;
            margin: 0 !important;
            color: #13294a !important;
            font-size: 16px !important;
            font-weight: 950 !important;
            line-height: 1.18 !important;
            letter-spacing: -0.18px !important;
        }


        .portfolio-metric.portfolio-metric--compact
        .portfolio-metric__content p {
            display: block !important;
            margin: 0 !important;
            color: #6e7f9d !important;
            font-size: 12px !important;
            font-weight: 680 !important;
            line-height: 1.38 !important;
        }


    /* =========================================================
   HOVER
========================================================= */

    .portfolio-metric.portfolio-metric--compact:hover {
        transform: translate3d(0, -3px, 0) scale(1.006) !important;
        border-color: rgba(190, 142, 65, 0.42) !important;
        box-shadow: 0 18px 35px rgba(78, 52, 25, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    }


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

@media (max-width: 1250px) {
    .portfolio-metrics.portfolio-metrics--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 760px) {
    .portfolio-metrics.portfolio-metrics--compact {
        grid-template-columns: 1fr !important;
        position: relative !important;
        top: auto !important;
        margin-top: -20px !important;
    }

    .portfolio-metric.portfolio-metric--compact {
        min-height: 104px !important;
        padding: 16px 18px !important;
        border-radius: 21px !important;
    }

        .portfolio-metric.portfolio-metric--compact
        .portfolio-metric__value {
            min-width: 54px !important;
            font-size: 28px !important;
        }

        .portfolio-metric.portfolio-metric--compact
        .portfolio-metric__content strong {
            font-size: 12px !important;
        }

        .portfolio-metric.portfolio-metric--compact
        .portfolio-metric__content p {
            font-size: 9px !important;
        }
}


/* =========================================================
   PORTFOLIO CATALOG
========================================================= */

.portfolio-catalog {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 40px;
    border: 1px solid var(--portfolio-line);
    border-radius: 34px;
    background: radial-gradient(circle at 90% 8%, rgba(241, 215, 149, 0.34), transparent 30%), radial-gradient(circle at 8% 88%, rgba(184, 115, 82, 0.13), transparent 31%), radial-gradient(circle at 55% 100%, rgba(140, 137, 96, 0.12), transparent 30%), linear-gradient(135deg, #fdfbf7 0%, #f8f2e7 45%, #f5ecdc 100%) !important;
    box-shadow: 0 22px 52px rgba(68, 45, 23, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.portfolio-catalog__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.32;
    pointer-events: none;
    background-image: radial-gradient( circle at 1px 1px, rgba(118, 84, 47, 0.16) 1px, transparent 0 );
    background-size: 28px 28px;
}


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

.portfolio-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    align-items: end;
    gap: 36px;
    margin-bottom: 28px;
}

.portfolio-section-header__eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}
}

.portfolio-section-header h2 {
    max-width: 760px;
    margin: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% );
    background-size: 280% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: portfolioPageGoldFlow 4.8s ease-in-out infinite alternate;
    font-size: clamp(31px, 3.5vw, 48px);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -1.8px;
}

.portfolio-section-header > p {
    margin: 0;
    color: var(--portfolio-muted);
    font-size: 11.5px;
    font-weight: 560;
    line-height: 1.72;
}


/* =========================================================
   FILTERS
========================================================= */

.portfolio-filter-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}


.portfolio-filters {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    border: 1px solid rgb(109 79 44 / 01%) !important;
    border-radius: 17px !important;
    background: radial-gradient(circle at 50% 5%, rgba(249, 222, 157, 0.24), transparent 30%), linear-gradient(344deg, #c2aa76, #ccb27c);
    box-shadow: 0 4px 4px rgba(72, 48, 25, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.portfolio-filter {
    appearance: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    padding: 0 13px;
    border-radius: 12px;
    background: transparent;
    color: #462f12;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

    .portfolio-filter small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        border-radius: 8px;
        background: rgb(111 90 63 / 78%);
        color: #ffffff;
        font-size: 14px;
        font-weight: 900;
    }

    .portfolio-filter:hover {
        color: #4e3928;
        background: rgba(255, 250, 239, 0.62);
    }

.portfolio-filter--active {
    color: #4c3422;
    background: linear-gradient( 145deg, #f9ecd1, #ead4aa );
    box-shadow: 0 9px 20px rgba(92, 61, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

    .portfolio-filter--active small {
        background: rgba(139, 99, 49, 0.13);
        color: #73522e;
    }


/* =========================================================
   PORTFOLIO GRID
========================================================= */

.portfolio-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgb(113 96 71 / 39%);
    border-radius: 25px;
    background: rgb(239 227 197 / 88%);
    box-shadow: 0 0px 6px rgb(67 44 23 / 24%), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: transform 0.48s cubic-bezier(.22, 1, .36, 1), box-shadow 0.44s ease, border-color 0.35s ease;
}

    .portfolio-card:hover {
        transform: translateY(-6px);
        border-color: rgba(164, 117, 57, 0.24);
        box-shadow: 0 25px 50px rgba(66, 42, 21, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

.portfolio-card__media {
    appearance: none;
    cursor: pointer;
    background: radial-gradient(circle at 78% 17%, rgba(255, 231, 169, 0.24), transparent 28%), linear-gradient(145deg, #bca779, #907a59);
}

.portfolio-card__placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: radial-gradient(circle at 78% 17%, rgb(255 255 255 / 24%), transparent 28%), linear-gradient(145deg, #eaebebde, #cad4d7);
}

    .portfolio-card__placeholder::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.24;
        background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
        background-size: 31px 31px;
    }

    .portfolio-card__placeholder > span {
        position: relative;
        z-index: 2;
        color: rgba(255, 246, 226, 0.88);
        font-size: 45px;
        font-weight: 950;
        letter-spacing: -2px;
    }

    .portfolio-card__placeholder small {
        position: relative;
        z-index: 2;
        color: rgba(255, 247, 228, 0.68);
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

.portfolio-card__media img {
    z-index: 1;
    transition: transform 0.7s cubic-bezier(.22, 1, .36, 1), filter 0.45s ease;
}

.portfolio-card:hover .portfolio-card__media img {
    transform: scale(1.055);
}

.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(42, 29, 19, 0.64), rgba(42, 29, 19, 0.04) 65%);
    opacity: 0.48;
    transition: opacity 0.4s ease;
}

.portfolio-card:hover .portfolio-card__overlay {
    opacity: 0.82;
}

.portfolio-card__media-type {
    position: absolute;
    left: 13px;
    bottom: 13px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgb(0 0 0 / 21%);
    border-radius: 11px;
    background: rgba(54, 38, 24, 0.12);
    color: #fff9eb;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(11px);
    font-size: 8px;
    font-weight: 850;
}

    .portfolio-card__media-type svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

        .portfolio-card__media-type svg path:first-child:only-child {
            fill: currentColor;
            stroke: none;
        }

.portfolio-card__open {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 11px;
    background: rgba(54, 38, 24, 0.44);
    color: #fff8e7;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.38s cubic-bezier(.22, 1, .36, 1), background 0.35s ease;
}

    .portfolio-card__open svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.portfolio-card:hover .portfolio-card__open {
    transform: translate(2px, -2px);
    background: rgba(68, 45, 24, 0.68);
}

.portfolio-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 19px 18px 18px;
}

.portfolio-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

    .portfolio-card__meta > span {
        color: #996d3e;
        font-size: 7.5px;
        font-weight: 950;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    .portfolio-card__meta small {
        color: #968775;
        font-size: 7.5px;
        font-weight: 750;
    }

.portfolio-card h3 {
    margin: 0 0 9px;
    color: #3a2c22;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

.portfolio-card__body > p {
    margin: 0;
    color: var(--portfolio-muted);
    font-size: 10.2px;
    font-weight: 540;
    line-height: 1.62;
}

.portfolio-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 17px;
}

    .portfolio-card__tags span {
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 8px !important;
        border: 1px solid rgba(205, 168, 99, .58) !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88)) !important;
        color: #876020 !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
    }


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

.portfolio-featured {
    padding: 40px;
    border: 1px solid var(--portfolio-line);
    border-radius: 34px;
    background: linear-gradient( 145deg, rgba(247, 239, 226, 0.94), rgba(231, 216, 193, 0.90) );
    box-shadow: 0 22px 52px rgba(68, 45, 23, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

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

.portfolio-featured-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas:
        "top top"
        "visual content"
        "visual link";
    gap: 16px 19px;
    min-height: 300px;
    padding: 20px;
    border: 1px solid rgba(106, 76, 42, 0.14);
    border-radius: 26px;
    background: rgba(255, 251, 243, 0.84);
    box-shadow: 0 16px 34px rgba(69, 45, 22, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: transform 0.46s cubic-bezier(.22, 1, .36, 1), box-shadow 0.44s ease;
}

    .portfolio-featured-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 48px rgba(67, 43, 20, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

.portfolio-featured-card__top {
    grid-area: top;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.portfolio-featured-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid #9b825b;
    border-radius: 12px;
    color: #806944;
    font-size: 8px;
    font-weight: 950;
}

.portfolio-featured-card__type {
    color: #967044;
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 0.75px;
    text-align: right;
    text-transform: uppercase;
}

.portfolio-featured-card__visual {
    position: relative;
    overflow: hidden;
    grid-area: visual;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    border-radius: 19px;
    background: radial-gradient( circle at 75% 14%, rgba(251, 218, 142, 0.22), transparent 32% ), linear-gradient( 145deg, #bca579, #856f51 );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19);
}

.portfolio-featured-card__visual-grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient(rgba(255, 255, 255, 0.19) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.19) 1px, transparent 1px);
    background-size: 28px 28px;
}

.portfolio-featured-card__visual > span {
    position: relative;
    z-index: 2;
    color: rgba(255, 246, 224, 0.86);
    font-size: 35px;
    font-weight: 950;
    letter-spacing: -1px;
}

.portfolio-featured-card__content {
    grid-area: content;
    align-self: start;
}

    .portfolio-featured-card__content h3 {
        margin: 0 0 10px;
        color: #382a20;
        font-size: 19px;
        font-weight: 950;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }

    .portfolio-featured-card__content > p {
        margin: 0;
        color: var(--portfolio-muted);
        font-size: 10px;
        font-weight: 540;
        line-height: 1.62;
    }

.portfolio-featured-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 15px;
}

    .portfolio-featured-card__tags span {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 0 8px;
        border: 1px solid rgba(109, 79, 44, 0.10);
        border-radius: 9px;
        background: rgba(226, 211, 187, 0.48);
        color: #7b6955;
        font-size: 7px;
        font-weight: 750;
    }

.portfolio-featured-card__link {
    grid-area: link;
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 39px;
    padding: 0 12px;
    border: 1px solid rgba(135, 94, 47, 0.15);
    border-radius: 12px;
    background: linear-gradient( 145deg, #f3dfb8, #e2c48d );
    color: #684923;
    font-size: 8px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.34s ease, box-shadow 0.34s ease;
}

    .portfolio-featured-card__link svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .portfolio-featured-card__link:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(103, 66, 26, 0.12);
    }

.portfolio-featured-card__link--disabled {
    opacity: 0.72;
    cursor: default;
}


/* =========================================================
   CLOSING
========================================================= */

.portfolio-closing {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 35px;
    padding: 38px 42px;
    border: 1px solid rgba(120, 86, 47, 0.14);
    border-radius: 32px;
    background: radial-gradient( circle at 90% 10%, rgba(245, 217, 143, 0.22), transparent 31% ), linear-gradient( 145deg, #c3ad7d, #a78f69 );
    box-shadow: 0 22px 45px rgba(74, 49, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.portfolio-closing__content > span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}
}

.portfolio-closing__content h2 {
    max-width: 850px;
    margin: 0 0 13px;
    color: #36271d;
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -1.7px;
}

.portfolio-closing__content p {
    max-width: 750px;
    margin: 0;
    color: rgba(255, 251, 242, 0.87);
    font-size: 11px;
    font-weight: 580;
    line-height: 1.66;
}

.portfolio-closing__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 145px;
    height: 145px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(251, 239, 211, 0.91), rgba(225, 203, 157, 0.86) );
    box-shadow: 0 16px 28px rgba(72, 47, 22, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

    .portfolio-closing__mark strong {
        color: #634726;
        font-size: 32px;
        font-weight: 950;
    }

    .portfolio-closing__mark span {
        max-width: 100px;
        margin-top: 5px;
        color: #806b50;
        font-size: 8px;
        font-weight: 800;
        line-height: 1.3;
        text-align: center;
    }


/* =========================================================
   LIGHTBOX
========================================================= */

.portfolio-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(28, 20, 15, 0.78);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    animation: portfolioLightboxFade 0.25s ease both;
}

@keyframes portfolioLightboxFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.portfolio-lightbox__dialog {
    overflow: hidden;
    width: min(1080px, 100%);
    max-height: calc(100vh - 56px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 28px;
    background: #f7f0e4;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.38);
    animation: portfolioDialogEnter 0.38s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes portfolioDialogEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

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

.portfolio-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(103, 74, 42, 0.12);
}

    .portfolio-lightbox__header > div {
        min-width: 0;
    }

    .portfolio-lightbox__header span {
        display: block;
        margin-bottom: 5px;
        color: #986d3f;
        font-size: 7.5px;
        font-weight: 950;
        letter-spacing: 0.9px;
        text-transform: uppercase;
    }

    .portfolio-lightbox__header h3 {
        margin: 0;
        color: #352820;
        font-size: 18px;
        font-weight: 950;
    }

.portfolio-lightbox__close {
    appearance: none;
    border: 1px solid rgba(108, 77, 43, 0.14);
    outline: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 13px;
    background: #eadcc5;
    color: #694d31;
    transition: transform 0.3s ease, background 0.3s ease;
}

    .portfolio-lightbox__close:hover {
        transform: rotate(5deg) scale(1.04);
        background: #dfc9a6;
    }

    .portfolio-lightbox__close svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.portfolio-lightbox__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    max-height: 68vh;
    background: #211b17;
}

    .portfolio-lightbox__media video,
    .portfolio-lightbox__media img {
        display: block;
        width: 100%;
        max-height: 68vh;
        object-fit: contain;
    }

.portfolio-lightbox__image-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 420px;
}

    .portfolio-lightbox__image-shell img {
        position: relative;
        z-index: 2;
    }

.portfolio-lightbox__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 420px;
    padding: 30px;
    color: rgba(255, 247, 230, 0.86);
    text-align: center;
}

.portfolio-lightbox__empty--background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.portfolio-lightbox__empty svg {
    width: 55px;
    height: 55px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

    .portfolio-lightbox__empty svg path:first-child:only-child {
        fill: currentColor;
        stroke: none;
    }

.portfolio-lightbox__empty strong {
    font-size: 18px;
    font-weight: 900;
}

.portfolio-lightbox__empty span {
    color: rgba(255, 247, 230, 0.67);
    font-size: 10px;
}

.portfolio-lightbox__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 17px 20px;
}

    .portfolio-lightbox__footer p {
        max-width: 680px;
        margin: 0;
        color: #716556;
        font-size: 10px;
        line-height: 1.55;
    }

    .portfolio-lightbox__footer > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

        .portfolio-lightbox__footer > div span {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 0 8px;
            border: 1px solid rgba(110, 80, 45, 0.11);
            border-radius: 8px;
            background: #e9dcc6;
            color: #766450;
            font-size: 7px;
            font-weight: 750;
        }


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

@media (max-width: 1250px) {
    .portfolio-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
        gap: 30px;
        padding: 44px 36px;
    }

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

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


@media (max-width: 980px) {
    .portfolio-hero {
        grid-template-columns: 1fr;
    }

    .portfolio-hero-panel {
        max-width: 620px;
    }

    .portfolio-section-header {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .portfolio-featured-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {
    .portfolio-page {
        gap: 20px;
    }

    .portfolio-hero {
        min-height: 0;
        padding: 30px 20px;
        border-radius: 27px;
    }

    .portfolio-hero__title {
        font-size: 43px;
        letter-spacing: -2px;
    }

    .portfolio-hero-panel {
        padding: 17px;
        border-radius: 24px;
    }

    .portfolio-hero-panel__grid article {
        min-height: 130px;
        padding: 12px;
    }

    .portfolio-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .portfolio-metric {
        min-height: 150px;
        padding: 17px;
        border-radius: 20px;
    }

    .portfolio-catalog {
        padding: 25px 18px;
        border-radius: 27px;
    }



    .portfolio-page > .portfolio-catalog + .portfolio-featured {
        position: relative !important;
        top: auto !important;
        margin-top: -26px !important;
    }



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

    .portfolio-card {
        border-radius: 22px;
    }

    .portfolio-featured-card {
        grid-template-columns: 120px minmax(0, 1fr);
        padding: 16px;
    }

    .portfolio-closing {
        grid-template-columns: 1fr;
        padding: 28px 22px;
        border-radius: 27px;
    }

    .portfolio-closing__mark {
        width: 100%;
        height: 105px;
        border-radius: 20px;
    }

    .portfolio-lightbox {
        padding: 12px;
    }

    .portfolio-lightbox__dialog {
        max-height: calc(100vh - 24px);
        border-radius: 20px;
    }

    .portfolio-lightbox__media,
    .portfolio-lightbox__image-shell,
    .portfolio-lightbox__empty {
        min-height: 300px;
    }

    .portfolio-lightbox__footer {
        align-items: flex-start;
        flex-direction: column;
    }

        .portfolio-lightbox__footer > div {
            justify-content: flex-start;
        }
}


@media (max-width: 520px) {
    .portfolio-hero__title {
        font-size: 37px;
    }

    .portfolio-hero-panel__grid {
        grid-template-columns: 1fr 1fr;
    }

        .portfolio-hero-panel__grid article {
            min-height: 142px;
        }

    .portfolio-metrics {
        grid-template-columns: 1fr;
    }

    .portfolio-featured-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "visual"
            "content"
            "link";
    }

    .portfolio-featured-card__visual {
        min-height: 170px;
    }
}




/* =========================================================
   PORTFOLIO MEDIA — NATURAL IMAGE RATIO
========================================================= */

.portfolio-card__media {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
}


/* =========================================================
   VIDEO — KEEP 16:10 RATIO
========================================================= */

.portfolio-card__media--video {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
}

    .portfolio-card__media--video img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }


/* =========================================================
   IMAGE — USE ORIGINAL IMAGE RATIO
========================================================= */

.portfolio-card__media--image {
    aspect-ratio: auto !important;
    min-height: 190px !important;
    height: auto !important;
}


    /* خود عکس ارتفاع بخش را مشخص می‌کند */
    .portfolio-card__media--image img {
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }


/* در حالت Hover عکس بریده یا Zoom نشود */
.portfolio-card:hover
.portfolio-card__media--image img {
    transform: none !important;
}


/* Placeholder در صورت نبودن عکس */
.portfolio-card__media--image
.portfolio-card__placeholder {
    position: absolute !important;
    inset: 0 !important;
    min-height: 190px !important;
}


.portfolio-card__media {
    aspect-ratio: 16 / 10 !important;
}

    .portfolio-card__media img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }



/* =========================================================
   PORTFOLIO — MINIMAL HERO
========================================================= */

.portfolio-hero.portfolio-hero--minimal {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 350px) !important;
    align-items: center !important;
    gap: 44px !important;
    width: 100% !important;
    min-height: 350px !important;
    padding: 38px 42px !important;
    border: 1px solid rgba(121, 86, 47, 0.14) !important;
    border-radius: 32px !important;
    background: radial-gradient( circle at 92% 6%, rgba(241, 207, 128, 0.18), transparent 27% ), linear-gradient( 135deg, rgba(255, 252, 246, 0.98), rgba(244, 235, 220, 0.95) ) !important;
    box-shadow: 0 20px 46px rgba(78, 53, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}


    /* subtle background grid */
    .portfolio-hero.portfolio-hero--minimal::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: -2 !important;
        opacity: 0.30 !important;
        background-image: linear-gradient( rgba(125, 90, 49, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(125, 90, 49, 0.055) 1px, transparent 1px ) !important;
        background-size: 54px 54px !important;
        pointer-events: none !important;
    }


.portfolio-minimal-hero__glow {
    position: absolute !important;
    top: -160px !important;
    right: -90px !important;
    z-index: -1 !important;
    width: 350px !important;
    height: 350px !important;
    border-radius: 50% !important;
    background: radial-gradient( circle, rgba(235, 194, 102, 0.20), transparent 70% ) !important;
    pointer-events: none !important;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.portfolio-minimal-hero__content {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
}


    .portfolio-minimal-hero__content .portfolio-eyebrow {
        margin-bottom: 19px !important;
    }


.portfolio-minimal-hero__title {
    max-width: 780px !important;
    margin: 0 0 18px !important;
    color: #35281f !important;
    font-size: clamp(37px, 4.1vw, 68px) !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    letter-spacing: -2.3px !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
    background-size: 240% 100% !important;
    background-position: 0% 50%;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
    text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
    will-change: background-position;
}


    .portfolio-minimal-hero__title span {
        display: block !important;
        color: #35281f !important;
        font-size: clamp(30px, 2.1vw, 20px) !important;
        font-weight: 450 !important;
        letter-spacing: 0.1px !important;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.07), 0 8px 20px rgba(171, 108, 48, 0.09) !important;
    }


@keyframes portfolioMinimalGoldFlow {

    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}


.portfolio-minimal-hero__description {
    max-width: 760px !important;
    margin: 0 !important;
    color: #74695c !important;
    font-size: 13px !important;
    font-weight: 560 !important;
    line-height: 1.78 !important;
}


.portfolio-minimal-hero__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 22px !important;
}


    .portfolio-minimal-hero__tags span {
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(205, 168, 99, .25) !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88)) !important;
        color: #876020 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
    }


/* =========================================================
   COMPACT PORTFOLIO SCOPE PANEL
========================================================= */

.portfolio-scope-panel {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    padding: 19px !important;
    border: 1px solid rgba(112, 78, 39, 0.15) !important;
    border-radius: 24px !important;
    background: radial-gradient( circle at 88% 5%, rgba(249, 222, 157, 0.24), transparent 30% ), linear-gradient( 145deg, #c2aa76, #a78d66 ) !important;
    box-shadow: 0 18px 34px rgba(72, 48, 23, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.23) !important;
}


.portfolio-scope-panel__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}


    .portfolio-scope-panel__header > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }


    .portfolio-scope-panel__header span {
        color: rgba(255, 248, 232, 0.82) !important;
        font-size: 7.5px !important;
        font-weight: 900 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }


    .portfolio-scope-panel__header strong {
        color: #39291f !important;
        font-size: 15px !important;
        font-weight: 950 !important;
    }


.portfolio-scope-panel__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(255, 255, 255, 0.43) !important;
    border-radius: 13px !important;
    background: linear-gradient( 145deg, rgba(250, 239, 209, 0.95), rgba(224, 200, 149, 0.91) ) !important;
    color: #a66d21 !important;
    box-shadow: 0 9px 19px rgba(69, 46, 22, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}


    .portfolio-scope-panel__icon svg {
        width: 21px !important;
        height: 21px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.6 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


/* =========================================================
   PANEL ITEMS
========================================================= */

.portfolio-scope-panel__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}


.portfolio-scope-panel__item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 67px !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.99);
    border-radius: 18px;
    background: rgba(241, 225, 196, 0.99);
    box-shadow: 0 4px 6px rgba(16, 36, 60, 0.545), inset 0 1px 0 rgba(255, 255, 255, 0.80);
    transition: transform 0.38s cubic-bezier(.22, 1, .36, 1), box-shadow 0.38s ease !important;
}


    .portfolio-scope-panel__item:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 12px 21px rgba(65, 42, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }


.portfolio-scope-panel__number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 2px solid #907951 !important;
    border-radius: 10px !important;
    color: #77623e !important;
    font-size: 8px !important;
    font-weight: 950 !important;
}


.portfolio-scope-panel__item > div {
    min-width: 0 !important;
}


.portfolio-scope-panel__item strong {
    display: block !important;
    margin-bottom: 3px !important;
    color: #3c2b21 !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}


.portfolio-scope-panel__item > div > span {
    display: block !important;
    color: #786b5b !important;
    font-size: 8.2px !important;
    font-weight: 560 !important;
    line-height: 1.38 !important;
}


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

@media (max-width: 900px) {
    .portfolio-hero.portfolio-hero--minimal {
        grid-template-columns: 1fr !important;
        gap: 27px !important;
    }

    .portfolio-scope-panel {
        max-width: 620px !important;
    }
}


@media (max-width: 760px) {
    .portfolio-hero.portfolio-hero--minimal {
        min-height: 0 !important;
        padding: 28px 20px !important;
        border-radius: 26px !important;
        top: -22px;
    }

    .portfolio-minimal-hero__title {
        font-size: 38px !important;
        letter-spacing: -1.7px !important;
    }

    .portfolio-minimal-hero__description {
        font-size: 11.5px !important;
    }

    .portfolio-minimal-hero__tags {
        margin-top: 18px !important;
    }

    .portfolio-scope-panel {
        padding: 16px !important;
        border-radius: 21px !important;
    }
}


/* =========================================================
   PORTFOLIO GRID — SHOW 3 ROWS + HIDDEN SCROLLBAR
========================================================= */

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 18px !important;
    width: 100% !important;
    /*
       ارتفاع تقریبی سه ردیف کارت
       برای کم یا زیاد کردن بخش، فقط این عدد را تغییر بده
    */
    max-height: 1215px !important;
    padding: 4px 4px 18px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
    /* Firefox */
    scrollbar-width: none !important;
    /* Internet Explorer / Edge قدیمی */
    -ms-overflow-style: none !important;
}


    /* Chrome, Edge, Safari */
    .portfolio-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


.portfolio-grid {
    -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - 32px), transparent 100% ) !important;
    mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - 62px), transparent 100% ) !important;
}


.portfolio-card:last-child {
    margin-bottom: 10px !important;
}

@media (max-width: 1250px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        /*
           سه ردیف در حالت دو ستونه
        */
        max-height: 1240px !important;
    }
}


@media (max-width: 760px) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        /*
           سه کارت در حالت موبایل
        */
        max-height: 1420px !important;
        gap: 14px !important;
    }
}


/* =========================================================
   REMOVE UNWANTED TITLE OUTLINE
========================================================= */

.modern-hero-title,
.modern-hero-title > span {
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

    .modern-hero-title:focus,
    .modern-hero-title:focus-visible,
    .modern-hero-title:active,
    .modern-hero-title > span:focus,
    .modern-hero-title > span:focus-visible,
    .modern-hero-title > span:active {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }


    .modern-hero-title a,
    .modern-hero-title button,
    a:has(.modern-hero-title),
    button:has(.modern-hero-title) {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .modern-hero-title a:focus,
        .modern-hero-title a:focus-visible,
        .modern-hero-title button:focus,
        .modern-hero-title button:focus-visible,
        a:has(.modern-hero-title):focus,
        button:has(.modern-hero-title):focus {
            outline: none !important;
            box-shadow: none !important;
        }







/* =========================================================
   WHAT I DO HERO
   EXACT HOME HERO CONTENT ALIGNMENT
========================================================= */

.whatido-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: grid !important;
    /*
       ستون چپ منعطف
       ستون راست دقیقاً 400px مثل پنل Home
    */
    grid-template-columns: minmax(0, 1fr) 400px !important;
    align-items: stretch !important;
    /*
       فاصله واقعی بین متن چپ و پنل راست
    */
    column-gap: 46px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-height: 714px !important;
    /*
       بالا | راست | پایین | چپ
       دقیقاً مشابه آرایش Hero صفحه Home
    */
    padding: 38px 38px 38px 49px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.whatido-hero__content {
    position: relative !important;
    z-index: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    /*
       در Home نوشته‌های سمت چپ کمی پایین‌تر
       از بالای پنل سمت راست شروع می‌شوند
    */
    padding: 18px 0 0 !important;
    margin: 0 !important;
    transform: none !important;
}


    /* Eyebrow */
    .whatido-hero__content .whatido-eyebrow {
        margin: 0 0 30px !important;
    }


/* Main title */
.whatido-hero__title {
    width: 100% !important;
    max-width: 625px !important;
    margin: 0 0 27px !important;
    padding: 0 !important;
}


/* Intro paragraph */
.whatido-hero__lead {
    width: 100% !important;
    max-width: 625px !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Tags */
.whatido-hero__pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    margin: 29px 0 0 !important;
    padding: 0 !important;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.whatido-hero__visual {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    align-self: stretch !important;
    justify-self: end !important;
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    /*
       تمام جابه‌جایی‌های قبلی خنثی شوند
    */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.whatido-capability-panel {
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
}



/* =========================================================
   RIGHT PANEL INTERNAL ALIGNMENT
========================================================= */

.whatido-capability-panel {
    padding: 30px 30px 28px !important;
}


/* Badge and icon row */
.whatido-capability-panel__top {
    margin: -1px -1px 28px !important;
}


/* Right-panel title */
.whatido-capability-panel__content h2 {
    margin: 0 0 18px !important;
}


/* Space before the four cards */
.whatido-capability-list {
    margin-top: 28px !important;
}


/* Same spacing between cards */
.whatido-capability-list {
    gap: 11px !important;
}



.whatido-capability-panel {
    display: flex !important;
    flex-direction: column !important;
}


.whatido-capability-panel__top,
.whatido-capability-panel__content {
    flex: 0 0 auto !important;
}


.whatido-capability-list {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: end !important;
    width: 100% !important;
}


@media (max-width: 900px) {
    .whatido-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 36px 34px 36px 42px !important;
        row-gap: 32px !important;
    }


    .whatido-hero__content {
        padding-top: 0 !important;
    }


    .whatido-hero__visual {
        justify-self: start !important;
        width: 100% !important;
        max-width: 620px !important;
        min-width: 0 !important;
    }


    .whatido-capability-panel {
        min-height: 0 !important;
        height: auto !important;
    }
}


@media (max-width: 760px) {
    .whatido-hero {
        padding: 28px 20px 28px !important;
        border-radius: 27px !important;
        top: -22px;
    }


    .whatido-hero__title,
    .whatido-hero__lead {
        max-width: none !important;
    }


    .whatido-capability-panel {
        padding: 22px 18px 20px !important;
    }
}


/* =========================================================
   CONTACT PAGE — SIMPLE PREMIUM HERO
========================================================= */

.contact-simple-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    top: 6px;
    height: 408px !important;
    padding: 54px 40px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(121, 86, 47, 0.14) !important;
    border-radius: 36px !important;
    background: radial-gradient( circle at 91% 8%, rgba(240, 205, 124, 0.20), transparent 28% ), radial-gradient( circle at 72% 88%, rgba(184, 114, 75, 0.07), transparent 25% ), linear-gradient( 135deg, rgba(255, 252, 246, 0.98), rgba(244, 235, 220, 0.95) ) !important;
    box-shadow: 0 22px 50px rgba(78, 53, 28, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}


    /* subtle background grid */
    .contact-simple-hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: -3 !important;
        opacity: 0.30 !important;
        background-image: linear-gradient( rgba(125, 90, 49, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(125, 90, 49, 0.055) 1px, transparent 1px ) !important;
        background-size: 54px 54px !important;
        pointer-events: none !important;
    }


/* =========================================================
   DECORATIVE GLOWS
========================================================= */

.contact-simple-hero__glow {
    position: absolute !important;
    z-index: -2 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}


.contact-simple-hero__glow--one {
    top: -190px !important;
    right: -110px !important;
    width: 430px !important;
    height: 430px !important;
    background: radial-gradient( circle, rgba(231, 188, 91, 0.20), transparent 70% ) !important;
}


.contact-simple-hero__glow--two {
    bottom: -250px !important;
    left: -120px !important;
    width: 390px !important;
    height: 390px !important;
    background: radial-gradient( circle, rgba(179, 109, 72, 0.10), transparent 70% ) !important;
}


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

.contact-simple-hero__content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 940px !important;
    margin: 0 !important;
    padding: 0 !important;
}


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

.contact-simple-hero__eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 15px;
    border: 1px solid rgba(200, 154, 66, 0.25) !important;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(247, 235, 210, 0.72)) !important;
    color: #895f23 !important;
    box-shadow: 0 9px 22px rgba(84, 58, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}


.contact-simple-hero__eyebrow-dot {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: linear-gradient( 135deg, #d19169, #ad694b ) !important;
    box-shadow: 0 0 0 5px rgba(182, 112, 77, 0.10) !important;
}


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

.contact-simple-hero__title {
    max-width: 780px !important;
    margin: 0 0 18px !important;
    color: #35281f !important;
    font-size: clamp(37px, 4.1vw, 68px) !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    letter-spacing: -2.3px !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%) !important;
    background-size: 240% 100% !important;
    background-position: 0% 50%;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: amt205GoldFlow 4s ease-in-out infinite alternate !important;
    text-shadow: 0 1px 1px rgba(98, 57, 22, 0.08), 0 8px 20px rgba(171, 108, 48, 0.10) !important;
    will-change: background-position;
}


    .contact-simple-hero__title span {
        display: inline !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100% ) !important;
        background-size: 300% 100% !important;
        background-position: 0% 50%;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        animation: contactSimpleGoldFlow 4.8s ease-in-out infinite alternate !important;
        text-shadow: 0 1px 1px rgba(98, 57, 22, 0.07), 0 9px 22px rgba(171, 108, 48, 0.10) !important;
        will-change: background-position !important;
    }


@keyframes contactSimpleGoldFlow {

    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}


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

.contact-simple-hero__description {
    width: 100% !important;
    max-width: 850px !important;
    margin: 0 !important;
    color: #667895 !important;
    font-size: 15px !important;
    font-weight: 620 !important;
    line-height: 1.8 !important;
}


/* =========================================================
   TAGS
========================================================= */

.contact-simple-hero__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 29px 0 0 !important;
    padding: 0 !important;
}


    .contact-simple-hero__tags span {
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        border: 1px solid rgba(205, 168, 99, .25) !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(255, 250, 238, .95), rgba(246, 233, 202, .88)) !important;
        color: #876020 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70) !important;
    }


        .contact-simple-hero__tags span:hover {
            transform: translateY(-2px) !important;
            border-color: rgba(177, 125, 62, 0.25) !important;
            box-shadow: 0 8px 17px rgba(84, 55, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
        }


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

@media (max-width: 1100px) {
    .contact-simple-hero {
        min-height: 440px !important;
        padding: 44px 40px !important;
    }

    .contact-simple-hero__content {
        max-width: 760px !important;
    }
}


@media (max-width: 760px) {
    .contact-simple-hero {
        height: 500px !important;
        padding: 31px 21px !important;
        border-radius: 27px !important;
        top: -22px;
    }


    .contact-simple-hero__eyebrow {
        margin-bottom: 23px !important;
    }


    .contact-simple-hero__title {
        max-width: none !important;
        font-size: 43px !important;
        line-height: 1 !important;
        letter-spacing: -2px !important;
    }


    .contact-simple-hero__description {
        max-width: none !important;
        font-size: 11.8px !important;
        line-height: 1.72 !important;
    }


    .contact-simple-hero__tags {
        margin-top: 22px !important;
    }
}


/* =========================================================
   UNIFIED DARK THEME — FARHAD PORTFOLIO
   ---------------------------------------------------------
   Design language:
   - Warm graphite and espresso surfaces
   - Champagne-gold accents
   - Soft ivory typography
   - One consistent border and shadow system
   - Light-theme layout and dimensions remain untouched
========================================================= */

/* =========================================================
   01. DARK DESIGN TOKENS
========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;
    --dark-bg-0: #0b0c0f;
    --dark-bg-1: #101217;
    --dark-bg-2: #171410;
    --dark-surface-1: rgba(22, 24, 29, 0.96);
    --dark-surface-2: rgba(28, 25, 21, 0.96);
    --dark-surface-3: rgba(35, 30, 24, 0.94);
    --dark-surface-soft: rgba(255, 244, 219, 0.055);
    --dark-surface-hover: rgba(255, 239, 202, 0.085);
    --dark-text: #f7efe2;
    --dark-text-soft: #d9ccba;
    --dark-muted: #aa9e8e;
    --dark-muted-cool: #aab5c6;
    --dark-gold: #d8aa4f;
    --dark-gold-light: #c7bea5;
    --dark-gold-pale: #fff0c2;
    --dark-gold-deep: #9f742b;
    --dark-copper: #bf7957;
    --dark-line: rgba(222, 181, 104, 0.16);
    --dark-line-strong: rgba(232, 194, 119, 0.30);
    --dark-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
    --dark-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24);
    --dark-inset: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    /* Existing project variables are redirected to one palette. */
    --bg: var(--dark-bg-0);
    --surface: var(--dark-surface-1);
    --surface-solid: #17191e;
    --text: var(--dark-text);
    --muted: var(--dark-muted-cool);
    --line: var(--dark-line);
    --brand: var(--dark-gold);
    --brand-dark: var(--dark-gold-light);
    --gold: var(--dark-gold);
    --gold-soft: #332817;
    --navy: var(--dark-text);
    --deep-blue: #c0a066;
    --shadow: var(--dark-shadow);
    --sidebar-white: var(--dark-text);
    --sidebar-cream: #211c17;
    --sidebar-navy: #0b0d11;
    --sidebar-navy-2: #17130f;
    --sidebar-gold: var(--dark-gold);
    --sidebar-gold-light: var(--dark-gold-light);
    --sidebar-gold-dark: var(--dark-gold-deep);
    --topbar-cream: #17191e;
    --topbar-cream-2: #211c17;
    --topbar-navy: var(--dark-text);
    --topbar-navy-2: #17130f;
    --topbar-gold: var(--dark-gold);
    --topbar-gold-light: var(--dark-gold-light);
    --topbar-gold-dark: var(--dark-gold-deep);
    --topbar-text-muted: var(--dark-muted-cool);
}

    html[data-theme="dark"] body {
        color: var(--dark-text) !important;
        background: radial-gradient(circle at 8% 6%, rgba(216, 170, 79, 0.14), transparent 29%), radial-gradient(circle at 88% 12%, rgba(191, 121, 87, 0.10), transparent 28%), radial-gradient(circle at 42% 86%, rgba(140, 137, 96, 0.07), transparent 30%), linear-gradient(135deg, var(--dark-bg-0) 0%, var(--dark-bg-1) 48%, var(--dark-bg-2) 100%) !important;
    }

        html[data-theme="dark"] body::before {
            background-image: linear-gradient(rgba(245, 216, 139, 0.027) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 216, 139, 0.027) 1px, transparent 1px) !important;
            opacity: 0.75;
        }

    html[data-theme="dark"] ::selection {
        color: #0b0c0f;
        background: var(--dark-gold-light);
    }

html[data-theme="dark"] {
    scrollbar-color: rgba(216, 170, 79, 0.42) rgba(255, 255, 255, 0.025);
}

    html[data-theme="dark"] *::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--dark-gold-light), var(--dark-gold-deep));
        border-radius: 999px;
    }

    html[data-theme="dark"] *::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.025);
    }

    /* =========================================================
   02. GLOBAL TYPOGRAPHY AND GENERIC SURFACES
========================================================= */

    html[data-theme="dark"] :is( .profile-name-block h1, .overview-card h3, .service-card h3, .portfolio-category-card h3, .contact-box h3 ) {
        color: var(--dark-text) !important;
    }

    html[data-theme="dark"] :is( .profile-name-block p, .overview-card p, .service-card p, .portfolio-category-card p, .contact-box p ) {
        color: var(--dark-muted-cool) !important;
    }

    html[data-theme="dark"] :is( .hero-section, .page-heading, .overview-card, .service-card, .portfolio-category-card, .contact-box ) {
        border-color: var(--dark-line) !important;
        background: radial-gradient(circle at 92% 8%, rgba(216, 170, 79, 0.10), transparent 31%), linear-gradient(145deg, var(--dark-surface-1), var(--dark-surface-2)) !important;
        box-shadow: var(--dark-shadow), var(--dark-inset) !important;
    }

    html[data-theme="dark"] :is(.hero-section, .page-heading) > p {
        color: var(--dark-muted-cool) !important;
    }

    /* =========================================================
   03. TOP NAVIGATION
========================================================= */

    html[data-theme="dark"] .topbar {
        border-color: rgba(216, 170, 79, 0.25) !important;
        background: radial-gradient(circle at 8% 0%, rgba(216, 170, 79, 0.10), transparent 31%), linear-gradient(135deg, rgba(20, 22, 27, 0.88), rgba(25, 21, 17, 0.78)) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
        backdrop-filter: blur(28px) saturate(1.18) !important;
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    }

    html[data-theme="dark"][data-topbar-scrolled="true"] .topbar {
        border-color: rgba(245, 216, 139, 0.34) !important;
        background: radial-gradient(circle at 8% 0%, rgba(216, 170, 79, 0.12), transparent 31%), linear-gradient(135deg, rgba(17, 19, 24, 0.82), rgba(26, 22, 18, 0.72)) !important;
        -webkit-backdrop-filter: blur(38px) saturate(1.26) !important;
        backdrop-filter: blur(38px) saturate(1.26) !important;
        box-shadow: 0 32px 76px rgba(0, 0, 0, 0.43), 0 0 0 1px rgba(216, 170, 79, 0.06) inset, inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    }

    html[data-theme="dark"] .topbar::before {
        background: linear-gradient( 90deg, transparent, var(--dark-gold-deep), var(--dark-gold-light), var(--dark-gold), transparent ) !important;
    }

    html[data-theme="dark"] .topbar::after {
        background: linear-gradient( 115deg, transparent 0%, rgba(245, 216, 139, 0.10) 34%, transparent 58% ) !important;
    }

    html[data-theme="dark"] .site-nav a {
        color: var(--dark-muted-cool) !important;
        border-color: transparent !important;
        background: transparent !important;
    }

        html[data-theme="dark"] .site-nav a::before {
            background: radial-gradient(circle at 18% 0%, rgba(216, 170, 79, 0.17), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(216, 170, 79, 0.045)) !important;
        }

        html[data-theme="dark"] .site-nav a:hover {
            color: var(--dark-text) !important;
            border-color: rgba(216, 170, 79, 0.27) !important;
            background: radial-gradient(circle at 18% 0%, rgba(216, 170, 79, 0.16), transparent 42%), linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(216, 170, 79, 0.05)) !important;
            box-shadow: 0 17px 34px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(216, 170, 79, 0.07), var(--dark-inset) !important;
        }

        html[data-theme="dark"] .site-nav a.active {
            color: #0b0c0f !important;
            border-color: rgba(245, 216, 139, 0.62) !important;
            background: linear-gradient( 135deg, var(--dark-gold-pale), var(--dark-gold-light) 30%, var(--dark-gold) 65%, var(--dark-gold-deep) ) !important;
            box-shadow: 0 18px 38px rgba(216, 170, 79, 0.20), 0 0 0 4px rgba(216, 170, 79, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
        }

    html[data-theme="dark"] .site-nav .nav-icon {
        background: linear-gradient( 135deg, var(--dark-gold-pale), var(--dark-gold-light) 28%, var(--dark-gold) 62%, var(--dark-gold-deep) ) !important;
        box-shadow: 0 9px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    }

        html[data-theme="dark"] .site-nav .nav-icon svg {
            fill: #111217 !important;
        }

    html[data-theme="dark"] .site-nav a.active .nav-icon {
        background: linear-gradient(145deg, #12141a, #241b13) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

        html[data-theme="dark"] .site-nav a.active .nav-icon svg {
            fill: var(--dark-gold-light) !important;
        }

    /* =========================================================
   04. LANGUAGE AND THEME SWITCHES
========================================================= */

    html[data-theme="dark"] .language-switch,
    html[data-theme="dark"] .premium-theme-track {
        border-color: rgba(216, 170, 79, 0.28) !important;
        background: linear-gradient(145deg, rgba(14, 16, 21, 0.98), rgba(31, 25, 19, 0.94)) !important;
        box-shadow: 0 12px 27px rgba(0, 0, 0, 0.31), inset 6px 6px 12px rgba(0, 0, 0, 0.22), inset -6px -6px 14px rgba(255, 255, 255, 0.028) !important;
    }

        html[data-theme="dark"] .language-switch::before,
        html[data-theme="dark"] .premium-theme-thumb {
            background: linear-gradient( 135deg, var(--dark-gold-pale) 0%, var(--dark-gold-light) 27%, var(--dark-gold) 61%, var(--dark-gold-deep) 100% ) !important;
            box-shadow: 0 10px 21px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
        }

        html[data-theme="dark"] .language-switch button {
            color: var(--dark-muted-cool) !important;
        }

            html[data-theme="dark"] .language-switch button.active {
                color: #0b0c0f !important;
            }

    html[data-theme="dark"] .premium-theme-icon {
        color: var(--dark-gold-light) !important;
    }

    /* The old cleanup removed the dark switch position. Restore it centrally. */
    html[data-theme="dark"] .premium-theme-thumb,
    .premium-theme-toggle.is-dark .premium-theme-thumb {
        transform: translateX(42px) !important;
    }

    html[data-theme="dark"] .premium-theme-thumb-sun,
    .premium-theme-toggle.is-dark .premium-theme-thumb-sun {
        opacity: 0 !important;
        transform: scale(0.62) rotate(-28deg) !important;
    }

    html[data-theme="dark"] .premium-theme-thumb-moon,
    .premium-theme-toggle.is-dark .premium-theme-thumb-moon {
        opacity: 1 !important;
        transform: scale(1) rotate(0deg) !important;
    }

    html[data-theme="dark"] .premium-theme-sun,
    .premium-theme-toggle.is-dark .premium-theme-sun {
        opacity: 0.62 !important;
        transform: scale(1) !important;
    }

    html[data-theme="dark"] .premium-theme-moon,
    .premium-theme-toggle.is-dark .premium-theme-moon {
        opacity: 0 !important;
        transform: scale(0.78) !important;
    }

    html[data-theme="dark"] .premium-theme-toggle:active .premium-theme-thumb,
    .premium-theme-toggle.is-dark:active .premium-theme-thumb {
        transform: translateX(42px) scale(0.94) !important;
    }

    /* =========================================================
   05. COMPANY MARQUEE
========================================================= */

    html[data-theme="dark"] .company-marquee-card {
        border-color: rgba(216, 170, 79, 0.23) !important;
        background: radial-gradient(circle at 7% 15%, rgba(216, 170, 79, 0.12), transparent 35%), linear-gradient(145deg, rgb(99 94 83 / 97%), rgb(89 75 62 / 93%)) !important;
        box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    }

    html[data-theme="dark"] .company-marquee-header {
        border-right-color: rgba(216, 170, 79, 0.17) !important;
        background: linear-gradient(90deg, rgb(83 77 63 / 96%), rgb(76 71 59), #474336) !important;
    }

        html[data-theme="dark"] .company-marquee-header span {
            color: var(--dark-gold-light) !important;
        }

        html[data-theme="dark"] .company-marquee-header strong {
            color: var(--dark-text) !important;
        }

    html[data-theme="dark"] .company-marquee-mask::before {
        background: linear-gradient(90deg, rgba(20, 20, 23, 0.99), transparent) !important;
    }

    html[data-theme="dark"] .company-marquee-mask::after {
        background: linear-gradient(270deg, rgba(24, 21, 18, 0.99), transparent) !important;
    }

    html[data-theme="dark"] .company-logo-item {
        border-color: rgb(216 170 79 / 38%) !important;
        background: linear-gradient(145deg, rgb(37 35 29 / 55%), rgb(53 46 32 / 86%)) !important;
        box-shadow: 0 0 10px rgb(0 0 0 / 72%), var(--dark-inset) !important;
    }

        html[data-theme="dark"] .company-logo-item:hover {
            border-color: rgba(245, 216, 139, 0.40) !important;
            background: linear-gradient(145deg, rgba(245, 216, 139, 0.11), rgba(255, 255, 255, 0.055)) !important;
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(216, 170, 79, 0.07), var(--dark-inset) !important;
        }

        html[data-theme="dark"] .company-logo-item strong {
            color: var(--dark-text) !important;
        }

        /* Transparent/black logos remain readable on the dark track. */
        html[data-theme="dark"] .company-logo-item img {
            border-radius: 12px;
        }

    /* =========================================================
   06. PROFILE SIDEBAR
========================================================= */

    html[data-theme="dark"] .profile-card {
        border-color: rgba(216, 170, 79, 0.23) !important;
        background: radial-gradient(circle at 12% 4%, rgba(216, 170, 79, 0.13), transparent 29%), radial-gradient(circle at 95% 8%, rgba(191, 121, 87, 0.09), transparent 25%), linear-gradient(180deg, rgba(23, 25, 30, 0.98), rgba(30, 25, 20, 0.96)) !important;
        box-shadow: var(--dark-shadow), var(--dark-inset) !important;
    }

    html[data-theme="dark"] .profile-photo {
        box-shadow: 0 29px 58px rgba(0, 0, 0, 0.44), 0 0 0 8px rgba(216, 170, 79, 0.095) !important;
    }

        html[data-theme="dark"] .profile-photo::after {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.19), inset 0 -80px 90px rgba(0, 0, 0, 0.16) !important;
        }

    html[data-theme="dark"] .profile-name-block h1 {
        color: var(--dark-text) !important;
    }

    html[data-theme="dark"] .profile-name-block p {
        color: var(--dark-muted-cool) !important;
    }

    html[data-theme="dark"] .profile-name-block::after {
        background: linear-gradient(90deg, var(--dark-gold), var(--dark-gold-light)) !important;
    }

    html[data-theme="dark"] .profile-contact a {
        color: var(--dark-text) !important;
        border-color: rgba(216, 170, 79, 0.17) !important;
        background: radial-gradient(circle at 88% 12%, rgba(216, 170, 79, 0.075), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(216, 170, 79, 0.045)) !important;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25), var(--dark-inset) !important;
    }

        html[data-theme="dark"] .profile-contact a:hover {
            border-color: rgba(245, 216, 139, 0.58) !important;
            background: radial-gradient(circle at 88% 12%, rgba(245, 216, 139, 0.15), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(216, 170, 79, 0.075)) !important;
            box-shadow: 0 26px 48px rgba(0, 0, 0, 0.40), 0 0 0 4px rgba(216, 170, 79, 0.10), var(--dark-inset) !important;
        }

    html[data-theme="dark"] .profile-contact span:not(.profile-contact-arrow) {
        color: var(--dark-gold-light) !important;
    }

    html[data-theme="dark"] .profile-contact strong {
        color: var(--dark-text-soft) !important;
    }

    html[data-theme="dark"] .profile-contact a:hover strong {
        color: var(--dark-text) !important;
    }

    html[data-theme="dark"] .profile-contact a::after {
        background: linear-gradient(90deg, transparent, rgba(245, 216, 139, 0.20), transparent) !important;
    }

    html[data-theme="dark"] .profile-contact-arrow {
        border-color: rgba(245, 216, 139, 0.17) !important;
        background: rgba(216, 170, 79, 0.045) !important;
    }

        html[data-theme="dark"] .profile-contact-arrow svg,
        html[data-theme="dark"] .profile-contact a:hover .profile-contact-arrow svg {
            stroke: var(--dark-gold-light) !important;
        }

    html[data-theme="dark"] .profile-contact a:hover .profile-contact-arrow {
        border-color: rgba(245, 216, 139, 0.32) !important;
        background: rgba(216, 170, 79, 0.085) !important;
    }

    html[data-theme="dark"] .secondary-profile-btn,
    html[data-theme="dark"] .hero-secondary-btn {
        color: var(--dark-gold-pale) !important;
        border-color: rgba(216, 170, 79, 0.30) !important;
        background: linear-gradient(145deg, rgba(18, 20, 25, 0.94), rgba(31, 25, 19, 0.90)) !important;
        box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    }

        html[data-theme="dark"] .secondary-profile-btn:hover,
        html[data-theme="dark"] .hero-secondary-btn:hover {
            border-color: rgba(245, 216, 139, 0.62) !important;
            box-shadow: 0 25px 46px rgba(0, 0, 0, 0.40), 0 0 0 4px rgba(216, 170, 79, 0.10), var(--dark-inset) !important;
        }

    /* =========================================================
   07. HOME — HERO, METRICS, GOAL
========================================================= */

    html[data-theme="dark"] .modern-home-hero {
        --hero-ink: var(--dark-text) !important;
        --hero-muted: var(--dark-muted) !important;
        border-color: rgba(216, 170, 79, 0.20) !important;
        background: radial-gradient(circle at 92% 8%, rgba(216, 170, 79, 0.13), transparent 30%), radial-gradient(circle at 8% 90%, rgba(191, 121, 87, 0.08), transparent 32%), linear-gradient(135deg, rgba(22, 24, 29, 0.98), rgba(31, 26, 21, 0.97)) !important;
        box-shadow: var(--dark-shadow), var(--dark-inset) !important;
    }

    html[data-theme="dark"] .modern-hero-eyebrow,
    html[data-theme="dark"] .modern-hero-metric,
    html[data-theme="dark"] .modern-hero-btn--secondary {
        border-color: rgb(216 170 79 / 42%) !important;
        background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
        box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    }

    html[data-theme="dark"] .modern-hero-eyebrow {
        color: var(--dark-gold-light) !important;
    }

    html[data-theme="dark"] .modern-hero-lead {
        color: var(--dark-text-soft) !important;
    }

    html[data-theme="dark"] .modern-hero-description,
    html[data-theme="dark"] .modern-hero-metric span {
        color: var(--dark-muted-cool) !important;
    }

    html[data-theme="dark"] .modern-hero-metric strong {
        color: var(--dark-text) !important;
    }

    html[data-theme="dark"] .modern-goal-panel {
        border-color: rgba(216, 170, 79, 0.23) !important;
        background: radial-gradient(circle at 88% 6%, rgba(216, 170, 79, 0.13), transparent 30%), linear-gradient(145deg, #33281e 0%, #2a211a 52%, #211b16 100%) !important;
        box-shadow: var(--dark-shadow), var(--dark-inset) !important;
    }

        html[data-theme="dark"] .modern-goal-panel > h2,
        html[data-theme="dark"] .modern-goal-outcome strong {
            color: var(--dark-text) !important;
        }

        html[data-theme="dark"] .modern-goal-panel > p,
        html[data-theme="dark"] .modern-goal-outcome p {
            color: var(--dark-muted) !important;
        }

    html[data-theme="dark"] .modern-goal-label,
    html[data-theme="dark"] .modern-goal-symbol,
    html[data-theme="dark"] .modern-goal-outcome,
    html[data-theme="dark"] .modern-goal-footer span {
        border-color: rgb(216 170 79 / 30%) !important;
        background: linear-gradient(145deg, rgb(255 244 219 / 26%), rgb(167 147 107 / 33%)) !important;
        box-shadow: var(--dark-inset) !important;
    }

    html[data-theme="dark"] .modern-goal-label,
    html[data-theme="dark"] .modern-goal-symbol,
    html[data-theme="dark"] .modern-goal-outcome,
    html[data-theme="dark"] .modern-goal-footer span {
        border-color: rgb(216 170 79 / 30%) !important;
        background: linear-gradient( 145deg, rgb(255 244 219 / 26%), rgb(167 147 107 / 33%) ) !important;
        box-shadow: var(--dark-inset) !important;
        transition: transform 0.38s cubic-bezier(.22, 1, .36, 1), border-color 0.32s ease, background 0.36s ease, box-shadow 0.38s ease, color 0.32s ease !important;
    }


        /* =========================================================
   DARK THEME — MODERN GOAL ITEMS HOVER
========================================================= */

        html[data-theme="dark"] .modern-goal-label:hover,
        html[data-theme="dark"] .modern-goal-symbol:hover,
        html[data-theme="dark"] .modern-goal-outcome:hover,
        html[data-theme="dark"] .modern-goal-footer span:hover {
            transform: translate3d(0, -3px, 0) scale(1.015) !important;
            border-color: rgb(239 196 105 / 58%) !important;
            background: linear-gradient( 145deg, rgb(255 245 218 / 34%) 0%, rgb(212 170 88 / 29%) 52%, rgb(145 119 78 / 38%) 100% ) !important;
            box-shadow: 0 13px 25px rgb(0 0 0 / 25%), 0 0 0 1px rgb(233 186 91 / 8%), inset 0 1px 0 rgb(255 255 255 / 15%) !important;
        }



    html[data-theme="dark"] .modern-goal-label,
    html[data-theme="dark"] .modern-goal-symbol,
    html[data-theme="dark"] .modern-goal-footer span {
        color: var(--dark-gold-light) !important;
    }

    html[data-theme="dark"] .modern-goal-outcome__number {
        color: var(--dark-gold-light) !important;
        border-color: rgba(245, 216, 139, 0.56) !important;
        background: rgba(216, 170, 79, 0.04) !important;
    }

    html[data-theme="dark"] .animated-stat-card {
        border-color: rgb(141 129 105) !important;
        background: linear-gradient(145deg, rgb(155 142 114 / 22%), rgb(137 127 107 / 68%)) !important;
        box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    }

    html[data-theme="dark"] .animated-stat-front strong {
        color: var(--dark-text) !important;
    }

    html[data-theme="dark"] .animated-stat-front span {
        color: var(--dark-muted) !important;
    }

    html[data-theme="dark"] .animated-stat-reveal {
        background: linear-gradient(145deg, #31271f, #1b1816) !important;
    }

    html[data-theme="dark"] .animated-stat-frame rect {
        stroke: #c9a66f !important;
    }

    html[data-theme="dark"] .animated-stat-list li {
        color: var(--dark-text-soft) !important;
    }

    /* =========================================================
   08. HOME — CAPABILITIES, PROJECTS, TOOLS
========================================================= */

    html[data-theme="dark"] :is( .capabilities-premium-shell, .projects-premium-shell, .tools-premium-shell ) {
        border-color: rgba(216, 170, 79, 0.20) !important;
        background: radial-gradient(circle at 92% 8%, rgba(216, 170, 79, 0.13), transparent 30%), radial-gradient(circle at 8% 90%, rgba(191, 121, 87, 0.08), transparent 32%), linear-gradient(135deg, rgba(22, 24, 29, 0.98), rgba(31, 26, 21, 0.97)) !important;
        box-shadow: var(--dark-shadow), var(--dark-inset) !important;
    }

.modern-premium-shell::before {
    background: radial-gradient(circle, rgba(241, 215, 149, 0.44) 0%, rgba(200, 154, 66, 0.18) 45%, transparent 72%) !important;
}

html[data-theme="dark"] :is( .capabilities-premium-bg, .projects-premium-bg, .tools-premium-bg ) {
    background: radial-gradient(circle at 12% 14%, rgba(228, 200, 126, 0.10), transparent 26%), radial-gradient(circle at 86% 20%, rgba(214, 176, 83, 0.08), transparent 28%), radial-gradient(circle at 50% 100%, rgba(191, 121, 87, 0.06), transparent 38%) !important;
    position:relative;

}

html[data-theme="dark"] :is( .capabilities-premium-eyebrow, .projects-premium-eyebrow, .tools-premium-eyebrow ) {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] :is( .capabilities-premium-intro, .projects-premium-intro, .tools-premium-intro ) {
    color: var(--dark-muted-cool) !important;
}

html[data-theme="dark"] :is( .capability-premium-card, .project-premium-item, .tool-category-card ) {
    border-color: rgba(216, 170, 79, 0.16) !important;
    background: linear-gradient(145deg, rgb(255 244 219 / 26%), rgb(167 147 107 / 33%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

    html[data-theme="dark"] :is( .capability-premium-card, .project-premium-item, .tool-category-card ):hover {
        border-color: rgba(245, 216, 139, 0.32) !important;
        background: linear-gradient(145deg, rgb(129 122 106 / 60%), rgb(161 150 129 / 56%)) !important;
        box-shadow: 0 24px 44px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(216, 174, 97, 0.07), var(--dark-inset) !important;
    }

html[data-theme="dark"] :is( .capability-premium-card__title, .project-premium-item__title, .tool-category-card__meta strong ) {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is( .capability-premium-card__desc, .project-premium-item__desc ) {
    color: var(--dark-muted-cool) !important;
}

html[data-theme="dark"] :is( .capability-premium-card__tags, .project-premium-item__meta ) {
    border-color: rgba(216, 170, 79, 0.13) !important;
}

html[data-theme="dark"] :is( .capability-premium-card__tags span, .project-premium-item__meta span, .tool-category-card__tools span, .tool-category-card__badge ) {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 17%), rgb(216 170 79 / 25%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}




html[data-theme="dark"] .project-premium-item__arrow {
    color: var(--dark-gold-light) !important;
    border-color: rgba(216, 170, 79, 0.18) !important;
    background: rgb(167 151 120 / 53%) !important;
}

/* =========================================================
   09. WHAT I DO
========================================================= */

html[data-theme="dark"] .whatido-hero,
html[data-theme="dark"] .whatido-services-shell,
html[data-theme="dark"] .whatido-closing {
    border-color: rgba(216, 170, 79, 0.19) !important;
    background: radial-gradient(circle at 90% 7%, rgba(216, 170, 79, 0.09), transparent 30%), linear-gradient(145deg, rgba(20, 22, 27, 0.98), rgba(29, 25, 21, 0.97)) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .whatido-hero__background,
html[data-theme="dark"] .whatido-services-shell__background {
    opacity: 0.42 !important;
    filter: saturate(0.78) brightness(0.56) !important;
}

html[data-theme="dark"] .whatido-eyebrow,
html[data-theme="dark"] .whatido-hero__pill-row span {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] .whatido-hero__lead,
html[data-theme="dark"] .whatido-services-header > p,
html[data-theme="dark"] .whatido-closing__content p {
    color: var(--dark-muted-cool) !important;
}

html[data-theme="dark"] .whatido-capability-panel {
    border-color: rgba(216, 170, 79, 0.22) !important;
    background: radial-gradient(circle at 87% 6%, rgba(226, 189, 105, 0.13), transparent 30%), linear-gradient(145deg, #392d23 0%, #30261e 52%, #251e18 100%) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .whatido-capability-panel__badge,
html[data-theme="dark"] .whatido-capability-panel__icon {
    color: var(--dark-gold-light) !important;
    border-color: rgba(245, 216, 139, 0.20) !important;
    background: linear-gradient(145deg, rgba(255, 244, 219, 0.10), rgba(216, 170, 79, 0.065)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] .whatido-capability-panel__content h2 {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .whatido-capability-panel__content p {
    color: var(--dark-text-soft) !important;
}

html[data-theme="dark"] .whatido-capability-item,
html[data-theme="dark"] .whatido-service-card {
    border-color: rgb(216 170 79 / 30%) !important;
    background: linear-gradient( 145deg, rgb(255 244 219 / 26%), rgb(167 147 107 / 33%) ) !important;
    box-shadow: var(--dark-inset) !important;
}

    html[data-theme="dark"] .whatido-capability-item:hover,
    html[data-theme="dark"] .whatido-service-card:hover {
        transform: translate3d(0, -3px, 0) scale(1.015) !important;
        border-color: rgb(239 196 105 / 58%) !important;
        background: linear-gradient( 145deg, rgb(255 245 218 / 34%) 0%, rgb(212 170 88 / 29%) 52%, rgb(145 119 78 / 38%) 100% ) !important;
        box-shadow: 0 13px 25px rgb(0 0 0 / 25%), 0 0 0 1px rgb(233 186 91 / 8%), inset 0 1px 0 rgb(255 255 255 / 15%) !important;
    }

html[data-theme="dark"] .whatido-capability-item__number,
html[data-theme="dark"] .whatido-service-card__number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
    height: 50px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    background: linear-gradient( 135deg, #f8dd97 0%, #d7ab4e 52%, #b9802e 100% ) !important;
    color: #0b2344 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 12px 22px rgba(184, 134, 45, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
    transition: transform 0.52s cubic-bezier(.22, 1, .36, 1), box-shadow 0.48s ease !important;
}

html[data-theme="dark"] .whatido-capability-item__text strong,
html[data-theme="dark"] .whatido-service-card__heading h2,
html[data-theme="dark"] .whatido-closing__content h2 {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .whatido-capability-item__text span,
html[data-theme="dark"] .whatido-service-card__summary,
html[data-theme="dark"] .whatido-service-card__proof span {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .whatido-service-card__divider,
html[data-theme="dark"] .whatido-service-card__list {
    border-color: rgba(216, 170, 79, 0.13) !important;
}

    html[data-theme="dark"] .whatido-service-card__list li {
        color: var(--dark-text-soft) !important;
    }

html[data-theme="dark"] .whatido-service-card__proof,
html[data-theme="dark"] .whatido-closing__mark {
    border-color: rgb(216 170 79 / 52%) !important;
    background: linear-gradient(135deg, rgb(141 131 107 / 45%), rgb(145 134 114 / 77%)) !important;
}

    html[data-theme="dark"] .whatido-closing__mark strong,
    html[data-theme="dark"] .whatido-service-card__proof strong {
        color: var(--dark-gold-light) !important;
    }

/* =========================================================
   10. PORTFOLIO
========================================================= */

html[data-theme="dark"] .portfolio-page {
    --portfolio-ink: var(--dark-text);
    --portfolio-muted: var(--dark-muted);
    --portfolio-card: #1c1a18;
    --portfolio-card-soft: #26211c;
    --portfolio-line: var(--dark-line);
}

html[data-theme="dark"] .portfolio-hero.portfolio-hero--minimal,
html[data-theme="dark"] .portfolio-catalog,
html[data-theme="dark"] .portfolio-featured {
    border-color: rgba(216, 170, 79, 0.18) !important;
    background: radial-gradient(circle at 92% 6%, rgba(216, 170, 79, 0.10), transparent 28%), linear-gradient(145deg, rgba(21, 23, 28, 0.98), rgba(30, 25, 21, 0.97)) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-minimal-hero__title {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .portfolio-minimal-hero__description,
html[data-theme="dark"] .portfolio-section-header > p {
    color: var(--dark-muted-cool) !important;
}

html[data-theme="dark"] .portfolio-eyebrow,
html[data-theme="dark"] .portfolio-minimal-hero__tags span {
    color : var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-scope-panel {
    border-color: rgba(216, 170, 79, 0.20) !important;
    background: radial-gradient(circle at 88% 5%, rgba(225, 184, 106, 0.12), transparent 30%), linear-gradient(145deg, #382d24, #2a221c) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-scope-panel__header span,
html[data-theme="dark"] .portfolio-scope-panel__number {
    color: var(--dark-gold-light) !important;
}

html[data-theme="dark"] .portfolio-scope-panel__header strong,
html[data-theme="dark"] .portfolio-scope-panel__item strong {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .portfolio-scope-panel__item {
    border-color: rgb(216 170 79 / 30%) !important;
    background: linear-gradient(145deg, rgb(255 244 219 / 26%), rgb(167 147 107 / 33%)) !important;
    box-shadow: var(--dark-inset) !important;
}

    html[data-theme="dark"] .portfolio-scope-panel__item > div > span {
        color: var(--dark-muted) !important;
    }

html[data-theme="dark"] .portfolio-scope-panel__icon {
    color: var(--dark-gold-light) !important;
    border-color: rgba(245, 216, 139, 0.20) !important;
    background: linear-gradient(145deg, rgba(255, 244, 219, 0.10), rgba(216, 170, 79, 0.065)) !important;
}

html[data-theme="dark"] .portfolio-metric.portfolio-metric--compact {
    border-color: rgb(141 129 105) !important;
    background: linear-gradient(145deg, rgb(155 142 114 / 22%), rgb(137 127 107 / 68%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-metric__value {
    color: var(--dark-gold) !important;
}

html[data-theme="dark"] .portfolio-metric__content strong {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .portfolio-metric__content p {
    color: var(--dark-muted-cool) !important;
}

html[data-theme="dark"] .portfolio-filters {
    border-color: rgba(216, 170, 79, 0.14) !important;
    background: rgba(173, 158, 125, 0.42) !important;
    box-shadow: var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-filter {
    color: var(--dark-muted) !important;
}

    html[data-theme="dark"] .portfolio-filter small {
        color: var(--dark-muted) !important;
        background: rgba(59, 52, 39, 0.99) !important;
    }

    html[data-theme="dark"] .portfolio-filter:hover {
        color: var(--dark-text) !important;
        background: #93816a !important;
    }

html[data-theme="dark"] .portfolio-filter--active {
    color: #0b0c0f !important;
    background: linear-gradient(145deg, var(--dark-gold-pale), var(--dark-gold-light) 45%, var(--dark-gold)) !important;
    box-shadow: 0 10px 22px rgba(216, 170, 79, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

    html[data-theme="dark"] .portfolio-filter--active small {
        color: #0b0c0f !important;
        background: rgba(11, 12, 15, 0.10) !important;
    }

html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .portfolio-featured-card {
    border-color: rgb(141 129 105) !important;
    background: linear-gradient(145deg, rgb(155 142 114 / 22%), rgb(137 127 107 / 68%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

    html[data-theme="dark"] .portfolio-card:hover,
    html[data-theme="dark"] .portfolio-featured-card:hover {
        border-color: rgba(245, 216, 139, 0.29) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(216, 170, 79, 0.06), var(--dark-inset) !important;
    }

    html[data-theme="dark"] .portfolio-card h3,
    html[data-theme="dark"] .portfolio-featured-card__content h3 {
        color: #d3a760 !important;
    }

html[data-theme="dark"] .portfolio-card__body > p,
html[data-theme="dark"] .portfolio-featured-card__content > p,
html[data-theme="dark"] .portfolio-card__meta small {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .portfolio-card__meta > span,
html[data-theme="dark"] .portfolio-featured-card__type {
    color: var(--dark-gold-light) !important;
}

html[data-theme="dark"] .portfolio-card__placeholder,
html[data-theme="dark"] .portfolio-featured-card__visual {
    background: radial-gradient(circle at 78% 17%, rgba(245, 216, 139, 0.15), transparent 29%), linear-gradient(145deg, #4a3a2b, #211d19) !important;
}

html[data-theme="dark"] .portfolio-card__tags span,
html[data-theme="dark"] .portfolio-featured-card__tags span {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 17%), rgb(216 170 79 / 25%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-featured-card__number {
    color: var(--dark-gold-light) !important;
    border-color: rgba(245, 216, 139, 0.44) !important;
}

html[data-theme="dark"] .portfolio-featured-card__link {
    color: #0b0c0f !important;
    border-color: rgba(245, 216, 139, 0.40) !important;
    background: linear-gradient(145deg, var(--dark-gold-pale), var(--dark-gold-light) 48%, var(--dark-gold)) !important;
    box-shadow: 0 10px 22px rgba(216, 170, 79, 0.15) !important;
}

html[data-theme="dark"] .portfolio-featured-card__link--disabled {
    color: var(--dark-text-soft) !important;
    border-color: rgba(216, 170, 79, 0.15) !important;
    background: rgba(216, 170, 79, 0.055) !important;
}

html[data-theme="dark"] .portfolio-closing {
    border-color: rgba(216, 170, 79, 0.21) !important;
    background: radial-gradient(circle at 90% 10%, rgba(245, 217, 143, 0.12), transparent 31%), linear-gradient(145deg, #3a2e23, #251f1a) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .portfolio-closing__content h2 {
    max-width: 760px;
    margin: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(44deg, #cda86a 0%, #f5d88b 22%, #d8aa4f 48%, #c58932 72%, #f5d88b 100%);
    background-size: 280% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: portfolioPageGoldFlow 4.8s ease-in-out infinite alternate;
    font-size: clamp(31px, 3.5vw, 48px);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -1.8px;
}

html[data-theme="dark"] .portfolio-closing__content p,
html[data-theme="dark"] .portfolio-closing__content > span {
    color: var(--dark-text-soft) !important;
}

html[data-theme="dark"] .portfolio-closing__mark {
    border-color: rgb(141 129 105) !important;
    background: linear-gradient(145deg, rgb(155 142 114 / 22%), rgb(137 127 107 / 68%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

    html[data-theme="dark"] .portfolio-closing__mark strong {
        color: var(--dark-gold-light) !important;
    }

    html[data-theme="dark"] .portfolio-closing__mark span {
        color: var(--dark-muted) !important;
    }

html[data-theme="dark"] .portfolio-lightbox {
    background: rgba(5, 6, 8, 0.86) !important;
}

html[data-theme="dark"] .portfolio-lightbox__dialog {
    color: var(--dark-text) !important;
    border-color: rgba(216, 170, 79, 0.18) !important;
    background: linear-gradient(145deg, #1d1d20, #241e19) !important;
    box-shadow: 0 36px 92px rgba(0, 0, 0, 0.62) !important;
}

html[data-theme="dark"] .portfolio-lightbox__header {
    border-color: rgba(216, 170, 79, 0.13) !important;
}

    html[data-theme="dark"] .portfolio-lightbox__header h3 {
        color: var(--dark-text) !important;
    }

    html[data-theme="dark"] .portfolio-lightbox__header span {
        color: var(--dark-gold-light) !important;
    }

html[data-theme="dark"] .portfolio-lightbox__close {
    color: var(--dark-gold-light) !important;
    border-color: rgba(216, 170, 79, 0.16) !important;
    background: rgba(216, 170, 79, 0.075) !important;
}

html[data-theme="dark"] .portfolio-lightbox__footer p {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .portfolio-lightbox__footer > div span {
    color: var(--dark-muted) !important;
    border-color: rgba(216, 170, 79, 0.12) !important;
    background: rgba(255, 237, 197, 0.045) !important;
}

/* =========================================================
   11. CONTACT
========================================================= */

html[data-theme="dark"] .contact-simple-hero {
    border-color: rgba(216, 170, 79, 0.18) !important;
    background: radial-gradient(circle at 91% 8%, rgba(216, 170, 79, 0.10), transparent 28%), radial-gradient(circle at 72% 88%, rgba(191, 121, 87, 0.055), transparent 25%), linear-gradient(145deg, rgba(21, 23, 28, 0.98), rgba(30, 25, 21, 0.97)) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .contact-simple-hero__title {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .contact-simple-hero__description {
    color: var(--dark-muted-cool) !important;
}

html[data-theme="dark"] .contact-simple-hero__eyebrow,
html[data-theme="dark"] .contact-simple-hero__tags span {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 42%) !important;
    background: linear-gradient(145deg, rgb(203 171 81 / 45%), rgb(216 170 79 / 31%)) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
}

html[data-theme="dark"] .contact-box {
    border-color: rgba(216, 170, 79, 0.17) !important;
    background: radial-gradient(circle at 91% 8%, rgba(216, 170, 79, 0.075), transparent 28%), linear-gradient(145deg, rgba(22, 24, 29, 0.98), rgba(30, 25, 21, 0.96)) !important;
    box-shadow: var(--dark-shadow), var(--dark-inset) !important;
}

html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea {
    color: var(--dark-text) !important;
    caret-color: var(--dark-gold-light);
    border-color: rgba(216, 170, 79, 0.16) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(216, 170, 79, 0.035)) !important;
    box-shadow: var(--dark-inset) !important;
}

    html[data-theme="dark"] .contact-form input::placeholder,
    html[data-theme="dark"] .contact-form textarea::placeholder {
        color: #8f8790 !important;
        opacity: 1;
    }

    html[data-theme="dark"] .contact-form input:focus,
    html[data-theme="dark"] .contact-form select:focus,
    html[data-theme="dark"] .contact-form textarea:focus {
        border-color: rgba(245, 216, 139, 0.50) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.067), rgba(216, 170, 79, 0.052)) !important;
        box-shadow: 0 0 0 4px rgba(216, 170, 79, 0.085), var(--dark-inset) !important;
    }

html[data-theme="dark"] .contact-form option {
    color: var(--dark-text);
    background: #1c1b1c;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark-text) !important;
    box-shadow: 0 0 0 1000px #1d1b19 inset !important;
    transition: background-color 9999s ease-out 0s;
}

/* =========================================================
   12. ACCESSIBILITY AND REDUCED MOTION
========================================================= */

html[data-theme="dark"] :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid rgba(245, 216, 139, 0.78);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] *,
    html[data-theme="dark"] *::before,
    html[data-theme="dark"] *::after {
        scroll-behavior: auto !important;
    }
}





/* =========================================================
   DARK THEME — GOLDEN GLOW FOR MAIN PAGE SECTIONS ONLY
========================================================= */

/* =========================================================
   DARK THEME — MAIN SECTION CLIPPING FIX
========================================================= */

html[data-theme="dark"] :is( .modern-home-hero, .capabilities-premium-shell, .projects-premium-shell, .tools-premium-shell, .whatido-hero, .whatido-services-shell, .whatido-closing, .portfolio-hero, .portfolio-catalog, .portfolio-featured, .portfolio-closing, .contact-simple-hero, .contact-section, .contact-form-section, .contact-info-section, .contact-box ) {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}


/* نور طلایی فقط روی Sectionهای اصلی */
html[data-theme="dark"] :is( .modern-home-hero, .capabilities-premium-shell, .contact-box, .projects-premium-shell, .tools-premium-shell, .whatido-hero, .whatido-services-shell, .whatido-closing, .portfolio-hero, .portfolio-catalog, .portfolio-featured, .portfolio-closing, .contact-simple-hero )::before {
    content: "" !important;
    position: absolute !important;
    top: -210px !important;
    right: -150px !important;
    width: 520px !important;
    height: 520px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(241, 215, 149, 0.24) 0%, rgba(200, 154, 66, 0.12) 45%, transparent 72%) !important;
    pointer-events: none !important;
}



html[data-theme="dark"] :is( .modern-home-hero, .capabilities-premium-shell, .projects-premium-section, .tools-premium-section, .whatido-hero, .whatido-services-shell, .whatido-closing, .portfolio-hero, .portfolio-catalog, .portfolio-featured, .portfolio-closing, .contact-simple-hero, .contact-section, .contact-form-section, .contact-info-section ) > :not([class*="background"]):not([class*="glow"]):not([class*="shape"]) {
    position: relative;
    z-index: 1;
}


/* =========================================================
   DARK THEME — PROJECT ARROW HOVER
========================================================= */

html[data-theme="dark"]
.project-premium-item:hover
.project-premium-item__arrow {
    transform: translateX(3px) translateY(-1px) scale(1.04) !important;
    color: #f6d995 !important;
    border-color: rgb(231 188 96 / 58%) !important;
    background: linear-gradient( 135deg, rgb(226 184 93 / 28%) 0%, rgb(175 137 67 / 22%) 50%, rgb(255 239 202 / 14%) 100% ) !important;
    box-shadow: 0 14px 24px rgb(0 0 0 / 30%), 0 0 0 1px rgb(230 183 88 / 9%), inset 0 1px 0 rgb(255 255 255 / 14%) !important;
}


html[data-theme="dark"]
.project-premium-item__arrow {
    color: var(--dark-gold-light) !important;
    border-color: rgb(216 170 79 / 34%) !important;
    background: linear-gradient( 135deg, rgb(216 170 79 / 17%), rgb(255 241 208 / 9%) ) !important;
    box-shadow: var(--dark-shadow-soft), var(--dark-inset) !important;
    transition: transform 0.38s cubic-bezier(.22, 1, .36, 1), color 0.30s ease, border-color 0.32s ease, background 0.36s ease, box-shadow 0.38s ease !important;
}


    html[data-theme="dark"]
    .project-premium-item__arrow svg {
        fill: none !important;
        stroke: currentColor !important;
        transition: stroke 0.30s ease, transform 0.38s cubic-bezier(.22, 1, .36, 1) !important;
    }

html[data-theme="dark"]
.project-premium-item:hover
.project-premium-item__arrow svg {
    stroke: #f8dda1 !important;
    transform: scale(1.05) !important;
}











/* =========================================================
   MOBILE PROFILE — COLLAPSIBLE TOP PANEL
========================================================= */

/*
   Hidden on desktop.
   Desktop profile appearance remains unchanged.
*/

.profile-mobile-collapsed-bar,
.profile-mobile-collapse-button {
    display: none !important;
}

.profile-mobile-content,
.profile-mobile-content__inner {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   MOBILE AND SMALL TABLET
========================================================= */

@media (max-width: 1100px) {

    /*
       Complete page order:
       1. Profile
       2. Header/navigation
       3. Page content
    */

    .portfolio-shell {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 100vh !important;
        gap: 16px !important;
        padding: 10px 10px 18px !important;
    }


    .profile-sidebar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        order: -10 !important;
        z-index: 100 !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }


    .main-area {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }


    /*
       Keep the normal navigation below the profile.
    */

    .topbar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
    }


    /* =====================================================
       PROFILE EXPANDED CONTENT
    ====================================================== */

    .profile-mobile-content {
        display: grid !important;
        grid-template-rows: 1fr !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: grid-template-rows 0.48s cubic-bezier(.22, 1, .36, 1), opacity 0.32s ease, visibility 0.32s ease !important;
    }


    .profile-mobile-content__inner {
        min-height: 0 !important;
        overflow: hidden !important;
    }


    .profile-sidebar .profile-card {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 18px 18px 22px !important;
        border-radius: 28px !important;
        overflow: visible !important;
    }


    /* =====================================================
       HIDE PROFILE BUTTON
    ====================================================== */

    .profile-mobile-collapse-button {
        appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 38px !important;
        margin: 0 0 16px auto !important;
        padding: 0 13px !important;
        border: 1px solid rgba(151, 108, 50, 0.22) !important;
        border-radius: 12px !important;
        background: linear-gradient( 145deg, rgba(255, 249, 234, 0.94), rgba(237, 220, 184, 0.91) ) !important;
        color: #71502b !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        box-shadow: 0 8px 17px rgba(76, 49, 22, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
        transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease !important;
    }


        .profile-mobile-collapse-button:hover {
            transform: translateY(-2px) !important;
            border-color: rgba(190, 139, 68, 0.38) !important;
            box-shadow: 0 12px 22px rgba(76, 49, 22, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
        }


        .profile-mobile-collapse-button svg {
            width: 15px !important;
            height: 15px !important;
            fill: none !important;
            stroke: currentColor !important;
            stroke-width: 1.8 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }


    /* =====================================================
       MOBILE PROFILE PHOTO
    ====================================================== */

    .profile-sidebar .profile-photo {
        width: min(100%, 310px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1.05 !important;
        margin: 0 auto 25px !important;
    }


    /* =====================================================
       COLLAPSED STATE
    ====================================================== */

    .profile-sidebar--mobile-collapsed {
        position: sticky !important;
        top: 8px !important;
        z-index: 150 !important;
    }


        .profile-sidebar--mobile-collapsed
        .profile-mobile-content {
            grid-template-rows: 0fr !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }


        /*
       The compact bar is only visible when collapsed.
    */

        .profile-sidebar--mobile-collapsed
        .profile-mobile-collapsed-bar {
            display: flex !important;
        }


    /* =====================================================
       COLLAPSED PROFILE BAR
    ====================================================== */

    .profile-mobile-collapsed-bar {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-height: 70px !important;
        padding: 9px 10px 9px 12px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(139, 98, 45, 0.18) !important;
        border-radius: 20px !important;
        background: radial-gradient( circle at 91% 5%, rgba(241, 210, 134, 0.24), transparent 35% ), linear-gradient( 145deg, rgba(255, 252, 244, 0.98), rgba(239, 228, 207, 0.96) ) !important;
        box-shadow: 0 16px 32px rgba(75, 49, 24, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
    }


        .profile-mobile-collapsed-bar::before {
            content: "" !important;
            position: absolute !important;
            top: -95px !important;
            right: -45px !important;
            z-index: -1 !important;
            width: 180px !important;
            height: 180px !important;
            border-radius: 50% !important;
            background: radial-gradient( circle, rgba(241, 215, 149, 0.42), rgba(200, 154, 66, 0.15) 46%, transparent 72% ) !important;
            pointer-events: none !important;
        }


    .profile-mobile-collapsed-bar__identity {
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        min-width: 0 !important;
    }


    .profile-mobile-collapsed-bar__photo {
        position: relative !important;
        overflow: hidden !important;
        flex: 0 0 auto !important;
        width: 49px !important;
        height: 49px !important;
        padding: 3px !important;
        border-radius: 15px !important;
        background: linear-gradient( 135deg, #f5d88b, #d8aa4f, #9f742b ) !important;
        box-shadow: 0 8px 17px rgba(88, 56, 23, 0.16) !important;
    }


        .profile-mobile-collapsed-bar__photo img {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 12px !important;
            object-fit: cover !important;
            object-position: center !important;
        }


    .profile-mobile-collapsed-bar__text {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        min-width: 0 !important;
    }


        .profile-mobile-collapsed-bar__text strong {
            overflow: hidden !important;
            color: #38291f !important;
            font-size: 13px !important;
            font-weight: 950 !important;
            line-height: 1.15 !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }


        .profile-mobile-collapsed-bar__text span {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            overflow: hidden !important;
            color: #806d57 !important;
            font-size: 8px !important;
            font-weight: 750 !important;
            line-height: 1.2 !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }


        .profile-mobile-collapsed-bar__text i {
            display: inline-block !important;
            flex: 0 0 auto !important;
            width: 7px !important;
            height: 7px !important;
            border-radius: 50% !important;
            background: #39a777 !important;
            box-shadow: 0 0 0 4px rgba(57, 167, 119, 0.12) !important;
        }


    /* =====================================================
       SHOW PROFILE BUTTON
    ====================================================== */

    .profile-mobile-expand-button {
        appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(175, 126, 56, 0.24) !important;
        border-radius: 13px !important;
        background: linear-gradient( 135deg, #f6dfaa, #d8aa4f ) !important;
        color: #4e3518 !important;
        font-size: 8px !important;
        font-weight: 950 !important;
        cursor: pointer !important;
        box-shadow: 0 9px 18px rgba(131, 87, 31, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
        transition: transform 0.32s ease, box-shadow 0.32s ease !important;
    }


        .profile-mobile-expand-button:hover {
            transform: translateY(-2px) scale(1.015) !important;
            box-shadow: 0 13px 23px rgba(131, 87, 31, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
        }


        .profile-mobile-expand-button svg {
            width: 15px !important;
            height: 15px !important;
            fill: none !important;
            stroke: currentColor !important;
            stroke-width: 1.8 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }
}


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

@media (max-width: 480px) {

    .profile-mobile-collapsed-bar {
        min-height: 66px !important;
        padding: 8px 8px 8px 10px !important;
        border-radius: 18px !important;
    }


    .profile-mobile-collapsed-bar__photo {
        width: 45px !important;
        height: 45px !important;
    }


    .profile-mobile-collapsed-bar__text strong {
        font-size: 12px !important;
    }


    .profile-mobile-expand-button {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
    }


        .profile-mobile-expand-button > span {
            display: none !important;
        }


    .profile-sidebar .profile-card {
        padding: 15px 14px 20px !important;
        border-radius: 24px !important;
    }


    .profile-sidebar .profile-photo {
        width: min(100%, 260px) !important;
    }
}


/* =========================================================
   DARK THEME — MOBILE PROFILE
========================================================= */

@media (max-width: 1100px) {

    html[data-theme="dark"]
    .profile-mobile-collapsed-bar {
        border-color: rgba(216, 170, 79, 0.28) !important;
        background: radial-gradient( circle at 91% 5%, rgba(216, 170, 79, 0.20), transparent 35% ), linear-gradient( 145deg, rgba(23, 20, 16, 0.98), rgba(12, 12, 11, 0.97) ) !important;
        box-shadow: 0 17px 35px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }


    html[data-theme="dark"]
    .profile-mobile-collapsed-bar__text strong {
        color: #f6e8ce !important;
    }


    html[data-theme="dark"]
    .profile-mobile-collapsed-bar__text span {
        color: #b8aa96 !important;
    }


    html[data-theme="dark"]
    .profile-mobile-collapse-button {
        color: #e8c67f !important;
        border-color: rgba(216, 170, 79, 0.28) !important;
        background: linear-gradient( 145deg, rgba(216, 170, 79, 0.15), rgba(255, 240, 204, 0.06) ) !important;
        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }


    html[data-theme="dark"]
    .profile-mobile-expand-button {
        color: #f6d996 !important;
        border-color: rgba(216, 170, 79, 0.42) !important;
        background: linear-gradient( 135deg, rgba(216, 170, 79, 0.28), rgba(151, 111, 43, 0.24) ) !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    }
}











/* =========================================================
   MOBILE DROPDOWN NAVIGATION
========================================================= */

.mobile-menu-toggle {
    display: none !important;
}


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

@media (max-width: 1100px) {

    /* -----------------------------------------------------
       TOPBAR
    ----------------------------------------------------- */

    .main-area > .topbar {
        position: relative !important;
        top: -10px !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "actions toggle"
            "navigation navigation" !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 72px !important;
        max-height: none !important;
        padding: 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 24px !important;
        transform: none !important;
    }


        /* -----------------------------------------------------
       LANGUAGE AND THEME CONTROLS
    ----------------------------------------------------- */

        .main-area > .topbar > .top-actions {
            grid-area: actions !important;
            position: relative !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 8px !important;
            width: auto !important;
            min-width: 0 !important;
            height: auto !important;
            min-height: 48px !important;
            padding: 0 !important;
            margin: 0 !important;
            transform: none !important;
        }


            .main-area > .topbar > .top-actions > * {
                position: relative !important;
                top: 8px;
                !important;
                right: auto !important;
                bottom: auto !important;
                left: auto !important;
                flex: 0 0 auto !important;
                margin: 0 !important;
                transform: none !important;
            }


        /* =====================================================
       DROPDOWN BUTTON
    ====================================================== */

        .main-area > .topbar > .mobile-menu-toggle {
            appearance: none !important;
            grid-area: toggle !important;
            position: relative !important;
            top: 8px !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 9px !important;
            min-width: 96px !important;
            min-height: 48px !important;
            padding: 0 14px !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            border: 1px solid rgba(179, 129, 57, 0.28) !important;
            border-radius: 15px !important;
            background: linear-gradient( 145deg, rgba(255, 248, 230, 0.98), rgba(225, 192, 124, 0.94) ) !important;
            color: #4c351c !important;
            font-family: inherit !important;
            cursor: pointer !important;
            box-shadow: 0 10px 21px rgba(99, 63, 26, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
            transform: none !important;
            transition: transform 0.34s cubic-bezier(.22, 1, .36, 1), border-color 0.30s ease, background 0.34s ease, box-shadow 0.34s ease !important;
        }


    .mobile-menu-toggle__label {
        font-size: 10px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: 0.2px !important;
    }


    .mobile-menu-toggle__icon {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 18px !important;
        height: 18px !important;
    }


        .mobile-menu-toggle__icon i {
            display: block !important;
            width: 18px !important;
            height: 2px !important;
            margin: 0 !important;
            border-radius: 10px !important;
            background: currentColor !important;
            transform-origin: center !important;
            transition: transform 0.34s cubic-bezier(.22, 1, .36, 1), opacity 0.24s ease !important;
        }


    /* Hamburger becomes X */
    .mobile-menu-toggle--open
    .mobile-menu-toggle__icon i:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle--open
    .mobile-menu-toggle__icon i:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .mobile-menu-toggle--open
    .mobile-menu-toggle__icon i:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }


    /* =====================================================
       CLOSED DROPDOWN
    ====================================================== */

    .main-area > .topbar > .site-nav {
        grid-area: navigation !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 7px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border: 1px solid transparent !important;
        border-radius: 19px !important;
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -10px, 0) !important;
        transition: max-height 0.46s cubic-bezier(.22, 1, .36, 1), padding 0.40s cubic-bezier(.22, 1, .36, 1), margin 0.40s ease, opacity 0.28s ease, visibility 0.28s ease, transform 0.42s cubic-bezier(.22, 1, .36, 1), border-color 0.34s ease, background 0.34s ease !important;
    }


        /* =====================================================
       OPEN DROPDOWN
    ====================================================== */

        .main-area > .topbar >
        .site-nav.site-nav--mobile-open {
            max-height: 310px !important;
            padding: 8px !important;
            margin-top: 2px !important;
            border-color: rgba(151, 106, 47, 0.18) !important;
            background: linear-gradient( 145deg, rgba(255, 251, 240, 0.96), rgba(235, 220, 190, 0.93) ) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 13px 27px rgba(75, 48, 23, 0.10) !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: translate3d(0, 0, 0) !important;
        }


        /* =====================================================
       DROPDOWN ITEMS
    ====================================================== */

        .main-area > .topbar > .site-nav > a {
            position: relative !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            display: grid !important;
            grid-template-columns: 40px minmax(0, 1fr) 24px !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            height: auto !important;
            min-height: 53px !important;
            max-height: none !important;
            padding: 6px 10px !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            border: 1px solid rgba(117, 84, 47, 0.09) !important;
            border-radius: 14px !important;
            background: rgba(255, 252, 245, 0.55) !important;
            color: #67594a !important;
            text-decoration: none !important;
            overflow: hidden !important;
            transform: none !important;
            transition: transform 0.32s cubic-bezier(.22, 1, .36, 1), color 0.28s ease, border-color 0.30s ease, background 0.32s ease, box-shadow 0.32s ease !important;
        }


            /* Arrow on right side */
            .main-area > .topbar > .site-nav > a::after {
                content: "›" !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                grid-column: 3 !important;
                width: 24px !important;
                height: 24px !important;
                color: #947347 !important;
                font-size: 20px !important;
                font-weight: 500 !important;
                transition: transform 0.32s ease !important;
            }


            .main-area > .topbar > .site-nav > a:hover::after {
                transform: translateX(3px) !important;
            }


            /* Icon */
            .main-area > .topbar >
            .site-nav > a .nav-icon {
                grid-column: 1 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 38px !important;
                height: 38px !important;
                padding: 0 !important;
                margin: 0 !important;
                border-radius: 12px !important;
                color: #76572e !important;
                background: rgba(225, 198, 143, 0.40) !important;
                transform: none !important;
            }


                .main-area > .topbar >
                .site-nav > a .nav-icon svg {
                    display: block !important;
                    width: 18px !important;
                    height: 18px !important;
                    margin: 0 !important;
                }


            /* Label */
            .main-area > .topbar >
            .site-nav > a .nav-label {
                grid-column: 2 !important;
                display: block !important;
                width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                color: inherit !important;
                font-size: 11px !important;
                font-weight: 900 !important;
                line-height: 1.2 !important;
                text-align: left !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                transform: none !important;
            }


            /* Active route */
            .main-area > .topbar >
            .site-nav > a.active {
                color: #183450 !important;
                border-color: rgba(191, 139, 62, 0.28) !important;
                background: linear-gradient( 145deg, rgba(255, 250, 236, 0.98), rgba(234, 210, 159, 0.94) ) !important;
                box-shadow: 0 9px 18px rgba(95, 62, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
            }


                .main-area > .topbar >
                .site-nav > a.active .nav-icon {
                    color: #173553 !important;
                    background: linear-gradient( 135deg, #f2d98e, #d6a744 ) !important;
                    box-shadow: 0 7px 14px rgba(123, 80, 29, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
                }


            /* Hover */
            .main-area > .topbar >
            .site-nav > a:hover {
                transform: translate3d(3px, 0, 0) !important;
                color: #493721 !important;
                border-color: rgba(176, 126, 60, 0.22) !important;
                background: rgba(255, 249, 234, 0.86) !important;
            }


    /* =====================================================
       CONTENT BELOW TOPBAR
    ====================================================== */

    .main-area > .company-marquee,
    .main-area > .company-marquee-shell,
    .main-area > .company-marquee-section {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 10px !important;
        transform: none !important;
    }
}




/* =========================================================
   DARK THEME — MOBILE DROPDOWN MENU
========================================================= */

@media (max-width: 1100px) {

    html[data-theme="dark"]
    .main-area > .topbar {
        border-color: rgb(216 170 79 / 22%) !important;
        background: linear-gradient( 145deg, rgb(255 244 219 / 7%), rgb(216 170 79 / 4%) ) !important;
        box-shadow: 0 14px 28px rgb(0 0 0 / 23%), inset 0 1px 0 rgb(255 255 255 / 5%) !important;
    }


        html[data-theme="dark"]
        .main-area > .topbar >
        .mobile-menu-toggle {
            color: #f5d58e !important;
            border-color: rgb(216 170 79 / 38%) !important;
            background: linear-gradient( 145deg, rgb(216 170 79 / 25%), rgb(255 241 207 / 10%) ) !important;
            box-shadow: 0 10px 21px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 10%) !important;
        }


        html[data-theme="dark"]
        .main-area > .topbar >
        .site-nav.site-nav--mobile-open {
            border-color: rgb(216 170 79 / 25%) !important;
            background: linear-gradient( 145deg, rgb(34 29 23 / 98%), rgb(20 18 15 / 98%) ) !important;
            box-shadow: 0 16px 32px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 5%) !important;
        }


        html[data-theme="dark"]
        .main-area > .topbar >
        .site-nav > a {
            color: #bdaf9a !important;
            border-color: rgb(216 170 79 / 11%) !important;
            background: linear-gradient( 145deg, rgb(255 244 219 / 5%), rgb(216 170 79 / 3%) ) !important;
        }


            html[data-theme="dark"]
            .main-area > .topbar >
            .site-nav > a .nav-icon {
                color: #d8b46d !important;
                background: rgb(216 170 79 / 12%) !important;
            }


            html[data-theme="dark"]
            .main-area > .topbar >
            .site-nav > a::after {
                color: #caaa6c !important;
            }


            html[data-theme="dark"]
            .main-area > .topbar >
            .site-nav > a:hover {
                color: #f1dbad !important;
                border-color: rgb(216 170 79 / 28%) !important;
                background: linear-gradient( 145deg, rgb(216 170 79 / 15%), rgb(255 240 204 / 7%) ) !important;
            }


            html[data-theme="dark"]
            .main-area > .topbar >
            .site-nav > a.active {
                color: #f9e2ae !important;
                border-color: rgb(216 170 79 / 46%) !important;
                background: linear-gradient( 145deg, rgb(216 170 79 / 27%), rgb(255 240 204 / 11%) ) !important;
                box-shadow: 0 10px 21px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 10%) !important;
            }


                html[data-theme="dark"]
                .main-area > .topbar >
                .site-nav > a.active .nav-icon {
                    color: #25180a !important;
                    background: linear-gradient( 135deg, #f1cf82, #c89536 ) !important;
                }
}


html[data-theme="dark"] :is( .capability-premium-card:hover .capability-premium-card__desc, .project-premium-item:hover .project-premium-item__desc ) {
    color: #d8cfbf !important;
    text-shadow: 0 1px 10px rgb(216 170 79 / 10%) !important;
    transform: translate3d(0, -1px, 0) !important;
}






/* =========================================================
   PORTFOLIO CATEGORY FILTER
   DESKTOP HORIZONTAL + MOBILE DROPDOWN
========================================================= */

/* Dropdown button is hidden on desktop */
.portfolio-filter-toggle {
    display: none !important;
}


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

@media (max-width: 1100px) {

    /* Filter wrapper */
    .portfolio-filter-shell {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        overflow: visible !important;
    }


    /* =====================================================
       DROPDOWN BUTTON
    ====================================================== */

    .portfolio-filter-toggle {
        appearance: none !important;
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 32px !important;
        align-items: center !important;
        gap: 11px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 67px !important;
        padding: 10px 12px 10px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(173, 125, 57, 0.25) !important;
        border-radius: 19px !important;
        background: radial-gradient( circle at 92% 5%, rgba(240, 207, 131, 0.21), transparent 37% ), linear-gradient( 145deg, rgba(255, 251, 241, 0.98), rgba(232, 213, 174, 0.95) ) !important;
        color: #4c3822 !important;
        font-family: inherit !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: 0 12px 24px rgba(89, 57, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
        transition: transform 0.34s cubic-bezier(.22, 1, .36, 1), border-color 0.3s ease, background 0.34s ease, box-shadow 0.34s ease !important;
    }


        .portfolio-filter-toggle:hover {
            transform: translateY(-2px) !important;
            border-color: rgba(187, 134, 59, 0.38) !important;
            box-shadow: 0 16px 29px rgba(89, 57, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
        }


    /* Active dropdown button */
    .portfolio-filter-toggle--open {
        border-color: rgba(184, 130, 54, 0.42) !important;
        box-shadow: 0 15px 29px rgba(89, 57, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    }


    /* Text */
    .portfolio-filter-toggle__content {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        min-width: 0 !important;
    }


        .portfolio-filter-toggle__content small {
            color: #947044 !important;
            font-size: 7.5px !important;
            font-weight: 900 !important;
            line-height: 1 !important;
            letter-spacing: 0.9px !important;
            text-transform: uppercase !important;
        }


        .portfolio-filter-toggle__content strong {
            overflow: hidden !important;
            color: #45321e !important;
            font-size: 13px !important;
            font-weight: 950 !important;
            line-height: 1.15 !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }


    /* Count */
    .portfolio-filter-toggle__count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        border-radius: 11px !important;
        background: rgba(116, 85, 47, 0.14) !important;
        color: #745b39 !important;
        font-size: 10px !important;
        font-weight: 950 !important;
    }


    /* Arrow */
    .portfolio-filter-toggle__arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border: 1px solid rgba(130, 91, 43, 0.12) !important;
        border-radius: 10px !important;
        background: rgba(255, 249, 235, 0.52) !important;
        color: #76572d !important;
        transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), background 0.32s ease !important;
    }


        .portfolio-filter-toggle__arrow svg {
            width: 17px !important;
            height: 17px !important;
            fill: none !important;
            stroke: currentColor !important;
            stroke-width: 1.8 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }


    .portfolio-filter-toggle--open
    .portfolio-filter-toggle__arrow {
        transform: rotate(180deg) !important;
        background: rgba(224, 190, 123, 0.55) !important;
    }


    /* =====================================================
       CLOSED DROPDOWN
    ====================================================== */

    .portfolio-filter-shell > .portfolio-filters {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border: 1px solid transparent !important;
        border-radius: 19px !important;
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -10px, 0) !important;
        transition: max-height 0.5s cubic-bezier(.22, 1, .36, 1), padding 0.42s cubic-bezier(.22, 1, .36, 1), opacity 0.28s ease, visibility 0.28s ease, transform 0.44s cubic-bezier(.22, 1, .36, 1), border-color 0.34s ease, background 0.34s ease !important;
    }


        /* =====================================================
       OPEN DROPDOWN
    ====================================================== */

        .portfolio-filter-shell >
        .portfolio-filters.portfolio-filters--mobile-open {
            max-height: 480px !important;
            padding: 8px !important;
            border-color: rgba(150, 107, 51, 0.17) !important;
            background: linear-gradient( 145deg, rgba(255, 251, 241, 0.98), rgba(235, 220, 191, 0.95) ) !important;
            box-shadow: 0 15px 29px rgba(78, 49, 21, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: translate3d(0, 0, 0) !important;
        }


    /* =====================================================
       DROPDOWN CATEGORY ITEMS
    ====================================================== */

    .portfolio-filter-shell
    .portfolio-filters
    .portfolio-filter {
        appearance: none !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        padding: 7px 10px 7px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(121, 85, 43, 0.08) !important;
        border-radius: 13px !important;
        background: rgba(255, 252, 245, 0.58) !important;
        color: #756754 !important;
        text-align: left !important;
        transform: none !important;
        transition: transform 0.31s cubic-bezier(.22, 1, .36, 1), color 0.28s ease, border-color 0.3s ease, background 0.32s ease, box-shadow 0.32s ease !important;
    }


    .portfolio-filter-shell
    .portfolio-filter > span {
        overflow: visible !important;
        color: inherit !important;
        font-size: 10px !important;
        font-weight: 880 !important;
        line-height: 1.2 !important;
        text-overflow: unset !important;
        white-space: normal !important;
    }


    .portfolio-filter-shell
    .portfolio-filter small {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 31px !important;
        height: 31px !important;
        padding: 0 7px !important;
        border-radius: 10px !important;
        background: rgba(116, 87, 52, 0.1) !important;
        color: #806c50 !important;
        font-size: 8.5px !important;
        font-weight: 950 !important;
    }


    /* Hover */
    .portfolio-filter-shell
    .portfolio-filter:hover {
        transform: translate3d(3px, 0, 0) !important;
        color: #4e3923 !important;
        border-color: rgba(173, 121, 52, 0.2) !important;
        background: rgba(255, 248, 231, 0.92) !important;
    }


    /* Selected category */
    .portfolio-filter-shell
    .portfolio-filter--active {
        color: #183550 !important;
        border-color: rgba(187, 132, 53, 0.28) !important;
        background: linear-gradient( 145deg, rgba(255, 249, 234, 0.98), rgba(233, 207, 154, 0.94) ) !important;
        box-shadow: 0 8px 17px rgba(96, 63, 28, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
    }


        .portfolio-filter-shell
        .portfolio-filter--active small {
            background: linear-gradient( 135deg, #edcf87, #c9963a ) !important;
            color: #33220f !important;
        }
}



/* =========================================================
   DARK THEME — PORTFOLIO MOBILE FILTER DROPDOWN
========================================================= */

@media (max-width: 1100px) {

    html[data-theme="dark"]
    .portfolio-filter-toggle {
        color: #f0d7a6 !important;
        border-color: rgb(216 170 79 / 34%) !important;
        background: radial-gradient( circle at 92% 5%, rgb(216 170 79 / 18%), transparent 37% ), linear-gradient( 145deg, rgb(35 30 24 / 98%), rgb(20 18 15 / 98%) ) !important;
        box-shadow: 0 14px 28px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 6%) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-toggle__content small {
        color: #c3a472 !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-toggle__content strong {
        color: #f4e3c5 !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-toggle__count {
        color: #f0d394 !important;
        background: rgb(216 170 79 / 16%) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-toggle__arrow {
        color: #e4bf77 !important;
        border-color: rgb(216 170 79 / 21%) !important;
        background: rgb(216 170 79 / 10%) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-shell >
    .portfolio-filters.portfolio-filters--mobile-open {
        border-color: rgb(216 170 79 / 24%) !important;
        background: linear-gradient( 145deg, rgb(35 30 24 / 98%), rgb(19 17 14 / 98%) ) !important;
        box-shadow: 0 17px 34px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 5%) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-shell
    .portfolio-filters
    .portfolio-filter {
        color: #bbae98 !important;
        border-color: rgb(216 170 79 / 10%) !important;
        background: linear-gradient( 145deg, rgb(255 244 219 / 5%), rgb(216 170 79 / 3%) ) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-shell
    .portfolio-filter small {
        color: #c9ac76 !important;
        background: rgb(216 170 79 / 11%) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-shell
    .portfolio-filter:hover {
        color: #f1dbaa !important;
        border-color: rgb(216 170 79 / 27%) !important;
        background: linear-gradient( 145deg, rgb(216 170 79 / 14%), rgb(255 240 204 / 6%) ) !important;
    }


    html[data-theme="dark"]
    .portfolio-filter-shell
    .portfolio-filter--active {
        color: #f9e3af !important;
        border-color: rgb(216 170 79 / 44%) !important;
        background: linear-gradient( 145deg, rgb(216 170 79 / 26%), rgb(255 240 204 / 10%) ) !important;
        box-shadow: 0 10px 21px rgb(0 0 0 / 27%), inset 0 1px 0 rgb(255 255 255 / 9%) !important;
    }


        html[data-theme="dark"]
        .portfolio-filter-shell
        .portfolio-filter--active small {
            color: #25170a !important;
            background: linear-gradient( 135deg, #f0cf82, #c89536 ) !important;
        }
}









/* =========================================================
   PORTFOLIO GRID — NATURAL SCROLL CHAINING
========================================================= */

.portfolio-grid {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /*
       وقتی اسکرول Grid به بالا یا پایین رسید،
       اسکرول به صفحه اصلی منتقل شود.
    */
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
    scroll-behavior: smooth !important;
    /*
       اسکرول لمسی روان در موبایل
    */
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    /*
       اسکرول‌بار مخفی باقی بماند
    */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

    .portfolio-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }







/* =========================================================
   MOBILE — FIXED PROFILE / MENU SPACING
========================================================= */

@media (max-width: 1100px) {

    /*
       تنها از این سه متغیر برای تنظیم جایگاه استفاده می‌کنیم.
    */
    .portfolio-shell {
        --mobile-sticky-top: 8px;
        --mobile-profile-bar-height: 64px;
        --mobile-profile-menu-gap: 8px;
        row-gap: 0 !important;
    }


        /* =====================================================
       COLLAPSED PROFILE BAR
    ====================================================== */

        .portfolio-shell >
        .profile-sidebar.profile-sidebar--mobile-collapsed {
            position: sticky !important;
            top: var(--mobile-sticky-top) !important;
            z-index: 1400 !important;
            width: 100% !important;
            height: var(--mobile-profile-bar-height) !important;
            min-height: var(--mobile-profile-bar-height) !important;
            max-height: var(--mobile-profile-bar-height) !important;
            padding: 0 !important;
            /*
           همین مقدار، فاصله اولیه منو از پروفایل است.
        */
            margin: 0 0 var(--mobile-profile-menu-gap) 0 !important;
            box-sizing: border-box !important;
            transform: none !important;
        }


    /*
       خود نوار داخلی باید دقیقاً هم‌اندازه Wrapper باشد.
    */
    .profile-sidebar--mobile-collapsed
    .profile-mobile-collapsed-bar {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       MAIN AREA
    ====================================================== */

    .portfolio-shell >
    .profile-sidebar--mobile-collapsed +
    .main-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


        /* =====================================================
       STICKY MAIN MENU
    ====================================================== */

        .portfolio-shell >
        .profile-sidebar--mobile-collapsed +
        .main-area >
        .topbar {
            position: sticky !important;
            /*
           بالای صفحه
           + ارتفاع پروفایل
           + فاصله ثابت بین دو بخش
        */
            top: calc( var(--mobile-sticky-top) + var(--mobile-profile-bar-height) + var(--mobile-profile-menu-gap) ) !important;
            z-index: 1300 !important;
            width: 100% !important;
            /*
           فاصله اضافی اولیه حذف شود.
        */

            transform: none !important;
        }


    /* =====================================================
       EXPANDED PROFILE STATE
    ====================================================== */

    .portfolio-shell >
    .profile-sidebar--mobile-expanded {
        margin-bottom: var(--mobile-profile-menu-gap) !important;
    }


        .portfolio-shell >
        .profile-sidebar--mobile-expanded +
        .main-area {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }


            .portfolio-shell >
            .profile-sidebar--mobile-expanded +
            .main-area >
            .topbar {
                position: sticky !important;
                top: var(--mobile-sticky-top) !important;
                margin-top: 0 !important;
                z-index: 1300 !important;
            }
}


/* =========================================================
   HOME HERO — MOBILE BUTTONS & METRIC CARD HEIGHT
========================================================= */

@media (max-width: 760px) {

    .modern-home-hero {
        /*
           فقط این مقدار را برای تغییر ارتفاع کارت‌ها عوض کن.
        */
        /*
           فاصله بین دو دکمه
        */
        --mobile-hero-actions-gap: 9px;
    }


        /* =====================================================
       TWO BUTTONS IN ONE ROW
    ====================================================== */

        .modern-home-hero .modern-hero-actions {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            align-items: stretch !important;
            gap: var(--mobile-hero-actions-gap) !important;
            width: 100% !important;
            min-width: 0 !important;
            margin-bottom: 24px !important;
            flex-wrap: nowrap !important;
        }


            .modern-home-hero
            .modern-hero-actions
            .modern-hero-btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: none !important;
                min-height: 52px !important;
                padding: 0 9px !important;
                margin: 0 !important;
                font-size: 11px !important;
                line-height: 1.1 !important;
                text-align: center !important;
                white-space: nowrap !important;
                box-sizing: border-box !important;
            }


        .modern-home-hero
        .modern-hero-btn--primary svg {
            flex: 0 0 auto !important;
            width: 15px !important;
            height: 15px !important;
        }
}



/* =========================================================
   MOBILE ANIMATED STAT CARDS — READY FOR 75PX HEIGHT
========================================================= */

@media (max-width: 760px) {

    .modern-home-hero {
        --mobile-stat-card-height: 95px;
        --mobile-stat-frame-inset: 4px;
        --mobile-stat-reveal-padding-y: 4px;
        --mobile-stat-reveal-padding-x: 6px;
        --mobile-stat-header-height: 22px;
        --mobile-stat-content-gap: 1px;
        --mobile-stat-header-font-size: 7.8px;
        --mobile-stat-list-font-size: 7.4px;
        --mobile-stat-bullet-size: 4px;
        --mobile-stat-list-padding-left: 13px;
        --mobile-stat-hover-scale: 1.005;
    }


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

        .modern-home-hero .animated-stat-grid {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            grid-auto-rows: var(--mobile-stat-card-height) !important;
            align-items: start !important;
            gap: 10px !important;
            width: 100% !important;
            min-width: 0 !important;
            overflow: visible !important;
        }


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

        .modern-home-hero .animated-stat-card {
            position: relative !important;
            width: 100% !important;
            height: var(--mobile-stat-card-height) !important;
            min-height: var(--mobile-stat-card-height) !important;
            max-height: var(--mobile-stat-card-height) !important;
            block-size: var(--mobile-stat-card-height) !important;
            min-block-size: var(--mobile-stat-card-height) !important;
            max-block-size: var(--mobile-stat-card-height) !important;
            aspect-ratio: auto !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            transform: translate3d(0, 0, 0) !important;
        }


            /* =====================================================
       NORMAL FRONT
    ====================================================== */

            .modern-home-hero
            .animated-stat-card > .animated-stat-front {
                position: absolute !important;
                inset: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                justify-content: center !important;
                width: 100% !important;
                height: 100% !important;
                padding: 8px 12px !important;
                box-sizing: border-box !important;
            }


        .modern-home-hero
        .animated-stat-front strong {
            margin: 0 0 3px !important;
            font-size: 20px !important;
            font-weight: 950 !important;
            line-height: 1 !important;
            letter-spacing: -0.5px !important;
        }


        .modern-home-hero
        .animated-stat-front span {
            display: block !important;
            max-width: 100% !important;
            margin: 0 !important;
            font-size: 8.5px !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }


        /* =====================================================
       REVEAL LAYER
    ====================================================== */

        .modern-home-hero
        .animated-stat-card > .animated-stat-reveal {
            position: absolute !important;
            inset: 0 !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            grid-template-rows: var(--mobile-stat-header-height) minmax(0, 1fr) !important;
            align-items: stretch !important;
            align-content: stretch !important;
            gap: var(--mobile-stat-content-gap) !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            padding: var(--mobile-stat-reveal-padding-y) var(--mobile-stat-reveal-padding-x) !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }


        /* =====================================================
       SVG FRAME
    ====================================================== */

        .modern-home-hero
        .animated-stat-card
        .animated-stat-frame {
            position: absolute !important;
            top: var(--mobile-stat-frame-inset) !important;
            right: var(--mobile-stat-frame-inset) !important;
            bottom: var(--mobile-stat-frame-inset) !important;
            left: var(--mobile-stat-frame-inset) !important;
            width: calc( 100% - (var(--mobile-stat-frame-inset) * 2) ) !important;
            height: calc( 100% - (var(--mobile-stat-frame-inset) * 2) ) !important;
            pointer-events: none !important;
        }


        .modern-home-hero
        .animated-stat-frame rect {
            stroke-width: 1.3px !important;
        }


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

        .modern-home-hero
        .animated-stat-card
        .animated-stat-header {
            position: relative !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            z-index: 4 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: var(--mobile-stat-header-height) !important;
            min-height: var(--mobile-stat-header-height) !important;
            max-height: var(--mobile-stat-header-height) !important;
            margin: 0 !important;
            padding: 0 6px !important;
            border-radius: 8px 8px 0 0 !important;
            box-sizing: border-box !important;
        }


            .modern-home-hero
            .animated-stat-card
            .animated-stat-header span {
                display: block !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                font-size: var(--mobile-stat-header-font-size) !important;
                font-weight: 950 !important;
                line-height: 1 !important;
                text-align: center !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }


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

        .modern-home-hero
        .animated-stat-card
        .animated-stat-list {
            position: relative !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            z-index: 4 !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
            align-items: stretch !important;
            align-content: stretch !important;
            gap: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 4px 0 var(--mobile-stat-list-padding-left) !important;
            box-sizing: border-box !important;
            list-style: none !important;
            overflow: hidden !important;
        }


            .modern-home-hero
            .animated-stat-card
            .animated-stat-list li {
                position: relative !important;
                display: flex !important;
                align-items: center !important;
                width: 100% !important;
                min-width: 0 !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                box-sizing: border-box !important;
                font-size: var(--mobile-stat-list-font-size) !important;
                font-weight: 850 !important;
                line-height: 1 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }


                /* Bullet */
                .modern-home-hero
                .animated-stat-card
                .animated-stat-list li::before {
                    content: "" !important;
                    position: absolute !important;
                    top: 50% !important;
                    left: -9px !important;
                    width: var(--mobile-stat-bullet-size) !important;
                    height: var(--mobile-stat-bullet-size) !important;
                    border-radius: 50% !important;
                    transform: translateY(-50%) scale(0.55) !important;
                }


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

    html body
    .modern-home-hero
    .animated-stat-grid > .animated-stat-card:hover {
        z-index: 40 !important;
        transform: translate3d(0, 0, 0) scale(var(--mobile-stat-hover-scale)) !important;
    }


    /* کارت‌های دیگر جابه‌جا نشوند */
    html body
    .modern-home-hero
    .animated-stat-grid:has(.animated-stat-card:hover) > .animated-stat-card:not(:hover) {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }


    /* Header در Hover کشیده نشود */
    .modern-home-hero
    .animated-stat-card:hover
    .animated-stat-header {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) !important;
    }
}


/* =========================================================
   MOBILE 75PX — NATURAL BROWN FRAME
   Prevent SVG corner distortion
========================================================= */

@media (max-width: 760px) {

    .modern-home-hero {
        /*
           تنظیم مستقیم فریم
        */
        --mobile-stat-frame-inset: 4px;
        --mobile-stat-frame-radius: 18px;
        --mobile-stat-frame-width: 2px;
    }


        /* SVG کشیده‌شده در موبایل نمایش داده نشود */
        .modern-home-hero
        .animated-stat-card
        .animated-stat-frame {
            display: none !important;
        }


        /* فریم قهوه‌ای طبیعی با CSS */
        .modern-home-hero
        .animated-stat-card
        .animated-stat-reveal::before {
            content: "" !important;
            position: absolute !important;
            top: var(--mobile-stat-frame-inset) !important;
            right: var(--mobile-stat-frame-inset) !important;
            bottom: var(--mobile-stat-frame-inset) !important;
            left: var(--mobile-stat-frame-inset) !important;
            z-index: 2 !important;
            box-sizing: border-box !important;
            border: var(--mobile-stat-frame-width) solid var(--stat-frame) !important;
            border-radius: var(--mobile-stat-frame-radius) !important;
            pointer-events: none !important;
            opacity: 0 !important;
            transform: translate3d(0, 0, 0) rotate(1.5deg) !important;
            transform-origin: center center !important;
            transition: opacity 0.34s ease, transform 0.65s cubic-bezier(.22, 1, .36, 1) !important;
            backface-visibility: hidden !important;
            -webkit-backface-visibility: hidden !important;
        }


        /* نمایش فریم در Hover */
        .modern-home-hero
        .animated-stat-card:hover
        .animated-stat-reveal::before {
            opacity: 1 !important;
            transform: translate3d(0, 0, 0) rotate(0deg) !important;
        }


        /* Header و List بالاتر از فریم باقی بمانند */
        .modern-home-hero
        .animated-stat-card
        :is( .animated-stat-header, .animated-stat-list ) {
            position: relative !important;
            z-index: 4 !important;
        }
}






/* =========================================================
   MOBILE — PROJECT ARROW TOP RIGHT
   Move the wrapper, not only the arrow
========================================================= */

@media (max-width: 760px) {

    /* کارت مبنای جای‌گذاری باشد */
    .projects-premium-section
    .project-premium-item {
        position: relative !important;
        /*
           فضای کافی در بالای سمت راست برای فلش
        */
        padding: 20px 18px 20px 18px !important;
        overflow: hidden !important;
    }


        /* =====================================================
       ARROW WRAPPER
    ====================================================== */

        .projects-premium-section
        .project-premium-item > .project-premium-item__right {
            position: absolute !important;
            top: 20px !important;
            right: 18px !important;
            bottom: auto !important;
            left: auto !important;
            z-index: 8 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            margin: 0 !important;
            padding: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: none !important;
        }


        /* =====================================================
       ARROW BUTTON
    ====================================================== */

        .projects-premium-section
        .project-premium-item
        .project-premium-item__arrow {
            position: relative !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 44px !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            margin: 0 !important;
            padding: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: none !important;
        }


        /* =====================================================
       LEFT SIDE / NUMBER AREA
       Prevent overlap with arrow
    ====================================================== */

        .projects-premium-section
        .project-premium-item > .project-premium-item__left {
            position: relative !important;
            width: 100% !important;
            min-width: 0 !important;
            padding-right: 64px !important;
            box-sizing: border-box !important;
        }


    /* محتوای اصلی کارت ترتیب طبیعی خود را حفظ کند */
    .projects-premium-section
    .project-premium-item__content {
        order: 2 !important;
    }


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

    .projects-premium-section
    .project-premium-item:hover
    .project-premium-item__arrow {
        transform: translateX(2px) translateY(-1px) scale(1.04) !important;
    }
}



/* =========================================================
   WHAT I DO — MOBILE 360 CARD
========================================================= */

@media (max-width: 760px) {

    /* بخش پایانی به یک ستون کامل تبدیل شود */
    .whatido-closing {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
        min-width: 0 !important;
    }


    /* متن بخش تمام عرض را بگیرد */
    .whatido-closing__content {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* کارت 360 به مستطیل تمام‌عرض تبدیل شود */
    .whatido-closing__mark {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 94px !important;
        min-height: 94px !important;
        max-height: 94px !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 18px 24px !important;
        box-sizing: border-box !important;
        border-radius: 24px !important;
        text-align: left !important;
    }


        /* عدد 360 */
        .whatido-closing__mark strong {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 36px !important;
            font-weight: 950 !important;
            line-height: 1 !important;
            letter-spacing: -1px !important;
            white-space: nowrap !important;
        }


        /* Digital Capability */
        .whatido-closing__mark span {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 11px !important;
            font-weight: 850 !important;
            line-height: 1.25 !important;
            text-align: right !important;
            white-space: nowrap !important;
        }
}


/* =========================================================
   MOBILE — MAIN LARGE SECTION CARDS SPACING
========================================================= */

@media (max-width: 760px) {

    :root {
        /*
           فاصله نهایی بین کارت‌های بزرگ هر صفحه
           فقط این عدد را تغییر بده
        */
        --mobile-large-section-gap: 8px;
    }


    /* =====================================================
       HOME PAGE
       فاصله‌ها در Home با margin-top ساخته شده‌اند
    ====================================================== */

    .capabilities-premium-section,
    .projects-premium-section,
    .tools-premium-section {
        margin-top: var(--mobile-large-section-gap) !important;
        margin-bottom: 0 !important;
        top: -28px;
    }


    .modern-home-hero {
        margin-bottom: 0 !important;
        gap: var(--mobile-large-section-gap) !important;
        top: -28px;
    }


    /*
       خود Shellها هیچ فاصله خارجی اضافه نکنند
    */
    .capabilities-premium-shell,
    .projects-premium-shell,
    .tools-premium-shell {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* =====================================================
       WHAT I DO PAGE
       فاصله اصلی از gap والد ساخته می‌شود
    ====================================================== */

    .whatido-page, .whatido-services-shell {
        gap: var(--mobile-large-section-gap) !important;
        row-gap: var(--mobile-large-section-gap) !important;
        column-gap: 0 !important;
    }


        .whatido-page > :is( .whatido-hero, .portfolio-metrics.portfolio-metrics--compact, .whatido-capability-panel, .whatido-business-panel, .whatido-metrics, .whatido-closing ) {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            gap: var(--mobile-large-section-gap) !important;
        }

    .whatido-services-shell, .whatido-closing {
        top: -20px;
    }
    /* =====================================================
       PORTFOLIO PAGE
       فاصله اصلی از gap: 30px والد ساخته می‌شود
    ====================================================== */
    .portfolio-page {
        gap: var(--mobile-large-section-gap) !important;
        row-gap: var(--mobile-large-section-gap) !important;
        column-gap: 0 !important;
    }

    .portfolio-metrics.portfolio-metrics--compact {
    }



    .portfolio-page > :is( .portfolio-hero, .portfolio-metrics, .portfolio-catalog, .portfolio-featured, .portfolio-hero.portfolio-hero--minimal, .portfolio-metrics.portfolio-metrics--compact, .portfolio-closing ) {
        margin-bottom: 0 !important;
    }

    .portfolio-featured,
    {
        margin-top: -20px;
    }
    /*
       Override کد منفی قبلی Featured
    */
    .portfolio-page >
    .portfolio-catalog +
    .portfolio-featured {
        top: auto !important;
        margin-top: 0 !important;
    }


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

    :is( .contact-page, .contact-simple-page ) {
        gap: var(--mobile-large-section-gap) !important;
        row-gap: var(--mobile-large-section-gap) !important;
    }


        :is( .contact-page, .contact-simple-page ) > section {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
}


html[data-theme="dark"]
.portfolio-scope-panel__item:hover {
    transform: translate3d(0, -3px, 0) scale(1.015) !important;
    border-color: rgb(239 196 105 / 58%) !important;
    background: linear-gradient( 145deg, rgb(255 245 218 / 34%) 0%, rgb(212 170 88 / 29%) 52%, rgb(145 119 78 / 38%) 100% ) !important;
    box-shadow: 0 13px 25px rgb(0 0 0 / 25%), 0 0 0 1px rgb(233 186 91 / 8%), inset 0 1px 0 rgb(255 255 255 / 15%) !important;
}

html[data-theme="dark"]
.portfolio-metric.portfolio-metric--compact
.portfolio-metric__content strong {
    display: block !important;
    margin: 0 !important;
    color: #f3dfb3 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.18px !important;
    text-shadow: 0 2px 12px rgb(216 170 79 / 10%) !important;
    transition: color 0.30s ease, text-shadow 0.32s ease, transform 0.34s cubic-bezier(.22, 1, .36, 1) !important;
}

/* ============================================================================
   RESPONSIVE LAYOUT STABILIZATION — FINAL
   Breakpoints:
   - Desktop: 1101px and wider
   - Tablet: 721px to 1100px
   - Mobile: 720px and below (intentionally untouched)

   This layer changes geometry only. Existing light/dark colors and mobile rules
   remain unchanged.
============================================================================ */

/* --------------------------------------------------------------------------
   SHARED SAFETY FOR TABLET + DESKTOP
---------------------------------------------------------------------------- */
@media (min-width: 721px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .portfolio-shell,
    .main-area,
    .page-content,
    .modern-home-hero,
    .modern-home-hero__content,
    .modern-goal-panel,
    .capabilities-premium-shell,
    .projects-premium-shell,
    .tools-premium-shell,
    .whatido-page,
    .whatido-hero,
    .whatido-hero__content,
    .whatido-hero__visual,
    .whatido-capability-panel,
    .whatido-services-shell,
    .portfolio-page,
    .portfolio-hero,
    .portfolio-catalog,
    .portfolio-featured,
    .portfolio-closing,
    .contact-simple-hero {
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box !important;
    }

    :is( .modern-hero-metrics, .animated-stat-grid, .capabilities-premium-grid, .projects-premium-list, .tools-premium-grid, .whatido-metrics, .whatido-services-grid, .portfolio-metrics, .portfolio-grid, .portfolio-featured-grid ) > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    :is( .modern-hero-title, .modern-hero-lead, .modern-hero-description, .capabilities-premium-title, .capabilities-premium-intro, .projects-premium-title, .projects-premium-intro, .tools-premium-title, .tools-premium-intro, .whatido-hero__title, .whatido-hero__lead, .whatido-services-header h2, .whatido-services-header > p, .whatido-closing__content h2, .whatido-closing__content p, .portfolio-minimal-hero__title, .portfolio-minimal-hero__description, .portfolio-section-header h2, .portfolio-section-header > p, .portfolio-closing__content h2, .portfolio-closing__content p, .contact-simple-hero__title, .contact-simple-hero__description ) {
        width: auto !important;
        max-width: 100% !important;
        overflow-wrap: break-word;
    }

    :is( .capability-premium-card__title, .capability-premium-card__desc, .project-premium-item__title, .project-premium-item__desc, .tool-category-card__meta strong, .tool-category-card__meta span, .whatido-service-card__heading h2, .whatido-service-card__summary, .portfolio-card h3, .portfolio-card p, .portfolio-featured-card h3, .portfolio-featured-card p ) {
        overflow-wrap: anywhere;
    }

    :is( .portfolio-card__media img, .portfolio-featured-card img, .whatido-hero img, .modern-home-hero img, .contact-simple-hero img ) {
        max-width: 100%;
    }
}


/* ============================================================================
   DESKTOP — 1101PX AND WIDER
============================================================================ */
@media (min-width: 1101px) {
    :root {
        /* 320px at compact desktop → 430px on wide desktop */
        --responsive-sidebar-width: clamp(320px, calc(15.72vw + 147px), 430px);
        /* 10px near 1100px → 160px near 1800px */
        --responsive-side-space: clamp(10px, calc(21.43vw - 225.7px), 160px);
        --responsive-sidebar-gap: clamp(14px, 1.45vw, 28px);
        --responsive-top-space: clamp(10px, 1.1vw, 20px);
        --responsive-section-padding: clamp(24px, 2.35vw, 42px);
    }

    /* Main desktop shell remains desktop even between 1101px and 1180px. */
    .portfolio-shell {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        gap: 0 !important;
        padding-top: var(--responsive-top-space) !important;
        padding-bottom: var(--responsive-top-space) !important;
        padding-left: var(--responsive-side-space) !important;
        padding-right: calc( var(--responsive-side-space) + var(--responsive-sidebar-width) + var(--responsive-sidebar-gap) ) !important;
    }

    .main-area {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Fixed desktop profile sidebar with a fluid width. */
    .profile-sidebar {
        position: fixed !important;
        top: var(--responsive-top-space) !important;
        right: var(--responsive-side-space) !important;
        left: auto !important;
        width: var(--responsive-sidebar-width) !important;
        height: calc(100vh - (var(--responsive-top-space) * 2)) !important;
        min-height: 0 !important;
        max-height: calc(100vh - (var(--responsive-top-space) * 2)) !important;
        z-index: 100 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

        .profile-sidebar::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
            display: none !important;
        }

    .profile-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: calc(100vh - (var(--responsive-top-space) * 2)) !important;
        height: auto !important;
        max-height: none !important;
        margin-top: 0 !important;
        padding: clamp(18px, 1.7vw, 30px) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        border-radius: 36px;
        border:1px solid rgb(75 62 36 / 43%);
    }

    .profile-photo {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        aspect-ratio: 1 / 1.02 !important;
    }

    /* Desktop must never expose mobile-only controls. */
    .profile-mobile-collapsed-bar,
    .profile-mobile-collapse-button,
    .mobile-menu-toggle {
        display: none !important;
    }

    .profile-mobile-content,
    .profile-mobile-content__inner {
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .topbar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .site-nav {
        min-width: 0 !important;
        flex-wrap: nowrap !important;
    }

        .site-nav a {
            min-width: 0 !important;
        }

        .site-nav .nav-label {
            min-width: 0 !important;
            white-space: nowrap !important;
        }

    .top-actions {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    /* Prevent the marquee from pushing outside a compact main column. */
    .company-marquee-card {
        min-width: 0 !important;
        grid-template-columns: clamp(170px, 18vw, 230px) minmax(0, 1fr) !important;
    }

    .company-marquee-header,
    .company-marquee-mask {
        min-width: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   COMPACT DESKTOP — 1101PX TO 1499PX
   Desktop shell/sidebar remain active, while page content reflows safely.
---------------------------------------------------------------------------- */
@media (min-width: 1101px) and (max-width: 1499px) {
    .topbar {
        padding-right: 10px !important;
        padding-left: 10px !important;
        gap: 8px !important;
    }

    .site-nav {
        gap: 3px !important;
    }

        .site-nav a {
            padding-right: 8px !important;
            padding-left: 8px !important;
        }

        .site-nav .nav-label {
            font-size: clamp(10px, 0.9vw, 13px) !important;
        }

    .top-actions {
        gap: 5px !important;
    }

    /* Profile content scales down before it can clip. */
    .profile-name-block h1 {
        font-size: clamp(25px, 2.2vw, 31px) !important;
        letter-spacing: -0.8px !important;
    }

    .profile-name-block p {
        font-size: clamp(12px, 1.05vw, 14px) !important;
        line-height: 1.58 !important;
    }

    .profile-contact {
        gap: 10px !important;
    }

        .profile-contact a {
            min-width: 0 !important;
            padding: 11px 12px !important;
        }

    .profile-contact-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .profile-contact strong {
        min-width: 0 !important;
        font-size: 12px !important;
        overflow-wrap: anywhere !important;
    }

    .profile-actions {
        margin-top: 17px !important;
        padding-top: 17px !important;
        padding-bottom: 12px !important;
    }

    .primary-profile-btn,
    .secondary-profile-btn {
        min-height: 50px !important;
        font-size: 13px !important;
    }

    /* Major hero layouts become single-column before text is squeezed. */
    .modern-home-hero,
    .whatido-hero,
    .portfolio-hero.portfolio-hero--minimal {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(22px, 2.4vw, 34px) !important;
    }

    .modern-home-hero,
    .whatido-hero,
    .portfolio-hero.portfolio-hero--minimal,
    .capabilities-premium-shell,
    .projects-premium-shell,
    .tools-premium-shell,
    .whatido-services-shell,
    .portfolio-catalog,
    .portfolio-featured,
    .portfolio-closing,
    .contact-simple-hero {
        padding-right: var(--responsive-section-padding) !important;
        padding-left: var(--responsive-section-padding) !important;
    }

    .modern-goal-panel,
    .whatido-hero__visual,
    .portfolio-scope-panel {
        width: 100% !important;
        max-width: none !important;
    }

    .modern-hero-title,
    .whatido-hero__title,
    .portfolio-minimal-hero__title,
    .contact-simple-hero__title {
        font-size: clamp(38px, 4.2vw, 58px) !important;
        letter-spacing: -1.7px !important;
    }

    /* 3/4-column areas reflow to two columns in the narrow desktop band. */
    .capabilities-premium-grid,
    .whatido-metrics,
    .portfolio-metrics,
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tools-premium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .portfolio-featured-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .whatido-services-header {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

        .whatido-services-header h2 {
            width: auto !important;
            max-width: 100% !important;
        }

    .contact-simple-hero {
        height: auto !important;
        min-height: 390px !important;
    }

    .capabilities-premium-shell {
        position: relative !important;
        top: -20px !important;
        margin-top: 0 !important;
    }


    .projects-premium-shell {
        position: relative !important;
        top: -40px !important;
        margin-top: 0 !important;
    }

    .tools-premium-shell {
        position: relative !important;
        top: -60px !important;
        margin-top: 0 !important;
    }

    .whatido-services-shell {
        position: relative !important;
        top: -44px !important;
        margin-top: 0 !important;
    }

    .whatido-closing {
        position: relative !important;
        top: -58px !important;
        margin-top: 0 !important;
    }

    .portfolio-metrics.portfolio-metrics--compact {
        position: relative !important;
        top: -10px !important;
        margin-top: 0 !important;
    }

    .portfolio-catalog {
        position: relative !important;
        top: -26px !important;
        margin-top: 0 !important;
    }

    .portfolio-featured {
        position: relative !important;
        top: -40px !important;
        margin-top: 0 !important;
    }

    .portfolio-closing {
        position: relative !important;
        top: -54px !important;
        margin-top: 0 !important;
    }
}


/* Extra protection at the narrowest desktop widths. */
@media (min-width: 1101px) and (max-width: 1280px) {
    .animated-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .animated-stat-card {
        max-width: none !important;
    }

    .whatido-services-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .whatido-service-card__list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .project-premium-item {
        grid-template-columns: 68px minmax(0, 1fr) 56px !important;
        gap: 13px !important;
        padding: 18px !important;
    }

    .project-premium-item__number {
        width: 46px !important;
        height: 46px !important;
    }

    .project-premium-item__arrow {
        width: 42px !important;
        height: 42px !important;
    }

    .capabilities-premium-shell {
        position: relative !important;
        top: -20px !important;
        margin-top: 0 !important;
    }
}


/* Full desktop compositions return only when enough main-column space exists. */
@media (min-width: 1500px) {
    .modern-home-hero {
        grid-template-columns: minmax(0, 1.22fr) minmax(350px, 0.78fr) !important;
    }

    .whatido-hero {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 400px) !important;
    }

    .portfolio-hero.portfolio-hero--minimal {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 350px) !important;
    }

    .capabilities-premium-shell {
        position: relative !important;
        top: -20px !important;
        margin-top: 0 !important;
    }


    .projects-premium-shell {
        position: relative !important;
        top: -40px !important;
        margin-top: 0 !important;
    }

    .tools-premium-shell {
        position: relative !important;
        top: -60px !important;
        margin-top: 0 !important;
    }

    .whatido-services-shell {
        position: relative !important;
        top: -44px !important;
        margin-top: 0 !important;
    }

    .whatido-closing {
        position: relative !important;
        top: -58px !important;
        margin-top: 0 !important;
    }

    .portfolio-metrics.portfolio-metrics--compact {
        position: relative !important;
        top: -10px !important;
        margin-top: 0 !important;
    }

    .portfolio-catalog {
        position: relative !important;
        top: -26px !important;
        margin-top: 0 !important;
    }

    .portfolio-featured {
        position: relative !important;
        top: -40px !important;
        margin-top: 0 !important;
    }

    .portfolio-closing {
        position: relative !important;
        top: -54px !important;
        margin-top: 0 !important;
    }



}


/* ============================================================================
   TABLET — 721PX TO 1100PX
============================================================================ */
@media (min-width: 721px) and (max-width: 1100px) {
    :root {
        --tablet-shell-padding: clamp(14px, 2.2vw, 24px);
        --tablet-section-padding: clamp(24px, 4vw, 38px);
        --tablet-grid-gap: clamp(14px, 2vw, 20px);
    }

    .portfolio-shell {
        width: 100% !important;
        min-height: 100vh !important;
        padding: var(--tablet-shell-padding) !important;
        gap: 14px !important;
    }

    .main-area {
        width: 100% !important;
        min-width: 0 !important;
        gap: 18px !important;
    }

    .page-content {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 0 !important;
    }

    /* Existing tablet/mobile top profile and dropdown behavior is retained. */
    .profile-sidebar {
        width: 100% !important;
        max-width: none !important;
    }

    .main-area > .topbar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .company-marquee-card {
        top: auto !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    /* Fluid section padding without changing colors or effects. */
    .modern-home-hero,
    .capabilities-premium-shell,
    .projects-premium-shell,
    .tools-premium-shell,
    .whatido-hero,
    .whatido-services-shell,
    .whatido-closing,
    .portfolio-hero,
    .portfolio-catalog,
    .portfolio-featured,
    .portfolio-closing,
    .contact-simple-hero {
        width: 100% !important;
        padding-right: var(--tablet-section-padding) !important;
        padding-left: var(--tablet-section-padding) !important;
    }

    .modern-home-hero,
    .whatido-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .modern-goal-panel,
    .whatido-hero__visual,
    .whatido-capability-panel {
        width: 100% !important;
        max-width: none !important;
    }

    .modern-hero-title,
    .whatido-hero__title,
    .portfolio-minimal-hero__title,
    .contact-simple-hero__title {
        font-size: clamp(38px, 6vw, 58px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.8px !important;
    }

    .capabilities-premium-title,
    .projects-premium-title,
    .tools-premium-title,
    .whatido-services-header h2,
    .portfolio-section-header h2,
    .whatido-closing__content h2,
    .portfolio-closing__content h2 {
        font-size: clamp(31px, 4.8vw, 46px) !important;
        line-height: 1.08 !important;
    }

    /* Adaptive tablet grids. They naturally change between one and two columns. */
    .animated-stat-grid,
    .capabilities-premium-grid,
    .tools-premium-grid,
    .whatido-metrics,
    .portfolio-metrics {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
        gap: var(--tablet-grid-gap) !important;
    }

    .animated-stat-card {
        width: 100% !important;
        max-width: none !important;
    }

    .projects-premium-list {
        gap: var(--tablet-grid-gap) !important;
    }

    /* Keep project cards horizontal on tablets instead of stacking every part. */
    .project-premium-item {
        grid-template-columns: 68px minmax(0, 1fr) 56px !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 118px !important;
        padding: 18px !important;
    }

    .project-premium-item__left,
    .project-premium-item__content,
    .project-premium-item__right {
        width: auto !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .project-premium-item__right {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .project-premium-item__arrow {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .whatido-services-header,
    .portfolio-section-header {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

        .whatido-services-header h2 {
            width: auto !important;
            max-width: 100% !important;
        }

    .whatido-services-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
        gap: var(--tablet-grid-gap) !important;
    }

    .whatido-service-card {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .whatido-service-card__list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--tablet-grid-gap) !important;
    }

    .portfolio-featured-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
        gap: var(--tablet-grid-gap) !important;
    }

    .portfolio-card,
    .portfolio-featured-card {
        min-width: 0 !important;
    }

    .portfolio-card__tags,
    .portfolio-featured-card__tags,
    .tool-category-card__tools,
    .capability-premium-card__tags {
        flex-wrap: wrap !important;
    }

    .portfolio-hero.portfolio-hero--minimal {
        gap: clamp(24px, 3vw, 34px) !important;
    }

    .portfolio-scope-panel {
        width: 100% !important;
        max-width: none !important;
    }

    .contact-simple-hero {
        height: auto !important;
        min-height: 360px !important;
        top:-20px;
    }
}


/* Narrow tablets: prefer one-column content where two columns become cramped. */
@media (min-width: 721px) and (max-width: 860px) {
    .animated-stat-grid,
    .tools-premium-grid,
    .whatido-services-grid,
    .portfolio-featured-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .whatido-closing,
    .portfolio-closing {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .whatido-closing__mark,
    .portfolio-closing__mark {
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 100px !important;
        aspect-ratio: auto !important;
    }

    .portfolio-hero.portfolio-hero--minimal {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Mobile (720px and below) is deliberately not overridden here. */




/* =========================================================
   TABLET 721–1100
   KEEP OUTER SECTION SPACING EXACTLY LIKE 720PX

   فقط فاصله بین بلوک‌های اصلی را تنظیم می‌کند.
   هیچ تغییری روی کارت‌های داخلی، Gridها و محتوا ندارد.
========================================================= */

@media (min-width: 721px) and (max-width: 1100px) {

    :root {
        /*
           همان فاصله کارت‌های اصلی در حالت 720px
        */
        --tablet-main-section-gap: 8px;
    }


    /* =====================================================
       MAIN LAYOUT SPACING

       فاصله:
       Profile → Main Menu
       Main Menu → Companies & Brands
       Companies & Brands → Page Content
    ====================================================== */

    .main-area {
        /*
           مقدار اصلی نسخه 720
        */
        gap: 24px !important;
    }


    /*
       در 720px کارت برندها 22px به بالا منتقل می‌شود.

       محاسبه فاصله با منو:
       24px gap + 6px margin - 22px top = 8px
    */
    .company-marquee-card {
        position: relative !important;
        top: -22px !important;
        margin-top: 6px !important;
        margin-bottom: 28px !important;
    }


    /*
       محاسبه فاصله برندها با اولین سکشن:

       24px gap + 28px margin-bottom - 44px = 8px
    */
    .page-content {
        margin-top: -44px !important;
    }


    /* =====================================================
       HOME PAGE — LARGE SECTIONS ONLY
    ====================================================== */

    .capabilities-premium-section,
    .projects-premium-section,
    .tools-premium-section {
        position: relative !important;
        top: -28px !important;
        margin-top: var(--tablet-main-section-gap) !important;
        margin-bottom: 0 !important;
    }


    .modern-home-hero {
        position: relative !important;
        top: -28px !important;
        margin-bottom: 0 !important;
    }


    /*
       Shell داخلی نباید فاصله خارجی اضافه کند
    */
    .capabilities-premium-shell,
    .projects-premium-shell,
    .tools-premium-shell {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* =====================================================
       WHAT I DO PAGE — LARGE SECTIONS ONLY
    ====================================================== */

    .whatido-page {
        gap: var(--tablet-main-section-gap) !important;
        row-gap: var(--tablet-main-section-gap) !important;
        column-gap: 0 !important;
    }


        .whatido-page > :is( .whatido-hero, .whatido-capability-panel, .whatido-business-panel, .whatido-metrics, .whatido-services-shell, .whatido-closing ) {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            top:-20px;
        }


    .whatido-services-shell {
        gap: var(--tablet-main-section-gap) !important;
        row-gap: var(--tablet-main-section-gap) !important;
    }


    .whatido-services-shell,
    .whatido-closing {
        position: relative !important;
        top: -20px !important;
    }


    /* =====================================================
       PORTFOLIO PAGE — LARGE SECTIONS ONLY
    ====================================================== */

    .portfolio-page {
        gap: var(--tablet-main-section-gap) !important;
        row-gap: var(--tablet-main-section-gap) !important;
        column-gap: 0 !important;
    }


        .portfolio-page > :is( .portfolio-hero, .portfolio-metrics, .portfolio-featured, .topbar ) {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            top:-20px;
        }

    .main-area > .topbar {
        margin-top: -14px !important;
        margin-bottom: 0 !important;
        top: -14px;
    }


    .portfolio-metrics.portfolio-metrics--compact {
        position: relative !important;
        top: auto !important;
        margin-top: -20px !important;
    }

    .portfolio-page >
    .portfolio-catalog +
    .portfolio-featured {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }


    /* =====================================================
       CONTACT PAGE — LARGE SECTIONS ONLY
    ====================================================== */

    :is( .contact-page, .contact-simple-page ) {
        gap: var(--tablet-main-section-gap) !important;
        row-gap: var(--tablet-main-section-gap) !important;
    }


        :is( .contact-page, .contact-simple-page ) > section {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
}



/* =========================================================
   PORTFOLIO — MEDIUM DESKTOP LAYOUT
   Only 1101px to 1499px
========================================================= */

@media (min-width: 1101px) and (max-width: 1499px) {

    /* =====================================================
       SECTION HEADERS

       Portfolio Categories
       Featured Portfolio Items

       توضیحات از ستون کناری خارج می‌شود
       و زیر تیتر اصلی قرار می‌گیرد.
    ====================================================== */

    .portfolio-page .portfolio-section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        align-content: start !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-bottom: 24px !important;
    }


        /* Wrapper تیتر و Eyebrow */
        .portfolio-page
        .portfolio-section-header > div {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
        }


        /* تیتر اصلی */
        .portfolio-page
        .portfolio-section-header h2 {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 0 0.09em !important;
            font-size: clamp(36px, 3.15vw, 47px) !important;
            line-height: 1.02 !important;
            letter-spacing: -1.35px !important;
            white-space: normal !important;
            overflow: visible !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }


        /* توضیح کوچک زیر تیتر اصلی */
        .portfolio-page
        .portfolio-section-header > p {
            display: block !important;
            grid-column: 1 !important;
            grid-row: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            justify-self: stretch !important;
            align-self: start !important;
            /*
           اندازه متن با تغییر عرض پنجره کم و زیاد می‌شود
           تا در یک خط باقی بماند.
        */
            font-size: clamp(14px, 0.72vw, 10.5px) !important;
            font-weight: 570 !important;
            line-height: 1.45 !important;
            letter-spacing: -0.08px !important;
            white-space: nowrap !important;
            overflow: visible !important;
            text-overflow: clip !important;
        }


    /* =====================================================
       PORTFOLIO FILTER MENU

       شش گزینه دقیقاً داخل عرض کادر تقسیم می‌شوند.
    ====================================================== */

    .portfolio-page
    .portfolio-filter-shell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }


        .portfolio-page
        .portfolio-filter-shell > .portfolio-filters {
            display: grid !important;
            /*
           عرض ستون‌ها متناسب با طول عنوان هر دسته است.
        */
            grid-template-columns: minmax(62px, 0.72fr) minmax(86px, 1fr) minmax(96px, 1.12fr) minmax(102px, 1.18fr) minmax(122px, 1.5fr) minmax(94px, 1.08fr) !important;
            align-items: stretch !important;
            justify-content: stretch !important;
            gap: 4px !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            padding: 5px !important;
            margin: 0 !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }


    /* هر دکمه دسته‌بندی */
    .portfolio-page
    .portfolio-filters > .portfolio-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 26px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 5px 5px !important;
        box-sizing: border-box !important;
        font-size: 10px !important;
        line-height: 1.08 !important;
        text-align: center !important;
        overflow: hidden !important;
    }


        /* عنوان دسته */
        .portfolio-page
        .portfolio-filters > .portfolio-filter > span {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 10px !important;
            font-weight: 850 !important;
            line-height: 1.08 !important;
            letter-spacing: -0.12px !important;
            text-align: center !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
            hyphens: none !important;
            overflow: visible !important;
        }


        /* عدد کنار هر دسته */
        .portfolio-page
        .portfolio-filters > .portfolio-filter > small {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            justify-self: end !important;
            flex: 0 0 26px !important;
            width: 26px !important;
            min-width: 26px !important;
            max-width: 26px !important;
            height: 28px !important;
            min-height: 28px !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            border-radius: 9px !important;
            font-size: 9px !important;
            line-height: 1 !important;
            overflow: hidden !important;
        }
}


/* =========================================================
   PORTFOLIO — MEDIUM DESKTOP LAYOUT
   Only 1101px to 1499px
========================================================= */

@media (min-width: 1101px) and (max-width: 1499px) {

    /* =====================================================
       SECTION HEADERS

       Portfolio Categories
       Featured Portfolio Items

       توضیحات از ستون کناری خارج می‌شود
       و زیر تیتر اصلی قرار می‌گیرد.
    ====================================================== */

    .portfolio-page .portfolio-section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        align-content: start !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-bottom: 24px !important;
    }


        /* Wrapper تیتر و Eyebrow */
        .portfolio-page
        .portfolio-section-header > div {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
        }


        /* تیتر اصلی */
        .portfolio-page
        .portfolio-section-header h2 {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 0 0.09em !important;
            font-size: clamp(36px, 3.15vw, 47px) !important;
            line-height: 1.02 !important;
            letter-spacing: -1.35px !important;
            white-space: normal !important;
            overflow: visible !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }


        /* توضیح کوچک زیر تیتر اصلی */
        .portfolio-page
        .portfolio-section-header > p {
            display: block !important;
            grid-column: 1 !important;
            grid-row: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            justify-self: stretch !important;
            align-self: start !important;
            /*
           اندازه متن با تغییر عرض پنجره کم و زیاد می‌شود
           تا در یک خط باقی بماند.
        */
            font-size: clamp(14px, 0.72vw, 10.5px) !important;
            font-weight: 570 !important;
            line-height: 1.45 !important;
            letter-spacing: -0.08px !important;
            white-space: nowrap !important;
            overflow: visible !important;
            text-overflow: clip !important;
        }


    /* =====================================================
       PORTFOLIO FILTER MENU

       شش گزینه دقیقاً داخل عرض کادر تقسیم می‌شوند.
    ====================================================== */

    .portfolio-page
    .portfolio-filter-shell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }


        .portfolio-page
        .portfolio-filter-shell > .portfolio-filters {
            display: grid !important;
            /*
           عرض ستون‌ها متناسب با طول عنوان هر دسته است.
        */
            grid-template-columns: minmax(62px, 0.72fr) minmax(86px, 1fr) minmax(96px, 1.12fr) minmax(102px, 1.18fr) minmax(122px, 1.5fr) minmax(94px, 1.08fr) !important;
            align-items: stretch !important;
            justify-content: stretch !important;
            gap: 4px !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            padding: 5px !important;
            margin: 0 !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }


    /* هر دکمه دسته‌بندی */
    .portfolio-page
    .portfolio-filters > .portfolio-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 26px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 5px 5px !important;
        box-sizing: border-box !important;
        font-size: 10px !important;
        line-height: 1.08 !important;
        text-align: center !important;
        overflow: hidden !important;
    }


        /* عنوان دسته */
        .portfolio-page
        .portfolio-filters > .portfolio-filter > span {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 10px !important;
            font-weight: 850 !important;
            line-height: 1.08 !important;
            letter-spacing: -0.12px !important;
            text-align: center !important;
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
            hyphens: none !important;
            overflow: visible !important;
        }


        /* عدد کنار هر دسته */
        .portfolio-page
        .portfolio-filters > .portfolio-filter > small {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            justify-self: end !important;
            flex: 0 0 26px !important;
            width: 26px !important;
            min-width: 26px !important;
            max-width: 26px !important;
            height: 28px !important;
            min-height: 28px !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            border-radius: 9px !important;
            font-size: 9px !important;
            line-height: 1 !important;
            overflow: hidden !important;
        }
}


/* =========================================================
   PORTFOLIO FILTER — WRAP LONG CATEGORY TITLES
   1101px تا 1499px
========================================================= */

@media (min-width: 1101px) and (max-width: 1499px) {

    /* خود دکمه دسته‌بندی */
    .portfolio-page
    .portfolio-filter-shell
    .portfolio-filters > .portfolio-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 28px !important;
        align-items: center !important;
        align-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 62px !important;
        max-height: none !important;
        padding: 7px 5px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }


        /* عنوان کوچک داخل دکمه */
        .portfolio-page
        .portfolio-filter-shell
        .portfolio-filters > .portfolio-filter > span {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 2px !important;
            font-size: 12px !important;
            font-weight: 850 !important;
            line-height: 1.15 !important;
            letter-spacing: -0.1px !important;
            text-align: center !important;
            /* متن به خط بعد برود */
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            hyphens: none !important;
            overflow: visible !important;
            text-overflow: clip !important;
            box-sizing: border-box !important;
        }


        /* شمارنده کنار عنوان ثابت بماند */
        .portfolio-page
        .portfolio-filter-shell
        .portfolio-filters > .portfolio-filter > small {
            align-self: center !important;
            justify-self: end !important;
            flex: 0 0 28px !important;
            width: 28px !important;
            min-width: 28px !important;
            max-width: 28px !important;
            height: 30px !important;
            min-height: 30px !important;
            margin: 0 !important;
            padding: 0 !important;
        }
}


@media (min-width: 1101px) and (max-width: 1499px) {

    .portfolio-page
    .portfolio-section-header > p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.55 !important;
    }
}


/* =========================================================
   PORTFOLIO HEADERS — DESKTOP
   Move small intro text below main title
========================================================= */

@media (min-width: 1101px) {

    .portfolio-page .portfolio-catalog .portfolio-section-header,
    .portfolio-page .portfolio-featured .portfolio-section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

        /* بلوک تیتر اصلی */
        .portfolio-page .portfolio-catalog .portfolio-section-header > div,
        .portfolio-page .portfolio-featured .portfolio-section-header > div {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

        /* خود تیتر اصلی */
        .portfolio-page .portfolio-catalog .portfolio-section-header h2,
        .portfolio-page .portfolio-featured .portfolio-section-header h2 {
            width: 100% !important;
            max-width: 900px !important;
            margin: 0 !important;
        }

        /* متن کوچک توضیحی */
        .portfolio-page .portfolio-catalog .portfolio-section-header > p,
        .portfolio-page .portfolio-featured .portfolio-section-header > p {
            grid-column: 1 !important;
            grid-row: auto !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            justify-self: start !important;
            align-self: start !important;
            text-align: left !important;
            white-space: normal !important;
        }
}


/* =========================================================
   WHAT I DO — FULL-WIDTH SERVICES TITLE ON DESKTOP
========================================================= */

@media (min-width: 1101px) {

    /* هدر سکشن از دو ستون به یک ستون تبدیل شود */
    .whatido-page
    .whatido-services-shell
    .whatido-services-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        align-content: start !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }


    /* بلوک سمت چپ هدر تمام عرض شود */
    .whatido-page
    .whatido-services-header > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* تیتر اصلی از تمام عرض قابل استفاده استفاده کند */
    .whatido-page
    .whatido-services-header
    h2 {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 0 0.1em !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }


        /*
       اگر داخل Razor بین بخش‌های عنوان <br> گذاشته شده،
       در دسکتاپ حذف شود تا مرورگر خودش طبیعی Wrap کند.
    */
        .whatido-page
        .whatido-services-header
        h2 br {
            display: none !important;
        }


    /* متن توضیحی کوچک زیر تیتر قرار بگیرد */
    .whatido-page
    .whatido-services-header > p {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 980px !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: start !important;
        align-self: start !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}


/* =========================================================
   WHAT I DO HERO TITLE
   Only between 1500px and 1700px
========================================================= */

@media (min-width: 1500px) and (max-width: 1700px) {

    .whatido-hero__title {
        font-size: 58px !important;
    }
}




/* =========================================================
   CONTACT PAGE — MOBILE STACK
   Contact information first, form below
========================================================= */

@media (max-width: 720px) {

    .page-content .contact-box {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        align-content: start !important;
        gap: 26px !important;
        row-gap: 26px !important;
        column-gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 24px 18px !important;
        box-sizing: border-box !important;
    }


        /* بخش نوشته‌های Contact Information */
        .page-content
        .contact-box > :not(.contact-form) {
            grid-column: 1 !important;
            grid-row: 1 !important;
            order: 1 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }


        /* فرم دقیقاً زیر اطلاعات تماس */
        .page-content
        .contact-box > .contact-form {
            grid-column: 1 !important;
            grid-row: 2 !important;
            order: 2 !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }


        /* تمام فیلدهای فرم تمام‌عرض باشند */
        .page-content
        .contact-box
        .contact-form
        :is( input, select, textarea, button ) {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
}




/* =========================================================
   PERSIAN / RTL LANGUAGE LAYER
   ---------------------------------------------------------
   - English layout remains untouched.
   - Profile sidebar keeps its physical position on the right.
   - All page content becomes RTL and right-aligned.
   - Light and dark themes use the same responsive geometry.
========================================================= */

html[data-language="fa"] {
    direction: rtl;
}

html[data-language="fa"] body {
    font-family: "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif !important;
    direction: rtl;
}

/*
   Keep the structural shell physical LTR so the fixed profile
   column stays on the right exactly like the English version.
*/
html[data-language="fa"] .portfolio-shell {
    direction: ltr !important;
}

/*
   Apply Persian direction inside both physical columns.
*/
html[data-language="fa"] :is(
    .main-area,
    .profile-sidebar,
    .profile-card,
    .page-content
) {
    direction: rtl !important;
}

/* =========================================================
   GLOBAL PERSIAN TYPOGRAPHY
========================================================= */

html[data-language="fa"] :is(
    h1, h2, h3, h4, h5, h6,
    p, li, label, input, textarea, select, option,
    button, a, strong, small
) {
    font-family: "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif !important;
}

html[data-language="fa"] :is(
    h1, h2, h3, h4, h5, h6,
    .modern-hero-title,
    .capabilities-premium-title,
    .projects-premium-title,
    .tools-premium-title,
    .whatido-hero__title,
    .whatido-services-header h2,
    .portfolio-minimal-hero__title,
    .portfolio-section-header h2,
    .contact-simple-hero__title
) {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    line-height: 1.34 !important;
    text-align: right !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

html[data-language="fa"] :is(
    p,
    .modern-hero-lead,
    .modern-hero-description,
    .capabilities-premium-intro,
    .projects-premium-intro,
    .tools-premium-intro,
    .whatido-hero__lead,
    .whatido-services-header > p,
    .portfolio-minimal-hero__description,
    .portfolio-section-header > p,
    .contact-simple-hero__description
) {
    text-align: right !important;
    line-height: 1.95 !important;
    letter-spacing: 0 !important;
}

html[data-language="fa"] :is(
    .modern-hero-eyebrow,
    .capabilities-premium-eyebrow,
    .projects-premium-eyebrow,
    .tools-premium-eyebrow,
    .whatido-eyebrow,
    .whatido-section-eyebrow,
    .portfolio-eyebrow,
    .portfolio-section-header__eyebrow,
    .contact-simple-hero__eyebrow
) {
    direction: rtl !important;
    text-align: right !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Keep technical codes, emails and product identifiers readable. */
html[data-language="fa"] :is(
    code,
    .profile-contact-text strong,
    .portfolio-card__placeholder,
    .portfolio-featured-card__number,
    .project-premium-item__number,
    .tool-category-card__badge,
    .capability-premium-card__number,
    .whatido-service-card__number,
    .modern-goal-outcome__number
) {
    unicode-bidi: plaintext;
}

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

html[data-language="fa"] .topbar {
    direction: rtl !important;
}

html[data-language="fa"] .site-nav {
    direction: rtl !important;
}

html[data-language="fa"] .site-nav a {
    direction: rtl !important;
}

html[data-language="fa"] .nav-label {
    text-align: right !important;
}

html[data-language="fa"] .top-actions {
    direction: ltr !important;
}

html[data-language="fa"] .mobile-menu-toggle {
    direction: rtl !important;
}

html[data-language="fa"] .mobile-menu-toggle__label {
    text-align: right !important;
}

/* =========================================================
   COMPANY MARQUEE
========================================================= */

html[data-language="fa"] .company-marquee-card {
    direction: rtl !important;
}

html[data-language="fa"] .company-marquee-header {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .company-marquee-track {
    /*
       Preserve the exact marquee movement and seamless loop.
       Only the text inside each item is RTL.
    */
    direction: ltr !important;
}

html[data-language="fa"] .company-logo-item {
    direction: rtl !important;
}



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

html[data-language="fa"] .profile-sidebar {
    /*
       Explicit physical positioning remains on the right.
    */
    direction: rtl !important;
}

html[data-language="fa"] :is(
    .profile-name-block,
    .profile-contact-text,
    .profile-mobile-collapsed-bar__text
) {
    text-align: right !important;
}

html[data-language="fa"] .profile-status {
    direction: rtl !important;
}

html[data-language="fa"] .profile-contact a {
    direction: rtl !important;
}

html[data-language="fa"] .profile-contact-text {
    min-width: 0 !important;
}

html[data-language="fa"] .profile-contact-text :is(span, strong) {
    text-align: right !important;
}

html[data-language="fa"] .profile-contact-arrow svg {
    transform: scaleX(-1) !important;
}

html[data-language="fa"] .profile-actions {
    direction: rtl !important;
}

html[data-language="fa"] :is(
    .profile-mobile-expand-button,
    .profile-mobile-collapse-button
) {
    direction: rtl !important;
}

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

html[data-language="fa"] .modern-home-hero {
    direction: rtl !important;
}

html[data-language="fa"] .modern-home-hero__content {
    text-align: right !important;
}

html[data-language="fa"] .modern-hero-actions {
    direction: rtl !important;
    justify-content: flex-start !important;
}

html[data-language="fa"] .modern-hero-btn {
    direction: rtl !important;
}

html[data-language="fa"] .modern-hero-btn--primary svg {
    transform: scaleX(-1) !important;
}

html[data-language="fa"] :is(
    .animated-stat-front,
    .animated-stat-reveal,
    .animated-stat-header,
    .animated-stat-list
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .animated-stat-list {
    padding-right: 28px !important;
    padding-left: 8px !important;
}

html[data-language="fa"] .animated-stat-list li::before {
    right: -16px !important;
    left: auto !important;
}

html[data-language="fa"] .modern-goal-panel {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .modern-goal-panel__top {
    direction: rtl !important;
}

html[data-language="fa"] .modern-goal-outcome {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] :is(
    .capabilities-premium-header,
    .projects-premium-header,
    .tools-premium-header
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] :is(
    .capabilities-premium-grid,
    .projects-premium-list,
    .tools-premium-grid
) {
    direction: rtl !important;
}

html[data-language="fa"] :is(
    .capability-premium-card,
    .project-premium-item,
    .tool-category-card
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] :is(
    .capability-premium-card__title,
    .capability-premium-card__desc,
    .project-premium-item__title,
    .project-premium-item__desc,
    .tool-category-card__meta
) {
    text-align: right !important;
}

html[data-language="fa"] :is(
    .capability-premium-card__tags,
    .project-premium-item__meta,
    .tool-category-card__tools
) {
    direction: rtl !important;
    justify-content: flex-start !important;
}

html[data-language="fa"] .project-premium-item__arrow {
    transform: scaleX(-1) !important;
}


/* اگر کارت اول هاور شد */
    html[data-language="fa"] .animated-stat-grid:has(.animated-stat-card:nth-child(1):hover)
    .animated-stat-card:nth-child(2) {
        transform: translateX(-18px) scale(0.985) !important;
    }

    html[data-language="fa"] .animated-stat-grid:has(.animated-stat-card:nth-child(1):hover)
    .animated-stat-card:nth-child(3) {
        transform: translateX(-10px) scale(0.985) !important;
    }


/* اگر کارت دوم هاور شد */
    html[data-language="fa"] .animated-stat-grid:has(.animated-stat-card:nth-child(2):hover)
    .animated-stat-card:nth-child(1) {
        transform: translateX(+16px) scale(0.985) !important;
    }

    html[data-language="fa"] .animated-stat-grid:has(.animated-stat-card:nth-child(2):hover)
    .animated-stat-card:nth-child(3) {
        transform: translateX(-16px) scale(0.985) !important;
    }


/* اگر کارت سوم هاور شد */
    html[data-language="fa"] .animated-stat-grid:has(.animated-stat-card:nth-child(3):hover)
    .animated-stat-card:nth-child(2) {
        transform: translateX(+18px) scale(0.985) !important;
    }

    html[data-language="fa"] .animated-stat-grid:has(.animated-stat-card:nth-child(3):hover)
    .animated-stat-card:nth-child(1) {
        transform: translateX(+10px) scale(0.985) !important;
    }





/* =========================================================
   WHAT I DO PAGE
========================================================= */

html[data-language="fa"] .whatido-page {
    direction: rtl !important;
}

html[data-language="fa"] :is(
    .whatido-hero,
    .whatido-hero__content,
    .whatido-capability-panel,
    .whatido-services-shell,
    .whatido-services-header,
    .whatido-service-card,
    .whatido-closing,
    .whatido-closing__content
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] :is(
    .whatido-hero__pill-row,
    .whatido-service-card__list
) {
    direction: rtl !important;
}

html[data-language="fa"] .whatido-service-card__header {
    direction: rtl !important;
}

html[data-language="fa"] .whatido-service-card__list li {
    text-align: right !important;
}

html[data-language="fa"] .whatido-service-card__list li::before {
    right: 0 !important;
    left: auto !important;
}

html[data-language="fa"] .whatido-service-card__list li {
    padding-right: 18px !important;
    padding-left: 0 !important;
}

html[data-language="fa"] .whatido-closing__mark {
    direction: rtl !important;
    text-align: right !important;
}

/* =========================================================
   PORTFOLIO PAGE
========================================================= */

html[data-language="fa"] .portfolio-page {
    direction: rtl !important;
}

html[data-language="fa"] :is(
    .portfolio-hero,
    .portfolio-minimal-hero__content,
    .portfolio-scope-panel,
    .portfolio-section-header,
    .portfolio-catalog,
    .portfolio-featured,
    .portfolio-closing
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .portfolio-section-header > p {
    text-align: right !important;
    justify-self: start !important;
}

html[data-language="fa"] :is(
    .portfolio-minimal-hero__tags,
    .portfolio-card__tags,
    .portfolio-featured-card__tags
) {
    direction: rtl !important;
    justify-content: flex-start !important;
}

html[data-language="fa"] .portfolio-scope-panel__item {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-metric {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .portfolio-filter-shell {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-filters {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-filter {
    direction: rtl !important;
    text-align: center !important;
}

html[data-language="fa"] .portfolio-filter-toggle {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .portfolio-filter-toggle__content {
    text-align: right !important;
}

html[data-language="fa"] .portfolio-filter-toggle__arrow {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[data-language="fa"] .portfolio-grid {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-card {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .portfolio-card__body :is(h3, p) {
    text-align: right !important;
}

html[data-language="fa"] .portfolio-card__meta {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-card__open svg,
html[data-language="fa"] .portfolio-featured-card__link svg {
    transform: scaleX(-1) !important;
}

html[data-language="fa"] .portfolio-featured-grid {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-featured-card {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .portfolio-featured-card__content :is(h3, p) {
    text-align: right !important;
}

html[data-language="fa"] .portfolio-lightbox {
    direction: rtl !important;
}

html[data-language="fa"] .portfolio-lightbox__header,
html[data-language="fa"] .portfolio-lightbox__footer {
    direction: rtl !important;
    text-align: right !important;
}

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

html[data-language="fa"] :is(
    .contact-simple-hero,
    .contact-simple-hero__content,
    .contact-box,
    .contact-form
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .contact-box > div {
    text-align: right !important;
}

html[data-language="fa"] .contact-form :is(
    input,
    textarea,
    select,
    option
) {
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"] .contact-form input[type="email"] {
    unicode-bidi: plaintext;
}

html[data-language="fa"] .contact-simple-hero__tags {
    direction: rtl !important;
    justify-content: flex-start !important;
}

/* =========================================================
   PERSIAN TEXT SAFETY
   Prevent long Persian labels from clipping.
========================================================= */

html[data-language="fa"] :is(
    .nav-label,
    .mobile-menu-toggle__label,
    .profile-contact-text span,
    .profile-contact-text strong,
    .modern-goal-label,
    .capability-premium-card__tags span,
    .project-premium-item__meta span,
    .tool-category-card__tools span,
    .whatido-hero__pill-row span,
    .whatido-service-card__list li,
    .portfolio-minimal-hero__tags span,
    .portfolio-filter > span,
    .portfolio-card__tags span,
    .portfolio-featured-card__tags span,
    .contact-simple-hero__tags span
) {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* =========================================================
   DESKTOP — PERSIAN TYPOGRAPHY
========================================================= */

@media (min-width: 1500px) {

    html[data-language="fa"] .modern-hero-title {
        font-size: clamp(52px, 4.15vw, 78px) !important;
    }

    html[data-language="fa"] :is(
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title
    ) {
        font-size: clamp(42px, 3.65vw, 62px) !important;
    }

    html[data-language="fa"] .whatido-hero__title {
        font-size: clamp(48px, 3.8vw, 64px) !important;
    }

    html[data-language="fa"] .whatido-services-header h2 {
        font-size: clamp(42px, 3.5vw, 58px) !important;
    }

    html[data-language="fa"] .portfolio-minimal-hero__title {
        font-size: clamp(42px, 3.45vw, 60px) !important;
    }

    html[data-language="fa"] .portfolio-section-header h2 {
        font-size: clamp(34px, 2.7vw, 48px) !important;
    }

    html[data-language="fa"] .contact-simple-hero__title {
        font-size: clamp(46px, 3.7vw, 64px) !important;
    }
}

/* =========================================================
   COMPACT DESKTOP — 1101PX TO 1499PX
========================================================= */

@media (min-width: 1101px) and (max-width: 1499px) {

    html[data-language="fa"] :is(
        .modern-hero-title,
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title,
        .whatido-hero__title,
        .whatido-services-header h2,
        .portfolio-minimal-hero__title,
        .contact-simple-hero__title
    ) {
        max-width: 100% !important;
    }

    html[data-language="fa"] .modern-hero-title {
        font-size: clamp(42px, 4vw, 57px) !important;
    }

    html[data-language="fa"] :is(
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title
    ) {
        font-size: clamp(36px, 3.45vw, 50px) !important;
    }

    html[data-language="fa"] .whatido-hero__title {
        font-size: clamp(40px, 3.65vw, 53px) !important;
    }

    html[data-language="fa"] .whatido-services-header h2 {
        font-size: clamp(37px, 3.45vw, 50px) !important;
    }

    html[data-language="fa"] .portfolio-minimal-hero__title {
        font-size: clamp(38px, 3.5vw, 51px) !important;
    }

    html[data-language="fa"] .portfolio-section-header h2 {
        font-size: clamp(31px, 2.9vw, 43px) !important;
    }

    html[data-language="fa"] .contact-simple-hero__title {
        font-size: clamp(40px, 3.55vw, 52px) !important;
    }

    /*
       The Persian category names are wider. Give the long
       exhibition category more room while keeping all filters inside.
    */
    html[data-language="fa"] .portfolio-page
    .portfolio-filter-shell > .portfolio-filters {
        grid-template-columns:
            minmax(62px, .72fr)
            minmax(82px, .95fr)
            minmax(96px, 1.08fr)
            minmax(108px, 1.28fr)
            minmax(142px, 1.7fr)
            minmax(102px, 1.15fr) !important;
    }

    html[data-language="fa"] .portfolio-page
    .portfolio-filters > .portfolio-filter {
        min-height: 66px !important;
    }

    html[data-language="fa"] .portfolio-page
    .portfolio-filters > .portfolio-filter > span {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }
}

/* =========================================================
   TABLET — 721PX TO 1100PX
========================================================= */

@media (min-width: 721px) and (max-width: 1100px) {

    html[data-language="fa"] :is(
        .modern-hero-title,
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title,
        .whatido-hero__title,
        .whatido-services-header h2,
        .portfolio-minimal-hero__title,
        .portfolio-section-header h2,
        .contact-simple-hero__title
    ) {
        max-width: 100% !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
    }

    html[data-language="fa"] .modern-hero-title {
        font-size: clamp(40px, 5.2vw, 54px) !important;
    }

    html[data-language="fa"] :is(
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title
    ) {
        font-size: clamp(34px, 4.5vw, 47px) !important;
    }

    html[data-language="fa"] .whatido-hero__title {
        font-size: clamp(38px, 5vw, 52px) !important;
    }

    html[data-language="fa"] .whatido-services-header h2 {
        font-size: clamp(34px, 4.4vw, 46px) !important;
    }

    html[data-language="fa"] .portfolio-minimal-hero__title {
        font-size: clamp(36px, 4.7vw, 49px) !important;
    }

    html[data-language="fa"] .portfolio-section-header h2 {
        font-size: clamp(30px, 4vw, 42px) !important;
    }

    html[data-language="fa"] .contact-simple-hero__title {
        font-size: clamp(38px, 4.9vw, 51px) !important;
    }

    html[data-language="fa"] .site-nav a {
        text-align: right !important;
    }

    html[data-language="fa"] .portfolio-filter-shell
    .portfolio-filters .portfolio-filter {
        text-align: right !important;
    }

    html[data-language="fa"] .portfolio-filter-shell
    .portfolio-filter > span {
        text-align: right !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   MOBILE — 720PX AND BELOW
   Preserve the finished mobile geometry; adjust only Persian text.
========================================================= */

@media (max-width: 720px) {

    html[data-language="fa"] :is(
        .modern-hero-title,
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title,
        .whatido-hero__title,
        .whatido-services-header h2,
        .portfolio-minimal-hero__title,
        .portfolio-section-header h2,
        .contact-simple-hero__title
    ) {
        width: 100% !important;
        max-width: 100% !important;
        letter-spacing: 0 !important;
        line-height: 1.42 !important;
        overflow: visible !important;
    }

    html[data-language="fa"] .modern-hero-title {
        font-size: clamp(34px, 10vw, 43px) !important;
    }

    html[data-language="fa"] :is(
        .capabilities-premium-title,
        .projects-premium-title,
        .tools-premium-title
    ) {
        font-size: clamp(30px, 8.7vw, 38px) !important;
    }

    html[data-language="fa"] .whatido-hero__title {
        font-size: clamp(33px, 9.2vw, 41px) !important;
    }

    html[data-language="fa"] .whatido-services-header h2 {
        font-size: clamp(30px, 8.4vw, 37px) !important;
    }

    html[data-language="fa"] .portfolio-minimal-hero__title {
        font-size: clamp(32px, 9vw, 40px) !important;
    }

    html[data-language="fa"] .portfolio-section-header h2 {
        font-size: clamp(28px, 7.8vw, 35px) !important;
    }

    html[data-language="fa"] .contact-simple-hero__title {
        font-size: clamp(34px, 9.4vw, 42px) !important;
    }

    html[data-language="fa"] :is(
        .modern-hero-lead,
        .modern-hero-description,
        .capabilities-premium-intro,
        .projects-premium-intro,
        .tools-premium-intro,
        .whatido-hero__lead,
        .whatido-services-header > p,
        .portfolio-minimal-hero__description,
        .portfolio-section-header > p,
        .contact-simple-hero__description
    ) {
        font-size: 12px !important;
        line-height: 1.95 !important;
    }

    html[data-language="fa"] .modern-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-language="fa"] .modern-hero-btn {
        white-space: normal !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    html[data-language="fa"] .animated-stat-front {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html[data-language="fa"] .animated-stat-front span {
        white-space: normal !important;
        line-height: 1.35 !important;
        text-align: right !important;
    }

    html[data-language="fa"] .animated-stat-header span {
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    html[data-language="fa"] .animated-stat-list {
        padding-right: 16px !important;
        padding-left: 4px !important;
    }

    html[data-language="fa"] .animated-stat-list li {
        white-space: normal !important;
        line-height: 1.25 !important;
        text-align: right !important;
    }

    html[data-language="fa"] .animated-stat-list li::before {
        right: -9px !important;
        left: auto !important;
    }

    html[data-language="fa"] .site-nav a {
        direction: rtl !important;
        text-align: right !important;
    }

    html[data-language="fa"] .portfolio-filter-shell
    .portfolio-filters .portfolio-filter {
        grid-template-columns: minmax(0, 1fr) auto !important;
        text-align: right !important;
    }

    html[data-language="fa"] .portfolio-filter-shell
    .portfolio-filter > span {
        text-align: right !important;
        font-size: 10px !important;
        line-height: 1.6 !important;
    }

    html[data-language="fa"] .profile-mobile-collapsed-bar__text span {
        white-space: normal !important;
    }

    html[data-language="fa"] .contact-box {
        direction: rtl !important;
    }
}

/* =========================================================
   DARK THEME + PERSIAN
   Layout is intentionally identical to Persian light mode.
========================================================= */

html[data-theme="dark"][data-language="fa"] :is(
    .modern-hero-title,
    .capabilities-premium-title,
    .projects-premium-title,
    .tools-premium-title,
    .whatido-hero__title,
    .whatido-services-header h2,
    .portfolio-section-header h2,
    .contact-simple-hero__title
) {
    letter-spacing: 0 !important;
}













/* =========================================================
   PERSIAN MAIN NAV — ICON / LABEL SPACING
========================================================= */

@media (min-width: 1101px) {

    html[data-language="fa"]
    .site-nav
    .nav-icon {
        margin-right: 0 !important;
        margin-left: 0 !important;
        transition: width 0.54s cubic-bezier(.18, 1, .28, 1), flex-basis 0.54s cubic-bezier(.18, 1, .28, 1), margin-left 0.54s cubic-bezier(.18, 1, .28, 1), opacity 0.34s ease, transform 0.62s cubic-bezier(.18, 1.18, .28, 1), box-shadow 0.34s ease !important;
    }


    /* فاصله بین آیکون و عنوان در حالت Hover و Active */
    html[data-language="fa"]
    .site-nav
    a:hover
    .nav-icon,
    html[data-language="fa"]
    .site-nav
    a.active
    .nav-icon {
        margin-right: 0 !important;
        margin-left: 10px !important;
    }


    /* حرکت متن نیز متناسب با RTL شود */
    html[data-language="fa"]
    .site-nav
    a:hover
    .nav-label {
        transform: translateX(-1px) !important;
    }
}



/* =========================================================
   LANGUAGE SWITCH — ROOT STATE FALLBACK
========================================================= */

/* موقعیت انگلیسی */
html[data-language="en"]
.language-switch::before {
    transform: translateX(0) !important;
}


/* موقعیت فارسی */
html[data-language="fa"]
.language-switch::before {
    transform: translateX(42px) !important;
}


/* متن غیرفعال */
html[data-language]
.language-switch
button {
    color: #7b8392 !important;
}


/* انگلیسی فعال */
html[data-language="en"]
.language-switch
button[data-language-option="en"] {
    color: #071b33 !important;
}


/* فارسی فعال */
html[data-language="fa"]
.language-switch
button[data-language-option="fa"] {
    color: #071b33 !important;
}


/* Dark Mode */
html[data-theme="dark"][data-language]
.language-switch
button {
    color: var(--dark-muted-cool) !important;
}


html[data-theme="dark"][data-language="en"]
.language-switch
button[data-language-option="en"],
html[data-theme="dark"][data-language="fa"]
.language-switch
button[data-language-option="fa"] {
    color: #0b0c0f !important;
}



/* =========================================================
   PERSIAN COMPANY MARQUEE — TRUE CONTINUOUS LOOP
========================================================= */

/*
   نکته اصلی:
   Mask نباید جهت RTL داشته باشد؛
   چون Track باید دقیقاً از لبه چپ شروع شود.
*/
html[data-language="fa"]
.company-marquee-mask {
    direction: ltr !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}


/* Track اصلی */
html[data-language="fa"]
.company-marquee-track {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate3d(0, 0, 0);
    animation: companyMarqueeMovePersian 26s linear infinite !important;
    will-change: transform !important;
}


    /*
   دو گروه باید دقیقاً پشت سر هم قرار بگیرند
   و هیچ‌کدام کوچک یا مخفی نشوند.
*/
    html[data-language="fa"]
    .company-marquee-track > .company-marquee-group {
        direction: ltr !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 18px 0 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }


/* گروه دوم تکراری حتماً نمایش داده شود */
html[data-language="fa"]
.company-marquee-group[aria-hidden="true"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* خود کارت برند فارسی و راست‌چین بماند */
html[data-language="fa"]
.company-logo-item {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 230px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    overflow: hidden !important;
}


    /* نام شرکت داخل کارت */
    html[data-language="fa"]
    .company-logo-item strong {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        overflow: hidden !important;
    }


/* حرکت دقیقاً به‌اندازه نصف Track، یعنی یک گروه کامل */
@keyframes companyMarqueeMovePersian {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}


/* توقف هنگام Hover */
html[data-language="fa"]
.company-marquee-card:hover
.company-marquee-track {
    animation-play-state: paused !important;
}


@media (max-width: 1100px) {

    html[data-language="fa"]
    .company-logo-item {
        flex-basis: 195px !important;
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
    }
}


/* =========================================================
   PERSIAN COMPANY MARQUEE HEADER — MIRRORED DESIGN
========================================================= */

@media (min-width: 1101px) {

    html[data-language="fa"]
    .company-marquee-header {
        /*
           خط سمت راست حذف شود
           و به سمت چپ منتقل شود
        */
        border-right: none !important;
        border-left: 1px solid rgba(111, 92, 53, 0.22) !important;
        /*
           گرادیانت برعکس نسخه انگلیسی:
           رنگ قوی سمت راست و محوشدن به سمت چپ
        */
        background: linear-gradient( 270deg, rgba(255, 248, 230, 0.92) 0%, rgba(255, 248, 230, 0.52) 55%, transparent 100% ) !important;
        text-align: right !important;
        align-items: flex-start !important;
    }
}


/* =========================================================
   PERSIAN COMPANY MARQUEE HEADER — MIRRORED DESIGN
========================================================= */

@media (min-width: 1101px) {

    html[data-language="fa"]
    .company-marquee-header {
        /*
           خط سمت راست حذف شود
           و به سمت چپ منتقل شود
        */
        border-right: none !important;
        border-left: 1px solid rgba(111, 92, 53, 0.85) !important;

        background: linear-gradient(270deg, rgb(189 172 126 / 92%), rgb(197 179 133 / 57%), #cbc4af7a) !important;
        /*
           گرادیانت برعکس نسخه انگلیسی:
           رنگ قوی سمت راست و محوشدن به سمت چپ
        */

        text-align: right !important;
        align-items: flex-start !important;
    }
}


/* =========================================================
   DARK THEME — PERSIAN COMPANY MARQUEE HEADER
========================================================= */

html[data-theme="dark"][data-language="fa"]
.company-marquee-header {
    border-right: none !important;
    border-left: 1px solid rgba(216, 170, 79, 0.34) !important;
    background: linear-gradient( 270deg, rgb(87 78 60 / 96%) 0%, rgb(68 61 48 / 84%) 52%, rgb(43 40 34 / 70%) 100% ) !important;
    text-align: right !important;
    align-items: flex-start !important;
}

    html[data-theme="dark"][data-language="fa"]
    .company-marquee-header span {
        color: #d8b66d !important;
    }

    html[data-theme="dark"][data-language="fa"]
    .company-marquee-header strong {
        color: #f4e8cf !important;
    }



/* =========================================================
   PERSIAN MOBILE — PROJECT ARROW TOP LEFT
========================================================= */

@media (max-width: 720px) {

    html[data-language="fa"]
    .projects-premium-section
    .project-premium-item {
        position: relative !important;
    }


        /* انتقال Wrapper فلش به بالا سمت چپ */
        html[data-language="fa"]
        .projects-premium-section
        .project-premium-item > .project-premium-item__right {
            position: absolute !important;
            top: 20px !important;
            left: 18px !important;
            right: auto !important;
            bottom: auto !important;
            z-index: 8 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            margin: 0 !important;
            padding: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }


        /* خود دکمه فلش */
        html[data-language="fa"]
        .projects-premium-section
        .project-premium-item
        .project-premium-item__arrow {
            position: relative !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            margin: 0 !important;
            padding: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }


        /*
       فضای سمت چپ بخش بالای کارت برای فلش حفظ شود
       تا مربع شماره با فلش تداخل نداشته باشد
    */
        html[data-language="fa"]
        .projects-premium-section
        .project-premium-item > .project-premium-item__left {
            width: 100% !important;
            min-width: 0 !important;
            padding-right: 0 !important;
            padding-left: 64px !important;
            box-sizing: border-box !important;
        }


        /* Hover متناسب با جهت فارسی */
        html[data-language="fa"]
        .projects-premium-section
        .project-premium-item:hover
        .project-premium-item__arrow {
            transform: translateX(-2px) translateY(-1px) scale(1.04) !important;
        }
}



/* =========================================================
   PERSIAN — WHAT I DO CAPABILITY TITLE IN ONE LINE
========================================================= */

html[data-language="fa"]
.whatido-capability-panel__content h2 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
}


    /* span دیگر به خط بعد نرود */
    html[data-language="fa"]
    .whatido-capability-panel__content h2 span {
        display: inline !important;
        margin-right: 7px !important;
        white-space: nowrap !important;
    }


@media (max-width: 720px) {

    html[data-language="fa"]
    .whatido-capability-panel__content h2 {
        font-size: clamp(21px, 6.4vw, 31px) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
    }
}





/* =========================================================
   DATABASE BRAND LANGUAGE DISPLAY
========================================================= */

/*
   حالت پیش‌فرض و انگلیسی:
   فقط نام انگلیسی نمایش داده شود.
*/
.company-logo-item
.company-brand-name--en {
    display: block !important;
}

.company-logo-item
.company-brand-name--fa {
    display: none !important;
}


/*
   زبان فارسی:
   نام انگلیسی مخفی و نام فارسی نمایش داده شود.
*/
html[data-language="fa"]
.company-logo-item
.company-brand-name--en {
    display: none !important;
}

html[data-language="fa"]
.company-logo-item
.company-brand-name--fa {
    display: -webkit-box !important;
    min-width: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3;
}


/*
   انگلیسی همیشه چپ‌چین بماند.
*/
html:not([data-language="fa"])
.company-logo-item
.company-brand-name--en {
    direction: ltr !important;
    text-align: left !important;
}


/*
   وضعیت Loading یا خالی‌بودن دیتابیس
*/
.company-marquee-state {
    width: 100% !important;
    height: 100% !important;
    padding: 20px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.company-marquee-loading,
.company-marquee-empty {
    color: rgba(7, 27, 51, 0.58) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
}


/* Dark mode */
html[data-theme="dark"]
.company-marquee-loading,
html[data-theme="dark"]
.company-marquee-empty {
    color: rgba(245, 236, 216, 0.62) !important;
}


/* Tablet و Mobile */
@media (max-width: 1100px) {

    html[data-language="fa"]
    .company-logo-item
    .company-brand-name--fa {
        -webkit-line-clamp: 2;
    }
}


/* =========================================================
   DATABASE PORTFOLIO — ENGLISH / PERSIAN CONTENT
========================================================= */

.portfolio-dynamic-text--en {
    display: inline !important;
}

.portfolio-dynamic-text--fa {
    display: none !important;
}

.portfolio-dynamic-tags--en {
    display: contents !important;
}

.portfolio-dynamic-tags--fa {
    display: none !important;
}


html[data-language="fa"]
.portfolio-dynamic-text--en {
    display: none !important;
}

html[data-language="fa"]
.portfolio-dynamic-text--fa {
    display: inline !important;
    direction: rtl !important;
    text-align: right !important;
}

html[data-language="fa"]
.portfolio-dynamic-tags--en {
    display: none !important;
}

html[data-language="fa"]
.portfolio-dynamic-tags--fa {
    display: contents !important;
}


/* متن فارسی کارت */
html[data-language="fa"]
.portfolio-card__body h3,
html[data-language="fa"]
.portfolio-card__body > p {
    direction: rtl !important;
    text-align: right !important;
}



.contact-form__field {
    display: grid;
    gap: 7px;
}

.contact-form .validation-message {
    padding: 0 4px;
    color: #d14343;
    font-size: 12.5px;
    line-height: 1.5;
}

.contact-form button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.contact-form__status {
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.contact-form__status--success {
    color: #176b4d;
    border-color: rgba(30, 145, 100, 0.28);
    background: rgba(30, 145, 100, 0.10);
}

.contact-form__status--error {
    color: #a92f2f;
    border-color: rgba(199, 58, 58, 0.28);
    background: rgba(199, 58, 58, 0.10);
}

html[data-theme="dark"] .contact-form__status--success {
    color: #70ddb2;
    background: rgba(35, 171, 119, 0.12);
}

html[data-theme="dark"] .contact-form__status--error {
    color: #ff9696;
    background: rgba(218, 67, 67, 0.12);
}