@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


/* ============================================================
   1.  ROOT VARIABLES (SYSTEM DESIGN)
   ============================================================ */
:root {
    /* ---- Colors ---- */
    --green-50: #effdf6;
    --green-100: #d9fbea;
    --green-200: #b5f4d3;
    --green-300: #7ce9b2;
    --green-400: #42dc92;
    --green-500: #16c784;
    --green-600: #0eaa6e;
    --green-700: #0b885b;
    --green-800: #096b49;
    --green-900: #07563b;
    --white: #ffffff;
    --black: #07130f;
    --dark: #0a1712;
    --dark-2: #10221a;
    --gray-50: #f7faf8;
    --gray-100: #eff4f1;
    --gray-200: #e1e9e5;
    --gray-300: #cbd7d1;
    --gray-500: #73827b;
    --gray-600: #5c6b64;
    --gray-700: #405047;
    --border-color: rgba(8, 45, 31, 0.09);
    /* ---- Shadows ---- */
    --shadow-sm: 0 8px 30px rgba(8, 40, 27, 0.06);
    --shadow-md: 0 18px 50px rgba(8, 40, 27, 0.10);
    --shadow-lg: 0 30px 80px rgba(8, 40, 27, 0.16);
    --shadow-xl: 0 40px 100px rgba(8, 40, 27, 0.22);
    /* ---- Radius ---- */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-xl: 40px;
    /* ---- Container ---- */
    --container: 1240px;
    /* ---- Transitions ---- */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-slow: 0.8s;
    --duration-med: 0.5s;
    --duration-fast: 0.3s;
    /* ---- Typography Scale ---- */
    --font-base: 1rem;
    --font-scale: 1.25;
    --font-xs: calc(var(--font-base) / var(--font-scale) / var(--font-scale));
    --font-sm: calc(var(--font-base) / var(--font-scale));
    --font-md: var(--font-base);
    --font-lg: calc(var(--font-base) * var(--font-scale));
    --font-xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale));
    --font-2xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale));
    /* ---- Spacing Scale ---- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    /* ---- Breakpoints ---- */
    --bp-xs: 480px;
    --bp-sm: 768px;
    --bp-md: 1024px;
    --bp-lg: 1200px;
    /* ---- Theme (light) ---- */
    --bg-body: var(--white);
    --color-body: var(--black);
    --bg-header: rgba(255, 255, 255, 0.78);
    --bg-card: var(--white);
    --bg-card-hover: var(--gray-50);
    --bg-input: var(--gray-50);
    --border: var(--border-color);
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
    --bg-body: #0a0f0d;
    --color-body: #e0e8e4;
    --bg-header: rgba(10, 15, 13, 0.85);
    --bg-card: #15221b;
    --bg-card-hover: #1d2f26;
    --bg-input: #1d2f26;
    --border: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   2.  RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    background: var(--bg-body);
    color: var(--color-body);
    line-height: 1.8;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--duration-med) var(--ease), color var(--duration-med) var(--ease);
    opacity: 1;
    transition: opacity 0.2s;
}

    body.menu-open {
        overflow: hidden;
    }

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

/* ============================================================
   3.  SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-50);
}

::-webkit-scrollbar-thumb {
    background: var(--green-300);
    border-radius: 100px;
    transition: background var(--duration-fast) ease;
}

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

/* ============================================================
   4.  UTILITY CLASSES
   ============================================================ */
.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

/* Spacing */
.p-0 {
    padding: 0;
}

.m-0 {
    margin: 0;
}

.p-xs {
    padding: var(--space-xs);
}

.p-sm {
    padding: var(--space-sm);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

.p-xl {
    padding: var(--space-xl);
}

.m-xs {
    margin: var(--space-xs);
}

.m-sm {
    margin: var(--space-sm);
}

.m-md {
    margin: var(--space-md);
}

.m-lg {
    margin: var(--space-lg);
}

.m-xl {
    margin: var(--space-xl);
}

/* Flex */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap-lg {
    gap: var(--space-lg);
}

/* Grid */
.grid {
    display: grid;
}

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

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

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Text */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-green {
    color: var(--green-500);
}

.text-gray {
    color: var(--gray-500);
}

.text-white {
    color: var(--white);
}

.text-sm {
    font-size: var(--font-sm);
}

.text-md {
    font-size: var(--font-md);
}

.text-lg {
    font-size: var(--font-lg);
}

.text-xl {
    font-size: var(--font-xl);
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

/* ============================================================
   5.  PRELOADER
   ============================================================ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--bg-body);
    transition: opacity var(--duration-slow) var(--ease), visibility var(--duration-slow) var(--ease);
}

    .preloader.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.preloader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.loader-ring {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--green-500);
    border-right-color: var(--green-400);
    animation: spin 1s linear infinite;
    will-change: transform;
}

    .loader-ring::after {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-bottom-color: var(--green-300);
        border-left-color: var(--green-200);
        animation: spin 0.6s linear infinite reverse;
        will-change: transform;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.preloader__content span {
    color: var(--gray-500);
    font-size: var(--font-xs);
    letter-spacing: 0.1em;
    animation: pulseText 1.5s ease-in-out infinite;
}

@keyframes pulseText {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* ============================================================
   6.  HEADER
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    transition: background var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease), backdrop-filter var(--duration-med) var(--ease), transform var(--duration-med) var(--ease);
}

    .site-header.is-scrolled {
        background: var(--bg-header);
        backdrop-filter: blur(24px) saturate(1.2);
        box-shadow: 0 2px 40px rgba(0, 0, 0, 0.06);
    }

    .site-header.is-hidden {
        transform: translateY(-100%);
    }

.header__inner {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease);
}

    .brand:hover {
        transform: scale(1.02);
    }

.brand__mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--green-500);
}

    .brand__mark svg {
        width: 38px;
        height: 38px;
        transition: transform var(--duration-med) var(--ease);
    }

.brand:hover .brand__mark svg {
    transform: rotate(-8deg) scale(1.1);
}

.brand__text strong {
    font-size: var(--font-sm);
    font-weight: 800;
    color: var(--color-body);
}

.brand__text small {
    display: block;
    margin-top: 3px;
    direction: ltr;
    text-align: right;
    font-size: calc(var(--font-xs) * 0.8);
    letter-spacing: 0.08em;
    color: var(--gray-500);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-inline: auto;
}

.main-nav__link {
    position: relative;
    color: var(--gray-700);
    font-size: var(--font-sm);
    font-weight: 500;
    padding: 7px 0;
    transition: color var(--duration-fast) ease;
}

    .main-nav__link::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 2.5px;
        border-radius: 100px;
        background: linear-gradient(90deg, var(--green-400), var(--green-600));
        transition: width var(--duration-med) var(--ease);
    }

    .main-nav__link:hover,
    .main-nav__link.is-active {
        color: var(--color-body);
    }

        .main-nav__link:hover::after,
        .main-nav__link.is-active::after {
            width: 100%;
            right: auto;
            left: 0;
        }

    .main-nav__link:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 4px;
    }

.header-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--color-body);
    background: rgba(255, 255, 255, 0.6);
    font-size: var(--font-sm);
    font-weight: 600;
    overflow: hidden;
    transition: all var(--duration-fast) var(--ease);
    cursor: pointer;
}

    .header-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
    }

    .header-cta:hover::before {
        transform: translateX(100%);
    }

    .header-cta svg {
        width: 17px;
        transform: rotate(180deg);
        transition: transform var(--duration-fast) var(--ease);
    }

    .header-cta:hover {
        color: var(--white);
        background: var(--green-500);
        border-color: var(--green-500);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(22, 199, 132, 0.25);
    }

        .header-cta:hover svg {
            transform: rotate(180deg) translateX(4px);
        }

    .header-cta:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 2px;
    }

.mobile-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: all var(--duration-fast) ease;
    cursor: pointer;
}

    .mobile-menu-toggle:hover {
        background: var(--green-50);
        border-color: var(--green-300);
    }

    .mobile-menu-toggle span {
        width: 22px;
        height: 2px;
        border-radius: 100px;
        background: var(--color-body);
        transition: transform var(--duration-med) var(--ease), opacity var(--duration-med) var(--ease);
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu-toggle:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 2px;
    }

.mobile-menu {
    display: none;
}

/* ============================================================
   7.  HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 790px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #ffffff 0%, #f6fcf8 40%, #edf9f2 100%);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0a0f0d, #10261d);
}

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

.hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: linear-gradient(rgba(16, 34, 26, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 34, 26, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 40% 50%, black 20%, transparent 80%);
}

.hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
    animation: orbFloat 12s ease-in-out infinite alternate;
}

.hero__orb--one {
    width: 650px;
    height: 650px;
    right: -180px;
    top: 40px;
    background: radial-gradient(circle, rgba(22, 199, 132, 0.22), transparent 70%);
    animation-delay: 0s;
}

.hero__orb--two {
    width: 550px;
    height: 550px;
    left: -250px;
    bottom: -200px;
    background: radial-gradient(circle, rgba(66, 220, 146, 0.14), transparent 70%);
    animation-delay: -4s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, -30px) scale(1.05);
    }
}

.hero__inner {
    width: min(calc(100% - 48px), var(--container));
    min-height: 790px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.hero__content {
    padding-top: 65px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--green-700);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.015em;
}

.eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 0 5px var(--green-100);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% {
        box-shadow: 0 0 0 5px var(--green-100);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(22, 199, 132, 0.15);
    }
}

.hero__eyebrow {
    margin-bottom: 25px;
}

.hero__title {
    max-width: 650px;
    font-size: clamp(3rem, 5.2vw, 5.25rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.045em;
    color: var(--color-body);
}



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

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

.hero__description {
    max-width: 620px;
    margin-top: 26px;
    color: var(--gray-600);
    font-size: var(--font-md);
    line-height: 2.15;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.button {
    position: relative;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 26px;
    border-radius: 14px;
    font-size: var(--font-sm);
    font-weight: 700;
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) ease;
    cursor: pointer;
    border: none;
}

    .button::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.25), transparent 60%);
        opacity: 0;
        transition: opacity var(--duration-fast) ease;
        pointer-events: none;
    }

    .button:hover::after {
        opacity: 1;
    }

    .button svg {
        width: 18px;
        transform: rotate(180deg);
        transition: transform var(--duration-fast) var(--ease);
    }

    .button:hover svg {
        transform: rotate(180deg) translateX(4px);
    }

    .button:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 2px;
    }

.button--primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    box-shadow: 0 14px 30px rgba(22, 199, 132, 0.25);
}

    .button--primary:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 22px 44px rgba(22, 199, 132, 0.35);
    }

.button--secondary {
    color: var(--color-body);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

    .button--secondary:hover {
        transform: translateY(-4px);
        border-color: var(--green-300);
        box-shadow: var(--shadow-md);
    }

.hero__trust {
    display: flex;
    align-items: center;
    margin-top: 55px;
    gap: 24px;
    max-width: 560px;
}

.trust-item {
    display: flex;
    flex-direction: column;
}

    .trust-item strong {
        font-size: var(--font-lg);
        font-weight: 800;
        background: linear-gradient(135deg, var(--color-body), var(--green-700));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .trust-item span {
        margin-top: 2px;
        color: var(--gray-500);
        font-size: var(--font-xs);
    }

.trust-divider {
    width: 1px;
    height: 32px;
    background: var(--gray-200);
}

.hero__visual {
    position: relative;
    height: 590px;
    display: grid;
    place-items: center;
    perspective: 1000px;
}

    .hero__visual canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        border-radius: 24px;
        background: transparent;
        transform: rotateY(-2deg) rotateX(3deg);
        transition: transform var(--duration-slow) var(--ease);
        box-shadow: 0 30px 60px rgba(8, 40, 27, 0.08);
    }

    .hero__visual:hover canvas {
        transform: rotateY(0deg) rotateX(0deg);
    }

.hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--gray-500);
    font-size: var(--font-xs);
}

.hero__scroll-line {
    position: relative;
    width: 40px;
    height: 1px;
    background: var(--gray-300);
    overflow: hidden;
}

    .hero__scroll-line::after {
        content: "";
        position: absolute;
        right: 0;
        width: 20px;
        height: 1px;
        background: var(--green-500);
        animation: scrollLine 2.2s ease-in-out infinite;
    }

@keyframes scrollLine {
    0% {
        transform: translateX(100%);
    }

    50% {
        transform: translateX(0);
    }

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

/* ============================================================
   8.  COMPANY STRIP
   ============================================================ */
.company-strip {
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    background: var(--bg-card);
}

.company-strip__inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 50px;
}

    .company-strip__inner > span {
        white-space: nowrap;
        color: var(--gray-500);
        font-size: var(--font-xs);
        font-weight: 600;
    }

.industry-list {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .industry-list span {
        color: var(--gray-500);
        font-size: var(--font-xs);
        font-weight: 600;
        white-space: nowrap;
        transition: color var(--duration-fast) ease, transform var(--duration-fast) var(--ease);
        cursor: default;
    }

        .industry-list span:hover {
            color: var(--green-600);
            transform: translateY(-2px);
        }

/* ============================================================
   9.  SECTION & HEADING
   ============================================================ */
.section {
    padding: 125px 0;
    position: relative;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 70px;
}

    .section-heading h2 {
        max-width: 620px;
        margin-top: 14px;
        font-size: clamp(2rem, 3.4vw, 3.35rem);
        font-weight: 850;
        line-height: 1.3;
        letter-spacing: -0.035em;
    }

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

    .section-heading > p {
        max-width: 420px;
        color: var(--gray-600);
        font-size: var(--font-sm);
        line-height: 2;
    }

/* ============================================================
   10. ABOUT
   ============================================================ */
.about-section {
    background: var(--bg-body);
}

.about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 100px;
}

.about-image {
    position: relative;
    min-height: 560px;
    perspective: 1200px;
}

.about-image__main {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(145deg, #102a1f, #174b34);
    box-shadow: var(--shadow-xl);
    isolation: isolate;
    transform: rotateY(2deg);
    transition: transform var(--duration-slow) var(--ease);
}

    .about-image__main:hover {
        transform: rotateY(0deg) scale(1.01);
    }

.factory-lines {
    position: absolute;
    inset: 0;
    opacity: 0.32;
    background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(105, 245, 179, 0.08) 19px, transparent 20px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(105, 245, 179, 0.05) 19px, transparent 20px);
}

    .factory-lines::after {
        content: "";
        position: absolute;
        inset: 10% 13%;
        border: 1px solid rgba(101, 235, 171, 0.16);
        border-radius: 50%;
        box-shadow: 0 0 0 60px rgba(101, 235, 171, 0.025), 0 0 0 120px rgba(101, 235, 171, 0.02), 0 0 0 180px rgba(101, 235, 171, 0.015);
        animation: ringPulse 6s ease-in-out infinite;
    }

@keyframes ringPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

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

.factory-center {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(125, 255, 192, 0.17);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 214, 140, 0.12), transparent 70%);
    backdrop-filter: blur(4px);
}

    .factory-center span {
        color: rgba(255, 255, 255, 0.6);
        font-size: var(--font-xs);
        font-weight: 700;
        letter-spacing: 0.18em;
        direction: ltr;
    }

    .factory-center strong {
        margin: 10px 0 2px;
        color: var(--white);
        font-size: 4rem;
        font-weight: 900;
        line-height: 1;
    }

    .factory-center small {
        color: rgba(255, 255, 255, 0.6);
        font-size: var(--font-xs);
    }

.about-image__badge {
    position: absolute;
    left: -25px;
    bottom: 35px;
    display: flex;
    flex-direction: column;
    padding: 19px 23px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
}

    .about-image__badge:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: var(--shadow-lg);
    }

    .about-image__badge span {
        color: var(--gray-500);
        font-size: var(--font-xs);
    }

    .about-image__badge strong {
        margin-top: 2px;
        color: var(--green-700);
        font-size: var(--font-lg);
    }

.about-content {
    max-width: 620px;
}

.about-lead {
    color: var(--color-body);
    font-size: var(--font-lg);
    font-weight: 500;
    line-height: 2.15;
}

.about-features {
    margin-top: 45px;
}

.about-feature {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 20px;
    padding: 25px 0;
    border-top: 1px solid var(--gray-100);
    transition: background var(--duration-fast) ease, padding var(--duration-fast) ease;
}

    .about-feature:hover {
        background: var(--bg-card-hover);
        padding-inline: 12px;
        border-radius: 12px;
    }

    .about-feature:last-child {
        border-bottom: 1px solid var(--gray-100);
    }

.about-feature__number {
    color: var(--green-500);
    direction: ltr;
    font-size: var(--font-xs);
    font-weight: 800;
    padding-top: 3px;
}

.about-feature h3 {
    font-size: var(--font-md);
    font-weight: 750;
}

.about-feature p {
    margin-top: 6px;
    color: var(--gray-600);
    font-size: var(--font-sm);
    line-height: 2;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green-700);
    font-size: var(--font-sm);
    font-weight: 700;
    transition: gap var(--duration-med) var(--ease), color var(--duration-fast) ease;
    text-decoration: none;
}

    .text-link svg {
        width: 17px;
        transform: rotate(180deg);
        transition: transform var(--duration-fast) var(--ease);
    }

    .text-link:hover {
        gap: 16px;
        color: var(--green-500);
    }

        .text-link:hover svg {
            transform: rotate(180deg) translateX(4px);
        }

    .text-link:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 2px;
    }

.about-content > .text-link {
    margin-top: 34px;
}

/* ============================================================
   11. NUMBERS
   ============================================================ */
.numbers-section {
    padding: 75px 0;
    background: var(--dark);
    color: var(--white);
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.number-item {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform var(--duration-med) var(--ease), background var(--duration-med) ease;
    border-radius: 16px;
}

    .number-item:hover {
        transform: translateY(-8px);
        background: rgba(255, 255, 255, 0.04);
    }

    .number-item:first-child {
        border-right: 0;
    }

.number-item__label {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.number-item strong {
    margin-top: 8px;
    font-size: 2.8rem;
    font-weight: 850;
    line-height: 1;
    background: linear-gradient(135deg, #fff, var(--green-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.number-item small {
    margin-right: 4px;
    color: var(--green-400);
    font-size: var(--font-sm);
    font-weight: 600;
}

/* ============================================================
   12. PRODUCTS
   ============================================================ */
.products-section {
    background: var(--gray-50);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: var(--bg-card);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
    transform-style: preserve-3d;
    perspective: 800px;
}

    .product-card:hover {
        transform: translateY(-12px) rotateX(2deg) rotateY(-1deg);
        box-shadow: var(--shadow-xl);
    }

    .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(22, 199, 132, 0.02), transparent 60%);
        opacity: 0;
        transition: opacity var(--duration-med) ease;
        pointer-events: none;
        border-radius: inherit;
    }

    .product-card:hover::before {
        opacity: 1;
    }

.product-card__visual {
    position: relative;
    min-height: 310px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #eafaf1, #d4f2e1);
}

.product-card__visual--green {
    background: linear-gradient(145deg, #0e9f67, #087b4f);
}

.product-card__visual--dark {
    background: linear-gradient(145deg, #102a20, #0a1712);
}

.product-card__index {
    position: absolute;
    top: 20px;
    right: 20px;
    direction: ltr;
    color: rgba(0, 0, 0, 0.25);
    font-size: var(--font-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.product-card__visual--green .product-card__index,
.product-card__visual--dark .product-card__index {
    color: rgba(255, 255, 255, 0.4);
}

.product-visual {
    position: relative;
    width: 200px;
    height: 210px;
    transform: rotate(-6deg) scale(0.95);
    transition: transform var(--duration-med) var(--ease);
}

.product-card:hover .product-visual {
    transform: rotate(-4deg) scale(1);
}

.visual-film {
    position: absolute;
    inset: 0;
    border-radius: 18px 18px 25px 25px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.7), rgba(185, 232, 208, 0.35));
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 20px 30px 40px rgba(13, 91, 58, 0.18);
}

    .visual-film::before,
    .visual-film::after {
        content: "";
        position: absolute;
        right: 15px;
        left: 15px;
        height: 1px;
        background: rgba(255, 255, 255, 0.8);
    }

    .visual-film::before {
        top: 34%;
    }

    .visual-film::after {
        top: 66%;
    }

.visual-highlight {
    position: absolute;
    top: -20%;
    right: 25%;
    width: 25px;
    height: 150%;
    transform: rotate(17deg);
    background: rgba(255, 255, 255, 0.4);
    filter: blur(7px);
}

.bag-visual {
    position: relative;
    width: 165px;
    height: 205px;
}

.bag-visual__body {
    position: absolute;
    inset: 32px 15px 0;
    border-radius: 12px 12px 25px 25px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08), 20px 30px 50px rgba(0, 0, 0, 0.12);
}

.bag-visual__handle {
    position: absolute;
    top: 0;
    right: 47px;
    width: 72px;
    height: 52px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-bottom: 0;
    border-radius: 50px 50px 0 0;
}

.roll-visual {
    position: relative;
    width: 220px;
    height: 230px;
}

    .roll-visual div {
        position: absolute;
        right: 50%;
        top: 50%;
        width: 140px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.035);
        transform: translate(50%, -50%) rotate(-12deg);
    }

        .roll-visual div:nth-child(1) {
            transform: translate(50%, -80%) rotate(-12deg);
        }

        .roll-visual div:nth-child(2) {
            transform: translate(50%, -20%) rotate(-12deg);
        }

        .roll-visual div:nth-child(3) {
            transform: translate(50%, 40%) rotate(-12deg);
        }

        .roll-visual div:nth-child(4) {
            transform: translate(50%, 100%) rotate(-12deg);
        }

.product-card__content {
    padding: 27px 28px 30px;
}

.product-card__category {
    direction: ltr;
    text-align: right;
    color: var(--green-600);
    font-size: var(--font-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.product-card h3 {
    margin-top: 9px;
    font-size: var(--font-lg);
    font-weight: 800;
}

.product-card p {
    min-height: 62px;
    margin-top: 8px;
    color: var(--gray-600);
    font-size: var(--font-sm);
    line-height: 2;
}

.product-card__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    color: var(--color-body);
    font-size: var(--font-sm);
    font-weight: 700;
    transition: color var(--duration-fast) ease, gap var(--duration-med) var(--ease);
    text-decoration: none;
}

    .product-card__link svg {
        width: 17px;
        transform: rotate(180deg);
        transition: transform var(--duration-fast) var(--ease);
    }

.product-card:hover .product-card__link {
    gap: 12px;
    color: var(--green-600);
}

    .product-card:hover .product-card__link svg {
        transform: rotate(180deg) translateX(3px);
    }

.product-card__link:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
}

/* ============================================================
   13. QUALITY
   ============================================================ */
.quality-section {
    background: var(--bg-body);
}

.quality-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 100px;
}

.quality-content {
    max-width: 610px;
}

    .quality-content h2 {
        margin-top: 14px;
        font-size: clamp(2rem, 3.3vw, 3.25rem);
        font-weight: 850;
        line-height: 1.25;
    }

        .quality-content h2 span {
            color: var(--green-500);
        }

    .quality-content > p {
        max-width: 550px;
        margin-top: 20px;
        color: var(--gray-600);
        line-height: 2.1;
    }

.quality-progress {
    margin-top: 42px;
}

.quality-progress__item + .quality-progress__item {
    margin-top: 28px;
}

.quality-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--gray-700);
    font-size: var(--font-xs);
}

    .quality-progress__header strong {
        direction: ltr;
        color: var(--green-600);
        font-size: var(--font-xs);
    }

.progress-bar {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 100px;
    background: var(--gray-100);
}

    .progress-bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--green-600), var(--green-400));
        transform-origin: right;
        width: 0;
        transition: width 1.2s var(--ease);
    }

    .progress-bar.is-visible span {
        width: var(--progress);
    }

.quality-visual {
    position: relative;
    width: min(480px, 100%);
    aspect-ratio: 1;
    margin: auto;
    display: grid;
    place-items: center;
}

.quality-circle {
    position: absolute;
    border: 1px solid rgba(22, 199, 132, 0.18);
    border-radius: 50%;
}

.quality-circle--outer {
    width: 100%;
    height: 100%;
    animation: floatOrbit 10s ease-in-out infinite;
}

.quality-circle--middle {
    width: 72%;
    height: 72%;
}

.quality-circle--inner {
    width: 45%;
    height: 45%;
    border-color: rgba(22, 199, 132, 0.28);
    background: radial-gradient(circle, rgba(22, 199, 132, 0.09), transparent 70%);
}

.quality-core {
    position: relative;
    z-index: 2;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid var(--green-200);
    border-radius: 50%;
    color: var(--green-600);
    background: var(--bg-card);
    box-shadow: 0 20px 60px rgba(15, 140, 88, 0.12);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
}

    .quality-core:hover {
        transform: scale(1.04);
        box-shadow: 0 30px 80px rgba(15, 140, 88, 0.2);
    }

    .quality-core svg {
        width: 48px;
        margin-bottom: 9px;
    }

    .quality-core strong {
        direction: ltr;
        font-size: var(--font-sm);
        letter-spacing: 0.16em;
    }

    .quality-core span {
        direction: ltr;
        color: var(--gray-500);
        font-size: var(--font-xs);
        letter-spacing: 0.18em;
    }

.quality-tag {
    position: absolute;
    z-index: 3;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--gray-700);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-xs);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
}

    .quality-tag:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: var(--shadow-md);
    }

.quality-tag--one {
    top: 17%;
    right: 8%;
}

.quality-tag--two {
    bottom: 20%;
    left: 0;
}

.quality-tag--three {
    right: 20%;
    bottom: 3%;
}

@keyframes floatOrbit {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(8deg);
    }
}

/* ============================================================
   14. SUSTAINABILITY
   ============================================================ */
.sustainability-section {
    padding-top: 20px;
}

.sustainability-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 80px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #084c34, #0b7d53);
    color: var(--white);
    isolation: isolate;
    box-shadow: var(--shadow-xl);
}

    .sustainability-card::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -15%;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
        z-index: -1;
        animation: orbPulse 8s ease-in-out infinite alternate;
    }

@keyframes orbPulse {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.2) translate(20px, -20px);
    }
}

.sustainability-card__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: radial-gradient(white 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    z-index: -1;
}

.eyebrow--light {
    color: rgba(255, 255, 255, 0.75);
}

    .eyebrow--light .eyebrow__dot {
        background: #8dffc5;
        box-shadow: 0 0 0 5px rgba(141, 255, 197, 0.1);
    }

.sustainability-card h2 {
    max-width: 500px;
    margin-top: 14px;
    font-size: clamp(2.2rem, 4vw, 3.7rem);
    line-height: 1.25;
    font-weight: 850;
    letter-spacing: -0.04em;
}

    .sustainability-card h2 span {
        color: #91fbc5;
    }

.sustainability-card p {
    max-width: 490px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 2.1;
}

.sustainability-card .button {
    margin-top: 30px;
}

.sustainability-card__visual {
    position: relative;
    width: 420px;
    height: 420px;
    justify-self: center;
    display: grid;
    place-items: center;
}

.leaf-orbit {
    position: absolute;
    border: 1px solid rgba(170, 255, 211, 0.18);
    border-radius: 50%;
}

.leaf-orbit--one {
    width: 100%;
    height: 55%;
    transform: rotate(-28deg);
    animation: leafOrbit 12s linear infinite;
}

.leaf-orbit--two {
    width: 100%;
    height: 55%;
    transform: rotate(28deg);
    animation: leafOrbit 14s linear infinite reverse;
}

.leaf-orbit--three {
    width: 68%;
    height: 68%;
    animation: leafOrbit 10s linear infinite;
}

@keyframes leafOrbit {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.leaf-core {
    width: 155px;
    height: 155px;
    display: grid;
    place-items: center;
    color: #8dffc5;
    border: 1px solid rgba(141, 255, 197, 0.2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141, 255, 197, 0.14), transparent 70%);
    backdrop-filter: blur(4px);
    transition: transform var(--duration-med) var(--ease);
}

    .leaf-core:hover {
        transform: scale(1.08);
    }

    .leaf-core svg {
        width: 100px;
    }

/* ============================================================
   15. ARTICLES
   ============================================================ */
.articles-section {
    background: var(--gray-50);
}

.articles-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
}

.article-card--large {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--bg-card);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
}

    .article-card--large:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

.article-card__image {
    position: relative;
    min-height: 340px;
    overflow: hidden;
}

    .article-card__image::before,
    .article-mini__image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(5, 70, 45, 0.4), rgba(22, 199, 132, 0.04));
        z-index: 1;
    }

.article-card__image--one {
    background: linear-gradient(135deg, #173f30, #34b779);
}

    .article-card__image--one::after {
        content: "PACKAGING";
        position: absolute;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        direction: ltr;
        color: rgba(255, 255, 255, 0.10);
        font-size: 4.3rem;
        font-weight: 900;
        letter-spacing: 0.07em;
        white-space: nowrap;
        z-index: 0;
    }

.article-card__image > span {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
}

.article-card__content {
    padding: 28px;
}

.article-meta {
    color: var(--gray-500);
    font-size: var(--font-xs);
}

.article-card h3 {
    max-width: 700px;
    margin-top: 11px;
    font-size: var(--font-lg);
    line-height: 1.8;
    font-weight: 800;
}

.article-card p {
    margin-top: 8px;
    color: var(--gray-600);
    font-size: var(--font-sm);
    line-height: 2;
}

.article-card .text-link {
    margin-top: 22px;
}

.articles-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.article-mini {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 137px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
}

    .article-mini:hover {
        transform: translateX(-6px) scale(1.01);
        box-shadow: var(--shadow-md);
    }

.article-mini__image {
    position: relative;
    overflow: hidden;
}

.article-mini__image--one {
    background: linear-gradient(145deg, #9ce7bd, #1a9160);
}

.article-mini__image--two {
    background: linear-gradient(145deg, #0d8060, #0d4735);
}

.article-mini__image--three {
    background: linear-gradient(145deg, #c0f1d8, #58bc88);
}

.article-mini__content {
    display: flex;
    flex-direction: column;
    padding: 17px;
}

    .article-mini__content > span {
        direction: ltr;
        color: var(--green-600);
        font-size: var(--font-xs);
        font-weight: 800;
        letter-spacing: 0.08em;
    }

.article-mini h3 {
    margin-top: 5px;
    font-size: var(--font-sm);
    line-height: 1.75;
    font-weight: 750;
}

.article-mini small {
    margin-top: auto;
    color: var(--gray-500);
    font-size: var(--font-xs);
}

/* ============================================================
   16. CTA
   ============================================================ */
.cta-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--dark);
}

.cta-section__glow {
    position: absolute;
    width: 700px;
    height: 700px;
    top: -450px;
    right: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 199, 132, 0.28), transparent 65%);
    animation: glowSlide 10s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes glowSlide {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-40px, 30px) scale(1.1);
    }
}

.cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

    .cta-card h2 {
        max-width: 720px;
        margin-top: 14px;
        color: var(--white);
        font-size: clamp(2rem, 3.5vw, 3.3rem);
        line-height: 1.35;
        font-weight: 850;
    }

        .cta-card h2 span {
            color: var(--green-400);
        }

    .cta-card p {
        max-width: 560px;
        margin-top: 17px;
        color: rgba(255, 255, 255, 0.55);
        font-size: var(--font-sm);
        line-height: 2;
    }

    .cta-card > .button {
        flex-shrink: 0;
    }

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
    background: #06110c;
    color: var(--white);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 50px;
    padding: 80px 0 65px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-brand p {
    max-width: 310px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--font-sm);
    line-height: 2;
}

.footer-brand .brand__text strong {
    color: var(--white);
}

.footer-brand .brand__text small {
    color: rgba(255, 255, 255, 0.4);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-column h4 {
        margin-bottom: 7px;
        color: var(--white);
        font-size: var(--font-sm);
        font-weight: 700;
    }

    .footer-column a,
    .footer-column span {
        color: rgba(255, 255, 255, 0.45);
        font-size: var(--font-xs);
        transition: color var(--duration-fast) ease, transform var(--duration-fast) var(--ease);
        text-decoration: none;
    }

        .footer-column a:hover {
            color: var(--green-400);
            transform: translateX(-4px);
        }

        .footer-column a:focus-visible {
            outline: 2px solid var(--green-400);
            outline-offset: 2px;
        }

.footer-contact a:first-of-type {
    direction: ltr;
    text-align: right;
}

.footer-bottom {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--font-xs);
}

    .footer-bottom div {
        display: flex;
        gap: 25px;
    }

    .footer-bottom a {
        transition: color var(--duration-fast) ease;
        text-decoration: none;
        color: inherit;
    }

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

        .footer-bottom a:focus-visible {
            outline: 2px solid var(--green-400);
            outline-offset: 2px;
        }

/* ============================================================
   18. BACK TO TOP
   ============================================================ */
.back-to-top {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 500;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--green-700);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all var(--duration-med) var(--ease);
    cursor: pointer;
}

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .back-to-top:hover {
        color: var(--white);
        background: var(--green-500);
        border-color: var(--green-500);
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 12px 30px rgba(22, 199, 132, 0.25);
    }

    .back-to-top svg {
        width: 20px;
        transition: transform var(--duration-fast) ease;
    }

    .back-to-top:hover svg {
        transform: translateY(-3px);
    }

    .back-to-top:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 2px;
    }

/* ============================================================
   19. REVEAL ANIMATION
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}

    [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    [data-reveal][data-delay="100"] {
        transition-delay: 0.1s;
    }

    [data-reveal][data-delay="200"] {
        transition-delay: 0.2s;
    }

    [data-reveal][data-delay="300"] {
        transition-delay: 0.3s;
    }

    [data-reveal][data-delay="400"] {
        transition-delay: 0.4s;
    }

    [data-reveal][data-delay="500"] {
        transition-delay: 0.5s;
    }

/* ============================================================
   20. TESTIMONIALS
   ============================================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
    text-align: center;
}

    .testimonial-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    .testimonial-card img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
        border: 3px solid var(--green-200);
    }

    .testimonial-card h4 {
        font-size: var(--font-md);
        font-weight: 700;
        color: var(--color-body);
    }

    .testimonial-card .role {
        font-size: var(--font-xs);
        color: var(--gray-500);
        margin-bottom: 12px;
    }

    .testimonial-card p {
        font-size: var(--font-sm);
        line-height: 1.9;
        color: var(--gray-600);
        font-style: italic;
    }

/* ============================================================
   21. WHY US
   ============================================================ */
.whyus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.whyus-item {
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: transform var(--duration-med) var(--ease), box-shadow var(--duration-med) var(--ease);
}

    .whyus-item:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: var(--shadow-md);
    }

.whyus-icon {
    font-size: 2.8rem;
    margin-bottom: 15px;
}

.whyus-item h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    margin-bottom: 8px;
}

.whyus-item p {
    font-size: var(--font-sm);
    color: var(--gray-600);
    line-height: 1.8;
}

/* ============================================================
   22. CHAT WIDGET
   ============================================================ */
.chat-widget {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chat-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-500);
    color: var(--white);
    border: none;
    box-shadow: 0 8px 25px rgba(22, 199, 132, 0.4);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) ease;
    display: grid;
    place-items: center;
}

    .chat-toggle:hover {
        transform: scale(1.1);
        background: var(--green-600);
    }

    .chat-toggle:focus-visible {
        outline: 2px solid var(--green-500);
        outline-offset: 2px;
    }

.chat-box {
    width: 340px;
    max-height: 450px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

    .chat-box.is-open {
        display: flex;
    }

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--green-500);
    color: var(--white);
    font-weight: 700;
}

    .chat-header button {
        background: none;
        border: none;
        color: var(--white);
        font-size: 1.2rem;
        cursor: pointer;
    }

        .chat-header button:focus-visible {
            outline: 2px solid var(--white);
            outline-offset: 2px;
        }

.chat-messages {
    flex: 1;
    padding: 15px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
}

.chat-message {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 80%;
    font-size: var(--font-sm);
    line-height: 1.6;
}

    .chat-message.bot {
        background: var(--gray-100);
        align-self: flex-start;
    }

    .chat-message.user {
        background: var(--green-500);
        color: var(--white);
        align-self: flex-end;
    }

.chat-input {
    display: flex;
    border-top: 1px solid var(--border);
    padding: 10px;
}

    .chat-input input {
        flex: 1;
        border: none;
        padding: 10px 12px;
        font-family: inherit;
        font-size: var(--font-sm);
        border-radius: 12px;
        background: var(--bg-input);
        color: var(--color-body);
    }

        .chat-input input:focus-visible {
            outline: 2px solid var(--green-500);
            outline-offset: 0;
        }

    .chat-input button {
        background: var(--green-500);
        color: var(--white);
        border: none;
        width: 40px;
        border-radius: 12px;
        margin-right: 8px;
        cursor: pointer;
        transition: background var(--duration-fast) ease;
    }

        .chat-input button:hover {
            background: var(--green-600);
        }

        .chat-input button:focus-visible {
            outline: 2px solid var(--green-500);
            outline-offset: 2px;
        }

/* ============================================================
   23. READING PROGRESS
   ============================================================ */
.progress-bar--reading {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-400), var(--green-600));
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
}

/* ============================================================
   24. DARK MODE TOGGLE
   ============================================================ */
.dark-mode-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 500;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
    display: grid;
    place-items: center;
    color: var(--color-body);
}

    .dark-mode-toggle:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
    }

[data-theme="dark"] .dark-mode-toggle {
    background: rgba(20, 30, 25, 0.9);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode-toggle:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
}

/* ============================================================
   25. TOAST NOTIFICATION
   ============================================================ */
.toast-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: var(--white);
    padding: 14px 28px;
    border-radius: 100px;
    font-size: var(--font-sm);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 1;
    transition: opacity var(--duration-med) ease, transform var(--duration-med) ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    background: rgba(10, 23, 18, 0.92);
}

    .toast-notification.fade-out {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

[data-theme="dark"] .toast-notification {
    background: rgba(20, 30, 25, 0.95);
}

/* ============================================================
   26. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   27. RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .hero__inner {
        gap: 35px;
    }

    .main-nav {
        gap: 22px;
    }

    .about-grid,
    .quality-grid {
        gap: 60px;
    }

    .sustainability-card {
        padding: 65px;
    }
}

@media (max-width: 1024px) {
    .container {
        width: min(calc(100% - 36px), var(--container));
    }

    .main-nav,
    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu {
        position: absolute;
        top: 88px;
        right: 18px;
        left: 18px;
        display: block;
        max-height: 0;
        overflow: hidden;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(24px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
        transition: max-height var(--duration-med) var(--ease), opacity var(--duration-med) var(--ease);
        opacity: 0;
    }

        .mobile-menu.is-open {
            max-height: 600px;
            opacity: 1;
        }

        .mobile-menu nav {
            display: flex;
            flex-direction: column;
            padding: 16px;
            gap: 4px;
        }

            .mobile-menu nav a {
                padding: 13px 14px;
                border-radius: 12px;
                color: var(--gray-700);
                font-size: var(--font-sm);
                transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
                text-decoration: none;
            }

                .mobile-menu nav a:hover {
                    color: var(--green-700);
                    background: var(--green-50);
                }

    .mobile-menu__cta {
        margin-top: 8px;
        color: var(--white) !important;
        text-align: center;
        background: var(--green-500) !important;
        border-radius: 12px !important;
    }

        .mobile-menu__cta:hover {
            background: var(--green-600) !important;
        }

    .hero__inner {
        grid-template-columns: 1fr 0.8fr;
    }

    .hero__visual {
        transform: scale(0.9);
    }

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

    .about-image {
        max-width: 650px;
    }

    .about-content {
        max-width: 750px;
    }

    .quality-content {
        order: 1;
    }

    .quality-visual {
        order: 0;
    }

    .products-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-card:first-child {
        grid-column: 1 / -1;
    }

    .sustainability-card {
        grid-template-columns: 1fr;
        padding: 60px;
    }


    .articles-grid {
        grid-template-columns: 1fr;
    }

    .articles-side {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .article-mini {
        grid-template-columns: 1fr;
    }

    .article-mini__image {
        min-height: 120px;
    }

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .footer-contact {
        grid-column: 2 / 4;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 90px 0;
    }

    .header__inner {
        min-height: 75px;
    }

    .mobile-menu {
        top: 75px;
    }

    .hero {
        min-height: auto;
        padding: 120px 0 75px;
    }

    .hero__inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero__content {
        padding-top: 0;
    }

    .hero__title {
        max-width: none;
    }

    .hero__description {
        font-size: var(--font-sm);
    }

    .hero__visual {
        height: 400px;
        transform: none;
    }

    .hero__scroll {
        display: none;
    }

    .company-strip__inner {
        padding: 22px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .industry-list {
        width: 100%;
        overflow: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .section-heading {
        margin-bottom: 50px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .numbers-section {
        padding: 55px 0;
    }

    .numbers-grid {
        grid-template-columns: 1fr 1fr;
    }

    .number-item {
        min-height: 120px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .about-image {
        min-height: 450px;
    }

    .about-image__main {
        height: 450px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-card:first-child {
        grid-column: auto;
    }

    .quality-visual {
        width: min(90vw, 420px);
    }

    .sustainability-card {
        padding: 50px 32px;
    }

    .articles-side {
        grid-template-columns: 1fr;
    }

    .article-mini {
        grid-template-columns: 140px 1fr;
    }

    .cta-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 40px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom {
        padding: 22px 0;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .hero {
        padding-top: 105px;
    }

    .hero__title {
        font-size: 2.55rem;
    }

    .hero__description {
        font-size: var(--font-sm);
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .button {
        width: 100%;
    }

    .hero__trust {
        justify-content: space-between;
        gap: 10px;
    }

    .trust-divider {
        height: 25px;
    }

    .trust-item strong {
        font-size: var(--font-md);
    }

    .trust-item span {
        font-size: var(--font-xs);
    }

    .hero__visual {
        height: 350px;
    }

    .section-heading h2 {
        font-size: 2rem;
    }

    .about-image {
        min-height: 360px;
    }

    .about-image__main {
        height: 360px;
    }

    .about-image__badge {
        left: 12px;
        bottom: 18px;
    }

    .factory-center {
        width: 175px;
        height: 175px;
    }

        .factory-center strong {
            font-size: 3.2rem;
        }

    .numbers-grid {
        grid-template-columns: 1fr;
    }

    .number-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .product-card__visual {
        min-height: 260px;
    }

    .quality-visual {
        width: 320px;
    }

    .quality-core {
        width: 135px;
        height: 135px;
    }

    .quality-tag {
        font-size: var(--font-xs);
        padding: 7px 9px;
    }

    .sustainability-card {
        padding: 44px 23px;
        border-radius: 28px;
    }

   

    .article-mini {
        grid-template-columns: 110px 1fr;
    }

    .article-mini__image {
        min-height: 130px;
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom div {
        flex-wrap: wrap;
        gap: 15px;
    }

    .back-to-top {
        left: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
    }
}
/* ============ PRODUCT CATALOG (جایگزین testimonials) ============ */
.catalog-section {
    background: var(--bg-body);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 20px;
}

.catalog-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s cubic-bezier(.2,.8,.2,1);
    display: flex;
    flex-direction: column;
}

    .catalog-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(8, 40, 27, 0.14);
    }

.catalog-card__image {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: linear-gradient(145deg, #eafaf1, #b5f4d3);
}

    .catalog-card__image svg {
        width: 100%;
        height: 100%;
        display: block;
        transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
    }

.catalog-card:hover .catalog-card__image svg {
    transform: scale(1.06);
}

.catalog-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--green-700);
    box-shadow: 0 6px 18px rgba(8, 40, 27, 0.12);
    z-index: 2;
}

.catalog-card__badge--hot {
    color: #b91c1c;
    background: rgba(255, 245, 245, 0.95);
}

.catalog-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
}

.catalog-card__category {
    direction: ltr;
    text-align: right;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--green-600);
}

.catalog-card__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-body);
    margin-top: 4px;
}

.catalog-card__specs {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 6px;
    line-height: 1.9;
}

.catalog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.catalog-card__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .catalog-card__price small {
        font-size: 10.5px;
        color: var(--gray-500);
    }

    .catalog-card__price strong {
        font-size: 17px;
        font-weight: 850;
        color: var(--green-700);
        letter-spacing: 0.01em;
    }

        .catalog-card__price strong em {
            font-style: normal;
            font-size: 12px;
            color: var(--gray-500);
            font-weight: 600;
            margin-inline-start: 3px;
        }

.catalog-card__phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 18px rgba(22, 199, 132, 0.28);
    direction: ltr;
    text-decoration: none;
}

    .catalog-card__phone:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 14px 30px rgba(22, 199, 132, 0.4);
    }

    .catalog-card__phone svg {
        width: 16px;
        height: 16px;
    }

.catalog-card__phone--ask {
    background: var(--bg-card);
    color: var(--green-700);
    border: 1.5px solid var(--green-300);
    box-shadow: none;
    direction: rtl;
    padding: 9px 14px;
}

    .catalog-card__phone--ask:hover {
        background: var(--green-50);
        border-color: var(--green-500);
        box-shadow: 0 8px 20px rgba(22, 199, 132, 0.15);
    }

    .catalog-card__phone--ask svg {
        animation: ringBell 2.4s ease-in-out infinite;
    }

@keyframes ringBell {
    0%, 60%, 100% {
        transform: rotate(0);
    }

    10%, 30% {
        transform: rotate(-12deg);
    }

    20%, 40% {
        transform: rotate(12deg);
    }
}

@media (max-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .catalog-card__footer {
        flex-wrap: wrap;
    }
}
/* آیکون‌های چرخشی برای dark mode toggle */
.dark-mode-toggle svg {
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
}

/* چت باکس انیمیشن نرم */
.chat-box {
    transform-origin: bottom right;
    animation: chatOpen 0.3s cubic-bezier(.2,.8,.2,1);
}

@keyframes chatOpen {
    from {
        transform: scale(0.85) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}
/* ============ FOOTER VISIBILITY FIX ============ */

/* لینک‌ها و متن‌های ستون‌های فوتر */
.site-footer .footer-column a,
.site-footer .footer-column span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

    .site-footer .footer-column a:hover {
        color: var(--green-400);
        transform: translateX(-4px);
    }

/* شماره تماس و ایمیل - بلدتر */
.site-footer .footer-contact a {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

    .site-footer .footer-contact a:hover {
        color: var(--green-400);
    }

.site-footer .footer-contact span {
    color: rgba(255, 255, 255, 0.72);
}

/* توضیحات برند در فوتر */
.site-footer .footer-brand p {
    color: rgba(255, 255, 255, 0.7);
}

/* عنوان‌های ستون */
.site-footer .footer-column h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

/* نوار پایین فوتر (کپی‌رایت و لینک‌های قانونی) */
.site-footer .footer-bottom {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

    .site-footer .footer-bottom a {
        color: rgba(255, 255, 255, 0.78);
    }

        .site-footer .footer-bottom a:hover {
            color: var(--green-400);
        }

/* ============ CTA SECTION — دکمه "تماس با کارشناسان" ============ */

.button--white {
    background: #ffffff;
    color: var(--green-800);
    border: 1px solid #ffffff;
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.15);
}

    .button--white:hover {
        background: var(--green-50);
        border-color: var(--green-50);
        color: var(--green-900);
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 22px 44px rgba(255, 255, 255, 0.22);
    }

    .button--white svg {
        transform: rotate(180deg);
    }

    .button--white:hover svg {
        transform: rotate(180deg) translateX(4px);
    }

/* دکمه روشن در بخش پایداری */
.button--light {
    background: rgba(255, 255, 255, 0.96);
    color: var(--green-800);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

    .button--light:hover {
        background: #ffffff;
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 22px 44px rgba(255, 255, 255, 0.22);
    }

    .button--light svg {
        transform: rotate(180deg);
    }

    .button--light:hover svg {
        transform: rotate(180deg) translateX(4px);
    }

/* شماره تماس و ایمیل داخل CTA */
.cta-card .cta-contact a {
    color: var(--green-300);
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s ease;
}

    .cta-card .cta-contact a:hover {
        color: var(--green-400);
        text-decoration: underline;
    }

    /*NEW NEW NEW*/

/* ============ HERO ============ */
.hero__visual {
    position: relative;
    height: 590px;
    display: grid;
    place-items: center;
    perspective: 1200px;
}

.hero-product-image {
    width: 100%;
    max-width: 460px;
    height: 480px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(8, 40, 27, 0.20);
    transform: rotateY(-4deg) rotateX(2deg);
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
    background: #effdf6;
}

    .hero-product-image svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.hero__visual:hover .hero-product-image {
    transform: rotateY(0) rotateX(0) scale(1.02);
}

.hero-product-card {
    position: absolute;
    bottom: 40px;
    right: -30px;
    width: 240px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(8,40,27,0.22);
    border: 1px solid rgba(255,255,255,0.9);
    z-index: 3;
    direction: rtl;
}

.hero-product-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: ltr;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    margin-bottom: 14px;
}

.hero-product-card__status {
    color: var(--green-600);
}

.film-roll {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 14px;
}

.film-roll__body {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16c784, #0eaa6e);
    position: relative;
    box-shadow: inset -10px -10px 22px rgba(0,0,0,0.18), 10px 15px 30px rgba(8,40,27,0.25);
}

    .film-roll__body::before {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255,255,255,0.35), transparent 60%);
    }

.film-roll__core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}

.film-roll__shadow, .film-roll__shine, .film-roll__line {
    display: none;
}

.hero-product-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-100);
    padding-top: 12px;
}

    .hero-product-card__bottom span {
        display: block;
        font-size: 10px;
        color: var(--gray-500);
    }

    .hero-product-card__bottom strong {
        font-size: 14px;
        font-weight: 800;
    }

.product-code {
    direction: ltr;
    font-size: 12px;
    font-weight: 800;
    color: var(--green-600);
}

    .product-code span {
        display: inline;
        color: var(--gray-500);
        margin-right: 3px;
        font-size: 10px;
    }

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(8,40,27,0.14);
    border: 1px solid rgba(255,255,255,0.85);
    z-index: 4;
}

.floating-card__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--green-50);
    color: var(--green-600);
    flex-shrink: 0;
}

    .floating-card__icon svg {
        width: 20px;
        height: 20px;
    }

.floating-card strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.floating-card span:not(.floating-card__icon) {
    font-size: 11px;
    color: var(--gray-500);
}

.floating-card--quality {
    top: 60px;
    left: -30px;
    animation: floatY 4s ease-in-out infinite;
}

.floating-card--eco {
    bottom: 120px;
    left: -50px;
    animation: floatY 5s ease-in-out infinite reverse;
}

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

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

/* ============ ABOUT / QUALITY / SUSTAINABILITY IMAGES ============ */
.about-image__main {
    width: 100%;
    height: 540px;
    display: block;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: #0a1712;
}

    .about-image__main svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.quality-visual {
    position: relative;
    width: min(480px, 100%);
    aspect-ratio: 1;
    margin: auto;
}

.quality-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid var(--bg-card);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 2;
    background: #effdf6;
}

    .quality-image svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.sustainability-card__visual {
    position: relative;
    width: 420px;
    height: 420px;
    justify-self: center;
    display: grid;
    place-items: center;
}

    .sustainability-card__visual > svg {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 30px 80px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.18);
    }

/* ============ PRODUCTS / ARTICLES IMAGES ============ */
.product-card__visual > svg {
    width: 100%;
    height: 100%;
    display: block;
}

.product-card__visual {
    padding: 0;
}

.article-card__image > svg,
.article-mini__image > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ============ TESTIMONIAL CARD ============ */
.testimonial-card {
    text-align: right;
    padding: 28px;
}

.testimonial-card__content p {
    font-size: var(--font-sm);
    line-height: 2;
    color: var(--gray-600);
    margin: 0;
}

.testimonial-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    text-align: right;
}

    .testimonial-card__footer .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 2px solid var(--green-200);
        overflow: hidden;
    }

        .testimonial-card__footer .avatar svg {
            width: 100%;
            height: 100%;
            display: block;
        }

    .testimonial-card__footer > div {
        flex: 1;
        min-width: 0;
    }

    .testimonial-card__footer strong {
        display: block;
        font-size: 14px;
        font-weight: 800;
        color: var(--color-body);
    }

    .testimonial-card__footer > div span {
        font-size: 11.5px;
        color: var(--gray-500);
    }

.testimonial-card__rating {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 2px;
    flex-shrink: 0;
}

/* ============ PRICE TICKER (NEW) ============ */
.price-ticker {
    background: linear-gradient(135deg, #07563b, #0eaa6e);
    color: #fff;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.price-ticker__inner {
    display: flex;
    align-items: stretch;
    min-height: 66px;
    width: min(100%, var(--container));
    margin-inline: auto;
}

.price-ticker__label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 26px;
    background: rgba(0,0,0,0.22);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 2;
}

    .price-ticker__label::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #8dffc5;
        box-shadow: 0 0 0 4px rgba(141,255,197,0.2);
        animation: pulseDot 1.6s ease-in-out infinite;
    }

.price-ticker__track {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.price-ticker__list {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: tickerScroll 45s linear infinite;
    direction: ltr;
    padding-inline: 24px;
}

.price-ticker:hover .price-ticker__list {
    animation-play-state: paused;
}

.price-ticker__item {
    display: flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    direction: rtl;
    font-size: 13px;
    font-weight: 700;
}

    .price-ticker__item .ticker-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        color: #8dffc5;
    }

        .price-ticker__item .ticker-icon svg {
            width: 100%;
            height: 100%;
        }

    .price-ticker__item small {
        color: rgba(255,255,255,0.55);
        font-weight: 500;
        margin-inline-end: 4px;
    }

    .price-ticker__item span {
        color: #8dffc5;
        font-weight: 800;
        letter-spacing: 0.02em;
        direction: ltr;
        display: inline-block;
    }

@keyframes tickerScroll {
    from {
        transform: translateX(0);
    }

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

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .floating-card--quality {
        left: 0;
    }

    .floating-card--eco {
        left: -10px;
    }
}

@media (max-width: 768px) {
    .hero__visual {
        height: auto;
        min-height: 460px;
    }

    .hero-product-image {
        height: 360px;
        max-width: 100%;
    }

    .hero-product-card {
        right: 0;
        bottom: 0;
        width: 210px;
    }

    .floating-card--quality {
        left: 0;
        top: 20px;
    }

    .floating-card--eco {
        left: 0;
        bottom: 20px;
    }

    .quality-image, .about-image__main {
        height: 360px;
    }

    .price-ticker__label {
        padding: 16px 14px;
        font-size: 11px;
    }

    .price-ticker__list {
        gap: 32px;
        animation-duration: 35s;
    }

    .price-ticker__item {
        font-size: 12px;
    }

        .price-ticker__item .ticker-icon {
            width: 18px;
            height: 18px;
        }
}

@media (max-width: 480px) {
    .hero-product-image {
        height: 300px;
    }

    .floating-card {
        padding: 9px 12px;
    }

        .floating-card strong {
            font-size: 12px;
        }

        .floating-card span:not(.floating-card__icon) {
            font-size: 10px;
        }

    .quality-image, .about-image__main {
        height: 280px;
    }
}

/* Dynamic image elements replacing the original inline SVG artwork */
.hero-product-image img,
.about-image__main img,
.quality-image img,
.sustainability-card__visual img,
.product-card__visual > img,
.article-card__image > img,
.article-mini__image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-product-image img {
    object-fit: cover;
}

.catalog-card__image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.catalog-card__price strong.catalog-card__price--muted {
    font-size: 14px;
    color: var(--gray-600);
}

.brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* ============ BLOG ============ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 20px;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.blog-page-btn {
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--color-body);
    font-weight: 700;
    transition: all .25s ease;
    text-decoration: none;
}

    .blog-page-btn:hover {
        border-color: var(--green-500);
        color: var(--green-600);
        transform: translateY(-2px);
    }

    .blog-page-btn.is-active {
        background: var(--green-500);
        color: #fff;
        border-color: var(--green-500);
        box-shadow: 0 8px 20px rgba(22,199,132,0.28);
    }

.article-page {
    padding: 140px 0 90px;
}

.article-page__header {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}

.article-page__title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 850;
    line-height: 1.35;
    margin: 14px 0 20px;
    letter-spacing: -0.03em;
}

.article-page__meta {
    color: var(--gray-500);
    font-size: 13px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.article-page__cover {
    max-width: 1080px;
    margin: 0 auto 50px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

    .article-page__cover img {
        width: 100%;
        height: auto;
        display: block;
    }

.article-page__body {
    max-width: 780px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 2.1;
    color: var(--color-body);
}

    .article-page__body h2 {
        font-size: 1.7rem;
        margin: 42px 0 16px;
        font-weight: 800;
    }

    .article-page__body h3 {
        font-size: 1.28rem;
        margin: 32px 0 12px;
        font-weight: 750;
    }

    .article-page__body p {
        margin-bottom: 18px;
    }

    .article-page__body a {
        color: var(--green-600);
        text-decoration: underline;
    }

    .article-page__body img {
        max-width: 100%;
        border-radius: 16px;
        margin: 24px 0;
    }

    .article-page__body ul, .article-page__body ol {
        padding-right: 26px;
        margin-bottom: 18px;
    }

    .article-page__body li {
        margin-bottom: 6px;
    }

    .article-page__body blockquote {
        padding: 16px 22px;
        border-right: 4px solid var(--green-500);
        background: var(--green-50);
        border-radius: 12px;
        margin: 22px 0;
        color: var(--gray-600);
        font-style: italic;
    }

    .article-page__body pre {
        background: #0b1220;
        color: #e2e8f0;
        padding: 18px;
        border-radius: 12px;
        overflow-x: auto;
        margin: 22px 0;
        direction: ltr;
        text-align: left;
    }

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-tag {
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--green-50);
    color: var(--green-700);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .article-page {
        padding-top: 110px;
    }
}
/* ============ SOLUTIONS FEATURES ============ */
.solutions-features {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.solutions-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .solutions-feature:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

.solutions-feature__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--green-50);
    color: var(--green-600);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .solutions-feature__icon svg {
        width: 22px;
        height: 22px;
    }

.solutions-feature h4 {
    font-size: 14.5px;
    font-weight: 800;
    margin-bottom: 4px;
}

.solutions-feature p {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.9;
}

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-section {
    background: var(--bg-body);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.contact-card {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

    .contact-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
        border-color: var(--green-300);
    }

.contact-card--static {
    cursor: default;
}

    .contact-card--static:hover {
        transform: none;
        border-color: var(--border);
    }

.contact-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--green-50);
    color: var(--green-600);
    display: grid;
    place-items: center;
    transition: transform .3s var(--ease), background .3s ease;
}

.contact-card:hover .contact-card__icon {
    background: var(--green-500);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

.contact-card__icon svg {
    width: 24px;
    height: 24px;
}

.contact-card__icon--inline {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.contact-card__body {
    flex: 1;
    min-width: 0;
}

.contact-card__label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.contact-card__body strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-body);
    line-height: 1.6;
    word-break: break-word;
}

.contact-card__body small {
    display: block;
    margin-top: 4px;
    color: var(--gray-500);
    font-size: 12px;
}

/* ===== MAP ===== */
.contact-map-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 50px;
}

.contact-map {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    background: #eaeaea;
}

    .contact-map iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        filter: grayscale(0.05) contrast(1.02);
    }

[data-theme="dark"] .contact-map iframe {
    filter: invert(0.92) hue-rotate(180deg) contrast(0.95);
}

.contact-map__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    flex-wrap: wrap;
}

.contact-map__address {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-body);
}

    .contact-map__address strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 4px;
    }

    .contact-map__address p {
        margin: 0;
        font-size: 13px;
        color: var(--gray-600);
        line-height: 1.8;
    }

/* ===== SOCIAL ===== */
.contact-social {
    text-align: center;
    padding: 30px 0 10px;
}

    .contact-social h3 {
        font-size: 15px;
        font-weight: 800;
        color: var(--color-body);
        margin-bottom: 18px;
    }

.contact-social__list {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-social__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--color-body);
    font-size: 13px;
    font-weight: 700;
    transition: all .25s var(--ease);
    text-decoration: none;
}

    .contact-social__item svg {
        width: 16px;
        height: 16px;
        color: var(--green-600);
    }

    .contact-social__item:hover {
        background: var(--green-500);
        color: #fff;
        border-color: var(--green-500);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(22,199,132,0.25);
    }

        .contact-social__item:hover svg {
            color: #fff;
        }

@media (max-width: 640px) {
    .contact-map {
        aspect-ratio: 4 / 3;
    }

    .contact-map__footer {
        padding: 18px;
    }

        .contact-map__footer .button {
            width: 100%;
        }
}
/* ============================================================
   ERROR PAGE (404 / 500)
============================================================ */
.error-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
    background: linear-gradient(135deg, #ffffff 0%, #f6fcf8 60%, #edf9f2 100%);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .error-page {
    background: linear-gradient(135deg, #0a0f0d, #10261d);
}

.error-page::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22,199,132,0.14), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.error-page::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66,220,146,0.10), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.error-box {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 40px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .error-box {
    background: rgba(21,34,27,0.7);
}

.error-box__emoji {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 14px;
    animation: floatY 3s ease-in-out infinite;
}

.error-box__code {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--green-600), var(--green-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.error-box__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 850;
    color: var(--color-body);
    margin-bottom: 12px;
}

.error-box__message {
    font-size: 15px;
    line-height: 2;
    color: var(--gray-600);
    max-width: 460px;
    margin: 0 auto 30px;
}

.error-box__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .error-page {
        padding: 110px 0 60px;
    }

    .error-box {
        padding: 36px 22px;
        border-radius: 24px;
    }

    .error-box__code {
        font-size: 5rem;
    }

    .error-box__emoji {
        font-size: 3.5rem;
    }

    .error-box__actions .button {
        width: 100%;
    }
}
/* ============================================================
   BREADCRUMBS
============================================================ */
.breadcrumbs {
    padding: 20px 0;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    margin-top: 88px; /* زیر هدر fixed */
}

[data-theme="dark"] .breadcrumbs {
    background: rgba(10,15,13,0.6);
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-500);
    font-weight: 500;
}

.breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-600);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
}

    .breadcrumbs__link:hover {
        color: var(--green-600);
        background: var(--green-50);
    }

.breadcrumbs__current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-body);
    font-weight: 700;
    padding: 4px 8px;
}

.breadcrumbs__home-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.breadcrumbs__sep {
    color: var(--gray-300);
    display: inline-flex;
    align-items: center;
}

    .breadcrumbs__sep svg {
        width: 14px;
        height: 14px;
    }

/* در صفحه مقالات/راهکارها، برچسب پایین‌تر می‌رود */
.breadcrumbs + .article-page {
    padding-top: 50px;
}

@media (max-width: 640px) {
    .breadcrumbs {
        padding: 14px 0;
        margin-top: 75px;
    }

    .breadcrumbs__list {
        font-size: 12px;
    }

    .breadcrumbs__current {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   MOBILE OPTIMIZATION PATCH  (v1)
   این بخش بعد از تمام استایل‌های قبلی بیاید
============================================================ */

/* ---------- پایه: جلوگیری از سرریز افقی ---------- */
html, body {
    overflow-x: clip;
}

/* ---------- TABLET PORTRAIT: 769px – 1024px ---------- */
@media (max-width: 1024px) and (min-width: 769px) {

    .hero {
        min-height: 700px;
    }

    .hero__inner {
        min-height: 700px;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .hero__visual {
        height: 480px;
        transform: none;
    }

    .hero-product-image {
        max-width: 380px;
        height: 400px;
        transform: none;
    }

    .hero-product-card {
        right: -10px;
        bottom: 20px;
        width: 210px;
    }

    .floating-card--quality {
        left: 0;
        top: 30px;
    }

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

/* ============================================================
   MOBILE  ≤ 768px
============================================================ */
@media (max-width: 768px) {

    /* ---------- فاصله سکشن‌ها ---------- */
    .section {
        padding: 70px 0;
    }

    .section-heading {
        margin-bottom: 40px;
        gap: 14px;
    }

        .section-heading h2 {
            font-size: clamp(1.6rem, 6.5vw, 2.1rem);
            line-height: 1.35;
            letter-spacing: -0.02em;
        }

        .section-heading > p {
            font-size: 13.5px;
            line-height: 2;
        }

    /* ============ HERO ============ */
    .hero {
        min-height: auto;
        padding: 100px 0 55px;
    }

    .hero__inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero__content {
        padding-top: 0;
    }

    .hero__eyebrow {
        margin-bottom: 16px;
    }

    .hero__title {
        max-width: none;
        font-size: clamp(1.9rem, 8.5vw, 2.6rem);
        line-height: 1.25;
        letter-spacing: -0.03em;
    }

    .hero__description {
        font-size: 14.5px;
        line-height: 2;
        margin-top: 16px;
    }

    .hero__actions {
        margin-top: 26px;
        gap: 10px;
    }

        .hero__actions .button {
            width: 100%;
        }

    .hero__trust {
        margin-top: 32px;
        gap: 14px;
        max-width: none;
        justify-content: space-between;
    }

    .trust-item strong {
        font-size: var(--font-md);
    }

    .trust-item span {
        font-size: 11px;
    }

    .trust-divider {
        height: 26px;
    }

    /* ---------- Hero visual: تبدیل چیدمان absolute به ستونی ---------- */
    .hero__visual {
        position: relative;
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        perspective: none;
        transform: none;
    }

    .hero-product-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 5 / 4;
        border-radius: 22px;
        transform: none;
        box-shadow: 0 22px 50px rgba(8, 40, 27, 0.16);
    }

    /* کارت محصول: از absolute به static */
    .hero-product-card {
        position: relative;
        inset: auto;
        width: 100%;
        padding: 16px 18px;
        border-radius: 18px;
        box-shadow: 0 14px 34px rgba(8, 40, 27, 0.14);
    }

    .film-roll {
        width: 72px;
        height: 72px;
        margin-bottom: 12px;
    }

    .film-roll__body {
        width: 72px;
        height: 72px;
    }

    .film-roll__core {
        width: 22px;
        height: 22px;
    }

    /* کارت‌های شناور: به کارت‌های عادی تبدیل شوند */
    .floating-card {
        position: relative;
        inset: auto;
        animation: none;
        width: 100%;
        padding: 11px 14px;
        box-shadow: 0 10px 26px rgba(8, 40, 27, 0.10);
    }

    .floating-card__icon {
        width: 32px;
        height: 32px;
    }

    .floating-card strong {
        font-size: 13px;
    }

    .floating-card span:not(.floating-card__icon) {
        font-size: 11px;
    }

    .floating-card--quality,
    .floating-card--eco {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    /* ---------- COMPANY STRIP ---------- */
    .company-strip__inner {
        min-height: auto;
        padding: 16px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .industry-list {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        gap: 18px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

        .industry-list::-webkit-scrollbar {
            height: 3px;
        }

        .industry-list::-webkit-scrollbar-thumb {
            background: var(--green-300);
            border-radius: 100px;
        }

    /* ---------- PRICE TICKER ---------- */
    .price-ticker__inner {
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .price-ticker__label {
        flex-shrink: 1;
        justify-content: center;
        padding: 10px 14px;
        font-size: 11.5px;
        letter-spacing: 0;
    }

    .price-ticker__track {
        min-height: 52px;
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    .price-ticker__list {
        gap: 26px;
        padding-inline: 16px;
        animation-duration: 30s;
    }

    .price-ticker__item {
        font-size: 12px;
        gap: 8px;
    }

        .price-ticker__item .ticker-icon {
            width: 16px;
            height: 16px;
        }

    /* ---------- NUMBERS ---------- */
    .numbers-section {
        padding: 50px 0;
    }

    .numbers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .number-item {
        min-height: 110px;
        padding: 16px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
    }

        .number-item strong {
            font-size: 2.1rem;
        }

        .number-item small {
            font-size: var(--font-xs);
        }

    /* ---------- ABOUT ---------- */
    .about-grid {
        gap: 36px;
    }

    .about-image {
        min-height: 360px;
    }

    .about-image__main {
        height: 360px;
        border-radius: 22px;
        transform: none;
        box-shadow: 0 24px 55px rgba(8, 40, 27, 0.14);
    }

    .about-image__badge {
        left: 12px;
        bottom: 16px;
        padding: 13px 16px;
        border-radius: 14px;
    }

        .about-image__badge strong {
            font-size: var(--font-md);
        }

        .about-image__badge span {
            font-size: 11px;
        }

    .about-lead {
        font-size: var(--font-md);
        line-height: 2;
    }

    .about-features {
        margin-top: 28px;
    }

    .about-feature {
        grid-template-columns: 42px 1fr;
        gap: 12px;
        padding: 18px 0;
    }

        .about-feature:hover {
            padding-inline: 8px;
        }

        .about-feature h3 {
            font-size: 15px;
        }

        .about-feature p {
            font-size: 13.5px;
            line-height: 1.95;
        }

    .about-content > .text-link {
        margin-top: 22px;
    }

    /* ---------- CATALOG ---------- */
    .catalog-section {
        padding: 70px 0;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .catalog-card__body {
        padding: 18px 18px 20px;
    }

    .catalog-card__title {
        font-size: 16px;
    }

    .catalog-card__specs {
        font-size: 12.5px;
    }

    .catalog-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 16px;
    }

    .catalog-card__price strong {
        font-size: 16px;
    }

    .catalog-card__phone {
        justify-content: center;
        width: 100%;
        padding: 12px 16px;
    }

    /* ---------- PRODUCTS ---------- */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .product-card:first-child {
        grid-column: auto;
    }

    .product-card__content {
        padding: 22px 22px 24px;
    }

    .product-card h3 {
        font-size: var(--font-md);
    }

    .product-card p {
        min-height: auto;
        font-size: 13.5px;
    }

    .product-card__visual {
        min-height: 220px;
    }

    /* ---------- QUALITY ---------- */
    .quality-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .quality-content {
        order: 2;
        max-width: none;
    }

    .quality-visual {
        order: 1;
        width: min(80vw, 360px);
    }

    .quality-content h2 {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    .quality-content > p {
        font-size: 14px;
    }

    .quality-image {
        border-width: 6px;
    }

    .quality-tag {
        font-size: 10.5px;
        padding: 6px 10px;
    }

    .quality-tag--one {
        top: 8%;
        right: -4px;
    }

    .quality-tag--two {
        bottom: 10%;
        left: -4px;
    }

    .quality-tag--three {
        right: 12%;
        bottom: -4px;
    }

    /* ---------- WHY US ---------- */
    .whyus-section {
        padding: 60px 0;
    }

    .whyus-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .whyus-item {
        padding: 22px 16px;
    }

    .whyus-icon {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }

    .whyus-item h3 {
        font-size: var(--font-md);
        margin-bottom: 6px;
    }

    .whyus-item p {
        font-size: 13px;
        line-height: 1.85;
    }

    /* ---------- SUSTAINABILITY ---------- */
    .sustainability-section {
        padding: 20px 0 60px;
    }

    .sustainability-card {
        padding: 40px 26px;
        border-radius: 28px;
        min-height: auto;
        grid-template-columns: 1fr;
    }

        .sustainability-card h2 {
            font-size: clamp(1.6rem, 6.5vw, 2.1rem);
        }

        .sustainability-card p {
            font-size: 14px;
        }

    .sustainability-card__visual {
        position: absolute;
        left: -60px;
        bottom: -70px;
        width: 280px;
        height: 280px;
        opacity: 0.35;
    }

    /* ---------- ARTICLES ---------- */
    .articles-section {
        padding: 70px 0;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .article-card__image {
        min-height: 200px;
    }

    .article-card__content {
        padding: 20px;
    }

    .article-card h3 {
        font-size: var(--font-md);
    }

    .article-card p {
        font-size: 13.5px;
    }

    .articles-side {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .article-mini {
        grid-template-columns: 110px 1fr;
        min-height: 110px;
        border-radius: 16px;
    }

    .article-mini__image {
        min-height: auto;
    }

    .article-mini__content {
        padding: 13px 15px;
    }

    .article-mini h3 {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .article-mini small {
        font-size: 11px;
    }

    /* ---------- CTA ---------- */
    .cta-section {
        padding: 60px 0;
    }

    .cta-card {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

        .cta-card h2 {
            font-size: clamp(1.55rem, 6vw, 2.1rem);
        }

        .cta-card p {
            font-size: 13.5px;
        }

        .cta-card .cta-contact {
            font-size: 13px;
            line-height: 2.2;
        }

            .cta-card .cta-contact a {
                font-size: 14px;
            }

        .cta-card > .button {
            width: 100%;
        }

    /* ---------- FOOTER ---------- */
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 34px 22px;
        padding: 60px 0 45px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom {
        padding: 22px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* ---------- BUTTONS: touch target ---------- */
    .button {
        min-height: 50px;
        padding: 0 22px;
    }

    /* ---------- TEXT LINK: بزرگ‌تر شدن ناحیه لمس ---------- */
    .text-link {
        padding: 6px 0;
    }

    /* ---------- TOAST ---------- */
    .toast-notification {
        max-width: calc(100vw - 32px);
        padding: 12px 22px;
        font-size: 13px;
        bottom: 90px;
        text-align: center;
        border-radius: 100px;
    }

    /* ---------- BACK TO TOP ---------- */
    .back-to-top {
        left: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   SMALL PHONES  ≤ 480px
============================================================ */
@media (max-width: 480px) {

    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .section {
        padding: 58px 0;
    }

    .section-heading h2 {
        font-size: 1.7rem;
    }

    /* HERO */
    .hero {
        padding-top: 92px;
    }

    .hero__title {
        font-size: 1.95rem;
    }

    .hero__description {
        font-size: 14px;
        line-height: 2;
    }

    .hero-product-image {
        aspect-ratio: 4 / 5;
        border-radius: 20px;
    }

    .hero-product-card {
        padding: 14px 16px;
    }

    .hero-product-card__bottom strong {
        font-size: 13px;
    }

    .film-roll {
        width: 62px;
        height: 62px;
    }

    .film-roll__body {
        width: 62px;
        height: 62px;
    }

    .film-roll__core {
        width: 20px;
        height: 20px;
    }

    .floating-card {
        padding: 10px 12px;
    }

    .floating-card__icon {
        width: 28px;
        height: 28px;
    }

        .floating-card__icon svg {
            width: 16px;
            height: 16px;
        }

    .floating-card strong {
        font-size: 12.5px;
    }

    .floating-card span:not(.floating-card__icon) {
        font-size: 10.5px;
    }

    /* NUMBERS */
    .numbers-grid {
        gap: 10px;
    }

    .number-item {
        min-height: 95px;
        padding: 13px 14px;
    }

        .number-item strong {
            font-size: 1.8rem;
        }

    /* ABOUT */
    .about-image,
    .about-image__main {
        height: 300px;
        min-height: 300px;
    }

    .about-image__main {
        border-radius: 18px;
    }

    .about-image__badge {
        padding: 11px 14px;
    }

    /* WHY US: در موبایل کوچک یک ستونه */
    .whyus-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .whyus-item {
        padding: 22px 18px;
    }

    /* CATALOG */
    .catalog-card__image {
        aspect-ratio: 4 / 3;
    }

    .catalog-card__body {
        padding: 16px;
    }

    .catalog-card__title {
        font-size: 15.5px;
    }

    /* ARTICLES */
    .article-mini {
        grid-template-columns: 92px 1fr;
        min-height: 96px;
    }

        .article-mini h3 {
            font-size: 12.5px;
        }

    /* FOOTER */
    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom div {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ============================================================
   VERY SMALL  ≤ 360px
============================================================ */
@media (max-width: 360px) {

    .container {
        width: calc(100% - 24px);
    }

    .hero {
        padding-top: 88px;
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .hero__description {
        font-size: 13.5px;
    }

    .section-heading h2 {
        font-size: 1.5rem;
    }

    .hero-product-image {
        aspect-ratio: 1 / 1;
    }

    .number-item strong {
        font-size: 1.6rem;
    }

    .price-ticker__label {
        font-size: 10.5px;
        padding: 9px 12px;
    }

    .price-ticker__item {
        font-size: 11.5px;
    }

    .quality-visual {
        width: 280px;
    }

    .quality-tag {
        font-size: 10px;
        padding: 5px 8px;
    }
}
.hero__title .hero__title-accent {
    display: inline-block;
    background: linear-gradient(135deg, var(--green-600), var(--green-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__title .hero__title-main {
    color: var(--color-body);
}

/* ============================================================
   FIX: SUSTAINABILITY SECTION — MOBILE
   تصویر به صورت بلوک واقعی، بالای متن
============================================================ */
@media (max-width: 768px) {

    .sustainability-card {
        /* گرید را به flex تغییر می‌دهیم تا بتوانیم ترتیب را کنترل کنیم */
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding: 40px 26px;
        min-height: auto;
    }

    /* متن پایین */
    .sustainability-card__content {
        order: 2;
    }

    /* تصویر بالا — دیگر absolute نیست */
    .sustainability-card__visual {
        order: 1;
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        display: grid;
        place-items: center;
        width: 100%;
        max-width: 260px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        opacity: 1;
        transform: none;
        animation: none;
    }

        .sustainability-card__visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        }

    /* لینک/دکمه CTA درون این سکشن: full-width */
    .sustainability-card .button {
        width: 100%;
        justify-content: center;
    }
}

/* روی گوشی‌های کوچک هم تصویر حذف نشود */
@media (max-width: 480px) {
    .sustainability-card__visual {
        display: grid !important;
        max-width: 200px;
    }
}
.section-heading__title {
    max-width: 620px;
    margin-top: 14px;
    font-size: clamp(2rem, 3.4vw, 3.35rem);
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: -0.035em;
}

    .section-heading__title span {
        color: var(--green-500);
    }


/* ============================================================
   ✨ VENUSPLAST — PREMIUM ENHANCEMENT LAYER v1.0
   این لایه روی استایل‌های قبلی سوار می‌شود و آن‌ها را ارتقا می‌دهد
   ============================================================ */

/* ============================================================
   1. TOKEN UPGRADE — رنگ‌های غنی‌تر، Glow، Depth
   ============================================================ */
:root {
    /* Accent Palette */
    --accent-cyan: #22d3ee;
    --accent-teal: #2dd4bf;
    --accent-lime: #a3e635;
    --accent-amber: #fbbf24;
    --accent-rose: #fb7185;
    /* Glow Tokens */
    --glow-green: 0 0 0 1px rgba(22, 199, 132, 0.15), 0 8px 32px rgba(22, 199, 132, 0.28), 0 24px 64px rgba(22, 199, 132, 0.16);
    --glow-green-soft: 0 12px 40px rgba(22, 199, 132, 0.18);
    --glow-white: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.28);
    /* Layered shadows */
    --shadow-premium-sm: 0 1px 2px rgba(8, 40, 27, 0.04), 0 4px 12px rgba(8, 40, 27, 0.05), 0 12px 24px rgba(8, 40, 27, 0.06);
    --shadow-premium-md: 0 2px 4px rgba(8, 40, 27, 0.04), 0 8px 20px rgba(8, 40, 27, 0.07), 0 24px 48px rgba(8, 40, 27, 0.10);
    --shadow-premium-lg: 0 4px 8px rgba(8, 40, 27, 0.05), 0 16px 40px rgba(8, 40, 27, 0.10), 0 40px 90px rgba(8, 40, 27, 0.16);
    /* Motion */
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    /* Grain / Noise */
    --noise-opacity: 0.035;
}

[data-theme="dark"] {
    --glow-green: 0 0 0 1px rgba(22, 199, 132, 0.25), 0 8px 40px rgba(22, 199, 132, 0.35), 0 24px 80px rgba(22, 199, 132, 0.22);
    --shadow-premium-sm: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.30);
    --shadow-premium-md: 0 8px 24px rgba(0, 0, 0, 0.42), 0 24px 60px rgba(0, 0, 0, 0.40);
    --shadow-premium-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 40px 100px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   2. GLOBAL TEXTURE — Noise روی کل سایت برای عمق
   ============================================================ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}

/* Custom Selection */
::selection {
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--green-500), var(--green-700));
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--green-400), var(--green-600));
        background-clip: padding-box;
    }

/* ============================================================
   3. SCROLL PROGRESS BAR — پیشرفت اسکرول بالای صفحه
   ============================================================ */
body::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--green-400), var(--accent-cyan), var(--green-500), var(--accent-teal));
    background-size: 300% 100%;
    z-index: 10000;
    transition: width 0.15s linear;
    animation: gradientShift 3s linear infinite;
    box-shadow: 0 0 20px rgba(22, 199, 132, 0.6), 0 0 40px rgba(34, 211, 238, 0.3);
    pointer-events: none;
}

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

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

/* ============================================================
   4. TYPOGRAPHY ENHANCEMENTS
   ============================================================ */
body {
    font-feature-settings: "ss01", "cv11", "kern", "liga";
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, .hero__title, .section-heading h2 {
    text-wrap: balance;
}

p, .hero__description, .section-heading > p {
    text-wrap: pretty;
}

/* Animated gradient text for accent spans */
.hero__title span,
.section-heading h2 span,
.quality-content h2 span,
.sustainability-card h2 span,
.cta-card h2 span,
.section-heading__title span {
    display: inline-block;
    background: linear-gradient(120deg, var(--green-600) 0%, var(--green-400) 25%, var(--accent-teal) 50%, var(--green-500) 75%, var(--green-600) 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 6s linear infinite;
    filter: drop-shadow(0 2px 12px rgba(22, 199, 132, 0.15));
}

@keyframes textShimmer {
    to {
        background-position: 300% center;
    }
}

/* ============================================================
   5. HERO — AURORA MESH + FLOATING ELEMENTS
   ============================================================ */
.hero {
    position: relative;
    background: radial-gradient(1200px 600px at 15% 10%, rgba(22, 199, 132, 0.10), transparent 60%), radial-gradient(900px 500px at 85% 30%, rgba(34, 211, 238, 0.08), transparent 65%), radial-gradient(800px 500px at 50% 90%, rgba(163, 230, 53, 0.06), transparent 70%), linear-gradient(135deg, #ffffff 0%, #f6fcf8 40%, #edf9f2 100%);
    background-attachment: fixed;
}

[data-theme="dark"] .hero {
    background: radial-gradient(1200px 600px at 15% 10%, rgba(22, 199, 132, 0.15), transparent 60%), radial-gradient(900px 500px at 85% 30%, rgba(34, 211, 238, 0.10), transparent 65%), radial-gradient(800px 500px at 50% 90%, rgba(163, 230, 53, 0.06), transparent 70%), linear-gradient(135deg, #0a0f0d, #10261d);
}

/* Aurora animated overlay */
.hero__background::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 180deg at 30% 40%, transparent 0deg, rgba(22, 199, 132, 0.18) 60deg, transparent 120deg, rgba(34, 211, 238, 0.14) 200deg, transparent 260deg, rgba(163, 230, 53, 0.10) 320deg, transparent 360deg);
    filter: blur(80px);
    opacity: 0.5;
    animation: auroraSpin 40s linear infinite;
    pointer-events: none;
}

@keyframes auroraSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Orbs — enhance */
.hero__orb {
    filter: blur(90px);
    opacity: 0.85;
}

.hero__orb--one {
    background: radial-gradient(circle, rgba(22, 199, 132, 0.35), transparent 70%);
    animation: orbFloat 14s ease-in-out infinite alternate, orbPulse 6s ease-in-out infinite;
}

.hero__orb--two {
    background: radial-gradient(circle, rgba(34, 211, 238, 0.28), transparent 70%);
    animation: orbFloat 18s ease-in-out infinite alternate-reverse, orbPulse 8s ease-in-out infinite 1s;
}

@keyframes orbPulse {
    0%, 100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.15) translate(20px, -20px);
        opacity: 1;
    }
}

/* Hero grid — mesh mejor */
.hero__grid {
    opacity: 0.35;
    background-image: linear-gradient(rgba(22, 199, 132, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 199, 132, 0.10) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 40% 50%, black 15%, transparent 75%);
    animation: gridPan 30s linear infinite;
}

@keyframes gridPan {
    to {
        background-position: 60px 60px, 60px 60px;
    }
}

/* Hero image — glow ring */
.hero-product-image {
    position: relative;
    box-shadow: 0 40px 80px rgba(8, 40, 27, 0.20), 0 0 0 1px rgba(22, 199, 132, 0.12), 0 0 60px rgba(22, 199, 132, 0.15);
}

    .hero-product-image::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(135deg, rgba(22, 199, 132, 0.6), transparent 40%, transparent 60%, rgba(34, 211, 238, 0.4));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0.6;
    }

/* ============================================================
   6. HEADER — Enhanced Glass + Micro-interactions
   ============================================================ */
.site-header {
    transition: background 0.5s var(--smooth), backdrop-filter 0.5s var(--smooth), box-shadow 0.5s var(--smooth), transform 0.5s var(--smooth);
}

    .site-header.is-scrolled {
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(28px) saturate(1.4);
        -webkit-backdrop-filter: blur(28px) saturate(1.4);
        box-shadow: 0 1px 0 rgba(8, 40, 27, 0.04), 0 8px 40px rgba(8, 40, 27, 0.06);
    }

[data-theme="dark"] .site-header.is-scrolled {
    background: rgba(10, 15, 13, 0.72);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 40px rgba(0,0,0,0.5);
}

/* Nav link — underline + dot */
.main-nav__link {
    transition: color 0.35s var(--smooth);
}

    .main-nav__link::before {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%) scale(0);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--green-500);
        box-shadow: 0 0 12px var(--green-500);
        transition: transform 0.4s var(--spring);
    }

    .main-nav__link.is-active::before {
        transform: translateX(-50%) scale(1);
    }

    .main-nav__link::after {
        background: linear-gradient(90deg, transparent, var(--green-400), var(--accent-cyan), var(--green-500), transparent);
        background-size: 200% 100%;
        animation: navGlow 3s linear infinite;
        box-shadow: 0 0 12px rgba(22, 199, 132, 0.5);
    }

@keyframes navGlow {
    to {
        background-position: 200% 50%;
    }
}

/* Header CTA — shine sweep */
.header-cta {
    transition: all 0.4s var(--smooth);
}

    .header-cta:hover {
        background: linear-gradient(135deg, var(--green-500), var(--green-600));
        border-color: transparent;
        box-shadow: 0 12px 32px rgba(22, 199, 132, 0.35), 0 0 0 1px rgba(22, 199, 132, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

/* ============================================================
   7. BUTTONS — Premium Interactions
   ============================================================ */
.button {
    position: relative;
    isolation: isolate;
    transition: transform 0.35s var(--spring), box-shadow 0.35s var(--smooth), background 0.35s var(--smooth);
    will-change: transform;
}

    /* Shimmer sweep */
    .button::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%, transparent 100%);
        transform: translateX(-100%);
        transition: transform 0.8s var(--smooth);
        pointer-events: none;
        z-index: 1;
    }

    .button:hover::before {
        transform: translateX(100%);
    }

    /* Radial glow follow */
    .button::after {
        background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.4), transparent 55%);
    }

/* Primary button — pulsing glow */
.button--primary {
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
    background-size: 200% 200%;
    box-shadow: 0 14px 30px rgba(22, 199, 132, 0.28), 0 0 0 1px rgba(22, 199, 132, 0.15) inset;
    animation: buttonBreathe 4s ease-in-out infinite;
}

@keyframes buttonBreathe {
    0%, 100% {
        box-shadow: 0 14px 30px rgba(22, 199, 132, 0.28), 0 0 0 1px rgba(22,199,132,0.15) inset;
    }

    50% {
        box-shadow: 0 14px 40px rgba(22, 199, 132, 0.42), 0 0 20px rgba(22,199,132,0.25), 0 0 0 1px rgba(22,199,132,0.2) inset;
    }
}

.button--primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 22px 50px rgba(22, 199, 132, 0.45), 0 0 40px rgba(22, 199, 132, 0.3);
    animation-play-state: paused;
}

/* Secondary — border glow */
.button--secondary {
    position: relative;
    background: var(--bg-card);
    transition: all 0.4s var(--smooth);
}

    .button--secondary:hover {
        border-color: var(--green-400);
        box-shadow: 0 12px 40px rgba(22, 199, 132, 0.20), 0 0 0 1px rgba(22, 199, 132, 0.3);
        color: var(--green-700);
    }

[data-theme="dark"] .button--secondary:hover {
    color: var(--green-300);
}

/* ============================================================
   8. CARDS — 3D Tilt + Glow Border + Stagger
   ============================================================ */
.product-card,
.catalog-card,
.article-card--large,
.article-mini,
.whyus-item,
.contact-card,
.testimonial-card {
    position: relative;
    isolation: isolate;
    transition: transform 0.55s var(--smooth), box-shadow 0.55s var(--smooth), border-color 0.35s var(--smooth);
    will-change: transform;
}

    /* Glow border on hover */
    .product-card::after,
    .catalog-card::after,
    .article-card--large::after,
    .whyus-item::after,
    .contact-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.5px;
        background: linear-gradient(135deg, rgba(22, 199, 132, 0.8), rgba(34, 211, 238, 0.5) 50%, rgba(22, 199, 132, 0.8));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.45s var(--smooth);
        pointer-events: none;
        z-index: 2;
    }

    .product-card:hover::after,
    .catalog-card:hover::after,
    .article-card--large:hover::after,
    .whyus-item:hover::after,
    .contact-card:hover::after {
        opacity: 1;
    }

    /* Hover lift + shadow */
    .product-card:hover,
    .catalog-card:hover,
    .article-card--large:hover,
    .whyus-item:hover,
    .contact-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-premium-lg);
    }

/* Product card visual — ken-burns */
.product-card__visual img {
    transition: transform 0.9s var(--smooth);
}

.product-card:hover .product-card__visual img {
    transform: scale(1.08) rotate(-1deg);
}

/* Catalog image zoom */
.catalog-card__image img,
.catalog-card__image > svg {
    transition: transform 0.9s var(--smooth);
}

.catalog-card:hover .catalog-card__image img,
.catalog-card:hover .catalog-card__image > svg {
    transform: scale(1.08);
}

/* ============================================================
   9. HERO FLOATING CARDS — Magnetic + Spring
   ============================================================ */
.floating-card {
    transition: transform 0.5s var(--spring), box-shadow 0.5s var(--smooth);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

    .floating-card:hover {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 24px 60px rgba(8, 40, 27, 0.18), 0 0 0 1px rgba(22, 199, 132, 0.2);
    }

.floating-card__icon {
    transition: transform 0.5s var(--spring), background 0.35s ease;
}

.floating-card:hover .floating-card__icon {
    transform: rotate(-8deg) scale(1.1);
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
}

/* Film roll — continuous spin */
.film-roll__body {
    animation: rollSpin 8s linear infinite;
    transform-style: preserve-3d;
}

@keyframes rollSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Film roll shine overlay */
.film-roll__body::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.35) 20deg, transparent 40deg);
    animation: shineSpin 3s linear infinite;
}

@keyframes shineSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   10. NUMBER COUNTERS — Glow + Scale
   ============================================================ */
.number-item strong {
    position: relative;
    transition: transform 0.5s var(--spring);
}

.number-item:hover strong {
    transform: scale(1.08);
}

.number-item strong::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--green-400), transparent);
    opacity: 0;
    transition: opacity 0.4s var(--smooth);
}

.number-item:hover strong::after {
    opacity: 1;
}

/* ============================================================
   11. PRICE TICKER — LED Effect + Smooth Marquee
   ============================================================ */
.price-ticker {
    background: linear-gradient(135deg, #064d34 0%, #07563b 25%, #0eaa6e 50%, #07563b 75%, #064d34 100%);
    background-size: 200% 100%;
    animation: tickerGradient 8s linear infinite;
    position: relative;
}

@keyframes tickerGradient {
    to {
        background-position: 200% 0;
    }
}

.price-ticker::before,
.price-ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    pointer-events: none;
    z-index: 2;
}

.price-ticker::before {
    left: 0;
    background: linear-gradient(90deg, #07563b 0%, transparent 100%);
}

.price-ticker__item span {
    color: #8dffc5;
    text-shadow: 0 0 8px rgba(141, 255, 197, 0.6), 0 0 20px rgba(141, 255, 197, 0.3);
    font-variant-numeric: tabular-nums;
}

.ticker-icon {
    filter: drop-shadow(0 0 6px rgba(141, 255, 197, 0.5));
    animation: tickerIconPulse 2.5s ease-in-out infinite;
}

@keyframes tickerIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.85;
    }
}

/* ============================================================
   12. QUALITY — Animated Progress Bars + Ring Rotation
   ============================================================ */
.quality-progress__header strong {
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(22, 199, 132, 0.3);
}

.progress-bar {
    position: relative;
    overflow: visible;
    height: 6px;
    background: linear-gradient(90deg, var(--gray-100), rgba(22, 199, 132, 0.08));
}

    .progress-bar span {
        position: relative;
        background: linear-gradient(90deg, var(--green-600), var(--green-400), var(--accent-teal));
        background-size: 200% 100%;
        animation: progressFlow 3s linear infinite;
        box-shadow: 0 0 12px rgba(22, 199, 132, 0.6), 0 0 24px rgba(22, 199, 132, 0.3);
    }

@keyframes progressFlow {
    to {
        background-position: 200% 0;
    }
}

.progress-bar span::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px var(--green-400), 0 0 24px var(--green-500);
}

/* Quality orbits — spin */
.quality-circle--outer {
    animation: orbitSpin 25s linear infinite;
}

.quality-circle--middle {
    animation: orbitSpin 18s linear infinite reverse;
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg);
    }
}

.quality-core {
    animation: coreFloat 5s ease-in-out infinite;
    position: relative;
}

    .quality-core::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(22, 199, 132, 0.2), transparent 70%);
        animation: corePulse 3s ease-in-out infinite;
        z-index: -1;
    }

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

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

@keyframes corePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }

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

/* Quality tags — float + spring */
.quality-tag {
    transition: transform 0.5s var(--spring), box-shadow 0.4s var(--smooth);
}

    .quality-tag:hover {
        transform: translateY(-6px) scale(1.08);
        box-shadow: 0 16px 40px rgba(8, 40, 27, 0.18), 0 0 0 1px rgba(22, 199, 132, 0.3);
    }

/* ============================================================
   13. SUSTAINABILITY — Leaf Orbit + Pattern Flow
   ============================================================ */
.sustainability-card {
    position: relative;
    background: linear-gradient(135deg, #043d29 0%, #07563b 30%, #0eaa6e 60%, #07563b 100%);
    background-size: 200% 200%;
    animation: sustainGradient 15s ease-in-out infinite;
}

@keyframes sustainGradient {
    0%, 100% {
        background-position: 0% 50%;
    }

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

.sustainability-card__pattern {
    animation: patternDrift 25s linear infinite;
}

@keyframes patternDrift {
    to {
        background-position: 28px 28px;
    }
}

.leaf-orbit--one,
.leaf-orbit--two,
.leaf-orbit--three {
    will-change: transform;
}

.leaf-core {
    animation: leafFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(141, 255, 197, 0.5));
}

@keyframes leafFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

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

/* ============================================================
   14. ARTICLES — Reading Progress + Title Hover
   ============================================================ */
.article-card--large a:hover .article-card__image img,
.article-mini:hover .article-mini__image img {
    transform: scale(1.08);
}

.article-card__image img,
.article-mini__image img {
    transition: transform 0.9s var(--smooth);
}

.article-card h3,
.article-mini h3 {
    transition: color 0.35s var(--smooth);
}

.article-card:hover h3,
.article-mini:hover h3 {
    color: var(--green-600);
}

[data-theme="dark"] .article-card:hover h3,
[data-theme="dark"] .article-mini:hover h3 {
    color: var(--green-400);
}

/* Mini card — shimmer on hover */
.article-mini::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(22, 199, 132, 0.08) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s var(--smooth);
    pointer-events: none;
}

.article-mini:hover::before {
    transform: translateX(100%);
}

/* ============================================================
   15. CTA SECTION — Radial Pulse + Floating
   ============================================================ */
.cta-section {
    position: relative;
    background: radial-gradient(900px 500px at 80% 20%, rgba(22, 199, 132, 0.15), transparent 60%), linear-gradient(135deg, #06110c, #0a1712 50%, #06110c);
}

.cta-section__glow {
    background: radial-gradient(circle, rgba(22, 199, 132, 0.45), rgba(34, 211, 238, 0.2) 40%, transparent 70%);
    animation: ctaGlow 12s ease-in-out infinite alternate, ctaFloat 8s ease-in-out infinite;
}

@keyframes ctaGlow {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.15) translate(-40px, 30px);
        opacity: 1;
    }
}

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

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

/* CTA card — subtle border glow */
.cta-card {
    position: relative;
    padding: 40px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   16. FOOTER — Gradient Border + Link Dance
   ============================================================ */
.site-footer {
    position: relative;
    background: radial-gradient(600px 300px at 10% 0%, rgba(22, 199, 132, 0.08), transparent 60%), #06110c;
}

    .site-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(22, 199, 132, 0.5) 20%, rgba(34, 211, 238, 0.4) 50%, rgba(22, 199, 132, 0.5) 80%, transparent);
        background-size: 200% 100%;
        animation: footerLine 6s linear infinite;
    }

@keyframes footerLine {
    to {
        background-position: 200% 0;
    }
}

.footer-column a {
    position: relative;
    transition: color 0.3s var(--smooth), transform 0.3s var(--spring);
}

    .footer-column a::before {
        content: "→";
        position: absolute;
        right: -18px;
        opacity: 0;
        transform: translateX(4px);
        transition: all 0.35s var(--spring);
        color: var(--green-400);
        font-size: 11px;
    }

    .footer-column a:hover::before {
        opacity: 1;
        transform: translateX(0);
        right: -14px;
    }

    .footer-column a:hover {
        color: var(--green-400);
        transform: translateX(-6px);
    }

/* Social links — icon bounce */
.contact-social__item {
    transition: all 0.4s var(--spring);
}

    .contact-social__item:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 16px 40px rgba(22, 199, 132, 0.35), 0 0 0 1px rgba(22, 199, 132, 0.4);
    }

/* ============================================================
   17. BREADCRUMBS — Glow separators
   ============================================================ */
.breadcrumbs {
    position: relative;
}

    .breadcrumbs::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(22, 199, 132, 0.3) 50%, transparent);
    }

.breadcrumbs__link:hover {
    background: linear-gradient(135deg, rgba(22, 199, 132, 0.12), rgba(22, 199, 132, 0.04));
    box-shadow: 0 0 0 1px rgba(22, 199, 132, 0.15);
}

/* ============================================================
   18. BACK TO TOP + DARK MODE TOGGLE — Enhanced
   ============================================================ */
.back-to-top,
.dark-mode-toggle {
    transition: all 0.4s var(--spring);
    position: fixed;
}

    .back-to-top:hover {
        background: linear-gradient(135deg, var(--green-500), var(--green-600));
        box-shadow: 0 12px 32px rgba(22, 199, 132, 0.45), 0 0 24px rgba(22, 199, 132, 0.35);
        transform: translateY(-6px) scale(1.08);
        color: #fff;
    }

    .dark-mode-toggle:hover {
        transform: rotate(20deg) scale(1.1);
        box-shadow: 0 12px 32px rgba(22, 199, 132, 0.35), 0 0 0 1px rgba(22, 199, 132, 0.3);
    }

[data-theme="dark"] .dark-mode-toggle:hover {
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    color: #fff;
    border-color: transparent;
}

/* ============================================================
   19. REVEAL — Refined Stagger with Better Curves
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px) scale(0.985);
    transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
    will-change: transform, opacity;
}

    [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

        /* Children stagger */
        [data-reveal].is-visible > * {
            animation: staggerIn 0.7s var(--ease-out-expo) backwards;
        }

            [data-reveal].is-visible > *:nth-child(1) {
                animation-delay: 0.05s;
            }

            [data-reveal].is-visible > *:nth-child(2) {
                animation-delay: 0.10s;
            }

            [data-reveal].is-visible > *:nth-child(3) {
                animation-delay: 0.15s;
            }

            [data-reveal].is-visible > *:nth-child(4) {
                animation-delay: 0.20s;
            }

            [data-reveal].is-visible > *:nth-child(5) {
                animation-delay: 0.25s;
            }

            [data-reveal].is-visible > *:nth-child(6) {
                animation-delay: 0.30s;
            }

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

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

/* ============================================================
   20. FOCUS STATES — Accessibility + Beauty
   ============================================================ */
*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-body), 0 0 0 4px var(--green-500), 0 0 20px rgba(22, 199, 132, 0.5);
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

a:focus-visible,
button:focus-visible {
    outline: none;
}

/* ============================================================
   21. CONTACT — Card Glow
   ============================================================ */
.contact-card__icon {
    transition: all 0.5s var(--spring);
}

.contact-card:hover .contact-card__icon {
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
    box-shadow: 0 0 24px rgba(22, 199, 132, 0.5);
    transform: rotate(-8deg) scale(1.1);
}

.contact-map-wrapper {
    transition: box-shadow 0.5s var(--smooth);
}

    .contact-map-wrapper:hover {
        box-shadow: var(--shadow-premium-lg), 0 0 0 1px rgba(22, 199, 132, 0.15);
    }

/* ============================================================
   22. WHY US — Icon Pop
   ============================================================ */
.whyus-icon {
    display: inline-block;
    transition: transform 0.5s var(--spring);
    filter: drop-shadow(0 4px 12px rgba(22, 199, 132, 0.15));
}

.whyus-item:hover .whyus-icon {
    transform: scale(1.2) rotate(-6deg);
    filter: drop-shadow(0 8px 20px rgba(22, 199, 132, 0.35));
}

/* ============================================================
   23. TESTIMONIAL — Stars Shine
   ============================================================ */
.testimonial-card__rating {
    animation: starsShine 3s ease-in-out infinite;
}

@keyframes starsShine {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.9));
    }
}

.testimonial-card__footer .avatar {
    transition: transform 0.5s var(--spring);
}

.testimonial-card:hover .testimonial-card__footer .avatar {
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.25);
}

/* ============================================================
   24. ERROR PAGE — Glitch + Float
   ============================================================ */
.error-box__code {
    animation: errorGlitch 4s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(22, 199, 132, 0.25));
}

@keyframes errorGlitch {
    0%, 100% {
        transform: translate(0, 0);
    }

    92% {
        transform: translate(0, 0);
    }

    94% {
        transform: translate(-2px, 1px);
    }

    96% {
        transform: translate(2px, -1px);
    }

    98% {
        transform: translate(-1px, -1px);
    }
}

.error-box {
    animation: boxEnter 0.9s var(--ease-out-expo);
}

@keyframes boxEnter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

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

/* ============================================================
   25. BLOG PAGINATION — Enhanced
   ============================================================ */
.blog-page-btn {
    transition: all 0.35s var(--spring);
}

    .blog-page-btn:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 12px 28px rgba(22, 199, 132, 0.2), 0 0 0 1px rgba(22, 199, 132, 0.3);
    }

    .blog-page-btn.is-active {
        background: linear-gradient(135deg, var(--green-500), var(--green-600));
        box-shadow: 0 12px 32px rgba(22, 199, 132, 0.4), 0 0 24px rgba(22, 199, 132, 0.3);
        animation: activePulse 3s ease-in-out infinite;
    }

@keyframes activePulse {
    0%, 100% {
        box-shadow: 0 12px 32px rgba(22, 199, 132, 0.4), 0 0 24px rgba(22, 199, 132, 0.3);
    }

    50% {
        box-shadow: 0 12px 40px rgba(22, 199, 132, 0.6), 0 0 36px rgba(22, 199, 132, 0.45);
    }
}

/* ============================================================
   26. SOLUTIONS FEATURES — Icon Check Pop
   ============================================================ */
.solutions-feature__icon {
    transition: all 0.5s var(--spring);
}

.solutions-feature:hover .solutions-feature__icon {
    transform: scale(1.15) rotate(-8deg);
    background: linear-gradient(135deg, var(--green-500), var(--green-400));
    color: #fff;
    box-shadow: 0 0 24px rgba(22, 199, 132, 0.4);
}

/* ============================================================
   27. DARK MODE SPECIFIC POLISH
   ============================================================ */
[data-theme="dark"] .product-card,
[data-theme="dark"] .catalog-card,
[data-theme="dark"] .article-card--large,
[data-theme="dark"] .article-mini,
[data-theme="dark"] .whyus-item,
[data-theme="dark"] .contact-card {
    background: linear-gradient(145deg, rgba(21, 34, 27, 0.9), rgba(16, 26, 21, 0.95));
    border-color: rgba(22, 199, 132, 0.10);
}

    [data-theme="dark"] .product-card:hover,
    [data-theme="dark"] .catalog-card:hover,
    [data-theme="dark"] .article-card--large:hover,
    [data-theme="dark"] .article-mini:hover,
    [data-theme="dark"] .whyus-item:hover,
    [data-theme="dark"] .contact-card:hover {
        border-color: rgba(22, 199, 132, 0.35);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(22, 199, 132, 0.12);
    }

/* ============================================================
   28. LOADING — Skeleton Shimmer (آماده برای استفاده آینده)
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: skeletonShine 1.5s linear infinite;
    border-radius: 12px;
}

@keyframes skeletonShine {
    to {
        background-position: -200% 0;
    }
}

/* ============================================================
   29. REDUCED MOTION — رعایت کامل
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body::after,
    .hero__background::before,
    .hero__grid,
    .hero__orb,
    .button--primary,
    .film-roll__body,
    .film-roll__body::after,
    .quality-circle--outer,
    .quality-circle--middle,
    .quality-core,
    .quality-core::before,
    .leaf-orbit--one,
    .leaf-orbit--two,
    .leaf-orbit--three,
    .leaf-core,
    .sustainability-card,
    .sustainability-card__pattern,
    .cta-section__glow,
    .price-ticker,
    .ticker-icon,
    .progress-bar span,
    .testimonial-card__rating,
    .error-box__code,
    .blog-page-btn.is-active,
    .hero__title span,
    .section-heading h2 span,
    .main-nav__link::after {
        animation: none !important;
    }

    .button::before {
        display: none;
    }

    * {
        transition-duration: 0.15s !important;
    }
}

/* ============================================================
   30. MOBILE OPTIMIZATION (کاهش افکت‌های سنگین)
   ============================================================ */
@media (max-width: 768px) {
    /* حذف backdrop-filter سنگین روی موبایل */
    .hero__background::before {
        filter: blur(50px);
        opacity: 0.35;
    }

    body::before {
        display: none;
    }

    .button--primary {
        animation: none;
    }

    .hero-product-image {
        box-shadow: 0 20px 50px rgba(8, 40, 27, 0.16);
    }

    .cta-card {
        padding: 28px 22px;
        border-radius: 24px;
    }
}

/* ============================================================
   31. TABLET (بهینه‌سازی میانی)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero__background::before {
        filter: blur(70px);
    }

    .cta-card {
        padding: 34px 28px;
    }
}

/* ============================================================
   32. CURSOR SPOTLIGHT (روی دسکتاپ)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .product-card,
    .catalog-card,
    .contact-card {
        background-image: radial-gradient( 500px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 199, 132, 0.06), transparent 40% );
        background-attachment: local;
    }

    [data-theme="dark"] .product-card,
    [data-theme="dark"] .catalog-card,
    [data-theme="dark"] .contact-card {
        background-image: radial-gradient( 500px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 199, 132, 0.12), transparent 40% );
    }
}