/* ═══════════════════════════════════════════════════════════════════════ EYJAZ — Spectrum Identity أربعة ألوان فقط: أسود #000000 · بنفسجي #7D39EB · ليموني #C6FF33 · أبيض #FFFFFF كل قسم يجلس على «حقل» لوني، والحقول تتصل بتدرّجات محبّبة بترتيب الإضاءة (أسود ← بنفسجي ← ليموني ← أبيض) فيبقى الانتقال متجانساً. ═══════════════════════════════════════════════════════════════════════ */ :root { --pat-a-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1 2147 3499'%3E %3Cg fill='%23000'%3E %3Cpath transform='matrix(1,0,0,-1,248.7,3154.1)' d='M0 0C82.5 58.7 174.4 78.2 255.8 12 334.5-51.9 385.3-177.7 420.3-310.8 423.4-322.4 426.3-334.1 429.1-345.9H420.4C418.5-338.7 416.7-331.5 414.8-324.4 379.8-192.5 329.2-68.1 251-5.1 170.1 60.1 79 40.2-2.7-18.4-98.1-86.8-179.6-204.8-248.7-335.7V-319.1C-178.8-187.2-96.4-68.6 0 0' fill-opacity='0.90'/%3E %3Cpath transform='matrix(1,0,0,-1,263.1,3061.5)' d='M0 0C86.5 59 182.5 76.6 266.5 5 347.6-64 399-196.6 434.1-335.9 442.6-369.6 450.2-403.8 457-438.5H449.1C442.9-408.3 436.1-378.3 428.6-348.9 393.5-210.8 342.6-81.7 261.6-11.5 178.2 60.7 81.5 40.1-2.9-17.9-103.5-87.1-189.8-208.9-263.1-344.7V-328.7C-188.9-191.9-101.7-69.3 0 0' fill-opacity='0.87'/%3E %3Cpath transform='matrix(1,0,0,-1,278.6,2968.9)' d='M0 0C90.4 59 190.5 74.6 277.1-2.6 360.6-76.9 412.5-216.3 447.5-361.9 460.8-417 471.8-473.6 481.1-531.1H473.8C464.9-477.9 454.4-425.4 442-374.4 407-230 355.2-91.8 272.1-18.5 186 57.5 86.7 41.6-3-17.4-109.2-87.3-200.8-213.4-278.6-354.6V-339.2C-199.9-197-107.3-70.1 0 0' fill-opacity='0.85'/%3E %3Cpath transform='matrix(1,0,0,-1,295.1,2876.4)' d='M0 0C93 58.1 198.8 73.9 287.7-10.8 373.8-92.7 425.7-236.9 460.5-388.7 477.9-464.9 491.4-543.6 502.1-623.6H495.3C484.8-547.7 471.8-473 455-400.7 420.2-250 368-104.8 282.7-26.1 194 55.7 90.6 42-3.1-16.9-115.4-87.5-212.5-218.4-295.1-365.3V-350.5C-211.6-202.5-113.4-70.8 0 0' fill-opacity='0.83'/%3E %3Cpath transform='matrix(1,0,0,-1,312.7,2784.1)' d='M0 0C98.5 58.6 206.7 69.4 298.2-19.5 386.1-104.9 438.5-258.3 473-416.5 494.1-513.3 509.1-613.9 520.4-715.9H514.1C502.9-617.8 488.1-521 467.6-427.9 433.1-270.8 380.6-118.7 293.2-34.4 202 53.5 94.6 42.3-3.2-16.4-121.9-87.7-225.1-223.6-312.7-376.7V-362.4C-224.2-208.2-119.9-71.3 0 0' fill-opacity='0.81'/%3E %3Cpath transform='matrix(1,0,0,-1,331.3,2692)' d='M0 0C102.6 58.1 214.8 66.2 308.7-28.9 398.6-120 451.1-280.5 485.1-445 509.4-562.2 525.1-684.5 536.3-808H530.4C519.2-688.2 503.5-569.6 479.8-455.9 445.7-292.5 393.1-133.3 303.6-43.2 210.1 50.8 98.6 42.3-3.3-15.9-128.9-87.7-238.4-229.2-331.3-388.8V-375.1C-237.5-214.3-126.8-71.9 0 0' fill-opacity='0.78'/%3E %3Cpath transform='matrix(1,0,0,-1,351,2600.1)' d='M0 0C106.7 57.5 223.1 62.6 319.1-38.9 410.9-136 463.3-303.5 496.8-474.4 523.7-611.8 539.5-755.4 550.2-899.9H544.6C533.8-758.9 518-618.8 491.5-484.8 457.9-314.9 405.4-148.7 313.9-52.6 218.3 47.8 102.6 42.2-3.4-15.4-136.3-87.6-252.5-234.9-351-401.5V-388.3C-251.6-220.6-134.2-72.3 0 0' fill-opacity='0.76'/%3E %3Cpath transform='matrix(1,0,0,-1,701.2,2557.8)' d='M0 0C93.7-103.2 145.8-277.9 178.6-455.1 207.8-612.5 223-777.2 232.7-942.2H227.5C217.6-780.5 202.2-619.2 173.4-465.1 140.5-288.8 88.2-115.4-5.1-13.2-102.9 93.8-222.7 91.3-332.8 34.5-473.4-38-596.8-191.5-701.2-365.3V-352.7C-595.8-177.6-471.2-23.1-329.3 49.4-218.6 106-98.1 108.1 0 0' fill-opacity='0.73'/%3E %3Cpath transform='matrix(1,0,0,-1,733.3,2477.6)' d='M0 0C95.4-109.4 147.1-291.3 179.1-475 210-652.1 224.1-837.5 232.7-1022.4H227.7C219-840.6 204.6-658.5 174-484.4 141.8-301.8 90-121-5.1-12.6-104.9 101.2-228.8 101.9-343.1 46.2-491.8-26.3-622.7-186.4-733.3-367.9V-355.8C-621.7-173.1-489.6-11.9-339.5 60.6-224.6 116.1-100.1 114.8 0 0' fill-opacity='0.71'/%3E %3Cpath transform='matrix(1,0,0,-1,766.9,2398.7)' d='M0 0C97-115.8 148.1-305.1 179-495.1 210.9-691.7 223.2-897.2 230.3-1101.3H225.6C218.3-900.2 205.6-697.7 173.9-504.1 142.8-315.1 91.6-127-5.1-12.1-106.8 108.8-234.7 113.1-353.1 58.7-510.6-13.5-649.8-180.7-766.9-370.2V-358.6C-648.8-167.8-508.40.4-349.6 72.6-230.5 126.8-101.9 121.8 0 0' fill-opacity='0.69'/%3E %3Cpath transform='matrix(1,0,0,-1,800.5,2319.8)' d='M0 0C98.5-122.3 149-318.9 178.9-515.3 211.9-731.3 222.4-957 228-1180.2H223.4C217.6-959.8 206.7-736.9 173.9-523.8 143.8-328.4 93.2-132.9-5.1-11.5-108.6 116.3-240.6 124.3-363.2 71.2-529.4-0.7-676.8-174.9-800.5-372.6V-361.5C-675.8-162.5-527.1 12.7-359.6 84.6-236.4 137.4-103.8 128.9 0 0' fill-opacity='0.66'/%3E %3Cpath transform='matrix(1,0,0,-1,835.6,2242.3)' d='M0 0C99.9-129 149.5-332.9 178.2-535.7 211.5-770.7 219.5-1016.1 223.4-1257.7H219.1C214.9-1018.7 206.5-776.1 173.3-543.7 144.4-341.9 94.6-139.1-5.1-11-110.3 124.2-246.4 136.1-373.1 84.6-548.6 13.4-704.9-168.3-835.6-374.6V-363.9C-703.9-156.4-546.3 26.4-369.5 97.5-242.1 148.7-105.4 136.2 0 0' fill-opacity='0.63'/%3E %3Cpath transform='matrix(1,0,0,-1,871.7,2165.7)' d='M0 0C101.1-135.8 149.6-347.1 177-556.2 210.3-810.1 215.4-1074.6 217.6-1334.3H213.4C211-1077 205.5-815.1 172.2-563.8 144.6-355.6 96.1-147.7-5-10.5-111.4 133.9-253.5 147.6-382.9 98.6-568.1 28.4-733.7-161.2-871.7-376.3V-366.1C-732.7-149.8-565.8 40.9-379.2 110.9-247.7 160.3-107 143.7 0 0' fill-opacity='0.61'/%3E %3Cpath transform='matrix(1,0,0,-1,908.8,2090.2)' d='M0 0C102.4-145.1 149.5-361.5 175.4-576.9 207.2-840.8 209.9-1114.7 210.3-1383.5 210.4-1392.3 210.3-1401 210.3-1409.8H206.4C206.4-1402.5 206.4-1395.3 206.4-1388 205.7-1120.1 202.7-847 170.7-584.1 144.6-369.5 97.3-154.1-5-9.9-112.8 142-258.9 160.2-392.5 113.1-587.9 44.3-763.2-153.4-908.8-377.6V-367.8C-762.2-142.5-585.5 56.3-388.8 124.9-254.6 171.7-108 153 0 0' fill-opacity='0.58'/%3E %3Cpath transform='matrix(1,0,0,-1,946.9,2015.7)' d='M0 0C103.4-152.1 149.1-376 173.4-597.7 203.1-868.8 203.6-1149.1 202.2-1424.4 202.1-1444.4 202-1464.3 201.9-1484.3H198.1C198.2-1465.7 198.3-1447.2 198.4-1428.6 199.5-1154.1 198.8-874.6 168.8-604.5 144.3-383.6 98.3-158.4-4.9-9.4-114.5 148.7-262.6 173.6-402 128.2-607.9 61.2-793.5-144.9-946.9-378.5V-369.2C-792.5-134.5-605.6 72.7-398.3 139.5-259.9 184.1-109.3 160.8 0 0' fill-opacity='0.56'/%3E %3Cpath transform='matrix(1,0,0,-1,578.3,1787.5)' d='M0 0C142.6 42.2 297.2 14.1 407.6-154.7 511.8-314 556-545.3 578.5-773.3 606-1051.6 604.2-1338.2 600.9-1619.9 600.6-1650.7 600.2-1681.6 599.7-1712.5H596.1C596.5-1682.9 596.9-1653.3 597.2-1623.8 600.2-1342.9 601.8-1057 574-779.6 551.3-552.4 506.8-319.7 402.8-163.6 292.1 2.6 139.9 32.2-3.7-10.8-217.1-74.6-410.6-283.7-570.6-522-573.2-525.9-575.8-529.7-578.3-533.6V-524.8C-575.4-520.3-572.4-515.9-569.5-511.5-408.7-272.8-214.2-63.5 0 0' fill-opacity='0.53'/%3E %3Cpath transform='matrix(1,0,0,-1,609.3,1699.4)' d='M0 0C148.4 40.1 304.9 4.9 416.8-170.4 521.7-334.7 564.1-575.9 584.8-810 609.9-1095.3 605.6-1388.2 600.3-1676.2 599.6-1717.7 598.8-1759.1 597.9-1800.6H594.5C595.3-1760.3 596.1-1720.1 596.8-1679.9 601.8-1392.6 605.8-1100.5 580.4-816 559.5-582.5 516.9-342.3 412-178.8 300.2-4.5 144.2 30.1-3.7-10.3-224.1-70.4-425.3-281.4-591.8-523.6-597.7-532.1-603.5-540.7-609.3-549.3V-540.9C-603.1-531.7-596.9-522.6-590.6-513.5-423.4-270.9-221.2-59.7 0 0' fill-opacity='0.51'/%3E %3Cpath transform='matrix(1,0,0,-1,641.4,1611.9)' d='M0 0C152.5 37.2 313-3 425.8-186.7 531.3-358.4 571.8-607 590.4-847.4 613-1139.7 606-1438.7 598.8-1733 597.5-1784.7 596.1-1836.4 594.7-1888.1H591.5C592.8-1837.5 594.1-1787 595.3-1736.4 602.4-1442.8 609-1144.5 586.1-852.9 567.3-613.3 526.6-365.5 421.1-194.6 308.4-11.9 148.4 27.8-3.6-9.8-231.1-66-440.2-278.5-613.4-524.4-622.8-537.8-632.1-551.4-641.4-565V-557.1C-631.7-542.8-622-528.7-612.1-514.8-438.2-268.5-228.3-55.7 0 0' fill-opacity='0.49'/%3E %3Cpath transform='matrix(1,0,0,-1,674.6,1524.9)' d='M0 0C156.7 34.2 321.1-11.3 434.6-203.5 540.6-382.7 578.9-638.8 595.3-885.3 615.2-1184.6 605.6-1489.6 596.2-1790.1 594.2-1851.8 592.2-1913.4 590.1-1975.1H587.1C589.1-1914.5 591-1853.9 592.9-1793.3 602-1493.4 611.4-1189 591.2-890.5 574.6-644.6 536-389.4 430.1-210.9 316.6-19.7 152.7 25.3-3.6-9.3-238.2-61.2-455.3-275.1-635.2-524.6-648.5-543-661.6-561.7-674.6-580.8V-573.2C-661.2-553.6-647.7-534.3-634-515.3-453.3-265.4-235.4-51.4 0 0' fill-opacity='0.47'/%3E %3Cpath transform='matrix(1,0,0,-1,709.1,1438.5)' d='M0 0C160.9 31 329.2-20.1 443.3-220.8 549.5-407.8 585.5-671.2 599.6-923.9 616.7-1230 604.1-1540.9 592.5-1847.6 589.8-1918.9 587-1990.2 584.2-2061.4H581.3C584-1991.1 586.8-1920.8 589.4-1850.5 600.8-1544.4 613-1234.1 595.7-928.7 581.3-676.7 545.1-414 438.8-227.8 324.8-27.9 156.9 22.6-3.6-8.8-245.4-56-470.5-271-657.4-523.9-674.9-547.6-692.1-571.8-709.1-596.4V-589.3C-691.7-564.1-674.1-539.3-656.1-515.1-468.5-261.9-242.6-46.7 0 0' fill-opacity='0.44'/%3E %3Cpath transform='matrix(1,0,0,-1,744.7,1352.8)' d='M0 0C165.1 27.6 337.2-29.2 451.8-238.7 558.2-433.5 591.6-704.3 603.2-963 617.3-1275.8 601.8-1592.6 587.8-1905.4 584.3-1986 580.6-2066.6 576.9-2147.2H574.2C577.8-2067.5 581.4-1987.7 584.9-1908.1 598.6-1595.9 613.8-1279.6 599.4-967.4 587.6-709.4 553.9-439.2 447.4-245.2 332.9-36.5 161.2 19.7-3.5-8.3-252.6-50.5-485.9-266.4-679.9-522.5-701.9-551.6-723.5-581.4-744.7-611.9V-605.2C-723.1-574.1-701-543.7-678.6-514.2-483.9-257.7-249.8-41.8 0 0' fill-opacity='0.42'/%3E %3Cpath transform='matrix(1,0,0,-1,781.5,1267.8)' d='M0 0C169.3 24 345.2-38.7 460-257.2 566.5-459.7 597.2-738 606.2-1002.6 617-1322.1 598.5-1644.7 582.1-1963.5 577.5-2053 572.9-2142.6 568.3-2232.2H565.7C570.2-2143.4 574.8-2054.6 579.3-1965.9 595.4-1647.7 613.7-1325.6 602.5-1006.7 593.2-742.6 562.3-465.1 455.9-263.2 341-45.5 165.5 16.6-3.4-7.8-259.8-44.7-501.6-261.1-702.7-520.4-729.6-554.9-755.8-590.6-781.5-627.4V-621C-755.4-583.7-728.7-547.5-701.4-512.4-499.5-252.9-257-36.5 0 0' fill-opacity='0.39'/%3E %3Cpath transform='matrix(1,0,0,-1,476,1326)' d='M0 0C109.5 74.5 225.8 128.2 343.5 142.5 516.4 163.6 696.7 94 811.6-133.6 918-344.1 946-630.2 951.9-900.2 955.4-1057.3 951.4-1215.8 945.1-1372.9 938.3-1541.7 928.6-1710.6 918.8-1879.2 913.1-1977.4 907.4-2075.7 901.8-2174H899.3C904.9-2076.4 910.5-1978.9 916.1-1881.4 925.8-1713.1 935.3-1544.4 942-1375.8 948.2-1218.9 952.1-1060.8 948.4-904 942.2-634.5 914-349 807.6-139.2 692.6 87.6 512.7 156.7 340.2 135.3 222.7 120.7 106.7 66.9-2.4-7.7-138-100.2-265.4-227.5-382.3-374.9-414.3-415.2-445.5-457.1-476-500.5V-494.6C-445.1-450.6-413.4-408.1-381-367.4-263.7-219.8-135.9-92.5 0 0' fill-opacity='0.37'/%3E %3Cpath transform='matrix(1,0,0,-1,505,1237.7)' d='M0 0C112.7 73.6 232.7 126.7 353.8 137.8 529.7 153.9 715.4 80.6 829.8-157.8 935.7-378.8 960.6-669.8 963.7-945.6 965.5-1106 959.8-1267.5 951.9-1427.6 943.5-1599.3 932.3-1771 921.2-1942.5 914.3-2049.1 907.4-2155.7 900.7-2262.3H898.5C905-2156.3 911.8-2050.4 918.6-1944.5 929.6-1773.3 940.7-1601.8 949-1430.3 956.7-1270.4 962.3-1109.2 960.4-949.1 957.1-673.7 931.9-383.2 825.9-163 711.5 74.7 526.1 147.4 350.6 131 229.7 119.7 110 66.5-2.4-7.2-142.4-99-274.3-226.9-395.5-375.9-432.9-421.9-469.4-470.1-505-520.3V-514.8C-469-464-432.1-415.3-394.2-368.8-272.7-219.7-140.4-91.8 0 0' fill-opacity='0.34'/%3E %3Cpath transform='matrix(1,0,0,-1,535,1149.7)' d='M0 0C116.5 73.1 239.9 123.7 364.2 132.6 543.6 145.4 733.7 64.8 847.8-183 953.3-412.1 974.8-710.4 974.9-991.9 974.9-1155.5 967.4-1320 957.9-1483.1 947.8-1657.6 935-1832.1 922.5-2006.3 914.3-2120.9 906.2-2235.6 898.5-2350.3H896.4C904-2236.2 912-2122.2 920.1-2008.1 932.5-1834.1 945.1-1659.9 955.2-1485.6 964.5-1322.7 971.9-1158.4 971.7-995.1 971.4-714 949.6-416.2 844.1-187.8 729.9 59.4 540.1 139.4 361.1 126.3 237.1 117.2 113.9 66.4-2.3-6.7-146.9-97.6-283.4-226-408.9-376.5-452.2-428.3-494.2-483-535-540.2V-535.1C-493.8-477.3-451.3-422.1-407.6-369.9-281.7-219.3-144.9-90.8 0 0' fill-opacity='0.32'/%3E %3Cpath transform='matrix(1,0,0,-1,566.2,1062.1)' d='M0 0C120.1 72.2 247.1 121.1 374.7 127 558.2 135.5 752 48.2 865.7-209.1 970.5-446.4 988.5-751.9 985.4-1039.1 983.5-1205.9 974.2-1373.3 963-1539.4 951.1-1716.6 936.7-1893.8 922.9-2070.8 913.3-2193.1 903.9-2315.4 895.1-2437.9H893.1C901.8-2316 911.1-2194.1 920.6-2072.4 934.4-1895.6 948.6-1718.6 960.4-1541.6 971.5-1375.7 980.7-1208.5 982.4-1041.9 985.3-755.1 967-450.2 862.2-213.5 748.5 43.2 554.8 130 371.7 121.2 244.4 115.1 117.6 66-2.3-6.2-151.4-96.1-292.5-224.8-422.5-376.7-471.9-434.4-519.8-495.7-566.2-560.2V-555.5C-519.4-490.5-471.1-428.6-421.2-370.5-291-218.6-149.5-89.8 0 0' fill-opacity='0.29'/%3E %3Cpath transform='matrix(1,0,0,-1,598.6,975)' d='M0 0C123.8 71.2 254.4 118.2 385.2 121 572.8 125 770.4 30.8 883.5-236.2 987.5-481.8 1001.7-794.4 995.2-1087.1 991.4-1257 980.2-1427.3 967.3-1596.3 953.5-1776.2 937.5-1956 922.1-2135.7 911.1-2265.3 900.4-2395.1 890.4-2525H888.5C898.5-2395.6 909.1-2266.3 920.1-2137.2 935.3-1957.6 951.2-1778 964.8-1598.3 977.7-1429.5 988.7-1259.4 992.4-1089.7 998.7-797.3 984.2-485.1 880.1-240.1 767 26.2 569.6 119.9 382.4 115.6 251.8 112.6 121.4 65.5-2.2-5.7-156-94.4-301.8-223.3-436.3-376.5-492.2-440.1-546.3-508.3-598.6-580.3V-575.9C-546-503.4-491.4-434.7-435.1-370.7-300.3-217.5-154.1-88.6 0 0' fill-opacity='0.27'/%3E %3Cpath transform='matrix(1,0,0,-1,632.1,888.2)' d='M0 0C127.1 69.8 261.6 115.6 395.9 114.5 500.8 113.7 607 86.4 702 13 781.8-48.8 851.3-142.9 901.1-264.1 949.9-383 978.4-522.2 993.1-664.5 1009-819.1 1009.6-978.9 1004.3-1135.9 998.5-1308.9 985.3-1482.1 970.6-1653.9 954.9-1836.5 937.2-2018.8 920.4-2201.2 907.8-2337.8 895.6-2474.7 884.4-2611.8H882.8C893.9-2475.2 905.9-2338.7 918.4-2202.4 935.1-2020.3 952.8-1838 968.3-1655.7 983-1484 996-1311 1001.7-1138.2 1006.9-981.3 1006.2-821.7 990.2-667.3 975.4-525.3 946.8-386.3 897.9-267.7 848.1-146.7 778.7-52.9 698.9 8.7 604 81.9 498 109 393.2 109.7 259.1 110.5 124.8 64.6-2.1-5.3-160.6-92.6-311.3-221.5-450.4-375.8-513.1-445.4-573.7-520.5-632.1-600.4V-596.4C-573.3-516-512.3-440.5-449.2-370.5-309.8-216.2-158.8-87.2 0 0' fill-opacity='0.24'/%3E %3Cpath transform='matrix(1,0,0,-1,666.7,802)' d='M0 0C130.9 68.5 269.1 112.1 406.7 107.6 513.9 104.1 622.3 73.5 718.7-4.3 799.5-69.6 869.3-167.7 918.6-293 966.9-415.9 994.1-558.9 1007.2-704.4 1021.4-862.6 1020-1025.6 1012.8-1185.6 1004.9-1361.6 989.6-1537.5 973-1712.2 955.3-1897.2 935.8-2082.2 917.5-2267.1 903.3-2410.4 889.7-2554.1 877.3-2698H875.8C888.1-2554.5 901.6-2411.2 915.7-2268.2 934-2083.4 953.4-1898.6 970.9-1713.7 987.4-1539.2 1002.6-1363.4 1010.4-1187.6 1017.4-1027.8 1018.8-865 1004.4-707 991.3-561.7 964-418.8 915.6-296.2 866.3-171.1 796.5-73.2 715.8-8.1 619.5 69.5 511.2 99.9 404.1 103.2 266.7 107.5 128.7 63.8-2-4.8-165.3-90.6-320.8-219.4-464.6-374.7-534.6-450.2-602-532.5-666.7-620.5V-616.8C-601.6-528.4-533.8-445.7-463.5-369.9-319.4-214.5-163.6-85.7 0 0' fill-opacity='0.22'/%3E %3Cpath transform='matrix(1,0,0,-1,702.5,716.3)' d='M0 0C135 67.3 276.7 107.8 417.5 100.3 526.9 94.5 637.7 59.9 735.4-22.4 817.1-91.2 887.2-193.3 935.9-322.9 983.6-449.7 1009.4-596.5 1020.8-745.2 1033.2-907.1 1029.7-1073.1 1020.5-1236 1010.4-1415 993-1593.6 974.4-1771 954.8-1958.6 933.5-2145.9 913.5-2333.4 897.6-2483.2 882.6-2633.3 868.9-2783.7H867.5C881.1-2633.7 896.1-2483.9 911.9-2334.4 931.8-2147 953-1959.8 972.5-1772.4 991-1595.1 1008.3-1416.6 1018.3-1237.8 1027.4-1075 1030.8-909.2 1018.3-747.5 1006.8-598.9 980.9-452.3 933.1-325.7 884.4-196.4 814.4-94.4 732.7-25.8 635.1 56.3 524.3 90.7 415.1 96.3 274.5 103.6 133 63-1.8-4.3-170-88.4-330.5-217-479.1-373.2-556.6-454.6-631.1-544.2-702.5-640.4V-637.1C-630.8-540.4-555.9-450.5-478-368.8-329.2-212.5-168.4-83.9 0 0' fill-opacity='0.19'/%3E %3Cpath transform='matrix(1,0,0,-1,739.4,631.1)' d='M0 0C138.8 65.7 284.4 103.7 428.5 92.5 540.2 83.8 653.1 45.7 752.2-41.2 834.7-113.6 905-219.9 953-353.6 1000-484.5 1024.3-635 1034-787 1044.5-952.4 1038.8-1121.5 1027.5-1287.2 1015.1-1469.1 995.5-1650.4 974.9-1830.5 953.2-2020.4 930-2210.2 908.5-2400.2 890.8-2556 874.2-2712.3 859.3-2868.9H858.1C872.9-2712.6 889.5-2556.6 907-2401 928.5-2211.1 951.5-2021.4 973.2-1831.6 993.7-1651.6 1013.2-1470.4 1025.5-1288.7 1036.7-1123.1 1042.3-954.2 1031.7-788.9 1021.9-637.1 997.5-486.8 950.5-356 902.5-222.6 832.2-116.4 749.7-44.2 650.7 42.5 537.8 80.5 426.3 89 282.3 100 136.9 61.9-1.7-3.9-174.8-86-340.3-214.2-493.8-371.2-579.2-458.6-661.2-555.5-739.4-660.3V-657.4C-660.9-552.1-578.5-454.9-492.7-367.2-339.1-210.2-173.3-82 0 0' fill-opacity='0.17'/%3E %3Cpath transform='matrix(1,0,0,-1,777.6,546.5)' d='M0 0C142.7 64 292.1 99.4 439.5 84.3 553.5 72.6 668.6 30.8 768.9-60.8 852.3-136.9 922.7-247.4 970-385.2 1016.2-520.2 1038.9-674.5 1046.7-829.6 1055.2-998.6 1047.2-1170.6 1033.7-1339.1 1018.9-1523.8 997.1-1707.7 974.4-1890.5 950.5-2082.7 925.5-2274.9 902.3-2467.4 882.8-2628.8 864.7-2791 848.5-2953.5H847.4C863.5-2791.2 881.6-2629.3 901-2468.1 924.1-2275.7 949.1-2083.6 972.8-1891.5 995.4-1708.8 1017.2-1525 1031.9-1340.4 1045.3-1172 1053.2-1000.1 1044.6-831.2 1036.7-676.3 1014-522.2 967.7-387.4 920.4-249.6 850-139.4 766.7-63.4 666.4 28 551.4 69.6 437.5 81.2 290.2 96.2 140.9 60.7-1.6-3.4-179.6-83.5-350.3-211.1-508.7-368.7-602.4-462-692.1-566.4-777.6-680.1V-677.4C-691.8-563.4-601.8-458.7-507.7-365.2-349.1-207.5-178.3-80 0 0' fill-opacity='0.15'/%3E %3Cpath transform='matrix(1,0,0,-1,816.9,462.4)' d='M0 0C146.2 62 299.7 95.4 450.7 75.6 567.3 60.3 684.3 15.2 785.7-81.1 869.9-161.1 940.4-275.7 986.7-417.8 1032.1-556.9 1053-714.9 1058.9-873 1065.3-1045.5 1054.9-1220.5 1039.2-1391.7 1021.9-1579.2 997.7-1765.6 972.9-1951 946.8-2145.5 919.8-2339.9 894.9-2534.8 873.6-2701.8 853.9-2869.4 836.4-3037.6H835.4C852.9-2869.6 872.6-2702.1 893.8-2535.4 918.6-2340.6 945.6-2146.3 971.5-1951.8 996.3-1766.5 1020.4-1580.2 1037.6-1392.8 1053.2-1221.7 1063.6-1046.8 1057.1-874.5 1051.1-716.4 1030.1-558.5 984.7-419.6 938.3-277.6 867.9-163.2 783.7-83.4 682.3 12.8 565.4 57.8 448.9 73 298 92.6 144.7 59.1-1.4-3-184.5-80.8-360.4-207.6-523.8-365.8-626.1-464.8-724-576.9-816.9-699.6V-697.3C-723.8-574.3-625.6-462-522.9-362.7-359.3-204.5-183.3-77.7 0 0' fill-opacity='0.13'/%3E %3Cpath transform='matrix(1,0,0,-1,857.4,379)' d='M0 0C150.2 60 307.6 90.5 461.9 66.5 580.1 48 700.1-0.1 802.6-102.3 887.6-187 958-304.9 1003.3-451.3 1047.7-594.5 1066.8-756.2 1070.6-917.4 1074.8-1093.3 1061.9-1271.1 1043.9-1445 1024.1-1635.2 997.4-1824.1 970.4-2012 942.1-2208.7 913-2405.3 886.4-2602.6 863.3-2774.6 841.8-2947.5 823.1-3121H822.2C841-2947.7 862.3-2774.9 885.5-2603.1 912-2405.8 941-2209.3 969.2-2012.7 996.2-1824.8 1022.8-1636 1042.5-1445.9 1060.5-1272.1 1073.3-1094.4 1069-918.5 1065.1-757.4 1046-595.9 1001.6-452.8 956.2-306.6 885.8-188.8 800.8-104.2 698.3-2.2 578.5 45.9 460.3 64.2 306.1 88.1 148.8 57.6-1.2-2.5-189.4-77.9-370.6-203.8-539.1-362.4-650.5-467.1-756.8-586.9-857.4-718.9V-717C-756.6-584.7-650-464.7-538.4-359.8-369.6-201.2-188.3-75.3 0 0' fill-opacity='0.10'/%3E %3Cpath transform='matrix(1,0,0,-1,899.2,296.3)' d='M0 0C154.2 57.9 315.5 85.3 473.2 56.8 594.4 35 715.6-17.9 819.4-124.3 905-211.9 975.4-335.1 1019.7-485.7 1063-633 1080.2-798.3 1081.9-962.5 1083.7-1141.9 1068.3-1322.5 1047.7-1499 1025.3-1691.8 996.1-1883 966.8-2073.5 936.2-2272.3 905.1-2471.1 876.7-2670.7 851.6-2847.4 828.6-3025.2 808.5-3203.7H807.8C827.9-3025.3 850.9-2847.6 875.9-2671.1 904.2-2471.5 935.3-2272.8 965.8-2074.1 995.1-1883.6 1024.2-1692.4 1046.6-1499.7 1067-1323.3 1082.4-1142.7 1080.5-963.5 1078.8-799.3 1061.6-634.1 1018.2-486.9 973.9-336.4 903.4-213.3 817.9-125.8 714.2-19.6 593 33.2 471.9 55 314.3 83.3 153 55.9-1.1-2.1-194.4-74.8-380.9-199.7-554.7-358.5-675.4-468.8-790.5-596.5-899.2-738V-736.4C-790.3-594.6-675-466.8-554-356.3-380.1-197.5-193.4-72.7 0 0' fill-opacity='0.08'/%3E %3C/g%3E %3C/svg%3E"); --pat-b-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2265 0 2235 2179'%3E %3Cg fill='%23000'%3E %3Cpath transform='matrix(1,0,0,-1,4241.2,215.3)' d='M0 0C-85.9-36.6-181.5-48.7-266.2-7.5-348.1 32.3-400.9 110.6-437.4 193.5-440.6 200.7-443.7 208-446.6 215.3H-437.5C-435.6 210.9-433.7 206.4-431.7 202-395.2 119.9-342.6 42.4-261.2 3.2-177-37.4-82.2-25 2.8 11.5 102.1 54.1 186.9 127.5 258.8 209V198.7C186 116.6 100.3 42.7 0 0' fill-opacity='0.90'/%3E %3Cpath transform='matrix(1,0,0,-1,4226.2,273)' d='M0 0C-90-36.7-189.9-47.7-277.4-3.1-361.8 39.9-415.3 122.4-451.8 209.2-460.6 230.1-468.5 251.4-475.6 273H-467.4C-460.9 254.2-453.8 235.6-446.1 217.2-409.5 131.3-356.6 50.9-272.2 7.2-185.5-37.8-84.8-24.9 3 11.2 107.7 54.2 197.5 130 273.8 214.6V204.6C196.6 119.5 105.8 43.2 0 0' fill-opacity='0.87'/%3E %3Cpath transform='matrix(1,0,0,-1,4210.1,330.7)' d='M0 0C-94.1-36.8-198.3-46.4-288.4 1.6-375.3 47.9-429.3 134.7-465.7 225.3-479.5 259.6-491 294.9-500.7 330.7H-493.1C-483.8 297.5-472.9 264.9-460 233.1-423.6 143.2-369.6 57.1-283.2 11.5-193.5-35.8-90.3-25.9 3.1 10.8 113.7 54.4 208.9 132.9 289.9 220.8V211.2C208 122.6 111.7 43.6 0 0' fill-opacity='0.85'/%3E %3Cpath transform='matrix(1,0,0,-1,4192.9,388.3)' d='M0 0C-96.8-36.1-206.9-46-299.4 6.7-389 57.7-443 147.5-479.2 242-497.4 289.4-511.4 338.4-522.5 388.3H-515.5C-504.5 341-491 294.5-473.6 249.5-437.3 155.6-382.9 65.3-294.2 16.3-201.9-34.7-94.3-26.2 3.2 10.5 120.1 54.5 221.2 136 307.1 227.4V218.2C220.2 126.1 118 44.1 0 0' fill-opacity='0.83'/%3E %3Cpath transform='matrix(1,0,0,-1,4174.6,445.7)' d='M0 0C-102.5-36.5-215.1-43.2-310.4 12.2-401.8 65.3-456.4 160.8-492.3 259.3-514.3 319.6-529.8 382.2-541.6 445.7H-535C-523.4 384.6-508 324.4-486.7 266.4-450.7 168.6-396.1 73.9-305.1 21.4-210.3-33.3-98.4-26.3 3.3 10.2 126.9 54.6 234.2 139.2 325.4 234.5V225.7C233.3 129.6 124.8 44.4 0 0' fill-opacity='0.81'/%3E %3Cpath transform='matrix(1,0,0,-1,4155.2,503.1)' d='M0 0C-106.8-36.2-223.6-41.2-321.3 18-414.8 74.7-469.5 174.7-504.9 277.1-530.1 350.1-546.5 426.2-558.2 503.1H-552C-540.3 428.5-524 354.7-499.3 283.9-463.8 182.1-409.1 83-315.9 26.9-218.7-31.7-102.6-26.3 3.4 9.9 134.2 54.6 248.1 142.7 344.8 242.1V233.5C247.1 133.4 132 44.7 0 0' fill-opacity='0.78'/%3E %3Cpath transform='matrix(1,0,0,-1,4134.7,560.3)' d='M0 0C-111-35.8-232.1-39-332 24.2-427.6 84.7-482.2 188.9-517 295.4-545.1 380.9-561.5 470.3-572.6 560.3H-566.8C-555.6 472.5-539.1 385.3-511.5 301.8-476.5 196.1-421.9 92.6-326.7 32.7-227.2-29.8-106.8-26.3 3.5 9.6 141.8 54.6 262.8 146.3 365.3 250V241.8C261.8 137.3 139.6 45 0 0' fill-opacity='0.76'/%3E %3Cpath transform='matrix(1,0,0,-1,3770.3,586.6)' d='M0 0C-97.5 64.3-151.8 173-185.9 283.4-216.2 381.4-232.1 483.9-242.2 586.6H-236.8C-226.4 485.9-210.4 385.5-180.5 289.6-146.2 179.8-91.8 71.8 5.3 8.2 107.1-58.4 231.8-56.8 346.4-21.5 492.7 23.6 621.1 119.2 729.7 227.5V219.6C620.1 110.6 490.4 14.4 342.8-30.8 227.5-66 102.1-67.3 0 0' fill-opacity='0.73'/%3E %3Cpath transform='matrix(1,0,0,-1,3736.9,636.6)' d='M0 0C-99.3 68.1-153.1 181.4-186.4 295.7-218.6 406-233.2 521.4-242.2 636.6H-237C-227.9 523.4-212.9 410-181 301.6-147.6 187.9-93.7 75.4 5.3 7.8 109.2-63 238.1-63.4 357-28.7 511.8 16.4 648.1 116.1 763.1 229.1V221.5C647 107.8 509.5 7.4 353.4-37.7 233.8-72.3 104.2-71.5 0 0' fill-opacity='0.71'/%3E %3Cpath transform='matrix(1,0,0,-1,3702.4,686)' d='M0 0C-101 72.1-154.2 189.9-186.5 308.2-220 430.7-233.1 558.8-240.5 686H-235.5C-227.9 560.6-214.5 434.4-181.2 313.8-148.8 196.1-95.4 79 5.3 7.5 111.2-67.6 244.4-70.3 367.6-36.4 531.2 8.7 675.9 112.7 797.6 230.6V223.4C674.8 104.6 528.9 0 363.9-45 240-78.8 106.1-75.8 0 0' fill-opacity='0.68'/%3E %3Cpath transform='matrix(1,0,0,-1,3666.9,734.8)' d='M0 0C-102.5 76.2-155 198.5-186.2 320.8-220.5 455.3-231.4 595.8-237.3 734.8H-232.5C-226.4 597.6-215.2 458.8-181 326.1-149.7 204.4-97 82.7 5.3 7.2 113-72.4 250.4-77.4 378-44.3 551 0.4 704.4 108.9 833.1 232V225.1C703.3 101.2 548.6-7.9 374.3-52.7 246-85.6 108-80.2 0 0' fill-opacity='0.66'/%3E %3Cpath transform='matrix(1,0,0,-1,3630.4,783.1)' d='M0 0C-103.9 80.3-155.6 207.3-185.4 333.5-220.1 479.9-228.5 632.6-232.5 783.1H-228C-223.7 634.2-215 483.2-180.3 338.5-150.2 212.9-98.5 86.6 5.3 6.8 114.8-77.3 256.4-84.7 388.3-52.7 571-8.3 733.6 104.8 869.6 233.2V226.6C732.6 97.4 568.6-16.4 384.5-60.7 252-92.6 109.7-84.8 0 0' fill-opacity='0.63'/%3E %3Cpath transform='matrix(1,0,0,-1,3592.8,830.7)' d='M0 0C-105.3 84.6-155.7 216.1-184.2 346.3-218.9 504.4-224.2 669.1-226.4 830.7H-222.1C-219.6 670.6-213.9 507.5-179.2 351.1-150.5 221.4-100 91.9 5.2 6.5 115.9-83.3 263.8-91.9 398.5-61.4 591.3-17.7 763.6 100.4 907.2 234.3V227.9C762.6 93.3 588.9-25.5 394.7-69.1 257.7-99.8 111.3-89.4 0 0' fill-opacity='0.61'/%3E %3Cpath transform='matrix(1,0,0,-1,3554.2,877.8)' d='M0 0C-106.6 90.3-155.6 225.1-182.6 359.2-215.6 523.5-218.5 694-218.9 861.4-218.9 866.9-218.9 872.3-218.9 877.8H-214.8C-214.8 873.2-214.8 868.7-214.8 864.2-214.1 697.4-211 527.3-177.7 363.7-150.5 230-101.3 95.9 5.2 6.2 117.4-88.4 269.4-99.7 408.5-70.4 611.8-27.6 794.3 95.5 945.8 235.1V229C793.3 88.7 609.4-35.1 404.7-77.8 265-106.9 112.4-95.3 0 0' fill-opacity='0.58'/%3E %3Cpath transform='matrix(1,0,0,-1,3514.6,924.2)' d='M0 0C-107.6 94.7-155.2 234.1-180.5 372.1-211.4 540.9-211.9 715.4-210.5 886.9-210.4 899.3-210.2 911.7-210.1 924.2H-206.2C-206.3 912.6-206.4 901-206.5 889.5-207.7 718.6-206.8 544.6-175.7 376.4-150.2 238.8-102.3 98.6 5.1 5.9 119.1-92.6 273.3-108.1 418.4-79.8 632.6-38.1 825.8 90.2 985.4 235.6V229.9C824.8 83.8 630.2-45.3 414.5-86.9 270.5-114.6 113.7-100.1 0 0' fill-opacity='0.56'/%3E %3Cpath transform='matrix(1,0,0,-1,3898.1,1066.2)' d='M0 0C-148.4-26.3-309.3-8.8-424.2 96.3-532.7 195.5-578.6 339.5-602.1 481.5-630.7 654.7-628.8 833.2-625.4 1008.5-625 1027.8-624.6 1047-624.1 1066.2H-620.4C-620.8 1047.8-621.2 1029.4-621.5 1011-624.7 836.1-626.3 658.1-597.4 485.4-573.8 344-527.5 199.1-419.2 101.9-304-1.6-145.6-20 3.8 6.7 225.9 46.5 427.4 176.7 593.8 325 596.5 327.4 599.2 329.8 601.9 332.2V326.7C598.8 324 595.7 321.2 592.7 318.5 425.4 169.8 222.9 39.5 0 0' fill-opacity='0.53'/%3E %3Cpath transform='matrix(1,0,0,-1,3865.9,1121.1)' d='M0 0C-154.4-24.9-317.3-3.1-433.8 106.1-542.9 208.4-587.1 358.5-608.6 504.3-634.7 682-630.2 864.3-624.8 1043.6-624 1069.4-623.1 1095.3-622.2 1121.1H-618.7C-619.6 1096-620.4 1071-621.1 1045.9-626.3 867-630.5 685.2-604 508-582.3 362.7-537.9 213.1-428.8 111.3-312.5 2.8-150.1-18.7 3.8 6.4 233.2 43.9 442.7 175.2 615.9 326 622 331.3 628.1 336.6 634.1 342V336.8C627.7 331.1 621.2 325.4 614.7 319.7 440.6 168.6 230.2 37.2 0 0' fill-opacity='0.51'/%3E %3Cpath transform='matrix(1,0,0,-1,3832.5,1175.6)' d='M0 0C-158.8-23.2-325.7 1.9-443.1 116.2-552.9 223.1-595.1 377.9-614.4 527.6-637.9 709.6-630.7 895.7-623.1 1079-621.8 1111.2-620.4 1143.4-618.9 1175.6H-615.5C-617 1144.1-618.3 1112.6-619.6 1081.1-626.9 898.3-633.8 712.6-610 531-590.4 381.8-548 227.6-438.3 121.1-321 7.4-154.5-17.3 3.8 6.1 240.5 41.1 458.1 173.4 638.4 326.5 648.2 334.9 657.9 343.3 667.5 351.8V346.8C657.4 338 647.3 329.2 637.1 320.5 456 167.1 237.6 34.7 0 0' fill-opacity='0.49'/%3E %3Cpath transform='matrix(1,0,0,-1,3797.9,1229.7)' d='M0 0C-163.1-21.3-334.2 7.1-452.3 126.7-562.6 238.3-602.5 397.7-619.6 551.2-640.3 737.6-630.2 927.5-620.4 1114.6-618.4 1153-616.3 1191.3-614.1 1229.7H-611C-613.1 1192-615.1 1154.3-617 1116.5-626.5 929.8-636.3 740.3-615.3 554.4-598 401.4-557.8 242.5-447.6 131.3-329.5 12.3-158.9-15.8 3.8 5.8 247.9 38.1 473.8 171.3 661.1 326.6 674.9 338.1 688.6 349.7 702.1 361.6V356.9C688.2 344.7 674.1 332.7 659.8 320.9 471.8 165.3 245 32 0 0' fill-opacity='0.47'/%3E %3Cpath transform='matrix(1,0,0,-1,3762.1,1283.5)' d='M0 0C-167.5-19.3-342.6 12.5-461.3 137.5-571.9 253.9-609.4 417.9-624 575.2-641.8 765.8-628.7 959.4-616.7 1150.4-613.8 1194.7-610.9 1239.1-608 1283.5H-605C-607.8 1239.7-610.7 1195.9-613.4 1152.2-625.2 961.6-638 768.4-619.9 578.2-605 421.3-567.3 257.8-456.7 141.8-338 17.4-163.3-14.1 3.7 5.5 255.4 34.9 489.7 168.7 684.2 326.2 702.4 340.9 720.3 356 737.9 371.3V366.9C719.9 351.2 701.5 335.8 682.9 320.7 487.6 163.1 252.4 29.1 0 0' fill-opacity='0.44'/%3E %3Cpath transform='matrix(1,0,0,-1,3725,1336.9)' d='M0 0C-171.8-17.2-350.9 18.2-470.1 148.6-580.9 269.9-615.7 438.5-627.8 599.6-642.5 794.4-626.3 991.6-611.8 1186.3-608 1236.5-604.2 1286.7-600.4 1336.9H-597.6C-601.3 1287.2-605 1237.6-608.7 1188-622.9 993.6-638.8 796.7-623.8 602.3-611.5 441.7-576.4 273.5-465.7 152.7-346.5 22.7-167.8-12.3 3.6 5.1 262.9 31.5 505.7 165.9 707.6 325.3 730.5 343.4 753 362 775 381V376.8C752.5 357.4 729.6 338.5 706.3 320.1 503.6 160.4 259.9 26 0 0' fill-opacity='0.42'/%3E %3Cpath transform='matrix(1,0,0,-1,3686.7,1389.8)' d='M0 0C-176.2-15-359.2 24.1-478.8 160.1-589.6 286.2-621.5 459.5-630.9 624.2-642.2 823.2-622.8 1024-605.8 1222.5-601 1278.2-596.2 1334-591.5 1389.8H-588.8C-593.4 1334.5-598.2 1279.3-602.8 1224-619.6 1025.9-638.7 825.4-627.1 626.8-617.4 462.4-585.2 289.6-474.4 163.9-354.9 28.3-172.2-10.3 3.6 4.8 270.3 27.9 522 162.6 731.4 324 759.3 345.5 786.6 367.7 813.3 390.6V386.6C786.2 363.4 758.4 340.9 730 319.1 519.9 157.5 267.5 22.7 0 0' fill-opacity='0.39'/%3E %3Cpath transform='matrix(1,0,0,-1,4004.6,1353.6)' d='M0 0C-113.9-46.4-235-79.8-357.5-88.7-537.4-101.9-725-58.5-844.7 83.2-955.4 214.2-984.5 392.4-990.7 560.5-994.3 658.3-990.1 757-983.6 854.8-976.5 959.9-966.4 1065.1-956.2 1170-950.3 1231.2-944.3 1292.4-938.5 1353.6H-936C-941.7 1292.8-947.6 1232.1-953.4 1171.4-963.5 1066.6-973.4 961.6-980.4 856.6-986.8 758.9-990.8 660.5-987.1 562.8-980.6 395-951.2 217.3-840.5 86.7-720.9-54.5-533.6-97.5-354.1-84.2-231.8-75.2-111.1-41.6 2.5 4.8 143.6 62.4 276.2 141.7 397.9 233.4 431.2 258.5 463.6 284.6 495.4 311.6V307.9C463.2 280.6 430.3 254.1 396.5 228.7 274.5 136.9 141.4 57.6 0 0' fill-opacity='0.37'/%3E %3Cpath transform='matrix(1,0,0,-1,3974.5,1408.6)' d='M0 0C-117.2-45.8-242.1-78.9-368.2-85.8-551.2-95.8-744.6-50.2-863.6 98.3-973.8 235.8-999.8 417-1003 588.8-1004.8 688.6-998.9 789.1-990.7 888.9-981.9 995.8-970.3 1102.7-958.7 1209.4-951.5 1275.8-944.3 1342.2-937.4 1408.6H-935.1C-941.9 1342.6-949 1276.6-956 1210.7-967.5 1104.1-979 997.3-987.6 890.5-995.7 791-1001.5 690.6-999.5 590.9-996.1 419.5-969.8 238.6-859.5 101.5-740.5-46.5-547.5-91.8-364.9-81.6-239-74.5-114.4-41.4 2.5 4.5 148.2 61.6 285.5 141.3 411.6 234 450.6 262.7 488.6 292.7 525.5 323.9V320.5C488.1 288.9 449.7 258.6 410.3 229.6 283.8 136.8 146.1 57.1 0 0' fill-opacity='0.34'/%3E %3Cpath transform='matrix(1,0,0,-1,3943.2,1463.3)' d='M0 0C-121.3-45.5-249.7-77-379-82.6-565.7-90.5-763.6-40.4-882.3 114-992.1 256.6-1014.5 442.3-1014.6 617.6-1014.6 719.4-1006.8 821.9-996.9 923.4-986.4 1032.1-973.1 1140.7-960.1 1249.2-951.6 1320.5-943.1 1391.9-935.1 1463.3H-932.9C-940.8 1392.3-949.2 1321.3-957.6 1250.3-970.5 1141.9-983.6 1033.5-994.1 924.9-1003.8 823.5-1011.5 721.2-1011.3 619.5-1011 444.5-988.3 259.1-878.5 116.9-759.7-37-562.1-86.8-375.8-78.6-246.7-73-118.6-41.4 2.4 4.2 152.9 60.8 294.9 140.7 425.6 234.4 470.6 266.7 514.3 300.7 556.8 336.3V333.2C513.9 297.2 469.7 262.8 424.2 230.3 293.2 136.5 150.8 56.6 0 0' fill-opacity='0.32'/%3E %3Cpath transform='matrix(1,0,0,-1,3910.7,1517.9)' d='M0 0C-125-44.9-257.2-75.4-389.9-79.1-580.9-84.4-782.6-30-901 130.2-1010.1 277.9-1028.8 468.2-1025.5 647-1023.6 750.8-1013.9 855-1002.3 958.4-989.8 1068.8-974.9 1179.1-960.4 1289.3-950.5 1365.4-940.7 1441.6-931.5 1517.9H-929.5C-938.6 1442-948.2 1366.1-958.1 1290.3-972.5 1180.2-987.3 1070-999.6 959.8-1011.1 856.5-1020.6 752.4-1022.4 648.7-1025.4 470.2-1006.4 280.3-897.3 132.9-779-26.9-577.4-80.9-386.8-75.5-254.3-71.6-122.4-41.1 2.3 3.9 157.6 59.8 304.5 140 439.7 234.5 491.1 270.5 541 308.7 589.3 348.8V345.9C540.6 305.4 490.3 266.9 438.4 230.7 302.8 136.1 155.6 55.9 0 0' fill-opacity='0.29'/%3E %3Cpath transform='matrix(1,0,0,-1,3877,1572.1)' d='M0 0C-128.8-44.3-264.8-73.6-400.9-75.3-596.1-77.8-801.8-19.2-919.4 147-1027.7 300-1042.5 494.6-1035.7 676.9-1031.8 782.6-1020.1 888.7-1006.7 993.9-992.3 1105.9-975.6 1217.9-959.7 1329.7-948.2 1410.4-937 1491.3-926.6 1572.1H-924.7C-935 1491.6-946.1 1411-957.5 1330.6-973.4 1218.9-989.9 1107-1004.1 995.1-1017.5 890-1029 784.1-1032.8 678.4-1039.3 496.4-1024.3 302.1-916 149.5-798.2-16.3-592.8-74.7-397.9-72-262-70.1-126.3-40.8 2.3 3.6 162.3 58.8 314.1 139.1 454.1 234.4 512.3 274 568.6 316.4 623 361.3V358.6C568.2 313.4 511.4 270.7 452.8 230.8 312.5 135.4 160.4 55.2 0 0' fill-opacity='0.27'/%3E %3Cpath transform='matrix(1,0,0,-1,3842.2,1626.1)' d='M0 0C-132.3-43.5-272.3-72-412-71.3-521.2-70.8-631.8-53.8-730.6-8.1-813.7 30.4-885.9 89-937.8 164.5-988.6 238.4-1018.3 325.2-1033.6 413.7-1050.1 510-1050.7 609.5-1045.2 707.3-1039.2 815-1025.5 922.8-1010.1 1029.8-993.8 1143.4-975.3 1256.9-957.8 1370.5-944.7 1455.6-932.1 1540.8-920.5 1626.1H-918.7C-930.3 1541.1-942.8 1456.1-955.8 1371.3-973.2 1257.8-991.6 1144.4-1007.8 1030.8-1023 924-1036.6 816.3-1042.5 708.7-1047.9 611-1047.2 511.6-1030.5 415.5-1015.1 327.1-985.4 240.5-934.5 166.7-882.6 91.3-810.4 32.9-727.4-5.4-628.6-51-518.2-67.9-409.2-68.3-269.7-68.8-129.9-40.2 2.2 3.3 167.2 57.6 324 137.9 468.7 234 534 277.3 597.1 324.1 657.8 373.8V371.3C596.7 321.3 533.2 274.2 467.5 230.7 322.4 134.6 165.3 54.3 0 0' fill-opacity='0.24'/%3E %3Cpath transform='matrix(1,0,0,-1,3806.2,1679.8)' d='M0 0C-136.2-42.7-280-69.8-423.2-67-534.9-64.8-647.7-45.8-748 2.7-832 43.3-904.7 104.4-956 182.4-1006.2 258.9-1034.6 348-1048.2 438.6-1063 537.1-1061.5 638.5-1054 738.2-1045.8 847.8-1029.9 957.3-1012.6 1066-994.2 1181.2-974 1296.4-954.9 1411.5-940.1 1500.8-925.9 1590.2-913 1679.8H-911.4C-924.3 1590.5-938.3 1501.3-953 1412.2-972 1297.1-992.2 1182.1-1010.4 1067-1027.6 958.3-1043.4 848.9-1051.5 739.4-1058.9 639.9-1060.3 538.6-1045.3 440.2-1031.6 349.7-1003.2 260.8-952.9 184.4-901.6 106.5-829 45.6-744.9 5.1-644.7-43.2-532-62.2-420.6-64.3-277.6-66.9-133.9-39.7 2 3 172 56.4 333.9 136.6 483.5 233.3 556.3 280.3 626.5 331.5 693.8 386.3V384C626.1 329 555.6 277.5 482.3 230.3 332.4 133.6 170.3 53.3 0 0' fill-opacity='0.22'/%3E %3Cpath transform='matrix(1,0,0,-1,3768.9,1733.2)' d='M0 0C-140.5-41.9-288-67.1-434.5-62.4-548.3-58.8-663.7-37.3-765.4 13.9-850.4 56.8-923.3 120.4-974 201-1023.6 280-1050.5 371.4-1062.4 464-1075.3 564.8-1071.6 668.2-1062.1 769.6-1051.5 881-1033.4 992.2-1014.1 1102.7-993.6 1219.4-971.5 1336.1-950.8 1452.8-934.2 1546.1-918.5 1639.6-904.3 1733.2H-902.9C-917 1639.8-932.6 1546.5-949.1 1453.4-969.7 1336.8-991.8 1220.2-1012.1 1103.5-1031.4 993.1-1049.3 882-1059.7 770.6-1069.2 669.3-1072.8 566.1-1059.7 465.4-1047.8 372.9-1020.8 281.6-971.1 202.8-920.4 122.3-847.5 58.8-762.5 16-660.9-35.1-545.7-56.5-432-60-285.7-64.5-138.4-39.2 1.9 2.7 176.9 55 344 135.1 498.6 232.3 579.3 283.1 656.8 338.8 731.1 398.7V396.7C656.5 336.5 578.5 280.5 497.5 229.6 342.6 132.3 175.3 52.3 0 0' fill-opacity='0.19'/%3E %3Cpath transform='matrix(1,0,0,-1,3730.4,1786.2)' d='M0 0C-144.5-40.9-295.9-64.6-445.9-57.6-562.1-52.2-679.7-28.5-782.8 25.6-868.7 70.7-941.9 136.9-991.8 220.2-1040.7 301.7-1066 395.4-1076.1 490-1087.1 593-1081.1 698.2-1069.3 801.4-1056.4 914.7-1036 1027.5-1014.6 1139.7-992 1257.9-967.9 1376.1-945.5 1494.4-927.1 1591.4-909.8 1688.7-894.3 1786.2H-893C-908.5 1688.9-925.7 1591.8-944 1494.9-966.3 1376.7-990.3 1258.6-1012.8 1140.4-1034.1 1028.3-1054.4 915.5-1067.2 802.4-1078.9 699.3-1084.7 594.1-1073.7 491.2-1063.5 396.7-1038.2 303.1-989.2 221.7-939.3 138.6-866.1 72.5-780.2 27.5-677.2-26.5-559.7-50.1-443.6-55.4-293.8-62.3-142.5-38.5 1.8 2.4 181.9 53.6 354.2 133.4 513.9 231.1 602.8 285.5 688.1 345.9 769.6 411.1V409.3C687.8 343.8 602.1 283.2 512.8 228.6 352.9 130.9 180.4 51.1 0 0' fill-opacity='0.17'/%3E %3Cpath transform='matrix(1,0,0,-1,3690.7,1838.9)' d='M0 0C-148.5-39.9-304-61.9-457.4-52.5-576.1-45.2-695.9-19.2-800.3 37.8-887 85.2-960.3 154-1009.5 239.9-1057.6 323.9-1081.2 420-1089.3 516.5-1098.2 621.7-1089.8 728.8-1075.8 833.7-1060.4 948.7-1037.7 1063.2-1014.1 1177-989.2 1296.7-963.1 1416.4-939 1536.2-918.8 1636.8-899.9 1737.7-883 1838.9H-881.9C-898.7 1737.9-917.5 1637.1-937.7 1536.7-961.7 1416.9-987.7 1297.3-1012.5 1177.6-1036 1063.9-1058.7 949.5-1073.9 834.5-1087.9 729.7-1096.1 622.7-1087.1 517.5-1078.9 421.1-1055.3 325.1-1007.1 241.2-957.9 155.4-884.7 86.8-797.9 39.5-693.6-17.4-573.9-43.4-455.3-50.6-302-59.9-146.7-37.8 1.6 2.1 186.9 52 364.6 131.4 529.4 229.6 626.9 287.6 720.3 352.7 809.3 423.4V421.8C720 350.8 626.3 285.6 528.4 227.4 363.3 129.2 185.5 49.8 0 0' fill-opacity='0.15'/%3E %3Cpath transform='matrix(1,0,0,-1,3649.8,1891.2)' d='M0 0C-152.2-38.6-311.9-59.4-469-47.1-590.4-37.5-712.1-9.5-817.7 50.5-905.3 100.3-978.7 171.7-1026.9 260.1-1074.1 346.7-1095.9 445.1-1102 543.6-1108.7 651-1097.9 759.9-1081.5 866.5-1063.6 983.2-1038.3 1099.3-1012.5 1214.7-985.4 1335.8-957.3 1456.9-931.4 1578.2-909.2 1682.2-888.6 1786.5-870.5 1891.2H-869.5C-887.6 1786.7-908.1 1682.4-930.2 1578.6-956 1457.3-984.1 1336.3-1011.1 1215.2-1036.9 1099.9-1062 983.8-1079.8 867.2-1096.1 760.6-1106.9 651.8-1100.1 544.5-1093.9 446.1-1072.1 347.8-1024.8 261.3-976.5 172.9-903.2 101.6-815.7 51.9-710.1-8-588.4-36-467.1-45.4-310.2-57.7-150.6-36.8 1.5 1.8 192 50.3 375 129.3 545.1 227.8 651.6 289.4 753.5 359.2 850.2 435.6V434.2C753.2 357.6 651 287.6 544.2 225.8 373.9 127.3 190.7 48.4 0 0' fill-opacity='0.13'/%3E %3Cpath transform='matrix(1,0,0,-1,3607.6,1943.2)' d='M0 0C-156.3-37.4-320.1-56.3-480.7-41.4-603.8-29.9-728.6 0.1-835.3 63.7-923.7 116.5-997 189.9-1044.2 281-1090.4 370.2-1110.2 470.8-1114.2 571.2-1118.6 680.7-1105.2 791.4-1086.4 899.7-1065.8 1018.1-1038 1135.7-1009.9 1252.7-980.4 1375.2-950.2 1497.6-922.5 1620.4-898.4 1727.5-876.1 1835.2-856.6 1943.2H-855.7C-875.2 1835.3-897.5 1727.7-921.5 1620.7-949.1 1497.9-979.3 1375.6-1008.7 1253.1-1036.7 1136.1-1064.4 1018.6-1084.9 900.2-1103.7 792-1117 681.4-1112.6 571.9-1108.5 471.6-1088.6 371-1042.4 281.9-995.1 190.9-921.9 117.5-833.4 64.9-726.8 1.4-602-28.6-479.1-40-318.6-54.9-154.9-35.9 1.3 1.6 197.1 48.5 385.7 126.9 561.1 225.6 677 290.8 787.6 365.4 892.4 447.6V446.4C787.4 364 676.4 289.3 560.3 224 384.7 125.3 196 46.9 0 0' fill-opacity='0.10'/%3E %3Cpath transform='matrix(1,0,0,-1,3564.2,1994.7)' d='M0 0C-160.5-36.1-328.4-53.1-492.5-35.4-618.6-21.8-744.8 11.2-852.8 77.4-941.8 131.9-1015.1 208.6-1061.2 302.4-1106.3 394.1-1124.2 497-1125.9 599.3-1127.9 710.9-1111.8 823.4-1090.4 933.3-1067.1 1053.3-1036.7 1172.4-1006.2 1291-974.3 1414.8-941.9 1538.5-912.4 1662.8-886.3 1772.8-862.3 1883.5-841.4 1994.7H-840.7C-861.6 1883.6-885.5 1773-911.6 1663.1-941.1 1538.8-973.4 1415.1-1005.2 1291.3-1035.6 1172.8-1066 1053.7-1089.2 933.7-1110.5 823.9-1126.5 711.5-1124.5 599.9-1122.7 497.7-1104.8 394.8-1059.7 303.1-1013.5 209.4-940.2 132.8-851.2 78.3-743.3 12.2-617.1-20.7-491.1-34.3-327.1-51.9-159.3-34.8 1.1 1.3 202.3 46.6 396.4 124.3 577.3 223.2 702.9 291.9 822.7 371.4 935.8 459.5V458.5C822.5 370.2 702.5 290.6 576.6 221.9 395.6 122.9 201.3 45.2 0 0' fill-opacity='0.08'/%3E %3C/g%3E %3C/svg%3E"); --black: #000000; --violet: #7D39EB; --lime: #C6FF33; --white: #FFFFFF; --ar-display: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif; --ar-text: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif; --lat: 'Archivo', 'IBM Plex Sans Arabic', sans-serif; --wrap: 1240px; --gut: clamp(20px, 4.6vw, 52px); --sec: clamp(84px, 11vw, 150px); --r-s: 10px; --r: 16px; --r-l: 24px; --nav-h: 64px; --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ── أساس ── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 28px); background: var(--black); } body { margin: 0; background: var(--black); color: var(--white); font-family: var(--ar-text); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--lime); color: var(--black); } :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; } .fld-w :focus-visible, .fld-l :focus-visible { outline-color: var(--violet); } [hidden] { display: none !important; } /* الزخارف (الباترن) تفيض خارج الأقسام عمداً — نقصّها أفقياً دون كسر العناصر اللاصقة */ main, footer { overflow-x: hidden; overflow-x: clip; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ltr { direction: ltr; unicode-bidi: isolate; } html { scrollbar-color: #2a2a2a var(--black); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: #262626; border-radius: 10px; border: 2px solid var(--black); } ::-webkit-scrollbar-thumb:hover { background: var(--violet); } /* ═════════ الحقول اللونية ═════════ كل حقل يعرّف متغيراته، فالمكوّنات داخله تتلوّن تلقائياً دون استثناءات. */ .fld-k, .fld-v, .fld-l, .fld-w { background: var(--bg); color: var(--fg); position: relative; } .fld-k { --bg: var(--black); --fg: var(--white); --fg2: rgba(255,255,255,.66); --fg3: rgba(255,255,255,.42); --line: rgba(255,255,255,.14); --line2: rgba(255,255,255,.26); --surf: rgba(255,255,255,.055); --surf2: rgba(255,255,255,.1); --btn-bg: var(--lime); --btn-fg: var(--black); --ic-bg: var(--black); --ic-fg: var(--lime); --hl-bg: var(--lime); --hl-fg: var(--black); --pop: var(--lime); --pop2: var(--violet); --pat: var(--violet); } .fld-v { --bg: var(--violet); --fg: var(--white); --fg2: rgba(255,255,255,.82); --fg3: rgba(255,255,255,.58); --line: rgba(255,255,255,.26); --line2: rgba(255,255,255,.44); --surf: rgba(0,0,0,.14); --surf2: rgba(0,0,0,.24); --btn-bg: var(--lime); --btn-fg: var(--black); --ic-bg: var(--black); --ic-fg: var(--lime); --hl-bg: var(--lime); --hl-fg: var(--black); --pop: var(--lime); --pop2: var(--black); --pat: var(--white); } .fld-l { --bg: var(--lime); --fg: var(--black); --fg2: rgba(0,0,0,.7); --fg3: rgba(0,0,0,.48); --line: rgba(0,0,0,.18); --line2: rgba(0,0,0,.34); --surf: rgba(0,0,0,.06); --surf2: rgba(0,0,0,.11); --btn-bg: var(--black); --btn-fg: var(--white); --ic-bg: var(--lime); --ic-fg: var(--black); --hl-bg: var(--black); --hl-fg: var(--lime); --pop: var(--violet); --pop2: var(--black); --pat: var(--black); } .fld-w { --bg: var(--white); --fg: var(--black); --fg2: rgba(0,0,0,.64); --fg3: rgba(0,0,0,.42); --line: rgba(0,0,0,.12); --line2: rgba(0,0,0,.24); --surf: rgba(0,0,0,.035); --surf2: rgba(0,0,0,.07); --btn-bg: var(--black); --btn-fg: var(--white); --ic-bg: var(--lime); --ic-fg: var(--black); --hl-bg: var(--lime); --hl-fg: var(--black); --pop: var(--violet); --pop2: var(--black); --pat: var(--violet); } /* نسيج الحبيبات: ساكن، طبقة واحدة داخل الحقل (بلا مزج ولا فلاتر) */ .grain { isolation: isolate; } .grain::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(grain.png) repeat; background-size: 128px 128px; opacity: var(--grain, .55); } .fld-w.grain { --grain: .38; } .fld-l.grain { --grain: .5; } /* الباترن: خطوط موجية تتلوّن بلون الحقل (قناع SVG). كل مجموعة مثبّتة على الزاوية التي تنقطع عندها خطوطها فلا يظهر طرف مقصوص داخل التصميم، ومواضعها فيزيائية (يمين/يسار) لا منطقية — فتبقى صحيحة في العربي والإنجليزي. tr/tl = الموجة العلوية (b) ، br/bl = الموجة السفلية (a). الإزاحة --x/--y بالسالب فقط. */ .pat { position: absolute; pointer-events: none; z-index: -1; width: var(--w, 520px); background: var(--pat); opacity: var(--pat-o, .5); -webkit-mask: var(--pat-src) no-repeat 0 0 / 100% 100%; mask: var(--pat-src) no-repeat 0 0 / 100% 100%; } .pat.tr, .pat.tl { --pat-src: var(--pat-b-img); aspect-ratio: 2235 / 2179; top: var(--y, 0); } .pat.tr { right: var(--x, 0); } .pat.tl { left: var(--x, 0); transform: scaleX(-1); } .pat.bl, .pat.br { --pat-src: var(--pat-a-img); aspect-ratio: 2147 / 3499; bottom: var(--y, 0); } .pat.bl { left: var(--x, 0); } .pat.br { right: var(--x, 0); transform: scaleX(-1); } /* قلب الموجة (أكثف الخطوط) يُدفع خارج الحافة فيبقى الظاهر خطوطاً رشيقة فقط */ .pat.tr { translate: 5% -5%; } .pat.tl { translate: -5% -5%; } .pat.bl { translate: -6% 6%; } .pat.br { translate: 6% 6%; } /* باترن جانبي: يظهر فقط حيث توجد مساحة فاضية واسعة (ديسكتوب)، وطرفه الداخلي يتلاشى بدل أن ينقطع */ .pat.side { display: none; } @media (min-width: 1000px) { .pat.side { display: block; } } [dir="ltr"] .pat.side.bl { left: auto; right: var(--x, 0); transform: scaleX(-1); translate: 6% 6%; } .pat.fade { -webkit-mask: var(--pat-src) no-repeat 0 0 / 100% 100%, linear-gradient(0deg, transparent 3%, #000 22%); -webkit-mask-composite: source-in; mask: var(--pat-src) no-repeat 0 0 / 100% 100%, linear-gradient(0deg, transparent 3%, #000 22%); mask-composite: intersect; } .pat.fade-t { -webkit-mask: var(--pat-src) no-repeat 0 0 / 100% 100%, linear-gradient(180deg, transparent 3%, #000 22%); -webkit-mask-composite: source-in; mask: var(--pat-src) no-repeat 0 0 / 100% 100%, linear-gradient(180deg, transparent 3%, #000 22%); mask-composite: intersect; } /* الوصلات: تدرّج محبّب بين حقلين متجاورين (نفس روح لوحة الألوان) */ .seam { position: relative; height: clamp(84px, 13vw, 200px); isolation: isolate; overflow: hidden; } .seam::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(grain.png) repeat; background-size: 128px; opacity: .6; } .seam.k-v { background: linear-gradient(180deg, var(--black), var(--violet)); background: linear-gradient(in oklab 180deg, var(--black), var(--violet)); } .seam.v-l { background: linear-gradient(180deg, var(--violet), var(--lime)); } .seam.l-w { background: linear-gradient(180deg, var(--lime), var(--white)); background: linear-gradient(in oklab 180deg, var(--lime), var(--white)); } .seam.v-l-w { height: clamp(120px, 18vw, 260px); background: linear-gradient(180deg, var(--violet), var(--lime) 50%, var(--white)); background: linear-gradient(in oklab 180deg, var(--violet), var(--lime) 50%, var(--white)); } .seam.w-v { background: linear-gradient(180deg, var(--white), var(--violet)); background: linear-gradient(in oklab 180deg, var(--white), var(--violet)); } .seam.w-l-v { height: clamp(120px, 18vw, 260px); background: linear-gradient(180deg, var(--white), var(--lime) 50%, var(--violet)); background: linear-gradient(in oklab 180deg, var(--white), var(--lime) 50%, var(--violet)); } .seam.v-w { background: linear-gradient(180deg, var(--violet), var(--white)); background: linear-gradient(in oklab 180deg, var(--violet), var(--white)); } .seam.k-w { background: linear-gradient(180deg, var(--black), var(--white)); } .seam.w-k { background: linear-gradient(180deg, var(--white), var(--black)); } .seam.k-l { background: linear-gradient(180deg, var(--black), var(--lime)); } .seam.v-k { background: linear-gradient(180deg, var(--violet), var(--black)); background: linear-gradient(in oklab 180deg, var(--violet), var(--black)); } .seam .pat { z-index: 1; } /* ═════════ تخطيط ═════════ */ .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); position: relative; } .sec { padding-block: var(--sec); position: relative; } .sec.tight { padding-block: clamp(56px, 7vw, 96px); } .sec.flush-top { padding-top: clamp(24px, 3vw, 40px); } .sec.flush-bot { padding-bottom: clamp(24px, 3vw, 40px); } /* ═════════ الطباعة ═════════ */ .d1 { font-family: var(--ar-display); font-weight: 900; letter-spacing: -.005em; font-size: clamp(2.55rem, 10.4vw, 6.1rem); line-height: 1.26; } .d1 .ln { display: block; } .d1 .dim { color: var(--fg3); font-size: .56em; line-height: 1.5; margin-bottom: .1em; } .d1 .ln + .ln.dim { margin-top: .45em; margin-bottom: 0; } .h2 { font-family: var(--ar-display); font-weight: 800; font-size: clamp(1.95rem, 5.6vw, 3.55rem); line-height: 1.32; letter-spacing: -.004em; text-wrap: balance; } .h3 { font-family: var(--ar-display); font-weight: 800; font-size: clamp(1.14rem, 2.2vw, 1.36rem); line-height: 1.55; } .lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.95; color: var(--fg2); max-width: 36rem; } .txt { font-size: .95rem; line-height: 1.9; color: var(--fg2); } .small { font-size: .84rem; line-height: 1.8; color: var(--fg3); } .num { font-family: var(--lat); font-stretch: 118%; font-weight: 800; letter-spacing: -.02em; font-feature-settings: 'tnum' 1, 'lnum' 1; direction: ltr; unicode-bidi: isolate; } :where([dir="rtl"]) .num { text-align: right; } .lat { font-family: var(--lat); font-stretch: 112%; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; direction: ltr; unicode-bidi: isolate; } /* تظليل «قلم التحديد»: الشريط يغطي منطقة الحروف فقط فلا يتعدّى على السطر المجاور */ .hl { color: var(--hl-fg); padding: 0 .16em; margin: 0 -.02em; background: linear-gradient(180deg, transparent 17%, var(--hl-bg) 17%, var(--hl-bg) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .d1 .hl { display: inline-block; line-height: 1.12; padding: .04em .15em .15em; margin-block: .05em; background: var(--hl-bg); } .pop { color: var(--pop); } .u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--line2); transition: text-decoration-color .25s; } .u:hover { text-decoration-color: currentColor; } /* رأس القسم التحريري: رقم · اسم · خط شعري · رمز */ .sh { margin-bottom: clamp(30px, 4.6vw, 56px); max-width: 52rem; } .sh-meta { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 2.4vw, 26px); } .sh-n { font-family: var(--lat); font-stretch: 120%; font-weight: 800; font-size: 13px; color: var(--pop); direction: ltr; } .sh-t { font-size: 13px; font-weight: 700; color: var(--fg); white-space: nowrap; } .sh-rule { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 24px; transform-origin: right; } [dir="ltr"] .sh-rule { transform-origin: left; } .sh-code { color: var(--fg3); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sh .lede { margin-top: 14px; } .sh.wide { max-width: none; } /* ═════════ الأزرار ═════════ */ .btn { --h: 58px; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--h); padding-inline: 24px 9px; border-radius: 14px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--ar-text); font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap; transition: transform .2s var(--ease), background-color .25s, box-shadow .35s var(--ease); -webkit-tap-highlight-color: transparent; } .btn .ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--ic-bg); color: var(--ic-fg); transition: transform .45s var(--ease-out); } .btn .ic svg { width: 20px; height: 20px; } .btn:hover { box-shadow: 0 14px 34px -18px var(--btn-bg); } .btn:hover .ic { transform: rotate(-10deg) scale(1.05); } .btn:active { transform: scale(.975); } .btn.sm { --h: 48px; font-size: 14.5px; padding-inline: 18px 7px; border-radius: 12px; gap: 12px; } .btn.sm .ic { width: 34px; height: 34px; border-radius: 9px; } .btn.sm .ic svg { width: 17px; height: 17px; } .btn.block { width: 100%; } .btn.block > span:not(.ic) { white-space: normal; min-width: 0; line-height: 1.35; } .btn-line { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding-inline: 22px; border-radius: 14px; border: 1.5px solid var(--line2); color: var(--fg); font-weight: 700; font-size: 15.5px; white-space: nowrap; transition: border-color .25s, background-color .25s, color .25s; } .btn-line:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); } .btn-line svg { width: 16px; height: 16px; } [dir="ltr"] svg.flip { transform: scaleX(-1); } .bts .ic svg { width: 20px; height: 20px; } .toast .x svg { width: 15px; height: 15px; } .arr { display: inline-block; transition: transform .35s var(--ease-out); } [dir="ltr"] .arr { transform: scaleX(-1); } a:hover > .arr, .go:hover .arr { transform: translateX(-5px); } [dir="ltr"] a:hover > .arr, [dir="ltr"] .go:hover .arr { transform: scaleX(-1) translateX(-5px); } /* ═════════ شريط التقدّم + التنقّل ═════════ */ #ey-progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 120; background: var(--lime); transform-origin: right; transform: scaleX(0); pointer-events: none; } [dir="ltr"] #ey-progress { transform-origin: left; } .nav { position: fixed; top: 10px; inset-inline: 10px; z-index: 100; } .nav-in { max-width: calc(var(--wrap) + 28px); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-inline: 16px 8px; border-radius: 16px; color: var(--white); background: rgba(0,0,0,.74); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); transition: background-color .3s, border-color .3s; } .nav.scrolled .nav-in { background: rgba(0,0,0,.86); border-color: rgba(255,255,255,.14); } .nav-logo { display: flex; align-items: center; flex: none; color: var(--white); } .nav-logo svg { height: 34px; width: auto; } .nav-links { display: none; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; } .nav-links a { color: rgba(255,255,255,.66); position: relative; padding-block: 6px; transition: color .2s; } .nav-links a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); } .nav-links a:hover, .nav-links a[aria-current] { color: var(--white); } .nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); } .nav-act { display: flex; align-items: center; gap: 8px; } .nav-lang { height: 42px; min-width: 44px; padding-inline: 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.18); font-family: var(--lat); font-weight: 800; font-size: 12px; letter-spacing: .08em; color: var(--white); transition: border-color .2s, background-color .2s; } .nav-lang:hover { border-color: var(--white); } .nav-wa { height: 42px; display: inline-flex; align-items: center; gap: 9px; padding-inline: 12px; border-radius: 11px; background: var(--lime); color: var(--black); font-weight: 700; font-size: 14px; transition: transform .2s var(--ease); } .nav-wa svg { width: 19px; height: 19px; } .nav-wa span { display: none; } .nav-wa:active { transform: scale(.96); } .nav-burger { width: 44px; height: 42px; border-radius: 11px; display: grid; place-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.18); } .nav-burger i { display: block; width: 18px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .35s var(--ease-out); } .nav-burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); } .nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); } @media (min-width: 560px) { .nav-wa span { display: inline; } } @media (min-width: 1000px) { .nav { top: 14px; inset-inline: 18px; } .nav-links { display: flex; } .nav-burger { display: none; } .nav-in { padding-inline: 22px 10px; } } /* قائمة الجوال */ .menu { position: fixed; inset: 0; z-index: 95; padding: calc(var(--nav-h) + 40px) var(--gut) 34px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease-out), visibility 0s .6s; } .menu.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease-out), visibility 0s; } .menu-links { display: grid; gap: 2px; } .menu-links a { display: flex; align-items: baseline; gap: 14px; padding-block: 10px; border-bottom: 1px solid var(--line); font-family: var(--ar-display); font-weight: 800; font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1.45; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .55s var(--ease-out); } .menu-links a .num { font-size: 12px; color: var(--lime); font-weight: 800; } .menu.open .menu-links a { opacity: 1; transform: none; } .menu.open .menu-links a:nth-child(2) { transition-delay: .05s; } .menu.open .menu-links a:nth-child(3) { transition-delay: .1s; } .menu.open .menu-links a:nth-child(4) { transition-delay: .15s; } .menu.open .menu-links a:nth-child(5) { transition-delay: .2s; } .menu.open .menu-links a:nth-child(6) { transition-delay: .25s; } .menu-foot { display: grid; gap: 22px; margin-top: 36px; } html.menu-lock, html.menu-lock body { overflow: hidden; } /* ═════════ شريط الألوان (توقيع الهوية) ═════════ */ .palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); direction: ltr; } .palette span { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 76px; padding: 12px; font-family: var(--lat); font-stretch: 112%; font-weight: 700; font-size: 10px; letter-spacing: .1em; line-height: 1.3; direction: ltr; text-align: left; } .palette span b { font-weight: 800; font-size: 12px; letter-spacing: .02em; font-stretch: 100%; } .palette .p-k { background: var(--black); color: var(--white); } .palette .p-v { background: var(--violet); color: var(--white); } .palette .p-l { background: var(--lime); color: var(--black); } .palette .p-w { background: var(--white); color: var(--black); } @media (max-width: 360px) { .palette span { padding: 10px 8px; font-size: 8.5px; letter-spacing: .04em; } .palette span b { font-size: 11px; } } .chips4 { display: inline-flex; gap: 4px; direction: ltr; } .chips4 i { width: 9px; height: 9px; border-radius: 2px; display: block; } .chips4 i:nth-child(1) { background: var(--black); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .chips4 i:nth-child(2) { background: var(--violet); } .chips4 i:nth-child(3) { background: var(--lime); } .chips4 i:nth-child(4) { background: var(--white); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); } /* علامات التسجيل (+) على أطراف الإطارات — لمسة طباعية */ .regs { position: absolute; inset: -9px; pointer-events: none; z-index: 3; } .regs::before, .regs::after, .regs i::before, .regs i::after { content: '+'; position: absolute; font: 400 16px/1 var(--lat); color: var(--fg3); } .regs::before { top: 0; left: 0; } .regs::after { top: 0; right: 0; } .regs i::before { bottom: 0; left: 0; } .regs i::after { bottom: 0; right: 0; } /* ═════════ الهيرو ═════════ */ .hero { padding-top: calc(var(--nav-h) + 58px); padding-bottom: clamp(56px, 8vw, 96px); overflow: hidden; } .hero-grid { display: grid; gap: clamp(40px, 6vw, 64px); align-items: end; } .hero-meta { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(20px, 3vw, 30px); font-size: 13px; font-weight: 600; color: var(--fg2); } .live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; } .live::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--lime); opacity: 0; animation: live 2.2s var(--ease) infinite; } @keyframes live { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .hero .lede { margin-top: clamp(28px, 3.4vw, 42px); max-width: 33rem; text-wrap: pretty; } .hero .hero-meta { margin: 18px 0 0; font-size: 12.5px; color: var(--fg3); } /* العنوان: سطر تمهيدي هادئ ثم سطران بوزن واحد، والكلمة الأخيرة بالليموني مع خط موجي يُرسم */ .hero-h .kick { display: flex; align-items: center; gap: 14px; margin-bottom: .55em; font-family: var(--ar-text); font-weight: 600; font-size: clamp(1.02rem, 1.9vw, 1.3rem); line-height: 1.6; letter-spacing: 0; color: var(--fg2); } .hero-h .kick::before { content: ''; flex: none; width: 34px; height: 2px; border-radius: 2px; background: var(--lime); } .swash { position: relative; display: inline-block; color: var(--lime); } .swash svg { position: absolute; left: -2%; width: 104%; bottom: -.36em; height: .24em; overflow: visible; pointer-events: none; } .swash path { fill: none; stroke: var(--violet); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: swash 1.2s var(--ease-out) .7s forwards; } @keyframes swash { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .swash path { animation: none; stroke-dashoffset: 0; } } .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3.6vw, 36px); } .hero-proof { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--line); } .hero-proof li { flex: 1 1 0; min-width: 0; padding-top: 14px; padding-inline-end: 12px; } .hero-proof li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 14px; } .hero-proof .num { display: block; font-size: clamp(1.45rem, 4.4vw, 2rem); line-height: 1.1; color: var(--fg); } .hero-proof span { display: block; font-size: 12px; color: var(--fg3); margin-top: 6px; line-height: 1.45; } @media (min-width: 960px) { .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 56px; display: flex; align-items: flex-end; } .hero > .wrap { width: 100%; } .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; } .hero .d1 { font-size: clamp(3.4rem, 5.9vw, 5.9rem); } } /* ═════════ الهيرو: بوست إنستقرام بأعمالنا ═════════ */ .ig-wrap { position: relative; width: min(100%, 360px); margin-inline: auto; padding: 16px 12px 30px; } .ig-deck { position: absolute; inset: 16px 12px 30px; border-radius: 24px; transition: transform .7s var(--ease-out); } .ig-deck.d-v { background: var(--violet); transform: rotate(7deg) translate(14px, 8px); } .ig-deck.d-l { background: var(--lime); transform: rotate(-6deg) translate(-16px, 14px); } .ig-wrap:hover .ig-deck.d-v { transform: rotate(10deg) translate(22px, 6px); } .ig-wrap:hover .ig-deck.d-l { transform: rotate(-9deg) translate(-24px, 16px); } .igc { position: relative; background: #fff; color: #000; border-radius: 22px; overflow: hidden; direction: rtl; box-shadow: 0 50px 90px -46px rgba(0,0,0,.95); transform: rotate(-1.6deg); transition: transform .7s var(--ease-out); } [dir="ltr"] .igc { direction: ltr; } .ig-wrap:hover .igc { transform: rotate(0); } .igc-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; } .igc-av { width: 38px; height: 38px; flex: none; border-radius: 50%; padding: 2px; background: var(--white); } .igc-av i { width: 100%; height: 100%; border-radius: 50%; background: #000; border: 2px solid #fff; display: grid; place-items: center; color: var(--white); } .igc-av svg { width: 24px; height: auto; } .igc-id { flex: 1 1 auto; min-width: 0; line-height: 1.25; } .igc-id b { display: flex; align-items: center; gap: 4px; font-family: var(--lat); font-stretch: 100%; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; } .igc-id b svg { width: 14px; height: 14px; color: var(--violet); } .igc-id small { display: block; font-size: 11.5px; color: rgba(0,0,0,.55); margin-top: 1px; } .igc-more { display: flex; gap: 3px; } .igc-more i { width: 4px; height: 4px; border-radius: 50%; background: #000; } .igc-media { position: relative; aspect-ratio: 4 / 5; background: #0d0d0d; overflow: hidden; cursor: pointer; } .igc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity .9s var(--ease), transform 4s var(--ease-out); } .igc-media img.on { opacity: 1; transform: scale(1); } .igc-count { position: absolute; top: 11px; left: 11px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-weight: 700; } .igc-pop { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: 2; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 8px 22px rgba(0,0,0,.4)); } .igc-pop.go { animation: igPop 1s var(--ease-out); } @keyframes igPop { 0% { opacity: 0; transform: scale(.35); } 24% { opacity: 1; transform: scale(1.12); } 56% { opacity: 1; transform: scale(.94); } 100% { opacity: 0; transform: scale(1); } } .igc-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--lime); color: #000; font-weight: 700; font-size: 14px; } .igc-cta:hover .arr { transform: translateX(-5px); } .igc-acts { display: flex; align-items: center; gap: 14px; padding: 11px 13px 5px; } .igc-acts svg { width: 23px; height: 23px; } .igc-acts .liked { color: var(--violet); } .igc-dots { display: flex; gap: 4px; margin-inline: auto; direction: ltr; } .igc-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.18); transition: background-color .3s, transform .3s; } .igc-dots i.on { background: var(--violet); transform: scale(1.2); } .igc-likes { padding: 0 13px; font-size: 13px; font-weight: 700; display: flex; gap: 5px; align-items: baseline; } .igc-likes .num { font-size: 13.5px; font-stretch: 100%; } .igc-cap { padding: 3px 13px 14px; font-size: 13px; line-height: 1.65; color: rgba(0,0,0,.82); min-height: 3.6em; } .igc-cap b { font-family: var(--lat); font-stretch: 100%; margin-inline-end: 6px; color: #000; } @media (min-width: 960px) { .ig-wrap { width: min(100%, 340px); margin-inline: auto 0; } [dir="ltr"] .ig-wrap { margin-inline: 0 auto; } } @media (prefers-reduced-motion: reduce) { .igc-media img { transition: opacity .4s; transform: none; } } /* ═════════ شريط عرض الافتتاح: موجة ═════════ */ .seam.has-wave { height: clamp(190px, 24vw, 320px); } .wave { position: absolute; left: 0; top: 50%; z-index: 2; width: 100%; height: clamp(150px, 19vw, 250px); transform: translateY(-50%); direction: ltr; overflow: visible; } .wave .edge { fill: none; stroke: #000; stroke-width: 66; } .wave .band { fill: none; stroke: var(--lime); stroke-width: 58; } .wave .thread { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 4 10; } .wave text { font-family: var(--ar-display); font-weight: 800; font-size: 29px; fill: #000; dominant-baseline: central; } /* ═════════ الخدمات: ثلاث بطاقات واضحة ═════════ */ .svc-cards { display: grid; gap: 14px; } @media (min-width: 900px) { .svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } .scard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; isolation: isolate; transition: transform .55s var(--ease-out); } .scard:hover { transform: translateY(-6px); } .scard-vis { position: relative; height: 250px; overflow: hidden; border-bottom: 1px solid var(--line); } @media (min-width: 900px) { .scard-vis { height: 280px; } } .scard-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px; } .scard-no { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--fg2); } .scard-no .num { color: var(--fg); font-size: 13px; } .scard-no::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); } .scard-t { margin-top: 12px; font-family: var(--ar-display); font-weight: 800; font-size: clamp(1.65rem, 5.4vw, 2.15rem); line-height: 1.35; } .scard-d { margin-top: 8px; margin-bottom: 22px; font-size: .93rem; line-height: 1.85; color: var(--fg2); } .scard-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .scard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; } .scard-price .num { font-size: min(3.5rem, 17cqi); line-height: .95; font-stretch: 122%; } /* إذا ضاق سطر السعر تنزل العملة تحت الرقم في البطاقات كلها معاً، فتبقى الخطوط الفاصلة على مستوى واحد */ .scard-foot { container-type: inline-size; } @container (max-width: 341px) { .scard-price .num + small { flex-basis: 100%; } } @container (max-width: 367px) { [dir="ltr"] .scard-price .num + small { flex-basis: 100%; } } .scard-price small { font-size: 13px; font-weight: 700; color: var(--fg2); } .scard-price .note { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--fg3); margin-top: 4px; } .scard-go { width: 50px; height: 50px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); transition: transform .45s var(--ease-out); } .scard-go svg { width: 21px; height: 21px; } .scard:hover .scard-go { transform: rotate(-12deg) scale(1.05); } .vis-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 9px; border-radius: 8px; background: #000; color: var(--lime); font-size: 10.5px; } /* الفيديو: هاتفان صغيران */ .vis-video .mp { position: absolute; top: 22px; left: 50%; width: 118px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; border: 3px solid #000; box-shadow: 0 26px 40px -22px rgba(0,0,0,.7); transition: transform .6s var(--ease-out); } .vis-video .mp picture { display: block; width: 100%; height: 100%; } .vis-video .mp img { width: 100%; height: 100%; object-fit: cover; } .vis-video .mp.a { margin-left: -92px; transform: rotate(-6deg); z-index: 2; } .vis-video .mp.b { margin-left: -18px; transform: rotate(7deg) translateY(14px); } .scard:hover .vis-video .mp.a { transform: rotate(-10deg) translateX(-12px); } .scard:hover .vis-video .mp.b { transform: rotate(11deg) translate(12px, 10px); } .vis-video .play { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--lime); color: #000; display: grid; place-items: center; } .vis-video .play svg { width: 13px; height: 13px; margin-left: 2px; } .vis-video .bar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; } .vis-video .bar i { display: block; height: 100%; width: 40%; background: var(--lime); animation: prog 6s linear infinite; } .vis-video .vis-chip.c1 { top: 16px; right: 16px; } .vis-video .vis-chip.c2 { bottom: 16px; left: 16px; } /* البوستر: مروحة من ثلاثة */ .vis-posters img { position: absolute; top: 26px; left: 50%; width: 124px; margin-left: -62px; aspect-ratio: 1328 / 1760; object-fit: cover; border-radius: 10px; box-shadow: 0 26px 40px -20px rgba(0,0,0,.55); transition: transform .6s var(--ease-out); } .vis-posters img:nth-child(1) { transform: translateX(-80px) translateY(16px) rotate(-11deg); } .vis-posters img:nth-child(2) { z-index: 2; } .vis-posters img:nth-child(3) { transform: translateX(80px) translateY(16px) rotate(11deg); } .scard:hover .vis-posters img:nth-child(1) { transform: translateX(-96px) translateY(10px) rotate(-15deg); } .scard:hover .vis-posters img:nth-child(2) { transform: translateY(-8px); } .scard:hover .vis-posters img:nth-child(3) { transform: translateX(96px) translateY(10px) rotate(15deg); } .vis-posters .vis-chip { top: 16px; right: 16px; z-index: 4; } /* الباقة: تقويم شهر فيه البوسترات والفيديوهات موزّعة على الأيام */ .vis-cal { display: grid; place-items: center; } .cal-stack { position: relative; width: 238px; transform: rotate(-4deg); transition: transform .6s var(--ease-out); } .scard:hover .cal-stack { transform: rotate(0) scale(1.03); } .cal-stack::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: var(--violet); transform: rotate(8deg) translate(12px, 8px); transition: transform .6s var(--ease-out); } .scard:hover .cal-stack::before { transform: rotate(11deg) translate(18px, 6px); } .cal { position: relative; padding: 12px 12px 13px; border-radius: 16px; background: #000; color: #fff; box-shadow: 0 30px 50px -28px rgba(0,0,0,.6); } .cal-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; } .cal-h b { font-family: var(--ar-display); font-size: 13px; font-weight: 800; } .cal-h .chip { font-size: 9.5px; line-height: 1; padding: 5px 7px; border-radius: 6px; background: var(--lime); color: #000; } .cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-w i { font-style: normal; font-size: 9px; text-align: center; color: rgba(255,255,255,.45); font-weight: 700; } .cal-g { margin-top: 6px; } .cal-g span { position: relative; aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; } .cal-g .p img { width: 100%; height: 100%; object-fit: cover; } .cal-g .v { background: var(--lime); display: grid; place-items: center; } .cal-g .v::after { content: ''; border-left: 6px solid #000; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 2px; } .cal-g .t { box-shadow: inset 0 0 0 1.5px var(--lime); } .cal-f { display: flex; gap: 12px; margin-top: 10px; font-size: 9.5px; color: rgba(255,255,255,.6); font-weight: 700; } .cal-f i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; background: rgba(255,255,255,.3); } .cal-f .fv i { background: var(--lime); } .vis-cal .vis-chip { top: 16px; right: 16px; } /* ═════════ شريط العملاء ═════════ */ .logos { border-block: 1px solid var(--line); padding-block: 22px; } .logos-in { display: flex; align-items: center; gap: 24px; } .logos-t { flex: none; max-width: 7.5rem; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--fg3); } .marq { overflow: hidden; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marq-track { display: flex; align-items: center; width: max-content; animation: marqL 38s linear infinite; } .marq-track > * { margin-inline-end: 56px; flex: none; } @keyframes marqL { to { transform: translateX(-50%); } } .logo-t { color: rgba(255,255,255,.5); font-size: 20px; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; } /* ═════════ عرض الفيديو (فيد) ═════════ */ .show-grid { display: grid; gap: 44px; } .feed { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .phone { position: relative; width: 100%; border-radius: 30px; overflow: hidden; background: #0d0d0d; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px -40px rgba(125,57,235,.55); } .phone video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #111; } .phone .shade { position: absolute; inset-inline: 0; bottom: 0; height: 36%; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); pointer-events: none; } .phone .acts { position: absolute; inset-inline-end: 10px; bottom: 76px; display: grid; gap: 14px; justify-items: center; color: #fff; text-align: center; } [dir="rtl"] .phone .acts { inset-inline-end: auto; right: 10px; } .phone .acts svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .phone .acts span { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; font-family: var(--lat); } .phone .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 14px 16px 18px; padding-right: 54px; color: #fff; direction: rtl; text-align: right; } .phone .cap b { display: block; font-size: 14px; } .phone .cap span { display: block; font-size: 12px; opacity: .9; margin-top: 2px; line-height: 1.55; } .phone .cap i { display: block; font-style: normal; font-size: 11px; opacity: .7; margin-top: 4px; } .phone .bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.2); } .phone .bar i { display: block; height: 100%; width: 0; background: var(--lime); animation: prog 9s linear infinite; } @keyframes prog { to { width: 100%; } } .phone .tag { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; height: 26px; padding-inline: 10px; display: inline-flex; align-items: center; border-radius: 7px; background: var(--lime); color: var(--black); font-size: 10px; } .feed .phone:nth-child(2) { margin-top: 40px; } @media (max-width: 959px) { .phone { border-radius: 20px; } [dir="rtl"] .phone .acts, .phone .acts { right: 6px; bottom: 56px; gap: 9px; } [dir="ltr"] .phone .acts { right: 6px; } .phone .acts svg { width: 18px; height: 18px; } .phone .acts span { font-size: 9px; } .phone .cap { padding: 10px 10px 12px; padding-right: 32px; } .phone .cap b { font-size: 11px; } .phone .cap span { font-size: 10px; line-height: 1.5; } .phone .cap i { display: none; } .phone .tag { top: 9px; inset-inline-start: 9px; height: 20px; padding-inline: 7px; font-size: 8px; letter-spacing: .08em; } } .show-links { display: grid; gap: 14px; margin-top: 28px; } .bts { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surf); transition: border-color .25s, background-color .25s; } .bts:hover { border-color: var(--pop); background: var(--surf2); } .bts b { display: block; font-family: var(--ar-display); font-weight: 800; font-size: 1rem; } .bts span { display: block; font-size: .86rem; color: var(--fg2); margin-top: 2px; line-height: 1.6; } .bts .ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--lime); color: var(--black); font-size: 18px; } @media (min-width: 960px) { .show-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; } .show-copy { position: sticky; top: calc(var(--nav-h) + 60px); } .feed { gap: 22px; width: 100%; max-width: 530px; justify-self: center; } .feed .phone:nth-child(2) { margin-top: 90px; } } /* ═════════ البوسترات: شريط متحرك + عارض ═════════ */ .posters { overflow: hidden; } /* شريط المعرض: خط رفيع بتسميات فوقه وتحته يؤطّر الأعمال */ .pmarq-head { display: flex; align-items: center; gap: 14px; margin-bottom: -10px; } .pmarq-head i { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); } .pmarq-head .lat { color: rgba(255,255,255,.78); } .pmarq-foot { margin-top: -14px; display: flex; align-items: center; gap: 14px; } .pmarq-foot .lat { color: rgba(255,255,255,.62); white-space: nowrap; } .pmarq-foot i { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); } .pmarq { position: relative; overflow: hidden; padding-block: 42px 54px; } .pmarq-track { display: flex; width: max-content; animation: pmarqRtl 72s linear infinite; } [dir="ltr"] .pmarq-track { animation-name: pmarqLtr; } @keyframes pmarqRtl { to { transform: translateX(50%); } } @keyframes pmarqLtr { to { transform: translateX(-50%); } } /* بطاقة البوستر: ثابتة، والتوهّج (بلوم) نسخة مموّهة من البوستر نفسه خلفه */ .pcard { position: relative; flex: none; height: clamp(230px, 26vw, 320px); margin: 0; margin-inline-end: 22px; padding: 0; } .pcard .pimg { position: relative; z-index: 1; display: block; height: 100%; width: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 22px 40px -24px rgba(0,0,0,.7); } .pcard .pbloom { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; filter: blur(32px) saturate(1.8) brightness(1.15); opacity: .95; transform: translateY(12px) scale(1.05); pointer-events: none; } @media (max-width: 640px) { .pcard { height: 215px; margin-inline-end: 16px; } .pcard .pimg { border-radius: 10px; } .pcard .pbloom { filter: blur(20px) saturate(1.8) brightness(1.15); transform: translateY(8px) scale(1.05); } .pmarq-track { animation-duration: 54s; } } @media (prefers-reduced-motion: reduce) { .pmarq { overflow-x: auto; scrollbar-width: none; } .pmarq-track { animation: none; } } .pos-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); } .pos-price { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; } /* جملة «من صورة منتجك فقط»: سطر كامل تحت السعر والزر، وتصير بجانب الـ39 على الشاشات الواسعة */ .pos-note { order: 3; flex-basis: 100%; padding-inline-start: 14px; border-inline-start: 2px solid var(--lime); font-size: .98rem; line-height: 1.8; color: rgba(255,255,255,.9); text-wrap: pretty; } .pos-note b { color: var(--fg); font-weight: 800; } .pos-line > .btn { order: 2; } @media (min-width: 1180px) { .pos-line { flex-wrap: nowrap; } .pos-note { order: 1; flex: 1 1 auto; max-width: 25rem; margin-inline-end: auto; padding-inline-start: 22px; border-inline-start: 1px solid var(--line2); } } .pos-price .num { font-size: clamp(4.2rem, 13vw, 6.6rem); line-height: .85; color: var(--lime); font-stretch: 125%; } .pos-price .t b { display: block; font-family: var(--ar-display); font-weight: 800; font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.4; } .pos-min { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 30px; padding: 4px 11px; border-radius: 9px; background: rgba(0,0,0,.22); font-size: 12.5px; font-weight: 700; } .pos-min::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); } .pmarq-zone { position: relative; } .pbadge { position: absolute; z-index: 5; top: -58px; inset-inline-end: max(var(--gut), calc((100% - var(--wrap)) / 2)); width: 132px; height: 132px; border-radius: 50%; background: var(--lime); color: #000; display: grid; place-items: center; box-shadow: 0 24px 44px -22px rgba(0,0,0,.7); transform: rotate(-8deg); } .pbadge .ring { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; animation: spin 20s linear infinite; } .pbadge .ring text { font-family: var(--lat); font-weight: 800; font-size: 11px; letter-spacing: .14em; fill: #000; } .pbadge-c { position: relative; text-align: center; line-height: 1; } .pbadge-c .num { display: block; font-size: 2.7rem; font-stretch: 125%; text-align: center; } .pbadge-c small { display: block; font-size: 10.5px; font-weight: 700; margin-top: 4px; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .pbadge { width: 100px; height: 100px; top: -22px; } .pbadge-c .num { font-size: 2.1rem; } .pbadge .ring text { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .pbadge .ring { animation: none; } } /* ═════════ الأرقام ═════════ */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--fg); } .stat { padding: 20px 4px 22px; border-bottom: 1px solid var(--line); } .stat:nth-child(odd) { border-inline-end: 1px solid var(--line); padding-inline-end: 14px; } .stat:nth-child(even) { padding-inline-start: 16px; } .stat .num { display: block; font-size: clamp(2.6rem, 11vw, 5.4rem); line-height: .95; font-stretch: 125%; font-weight: 800; } .stat .num sup { font-size: .38em; vertical-align: top; margin-inline-start: 2px; font-weight: 700; } .stat > span { display: block; margin-top: 10px; font-size: .86rem; font-weight: 600; color: var(--fg2); } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat { padding: 30px 22px 34px 0; border-bottom: 0; } .stat + .stat { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; } .stat:nth-child(odd) { border-inline-end: 0; padding-inline-end: 0; } .stat:nth-child(even) { padding-inline-start: 24px; } } .stats-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 30px; margin-bottom: 22px; } .stats-head .h2 { font-size: clamp(1.6rem, 4.4vw, 2.6rem); max-width: 30rem; } /* ═════════ المجالات ═════════ */ .split { display: grid; gap: 34px; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; } .split > .sticky { position: sticky; top: calc(var(--nav-h) + 60px); } } .ind { border-top: 1.5px solid var(--fg); } .ind li { display: flex; align-items: center; gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--line); position: relative; } .ind .num { width: 30px; font-size: 13px; color: var(--pop); flex: none; } .ind .ic { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--fg); transition: background-color .3s, border-color .3s, transform .45s var(--ease-out); } .ind .ic svg { width: 20px; height: 20px; } .ind li:hover .ic { background: var(--lime); border-color: var(--lime); transform: rotate(-8deg); } .ind-proof { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 18px; border-radius: var(--r); background: var(--black); color: var(--white); max-width: 26rem; } .ind-proof .num { font-size: 2.2rem; line-height: 1; color: var(--lime); } .ind-proof span { font-size: .9rem; font-weight: 600; line-height: 1.6; color: rgba(255,255,255,.8); } .ind b { font-family: var(--ar-display); font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.55rem); line-height: 1.4; position: relative; z-index: 1; } .ind b::before { content: ''; position: absolute; inset: 55% -4px 6% -4px; background: var(--lime); z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); } [dir="ltr"] .ind b::before { transform-origin: left; } .ind li:hover b::before { transform: scaleX(1); } .ind .tail { margin-inline-start: auto; color: var(--fg3); font-size: 18px; transition: transform .35s var(--ease-out), color .25s; } .ind li:hover .tail { color: var(--fg); transform: translateX(-6px); } [dir="ltr"] .ind li:hover .tail { transform: translateX(6px); } /* ═════════ الأسعار ═════════ */ .seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; background: var(--surf2); max-width: 100%; } .segbtn { height: 46px; padding-inline: 16px; border-radius: 12px; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--fg2); transition: background-color .25s, color .25s; } .segbtn:hover { color: var(--fg); } .segbtn.active { background: var(--black); color: var(--white); } .segbtn.active::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); margin-inline-end: 8px; vertical-align: 1px; } @media (min-width: 768px) { .segbtn { height: 50px; padding-inline: 24px; font-size: 15px; } } @media (max-width: 480px) { .seg { display: flex; width: 100%; } .segbtn { flex: 1 1 0; padding-inline: 6px; font-size: 13px; } } .price-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .svc-pane[hidden] { display: none; } .pane-anim { animation: paneIn .45s var(--ease-out) both; } @keyframes paneIn { from { opacity: 0; transform: translateY(12px); } } .calc { border-radius: var(--r-l); padding: clamp(22px, 4vw, 44px); overflow: hidden; } .calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; position: relative; } .calc-grid > * { min-width: 0; } @media (min-width: 900px) { .calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } } .offer { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 12px; border-radius: 8px; background: var(--lime); color: var(--black); font-size: 12px; font-weight: 700; line-height: 1.5; } .pills { display: flex; flex-wrap: wrap; gap: 8px; } /* مقاس الفيديو: إطار عمودي 9:16 وإطار أفقي 16:9 يوضّحان الشكل المطلوب */ .fmts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; } .fmt { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); color: var(--fg2); text-align: start; transition: border-color .25s, background-color .25s, color .25s; } .fmt:hover { border-color: var(--fg); color: var(--fg); } .fmt.active { background: var(--fg); border-color: var(--fg); color: var(--bg); } .fmt-shape { flex: none; width: 58px; height: 54px; display: grid; place-items: center; } .fmt-shape i { display: grid; place-items: center; border: 2px solid currentColor; border-radius: 6px; font-style: normal; font-size: 8px; letter-spacing: .04em; transition: background-color .25s, border-color .25s, color .25s; } .fmt-shape.v i { width: 30px; height: 54px; } .fmt-shape.h i { width: 58px; height: 33px; } .fmt.active .fmt-shape i { background: var(--lime); border-color: var(--lime); color: #000; } .fmt-t { min-width: 0; } .fmt-t b { display: block; font-family: var(--ar-display); font-weight: 800; font-size: 1rem; line-height: 1.4; } .fmt-t small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; opacity: .72; } @media (max-width: 520px) { .fmt { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 8px; text-align: center; } } .pill { height: 42px; padding-inline: 14px; border-radius: 11px; border: 1px solid var(--line2); font-size: 13px; font-weight: 700; color: var(--fg2); transition: all .25s; } .pill:hover { color: var(--fg); border-color: var(--fg); } .pill.active { background: var(--fg); color: var(--bg); border-color: var(--fg); } .dur-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 26px; } .dur-now { display: flex; align-items: baseline; gap: 8px; } .dur-now .num { font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; } .dur-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: var(--surf2); outline: none; margin-top: 18px; cursor: pointer; } .dur-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 8px; background: var(--lime); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--lime); cursor: grab; transition: transform .2s; } .dur-slider::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; } .dur-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 8px; background: var(--lime); border: 4px solid var(--bg); cursor: grab; } .dur-ends { display: flex; justify-content: space-between; margin-top: 10px; color: var(--fg3); direction: inherit; } .res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .res-card { container-type: inline-size; position: relative; border-radius: 16px; padding: 18px 16px 16px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .25s, background-color .25s; text-align: start; } .res-card:hover { border-color: var(--line2); } .res-card.active { border-color: var(--lime); background: rgba(198,255,51,.06); } .res-card .q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; color: var(--fg2); } .res-card .flag { font-size: 10px; font-weight: 700; color: var(--black); background: var(--lime); border-radius: 6px; padding: 3px 7px; line-height: 1.4; white-space: nowrap; } .res-card .old { display: block; margin-top: 14px; font-size: 13px; color: var(--fg3); text-decoration: line-through; } .res-card .p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 2px; } .res-card .p .num { font-size: min(3rem, 7vw, 25cqi); line-height: 1; } .res-card .p small { font-size: 12px; color: var(--fg2); font-weight: 700; } .inc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; font-size: 13px; color: var(--fg2); } .inc li { display: inline-flex; align-items: center; gap: 6px; } .inc li::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--lime); flex: none; } .inc .t { color: var(--fg); font-weight: 700; } .inc .t::before { display: none; } .calc .btn { margin-top: 24px; } .unit { display: flex; align-items: baseline; gap: 10px; } .unit .num { font-size: clamp(4rem, 14vw, 6.4rem); line-height: .9; color: var(--lime); font-stretch: 125%; } .qty { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: 14px; border: 1px solid var(--line2); } .qty button { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--fg); background: var(--surf2); transition: background-color .2s, color .2s; } .qty button:hover:not(:disabled) { background: var(--lime); color: var(--black); } .qty button:disabled { opacity: .28; cursor: not-allowed; } .qty .qnum { min-width: 58px; text-align: center; font-size: 1.7rem; } .total { display: flex; align-items: baseline; gap: 8px; } .total .num { font-size: clamp(2.4rem, 8vw, 3.2rem); line-height: 1; } .qrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding-block: 18px; border-block: 1px solid var(--line); } .pk-grid { display: grid; gap: 12px; } @media (min-width: 900px) { .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r-l); overflow: hidden; } } .pk { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--r-l); overflow: hidden; } @media (min-width: 900px) { .pk { border-radius: 0; padding: 32px 30px 28px; min-height: 580px; } } .pk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pk-name { font-family: var(--ar-display); font-weight: 800; font-size: 1.3rem; line-height: 1.4; } .pk-flag { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 7px; background: var(--lime); color: var(--black); white-space: nowrap; line-height: 1.3; } .pk-desc { margin-top: 6px; font-size: .88rem; color: var(--fg2); line-height: 1.75; } .pk-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 26px; } .pk-price .num { font-size: clamp(2.8rem, 9vw, 3.8rem); line-height: 1; font-stretch: 122%; } .pk-price small { font-size: 12.5px; font-weight: 700; color: var(--fg2); } .pk-price s { font-family: var(--lat); font-size: 14px; color: var(--fg3); font-weight: 600; } .pk ul { margin-top: 22px; border-top: 1px solid var(--line); } .pk li { display: flex; gap: 10px; padding-block: 11px; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.6; } .pk li::before { content: ''; width: 6px; height: 6px; margin-top: .6em; border-radius: 1.5px; background: var(--pop); flex: none; } .pk.fld-k li::before { background: var(--lime); } .pk li.muted { color: var(--fg3); } .pk-cta { margin-top: auto; padding-top: 24px; } .pk .word { position: absolute; inset-inline-end: -8px; top: 50%; font-family: var(--lat); font-weight: 800; letter-spacing: -.04em; font-size: 7rem; line-height: .8; opacity: .07; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); pointer-events: none; } .pr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; } .guar { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; font-weight: 700; } .guar li { display: inline-flex; align-items: center; gap: 7px; } .guar li::before { content: '✓'; color: var(--pop); font-weight: 800; } /* ═════════ أعمالنا: صورة واحدة تتفرّع منها خطوط إلى الفيديو والبوسترات ═════════ */ .wrap-xl { max-width: calc(1520px + var(--gut) * 2); } .tf-pts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; margin-bottom: clamp(26px, 3.4vw, 44px); } .tf-pts li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 13px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13px; font-weight: 700; } .tf-pts li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); } /* لوحة المثال + عنوانا الجهتين */ .fk { position: relative; display: grid; gap: clamp(22px, 3vw, 34px); padding: clamp(14px, 2vw, 30px); border-radius: 24px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); } .case2 .fk { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.24); } /* توهّج خلف النتائج + لمعة علوية خفيفة تمنع الإحساس بالسطح الميت */ .fk { overflow: hidden; isolation: isolate; } .fk::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 72% at 34% 52%, rgba(125,57,235,.3), transparent 72%); } .fk::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 32%); } [dir="ltr"] .fk::before { background: radial-gradient(58% 72% at 66% 52%, rgba(125,57,235,.3), transparent 72%); } .case2 .fk::before { background: radial-gradient(58% 72% at 34% 52%, rgba(198,255,51,.2), transparent 70%); } [dir="ltr"] .case2 .fk::before { background: radial-gradient(58% 72% at 66% 52%, rgba(198,255,51,.2), transparent 70%); } /* علامات تسجيل (+) في زوايا اللوحة — من عناصر الهوية */ .fk-regs { inset: 11px; z-index: 2; } /* باترن الهوية داخل اللوحة: يزحف ببطء فيعطي حياة بلا تشتيت */ .fk-pat { z-index: 0; animation: fkDrift 24s ease-in-out infinite alternate; } .fk-pat.tl { animation-duration: 30s; animation-direction: alternate-reverse; } .case2 .fk-pat.br { --pat: var(--white); } .case2 .fk-pat.tl { --pat: var(--lime); } @keyframes fkDrift { from { translate: 6% 6%; } to { translate: 2% 10%; } } @media (prefers-reduced-motion: reduce) { .fk-pat { animation: none; } } .fk-regs::before, .fk-regs::after, .fk-regs i::before, .fk-regs i::after { color: rgba(255,255,255,.34); font-size: 14px; } /* نبضة ليمونية عند نقطة خروج الخطوط من الصورة */ .fk-src::after { content: ''; position: absolute; z-index: 3; width: 13px; height: 13px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(198,255,51,.22), 0 0 18px rgba(198,255,51,.6); inset-inline-start: 50%; bottom: -7px; margin-inline-start: -6px; } .fk-src::before { content: ''; position: absolute; z-index: 2; inset-inline-start: 50%; bottom: -7px; margin-inline-start: -6px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--lime); animation: live 2.4s var(--ease) infinite; } .fk-side { position: relative; z-index: 1; display: grid; gap: 14px; min-width: 0; } .fk-ttl { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .fk-ttl b { font-family: var(--ar-display); font-weight: 800; font-size: clamp(.98rem, 1.5vw, 1.15rem); color: var(--fg); } .fk-after .fk-ttl { border-bottom-color: rgba(198,255,51,.5); } .fk-tag { display: inline-flex; align-items: center; height: 26px; padding-inline: 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 800; } .fk-tag.on { background: var(--lime); color: #000; } /* الخطوط تُرسم بجافاسكربت بين حواف الصورة والنتائج */ .fk-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .fk-lines .bl { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .fk.in .fk-lines .bl { animation: swash 1.2s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i) * .22s); } .fk-lines .ah { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .fk.in .fk-lines .ah { animation: brDot .35s var(--ease-out) forwards; animation-delay: calc(1.25s + var(--i) * .22s); } @keyframes brDot { to { opacity: 1; } } /* قبل: الصورة كما أرسلها العميل */ .fk-src { position: relative; z-index: 1; margin: 0; justify-self: center; width: min(68%, 300px); padding: 9px; background: #fff; border-radius: 14px; box-shadow: 0 34px 60px -34px rgba(0,0,0,.95); } .fk-src img { display: block; width: 100%; height: auto; border-radius: 8px; } .fk-src figcaption { padding: 11px 4px 3px; text-align: center; } .fk-src figcaption b { display: block; font-family: var(--ar-display); font-weight: 800; font-size: 13.5px; line-height: 1.5; color: #111; } .fk-src figcaption span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.52); } /* بعد: النتائج بتدرّج بسيط يعطي إحساس الموجة */ .fk-outs { position: relative; z-index: 1; display: grid; gap: clamp(20px, 3.4vw, 32px); } .fk-out { position: relative; display: grid; gap: 10px; } .fk-out { width: calc(100% - 52px); justify-self: end; } .fk-after .fk-ttl { padding-inline-start: 46px; } .pr-lbl { font-size: 12px; font-weight: 700; color: var(--fg2); text-align: center; } .pr-lbl::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-end: 7px; border-radius: 50%; background: var(--lime); vertical-align: middle; } .tf-o { position: relative; width: 100%; overflow: hidden; background: #111; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 34px 54px -34px rgba(0,0,0,.9); } .tf-o img, .tf-o video { display: block; width: 100%; height: 100%; object-fit: cover; } .tf-v { aspect-ratio: 9 / 16; } .tf-p { aspect-ratio: 1328 / 1760; display: block; padding: 0; } .tf-o { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .fk-out:hover .tf-o { transform: translateY(-7px); box-shadow: 0 0 0 1px rgba(198,255,51,.4), 0 40px 60px -30px rgba(0,0,0,.95); } .tf-p img { transition: transform 1.2s var(--ease-out); } .tf-p:hover img { transform: scale(1.04); } .tf-snd { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s, color .2s; } .tf-snd svg { width: 16px; height: 16px; grid-area: 1 / 1; } .tf-snd::after { content: ''; grid-area: 1 / 1; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); } .tf-snd[aria-pressed="true"] { background: var(--lime); color: #000; } .tf-snd[aria-pressed="true"]::after { display: none; } .show-acts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: clamp(28px, 3.4vw, 44px); } .show-acts .bts { padding: 12px 16px; } @media (max-width: 640px) { .show-acts { flex-direction: column; } .show-acts .btn { justify-content: center; } } @media (min-width: 1000px) { .fk { grid-template-columns: clamp(250px, 21vw, 320px) minmax(0, 1fr); align-items: center; column-gap: clamp(64px, 7vw, 140px); padding: clamp(24px, 2.4vw, 38px); } .fk { align-items: stretch; } .fk-side { align-content: start; gap: 18px; } .fk-before .fk-src { margin-block: auto; } .fk-src::after, .fk-src::before { inset-inline-start: -7px; bottom: auto; top: 42%; margin-inline-start: 0; margin-top: -6px; } .fk-after .fk-outs { margin-block: auto; } .fk-src { width: 100%; padding: 11px; } .fk-src figcaption b { font-size: 14.5px; } .fk-outs { --rh: clamp(250px, 25vw, 420px); grid-auto-flow: column; justify-content: space-between; align-items: center; gap: clamp(16px, 1.8vw, 30px); } .fk-out { width: auto; justify-self: auto; } .fk-after .fk-ttl { padding-inline-start: 0; } .fk-out .tf-o { height: var(--rh); width: auto; } /* تدرّج الموجة: الأوسط أعلى قليلاً */ .fk-out.o1 { margin-top: clamp(30px, 4vw, 64px); } .fk-out.o3 { margin-top: clamp(30px, 4vw, 64px); } } .case2 .fk-outs { --rh: clamp(210px, 21vw, 330px); } .case2 .pr-lbl { color: rgba(255,255,255,.82); } .case2 .fk-ttl { border-bottom-color: rgba(255,255,255,.28); } .case2 .fk-after .fk-ttl { border-bottom-color: rgba(198,255,51,.65); } @media (prefers-reduced-motion: reduce) { .fk.in .fk-lines .bl { animation: none; stroke-dashoffset: 0; } .fk.in .fk-lines .ah { animation: none; opacity: 1; } } /* ═════════ آلية العمل: شريط الطيف — كل محطة بلون من ألوان الهوية ═════════ */ #how { padding-bottom: clamp(56px, 6vw, 96px); } .spec { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #000 0%, #000 17%, var(--violet) 33%, var(--violet) 42%, var(--lime) 58%, var(--lime) 67%, #fff 83%, #fff 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 44px 80px -54px rgba(0,0,0,.5); } .spec::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(grain.png) repeat; background-size: 128px; opacity: .5; } .spec-list { position: relative; z-index: 2; display: grid; grid-auto-rows: 1fr; } .sp { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; padding: 24px 22px 28px; } .sp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sp-n { font-size: clamp(3rem, 13vw, 4.4rem); line-height: .82; font-stretch: 125%; } .sp-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; } .sp-ic svg { width: 21px; height: 21px; } .sp-body b { display: block; font-family: var(--ar-display); font-weight: 800; font-size: 1.3rem; line-height: 1.45; } .sp-body p { margin-top: 4px; font-size: .94rem; line-height: 1.75; } .sp-meta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; height: 28px; padding-inline: 11px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; font-weight: 700; } .sp-meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sp-1 { color: #fff; } .sp-1 .sp-n { color: var(--lime); } .sp-1 .sp-ic { background: var(--lime); color: #000; } .sp-1 p { color: rgba(255,255,255,.7); } .sp-1 .sp-meta { color: var(--lime); } .sp-2 { color: #fff; } .sp-2 .sp-n { color: var(--lime); } .sp-2 .sp-ic { background: #000; color: var(--lime); } .sp-2 p { color: rgba(255,255,255,.84); } .sp-3 { color: #000; } .sp-3 .sp-n { color: var(--violet); } .sp-3 .sp-ic { background: #000; color: var(--lime); } .sp-3 p { color: rgba(0,0,0,.72); } .sp-4 { color: #000; } .sp-4 .sp-n { color: var(--violet); } .sp-4 .sp-ic { background: var(--violet); color: #fff; } .sp-4 p { color: rgba(0,0,0,.64); } .sp-4 .sp-meta { color: var(--violet); } .spec-wave { display: none; } /* الظهور: الطيف ينفتح من أول محطة ثم تظهر النصوص تباعاً */ /* المراقَب هو الغلاف: Chrome لا يعدّ عنصراً مقصوصاً بالكامل بـ clip-path ظاهراً */ .spec-rv.rv { opacity: 1; transform: none; } .spec-rv.rv .spec { clip-path: inset(0 0 100% 0 round 28px); transition: clip-path 1.5s var(--ease-out); } .spec-rv.rv .sp > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease-out); } .spec-rv.rv.in .sp > * { opacity: 1; transform: none; } .spec-rv.rv.in .sp-1 > * { transition-delay: .2s; } .spec-rv.rv.in .sp-2 > * { transition-delay: .45s; } .spec-rv.rv.in .sp-3 > * { transition-delay: .7s; } .spec-rv.rv.in .sp-4 > * { transition-delay: .95s; } @media (min-width: 900px) { .spec { background: linear-gradient(to left, #000 0%, #000 17%, var(--violet) 33%, var(--violet) 42%, var(--lime) 58%, var(--lime) 67%, #fff 83%, #fff 100%); } [dir="ltr"] .spec { background: linear-gradient(to right, #000 0%, #000 17%, var(--violet) 33%, var(--violet) 42%, var(--lime) 58%, var(--lime) 67%, #fff 83%, #fff 100%); } .spec-list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; } .sp { min-height: clamp(270px, 20.5vw, 312px); padding: 24px 26px 26px; gap: 18px; } .sp-n { font-size: clamp(3rem, 4.3vw, 4.3rem); } .sp-meta { margin-top: 12px; } /* خيط موجي يعبر المحطات؛ بمزج «الفرق» يصير أبيض على الأسود، ليمونياً على البنفسجي، بنفسجياً على الليموني، أسود على الأبيض */ .spec-wave { display: block; position: absolute; z-index: 1; left: 0; width: 100%; top: 28%; height: 18%; pointer-events: none; mix-blend-mode: difference; } .spec-wave path { fill: none; stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .spec-rv.rv .spec { clip-path: inset(0 0 0 100% round 28px); } [dir="ltr"] .spec-rv.rv .spec { clip-path: inset(0 100% 0 0 round 28px); } } .spec-rv.rv.in .spec, [dir="ltr"] .spec-rv.rv.in .spec { clip-path: inset(0 0 0 0 round 28px); } @media (prefers-reduced-motion: reduce) { .spec-rv.rv .spec, [dir="ltr"] .spec-rv.rv .spec { clip-path: none; transition: none; } .spec-rv.rv .sp > * { opacity: 1; transform: none; transition: none; } } /* ═════════ الخطوات: مسار خطّي ═════════ */ .flow { position: relative; display: grid; } .flow-line { display: none; } .fstep { position: relative; display: grid; grid-template-columns: 66px 1fr; column-gap: 18px; align-items: center; padding-bottom: 38px; } .fstep::before { content: ''; position: absolute; top: 72px; bottom: 6px; inset-inline-start: 32px; width: 2px; background: repeating-linear-gradient(180deg, var(--violet) 0 7px, transparent 7px 13px); } .fstep:last-child { padding-bottom: 0; } .fstep:last-child::before { display: none; } .fnode { grid-row: span 2; position: relative; width: 66px; height: 66px; border-radius: 50%; background: #000; color: var(--lime); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--bg), 0 18px 30px -18px rgba(125,57,235,.8); transition: transform .5s var(--ease-out), background-color .3s, color .3s; } .fnode svg { width: 26px; height: 26px; } .fnode .n { position: absolute; top: -7px; inset-inline-end: -10px; min-width: 28px; height: 22px; padding-inline: 5px; border-radius: 7px; background: var(--violet); color: #fff; font-size: 11px; display: grid; place-items: center; } .fstep:last-child .fnode { background: var(--lime); color: #000; } .fstep b { font-family: var(--ar-display); font-weight: 800; font-size: 1.15rem; line-height: 1.45; align-self: end; } .fstep p { font-size: .9rem; color: var(--fg2); line-height: 1.7; align-self: start; } .fstep:hover .fnode { transform: rotate(-8deg) scale(1.07); } @media (min-width: 900px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 4px; } .flow-line { display: block; position: absolute; left: 0; top: 4px; width: 100%; height: 160px; overflow: visible; pointer-events: none; clip-path: inset(0 0 0 100%); transition: clip-path 1.8s var(--ease-out) .2s; } [dir="ltr"] .flow-line { transform: scaleX(-1); } .flow.in .flow-line { clip-path: inset(0 0 0 0); } .flow-line path { fill: none; stroke: var(--violet); stroke-width: 2; stroke-dasharray: 8 10; vector-effect: non-scaling-stroke; } .fstep { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; } .fstep::before { display: none; } /* أول ابن هو المسار نفسه، فالخطوة الأولى زوجية: العقدة تتعرّج والنصوص تبقى على خط أفقي واحد */ .fstep:nth-child(odd) .fnode { margin-top: 60px; } .fstep:nth-child(even) .fnode { margin-bottom: 60px; } .fnode { width: 92px; height: 92px; box-shadow: 0 0 0 8px var(--bg), 0 24px 40px -22px rgba(125,57,235,.9); } .fnode svg { width: 34px; height: 34px; } .fstep b, .fstep p { align-self: center; } .fstep b { margin-top: 28px; font-size: 1.24rem; line-height: 1.4; } .fstep p { margin-top: 8px; max-width: 14.5rem; font-size: .92rem; line-height: 1.75; text-wrap: balance; } } /* ═════════ الأسئلة ═════════ */ .faq { border-top: 1.5px solid var(--fg); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; display: flex; align-items: center; gap: 16px; padding-block: 22px; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq summary .num { width: 30px; flex: none; font-size: 13px; color: var(--pop); } .faq summary b { flex: 1 1 auto; font-family: var(--ar-display); font-weight: 700; font-size: clamp(1.02rem, 2.2vw, 1.22rem); line-height: 1.6; } .faq .pm { width: 38px; height: 38px; flex: none; border-radius: 10px; border: 1px solid var(--line2); display: grid; place-items: center; transition: background-color .25s, border-color .25s, transform .35s var(--ease-out); } .faq .pm::before, .faq .pm::after { content: ''; grid-area: 1 / 1; width: 13px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out); } .faq .pm::after { transform: rotate(90deg); } .faq details[open] .pm { background: var(--black); border-color: var(--black); color: var(--lime); } .faq details[open] .pm::after { transform: rotate(0); } .faq summary:hover .pm { border-color: var(--fg); } .faq .ans { padding-bottom: 24px; padding-inline: 46px 54px; color: var(--fg2); font-size: .96rem; line-height: 1.95; max-width: 46rem; } .faq details[open] .ans { animation: paneIn .45s var(--ease-out); } .faq-more { margin-top: 22px; font-size: .95rem; color: var(--fg2); } .faq-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: var(--r); background: #000; color: #fff; text-align: start; transition: transform .2s var(--ease); } .faq-toggle:active { transform: scale(.99); } .faq-toggle .t b { display: block; font-family: var(--ar-display); font-weight: 800; font-size: 1.12rem; line-height: 1.5; } .faq-toggle .t small { display: block; font-size: 13px; color: rgba(255,255,255,.62); margin-top: 2px; } .faq-toggle .qs { display: flex; gap: 4px; margin-inline-start: auto; direction: ltr; } .faq-toggle .qs i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.22); } .faq-toggle .qs i:nth-child(-n+3) { background: var(--lime); } .faq-toggle .bpm { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--lime); color: #000; display: grid; place-items: center; transition: transform .45s var(--ease-out); } .faq-toggle .bpm::before, .faq-toggle .bpm::after { content: ''; grid-area: 1 / 1; width: 16px; height: 2.5px; border-radius: 2px; background: currentColor; } .faq-toggle .bpm::after { transform: rotate(90deg); } .faq-toggle[aria-expanded="true"] .bpm { transform: rotate(135deg); } .faq-list { margin-top: 18px; } .faq-assure { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; background: var(--surf); } .faq-assure .guar { font-size: 12.5px; gap: 8px 16px; } @media (max-width: 560px) { .faq-assure { flex-direction: column; align-items: stretch; } .faq-assure .btn { justify-content: center; } } .faq-list.opening { animation: paneIn .55s var(--ease-out); } @media (max-width: 480px) { .faq-toggle .qs { display: none; } } /* ═════════ الدعوة الختامية: لوحة الألوان كاملة ═════════ */ .cta-spec { --top: clamp(170px, 24vw, 300px); position: relative; overflow: hidden; isolation: isolate; color: var(--white); background: linear-gradient(180deg, var(--white) 0, var(--lime) calc(var(--top) * .46), var(--violet) calc(var(--top) - 10px), var(--black) 100%); padding-top: var(--top); padding-bottom: clamp(80px, 10vw, 130px); } .cta-spec::after { content: ''; position: absolute; inset: 0; z-index: -1; background: url(grain.png) repeat; background-size: 128px; opacity: .7; pointer-events: none; } .cta-spec .pat { z-index: -1; } .cta-in { position: relative; max-width: 46rem; } .cta-spec .sh-meta { color: var(--white); } .cta-spec .sh-rule { background: rgba(255,255,255,.3); } .cta-spec .d1 { font-size: clamp(2.6rem, 9vw, 5rem); } .cta-spec .lede { margin-top: 22px; } .cta-spec .lede { color: rgba(255,255,255,.82); } .cta-price { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; font-weight: 700; } .cta-price .num { font-size: 2.2rem; line-height: 1; color: var(--lime); } .cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; } .cta-act .note { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.78); } /* ═════════ الفوتر ═════════ */ .foot { position: relative; isolation: isolate; padding-top: clamp(110px, 14vw, 190px); padding-bottom: 28px; overflow: hidden; } .foot-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -4; background: #000; } .foot-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; /* يبدأ أسود تماماً (امتداد للقسم فوقه) ثم ينحسر بمنحنى ناعم فيظهر الفيديو، ويعود يغمق تحت النصوص */ background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.985) 6%, rgba(0,0,0,.94) 12%, rgba(0,0,0,.86) 18%, rgba(0,0,0,.75) 24%, rgba(0,0,0,.62) 30%, rgba(0,0,0,.5) 36%, rgba(0,0,0,.4) 42%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.34) 54%, rgba(0,0,0,.42) 62%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.76) 84%, rgba(0,0,0,.9) 100%); } .foot.grain::after { z-index: -1; opacity: .4; } .foot-tag, .foot-col a, .foot-col h4, .foot-base { text-shadow: 0 1px 14px rgba(0,0,0,.65); } .foot-reel { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; height: 30px; padding-inline: 11px; border-radius: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.16); color: #fff; } .foot-reel .live { width: 6px; height: 6px; } @media (min-width: 900px) { .foot { min-height: 94vh; display: flex; flex-direction: column; justify-content: flex-end; } .foot > .wrap { width: 100%; } } .foot-grid { display: grid; gap: 38px; } .foot-logo { display: block; color: var(--white); width: min(220px, 56vw); } .foot-logo svg { width: 100%; height: auto; } .foot-tag { margin-top: 18px; color: var(--fg2); max-width: 22rem; font-size: .95rem; } .foot-col h4 { font-size: 12px; font-weight: 700; color: var(--fg3); margin-bottom: 14px; } .foot-col a { display: block; width: fit-content; padding-block: 5px; font-weight: 600; color: var(--fg2); transition: color .2s; } .foot-col a:hover { color: var(--lime); } .foot-mail { font-family: var(--lat); font-stretch: 105%; font-weight: 700; direction: ltr; color: var(--white) !important; } .foot-wa { font-family: var(--lat); font-weight: 800; font-stretch: 112%; font-size: 1.3rem; color: var(--white) !important; direction: ltr; } .foot-word { margin-top: clamp(40px, 7vw, 90px); font-family: var(--lat); font-weight: 800; font-stretch: 125%; letter-spacing: -.05em; line-height: .78; font-size: clamp(4.6rem, 24vw, 19rem); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.62); text-align: center; direction: ltr; user-select: none; } .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg3); } @media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; } } /* ═════════ الإشعار والشريط السفلي ═════════ */ .toast { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 90; width: 300px; display: none; padding: 16px; border-radius: 16px; background: var(--black); color: var(--white); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); transform: translateY(16px); opacity: 0; transition: transform .5s var(--ease-out), opacity .4s; } @media (min-width: 768px) { .toast { display: block; } } .toast.show { transform: none; opacity: 1; } .toast .t-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--black); background: var(--lime); border-radius: 6px; padding: 3px 8px; } .toast p { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.7; } .toast .btn { margin-top: 12px; } .toast .x { position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: rgba(255,255,255,.6); } .toast .x:hover { color: #fff; background: rgba(255,255,255,.08); } .mbar { position: fixed; inset-inline: 10px; bottom: 10px; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 10px; padding-inline-start: 16px; border-radius: 16px; color: var(--white); background: rgba(0,0,0,.86); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); margin-bottom: env(safe-area-inset-bottom); transform: translateY(140%); transition: transform .5s var(--ease-out); } .mbar.show { transform: none; } .mbar small { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); line-height: 1.4; } .mbar b { display: flex; align-items: baseline; gap: 5px; font-size: 14px; } .mbar b .num { font-size: 1.3rem; color: var(--lime); line-height: 1; } @media (min-width: 768px) { .mbar { display: none; } } @media (max-width: 767px) { body.has-mbar { padding-bottom: 86px; } } /* ═════════ الظهور عند التمرير ═════════ */ .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease-out); } .rv.in { opacity: 1; transform: none; } .rv-s > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease-out); } .rv-s.in > * { opacity: 1; transform: none; } .rv-s.in > *:nth-child(2) { transition-delay: .08s; } .rv-s.in > *:nth-child(3) { transition-delay: .16s; } .rv-s.in > *:nth-child(4) { transition-delay: .24s; } .rv-s.in > *:nth-child(5) { transition-delay: .32s; } .rv-s.in > *:nth-child(6) { transition-delay: .4s; } .rv-s.in > *:nth-child(n+7) { transition-delay: .46s; } .rv .sh-rule, .sh.rv .sh-rule { transform: scaleX(0); transition: transform 1.1s var(--ease-out) .2s; } .rv.in .sh-rule { transform: scaleX(1); } .enter > * { animation: enter 1s var(--ease-out) both; } .enter > *:nth-child(2) { animation-delay: .1s; } .enter > *:nth-child(3) { animation-delay: .2s; } .enter > *:nth-child(4) { animation-delay: .3s; } .enter > *:nth-child(5) { animation-delay: .4s; } .enter > *:nth-child(6) { animation-delay: .5s; } @keyframes enter { from { opacity: 0; transform: translateY(28px); } } .d1.enter .ln { animation: lineUp 1.1s var(--ease-out) both; } .d1.enter .ln:nth-child(2) { animation-delay: .12s; } .d1.enter .ln:nth-child(3) { animation-delay: .24s; } @keyframes lineUp { from { opacity: 0; transform: translateY(.45em); } } .nav { animation: navIn .8s var(--ease-out) both .15s; } @keyframes navIn { from { opacity: 0; transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv, .rv-s > * { opacity: 1; transform: none; transition: none; } .enter > *, .d1.enter .ln, .nav { animation: none; } .marq-track, .phone .bar i, .live::after { animation: none; } } /* ═════════ صفحات «من نحن» و«الكواليس» ═════════ */ .page-hero { padding-top: calc(var(--nav-h) + 70px); padding-bottom: clamp(64px, 9vw, 120px); overflow: hidden; } .page-hero .d1 { max-width: 15ch; } .page-hero .lede { margin-top: 24px; max-width: 40rem; } @media (min-width: 960px) { .page-hero { padding-top: calc(var(--nav-h) + 130px); } } .story { display: grid; gap: 30px; } .story-lead { font-family: var(--ar-display); font-weight: 700; font-size: clamp(1.25rem, 2.8vw, 1.7rem); line-height: 1.75; } .story .txt { font-size: 1.02rem; } .story .txt + .txt { margin-top: 18px; } @media (min-width: 900px) { .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; } } .cells { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1.5px solid var(--fg); } .cell { padding: 24px 0 26px; border-bottom: 1px solid var(--line); position: relative; } .cell .num { font-size: 13px; color: var(--pop); } .cell b { display: block; margin-top: 12px; font-family: var(--ar-display); font-weight: 800; font-size: 1.15rem; line-height: 1.5; } .cell p { margin-top: 6px; font-size: .92rem; color: var(--fg2); line-height: 1.8; } @media (min-width: 700px) { .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cell { padding: 28px 26px 32px 0; } .cell:nth-child(even) { border-inline-start: 1px solid var(--line); padding-inline-start: 26px; } } @media (min-width: 1000px) { .cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cells.c3 .cell { padding-inline-start: 26px; border-inline-start: 1px solid var(--line); } .cells.c3 .cell:nth-child(3n+1) { border-inline-start: 0; padding-inline-start: 0; } } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags li { height: 42px; display: inline-flex; align-items: center; padding-inline: 16px; border-radius: 11px; border: 1px solid var(--line2); font-weight: 700; font-size: 14px; } /* خط الإنتاج (الكواليس) */ .pipe { position: relative; display: grid; gap: 22px; padding-inline-start: 34px; } .pipe::before { content: ''; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 10px; width: 2px; background: linear-gradient(180deg, var(--line2), var(--lime) 70%, var(--lime)); } .node { position: relative; } .node::before { content: ''; position: absolute; inset-inline-start: -30px; top: 22px; width: 14px; height: 14px; border-radius: 4px; background: var(--bg); border: 2px solid var(--line2); } .node.mile::before { background: var(--lime); border-color: var(--lime); } .node.fin::before { width: 20px; height: 20px; inset-inline-start: -33px; background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 6px rgba(198,255,51,.18); } .step-card { position: relative; overflow: hidden; padding: 24px 22px 24px; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); transition: border-color .3s, background-color .3s; } .step-card:hover { border-color: var(--lime); background: var(--surf2); } .step-card .big { position: absolute; inset-inline-end: 14px; top: 4px; font-size: 5.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line2); transition: -webkit-text-stroke-color .3s; pointer-events: none; } .step-card:hover .big { -webkit-text-stroke-color: var(--lime); } .step-card .h3 { position: relative; } .step-card p { position: relative; margin-top: 8px; font-size: .95rem; line-height: 1.9; color: var(--fg2); max-width: 40rem; } .step-card .hush { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--fg3); } .step-card .hush::before { content: ''; width: 12px; height: 2px; background: var(--violet); } .mile-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 700; font-size: .95rem; } .mile-cap .lat { color: var(--lime); } .mile-img { border-radius: var(--r); overflow: hidden; background: #111; border: 1px solid var(--line); } .mile-img img { width: 100%; height: auto; } .mile-img figcaption { padding: 12px 14px; font-size: .85rem; color: var(--fg2); border-top: 1px solid var(--line); } .mile-2 { display: grid; gap: 12px; } @media (min-width: 700px) { .mile-2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .pipe { padding-inline-start: 56px; gap: 26px; } .pipe::before { inset-inline-start: 18px; } .node::before { inset-inline-start: -45px; } .node.fin::before { inset-inline-start: -48px; } } .result { display: grid; gap: 22px; align-items: center; } @media (min-width: 900px) { .result { grid-template-columns: 360px 1fr; gap: 50px; } } .phone-mini { position: relative; width: min(100%, 340px); border-radius: 30px; overflow: hidden; cursor: pointer; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 90px -40px rgba(198,255,51,.35); } .phone-mini video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; } .sound-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 14px; border-radius: 10px; background: var(--lime); color: var(--black); font-weight: 700; font-size: 13px; white-space: nowrap; transition: opacity .3s, transform .3s; } .phone-mini:hover .sound-hint { transform: translateX(-50%) scale(1.04); } .phone-mini.sound-on .sound-hint { opacity: 0; }