/* =========================================================
   ECOARC-STUDIO — GLASS NAVBAR
   ========================================================= */

.site-navbar {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 1000;

    width: min(1320px, calc(100% - 40px));

    transform: translateX(-50%);

    color: #111;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.58)
        );

    border: 1px solid rgba(17, 17, 17, 0.10);

    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.055);

    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);

    transition:
        top 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Scrolled state */

.site-navbar.is-scrolled {
    top: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.90),
            rgba(255, 255, 255, 0.76)
        );

    border-color: rgba(17, 17, 17, 0.12);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.09);
}


/* =========================================================
   INNER
   ========================================================= */

.navbar-inner {
    min-height: 64px;

    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        auto
        minmax(250px, 1fr);

    align-items: center;

    padding: 0 10px 0 20px;
}


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

.navbar-brand {
    display: inline-flex;
    align-items: center;

    width: max-content;

    color: #111;
    text-decoration: none;

    letter-spacing: 0.17em;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.navbar-brand:hover {
    color: #111;
    opacity: 0.72;
}

.navbar-brand-text {
    font-family:
        "DM Sans",
        "Manrope",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.18em;

    white-space: nowrap;
}


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

.navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;
}


.navbar-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: 64px;

    color: rgba(17, 17, 17, 0.78);

    font-family:
        "DM Sans",
        "Manrope",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.navbar-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 15px;

    width: 100%;
    height: 1px;

    background: #111;

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.25s ease;
}


.navbar-link:hover {
    color: #111;
}


.navbar-link:hover::after,
.navbar-link.is-active::after {
    transform: scaleX(1);
}


.navbar-link.is-active {
    color: #111;
}


/* =========================================================
   RIGHT
   ========================================================= */

.navbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 18px;
}


/* =========================================================
   LANGUAGE
   ========================================================= */

.navbar-language {
    display: inline-flex;
    align-items: center;

    height: 38px;

    padding: 3px;

    border: 1px solid rgba(17, 17, 17, 0.10);

    border-radius: 11px;

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


.language-option {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 30px;

    color: rgba(17, 17, 17, 0.48);

    border-radius: 8px;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.05em;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}


.language-option:hover {
    color: #111;
}


.language-option.is-active {
    color: #111;

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

    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.06);
}


.language-divider {
    width: 1px;
    height: 13px;

    background: rgba(17, 17, 17, 0.10);
}


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

.navbar-cta {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding: 0 8px;

    color: #111;

    font-family:
        "DM Sans",
        "Manrope",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.navbar-cta:hover {
    color: #111;
    opacity: 0.62;

    transform: translateX(2px);
}


.navbar-cta-arrow {
    font-size: 15px;
    line-height: 1;

    transition:
        transform 0.25s ease;
}


.navbar-cta:hover .navbar-cta-arrow {
    transform: translate(2px, -2px);
}


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

.navbar-menu-toggle {
    display: none;

    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(17, 17, 17, 0.10);
    border-radius: 10px;

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

    cursor: pointer;
}


.navbar-menu-toggle span {
    position: absolute;

    left: 50%;

    width: 16px;
    height: 1px;

    background: #111;

    transform: translateX(-50%);

    transition:
        transform 0.3s ease,
        top 0.3s ease;
}


.navbar-menu-toggle span:first-child {
    top: 16px;
}


.navbar-menu-toggle span:last-child {
    top: 24px;
}


/* Open */

.site-navbar.menu-open
.navbar-menu-toggle span:first-child {
    top: 20px;

    transform:
        translateX(-50%)
        rotate(45deg);
}


.site-navbar.menu-open
.navbar-menu-toggle span:last-child {
    top: 20px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


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

.navbar-mobile {
    display: none;

    border-top: 1px solid rgba(17, 17, 17, 0.08);
}


.navbar-mobile-inner {
    padding: 26px 22px 22px;
}


.navbar-mobile-label {
    margin-bottom: 18px;

    color: rgba(17, 17, 17, 0.42);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.navbar-mobile-links {
    display: flex;
    flex-direction: column;
}


.navbar-mobile-links a {
    display: grid;

    grid-template-columns: 38px 1fr;

    align-items: center;

    min-height: 56px;

    color: #111;

    border-bottom: 1px solid rgba(17, 17, 17, 0.08);

    text-decoration: none;
}


.navbar-mobile-links a > span {
    color: rgba(17, 17, 17, 0.36);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 10px;
}


.navbar-mobile-links a strong {
    font-family:
        "DM Sans",
        "Manrope",
        Arial,
        sans-serif;

    font-size: 22px;
    font-weight: 500;
}


.navbar-mobile-links a.is-active strong {
    font-weight: 600;
}


.navbar-mobile-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 22px;
}


.navbar-mobile-language {
    display: flex;
    gap: 16px;
}


.navbar-mobile-language a {
    color: rgba(17, 17, 17, 0.45);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
}


.navbar-mobile-language a.is-active {
    color: #111;
}


.navbar-mobile-cta {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #111;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


.navbar-mobile-cta span {
    font-size: 15px;
}


/* =========================================================
   MOBILE OPEN STATE
   ========================================================= */

.site-navbar.menu-open {
    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}


.site-navbar.menu-open .navbar-mobile {
    display: block;
}


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

@media (max-width: 1100px) {

    .navbar-inner {
        grid-template-columns:
            minmax(160px, 1fr)
            auto
            minmax(210px, 1fr);
    }

    .navbar-center {
        gap: 22px;
    }

    .navbar-right {
        gap: 10px;
    }

}


@media (max-width: 900px) {

    .site-navbar {
        width: calc(100% - 28px);
        top: 12px;
    }

    .navbar-inner {
        display: flex;
        justify-content: space-between;

        min-height: 60px;

        padding:
            0 8px 0 17px;
    }

    .navbar-center {
        display: none;
    }

    .navbar-language,
    .navbar-cta {
        display: none;
    }

    .navbar-menu-toggle {
        display: block;
    }

}


@media (max-width: 480px) {

    .site-navbar {
        width: calc(100% - 20px);

        top: 10px;

        border-radius: 14px;
    }

    .navbar-inner {
        min-height: 56px;

        padding-left: 15px;
    }

    .navbar-brand-text {
        font-size: 13px;
        letter-spacing: 0.15em;
    }

    .navbar-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .navbar-mobile-inner {
        padding:
            22px 18px 18px;
    }

    .navbar-mobile-links a {
        min-height: 52px;
    }

    .navbar-mobile-links a strong {
        font-size: 20px;
    }

}


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] .navbar-brand {
    direction: ltr;
}


html[dir="rtl"] .navbar-center,
html[dir="rtl"] .navbar-right {
    direction: rtl;
}


html[dir="rtl"] .navbar-mobile-links {
    direction: rtl;
}


html[dir="rtl"] .navbar-mobile-links a {
    grid-template-columns: 38px 1fr;
}


html[dir="rtl"] .navbar-mobile-links a > span {
    text-align: right;
}


html[dir="rtl"] .navbar-mobile-bottom {
    direction: rtl;
}
/* =========================================================
   ECOARC-STUDIO FOOTER
   ========================================================= */
.site-footer {
    position: relative;
    width: 100%;
    background: #151515;
    color: #f1f1ef;
    overflow: hidden;
}
.site-footer-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}
.footer-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    padding: 82px 0 74px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand {
    display: inline-block;
    color: #f2f2f0;
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-decoration: none;
    transition: opacity 0.25s ease;
}
.footer-brand:hover { color: #f2f2f0; opacity: 0.68; }
.footer-tagline {
    margin: 17px 0 0;
    color: rgba(255, 255, 255, 0.46);
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.5;
}
.footer-primary-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 3px;
    color: #f2f2f0;
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.25s ease;
}
.footer-primary-link:hover { color: #f2f2f0; opacity: 0.62; }
.footer-primary-arrow {
    display: inline-block;
    font-size: 0.72em;
    line-height: 1;
    transition: transform 0.25s ease;
}
.footer-primary-link:hover .footer-primary-arrow { transform: translate(4px, -4px); }
.footer-links {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    column-gap: 100px;
    padding: 62px 0 70px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-column { min-width: 0; }
.footer-label {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.36);
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.2;
    text-transform: uppercase;
}
.footer-nav, .footer-contact, .footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}
.footer-nav a, .footer-contact a, .footer-contact span, .footer-social a {
    color: rgba(255, 255, 255, 0.78);
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.footer-nav a:hover, .footer-contact a:hover, .footer-social a:hover { color: #ffffff; }
.footer-contact span { color: rgba(255, 255, 255, 0.48); }
.footer-social a { display: inline-flex; align-items: center; gap: 7px; }
.footer-social a span { font-size: 13px; line-height: 1; transition: transform 0.25s ease; }
.footer-social a:hover span { transform: translate(2px, -2px); }
.footer-credit {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 28px;
    min-height: 86px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-credit-label {
    color: rgba(255, 255, 255, 0.32);
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.footer-credit-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.5;
}
.footer-name-fa { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; direction: rtl; }
.footer-name-en { font-family: "DM Sans", "Manrope", Arial, sans-serif; }
.footer-credit-separator { color: rgba(255, 255, 255, 0.24); }
.footer-credit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.25s ease;
}
.footer-credit-link:hover { color: #ffffff; }
.footer-credit-link span { font-size: 13px; transition: transform 0.25s ease; }
.footer-credit-link:hover span { transform: translate(2px, -2px); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 20px;
}
.footer-copyright, .footer-rights {
    margin: 0;
    color: rgba(255, 255, 255, 0.32);
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .site-footer-container { width: min(100% - 40px, 720px); }
    .footer-intro { padding: 68px 0 58px; }
    .footer-links { column-gap: 50px; padding: 52px 0 58px; }
    .footer-credit { grid-template-columns: 70px 1fr auto; gap: 20px; }
}
@media (max-width: 640px) {
    .site-footer-container { width: calc(100% - 36px); }
    .footer-intro { display: block; padding: 58px 0 50px; }
    .footer-brand { font-size: 23px; letter-spacing: 0.12em; }
    .footer-tagline { margin-top: 14px; font-size: 11px; }
    .footer-primary-link { margin-top: 48px; font-size: 30px; }
    .footer-links { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 48px 0 52px; }
    .footer-label { margin-bottom: 19px; }
    .footer-nav, .footer-contact, .footer-social { gap: 10px; }
    .footer-nav a, .footer-contact a, .footer-contact span, .footer-social a { font-size: 13px; }
    .footer-credit { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
    .footer-credit-label { margin-bottom: 2px; }
    .footer-credit-name { flex-wrap: wrap; gap: 7px; font-size: 12px; }
    .footer-credit-link { width: max-content; margin-top: 4px; }
    .footer-bottom { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; min-height: 76px; }
}
@media (max-width: 380px) {
    .site-footer-container { width: calc(100% - 28px); }
    .footer-brand { font-size: 21px; }
    .footer-primary-link { font-size: 27px; }
}
html[dir="rtl"] .site-footer { text-align: right; }
html[dir="rtl"] .footer-intro, html[dir="rtl"] .footer-links, html[dir="rtl"] .footer-credit, html[dir="rtl"] .footer-bottom { direction: rtl; }
html[dir="rtl"] .footer-primary-link, html[dir="rtl"] .footer-social a, html[dir="rtl"] .footer-credit-link { direction: ltr; }
html[dir="rtl"] .footer-credit-name { direction: rtl; }
html[dir="rtl"] .footer-name-en { direction: ltr; }
html[dir="rtl"] .footer-bottom { text-align: right; }
@media (max-width: 640px) { html[dir="rtl"] .footer-bottom { align-items: flex-start; } }