@import url('https://fonts.bunny.net/css?family=vazirmatn:400,500,600,700,800,900&display=swap');

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at 80% 12%, rgba(184, 146, 75, .14), transparent 28%),
                linear-gradient(135deg, #ffffff 0%, #f6f7f5 48%, #ece8df 100%);
            color: #172033;
            font-family: Vazirmatn, Tahoma, Arial, sans-serif;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(18, 50, 74, .06) 1px, transparent 1px),
                linear-gradient(180deg, rgba(18, 50, 74, .05) 1px, transparent 1px);
            background-size: 96px 96px;
            opacity: .45;
        }

        .features-page {
            position: relative;
            z-index: 1;
            width: min(1240px, calc(100% - 32px));
            margin: 0 auto;
            padding: 34px 0;
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 42px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 8px;
            background: rgba(255, 255, 255, .1);
            backdrop-filter: blur(16px);
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .brand img {
            width: 174px;
            height: auto;
            max-height: 88px;
            object-fit: contain;
            filter:
                drop-shadow(1px 0 0 rgba(255, 255, 255, .95))
                drop-shadow(-1px 0 0 rgba(255, 255, 255, .95))
                drop-shadow(0 1px 0 rgba(255, 255, 255, .95))
                drop-shadow(0 -1px 0 rgba(255, 255, 255, .95))
                drop-shadow(0 12px 18px rgba(2, 22, 34, .28));
        }

        .brand strong {
            display: block;
            color: #fff;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: 0;
        }

        .brand span span {
            display: block;
            margin-top: 3px;
            color: rgba(255, 255, 255, .75);
            font-size: 13px;
            font-weight: 500;
        }

        .main-menu {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-inline: auto;
            padding: 0;
        }

        .main-menu a,
        .main-menu summary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0 14px;
            border-radius: 7px;
            color: rgba(248, 253, 255, .86);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
            transition: background .2s ease, color .2s ease, transform .2s ease;
        }

        .main-menu a:hover,
        .main-menu summary:hover,
        .menu-group[open] > summary {
            background: rgba(255, 255, 255, .16);
            color: #fff;
            transform: translateY(-1px);
        }

        .menu-group {
            position: relative;
        }

        .menu-group summary {
            cursor: pointer;
            list-style: none;
        }

        .menu-group summary::-webkit-details-marker {
            display: none;
        }

        .menu-group summary::after {
            content: "";
            width: 7px;
            height: 7px;
            margin-right: 7px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg) translateY(-2px);
            transition: transform .2s ease;
        }

        .menu-group[open] > summary::after {
            transform: rotate(-135deg) translateY(-1px);
        }

        .submenu {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            z-index: 5;
            display: grid;
            min-width: 210px;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 8px;
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 18px 38px rgba(2, 22, 34, .22);
        }

        .submenu a {
            justify-content: flex-start;
            color: #46586d;
        }

        .submenu a:hover {
            background: #eef3ff;
            color: #24324a;
            transform: none;
        }

        .nav-toggle,
        .mobile-menu-button {
            display: none;
        }

        .top-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }

        .button {
            min-height: 42px;
            padding: 0 20px;
            border: 1px solid #d9e0ea;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .72);
            color: #172033;
            text-decoration: none;
            font-size: 14px;
            font-weight: 800;
            box-shadow: 0 10px 24px rgba(15, 28, 45, .06);
        }

        .button.primary {
            border-color: #12324a;
            background: #12324a;
            color: #fff;
        }

        .button::after {
            content: "‹";
            margin-right: 8px;
            font-size: 18px;
            line-height: 1;
        }

        .hero {
            margin-top: 56px;
            color: #111827;
            text-align: center;
        }

        .hero h1 {
            margin: 0;
            font-size: clamp(34px, 6vw, 72px);
            font-weight: 900;
            line-height: 1.35;
        }

        .hero p {
            max-width: 760px;
            margin: 18px auto 0;
            color: #4b5563;
            font-size: 17px;
            line-height: 2;
            font-weight: 700;
        }

        .features-table-wrap {
            margin-top: 34px;
            overflow: hidden;
            border: 1px solid #d8ddd5;
            border-radius: 8px;
            background: rgba(255, 255, 255, .92);
            box-shadow: 0 24px 70px rgba(17, 24, 39, .1);
        }

        .features-table {
            width: 100%;
            border-collapse: collapse;
            text-align: right;
        }

        .features-table th,
        .features-table td {
            padding: 18px 22px;
            border-bottom: 1px solid #dce6ec;
            vertical-align: top;
        }

        .features-table th {
            color: #516276;
            background: #f8fafc;
            font-size: 13px;
            font-weight: 900;
        }

        .feature-parent-row {
            cursor: pointer;
            transition: background .18s ease;
        }

        .feature-parent-row:hover,
        .feature-parent-row.is-open {
            background: #f8fafc;
        }

        .feature-parent-heading,
        .feature-child-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .feature-image-gallery {
            display: none;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
            margin-top: 16px;
        }

        .feature-row-image {
            display: block;
            width: 100%;
            height: 220px;
            border: 1px solid #dce6ec;
            border-radius: 8px;
            background: #fff;
            object-fit: cover;
            box-shadow: 0 14px 28px rgba(3, 23, 38, .12);
        }

        .feature-parent-row.is-open .feature-image-gallery,
        .feature-child-row.is-visible .feature-image-gallery {
            display: grid;
        }

        .feature-parent-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #102138;
            font-size: 18px;
            font-weight: 900;
        }

        .feature-parent-title::before {
            content: "⌄";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid #cfd8df;
            color: #12324a;
            font-size: 18px;
            font-weight: 900;
            transition: transform .18s ease;
        }

        .feature-parent-row.is-open .feature-parent-title::before {
            transform: rotate(180deg);
        }

        .feature-parent-desc {
            margin: 8px 38px 0 0;
            color: #5d6b7f;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.9;
        }

        .feature-parent-row:not(.is-open) .feature-parent-desc {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            max-height: calc(14px * 1.9 * 3);
            overflow: hidden;
        }

        .feature-child-row {
            display: none;
            background: rgba(248, 250, 252, .95);
        }

        .feature-child-row.is-visible {
            display: table-row;
        }

        .feature-child-title {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-right: 38px;
            color: #102138;
            font-size: 15px;
            font-weight: 900;
        }

        .feature-child-title::before {
            content: "";
            width: 7px;
            height: 7px;
            flex: 0 0 auto;
            border-radius: 999px;
            background: #8a6a2f;
        }

        .feature-child-desc {
            color: #40536b;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.9;
        }

        .ql-content p,
        .ql-content ol,
        .ql-content ul {
            margin: 0 0 8px;
        }

        .ql-content p:last-child,
        .ql-content ol:last-child,
        .ql-content ul:last-child {
            margin-bottom: 0;
        }

        .ql-content ol,
        .ql-content ul {
            padding-right: 20px;
        }

        .site-footer {
            margin-top: 70px;
            padding: 22px 12px 0;
            color: rgba(236, 247, 249, .72);
            font-size: 14px;
            font-weight: 600;
            text-align: center;
        }

        .site-footer a {
            color: #fff;
            font-weight: 800;
        }

        .footer-contact {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px 18px;
            margin-bottom: 10px;
        }

        .footer-contact span {
            color: rgba(236, 247, 249, .72);
        }

        .site-footer strong {
            color: #fff;
            font-weight: 800;
        }

        .footer-social {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 12px 0 10px;
        }

        .footer-social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            height: 34px;
            padding: 0 12px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            text-decoration: none;
        }

        .footer-social a:hover {
            background: rgba(255, 255, 255, .16);
        }

        @media (max-width: 860px) {
            .site-footer {
                margin-top: 38px;
                font-size: 12px;
                line-height: 1.8;
            }

            .footer-contact {
                display: grid;
                gap: 6px;
            }

            .features-table-wrap {
                overflow: visible;
                border-radius: 8px;
                background: transparent;
                box-shadow: none;
            }

            .features-table,
            .features-table thead,
            .features-table tbody,
            .features-table tr,
            .features-table td {
                display: block;
                width: 100%;
            }

            .features-table thead {
                display: none;
            }

            .features-table tr {
                box-sizing: border-box;
            }

            .features-table td {
                box-sizing: border-box;
                padding: 0;
                border: 0;
            }

            .feature-parent-row {
                margin-bottom: 10px;
                padding: 16px;
                border: 1px solid #dce6ec;
                border-radius: 8px;
                background: rgba(255, 255, 255, .94);
                box-shadow: 0 16px 34px rgba(3, 23, 38, .14);
            }

            .feature-parent-row.is-open {
                margin-bottom: 0;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                box-shadow: none;
            }

            .feature-parent-title {
                justify-content: space-between;
                font-size: 19px;
            }

            .feature-row-image {
                width: 100%;
                height: auto;
                max-height: 260px;
            }

            .feature-parent-title::before {
                order: 2;
                flex: 0 0 auto;
            }

            .feature-parent-desc {
                margin: 10px 0 0;
                font-size: 13px;
                word-break: break-word;
            }

            .feature-parent-count {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: fit-content;
                min-height: 28px;
                margin-top: 12px;
                padding: 0 10px;
                border-radius: 999px;
                background: #e9f5f2;
                color: #126a5d;
                font-size: 12px;
                font-weight: 900;
            }

            .features-table .feature-child-row {
                display: none;
                margin-bottom: 10px;
                padding: 14px 16px;
                border: 1px solid #dce6ec;
                border-top: 0;
                border-radius: 0 0 8px 8px;
                background: rgba(255, 255, 255, .9);
            }

            .features-table .feature-child-row.is-visible {
                display: block;
            }

            .feature-child-title {
                padding-right: 0;
                font-size: 15px;
            }

            .feature-child-desc {
                margin-top: 8px;
                font-size: 13px;
                word-break: break-word;
            }
        }

        @media (max-width: 560px) {
            .features-page {
                width: min(100%, calc(100% - 24px));
                padding: 12px 0;
            }

            .topbar {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 0 12px;
                margin-bottom: 30px;
                padding: 0;
                border-color: rgba(255, 255, 255, .88);
                border-radius: 0;
                background: #fff;
                backdrop-filter: none;
            }

            .brand {
                flex: 1 1 0;
                width: auto;
                justify-content: flex-start;
                gap: 10px;
                text-align: right;
                padding: 10px 12px;
            }

            .brand img {
                width: 98px;
                max-height: 54px;
            }

            .brand strong {
                color: #24324a;
                font-size: 17px;
            }

            .brand span span {
                color: #647084;
                font-size: 11px;
                line-height: 1.5;
            }

            .mobile-menu-button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                order: -1;
                width: 54px;
                height: 56px;
                margin-right: auto;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: #46586d;
                cursor: pointer;
                flex-direction: column;
                gap: 5px;
            }

            .mobile-menu-button span,
            .mobile-menu-button::before,
            .mobile-menu-button::after {
                content: "";
                display: block;
                width: 22px;
                height: 2px;
                border-radius: 999px;
                background: currentColor;
            }

            .main-menu {
                display: none;
                grid-template-columns: 1fr;
                gap: 2px;
                width: 100%;
                justify-content: stretch;
                overflow: visible;
                order: 3;
                padding: 12px;
                border-top: 1px solid #eef2f7;
                background: #fff;
            }

            .main-menu a,
            .main-menu summary {
                position: relative;
                display: flex;
                justify-content: flex-start;
                width: 100%;
                min-height: 50px;
                padding: 0 46px 0 42px;
                border-bottom: 1px solid #eef2f7;
                border-radius: 8px;
                color: #46586d;
                font-size: 15px;
                text-align: right;
            }

            .main-menu a::before,
            .main-menu summary::before {
                content: "▣";
                position: absolute;
                right: 14px;
                top: 50%;
                transform: translateY(-50%);
                color: #46586d;
                font-size: 15px;
                line-height: 1;
            }

            .main-menu a::after,
            .main-menu summary::after {
                content: "‹";
                position: absolute;
                left: 18px;
                top: 50%;
                margin: 0;
                width: auto;
                height: auto;
                border: 0;
                color: #46586d;
                font-size: 22px;
                font-weight: 700;
                line-height: 1;
                transform: translateY(-50%);
            }

            .menu-group[open] > summary::after {
                transform: translateY(-50%) rotate(-90deg);
            }

            .menu-group {
                width: 100%;
                border-bottom: 1px solid #eef2f7;
            }

            .submenu {
                position: static;
                min-width: 0;
                width: 100%;
                padding: 6px 46px 10px 14px;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
            }

            .submenu a {
                min-height: 34px;
                padding: 0 12px;
                border: 0;
                color: #647084;
                font-size: 13px;
            }

            .submenu a::before,
            .submenu a::after {
                display: none;
            }

            .top-actions {
                display: none;
                order: 4;
                width: 100%;
                padding: 0 16px 16px;
                background: #fff;
            }

            .top-actions,
            .button {
                width: 100%;
            }

            .nav-toggle:checked ~ .main-menu {
                display: grid;
            }

            .nav-toggle:checked ~ .top-actions {
                display: flex;
            }
        }